All files / Theme withStyle.jsx

34.61% Statements 9/26
0% Branches 0/12
16.66% Functions 1/6
39.13% Lines 9/23

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            1x                                                             1x         1x 17x 17x                 17x 17x 17x 17x        
import React, { forwardRef } from 'react';
 
import Context from './Context';
import defaultRenderrer from './defaultRenderrer';
import invariant from '../util/invariant';
 
const modifyStyles = (context, { children, ...props }, element, ref) => {
  const { defaultStyle, ...styles } = context.theme[element];
 
  // const nextProps = {};
  // const nextStyle = { ...defaultStyle };
 
  // const keys = Object.keys(props);
 
  // for (let i = 0; i < keys.length; i += 1) {
  //   const key = keys[i];
  //   const value = props[key];
  //   if (value === true && key in styles) Object.assign(nextStyle, styles[key]);
  //   else if (!(key in styles)) nextProps[key] = value;
  // }
 
  const { nextStyle, nextProps } = Object.keys(props).reduce(
    (acc, key) => {
      const value = props[key];
      if (value === true && key in styles) Object.assign(acc.nextStyle, styles[key]);
      else if (!(key in styles)) Object.assign(acc.nextProps, { [key]: value });
      return acc;
    },
    {
      nextProps: {},
      nextStyle: { ...defaultStyle },
    },
  );
  const css = { ...nextStyle, ...props.css };
  return { ...nextProps, ...context, children, css, ref };
};
 
const pickProps = (context, props, elementName, ref) => {
  if (elementName in context.theme) return modifyStyles(context, props, elementName, ref);
  return { ...props, ...context, ref };
};
 
const withStyle = (Element, key) => {
  const { displayName } = Element;
  const WithStyle = forwardRef((props, ref) => (
    <Context.Consumer>
      {({ modifyElement, providerIsMissing, ...context }) => {
        invariant(!providerIsMissing, 'Please use the Provider');
        const render = modifyElement || defaultRenderrer;
        return render(Element, pickProps(context, props, key || displayName, ref));
      }}
    </Context.Consumer>
  ));
  WithStyle.contextType = Context;
  WithStyle.displayName = displayName;
  Element.displayName = `Styled ${displayName}`; // eslint-disable-line no-param-reassign
  return WithStyle;
};
 
export default withStyle;