@wordpress/components/build/font-size-picker/index.js

UI components for WordPress.

"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 _i18n = require("@wordpress/i18n");

var _icons = require("@wordpress/icons");

var _button = _interopRequireDefault(require("../button"));

var _rangeControl = _interopRequireDefault(require("../range-control"));

var _unitControl = _interopRequireDefault(require("../unit-control"));

var _customSelectControl = _interopRequireDefault(require("../custom-select-control"));

var _visuallyHidden = _interopRequireDefault(require("../visually-hidden"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const DEFAULT_FONT_SIZE = 'default';
const CUSTOM_FONT_SIZE = 'custom';
const MAX_FONT_SIZE_DISPLAY = '25px';
const isWeb = _element.Platform.OS === 'web';
const CSS_UNITS = [{
  value: 'px',
  label: isWeb ? 'px' : (0, _i18n.__)('Pixels (px)'),
  default: ''
}, {
  value: 'em',
  label: isWeb ? 'em' : (0, _i18n.__)('Relative to parent font size (em)'),
  default: ''
}, {
  value: 'rem',
  label: isWeb ? 'rem' : (0, _i18n.__)('Relative to root font size (rem)'),
  default: ''
}];

function getSelectValueFromFontSize(fontSizes, value) {
  if (value) {
    const fontSizeValue = fontSizes.find(font => font.size === value);
    return fontSizeValue ? fontSizeValue.slug : CUSTOM_FONT_SIZE;
  }

  return DEFAULT_FONT_SIZE;
}

function getSelectOptions(optionsArray, disableCustomFontSizes) {
  if (disableCustomFontSizes && !optionsArray.length) {
    return null;
  }

  optionsArray = [{
    slug: DEFAULT_FONT_SIZE,
    name: (0, _i18n.__)('Default')
  }, ...optionsArray, ...(disableCustomFontSizes ? [] : [{
    slug: CUSTOM_FONT_SIZE,
    name: (0, _i18n.__)('Custom')
  }])];
  return optionsArray.map(option => ({
    key: option.slug,
    name: option.name,
    size: option.size,
    style: {
      fontSize: `min( ${option.size}, ${MAX_FONT_SIZE_DISPLAY} )`
    }
  }));
}

function FontSizePicker({
  fallbackFontSize,
  fontSizes = [],
  disableCustomFontSizes = false,
  onChange,
  value,
  withSlider = false
}, ref) {
  const hasUnits = (0, _lodash.isString)(value) || fontSizes[0] && (0, _lodash.isString)(fontSizes[0].size);
  let noUnitsValue;

  if (!hasUnits) {
    noUnitsValue = value;
  } else {
    noUnitsValue = parseInt(value);
  }

  const isPixelValue = (0, _lodash.isNumber)(value) || (0, _lodash.isString)(value) && value.endsWith('px');
  const options = (0, _element.useMemo)(() => getSelectOptions(fontSizes, disableCustomFontSizes), [fontSizes, disableCustomFontSizes]);

  if (!options) {
    return null;
  }

  const selectedFontSizeSlug = getSelectValueFromFontSize(fontSizes, value);
  return (0, _element.createElement)("fieldset", (0, _extends2.default)({
    className: "components-font-size-picker"
  }, ref ? {} : {
    ref
  }), (0, _element.createElement)(_visuallyHidden.default, {
    as: "legend"
  }, (0, _i18n.__)('Font size')), (0, _element.createElement)("div", {
    className: "components-font-size-picker__controls"
  }, fontSizes.length > 0 && (0, _element.createElement)(_customSelectControl.default, {
    className: 'components-font-size-picker__select',
    label: (0, _i18n.__)('Font size'),
    options: options,
    value: options.find(option => option.key === selectedFontSizeSlug),
    onChange: ({
      selectedItem
    }) => {
      if (hasUnits) {
        onChange(selectedItem.size);
      } else {
        onChange(Number(selectedItem.size));
      }
    }
  }), !withSlider && !disableCustomFontSizes && (0, _element.createElement)(_unitControl.default, {
    label: (0, _i18n.__)('Custom'),
    labelPosition: "top",
    __unstableInputWidth: "60px",
    value: value,
    onChange: nextSize => {
      if (0 === parseFloat(nextSize) || !nextSize) {
        onChange(undefined);
      } else {
        onChange(nextSize);
      }
    },
    units: CSS_UNITS
  }), (0, _element.createElement)(_button.default, {
    className: "components-color-palette__clear",
    disabled: value === undefined,
    onClick: () => {
      onChange(undefined);
    },
    isSmall: true,
    isSecondary: true
  }, (0, _i18n.__)('Reset'))), withSlider && (0, _element.createElement)(_rangeControl.default, {
    className: "components-font-size-picker__custom-input",
    label: (0, _i18n.__)('Custom Size'),
    value: isPixelValue && noUnitsValue || '',
    initialPosition: fallbackFontSize,
    onChange: newValue => {
      onChange(hasUnits ? newValue + 'px' : newValue);
    },
    min: 12,
    max: 100,
    beforeIcon: _icons.textColor,
    afterIcon: _icons.textColor
  }));
}

var _default = (0, _element.forwardRef)(FontSizePicker);

exports.default = _default;
//# sourceMappingURL=index.js.map