You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
2.3 KiB
67 lines
2.3 KiB
import React from 'react';
|
|
import deepmerge from 'deepmerge';
|
|
import colors from './colors';
|
|
import darkColors from './colorsDark';
|
|
export const ThemeContext = React.createContext({
|
|
theme: {
|
|
colors,
|
|
},
|
|
});
|
|
export default class ThemeProvider extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.updateTheme = (updates) => {
|
|
this.setState(({ theme }) => ({
|
|
theme: deepmerge(theme, updates),
|
|
}));
|
|
};
|
|
this.replaceTheme = (theme) => {
|
|
this.setState(() => ({
|
|
theme: deepmerge(this.defaultTheme, theme),
|
|
}));
|
|
};
|
|
this.getTheme = () => this.state.theme;
|
|
const defaultColors = props.useDark ? darkColors : colors;
|
|
this.defaultTheme = deepmerge({
|
|
colors: defaultColors,
|
|
}, props.theme);
|
|
this.state = {
|
|
theme: this.defaultTheme,
|
|
useDark: Boolean(props.useDark),
|
|
};
|
|
}
|
|
static getDerivedStateFromProps(props, state) {
|
|
const { useDark } = props;
|
|
const isTheme = (theme) => {
|
|
return !(Object.keys(theme).length === 0 && theme.constructor === Object);
|
|
};
|
|
//isTheme will check if the theme is provided by user and will update the theme only if its provided by user
|
|
//Not checking if the theme exist or not will always result in if statement getting executed as props.theme !== state.theme if theme is not provided
|
|
if (useDark !== state.useDark ||
|
|
(isTheme(props.theme) && props.theme !== state.theme)) {
|
|
const defaultColors = useDark ? darkColors : colors;
|
|
return {
|
|
theme: deepmerge(state.theme, deepmerge({
|
|
colors: defaultColors,
|
|
}, props.theme)),
|
|
useDark,
|
|
};
|
|
}
|
|
return null;
|
|
}
|
|
render() {
|
|
return (<ThemeContext.Provider value={{
|
|
theme: this.state.theme,
|
|
updateTheme: this.updateTheme,
|
|
replaceTheme: this.replaceTheme,
|
|
}}>
|
|
{this.props.children}
|
|
</ThemeContext.Provider>);
|
|
}
|
|
}
|
|
ThemeProvider.defaultProps = {
|
|
theme: {},
|
|
useDark: false,
|
|
};
|
|
export const ThemeConsumer = ThemeContext.Consumer;
|