@chaoswise/ui 3.0.23 → 3.1.1

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
     })]
   }));
 });

package/lib/Antd5/color-picker/components/PanelPicker/GradientColorBar.js

@@ -0,0 +1,130 @@
+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); }
+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 _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+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; }
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { AggregationColor } from '../../color';
+import { getGradientPercentColor } from '../../util';
+import { GradientColorSlider } from '../ColorSlider';
+function sortColors(colors) {
+  return _toConsumableArray(colors).sort(function (a, b) {
+    return a.percent - b.percent;
+  });
+}
+/**
+ * GradientColorBar will auto show when the mode is `gradient`.
+ */
+var GradientColorBar = function GradientColorBar(props) {
+  var prefixCls = props.prefixCls,
+    mode = props.mode,
+    onChange = props.onChange,
+    onChangeComplete = props.onChangeComplete,
+    onActive = props.onActive,
+    activeIndex = props.activeIndex,
+    onGradientDragging = props.onGradientDragging,
+    colors = props.colors;
+  var isGradient = mode === 'gradient';
+  // ============================= Colors =============================
+  var colorList = React.useMemo(function () {
+    return colors.map(function (info) {
+      return {
+        percent: info.percent,
+        color: info.color.toRgbString()
+      };
+    });
+  }, [colors]);
+  var values = React.useMemo(function () {
+    return colorList.map(function (info) {
+      return info.percent;
+    });
+  }, [colorList]);
+  // ============================== Drag ==============================
+  var colorsRef = React.useRef(colorList);
+  // Record current colors
+  var onDragStart = function onDragStart(_ref) {
+    var rawValues = _ref.rawValues,
+      draggingIndex = _ref.draggingIndex,
+      draggingValue = _ref.draggingValue;
+    if (rawValues.length > colorList.length) {
+      // Add new node
+      var newPointColor = getGradientPercentColor(colorList, draggingValue);
+      var nextColors = _toConsumableArray(colorList);
+      nextColors.splice(draggingIndex, 0, {
+        percent: draggingValue,
+        color: newPointColor
+      });
+      colorsRef.current = nextColors;
+    } else {
+      colorsRef.current = colorList;
+    }
+    onGradientDragging(true);
+    onChange(new AggregationColor(sortColors(colorsRef.current)), true);
+  };
+  // Adjust color when dragging
+  var onDragChange = function onDragChange(_ref2) {
+    var deleteIndex = _ref2.deleteIndex,
+      draggingIndex = _ref2.draggingIndex,
+      draggingValue = _ref2.draggingValue;
+    var nextColors = _toConsumableArray(colorsRef.current);
+    if (deleteIndex !== -1) {
+      nextColors.splice(deleteIndex, 1);
+    } else {
+      nextColors[draggingIndex] = _objectSpread(_objectSpread({}, nextColors[draggingIndex]), {}, {
+        percent: draggingValue
+      });
+      nextColors = sortColors(nextColors);
+    }
+    onChange(new AggregationColor(nextColors), true);
+  };
+  // ============================== Key ===============================
+  var onKeyDelete = function onKeyDelete(index) {
+    var nextColors = _toConsumableArray(colorList);
+    nextColors.splice(index, 1);
+    var nextColor = new AggregationColor(nextColors);
+    onChange(nextColor);
+    onChangeComplete(nextColor);
+  };
+  // ============================= Change =============================
+  var onInternalChangeComplete = function onInternalChangeComplete(nextValues) {
+    onChangeComplete(new AggregationColor(colorList));
+    // Reset `activeIndex` if out of range
+    if (activeIndex >= nextValues.length) {
+      onActive(nextValues.length - 1);
+    }
+    onGradientDragging(false);
+  };
+  // ============================= Render =============================
+  if (!isGradient) {
+    return null;
+  }
+  return _jsx(GradientColorSlider, {
+    min: 0,
+    max: 100,
+    prefixCls: prefixCls,
+    className: "".concat(prefixCls, "-gradient-slider"),
+    colors: colorList,
+    color: null,
+    value: values,
+    range: true,
+    onChangeComplete: onInternalChangeComplete,
+    disabled: false,
+    type: "gradient",
+    // Active
+    activeIndex: activeIndex,
+    onActive: onActive,
+    // Drag
+    onDragStart: onDragStart,
+    onDragChange: onDragChange,
+    onKeyDelete: onKeyDelete
+  });
+};
+export default /*#__PURE__*/React.memo(GradientColorBar);

