-
Notifications
You must be signed in to change notification settings - Fork 46
/
UiProvider.js
57 lines (44 loc) · 1.9 KB
/
UiProvider.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import React, { useMemo } from 'react'
import { pug, observer } from 'startupjs'
import { setDefaultVariables } from '@startupjs/babel-plugin-rn-stylename-to-style/variables'
import ToastProvider from './components/toast/ToastProvider'
import DialogsProvider from './components/dialogs/DialogsProvider'
import Portal from './components/Portal'
import CssVariables from './theming/CssVariables'
import defaultPalette from './theming/defaultPalette'
import defaultVariables from './theming/defaultUiVariables'
import { transformOverrides } from './theming/helpers'
import StyleContext from './StyleContext'
// set default css variables as early as possible
setDefaultVariables(defaultVariables)
export default observer(function UiProvider ({ children, style, palette, colors, componentColors }) {
const staticOverrides = style?.[':root']
const cssVariablesMeta = useMemo(() => {
// dynamic overrides take priority over static
if (palette || colors || componentColors) return { palette, colors, componentColors }
if (!staticOverrides) return
const meta = { palette: {}, colors: {}, componentColors: {} }
const transformedOverrides = transformOverrides(staticOverrides, defaultPalette.colors, defaultPalette.Color)
for (const key in transformedOverrides) {
const isColor = key.includes('--color')
const isPaletteColor = key.includes('--palette')
const value = transformedOverrides[key]
const path = isPaletteColor
? 'palette'
: isColor
? 'colors'
: 'componentColors'
meta[path][key] = value
}
return meta
}, [JSON.stringify(style?.overrides), JSON.stringify(palette), JSON.stringify(colors), JSON.stringify(componentColors)])
return pug`
if cssVariablesMeta
CssVariables(meta=cssVariablesMeta)
StyleContext.Provider(value=style)
Portal.Provider
ToastProvider
= children
DialogsProvider
`
})