@easyv/react-components 0.0.13 → 0.0.15

package/dist/InputNumber/index.less

@@ -0,0 +1,93 @@
+.arco-input-number {
+  &.arco-input-group-wrapper {
+    --input-height: 30px;
+    --input-step-top: 4px;
+
+    &.arco-input-group-wrapper-mini {
+      --input-height: 22px;
+      --input-step-top: 1px;
+    }
+
+    &.arco-input-group-wrapper-small {
+      --input-height: 26px;
+      --input-step-top: 2px;
+    }
+
+    &.arco-input-group-wrapper-large {
+      --input-height: 34px;
+      --input-step-top: 8px;
+    }
+
+    .arco-input-inner-wrapper {
+      padding-left: 0;
+
+      .arco-input {
+        padding-left: 0;
+      }
+    }
+
+    .arco-input-inner-wrapper-focus {
+      .arco-input-number-step {
+        background-color: var(--color-fill-1);
+      }
+
+      .arco-input-number-suffix-icon {
+        display: none;
+      }
+    }
+
+    .arco-input-number-prefix-inner {
+      cursor: ew-resize;
+      display: flex;
+      align-items: center;
+      min-height: var(--input-height);
+      padding-left: 12px;
+      padding-right: 12px;
+
+      &:empty {
+        padding-left: 6px;
+        padding-right: 6px;
+      }
+    }
+
+    .arco-input-number-step {
+      position: absolute;
+      right: 6px;
+      top: var(--input-step-top);
+      display: flex;
+      flex-direction: column;
+      width: 18px;
+      text-align: center;
+      font-size: 12px;
+      opacity: 0;
+
+      .arco-input-number-handle-up,
+      .arco-input-number-handle-down {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: calc((var(--input-height) - var(--input-step-top) * 2) / 2);
+        cursor: pointer;
+
+        &.arco-input-number-handle-disabled {
+          cursor: not-allowed;
+        }
+
+        &:not(.arco-input-number-handle-disabled):hover {
+          background-color: var(--color-fill-2);
+        }
+      }
+    }
+
+    &:hover {
+      .arco-input-number-step {
+        opacity: 1;
+        transition: all opacity 0.3s;
+      }
+
+      .arco-input-number-suffix-icon {
+        display: none;
+      }
+    }
+  }
+}

package/dist/InputNumber/interface.d.ts

@@ -1 +1,6 @@
-export type { InputNumberProps } from '@arco-design/web-react';
+import type { InputNumberProps } from '@arco-design/web-react';
+interface XInputNumberProps extends Omit<InputNumberProps, 'value' | 'defaultValue' | 'onKeyDown' | 'formatter' | 'parser' | 'strictMode' | 'mode' | 'icons'> {
+    value?: number;
+    defaultValue?: number;
+}
+export { XInputNumberProps as InputNumberProps };

package/dist/InputNumber/util.d.ts

@@ -0,0 +1,8 @@
+export declare function evaluateExpression(exporssion: string): number;
+interface SafeOptions {
+    min?: number;
+    max?: number;
+    precision?: number;
+}
+export declare function getSafeValue(value: number, { min, max, precision }: SafeOptions): number;
+export {};

package/dist/InputNumber/util.js

@@ -0,0 +1,31 @@
+export function evaluateExpression(exporssion) {
+  try {
+    // eslint-disable-next-line no-eval
+    return +eval(exporssion);
+  } catch (e) {
+    return NaN;
+  }
+}
+export function getSafeValue(value, _ref) {
+  var min = _ref.min,
+    max = _ref.max,
+    precision = _ref.precision;
+  // 处理精度问题，如0.1 + 0.2 !== 0.3，不过这是比较简单的处理方式，还是会有异常情况，如需准确，需要引入第三方库
+  var result = parseFloat(value.toFixed(12));
+  if (min !== undefined && result < min) {
+    result = min;
+  }
+  if (max !== undefined && result > max) {
+    result = max;
+  }
+
+  // if (step !== undefined) {
+  //   result = Math.round(result / step) * step;
+  // }
+
+  result = parseFloat(result.toFixed(12));
+  if (precision !== undefined) {
+    result = Number(result.toFixed(precision));
+  }
+  return result;
+}

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 != null) {
+        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) {
+          color = color.filter(function (d, i) {
+            return i !== active;
+          });
+          setActive(active > 0 ? active - 1 : 0);
+          onChange(color);
+        }
+      }
+    };
+    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, index) {
+      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;

package/dist/SpaceModal/index.js

@@ -0,0 +1,19 @@
+import { useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import "./index.less";
+var createContainer = function createContainer() {
+  var div = document.createElement('div');
+  div.className = 'arco-space-modal';
+  return div;
+};
+export default function SpaceModal(_ref) {
+  var children = _ref.children;
+  var rootRef = useRef(createContainer());
+  useEffect(function () {
+    document.body.appendChild(rootRef.current);
+    return function () {
+      document.body.removeChild(rootRef.current);
+    };
+  }, []);
+  return /*#__PURE__*/createPortal(children, rootRef.current);
+}

package/dist/SpaceModal/index.less

@@ -0,0 +1,5 @@
+.arco-space-modal {
+  position: absolute;
+  top: 0;
+  left: 0;
+}

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useClickOutside';
+export * from './useEventListener';

package/dist/hooks/index.js

@@ -0,0 +1,2 @@
+export * from "./useClickOutside";
+export * from "./useEventListener";

package/dist/hooks/useClickOutside.d.ts

@@ -0,0 +1 @@
+export declare function useClickOutside(ref: any, handler: any): null;

package/dist/hooks/useClickOutside.js

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+export function useClickOutside(ref, handler) {
+  useEffect(function () {
+    var listener = function listener(event) {
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+      handler(event);
+    };
+    document.addEventListener('click', listener);
+    return function () {
+      document.removeEventListener('click', listener);
+    };
+  }, [ref, handler]);
+  return null;
+}

package/dist/hooks/useEventListener.d.ts

@@ -0,0 +1 @@
+export declare function useEventListener(eventName: any, handler: any, element?: Window & typeof globalThis): null;

package/dist/hooks/useEventListener.js

@@ -0,0 +1,18 @@
+import { useEffect, useRef } from 'react';
+export function useEventListener(eventName, handler) {
+  var element = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : window;
+  var savedHandler = useRef(function (e) {});
+  useEffect(function () {
+    savedHandler.current = handler;
+  }, [handler]);
+  useEffect(function () {
+    var eventListener = function eventListener(event) {
+      return savedHandler.current(event);
+    };
+    element.addEventListener(eventName, eventListener);
+    return function () {
+      element.removeEventListener(eventName, eventListener);
+    };
+  }, [eventName, element]);
+  return null;
+}