@gechiui/components/build/color-palette/index.js

UI components for GeChiUI.

"use strict";

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

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

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

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

var _lodash = require("lodash");

var _colord = require("colord");

var _names = _interopRequireDefault(require("colord/plugins/names"));

var _a11y = _interopRequireDefault(require("colord/plugins/a11y"));

var _classnames = _interopRequireDefault(require("classnames"));

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

var _dropdown = _interopRequireDefault(require("../dropdown"));

var _colorPicker = require("../color-picker");

var _circularOptionPicker = _interopRequireDefault(require("../circular-option-picker"));

var _vStack = require("../v-stack");

var _styles = require("./styles");

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
(0, _colord.extend)([_names.default, _a11y.default]);

function SinglePalette(_ref) {
  let {
    className,
    clearColor,
    colors,
    onChange,
    value,
    actions
  } = _ref;
  const colorOptions = (0, _element.useMemo)(() => {
    return (0, _lodash.map)(colors, _ref2 => {
      let {
        color,
        name
      } = _ref2;
      const colordColor = (0, _colord.colord)(color);
      return (0, _element.createElement)(_circularOptionPicker.default.Option, {
        key: color,
        isSelected: value === color,
        selectedIconProps: value === color ? {
          fill: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000'
        } : {},
        tooltipText: name || // translators: %s: color hex code e.g: "#f00".
        (0, _i18n.sprintf)((0, _i18n.__)('颜色代码：%s'), color),
        style: {
          backgroundColor: color,
          color
        },
        onClick: value === color ? clearColor : () => onChange(color),
        "aria-label": name ? // translators: %s: The name of the color e.g: "vivid red".
        (0, _i18n.sprintf)((0, _i18n.__)('颜色：%s'), name) : // translators: %s: color hex code e.g: "#f00".
        (0, _i18n.sprintf)((0, _i18n.__)('颜色代码：%s'), color)
      });
    });
  }, [colors, value, onChange, clearColor]);
  return (0, _element.createElement)(_circularOptionPicker.default, {
    className: className,
    options: colorOptions,
    actions: actions
  });
}

function MultiplePalettes(_ref3) {
  let {
    className,
    clearColor,
    colors,
    onChange,
    value,
    actions
  } = _ref3;
  return (0, _element.createElement)(_vStack.VStack, {
    spacing: 3,
    className: className
  }, colors.map((_ref4, index) => {
    let {
      name,
      colors: colorPalette
    } = _ref4;
    return (0, _element.createElement)(_vStack.VStack, {
      spacing: 2,
      key: index
    }, (0, _element.createElement)(_styles.ColorHeading, null, name), (0, _element.createElement)(SinglePalette, {
      clearColor: clearColor,
      colors: colorPalette,
      onChange: onChange,
      value: value,
      actions: colors.length === index + 1 ? actions : null
    }));
  }));
}

function CustomColorPickerDropdown(_ref5) {
  let {
    isRenderedInSidebar,
    ...props
  } = _ref5;
  return (0, _element.createElement)(_dropdown.default, (0, _extends2.default)({
    contentClassName: (0, _classnames.default)('components-color-palette__custom-color-dropdown-content', {
      'is-rendered-in-sidebar': isRenderedInSidebar
    })
  }, props));
}

function ColorPalette(_ref6) {
  let {
    clearable = true,
    className,
    colors,
    disableCustomColors = false,
    enableAlpha,
    onChange,
    value,
    __experimentalHasMultipleOrigins = false,
    __experimentalIsRenderedInSidebar = false
  } = _ref6;
  const clearColor = (0, _element.useCallback)(() => onChange(undefined), [onChange]);
  const Component = __experimentalHasMultipleOrigins && colors !== null && colors !== void 0 && colors.length ? MultiplePalettes : SinglePalette;

  const renderCustomColorPicker = () => (0, _element.createElement)(_colorPicker.ColorPicker, {
    color: value,
    onChange: color => onChange(color),
    enableAlpha: enableAlpha
  });

  let dropdownPosition;

  if (__experimentalIsRenderedInSidebar) {
    dropdownPosition = 'bottom left';
  }

  const colordColor = (0, _colord.colord)(value);
  return (0, _element.createElement)(_vStack.VStack, {
    spacing: 3,
    className: className
  }, !disableCustomColors && (0, _element.createElement)(CustomColorPickerDropdown, {
    position: dropdownPosition,
    isRenderedInSidebar: __experimentalIsRenderedInSidebar,
    renderContent: renderCustomColorPicker,
    renderToggle: _ref7 => {
      let {
        isOpen,
        onToggle
      } = _ref7;
      return (0, _element.createElement)("button", {
        className: "components-color-palette__custom-color",
        "aria-expanded": isOpen,
        "aria-haspopup": "true",
        onClick: onToggle,
        "aria-label": (0, _i18n.__)('自定义颜色选择器'),
        style: {
          background: value,
          color: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000'
        }
      }, value);
    }
  }), (0, _element.createElement)(Component, {
    clearable: clearable,
    clearColor: clearColor,
    colors: colors,
    onChange: onChange,
    value: value,
    actions: !!clearable && (0, _element.createElement)(_circularOptionPicker.default.ButtonAction, {
      onClick: clearColor
    }, (0, _i18n.__)('清除'))
  }));
}
//# sourceMappingURL=index.js.map