@evg-b/evg-ui/dist/styles/withStyles.js

EVG-UI library inspired by Material Design.

import _extends from '@babel/runtime/helpers/extends';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React, { useMemo, useEffect } from 'react';
import PropTypes from 'prop-types';
import Color from './Color/Color.js';
import useChangeTheme from './useChangeTheme.js';
import signatureByProps from './signatureByProps.js';
import mergeClasses from './mergeClasses.js';
import getDynamicStylesAndKeyframes from './getDynamicStylesAndKeyframes.js';
import createStyleSheet from './createStyleSheet.js';

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var cacheMapClasses = new Map();

var withStyles = function withStyles(styleObject) {
  return function (Component) {
    var displayName = Component.displayName || 'ComponentEVG';
    var styleDynamic = getDynamicStylesAndKeyframes(styleObject);
    var StyleSheet = createStyleSheet(styleObject, displayName);
    StyleSheet.attach();
    var WithStyles = /*#__PURE__*/React.forwardRef(function WithStyles(props, ref) {
      var classes = props.classes,
          otherProps = _objectWithoutProperties(props, ["classes"]);

      var mergeProps = useMemo(function () {
        return _objectSpread(_objectSpread({}, Component.defaultProps), otherProps);
      }, [otherProps]);
      var signature = signatureByProps(displayName, mergeProps);
      var colorProps = mergeProps.color ? mergeProps.color : 'default';
      var Color$1 = Color(colorProps, displayName);
      var StyleSheetDynamic;

      if (cacheMapClasses.has(signature)) {
        // есть classes в cache
        StyleSheetDynamic = cacheMapClasses.get(signature);
      } else {
        StyleSheetDynamic = createStyleSheet(styleDynamic, displayName, '-d-');
        StyleSheetDynamic.update(_objectSpread(_objectSpread({}, mergeProps), {}, {
          Color: Color$1
        })); // <- update in hooks: useEffect

        StyleSheetDynamic.attach();
        cacheMapClasses.set(signature, StyleSheetDynamic); // <- classes
      }

      useEffect(function () {
        StyleSheetDynamic.update(_objectSpread(_objectSpread({}, mergeProps), {}, {
          Color: Color$1
        }));
      }, [mergeProps, Color$1, StyleSheetDynamic]);
      useChangeTheme();
      var cacheClasses = mergeClasses(mergeClasses(StyleSheet.classes, StyleSheetDynamic.classes), classes);
      return /*#__PURE__*/React.createElement(Component, _extends({
        ref: ref,
        classes: cacheClasses
      }, otherProps));
    });
    WithStyles.propTypes = {
      /**
      * Объект со стилями компонента для jss.
      */
      classes: PropTypes.object
    };
    return WithStyles;
  };
};

export default withStyles;