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

UI components for GeChiUI.

/**
 * GeChiUI dependencies
 */
import { __ } from '@gechiui/i18n';
const DEFAULT_FONT_SIZE = 'default';
const DEFAULT_FONT_SIZE_OPTION = {
  slug: DEFAULT_FONT_SIZE,
  name: __('默认')
};
export const CUSTOM_FONT_SIZE = 'custom';
const CUSTOM_FONT_SIZE_OPTION = {
  slug: CUSTOM_FONT_SIZE,
  name: __('自定义')
};
/**
 * In case we have at most five font sizes, where at least one the them
 * contain a complex css value(clamp, var, etc..) show a incremental sequence
 * of numbers as a label of the font size. We do this because complex css values
 * cannot be caluclated properly and the incremental sequence of numbers as labels
 * can help the user better mentally map the different available font sizes.
 */

const FONT_SIZES_ALIASES = ['1', '2', '3', '4', '5'];
/**
 * Helper util to split a font size to its numeric value
 * and its `unit`, if exists.
 *
 * @param {string|number} size Font size.
 * @return {[number, string]} An array with the numeric value and the unit if exists.
 */

export function splitValueAndUnitFromSize(size) {
  const [numericValue, unit] = `${size}`.match(/[\d\.]+|\D+/g);

  if (!isNaN(parseFloat(numericValue)) && isFinite(numericValue)) {
    return [numericValue, unit];
  }

  return [];
}
/**
 * Some themes use css vars for their font sizes, so until we
 * have the way of calculating them don't display them.
 *
 * @param {string|number} value The value that is checked.
 * @return {boolean} Whether the value is a simple css value.
 */

export function isSimpleCssValue(value) {
  const sizeRegex = /^[\d\.]+(px|em|rem|vw|vh|%)?$/i;
  return sizeRegex.test(value);
}
/**
 * Return font size options in the proper format depending
 * on the currently used control (select, toggle group).
 *
 * @param {boolean}  useSelectControl               Whether to use a select control.
 * @param {Object[]} optionsArray                   Array of available font sizes objects.
 * @param {*}        disableCustomFontSizes         Flag that indicates if custom font sizes are disabled.
 * @param {boolean}  optionsContainComplexCssValues Whether font sizes contain at least one complex css value(clamp, var, etc..).
 * @return {Object[]|null} Array of font sizes in proper format for the used control.
 */

export function getFontSizeOptions(useSelectControl, optionsArray, disableCustomFontSizes, optionsContainComplexCssValues) {
  if (disableCustomFontSizes && !optionsArray.length) {
    return null;
  }

  return useSelectControl ? getSelectOptions(optionsArray, disableCustomFontSizes) : getToggleGroupOptions(optionsArray, optionsContainComplexCssValues);
}

function getSelectOptions(optionsArray, disableCustomFontSizes) {
  const options = [DEFAULT_FONT_SIZE_OPTION, ...optionsArray, ...(disableCustomFontSizes ? [] : [CUSTOM_FONT_SIZE_OPTION])];
  return options.map(_ref => {
    let {
      slug,
      name,
      size
    } = _ref;
    return {
      key: slug,
      name,
      size,
      __experimentalHint: size && isSimpleCssValue(size) && parseFloat(size)
    };
  });
}

function getToggleGroupOptions(optionsArray, optionsContainComplexCssValues) {
  return optionsArray.map((_ref2, index) => {
    let {
      slug,
      size,
      name
    } = _ref2;
    let label = optionsContainComplexCssValues ? FONT_SIZES_ALIASES[index] : size;

    if (!optionsContainComplexCssValues && typeof size === 'string') {
      const [numericValue] = splitValueAndUnitFromSize(size);
      label = numericValue;
    }

    return {
      key: slug,
      value: size,
      label,
      name
    };
  });
}

export function getSelectedOption(fontSizes, value) {
  if (!value) {
    return DEFAULT_FONT_SIZE_OPTION;
  }

  return fontSizes.find(font => font.size === value) || CUSTOM_FONT_SIZE_OPTION;
}
//# sourceMappingURL=utils.js.map