StoryBook: Fully support themes in pop-up components
This commit is contained in:
parent
6a9d8b86d8
commit
0fc178d887
4 changed files with 71 additions and 11 deletions
40
ts/components/PopperRootContext.tsx
Normal file
40
ts/components/PopperRootContext.tsx
Normal file
|
@ -0,0 +1,40 @@
|
|||
import * as React from 'react';
|
||||
|
||||
const makeApi = (themes?: Array<string>) => ({
|
||||
createRoot: () => {
|
||||
const div = document.createElement('div');
|
||||
|
||||
if (themes) {
|
||||
themes.forEach(theme => {
|
||||
div.classList.add(`${theme}-theme`);
|
||||
});
|
||||
}
|
||||
|
||||
document.body.appendChild(div);
|
||||
|
||||
return div;
|
||||
},
|
||||
removeRoot: (root: HTMLElement) => {
|
||||
document.body.removeChild(root);
|
||||
},
|
||||
});
|
||||
|
||||
export const PopperRootContext = React.createContext(makeApi());
|
||||
|
||||
export type ThemedProviderProps = {
|
||||
themes?: Array<string>;
|
||||
children?: React.ReactChildren;
|
||||
};
|
||||
|
||||
export const ThemedProvider: React.FunctionComponent<ThemedProviderProps> = ({
|
||||
themes,
|
||||
children,
|
||||
}) => {
|
||||
const api = React.useMemo(() => makeApi(themes), [themes]);
|
||||
|
||||
return (
|
||||
<PopperRootContext.Provider value={api}>
|
||||
{children}
|
||||
</PopperRootContext.Provider>
|
||||
);
|
||||
};
|
Loading…
Add table
Add a link
Reference in a new issue