@wordpress/block-editor/build/components/font-sizes/with-font-sizes.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@wordpress/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _lodash = require("lodash");

var _compose = require("@wordpress/compose");

var _utils = require("./utils");

var _useEditorFeature = _interopRequireDefault(require("../use-editor-feature"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const DEFAULT_FONT_SIZES = [];
/**
 * Higher-order component, which handles font size logic for class generation,
 * font size value retrieval, and font size change handling.
 *
 * @param {...(Object|string)} fontSizeNames The arguments should all be strings.
 *                                           Each string contains the font size
 *                                           attribute name e.g: 'fontSize'.
 *
 * @return {Function} Higher-order component.
 */

var _default = (...fontSizeNames) => {
  /*
   * Computes an object whose key is the font size attribute name as passed in the array,
   * and the value is the custom font size attribute name.
   * Custom font size is automatically compted by appending custom followed by the font size attribute name in with the first letter capitalized.
   */
  const fontSizeAttributeNames = (0, _lodash.reduce)(fontSizeNames, (fontSizeAttributeNamesAccumulator, fontSizeAttributeName) => {
    fontSizeAttributeNamesAccumulator[fontSizeAttributeName] = `custom${(0, _lodash.upperFirst)(fontSizeAttributeName)}`;
    return fontSizeAttributeNamesAccumulator;
  }, {});
  return (0, _compose.createHigherOrderComponent)((0, _compose.compose)([(0, _compose.createHigherOrderComponent)(WrappedComponent => props => {
    const fontSizes = (0, _useEditorFeature.default)('typography.fontSizes') || DEFAULT_FONT_SIZES;
    return (0, _element.createElement)(WrappedComponent, (0, _extends2.default)({}, props, {
      fontSizes: fontSizes
    }));
  }, 'withFontSizes'), WrappedComponent => {
    return class extends _element.Component {
      constructor(props) {
        super(props);
        this.setters = this.createSetters();
        this.state = {};
      }

      createSetters() {
        return (0, _lodash.reduce)(fontSizeAttributeNames, (settersAccumulator, customFontSizeAttributeName, fontSizeAttributeName) => {
          const upperFirstFontSizeAttributeName = (0, _lodash.upperFirst)(fontSizeAttributeName);
          settersAccumulator[`set${upperFirstFontSizeAttributeName}`] = this.createSetFontSize(fontSizeAttributeName, customFontSizeAttributeName);
          return settersAccumulator;
        }, {});
      }

      createSetFontSize(fontSizeAttributeName, customFontSizeAttributeName) {
        return fontSizeValue => {
          const fontSizeObject = (0, _lodash.find)(this.props.fontSizes, {
            size: Number(fontSizeValue)
          });
          this.props.setAttributes({
            [fontSizeAttributeName]: fontSizeObject && fontSizeObject.slug ? fontSizeObject.slug : undefined,
            [customFontSizeAttributeName]: fontSizeObject && fontSizeObject.slug ? undefined : fontSizeValue
          });
        };
      }

      static getDerivedStateFromProps({
        attributes,
        fontSizes
      }, previousState) {
        const didAttributesChange = (customFontSizeAttributeName, fontSizeAttributeName) => {
          if (previousState[fontSizeAttributeName]) {
            // if new font size is name compare with the previous slug
            if (attributes[fontSizeAttributeName]) {
              return attributes[fontSizeAttributeName] !== previousState[fontSizeAttributeName].slug;
            } // if font size is not named, update when the font size value changes.


            return previousState[fontSizeAttributeName].size !== attributes[customFontSizeAttributeName];
          } // in this case we need to build the font size object


          return true;
        };

        if (!(0, _lodash.some)(fontSizeAttributeNames, didAttributesChange)) {
          return null;
        }

        const newState = (0, _lodash.reduce)((0, _lodash.pickBy)(fontSizeAttributeNames, didAttributesChange), (newStateAccumulator, customFontSizeAttributeName, fontSizeAttributeName) => {
          const fontSizeAttributeValue = attributes[fontSizeAttributeName];
          const fontSizeObject = (0, _utils.getFontSize)(fontSizes, fontSizeAttributeValue, attributes[customFontSizeAttributeName]);
          newStateAccumulator[fontSizeAttributeName] = { ...fontSizeObject,
            class: (0, _utils.getFontSizeClass)(fontSizeAttributeValue)
          };
          return newStateAccumulator;
        }, {});
        return { ...previousState,
          ...newState
        };
      }

      render() {
        return (0, _element.createElement)(WrappedComponent, (0, _extends2.default)({}, this.props, {
          fontSizes: undefined
        }, this.state, this.setters));
      }

    };
  }]), 'withFontSizes');
};

exports.default = _default;
//# sourceMappingURL=with-font-sizes.js.map