@easyv/react-components 0.0.14 → 0.0.16

package/dist/ColorPicker/utils.d.ts

@@ -1,13 +1,23 @@
 export declare function toHex(x: any): string;
-export declare function transformColor(color: string, a: number): any;
-export declare function getBackgroundAccordingColor(color: any, fixedAngle: any): {
+export declare function resolveColor(colorParam: string): {
+    r?: undefined;
+    g?: undefined;
+    b?: undefined;
+    a?: undefined;
+    hex?: undefined;
+} | {
+    r: any;
+    g: any;
+    b: any;
+    a: any;
+    hex: string;
+};
+export declare function transformColor(color: any, a: any): string | undefined;
+export declare function getBackgroundAccordingColor(color: any, fixedAngle?: number): {
     backgroundImage: string;
     background?: undefined;
 } | {
     background: any;
     backgroundImage?: undefined;
 } | undefined;
-export declare function getMiddleColor(colors: {
-    color: string;
-    offset: number;
-}[], offset: number): string;
+export declare function getMiddleColor(colors: any, offset: any): any;

package/dist/ColorPicker/utils.js

@@ -1,15 +1,56 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-import Color from 'rc-color-picker/lib/helpers/color';
 export function toHex(x) {
   return ('0' + parseInt(x).toString(16)).slice(-2);
 }
+export function resolveColor(colorParam) {
+  if (!colorParam || typeof colorParam !== 'string') {
+    return {};
+  }
+
+  // 转为小写并去除空格
+  var color = colorParam.toLowerCase().replace(/\s+/g, '');
+  var hexReg = /^#([0-9|a-f]{3}|[0-9|a-f]{6})$/;
+  var rgbReg = /^(rgb\(\d+,\d+,\d+\)|rgba\(\d+,\d+,\d+,(\d+)?(\.)?(\d+)?\))$/;
+  // const rgbReg1 = /^(rgb\(\d+,\d+,\d+\)|rgba\((\d+)?(\.)?(\d+)?,(\d+)?(\.)?(\d+)?,(\d+)?(\.)?(\d+)?,(\d+)?(\.)?(\d+)?\))$/;
+
+  var r, g, b, a;
+  if (hexReg.test(color)) {
+    if (color.length === 4) {
+      r = parseInt(color.slice(1, 2) + color.slice(1, 2), 16);
+      g = parseInt(color.slice(2, 3) + color.slice(2, 3), 16);
+      b = parseInt(color.slice(3, 4) + color.slice(3, 4), 16);
+    } else {
+      r = parseInt(color.slice(1, 3), 16);
+      g = parseInt(color.slice(3, 5), 16);
+      b = parseInt(color.slice(5, 7), 16);
+    }
+    a = 1;
+  } else if (rgbReg.test(color)) {
+    var colors = color.replace(/rgba|rgb|\(|\)/g, '').split(',');
+    r = Number(colors[0]);
+    g = Number(colors[1]);
+    b = Number(colors[2]);
+    a = colors.length === 4 ? Number(colors[3]) : 1;
+  } else {
+    return {};
+  }
+
+  // return { r: Math.floor(r), g: Math.floor(g), b: Math.floor(b), a, hex: `#${toHex(r)}${toHex(g)}${toHex(b)}` };
+  return {
+    r: r,
+    g: g,
+    b: b,
+    a: a,
+    hex: "#".concat(toHex(r)).concat(toHex(g)).concat(toHex(b))
+  };
+}
 export function transformColor(color, a) {
-  var _Color = new Color(color),
-    r = _Color.redValue,
-    g = _Color.greenValue,
-    b = _Color.blueValue,
-    toHexString = _Color.toHexString;
-  return a === 1 ? toHexString() : "RGBA(".concat(r, ",").concat(g, ",").concat(b, ",").concat(a, ")");
+  var _resolveColor = resolveColor(color),
+    r = _resolveColor.r,
+    g = _resolveColor.g,
+    b = _resolveColor.b,
+    hex = _resolveColor.hex;
+  return a === 1 ? hex : "RGBA(".concat(r, ",").concat(g, ",").concat(b, ",").concat(a, ")");
 }
 export function getBackgroundAccordingColor(color, fixedAngle) {
   if (typeof color === 'string') {
@@ -22,19 +63,19 @@ export function getBackgroundAccordingColor(color, fixedAngle) {
       return a.offset - b.offset;
     });
     var colors = rebaseStops.map(function (item, index) {
-      var _Color2 = new Color(item.color),
-        r = _Color2.r,
-        g = _Color2.g,
-        b = _Color2.b,
-        a = _Color2.a;
+      var _resolveColor2 = resolveColor(item.color),
+        r = _resolveColor2.r,
+        g = _resolveColor2.g,
+        b = _resolveColor2.b,
+        a = _resolveColor2.a;
       if (a === 1 || index === rebaseStops.length - 1) {
         return "".concat(item.color, " ").concat(item.offset, "%");
       } else {
-        var _Color3 = new Color(rebaseStops[index + 1].color),
-          nextR = _Color3.r,
-          nextG = _Color3.g,
-          nextB = _Color3.b,
-          nextA = _Color3.a;
+        var _resolveColor3 = resolveColor(rebaseStops[index + 1].color),
+          nextR = _resolveColor3.r,
+          nextG = _resolveColor3.g,
+          nextB = _resolveColor3.b,
+          nextA = _resolveColor3.a;
         var stepOpacity = (nextA - a) / 5;
         var stepOffset = (rebaseStops[index + 1].offset - item.offset) / 5;
         var stepR = (nextR - r) / 5;
@@ -76,19 +117,19 @@ export function getBackgroundAccordingColor(color, fixedAngle) {
         return a.offset - b.offset;
       });
       var _colors = _rebaseStops.map(function (item, index) {
-        var _Color4 = new Color(item.color),
-          r = _Color4.redValue,
-          g = _Color4.greenValue,
-          b = _Color4.blueValue,
-          a = _Color4.alphaValue;
+        var _resolveColor4 = resolveColor(item.color),
+          r = _resolveColor4.r,
+          g = _resolveColor4.g,
+          b = _resolveColor4.b,
+          a = _resolveColor4.a;
         if (a === 1 || index === _rebaseStops.length - 1) {
           return "".concat(transformColor(item.color, a * opacity), " ").concat(item.offset, "%");
         } else {
-          var _Color5 = new Color(_rebaseStops[index + 1].color),
-            nextR = _Color5.redValue,
-            nextG = _Color5.greenValue,
-            nextB = _Color5.blueValue,
-            nextA = _Color5.alphaValue;
+          var _resolveColor5 = resolveColor(_rebaseStops[index + 1].color),
+            nextR = _resolveColor5.r,
+            nextG = _resolveColor5.g,
+            nextB = _resolveColor5.b,
+            nextA = _resolveColor5.a;
           var stepOpacity = (nextA - a) / 5;
           var stepOffset = (_rebaseStops[index + 1].offset - item.offset) / 5;
           var stepR = (nextR - r) / 5;
@@ -102,7 +143,7 @@ export function getBackgroundAccordingColor(color, fixedAngle) {
         }
       });
       return {
-        backgroundImage: "linear-gradient(".concat(fixedAngle !== undefined ? fixedAngle : angle, "deg, ").concat(_colors.join(','), ")")
+        backgroundImage: "linear-gradient(".concat(fixedAngle ? fixedAngle : angle, "deg, ").concat(_colors.join(','), ")")
       };
     } else {
       return {
@@ -112,8 +153,7 @@ export function getBackgroundAccordingColor(color, fixedAngle) {
   }
 }
 export function getMiddleColor(colors, offset) {
-  var leftColor;
-  var rightColor;
+  var leftColor, rightColor;
   var leftColors = colors.filter(function (d) {
     return d.offset < offset;
   });
@@ -138,16 +178,22 @@ export function getMiddleColor(colors, offset) {
   if (!rightColor) {
     return leftColor.color;
   }
-  var _Color6 = new Color(leftColor.color),
-    leftR = _Color6.redValue,
-    leftG = _Color6.greenValue,
-    leftB = _Color6.blueValue,
-    leftA = _Color6.alphaValue;
-  var _Color7 = new Color(rightColor.color),
-    rightR = _Color7.redValue,
-    rightG = _Color7.greenValue,
-    rightB = _Color7.blueValue,
-    rightA = _Color7.alphaValue;
+
+  // console.log(leftColor, rightColor, leftColors, rightColors, '计算color');
+
+  var _resolveColor6 = resolveColor(leftColor.color),
+    leftR = _resolveColor6.r,
+    leftG = _resolveColor6.g,
+    leftB = _resolveColor6.b,
+    leftA = _resolveColor6.a;
+  var _resolveColor7 = resolveColor(rightColor.color),
+    rightR = _resolveColor7.r,
+    rightG = _resolveColor7.g,
+    rightB = _resolveColor7.b,
+    rightA = _resolveColor7.a;
+
+  // console.log(resolveColor(leftColor.color), resolveColor(rightColor.color), '计算color');
+
   var newR = Math.round((rightR - leftR) / (rightColor.offset - leftColor.offset) * (offset - leftColor.offset) + leftR);
   var newG = Math.round((rightG - leftG) / (rightColor.offset - leftColor.offset) * (offset - leftColor.offset) + leftG);
   var newB = Math.round((rightB - leftB) / (rightColor.offset - leftColor.offset) * (offset - leftColor.offset) + leftB);

package/dist/RangeColor/Panel.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import '../ColorPicker/index.less';
+declare const _default: import("react").ForwardRefExoticComponent<{
+    color: any;
+    position: any;
+    onChange: any;
+    onCancel: any;
+} & import("react").RefAttributes<unknown>>;
+export default _default;

package/dist/RangeColor/Panel.js

@@ -0,0 +1,187 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useState, useEffect, forwardRef, useRef } from 'react';
+import classNames from 'classnames';
+import { useLocalStorageState } from 'ahooks';
+import { DownOutlined, SwapOutlined } from '@easyv/react-icons';
+import SpaceModal from "../SpaceModal";
+import { useClickOutside } from "../hooks";
+import Points from "./Points";
+import ColorPicker from "../ColorPicker/Panel";
+import Button from "../Button";
+import "../ColorPicker/index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function CustomColorPicker(_ref, ref) {
+  var color = _ref.color,
+    position = _ref.position,
+    onChange = _ref.onChange,
+    onCancel = _ref.onCancel;
+  var _useLocalStorageState = useLocalStorageState('usedColors'),
+    _useLocalStorageState2 = _slicedToArray(_useLocalStorageState, 1),
+    usedPureColors = _useLocalStorageState2[0];
+  var _useLocalStorageState3 = useLocalStorageState('usedLinearColors'),
+    _useLocalStorageState4 = _slicedToArray(_useLocalStorageState3, 1),
+    usedLinearColors = _useLocalStorageState4[0];
+  var _useLocalStorageState5 = useLocalStorageState('recentCollapsed'),
+    _useLocalStorageState6 = _slicedToArray(_useLocalStorageState5, 2),
+    recentCollapsed = _useLocalStorageState6[0],
+    setRecentCollapsed = _useLocalStorageState6[1];
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    active = _useState2[0],
+    setActive = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    localColor = _useState4[0],
+    setLocalColor = _useState4[1];
+  var lastColorRef = useRef(null);
+  var currentColor = color[active] ? color[active].color : '#fff';
+  useEffect(function () {
+    setLocalColor(currentColor);
+  }, [currentColor]);
+  useClickOutside(ref, onCancel);
+  useEffect(function () {
+    return function () {
+      var lastColor = lastColorRef.current;
+      if (lastColor) {
+        if (typeof lastColor === 'string') {
+          var newColors = [lastColor].concat(usedPureColors || []);
+          newColors = Array.from(new Set(newColors)).slice(0, 16);
+          localStorage.setItem('usedColors', JSON.stringify(newColors));
+        } else {
+          var _newColors = [lastColor].concat(usedLinearColors || []);
+          _newColors = _newColors.slice(0, 16);
+          localStorage.setItem('usedLinearColors', JSON.stringify(_newColors));
+        }
+      }
+    };
+  }, []);
+  useEffect(function () {
+    var downHandler = function downHandler(e) {
+      e.stopPropagation();
+      if (e.key === 'Backspace') {
+        if (color.length > 2) {
+          var resultColor = color.filter(function (d, i) {
+            return i !== active;
+          });
+          setActive(active > 0 ? active - 1 : 0);
+          onChange(resultColor);
+        }
+      }
+    };
+    document.body.addEventListener('keydown', downHandler);
+    return function () {
+      document.body.removeEventListener('keydown', downHandler);
+    };
+  }, [color, active]);
+  var handleColorChange = function handleColorChange(colorValue, used) {
+    // 判断颜色有没有更改，没有更改就不要执行。进来的第一次会把焦点定位到输入框中，点击其他地方时会失焦，会自动触发ColorPicker中的onchange事件，导致更新一次
+    if (color[active].color.replace(/\s/g, '') === colorValue) {
+      return;
+    }
+    // console.log(colorValue, 'colorValue');
+    var newColors = color.map(function (d, i) {
+      return i === active ? _objectSpread(_objectSpread({}, d), {}, {
+        color: colorValue
+      }) : d;
+    });
+    // ref.current._lastColor = used ? null : newColors;
+    lastColorRef.current = used ? null : colorValue;
+    // 增加一个定时器，延迟更新。点击最近使用的颜色时也会触发ColorPicker中的onChange事件，由于ColorPicker中的onChange事件有个100毫秒的延迟，所以给这个设置为101毫秒的延迟，主要目的是在ColorPicker中的onChange事件之后触发
+    setTimeout(function () {
+      onChange(newColors);
+    }, 101);
+  };
+  var handleCollapseRecent = function handleCollapseRecent() {
+    setRecentCollapsed(function (prev) {
+      return !prev;
+    });
+  };
+  var handleColorsChange = function handleColorsChange(colors, used) {
+    onChange(colors);
+    lastColorRef.current = used ? null : colors;
+  };
+
+  // 切换dot的排列方向
+  var handleReverseColor = function handleReverseColor() {
+    var copyStops = color.slice();
+    var newStops = copyStops.reduce(function (all, item) {
+      var obj = {};
+      obj['offset'] = 100 - item.offset;
+      obj['color'] = item.color;
+      all.push(obj);
+      return all;
+    }, []);
+    onChange(newStops);
+  };
+  return /*#__PURE__*/_jsx(SpaceModal, {
+    children: /*#__PURE__*/_jsxs("div", {
+      className: 'arco-color-picker',
+      style: {
+        left: position.x,
+        top: position.y
+      },
+      ref: ref,
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: 'arco-color-picker-colors',
+        children: [/*#__PURE__*/_jsx(Points, {
+          dots: color,
+          active: active,
+          setActive: setActive,
+          onChange: handleColorsChange
+        }), /*#__PURE__*/_jsx("div", {
+          style: {
+            flex: 1
+          },
+          children: /*#__PURE__*/_jsx(Button, {
+            onClick: handleReverseColor,
+            children: /*#__PURE__*/_jsx(SwapOutlined, {})
+          })
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: 'arco-color-picker-scroll-container',
+        children: [/*#__PURE__*/_jsx(ColorPicker, {
+          color: localColor,
+          onChange: handleColorChange,
+          active: active
+        }), /*#__PURE__*/_jsxs("div", {
+          className: 'arco-color-picker-recent',
+          children: [/*#__PURE__*/_jsxs("div", {
+            className: 'arco-color-picker-title',
+            onClick: handleCollapseRecent,
+            children: [/*#__PURE__*/_jsx("div", {
+              children: "\u6700\u8FD1\u4F7F\u7528"
+            }), /*#__PURE__*/_jsx(DownOutlined, {
+              className: classNames('arco-color-picker-icon', _defineProperty({}, 'arco-color-picker-collapsed', recentCollapsed))
+            })]
+          }), !recentCollapsed && /*#__PURE__*/_jsx("div", {
+            className: 'arco-color-picker-list',
+            children: usedPureColors && usedPureColors.map(function (d) {
+              return /*#__PURE__*/_jsx("div", {
+                className: 'arco-color-picker-item',
+                style: {
+                  background: d
+                },
+                onClick: function onClick() {
+                  return handleColorChange(d, true);
+                }
+              }, d);
+            })
+          })]
+        })]
+      })]
+    })
+  });
+}
+export default /*#__PURE__*/forwardRef(CustomColorPicker);

package/dist/RangeColor/Points.d.ts

@@ -0,0 +1,2 @@
+import '../ColorPicker/index.less';
+export default function Points(props: any): import("react/jsx-runtime").JSX.Element;

package/dist/RangeColor/Points.js

@@ -0,0 +1,88 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import { useRef, useCallback } from 'react';
+import classNames from 'classnames';
+import { useEventListener } from "../hooks";
+import { getBackgroundAccordingColor, getMiddleColor } from "../ColorPicker/utils";
+import Tooltip from "../Tooltip";
+import "../ColorPicker/index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Points(props) {
+  var _props$dots = props.dots,
+    dots = _props$dots === void 0 ? [] : _props$dots,
+    active = props.active,
+    setActive = props.setActive,
+    onChange = props.onChange;
+  var mouseDownRef = useRef(false);
+  var containerRect = useRef({});
+  var containerRef = useRef(null);
+  var handleMouseDown = function handleMouseDown(index, e) {
+    e.stopPropagation();
+    mouseDownRef.current = true;
+    containerRect.current = containerRef.current.getBoundingClientRect();
+    setActive(index);
+  };
+  var handleMouseMove = function handleMouseMove(e) {
+    e.stopPropagation();
+    if (mouseDownRef.current) {
+      var newOffset = (e.clientX - containerRect.current.x) / containerRect.current.width * 100;
+      newOffset = newOffset > 100 ? 100 : newOffset < 0 ? 0 : newOffset;
+      var newDots = dots.map(function (d, i) {
+        return i === active ? _objectSpread(_objectSpread({}, d), {}, {
+          offset: newOffset
+        }) : d;
+      });
+      onChange(newDots);
+    }
+  };
+  var handleMouseUp = useCallback(function (e) {
+    e.stopPropagation();
+    mouseDownRef.current = false;
+  }, []);
+  useEventListener('mousemove', handleMouseMove);
+  useEventListener('mouseup', handleMouseUp);
+  var handleAddColor = function handleAddColor(e) {
+    if (mouseDownRef.current) {
+      return;
+    }
+    var offset = Math.floor(e.nativeEvent.offsetX / e.target.offsetWidth * 100);
+    var newColor = getMiddleColor(dots, offset);
+
+    // console.log(newColor, 'newColor is NAN?');
+
+    onChange(dots.concat({
+      color: newColor,
+      offset: offset
+    }));
+    setActive(dots.length);
+  };
+  return /*#__PURE__*/_jsx("div", {
+    ref: containerRef,
+    className: 'arco-color-picker-bar',
+    style: getBackgroundAccordingColor(dots, 90),
+    onMouseDown: handleAddColor,
+    children: dots.map(function (dot, i) {
+      return /*#__PURE__*/_jsx(Tooltip, {
+        getPopupContainer: function getPopupContainer() {
+          return document.getElementsByClassName('arco-color-picker-bar')[0];
+        },
+        content: "".concat(Math.round(dot.offset), "%"),
+        position: "bottom",
+        children: /*#__PURE__*/_jsx("span", {
+          className: classNames('arco-color-picker-item', _defineProperty({}, 'arco-color-picker-active', active === i)),
+          style: {
+            backgroundColor: dot.color,
+            left: "".concat(dot.offset, "%")
+          },
+          onMouseDown: function onMouseDown(e) {
+            return handleMouseDown(i, e);
+          }
+        }, i)
+      }, i);
+    })
+  });
+}

package/dist/RangeColor/index.d.ts

@@ -0,0 +1,3 @@
+import type { RangeColorProps } from './interface';
+import './index.less';
+export default function RangeColor({ value, onChange }: RangeColorProps): import("react/jsx-runtime").JSX.Element;

package/dist/RangeColor/index.js

@@ -0,0 +1,76 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useState, useRef, useEffect, useDeferredValue } from 'react';
+import ColorPicker from "./Panel";
+import { getBackgroundAccordingColor } from "../ColorPicker/utils";
+import "./index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function RangeColor(_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    show = _useState2[0],
+    setShow = _useState2[1];
+  var _useState3 = useState({
+      x: 0,
+      y: 0
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    position = _useState4[0],
+    setPosition = _useState4[1];
+  var previewRef = useRef(null);
+  var pickerRef = useRef(null);
+  var deferedShow = useDeferredValue(show);
+  var handleClick = function handleClick() {
+    setShow(true);
+  };
+  var handleHide = function handleHide() {
+    setShow(false);
+  };
+  var handleColorChange = function handleColorChange(value) {
+    onChange(value);
+  };
+  useEffect(function () {
+    if (deferedShow) {
+      var targetRect = previewRef.current.getBoundingClientRect();
+      var pickerRect = pickerRef.current.getBoundingClientRect();
+      var windowHeight = document.documentElement.clientHeight;
+      var windowWidth = document.documentElement.clientWidth;
+      var hexDOM = pickerRef.current.querySelector('.rc-color-picker-panel-params-hex');
+      if (hexDOM) {
+        hexDOM.focus();
+        hexDOM.select();
+      }
+      var top = windowHeight - targetRect.bottom < pickerRect.height ? targetRect.top - pickerRect.height < 0 ? 0 : targetRect.top - pickerRect.height : targetRect.bottom;
+      var left = windowWidth - targetRect.left < pickerRect.width ? windowWidth - pickerRect.width : targetRect.left;
+      setPosition({
+        x: left,
+        y: top
+      });
+    }
+  }, [deferedShow]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("span", {
+      className: 'arco-range-color-preview',
+      onClick: handleClick,
+      ref: previewRef,
+      children: /*#__PURE__*/_jsx("span", {
+        className: 'arco-range-color-inner',
+        style: getBackgroundAccordingColor(value, 90)
+      })
+    }), deferedShow && /*#__PURE__*/_jsx(ColorPicker, {
+      ref: pickerRef,
+      color: value,
+      position: position,
+      onCancel: handleHide,
+      onChange: handleColorChange
+    })]
+  });
+}

package/dist/RangeColor/index.less

@@ -0,0 +1,49 @@
+.arco-range-color-preview {
+  position: relative;
+  width: 100%;
+  height: 28px;
+  border-radius: 2px;
+  border: 1px solid var(--border-color-2);
+  margin-right: 8px;
+  padding: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--color-bg-1);
+  cursor: pointer;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 6px;
+    right: 6px;
+    top: 6px;
+    bottom: 6px;
+    border-radius: 2px;
+    background-image: linear-gradient(
+        45deg,
+        #404040 25%,
+        transparent 0,
+        transparent 75%,
+        #404040 0
+      ),
+      linear-gradient(
+        45deg,
+        #404040 25%,
+        transparent 0,
+        transparent 75%,
+        #404040 0
+      );
+    background-color: #4a4a4a;
+    background-size: 10px 10px;
+    background-position: 0 0, 5px 5px;
+  }
+
+  .arco-range-color-inner {
+    width: 100%;
+    height: 100%;
+    border-radius: 2px;
+    position: relative;
+    z-index: 1;
+  }
+}

package/dist/RangeColor/interface.d.ts

@@ -0,0 +1,8 @@
+export interface RangeColorItem {
+    offset: number;
+    color: string;
+}
+export interface RangeColorProps {
+    value: RangeColorItem[];
+    onChange: (value: RangeColorItem[]) => void;
+}

package/dist/RangeColor/interface.js

@@ -0,0 +1 @@
+export {};

package/dist/SpaceModal/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import './index.less';
+export default function SpaceModal({ children }: {
+    children: any;
+}): import("react").ReactPortal;