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

UI components for GeChiUI.

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

/**
 * GeChiUI dependencies
 */
import { __, sprintf } from '@gechiui/i18n';
import { settings } from '@gechiui/icons';
import { useState, useMemo, forwardRef } from '@gechiui/element';
/**
 * Internal dependencies
 */

import Button from '../button';
import RangeControl from '../range-control';
import { Flex, FlexItem } from '../flex';
import { default as UnitControl, useCustomUnits } from '../unit-control';
import CustomSelectControl from '../custom-select-control';
import { VisuallyHidden } from '../visually-hidden';
import { ToggleGroupControl, ToggleGroupControlOption } from '../toggle-group-control';
import { getFontSizeOptions, getSelectedOption, splitValueAndUnitFromSize, isSimpleCssValue, CUSTOM_FONT_SIZE } from './utils';

function FontSizePicker(_ref, ref) {
  var _fontSizes$, _value$endsWith;

  let {
    fallbackFontSize,
    fontSizes = [],
    disableCustomFontSizes = false,
    onChange,
    value,
    withSlider = false,
    withReset = true
  } = _ref;
  const hasUnits = [typeof value, typeof (fontSizes === null || fontSizes === void 0 ? void 0 : (_fontSizes$ = fontSizes[0]) === null || _fontSizes$ === void 0 ? void 0 : _fontSizes$.size)].includes('string');
  const noUnitsValue = !hasUnits ? value : parseInt(value);
  const isPixelValue = typeof value === 'number' || (value === null || value === void 0 ? void 0 : (_value$endsWith = value.endsWith) === null || _value$endsWith === void 0 ? void 0 : _value$endsWith.call(value, 'px'));
  const units = useCustomUnits({
    availableUnits: ['px', 'em', 'rem']
  });
  /**
   * The main font size UI displays a toggle group when the presets are less
   * than six and a select control when they are more.
   */

  const fontSizesContainComplexValues = fontSizes.some(_ref2 => {
    let {
      size
    } = _ref2;
    return !isSimpleCssValue(size);
  });
  const shouldUseSelectControl = fontSizes.length > 5;
  const options = useMemo(() => getFontSizeOptions(shouldUseSelectControl, fontSizes, disableCustomFontSizes, fontSizesContainComplexValues), [shouldUseSelectControl, fontSizes, disableCustomFontSizes, fontSizesContainComplexValues]);
  const selectedOption = getSelectedOption(fontSizes, value);
  const isCustomValue = selectedOption.slug === CUSTOM_FONT_SIZE;
  const [showCustomValueControl, setShowCustomValueControl] = useState(!disableCustomFontSizes && isCustomValue);
  const headerHint = useMemo(() => {
    if (showCustomValueControl) {
      return `(${__('自定义')})`;
    } // If we have a custom value that is not available in the font sizes,
    // show it as a hint as long as it's a simple CSS value.


    if (isCustomValue) {
      return isSimpleCssValue(value) && `(${value})`;
    }

    if (shouldUseSelectControl) {
      return isSimpleCssValue(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.size) && `(${selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.size})`;
    } // Calculate the `hint` for toggle group control.


    let hint = selectedOption.name;

    if (!fontSizesContainComplexValues && typeof selectedOption.size === 'string') {
      const [, unit] = splitValueAndUnitFromSize(selectedOption.size);
      hint += `(${unit})`;
    }

    return hint;
  }, [showCustomValueControl, selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.slug, value, isCustomValue, fontSizesContainComplexValues]);

  if (!options) {
    return null;
  } // This is used for select control only. We need to add support
  // for ToggleGroupControl.


  const currentFontSizeSR = sprintf( // translators: %s: Currently selected font size.
  __('当前选择的字体大小：%s'), selectedOption.name);
  const baseClassName = 'components-font-size-picker';
  return createElement("fieldset", _extends({
    className: baseClassName
  }, ref ? {} : {
    ref
  }), createElement(VisuallyHidden, {
    as: "legend"
  }, __('字号')), createElement(Flex, {
    justify: "space-between",
    className: `${baseClassName}__header`
  }, createElement(FlexItem, null, __('尺寸'), headerHint && createElement("span", {
    className: `${baseClassName}__header__hint`
  }, headerHint)), !disableCustomFontSizes && createElement(FlexItem, null, createElement(Button, {
    label: showCustomValueControl ? __('使用预设尺寸') : __('设置自定义尺寸'),
    showTooltip: false,
    icon: settings,
    onClick: () => {
      setShowCustomValueControl(!showCustomValueControl);
    },
    isPressed: showCustomValueControl,
    isSmall: true
  }))), createElement("div", {
    className: `${baseClassName}__controls`
  }, !!fontSizes.length && shouldUseSelectControl && !showCustomValueControl && createElement(CustomSelectControl, {
    className: `${baseClassName}__select`,
    label: __('字号'),
    hideLabelFromVision: true,
    describedBy: currentFontSizeSR,
    options: options,
    value: options.find(option => option.key === selectedOption.slug),
    onChange: _ref3 => {
      let {
        selectedItem
      } = _ref3;
      onChange(hasUnits ? selectedItem.size : Number(selectedItem.size));

      if (selectedItem.key === CUSTOM_FONT_SIZE) {
        setShowCustomValueControl(true);
      }
    }
  }), !shouldUseSelectControl && !showCustomValueControl && createElement(ToggleGroupControl, {
    label: __('字号'),
    hideLabelFromVision: true,
    value: value,
    onChange: newValue => {
      onChange(hasUnits ? newValue : Number(newValue));
    },
    isBlock: true
  }, options.map(option => createElement(ToggleGroupControlOption, {
    key: option.key,
    value: option.value,
    label: option.label,
    "aria-label": option.name,
    showTooltip: true
  }))), !withSlider && !disableCustomFontSizes && showCustomValueControl && createElement(Flex, {
    justify: "space-between",
    className: `${baseClassName}__custom-size-control`
  }, createElement(FlexItem, {
    isBlock: true
  }, createElement(UnitControl, {
    label: __('自定义'),
    labelPosition: "top",
    hideLabelFromVision: true,
    value: value,
    onChange: nextSize => {
      if (0 === parseFloat(nextSize) || !nextSize) {
        onChange(undefined);
      } else {
        onChange(hasUnits ? nextSize : parseInt(nextSize, 10));
      }
    },
    units: hasUnits ? units : false
  })), withReset && createElement(FlexItem, {
    isBlock: true
  }, createElement(Button, {
    className: "components-color-palette__clear",
    disabled: value === undefined,
    onClick: () => {
      onChange(undefined);
    },
    isSmall: true,
    variant: "secondary"
  }, __('重置'))))), withSlider && createElement(RangeControl, {
    className: `${baseClassName}__custom-input`,
    label: __('自定义尺寸'),
    value: isPixelValue && noUnitsValue || '',
    initialPosition: fallbackFontSize,
    onChange: newValue => {
      onChange(hasUnits ? newValue + 'px' : newValue);
    },
    min: 12,
    max: 100
  }));
}

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