@gechiui/components/build-module/duotone-picker/duotone-picker.js

UI components for GeChiUI.

import { createElement } from "@gechiui/element";

/**
 * External dependencies
 */
import { isEqual } from 'lodash';
/**
 * GeChiUI dependencies
 */

import { useMemo } from '@gechiui/element';
import { __, sprintf } from '@gechiui/i18n';
/**
 * Internal dependencies
 */

import ColorListPicker from '../color-list-picker';
import CircularOptionPicker from '../circular-option-picker';
import CustomDuotoneBar from './custom-duotone-bar';
import { getDefaultColors, getGradientFromCSSColors } from './utils';

function DuotonePicker(_ref) {
  let {
    clearable = true,
    colorPalette,
    duotonePalette,
    disableCustomColors,
    disableCustomDuotone,
    value,
    onChange
  } = _ref;
  const [defaultDark, defaultLight] = useMemo(() => getDefaultColors(colorPalette), [colorPalette]);
  return createElement(CircularOptionPicker, {
    options: duotonePalette.map(_ref2 => {
      let {
        colors,
        slug,
        name
      } = _ref2;
      const style = {
        background: getGradientFromCSSColors(colors, '135deg'),
        color: 'transparent'
      };
      const tooltipText = name !== null && name !== void 0 ? name : sprintf( // translators: %s: duotone code e.g: "dark-grayscale" or "7f7f7f-ffffff".
      __('双色调代码：”%s'), slug);
      const label = name ? sprintf( // translators: %s: The name of the option e.g: "Dark grayscale".
      __('双色调：%s'), name) : tooltipText;
      const isSelected = isEqual(colors, value);
      return createElement(CircularOptionPicker.Option, {
        key: slug,
        value: colors,
        isSelected: isSelected,
        "aria-label": label,
        tooltipText: tooltipText,
        style: style,
        onClick: () => {
          onChange(isSelected ? undefined : colors);
        }
      });
    }),
    actions: !!clearable && createElement(CircularOptionPicker.ButtonAction, {
      onClick: () => onChange(undefined)
    }, __('清除'))
  }, !disableCustomColors && !disableCustomDuotone && createElement(CustomDuotoneBar, {
    value: value,
    onChange: onChange
  }), !disableCustomDuotone && createElement(ColorListPicker, {
    labels: [__('阴影'), __('高亮')],
    colors: colorPalette,
    value: value,
    disableCustomColors: disableCustomColors,
    enableAlpha: true,
    onChange: newColors => {
      if (!newColors[0]) {
        newColors[0] = defaultDark;
      }

      if (!newColors[1]) {
        newColors[1] = defaultLight;
      }

      const newValue = newColors.length >= 2 ? newColors : undefined;
      onChange(newValue);
    }
  }));
}

export default DuotonePicker;
//# sourceMappingURL=duotone-picker.js.map