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 69              26x 107x   26x       44x   44x       44x 3x   3x             41x 41x             41x 9x   32x             63x           63x 18x 11x     18x 18x     45x 45x        
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, children, ...rest } = this.props;
 
      return (
        <ThemeConsumer>
          {context => {
            // If user isn't using ThemeProvider
            if (!context) {
              const props = { ...rest, theme: DefaultTheme, children };
 
              return isClassComponent(WrappedComponent) ? (
                <WrappedComponent ref={forwardedRef} {...props} />
              ) : (
                <WrappedComponent {...props} />
              );
            }
 
            const { theme, updateTheme } = context;
            const props = {
              theme,
              updateTheme,
              ...merge({}, themeKey && theme[themeKey], rest),
              children,
            };
 
            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) => (
      <ThemedComponent {...props} forwardedRef={ref} />
    );
 
    forwardRef.displayName = name;
    return hoistNonReactStatics(React.forwardRef(forwardRef), WrappedComponent);
  }
 
  ThemedComponent.displayName = name;
  return ThemedComponent;
};
 
export default withTheme;