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

UI components for GeChiUI.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

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

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

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

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

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

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

var _flex = require("../flex");

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

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

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

var _toggleGroupControl = require("../toggle-group-control");

var _utils = require("./utils");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
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 = (0, _unitControl.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 !(0, _utils.isSimpleCssValue)(size);
  });
  const shouldUseSelectControl = fontSizes.length > 5;
  const options = (0, _element.useMemo)(() => (0, _utils.getFontSizeOptions)(shouldUseSelectControl, fontSizes, disableCustomFontSizes, fontSizesContainComplexValues), [shouldUseSelectControl, fontSizes, disableCustomFontSizes, fontSizesContainComplexValues]);
  const selectedOption = (0, _utils.getSelectedOption)(fontSizes, value);
  const isCustomValue = selectedOption.slug === _utils.CUSTOM_FONT_SIZE;
  const [showCustomValueControl, setShowCustomValueControl] = (0, _element.useState)(!disableCustomFontSizes && isCustomValue);
  const headerHint = (0, _element.useMemo)(() => {
    if (showCustomValueControl) {
      return `(${(0, _i18n.__)('自定义')})`;
    } // 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 (0, _utils.isSimpleCssValue)(value) && `(${value})`;
    }

    if (shouldUseSelectControl) {
      return (0, _utils.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] = (0, _utils.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 = (0, _i18n.sprintf)( // translators: %s: Currently selected font size.
  (0, _i18n.__)('当前选择的字体大小：%s'), selectedOption.name);
  const baseClassName = 'components-font-size-picker';
  return (0, _element.createElement)("fieldset", (0, _extends2.default)({
    className: baseClassName
  }, ref ? {} : {
    ref
  }), (0, _element.createElement)(_visuallyHidden.VisuallyHidden, {
    as: "legend"
  }, (0, _i18n.__)('字号')), (0, _element.createElement)(_flex.Flex, {
    justify: "space-between",
    className: `${baseClassName}__header`
  }, (0, _element.createElement)(_flex.FlexItem, null, (0, _i18n.__)('尺寸'), headerHint && (0, _element.createElement)("span", {
    className: `${baseClassName}__header__hint`
  }, headerHint)), !disableCustomFontSizes && (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_button.default, {
    label: showCustomValueControl ? (0, _i18n.__)('使用预设尺寸') : (0, _i18n.__)('设置自定义尺寸'),
    showTooltip: false,
    icon: _icons.settings,
    onClick: () => {
      setShowCustomValueControl(!showCustomValueControl);
    },
    isPressed: showCustomValueControl,
    isSmall: true
  }))), (0, _element.createElement)("div", {
    className: `${baseClassName}__controls`
  }, !!fontSizes.length && shouldUseSelectControl && !showCustomValueControl && (0, _element.createElement)(_customSelectControl.default, {
    className: `${baseClassName}__select`,
    label: (0, _i18n.__)('字号'),
    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 === _utils.CUSTOM_FONT_SIZE) {
        setShowCustomValueControl(true);
      }
    }
  }), !shouldUseSelectControl && !showCustomValueControl && (0, _element.createElement)(_toggleGroupControl.ToggleGroupControl, {
    label: (0, _i18n.__)('字号'),
    hideLabelFromVision: true,
    value: value,
    onChange: newValue => {
      onChange(hasUnits ? newValue : Number(newValue));
    },
    isBlock: true
  }, options.map(option => (0, _element.createElement)(_toggleGroupControl.ToggleGroupControlOption, {
    key: option.key,
    value: option.value,
    label: option.label,
    "aria-label": option.name,
    showTooltip: true
  }))), !withSlider && !disableCustomFontSizes && showCustomValueControl && (0, _element.createElement)(_flex.Flex, {
    justify: "space-between",
    className: `${baseClassName}__custom-size-control`
  }, (0, _element.createElement)(_flex.FlexItem, {
    isBlock: true
  }, (0, _element.createElement)(_unitControl.default, {
    label: (0, _i18n.__)('自定义'),
    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 && (0, _element.createElement)(_flex.FlexItem, {
    isBlock: true
  }, (0, _element.createElement)(_button.default, {
    className: "components-color-palette__clear",
    disabled: value === undefined,
    onClick: () => {
      onChange(undefined);
    },
    isSmall: true,
    variant: "secondary"
  }, (0, _i18n.__)('重置'))))), withSlider && (0, _element.createElement)(_rangeControl.default, {
    className: `${baseClassName}__custom-input`,
    label: (0, _i18n.__)('自定义尺寸'),
    value: isPixelValue && noUnitsValue || '',
    initialPosition: fallbackFontSize,
    onChange: newValue => {
      onChange(hasUnits ? newValue + 'px' : newValue);
    },
    min: 12,
    max: 100
  }));
}

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

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