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