Press n or j to go to the next uncovered block, b, p or k for the previous block.
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 | 6x 6x 6x 6x 6x 6x 6x 6x | import React from 'react'; import PropTypes from 'prop-types'; import deepmerge from 'deepmerge'; import colors from './colors'; export const ThemeContext = React.createContext({ theme: { colors, }, }); export default class ThemeProvider extends React.Component { constructor(props) { super(props); this.defaultTheme = deepmerge( { colors, }, props.theme ); this.state = { theme: this.defaultTheme, }; } updateTheme = updates => { this.setState(({ theme }) => ({ theme: deepmerge(theme, updates), })); }; replaceTheme = theme => { this.setState(() => ({ theme: deepmerge(this.defaultTheme, theme), })); }; getTheme = () => this.state.theme; render() { return ( <ThemeContext.Provider value={{ theme: this.state.theme, updateTheme: this.updateTheme, replaceTheme: this.replaceTheme, }} > {this.props.children} </ThemeContext.Provider> ); } } ThemeProvider.propTypes = { theme: PropTypes.object, children: PropTypes.node.isRequired, }; ThemeProvider.defaultProps = { theme: {}, }; export const ThemeConsumer = ThemeContext.Consumer; |