package/lib/Antd5/color-picker/components/PanelPicker/index.js

@@ -0,0 +1,194 @@
+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 = ["mode", "onModeChange", "modeOptions", "prefixCls", "allowClear", "value", "disabledAlpha", "onChange", "onClear", "onChangeComplete", "activeIndex", "gradientDragging"];
+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 _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useContext } from 'react';
+import RcColorPicker from '@rc-component/color-picker';
+import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
+import Segmented from '../../../segmented';
+import { AggregationColor } from '../../color';
+import { PanelPickerContext } from '../../context';
+import { genAlphaColor, generateColor } from '../../util';
+import ColorClear from '../ColorClear';
+import ColorInput from '../ColorInput';
+import ColorSlider from '../ColorSlider';
+import GradientColorBar from './GradientColorBar';
+var components = {
+  slider: ColorSlider
+};
+var PanelPicker = function PanelPicker() {
+  var panelPickerContext = useContext(PanelPickerContext);
+  var mode = panelPickerContext.mode,
+    onModeChange = panelPickerContext.onModeChange,
+    modeOptions = panelPickerContext.modeOptions,
+    prefixCls = panelPickerContext.prefixCls,
+    allowClear = panelPickerContext.allowClear,
+    value = panelPickerContext.value,
+    disabledAlpha = panelPickerContext.disabledAlpha,
+    _onChange = panelPickerContext.onChange,
+    onClear = panelPickerContext.onClear,
+    onChangeComplete = panelPickerContext.onChangeComplete,
+    activeIndex = panelPickerContext.activeIndex,
+    gradientDragging = panelPickerContext.gradientDragging,
+    injectProps = _objectWithoutProperties(panelPickerContext, _excluded);
+  // ============================ Colors ============================
+  var colors = React.useMemo(function () {
+    if (!value.cleared) {
+      return value.getColors();
+    }
+    return [{
+      percent: 0,
+      color: new AggregationColor('')
+    }, {
+      percent: 100,
+      color: new AggregationColor('')
+    }];
+  }, [value]);
+  // ========================= Single Color =========================
+  var isSingle = !value.isGradient();
+  // We cache the point color in case user drag the gradient point across another one
+  var _React$useState = React.useState(value),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    lockedColor = _React$useState2[0],
+    setLockedColor = _React$useState2[1];
+  // Use layout effect here since `useEffect` will cause a blink when mouseDown
+  useLayoutEffect(function () {
+    if (!isSingle) {
+      var _colors$activeIndex;
+      setLockedColor((_colors$activeIndex = colors[activeIndex]) === null || _colors$activeIndex === void 0 ? void 0 : _colors$activeIndex.color);
+    }
+  }, [gradientDragging, activeIndex]);
+  var activeColor = React.useMemo(function () {
+    var _colors$activeIndex2;
+    if (isSingle) {
+      return value;
+    }
+    // Use cache when dragging. User can not operation panel when dragging.
+    if (gradientDragging) {
+      return lockedColor;
+    }
+    return (_colors$activeIndex2 = colors[activeIndex]) === null || _colors$activeIndex2 === void 0 ? void 0 : _colors$activeIndex2.color;
+  }, [value, activeIndex, isSingle, lockedColor, gradientDragging]);
+  // ========================= Picker Color =========================
+  var _React$useState3 = React.useState(activeColor),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    pickerColor = _React$useState4[0],
+    setPickerColor = _React$useState4[1];
+  var _React$useState5 = React.useState(0),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    forceSync = _React$useState6[0],
+    setForceSync = _React$useState6[1];
+  var mergedPickerColor = pickerColor !== null && pickerColor !== void 0 && pickerColor.equals(activeColor) ? activeColor : pickerColor;
+  useLayoutEffect(function () {
+    setPickerColor(activeColor);
+  }, [forceSync, activeColor === null || activeColor === void 0 ? void 0 : activeColor.toHexString()]);
+  // ============================ Change ============================
+  var fillColor = function fillColor(nextColor, info) {
+    var submitColor = generateColor(nextColor);
+    // Fill alpha color to 100% if origin is cleared color
+    if (value.cleared) {
+      var rgb = submitColor.toRgb();
+      // Auto fill color if origin is `0/0/0` to enhance user experience
+      if (!rgb.r && !rgb.g && !rgb.b && info) {
+        var infoType = info.type,
+          _info$value = info.value,
+          infoValue = _info$value === void 0 ? 0 : _info$value;
+        submitColor = new AggregationColor({
+          h: infoType === 'hue' ? infoValue : 0,
+          s: 1,
+          b: 1,
+          a: infoType === 'alpha' ? infoValue / 100 : 1
+        });
+      } else {
+        submitColor = genAlphaColor(submitColor);
+      }
+    }
+    if (mode === 'single') {
+      return submitColor;
+    }
+    var nextColors = _toConsumableArray(colors);
+    nextColors[activeIndex] = _objectSpread(_objectSpread({}, nextColors[activeIndex]), {}, {
+      color: submitColor
+    });
+    return new AggregationColor(nextColors);
+  };
+  var onPickerChange = function onPickerChange(colorValue, fromPicker, info) {
+    var nextColor = fillColor(colorValue, info);
+    setPickerColor(nextColor.isGradient() ? nextColor.getColors()[activeIndex].color : nextColor);
+    _onChange(nextColor, fromPicker);
+  };
+  var onInternalChangeComplete = function onInternalChangeComplete(nextColor, info) {
+    // Trigger complete event
+    onChangeComplete(fillColor(nextColor, info));
+    // Back of origin color in case in controlled
+    // This will set after `onChangeComplete` to avoid `setState` trigger rerender
+    // which will make `fillColor` get wrong `color.cleared` state
+    setForceSync(function (ori) {
+      return ori + 1;
+    });
+  };
+  var onInputChange = function onInputChange(colorValue) {
+    _onChange(fillColor(colorValue));
+  };
+  // ============================ Render ============================
+  // Operation bar
+  var operationNode = null;
+  var showMode = modeOptions.length > 1;
+  if (allowClear || showMode) {
+    operationNode = _jsxs("div", {
+      className: "".concat(prefixCls, "-operation"),
+      children: [showMode && _jsx(Segmented, {
+        size: "small",
+        options: modeOptions,
+        value: mode,
+        onChange: onModeChange
+      }), _jsx(ColorClear, _objectSpread({
+        prefixCls: prefixCls,
+        value: value,
+        onChange: function onChange(clearColor) {
+          _onChange(clearColor);
+          onClear === null || onClear === void 0 || onClear();
+        }
+      }, injectProps))]
+    });
+  }
+  // Return
+  return _jsxs(_Fragment, {
+    children: [operationNode, _jsx(GradientColorBar, _objectSpread(_objectSpread({}, panelPickerContext), {}, {
+      colors: colors
+    })), _jsx(RcColorPicker, {
+      prefixCls: prefixCls,
+      value: mergedPickerColor === null || mergedPickerColor === void 0 ? void 0 : mergedPickerColor.toHsb(),
+      disabledAlpha: disabledAlpha,
+      onChange: function onChange(colorValue, info) {
+        onPickerChange(colorValue, true, info);
+      },
+      onChangeComplete: function onChangeComplete(colorValue, info) {
+        onInternalChangeComplete(colorValue, info);
+      },
+      components: components
+    }), _jsx(ColorInput, _objectSpread({
+      value: activeColor,
+      onChange: onInputChange,
+      prefixCls: prefixCls,
+      disabledAlpha: disabledAlpha
+    }, injectProps))]
+  });
+};
+export default PanelPicker;

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

@@ -1,7 +1,3 @@
 import React from 'react';
 export var PanelPickerContext = /*#__PURE__*/React.createContext({});
-export var PanelPresetsContext = /*#__PURE__*/React.createContext({});
-var PanelPickerProvider = PanelPickerContext.Provider;
-export { PanelPickerProvider };
-var PanelPresetsProvider = PanelPresetsContext.Provider;
-export { PanelPresetsProvider };
+export var PanelPresetsContext = /*#__PURE__*/React.createContext({});