-
Notifications
You must be signed in to change notification settings - Fork 1.8k
/
index.tsx
139 lines (120 loc) · 3.33 KB
/
index.tsx
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
/**
* Copyright IBM Corp. 2016, 2023
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import cx from 'classnames';
import PropTypes from 'prop-types';
import React, { ElementType, useMemo, type PropsWithChildren } from 'react';
import { usePrefix } from '../../internal/usePrefix';
import { PolymorphicProps } from '../../types/common';
import { LayerContext } from '../Layer/LayerContext';
import { useMatchMedia } from '../../internal/useMatchMedia';
interface GlobalThemeProps {
theme?: 'white' | 'g10' | 'g90' | 'g100';
children?: React.ReactNode;
}
export const ThemeContext = React.createContext<GlobalThemeProps>({
theme: 'white',
});
export const GlobalTheme = React.forwardRef(function GlobalTheme(
{ children, theme }: PropsWithChildren<GlobalThemeProps>,
ref: React.Ref<unknown>
) {
const value = useMemo(() => {
return {
theme,
};
}, [theme]);
const childrenWithProps = React.cloneElement(
children as React.ReactElement<any>,
{ ref: ref }
);
return (
<ThemeContext.Provider value={value}>
{childrenWithProps}
</ThemeContext.Provider>
);
});
GlobalTheme.propTypes = {
/**
* Provide child elements to be rendered inside of `GlobalTheme`, this is
* typically the root of your app
*/
children: PropTypes.node,
/**
* Specify the global theme for your app
*/
theme: PropTypes.oneOf(['white', 'g10', 'g90', 'g100']),
};
type ThemeBaseProps = GlobalThemeProps & {
className?: string;
};
type ThemeProps<E extends ElementType> = PolymorphicProps<E, ThemeBaseProps>;
/**
* Specify the theme to be applied to a page, or a region in a page
*/
export function Theme<E extends ElementType = 'div'>({
as: BaseComponent = 'div' as E,
className: customClassName,
theme,
...rest
}: ThemeProps<E>) {
const prefix = usePrefix();
const className = cx(customClassName, {
[`${prefix}--white`]: theme === 'white',
[`${prefix}--g10`]: theme === 'g10',
[`${prefix}--g90`]: theme === 'g90',
[`${prefix}--g100`]: theme === 'g100',
[`${prefix}--layer-one`]: true,
});
const value = React.useMemo(() => {
const isDark = theme && ['g90', 'g100'].includes(theme);
return {
theme,
isDark,
};
}, [theme]);
const BaseComponentAsAny = BaseComponent as any;
return (
<ThemeContext.Provider value={value}>
<LayerContext.Provider value={1}>
<BaseComponentAsAny {...rest} className={className} />
</LayerContext.Provider>
</ThemeContext.Provider>
);
}
Theme.propTypes = {
/**
* Specify a custom component or element to be rendered as the top-level
* element in the component
*/
as: PropTypes.oneOfType([
PropTypes.func,
PropTypes.string,
PropTypes.elementType,
]),
/**
* Provide child elements to be rendered inside of `Theme`
*/
children: PropTypes.node,
/**
* Provide a custom class name to be used on the outermost element rendered by
* the component
*/
className: PropTypes.string,
/**
* Specify the theme
*/
theme: PropTypes.oneOf(['white', 'g10', 'g90', 'g100']),
};
/**
* Get access to the current theme
*/
export function useTheme() {
return React.useContext(ThemeContext);
}
export function usePrefersDarkScheme() {
return useMatchMedia('(prefers-color-scheme: dark)');
}