All files / config ThemeProvider.js

61.54% Statements 8/13
100% Branches 0/0
28.57% Functions 2/7
72.73% Lines 8/11

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;