Browse Source

merge from lodash fp

pull/3/head
remorses 1 year ago
parent
commit
5e4715e665
4 changed files with 36 additions and 26 deletions
  1. +0
    -1
      demos/package.json
  2. +2
    -0
      demos/src/pages/demos/dovetail.tsx
  3. +14
    -10
      react-landing/src/LandingProvider.tsx
  4. +20
    -15
      react-landing/src/layout.tsx

+ 0
- 1
demos/package.json View File

@ -17,7 +17,6 @@
"timeout": 9999999999
},
"dependencies": {
"@chakra-ui/core": "^0.7.0",
"@mdx-js/loader": "^1.5.8",
"@mdx-js/react": "^1.5.8",
"@monaco-editor/react": "^3.1.2",

+ 2
- 0
demos/src/pages/demos/dovetail.tsx View File

@ -28,6 +28,7 @@ const Page = () => (
<LandingProvider primary='#5A38AC'>
<TopBanner
dark
// pageWidth='100%'
bg='#24114D'
heading='Check out more landing pages, we have plenty'
cta={<Link>Learn More</Link>}
@ -35,6 +36,7 @@ const Page = () => (
/>
<NavBar
logo={<img width='140px' src='/dovetail/logo.svg' />}
// pageWidth='100%'
navs={[
<a>Why DatoCMS</a>,
<a>Learn</a>,

+ 14
- 10
react-landing/src/LandingProvider.tsx View File

@ -4,8 +4,9 @@ import {
DefaultTheme,
FlexProps,
Stack,
ThemeProvider,
} from '@chakra-ui/core'
import React from 'react'
import React, { useMemo } from 'react'
import { PropagatedThemeProvider } from './layout'
export interface ThemeExtension extends DefaultTheme {
@ -46,15 +47,18 @@ export function LandingProvider({
children,
...rest
}: LandingProviderProps) {
const theme = {
colors: {
primary,
secondary,
},
sizes: {
pageContainer: pageWidth,
},
}
const theme = useMemo(
() => ({
colors: {
primary,
secondary,
},
sizes: {
pageContainer: pageWidth,
},
}),
[pageWidth, primary, secondary],
)
return (
<PropagatedThemeProvider theme={theme}>
<ColorModeProvider value={dark ? 'dark' : 'light'}>

+ 20
- 15
react-landing/src/layout.tsx View File

@ -5,11 +5,12 @@ import {
FlexProps,
Stack,
StackProps,
ThemeProvider,
useTheme,
} from '@chakra-ui/core'
import merge from 'lodash.merge'
import React, { FC, forwardRef, Fragment, useMemo } from 'react'
import { ThemeProvider } from 'emotion-theming'
import { ThemeContext } from '@emotion/core'
import merge from 'lodash/fp/merge'
import React, { FC, forwardRef, Fragment, useMemo, useContext } from 'react'
export const Col: FC<FlexProps> = forwardRef((props, ref) => {
return <Flex ref={ref} flexDir='column' {...props} />
@ -44,6 +45,7 @@ export const darkStyles = {
export function PropagatedThemeProvider({ theme, children }) {
const existingTheme = useTheme()
// console.log({ existingTheme: existingTheme.sizes })
const merged = useMemo(() => {
return merge(existingTheme, theme)
}, [theme, existingTheme])
@ -72,14 +74,17 @@ export const PageContainer: FC = forwardRef(
) => {
const Mode = dark ? DarkMode : Fragment
const styles = dark ? darkStyles : {}
const theme = {
colors: {
primary,
},
sizes: {
pageContainer: pageWidth,
},
}
const theme = useMemo(
() => ({
colors: {
primary,
},
sizes: {
pageContainer: pageWidth,
},
}),
[pageWidth, primary],
)
return (
<Col
position='relative'
@ -90,8 +95,8 @@ export const PageContainer: FC = forwardRef(
{...styles}
{...props}
>
<Mode>
<PropagatedThemeProvider theme={theme}>
<PropagatedThemeProvider theme={theme}>
<Mode>
<Col
position='absolute'
width='100%'
@ -115,8 +120,8 @@ export const PageContainer: FC = forwardRef(
>
{children}
</Stack>
</PropagatedThemeProvider>
</Mode>
</Mode>
</PropagatedThemeProvider>
</Col>
)
},

Loading…
Cancel
Save