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

Generic block editor.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _compose = require("@wordpress/compose");
var _element = require("@wordpress/element");
var _utils = require("./utils");
var _useSettings = require("../use-settings");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const DEFAULT_FONT_SIZES = [];

/**
 * Capitalizes the first letter in a string.
 *
 * @param {string} str The string whose first letter the function will capitalize.
 *
 * @return {string} Capitalized string.
 */
const upperFirst = ([firstLetter, ...rest]) => firstLetter.toUpperCase() + rest.join('');

/**
 * 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 = fontSizeNames.reduce((fontSizeAttributeNamesAccumulator, fontSizeAttributeName) => {
    fontSizeAttributeNamesAccumulator[fontSizeAttributeName] = `custom${upperFirst(fontSizeAttributeName)}`;
    return fontSizeAttributeNamesAccumulator;
  }, {});
  return (0, _compose.createHigherOrderComponent)((0, _compose.compose)([(0, _compose.createHigherOrderComponent)(WrappedComponent => props => {
    const [fontSizes] = (0, _useSettings.useSettings)('typography.fontSizes');
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
      ...props,
      fontSizes: fontSizes || DEFAULT_FONT_SIZES
    });
  }, 'withFontSizes'), WrappedComponent => {
    return class extends _element.Component {
      constructor(props) {
        super(props);
        this.setters = this.createSetters();
        this.state = {};
      }
      createSetters() {
        return Object.entries(fontSizeAttributeNames).reduce((settersAccumulator, [fontSizeAttributeName, customFontSizeAttributeName]) => {
          const upperFirstFontSizeAttributeName = upperFirst(fontSizeAttributeName);
          settersAccumulator[`set${upperFirstFontSizeAttributeName}`] = this.createSetFontSize(fontSizeAttributeName, customFontSizeAttributeName);
          return settersAccumulator;
        }, {});
      }
      createSetFontSize(fontSizeAttributeName, customFontSizeAttributeName) {
        return fontSizeValue => {
          const fontSizeObject = this.props.fontSizes?.find(({
            size
          }) => 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 (!Object.values(fontSizeAttributeNames).some(didAttributesChange)) {
          return null;
        }
        const newState = Object.entries(fontSizeAttributeNames).filter(([key, value]) => didAttributesChange(value, key)).reduce((newStateAccumulator, [fontSizeAttributeName, customFontSizeAttributeName]) => {
          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 /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
          ...this.props,
          fontSizes: undefined,
          ...this.state,
          ...this.setters
        });
      }
    };
  }]), 'withFontSizes');
};
exports.default = _default;
//# sourceMappingURL=with-font-sizes.js.map