All files / config withTheme.js

100% Statements 21/21
100% Branches 17/17
100% Functions 5/5
100% Lines 21/21

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 68              24x 122x   24x       47x   47x       47x 3x   3x             44x 44x           44x 8x   36x             75x           75x 21x 10x     21x 21x     54x 54x        
import React from 'react';
import merge from 'lodash.merge';
import hoistNonReactStatics from 'hoist-non-react-statics';
 
import { ThemeConsumer } from './ThemeProvider';
import DefaultTheme from './theme';
 
const isClassComponent = Component =>
  Boolean(Component.prototype && Component.prototype.isReactComponent);
 
const withTheme = (WrappedComponent, themeKey) => {
  class ThemedComponent extends React.Component {
    render() {
      /* eslint-disable react/prop-types */
      const { forwardedRef, ...rest } = this.props;
 
      return (
        <ThemeConsumer>
          {context => {
            // If user isn't using ThemeProvider
            if (!context) {
              let props = { ...rest, theme: DefaultTheme };
 
              return isClassComponent(WrappedComponent) ? (
                <WrappedComponent ref={forwardedRef} {...props} />
              ) : (
                <WrappedComponent {...props} />
              );
            }
 
            const { theme, updateTheme } = context;
            const props = {
              theme,
              updateTheme,
              ...merge({}, themeKey && theme[themeKey], rest),
            };
 
            if (isClassComponent(WrappedComponent)) {
              return <WrappedComponent ref={forwardedRef} {...props} />;
            }
            return <WrappedComponent {...props} />;
          }}
        </ThemeConsumer>
      );
    }
  }
 
  const name = themeKey
    ? `Themed.${themeKey}`
    : `Themed.${WrappedComponent.displayName ||
        WrappedComponent.name ||
        'Component'}`;
 
  if (isClassComponent(WrappedComponent)) {
    const forwardRef = (props, ref) => {
      return <ThemedComponent {...props} forwardedRef={ref} />;
    };
 
    forwardRef.displayName = name;
    return hoistNonReactStatics(React.forwardRef(forwardRef), WrappedComponent);
  }
 
  ThemedComponent.displayName = name;
  return ThemedComponent;
};
 
export default withTheme;