react-howl/src/styles/withStyles.jsx

A unified design system.

import React from 'react';
import PropTypes from 'prop-types';
import withStyles from 'react-jss';

/**
 * An HOC that creates a stylesheet for a component.
 *
 * @param {object} styles - The styles to generate.
 * @param {function} Component - The component to pass the generated styles to.
 *
 * @return {function} A new component with the styles.
 *
 * @example
 *    withStyles(styles)(Component);
 */
export default (styles) => (Component) => {
  const IntermediateComponent = ({ classNames, classes, ...rest }) => {
    // Combine classNames and react-jss classes for overrides
    const mergedClassNames = Object.keys(classes).reduce((acc, k) => {
      acc[k] = `${classNames[k] || ''} ${classes[k] || ''}`;
      return acc;
    }, classNames);

    return <Component {...rest} classNames={mergedClassNames} />;
  };
  IntermediateComponent.propTypes = {
    classNames: PropTypes.shape({}),
    classes: PropTypes.shape({}),
  };
  IntermediateComponent.defaultProps = {
    classNames: {},
    classes: {},
  };

  return withStyles(styles)(IntermediateComponent);
};