# 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;