@wordpress/block-editor/build/components/font-appearance-control/index.js

Generic block editor.

"use strict";

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

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

var _components = require("@wordpress/components");

var _i18n = require("@wordpress/i18n");

/**
 * WordPress dependencies
 */
const FONT_STYLES = [{
  name: (0, _i18n.__)('Regular'),
  value: 'normal'
}, {
  name: (0, _i18n.__)('Italic'),
  value: 'italic'
}];
const FONT_WEIGHTS = [{
  name: (0, _i18n.__)('Thin'),
  value: '100'
}, {
  name: (0, _i18n.__)('Extra Light'),
  value: '200'
}, {
  name: (0, _i18n.__)('Light'),
  value: '300'
}, {
  name: (0, _i18n.__)('Regular'),
  value: '400'
}, {
  name: (0, _i18n.__)('Medium'),
  value: '500'
}, {
  name: (0, _i18n.__)('Semi Bold'),
  value: '600'
}, {
  name: (0, _i18n.__)('Bold'),
  value: '700'
}, {
  name: (0, _i18n.__)('Extra Bold'),
  value: '800'
}, {
  name: (0, _i18n.__)('Black'),
  value: '900'
}];
/**
 * Control to display unified font style and weight options.
 *
 * @param  {Object}   props Component props.
 * @return {WPElement}      Font appearance control.
 */

function FontAppearanceControl(props) {
  const {
    onChange,
    hasFontStyles = true,
    hasFontWeights = true,
    value: {
      fontStyle,
      fontWeight
    }
  } = props;
  const hasStylesOrWeights = hasFontStyles || hasFontWeights;
  const defaultOption = {
    key: 'default',
    name: (0, _i18n.__)('Default'),
    style: {
      fontStyle: undefined,
      fontWeight: undefined
    }
  }; // Combines both font style and weight options into a single dropdown.

  const combineOptions = () => {
    const combinedOptions = [defaultOption];
    FONT_STYLES.forEach(({
      name: styleName,
      value: styleValue
    }) => {
      FONT_WEIGHTS.forEach(({
        name: weightName,
        value: weightValue
      }) => {
        const optionName = styleValue === 'normal' ? weightName : (0, _i18n.sprintf)(
        /* translators: 1: Font weight name. 2: Font style name. */
        (0, _i18n.__)('%1$s %2$s'), weightName, styleName);
        combinedOptions.push({
          key: `${styleValue}-${weightValue}`,
          name: optionName,
          style: {
            fontStyle: styleValue,
            fontWeight: weightValue
          }
        });
      });
    });
    return combinedOptions;
  }; // Generates select options for font styles only.


  const styleOptions = () => {
    const combinedOptions = [defaultOption];
    FONT_STYLES.forEach(({
      name,
      value
    }) => {
      combinedOptions.push({
        key: value,
        name,
        style: {
          fontStyle: value,
          fontWeight: undefined
        }
      });
    });
    return combinedOptions;
  }; // Generates select options for font weights only.


  const weightOptions = () => {
    const combinedOptions = [defaultOption];
    FONT_WEIGHTS.forEach(({
      name,
      value
    }) => {
      combinedOptions.push({
        key: value,
        name,
        style: {
          fontStyle: undefined,
          fontWeight: value
        }
      });
    });
    return combinedOptions;
  }; // Map font styles and weights to select options.


  const selectOptions = (0, _element.useMemo)(() => {
    if (hasFontStyles && hasFontWeights) {
      return combineOptions();
    }

    return hasFontStyles ? styleOptions() : weightOptions();
  }, [props.options]); // Find current selection by comparing font style & weight against options.

  const currentSelection = selectOptions.find(option => option.style.fontStyle === fontStyle && option.style.fontWeight === fontWeight); // Adjusts field label in case either styles or weights are disabled.

  const getLabel = () => {
    if (!hasFontStyles) {
      return (0, _i18n.__)('Font weight');
    }

    if (!hasFontWeights) {
      return (0, _i18n.__)('Font style');
    }

    return (0, _i18n.__)('Appearance');
  };

  return (0, _element.createElement)("fieldset", {
    className: "components-font-appearance-control"
  }, hasStylesOrWeights && (0, _element.createElement)(_components.CustomSelectControl, {
    className: "components-font-appearance-control__select",
    label: getLabel(),
    options: selectOptions,
    value: currentSelection,
    onChange: ({
      selectedItem
    }) => onChange(selectedItem.style)
  }));
}
//# sourceMappingURL=index.js.map