@chaoswise/ui 3.0.23 → 3.1.0

package/lib/Antd5/color-picker/ColorPickerPanel.js

@@ -1,51 +1,69 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["prefixCls", "presets", "panelRender", "color", "onChange", "onClear"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import Divider from '../divider';
 import PanelPicker from './components/PanelPicker';
 import PanelPresets from './components/PanelPresets';
-import { PanelPickerProvider, PanelPresetsProvider } from './context';
+import { PanelPickerContext, PanelPresetsContext } from './context';
 var ColorPickerPanel = function ColorPickerPanel(props) {
   var prefixCls = props.prefixCls,
     presets = props.presets,
     panelRender = props.panelRender,
-    color = props.color,
+    value = props.value,
     onChange = props.onChange,
     onClear = props.onClear,
-    injectProps = _objectWithoutProperties(props, _excluded);
+    allowClear = props.allowClear,
+    disabledAlpha = props.disabledAlpha,
+    mode = props.mode,
+    onModeChange = props.onModeChange,
+    modeOptions = props.modeOptions,
+    onChangeComplete = props.onChangeComplete,
+    activeIndex = props.activeIndex,
+    onActive = props.onActive,
+    format = props.format,
+    onFormatChange = props.onFormatChange,
+    gradientDragging = props.gradientDragging,
+    onGradientDragging = props.onGradientDragging,
+    disabledFormat = props.disabledFormat;
   var colorPickerPanelPrefixCls = "".concat(prefixCls, "-inner");
-  // ==== Inject props ===
-  var panelPickerProps = _objectSpread({
-    prefixCls: prefixCls,
-    value: color,
-    onChange: onChange,
-    onClear: onClear
-  }, injectProps);
-  var panelPresetsProps = React.useMemo(function () {
+  // ===================== Context ======================
+  var panelContext = React.useMemo(function () {
     return {
       prefixCls: prefixCls,
-      value: color,
+      value: value,
+      onChange: onChange,
+      onClear: onClear,
+      allowClear: allowClear,
+      disabledAlpha: disabledAlpha,
+      mode: mode,
+      onModeChange: onModeChange,
+      modeOptions: modeOptions,
+      onChangeComplete: onChangeComplete,
+      activeIndex: activeIndex,
+      onActive: onActive,
+      format: format,
+      onFormatChange: onFormatChange,
+      gradientDragging: gradientDragging,
+      onGradientDragging: onGradientDragging,
+      disabledFormat: disabledFormat
+    };
+  }, [prefixCls, value, onChange, onClear, allowClear, disabledAlpha, mode, onModeChange, modeOptions, onChangeComplete, activeIndex, onActive, format, onFormatChange, gradientDragging, onGradientDragging, disabledFormat]);
+  var presetContext = React.useMemo(function () {
+    return {
+      prefixCls: prefixCls,
+      value: value,
       presets: presets,
       onChange: onChange
     };
-  }, [prefixCls, color, presets, onChange]);
+  }, [prefixCls, value, presets, onChange]);
   // ====================== Render ======================
   var innerPanel = _jsxs("div", {
     className: "".concat(colorPickerPanelPrefixCls, "-content"),
     children: [_jsx(PanelPicker, {}), Array.isArray(presets) && _jsx(Divider, {}), _jsx(PanelPresets, {})]
   });
-  return _jsx(PanelPickerProvider, {
-    value: panelPickerProps,
-    children: _jsx(PanelPresetsProvider, {
-      value: panelPresetsProps,
+  return _jsx(PanelPickerContext.Provider, {
+    value: panelContext,
+    children: _jsx(PanelPresetsContext.Provider, {
+      value: presetContext,
       children: _jsx("div", {
         className: colorPickerPanelPrefixCls,
         children: typeof panelRender === 'function' ? panelRender(innerPanel, {

package/lib/Antd5/color-picker/color.js

@@ -6,14 +6,14 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { Color as RcColor } from '@rc-component/color-picker';
 export var toHexFormat = function toHexFormat(value, alpha) {
-  return (value === null || value === void 0 ? void 0 : value.replace(/[^\w/]/gi, '').slice(0, alpha ? 8 : 6)) || '';
+  return (value === null || value === void 0 ? void 0 : value.replace(/[^\w/]/g, '').slice(0, alpha ? 8 : 6)) || '';
 };
 export var getHex = function getHex(value, alpha) {
   return value ? toHexFormat(value, alpha) : '';
 };
-export var ColorFactory = /*#__PURE__*/function () {
-  function ColorFactory(color) {
-    _classCallCheck(this, ColorFactory);
+export var AggregationColor = /*#__PURE__*/function () {
+  function AggregationColor(color) {
+    _classCallCheck(this, AggregationColor);
     /** Original Color object */
     Object.defineProperty(this, "metaColor", {
       enumerable: true,
@@ -21,19 +21,51 @@ export var ColorFactory = /*#__PURE__*/function () {
       writable: true,
       value: void 0
     });
+    Object.defineProperty(this, "colors", {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value: void 0
+    });
     Object.defineProperty(this, "cleared", {
       enumerable: true,
       configurable: true,
       writable: true,
       value: false
     });
-    this.metaColor = new RcColor(color);
-    if (!color) {
-      this.metaColor.setAlpha(0);
+    // Clone from another AggregationColor
+    if (color instanceof AggregationColor) {
+      var _color$colors;
+      this.metaColor = color.metaColor.clone();
+      this.colors = (_color$colors = color.colors) === null || _color$colors === void 0 ? void 0 : _color$colors.map(function (info) {
+        return {
+          color: new AggregationColor(info.color),
+          percent: info.percent
+        };
+      });
+      this.cleared = color.cleared;
+      return;
+    }
+    var isArray = Array.isArray(color);
+    if (isArray && color.length) {
+      this.colors = color.map(function (_ref) {
+        var c = _ref.color,
+          percent = _ref.percent;
+        return {
+          color: new AggregationColor(c),
+          percent: percent
+        };
+      });
+      this.metaColor = new RcColor(this.colors[0].color.metaColor);
+    } else {
+      this.metaColor = new RcColor(isArray ? '' : color);
+    }
+    if (!color || isArray && !this.colors) {
+      this.metaColor = this.metaColor.setA(0);
       this.cleared = true;
     }
   }
-  return _createClass(ColorFactory, [{
+  return _createClass(AggregationColor, [{
     key: "toHsb",
     value: function toHsb() {
       return this.metaColor.toHsb();
@@ -46,12 +78,12 @@ export var ColorFactory = /*#__PURE__*/function () {
   }, {
     key: "toHex",
     value: function toHex() {
-      return getHex(this.toHexString(), this.metaColor.getAlpha() < 1);
+      return getHex(this.toHexString(), this.metaColor.a < 1);
     }
   }, {
     key: "toHexString",
     value: function toHexString() {
-      return this.metaColor.getAlpha() === 1 ? this.metaColor.toHexString() : this.metaColor.toHex8String();
+      return this.metaColor.toHexString();
     }
   }, {
     key: "toRgb",
@@ -63,5 +95,45 @@ export var ColorFactory = /*#__PURE__*/function () {
     value: function toRgbString() {
       return this.metaColor.toRgbString();
     }
+  }, {
+    key: "isGradient",
+    value: function isGradient() {
+      return !!this.colors && !this.cleared;
+    }
+  }, {
+    key: "getColors",
+    value: function getColors() {
+      return this.colors || [{
+        color: this,
+        percent: 0
+      }];
+    }
+  }, {
+    key: "toCssString",
+    value: function toCssString() {
+      var colors = this.colors;
+      // CSS line-gradient
+      if (colors) {
+        var colorsStr = colors.map(function (c) {
+          return "".concat(c.color.toRgbString(), " ").concat(c.percent, "%");
+        }).join(', ');
+        return "linear-gradient(90deg, ".concat(colorsStr, ")");
+      }
+      return this.metaColor.toRgbString();
+    }
+  }, {
+    key: "equals",
+    value: function equals(color) {
+      if (!color || this.isGradient() !== color.isGradient()) {
+        return false;
+      }
+      if (!this.isGradient()) {
+        return this.toHexString() === color.toHexString();
+      }
+      return this.colors.length === color.colors.length && this.colors.every(function (c, i) {
+        var target = color.colors[i];
+        return c.percent === target.percent && c.color.equals(target.color);
+      });
+    }
   }]);
 }();

package/lib/Antd5/color-picker/components/ColorAlphaInput.js

@@ -6,7 +6,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect, useState } from 'react';
-import { generateColor, getAlphaColor } from '../util';
+import { generateColor, getColorAlpha } from '../util';
 import ColorSteppers from './ColorSteppers';
 var ColorAlphaInput = function ColorAlphaInput(_ref) {
   var prefixCls = _ref.prefixCls,
@@ -33,7 +33,7 @@ var ColorAlphaInput = function ColorAlphaInput(_ref) {
     onChange === null || onChange === void 0 || onChange(genColor);
   };
   return _jsx(ColorSteppers, {
-    value: getAlphaColor(alphaValue),
+    value: getColorAlpha(alphaValue),
     prefixCls: prefixCls,
     formatter: function formatter(step) {
       return "".concat(step, "%");

package/lib/Antd5/color-picker/components/ColorClear.js

@@ -6,12 +6,12 @@ var ColorClear = function ColorClear(_ref) {
     value = _ref.value,
     onChange = _ref.onChange;
   var handleClick = function handleClick() {
-    if (value && !value.cleared) {
+    if (onChange && value && !value.cleared) {
       var hsba = value.toHsb();
       hsba.a = 0;
       var genColor = generateColor(hsba);
       genColor.cleared = true;
-      onChange === null || onChange === void 0 || onChange(genColor);
+      onChange(genColor);
     }
   };
   return _jsx("div", {

package/lib/Antd5/color-picker/components/ColorHexInput.js

@@ -18,15 +18,16 @@ var ColorHexInput = function ColorHexInput(_ref) {
     value = _ref.value,
     onChange = _ref.onChange;
   var colorHexInputPrefixCls = "".concat(prefixCls, "-hex-input");
-  var _useState = useState(value === null || value === void 0 ? void 0 : value.toHex()),
+  var _useState = useState(function () {
+      return value ? toHexFormat(value.toHexString()) : undefined;
+    }),
     _useState2 = _slicedToArray(_useState, 2),
     hexValue = _useState2[0],
     setHexValue = _useState2[1];
   // Update step value
   useEffect(function () {
-    var hex = value === null || value === void 0 ? void 0 : value.toHex();
-    if (isHexString(hex) && value) {
-      setHexValue(toHexFormat(hex));
+    if (value) {
+      setHexValue(toHexFormat(value.toHexString()));
     }
   }, [value]);
   var handleHexChange = function handleHexChange(e) {

package/lib/Antd5/color-picker/components/ColorInput.js

@@ -31,7 +31,8 @@ var ColorInput = function ColorInput(props) {
     value = props.value,
     disabledAlpha = props.disabledAlpha,
     onFormatChange = props.onFormatChange,
-    onChange = props.onChange;
+    onChange = props.onChange,
+    disabledFormat = props.disabledFormat;
   var _useMergedState = useMergedState(ColorFormat.hex, {
       value: format,
       onChange: onFormatChange
@@ -54,14 +55,14 @@ var ColorInput = function ColorInput(props) {
         return _jsx(ColorHsbInput, _objectSpread({}, inputProps));
       case ColorFormat.rgb:
         return _jsx(ColorRgbInput, _objectSpread({}, inputProps));
-      case ColorFormat.hex:
+      // case ColorFormat.hex:
       default:
         return _jsx(ColorHexInput, _objectSpread({}, inputProps));
     }
   }, [colorFormat, prefixCls, value, onChange]);
   return _jsxs("div", {
     className: "".concat(colorInputPrefixCls, "-container"),
-    children: [_jsx(Select, {
+    children: [!disabledFormat && _jsx(Select, {
       value: colorFormat,
       variant: "borderless",
       getPopupContainer: function getPopupContainer(current) {

package/lib/Antd5/color-picker/components/ColorPresets.js

@@ -23,7 +23,7 @@ var genPresetColor = function genPresetColor(list) {
     return value;
   });
 };
-var isBright = function isBright(value, bgColorToken) {
+export var isBright = function isBright(value, bgColorToken) {
   var _value$toRgb = value.toRgb(),
     r = _value$toRgb.r,
     g = _value$toRgb.g,

package/lib/Antd5/color-picker/components/ColorSlider.js

@@ -0,0 +1,139 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["prefixCls", "colors", "type", "color", "range", "className", "activeIndex", "onActive", "onDragStart", "onDragChange", "onKeyDelete"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import classNames from 'classnames';
+import { UnstableContext } from 'rc-slider';
+import useEvent from 'rc-util/lib/hooks/useEvent';
+import Slider from '../../slider';
+import SliderInternalContext from '../../slider/Context';
+import { getGradientPercentColor } from '../util';
+export var GradientColorSlider = function GradientColorSlider(props) {
+  var prefixCls = props.prefixCls,
+    colors = props.colors,
+    type = props.type,
+    color = props.color,
+    _props$range = props.range,
+    range = _props$range === void 0 ? false : _props$range,
+    className = props.className,
+    activeIndex = props.activeIndex,
+    onActive = props.onActive,
+    onDragStart = props.onDragStart,
+    onDragChange = props.onDragChange,
+    onKeyDelete = props.onKeyDelete,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var sliderProps = _objectSpread(_objectSpread({}, restProps), {}, {
+    track: false
+  });
+  // ========================== Background ==========================
+  var linearCss = React.useMemo(function () {
+    var colorsStr = colors.map(function (c) {
+      return "".concat(c.color, " ").concat(c.percent, "%");
+    }).join(', ');
+    return "linear-gradient(90deg, ".concat(colorsStr, ")");
+  }, [colors]);
+  var pointColor = React.useMemo(function () {
+    if (!color || !type) {
+      return null;
+    }
+    if (type === 'alpha') {
+      return color.toRgbString();
+    }
+    return "hsl(".concat(color.toHsb().h, ", 100%, 50%)");
+  }, [color, type]);
+  // ======================= Context: Slider ========================
+  var onInternalDragStart = useEvent(onDragStart);
+  var onInternalDragChange = useEvent(onDragChange);
+  var unstableContext = React.useMemo(function () {
+    return {
+      onDragStart: onInternalDragStart,
+      onDragChange: onInternalDragChange
+    };
+  }, []);
+  // ======================= Context: Render ========================
+  var handleRender = useEvent(function (ori, info) {
+    var _ori$props = ori.props,
+      _onFocus = _ori$props.onFocus,
+      style = _ori$props.style,
+      handleCls = _ori$props.className,
+      _onKeyDown = _ori$props.onKeyDown;
+    // Point Color
+    var mergedStyle = _objectSpread({}, style);
+    if (type === 'gradient') {
+      mergedStyle.background = getGradientPercentColor(colors, info.value);
+    }
+    return /*#__PURE__*/React.cloneElement(ori, {
+      onFocus: function onFocus(e) {
+        onActive === null || onActive === void 0 || onActive(info.index);
+        _onFocus === null || _onFocus === void 0 || _onFocus(e);
+      },
+      style: mergedStyle,
+      className: classNames(handleCls, _defineProperty({}, "".concat(prefixCls, "-slider-handle-active"), activeIndex === info.index)),
+      onKeyDown: function onKeyDown(e) {
+        if ((e.key === 'Delete' || e.key === 'Backspace') && onKeyDelete) {
+          onKeyDelete(info.index);
+        }
+        _onKeyDown === null || _onKeyDown === void 0 || _onKeyDown(e);
+      }
+    });
+  });
+  var sliderContext = React.useMemo(function () {
+    return {
+      direction: 'ltr',
+      handleRender: handleRender
+    };
+  }, []);
+  // ============================ Render ============================
+  return _jsx(SliderInternalContext.Provider, {
+    value: sliderContext,
+    children: _jsx(UnstableContext.Provider, {
+      value: unstableContext,
+      children: _jsx(Slider, _objectSpread(_objectSpread({}, sliderProps), {}, {
+        className: classNames(className, "".concat(prefixCls, "-slider")),
+        tooltip: {
+          open: false
+        },
+        range: {
+          editable: range,
+          minCount: 2
+        },
+        styles: {
+          rail: {
+            background: linearCss
+          },
+          handle: pointColor ? {
+            background: pointColor
+          } : {}
+        },
+        classNames: {
+          rail: "".concat(prefixCls, "-slider-rail"),
+          handle: "".concat(prefixCls, "-slider-handle")
+        }
+      }))
+    })
+  });
+};
+var SingleColorSlider = function SingleColorSlider(props) {
+  var value = props.value,
+    onChange = props.onChange,
+    onChangeComplete = props.onChangeComplete;
+  var singleOnChange = function singleOnChange(v) {
+    return onChange(v[0]);
+  };
+  var singleOnChangeComplete = function singleOnChangeComplete(v) {
+    return onChangeComplete(v[0]);
+  };
+  return _jsx(GradientColorSlider, _objectSpread(_objectSpread({}, props), {}, {
+    value: [value],
+    onChange: singleOnChange,
+    onChangeComplete: singleOnChangeComplete
+  }));
+};
+export default SingleColorSlider;

package/lib/Antd5/color-picker/components/ColorTrigger.js

@@ -1,17 +1,25 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["color", "prefixCls", "open", "disabled", "format", "className", "showText"];
+var _excluded = ["color", "prefixCls", "open", "disabled", "format", "className", "showText", "activeIndex"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import React, { forwardRef, useMemo } from 'react';
 import { ColorBlock } from '@rc-component/color-picker';
 import classNames from 'classnames';
-import { getAlphaColor } from '../util';
+import pickAttrs from 'rc-util/lib/pickAttrs';
+import { useLocale } from '../../locale';
+import { getColorAlpha } from '../util';
 import ColorClear from './ColorClear';
 var ColorTrigger = /*#__PURE__*/forwardRef(function (props, ref) {
   var color = props.color,
@@ -21,44 +29,62 @@ var ColorTrigger = /*#__PURE__*/forwardRef(function (props, ref) {
     format = props.format,
     className = props.className,
     showText = props.showText,
+    activeIndex = props.activeIndex,
     rest = _objectWithoutProperties(props, _excluded);
   var colorTriggerPrefixCls = "".concat(prefixCls, "-trigger");
-  var containerNode = useMemo(function () {
-    return color.cleared ? _jsx(ColorClear, {
-      prefixCls: prefixCls
-    }) : _jsx(ColorBlock, {
-      prefixCls: prefixCls,
-      color: color.toRgbString()
-    });
-  }, [color, prefixCls]);
-  var genColorString = function genColorString() {
+  var colorTextPrefixCls = "".concat(colorTriggerPrefixCls, "-text");
+  var colorTextCellPrefixCls = "".concat(colorTextPrefixCls, "-cell");
+  var _useLocale = useLocale('ColorPicker'),
+    _useLocale2 = _slicedToArray(_useLocale, 1),
+    locale = _useLocale2[0];
+  // ============================== Text ==============================
+  var desc = React.useMemo(function () {
+    if (!showText) {
+      return '';
+    }
+    if (typeof showText === 'function') {
+      return showText(color);
+    }
+    if (color.cleared) {
+      return locale.transparent;
+    }
+    if (color.isGradient()) {
+      return color.getColors().map(function (c, index) {
+        var inactive = activeIndex !== -1 && activeIndex !== index;
+        return _jsxs("span", {
+          className: classNames(colorTextCellPrefixCls, inactive && "".concat(colorTextCellPrefixCls, "-inactive")),
+          children: [c.color.toRgbString(), " ", c.percent, "%"]
+        }, index);
+      });
+    }
     var hexString = color.toHexString().toUpperCase();
-    var alpha = getAlphaColor(color);
+    var alpha = getColorAlpha(color);
     switch (format) {
       case 'rgb':
         return color.toRgbString();
       case 'hsb':
         return color.toHsbString();
-      case 'hex':
+      // case 'hex':
       default:
         return alpha < 100 ? "".concat(hexString.slice(0, 7), ",").concat(alpha, "%") : hexString;
     }
-  };
-  var renderText = function renderText() {
-    if (typeof showText === 'function') {
-      return showText(color);
-    }
-    if (showText) {
-      return genColorString();
-    }
-  };
+  }, [color, format, showText, activeIndex]);
+  // ============================= Render =============================
+  var containerNode = useMemo(function () {
+    return color.cleared ? _jsx(ColorClear, {
+      prefixCls: prefixCls
+    }) : _jsx(ColorBlock, {
+      prefixCls: prefixCls,
+      color: color.toCssString()
+    });
+  }, [color, prefixCls]);
   return _jsxs("div", _objectSpread(_objectSpread({
     ref: ref,
     className: classNames(colorTriggerPrefixCls, className, _defineProperty(_defineProperty({}, "".concat(colorTriggerPrefixCls, "-active"), open), "".concat(colorTriggerPrefixCls, "-disabled"), disabled))
-  }, rest), {}, {
+  }, pickAttrs(rest)), {}, {
     children: [containerNode, showText && _jsx("div", {
-      className: "".concat(colorTriggerPrefixCls, "-text"),
-      children: renderText()
+      className: colorTextPrefixCls,
+      children: desc
     })]
   }));
 });