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