All files ThemeProvider.js

100% Statements 13/13
100% Branches 0/0
100% Functions 7/7
100% Lines 11/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            27x               25x   25x           25x           1x           1x         1x     27x                           27x         27x       27x  
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;