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

UI components for WordPress.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@wordpress/element";

/**
 * External dependencies
 */
import { isNumber, isString } from 'lodash';
/**
 * WordPress dependencies
 */

import { __ } from '@wordpress/i18n';
import { textColor } from '@wordpress/icons';
import { useMemo, forwardRef, Platform } from '@wordpress/element';
/**
 * Internal dependencies
 */

import Button from '../button';
import RangeControl from '../range-control';
import UnitControl from '../unit-control';
import CustomSelectControl from '../custom-select-control';
import VisuallyHidden from '../visually-hidden';
const DEFAULT_FONT_SIZE = 'default';
const CUSTOM_FONT_SIZE = 'custom';
const MAX_FONT_SIZE_DISPLAY = '25px';
const isWeb = Platform.OS === 'web';
const CSS_UNITS = [{
  value: 'px',
  label: isWeb ? 'px' : __('Pixels (px)'),
  default: ''
}, {
  value: 'em',
  label: isWeb ? 'em' : __('Relative to parent font size (em)'),
  default: ''
}, {
  value: 'rem',
  label: isWeb ? 'rem' : __('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: __('Default')
  }, ...optionsArray, ...(disableCustomFontSizes ? [] : [{
    slug: CUSTOM_FONT_SIZE,
    name: __('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 = isString(value) || fontSizes[0] && isString(fontSizes[0].size);
  let noUnitsValue;

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

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

  if (!options) {
    return null;
  }

  const selectedFontSizeSlug = getSelectValueFromFontSize(fontSizes, value);
  return createElement("fieldset", _extends({
    className: "components-font-size-picker"
  }, ref ? {} : {
    ref
  }), createElement(VisuallyHidden, {
    as: "legend"
  }, __('Font size')), createElement("div", {
    className: "components-font-size-picker__controls"
  }, fontSizes.length > 0 && createElement(CustomSelectControl, {
    className: 'components-font-size-picker__select',
    label: __('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 && createElement(UnitControl, {
    label: __('Custom'),
    labelPosition: "top",
    __unstableInputWidth: "60px",
    value: value,
    onChange: nextSize => {
      if (0 === parseFloat(nextSize) || !nextSize) {
        onChange(undefined);
      } else {
        onChange(nextSize);
      }
    },
    units: CSS_UNITS
  }), createElement(Button, {
    className: "components-color-palette__clear",
    disabled: value === undefined,
    onClick: () => {
      onChange(undefined);
    },
    isSmall: true,
    isSecondary: true
  }, __('Reset'))), withSlider && createElement(RangeControl, {
    className: "components-font-size-picker__custom-input",
    label: __('Custom Size'),
    value: isPixelValue && noUnitsValue || '',
    initialPosition: fallbackFontSize,
    onChange: newValue => {
      onChange(hasUnits ? newValue + 'px' : newValue);
    },
    min: 12,
    max: 100,
    beforeIcon: textColor,
    afterIcon: textColor
  }));
}

export default forwardRef(FontSizePicker);
//# sourceMappingURL=index.js.map