@gechiui/components/build/gradient-picker/index.js

UI components for GeChiUI.

"use strict";

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

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

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

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

var _lodash = require("lodash");

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

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

var _customGradientPicker = _interopRequireDefault(require("../custom-gradient-picker"));

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

var _styles = require("../color-palette/styles");

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
function SingleOrigin(_ref) {
  let {
    className,
    clearGradient,
    gradients,
    onChange,
    value,
    actions,
    content
  } = _ref;
  const gradientOptions = (0, _element.useMemo)(() => {
    return (0, _lodash.map)(gradients, _ref2 => {
      let {
        gradient,
        name
      } = _ref2;
      return (0, _element.createElement)(_circularOptionPicker.default.Option, {
        key: gradient,
        value: gradient,
        isSelected: value === gradient,
        tooltipText: name || // translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
        (0, _i18n.sprintf)((0, _i18n.__)('渐变色代码：%s'), gradient),
        style: {
          color: 'rgba( 0,0,0,0 )',
          background: gradient
        },
        onClick: value === gradient ? clearGradient : () => onChange(gradient),
        "aria-label": name ? // translators: %s: The name of the gradient e.g: "Angular red to blue".
        (0, _i18n.sprintf)((0, _i18n.__)('渐变色：%s'), name) : // translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
        (0, _i18n.sprintf)((0, _i18n.__)('渐变色代码：%s'), gradient)
      });
    });
  }, [gradients, value, onChange, clearGradient]);
  return (0, _element.createElement)(_circularOptionPicker.default, {
    className: className,
    options: gradientOptions,
    actions: actions
  }, content);
}

function MultipleOrigin(_ref3) {
  let {
    className,
    clearGradient,
    gradients,
    onChange,
    value,
    actions,
    content
  } = _ref3;
  return (0, _element.createElement)(_vStack.VStack, {
    spacing: 3,
    className: className
  }, gradients.map((_ref4, index) => {
    let {
      name,
      gradients: gradientSet
    } = _ref4;
    return (0, _element.createElement)(_vStack.VStack, {
      spacing: 2,
      key: index
    }, (0, _element.createElement)(_styles.ColorHeading, null, name), (0, _element.createElement)(SingleOrigin, (0, _extends2.default)({
      clearGradient: clearGradient,
      gradients: gradientSet,
      onChange: onChange,
      value: value
    }, gradients.length === index + 1 ? {
      actions,
      content
    } : {})));
  }));
}

function GradientPicker(_ref5) {
  let {
    className,
    gradients,
    onChange,
    value,
    clearable = true,
    disableCustomGradients = false,
    __experimentalHasMultipleOrigins,
    __experimentalIsRenderedInSidebar
  } = _ref5;
  const clearGradient = (0, _element.useCallback)(() => onChange(undefined), [onChange]);
  const Component = __experimentalHasMultipleOrigins && gradients !== null && gradients !== void 0 && gradients.length ? MultipleOrigin : SingleOrigin;
  return (0, _element.createElement)(Component, {
    className: className,
    clearable: clearable,
    clearGradient: clearGradient,
    gradients: gradients,
    onChange: onChange,
    value: value,
    actions: clearable && ((gradients === null || gradients === void 0 ? void 0 : gradients.length) || !disableCustomGradients) && (0, _element.createElement)(_circularOptionPicker.default.ButtonAction, {
      onClick: clearGradient
    }, (0, _i18n.__)('清除')),
    content: !disableCustomGradients && (0, _element.createElement)(_customGradientPicker.default, {
      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
      value: value,
      onChange: onChange
    })
  });
}
//# sourceMappingURL=index.js.map