styletron-inferno/src/styled.js

  1. const createElement = require('inferno-create-element');
  2. const {injectStylePrefixed} = require('styletron-utils');
  3. const {
  4.   assign,
  5.   isNil,
  6.   isObject,
  7.   isString,
  8.   isFunction
  9. } = require('./utils');
  11. const STYLETRON_KEY = '__STYLETRON';
  13. module.exports = styled;
  15. /**
  16.  * Helper function to create styled components
  17.  * @packagename styletron-inferno
  18.  * @param  {string|function} name   Tag name or component function/class
  19.  * @param  {function|object} styles Style object or function that returns a style object
  20.  * @return {function}               Styled component
  21.  *
  22.  * @example
  23.  * import { styled } from 'styletron-inferno';
  24.  *
  25.  * const Panel = styled('div', {
  26.  *   backgroundColor: 'lightblue',
  27.  *   fontSize: '12px'
  28.  * });
  29.  *
  30.  * <Panel>Hello World</Panel>
  31.  *
  32.  * @example
  33.  * import { styled } from 'styletron-inferno';
  34.  *
  35.  * const Panel = styled('div', (props) => ({
  36.  *   backgroundColor: props.alert ? 'orange' : 'lightblue',
  37.  *   fontSize: '12px'
  38.  * }));
  39.  *
  40.  * <Panel alert>Danger!</Panel>
  41.  *
  42.  * @example
  43.  * import { styled } from 'styletron-inferno';
  44.  *
  45.  * const DeluxePanel = styled(Panel, (props) => ({
  46.  *   backgroundColor: props.alert ? 'red' : 'lime',
  47.  *   boxShadow: '3px 3px 3px darkgray',
  48.  *   color: 'white'
  49.  * }));
  50.  *
  51.  * <DeluxePanel>Bonjour Monde</DeluxePanel>
  52.  */
  53. function styled(name, styles) {
  55.   // Styled component
  56.   if (name && name.hasOwnProperty(STYLETRON_KEY)) {
  57.     const component = name[STYLETRON_KEY];
  58.     const stylesArray = component.stylesArray.concat(styles);
  59.     return createStyledComponent(component.name, stylesArray);
  61.   // Tag name or non-styled component
  62.   } else if (isString(name) || isFunction(name)) {
  63.     return createStyledComponent(name, [styles]);
  64.   }
  66.   throw new Error('`styled` takes either a DOM element name or a component');
  67. }
  69. function createStyledComponent(name, stylesArray) {
  71.   function StyledComponent(props, context) {
  72.     const newProps = assign({}, props);
  73.     const styles = resolveStyles(stylesArray, props, context);
  74.     const className = injectStylePrefixed(context.styletron, styles);
  76.     newProps.className = props.className
  77.       ? `${props.className} ${className}`
  78.       : className;
  80.     if (isFunction(props.innerRef)) {
  81.       newProps.ref = props.innerRef;
  82.       delete newProps.innerRef;
  83.     }
  84.     return createElement(name, newProps);
  85.   }
  87.   StyledComponent[STYLETRON_KEY] = {name, stylesArray};
  89.   return StyledComponent;
  90. }
  92. function resolveStyles(stylesArray, props, context) {
  93.   const resolvedStyles = {};
  94.   for (let i = 0, l = stylesArray.length, styles; i < l; i++) {
  95.     styles = stylesArray[i];
  96.     if (!isNil(styles)) {
  97.       if (isFunction(styles)) {
  98.         assign(resolvedStyles, styles(props, context));
  99.       } else if (isObject(styles)) {
  100.         assign(resolvedStyles, styles);
  101.       }
  102.     }
  103.   }
  104.   return resolvedStyles;
  105. }