Browse Source

landing provaider propagates theme

pull/3/head
remorses 1 year ago
parent
commit
9c39602fd9
4 changed files with 69 additions and 42 deletions
  1. +2
    -0
      react-landing/package.json
  2. +11
    -18
      react-landing/src/LandingProvider.tsx
  3. +44
    -24
      react-landing/src/layout.tsx
  4. +12
    -0
      yarn.lock

+ 2
- 0
react-landing/package.json View File

@ -28,6 +28,7 @@
"devDependencies": {
"@svgr/cli": "^5.3.0",
"@types/lodash.get": "^4.4.6",
"@types/lodash.merge": "^4.6.6",
"@types/mocha": "^5.2.7",
"@types/node": "^12.0.7",
"@types/react": "^16.9.31",
@ -48,6 +49,7 @@
"emotion-theming": "^10.0.27",
"intersection-observer": "^0.7.0",
"lodash.get": "^4.4.2",
"lodash.merge": "^4.6.2",
"react-icons": "^3.9.0",
"react-intersection-observer": "^8.26.1",
"react-mailchimp-subscribe": "^2.1.0",

+ 11
- 18
react-landing/src/LandingProvider.tsx View File

@ -1,4 +1,4 @@
import React, { FC, Fragment } from 'react'
import React, { FC, Fragment, useMemo } from 'react'
import {
ColorModeProvider,
CSSReset,
@ -9,6 +9,7 @@ import {
FlexProps,
} from '@chakra-ui/core'
import { useTheme } from 'emotion-theming'
import { PropagatedThemeProvider } from './layout'
export interface ThemeExtension extends DefaultTheme {
colors: {
@ -46,36 +47,28 @@ export function LandingProvider({
children,
...rest
}: LandingProviderProps) {
const existingTheme = useTheme()
// if (existingTheme && Object.keys(existingTheme).length) {
// console.log(existingTheme)
// return <Fragment>children</Fragment>
// }
const theme: ThemeExtension = {
...defaultTheme,
const theme = {
colors: {
...defaultTheme.colors,
primary,
secondary,
},
sizes: {
...defaultTheme.sizes,
pageContainer: '1200px',
},
fonts: {
...defaultTheme.fonts,
// body: 'Roboto',
// heading: 'Roboto',
},
}
return (
<ThemeProvider theme={theme}>
<PropagatedThemeProvider theme={theme}>
<ColorModeProvider value={dark ? 'dark' : 'light'}>
<CSSReset />
<Stack overflowX='hidden' fontFamily='Roboto, Arial' spacing='60px' {...rest}>
<Stack
overflowX='hidden'
fontFamily='Roboto, Arial'
spacing='60px'
{...rest}
>
{children}
</Stack>
</ColorModeProvider>
</ThemeProvider>
</PropagatedThemeProvider>
)
}

+ 44
- 24
react-landing/src/layout.tsx View File

@ -5,9 +5,12 @@ import {
DarkMode,
Stack,
StackProps,
useTheme,
ThemeProvider,
} from '@chakra-ui/core'
import React, { FC, forwardRef, Fragment } from 'react'
import React, { FC, forwardRef, Fragment, useMemo } from 'react'
import merge from 'lodash.merge'
export const Col: FC<FlexProps> = forwardRef((props, ref) => {
return <Flex ref={ref} flexDir='column' {...props} />
@ -48,9 +51,18 @@ export const darkStyles = {
// }
// }
export function PropagatedThemeProvider({ theme, children }) {
const existingTheme = useTheme()
const merged = useMemo(() => {
return merge(existingTheme, theme)
}, [theme, existingTheme])
return <ThemeProvider theme={merged}>{children}</ThemeProvider>
}
export type PageContainerProps = {
floatingElement?: any
dark?: boolean
primary?: string
} & StackProps
export const PageContainer: FC<PageContainerProps> = forwardRef(
@ -60,12 +72,18 @@ export const PageContainer: FC = forwardRef(
spacing = '0px',
floatingElement = null,
dark = false,
primary = undefined,
...props
},
ref,
) => {
const Mode = dark ? DarkMode : Fragment
const styles = dark ? darkStyles : {}
const theme = {
colors: {
primary,
},
}
return (
<Col
position='relative'
@ -77,29 +95,31 @@ export const PageContainer: FC = forwardRef(
{...props}
>
<Mode>
<Col
position='absolute'
width='100%'
top='0'
left='0'
right='0'
bottom='0'
align='center'
justify='center'
// overflow='hidden'
>
{floatingElement}
</Col>
<Stack
zIndex={1}
px={['0px', '0px', '20px']}
w='100%'
maxW='pageContainer'
spacing={spacing}
flex='0'
>
{children}
</Stack>
<PropagatedThemeProvider theme={theme}>
<Col
position='absolute'
width='100%'
top='0'
left='0'
right='0'
bottom='0'
align='center'
justify='center'
// overflow='hidden'
>
{floatingElement}
</Col>
<Stack
zIndex={1}
px={['0px', '0px', '20px']}
w='100%'
maxW='pageContainer'
spacing={spacing}
flex='0'
>
{children}
</Stack>
</PropagatedThemeProvider>
</Mode>
</Col>
)

+ 12
- 0
yarn.lock View File

@ -2272,6 +2272,13 @@
dependencies:
"@types/lodash" "*"
"@types/lodash.merge@^4.6.6":
version "4.6.6"
resolved "https://registry.yarnpkg.com/@types/lodash.merge/-/lodash.merge-4.6.6.tgz#b84b403c1d31bc42d51772d1cd5557fa008cd3d6"
integrity sha512-IB90krzMf7YpfgP3u/EvZEdXVvm4e3gJbUvh5ieuI+o+XqiNEt6fCzqNRaiLlPVScLI59RxIGZMQ3+Ko/DJ8vQ==
dependencies:
"@types/lodash" "*"
"@types/lodash@*", "@types/lodash@^4.14.149":
version "4.14.149"
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.149.tgz#1342d63d948c6062838fbf961012f74d4e638440"
@ -7061,6 +7068,11 @@ lodash.memoize@^4.1.2:
resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
lodash.merge@^4.6.2:
version "4.6.2"
resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
lodash.throttle@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"

Loading…
Cancel
Save