StoryBook: Fully support themes in pop-up components

This commit is contained in:
Ken Powers 2020-02-06 14:28:01 -05:00 committed by GitHub
parent 6a9d8b86d8
commit 0fc178d887
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 71 additions and 11 deletions

View 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>
);
};