@easyv/react-components 0.0.13 → 0.0.15

package/dist/ColorPicker/index.js

@@ -1,37 +1,31 @@
-import React from 'react';
-import { Panel as ColorPickerPanel } from 'rc-color-picker';
-import 'rc-color-picker/assets/index.css';
-import Color from 'rc-color-picker/lib/helpers/color';
-import { useDebounceFn } from 'ahooks';
+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 { DownOutlined } from '@easyv/react-icons';
+import InputNumber from "../InputNumber";
+import { useLocalStorageState } from 'ahooks';
+import SpaceModal from "../SpaceModal";
+import Points from "./Points";
+import { getBackgroundAccordingColor } from "./utils";
+import ColorPickerPanel from "./Panel";
+import { useClickOutside } from "../hooks";
 import "./index.less";
-import ColorPreview from "./ColorPreview";
 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 ColorPicker(_ref) {
-  var _ref$value = _ref.value,
-    value = _ref$value === void 0 ? 'rgba(255,0,255,0.5)' : _ref$value,
-    onChange = _ref.onChange;
-  var colorObj = new Color(value);
-  var _useDebounceFn = useDebounceFn(function (_ref2) {
-      var color = _ref2.color,
-        alpha = _ref2.alpha;
-      var newColor;
-      var rgbColor;
-      if (alpha === 100) {
-        newColor = color;
-      } else {
-        rgbColor = new Color(color).RGB;
-        newColor = "RGBA(".concat(rgbColor[0], ",").concat(rgbColor[1], ",").concat(rgbColor[2], ",").concat(alpha / 100, ")");
-      }
-      onChange === null || onChange === void 0 ? void 0 : onChange(newColor);
-    }, {
-      wait: 100,
-      leading: true,
-      trailing: false
-    }),
-    run = _useDebounceFn.run;
-  var linearValue = {
+var defaultColorValue = {
+  pure: '#000',
+  linear: {
     stops: [{
       offset: 0,
       color: '#fff'
@@ -40,18 +34,246 @@ export default function ColorPicker(_ref) {
       color: '#000'
     }],
     angle: 0,
-    opacity: 100
+    opacity: 1
+  }
+};
+function CustomColorPicker(_ref, ref) {
+  var mode = _ref.mode,
+    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 = mode === 'multi' ? color.type === 'pure' ? color.pure : color[color.type].stops[active] ? color[color.type].stops[active].color : '#fff' : color;
+  useEffect(function () {
+    setLocalColor(currentColor);
+  }, [currentColor]);
+  useClickOutside(ref, onCancel);
+  useEffect(function () {
+    return function () {
+      var lastColor = lastColorRef.current;
+      console.log('lastColor', lastColor);
+      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 (mode === 'multi' && color.type !== 'pure') {
+          var stops = color[color.type].stops;
+          if (stops.length > 2) {
+            stops = stops.filter(function (d, i) {
+              return i !== active;
+            });
+            setActive(active > 0 ? active - 1 : 0);
+            onChange(_objectSpread(_objectSpread({}, color), {}, _defineProperty({}, color.type, _objectSpread(_objectSpread({}, color[color.type]), {}, {
+              stops: stops
+            }))));
+          }
+        }
+      }
+    };
+    document.body.addEventListener('keydown', downHandler);
+    return function () {
+      document.body.removeEventListener('keydown', downHandler);
+    };
+  }, [color, active]);
+  var handleTypeChange = function handleTypeChange(type) {
+    var typeValue = color[type];
+    if (typeValue) {
+      onChange(_objectSpread(_objectSpread({}, color), {}, {
+        type: type
+      }));
+    } else {
+      onChange(_objectSpread(_objectSpread({}, color), {}, _defineProperty({
+        type: type
+      }, type, defaultColorValue[type])));
+    }
+    setActive(0);
+  };
+  var handleColorChange = function handleColorChange(colorValue, used) {
+    if (mode === 'multi') {
+      if (color.type === 'pure') {
+        lastColorRef.current = used ? null : colorValue;
+        onChange(_objectSpread(_objectSpread({}, color), {}, {
+          pure: colorValue
+        }));
+      } else {
+        var newColors = color[color.type].stops.map(function (d, i) {
+          return i === active ? _objectSpread(_objectSpread({}, d), {}, {
+            color: colorValue
+          }) : d;
+        });
+        lastColorRef.current = used ? null : newColors;
+        onChange(_objectSpread(_objectSpread({}, color), {}, _defineProperty({}, color.type, _objectSpread(_objectSpread({}, color[color.type]), {}, {
+          stops: newColors
+        }))));
+      }
+    } else {
+      if (ref.current) {
+        lastColorRef.current = used ? null : colorValue;
+      }
+      onChange(colorValue);
+    }
+  };
+
+  // const handleChangeComplete = (value) => {
+  //   if (value && value.hex) {
+  //     const { rgb, hex } = value;
+  //     const { r, g, b, a } = rgb;
+  //     let newColor = rgb.a === 1 ? hex : `RGBA(${r},${g},${b},${a})`;
+
+  //     handleColorChange(newColor);
+  //   }
+  // };
+
+  var handleCollapseRecent = function handleCollapseRecent() {
+    setRecentCollapsed(function (prev) {
+      return !prev;
+    });
+  };
+  var handleColorsChange = function handleColorsChange(colors, used) {
+    onChange(_objectSpread(_objectSpread({}, color), {}, _defineProperty({}, color.type, _objectSpread(_objectSpread({}, color[color.type]), {}, {
+      stops: colors
+    }))));
+    lastColorRef.current = used ? null : colors;
+  };
+  var handleAngleChange = function handleAngleChange(value) {
+    onChange(_objectSpread(_objectSpread({}, color), {}, _defineProperty({}, color.type, _objectSpread(_objectSpread({}, color[color.type]), {}, {
+      angle: value
+    }))));
   };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(ColorPreview, {
-      type: "linear",
-      value: linearValue
-    }), /*#__PURE__*/_jsx(ColorPickerPanel, {
-      className: "arco-color-picker",
-      mode: "RGB",
-      color: colorObj.toHexString(),
-      alpha: colorObj.alpha,
-      onChange: run
-    })]
+
+  // const handleLocalColorChange = useCallback((color) => {
+  //   setLocalColor(color);
+  // }, []);
+
+  return /*#__PURE__*/_jsx(SpaceModal, {
+    children: /*#__PURE__*/_jsxs("div", {
+      className: 'arco-color-picker',
+      style: {
+        left: position.x,
+        top: position.y
+      },
+      ref: ref,
+      children: [mode === 'multi' && /*#__PURE__*/_jsxs("div", {
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: 'arco-color-picker-type',
+          children: [/*#__PURE__*/_jsx("span", {
+            className: classNames('arco-color-picker-circle', 'arco-color-picker-pure', _defineProperty({}, 'arco-color-picker-active', color.type === 'pure')),
+            onClick: function onClick(e) {
+              return handleTypeChange('pure');
+            }
+          }), /*#__PURE__*/_jsx("span", {
+            className: classNames('arco-color-picker-circle', 'arco-color-picker-linear', _defineProperty({}, 'arco-color-picker-active', color.type === 'linear')),
+            onClick: function onClick(e) {
+              return handleTypeChange('linear');
+            }
+          })]
+        }), color.type === 'linear' && /*#__PURE__*/_jsxs("div", {
+          className: 'arco-color-picker-colors',
+          children: [/*#__PURE__*/_jsx(Points, {
+            dots: color.linear.stops,
+            active: active,
+            setActive: setActive,
+            onChange: handleColorsChange
+          }), /*#__PURE__*/_jsx("div", {
+            style: {
+              flex: 1
+            },
+            children: /*#__PURE__*/_jsx(InputNumber, {
+              hideControl: true,
+              min: -360,
+              max: 360,
+              suffix: "\xB0",
+              value: color.linear.angle,
+              onChange: handleAngleChange,
+              style: {
+                width: 36
+              }
+            })
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: 'arco-color-picker-scroll-container',
+        children: [/*#__PURE__*/_jsx(ColorPickerPanel, {
+          record: lastColorRef.current,
+          color: localColor,
+          active: active,
+          onChange: handleColorChange
+        }), /*#__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 && mode === 'multi' && color.type === 'linear' && usedLinearColors && usedLinearColors.length && /*#__PURE__*/_jsx("div", {
+            className: 'arco-color-picker-recent-title',
+            children: "\u6E10\u53D8"
+          }), !recentCollapsed && mode === 'multi' && color.type === 'linear' && /*#__PURE__*/_jsx("div", {
+            className: 'arco-color-picker-list',
+            children: usedLinearColors && usedLinearColors.map(function (d, i) {
+              return /*#__PURE__*/_jsx("div", {
+                className: 'arco-color-picker-item',
+                style: getBackgroundAccordingColor(d),
+                onClick: function onClick() {
+                  return handleColorsChange(d, true);
+                }
+              }, i);
+            })
+          }), !recentCollapsed && mode === 'multi' && color.type === 'linear' && /*#__PURE__*/_jsx("div", {
+            className: 'arco-color-picker-recent-title',
+            children: "\u7EAF\u8272"
+          }), !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/ColorPicker/index.less

@@ -1,160 +1,222 @@
 .arco-color-picker {
-  border: 1px solid var(--color-border-3);
-  background-color: var(--color-bg-white);
-  width: 238px;
+  position: absolute;
+  border-radius: 4px;
+  background: var(--color-bg-1);
+  border: 1px solid #393b4a;
+  box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.3);
+  overflow-y: auto;
+  overflow-x: hidden;
+  z-index: 9999;
+  // max-height: 438px;
+  width: 242px;
+  display: flex;
+  flex-direction: column;
+
+  &::-webkit-scrollbar {
+    width: 0;
+  }
+
+  .arco-color-picker-recent {
+    padding: 6px 10px 8px;
+    border-top: 1px solid #393b4a;
+    background: var(--color-bg-1);
+
+    .arco-color-picker-title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      color: #fff;
+
+      .arco-color-picker-icon {
+        cursor: pointer;
+        transition: transform linear 200ms;
+        font-size: 18px !important;
+
+        &.arco-color-picker-collapsed {
+          transform: rotate(-90deg);
+        }
+      }
 
-  .rc-color-picker-panel-board {
-    margin: 11px 11px 0;
-  }
+      .arco-color-picker-add {
+        margin-right: 8px;
+        cursor: pointer;
 
-  .rc-color-picker-panel-board-hsv {
-    width: 216px;
-  }
-
-  .rc-color-picker-panel-ribbon,
-  .rc-color-picker-panel-alpha {
-    border-radius: 0;
-    box-shadow: none;
-
-    span {
-      width: 12px;
-      height: 12px;
-      border-radius: 6px;
-      border: 2px solid #fff;
-      background-color: transparent;
-      margin-left: -6px;
-      margin-top: -3px;
+        &:hover {
+          color: var(--easyv-primary-color);
+        }
+      }
     }
-  }
-
-  .rc-color-picker-panel-wrap {
-    margin-top: 16px;
-  }
 
-  // rgb滑块
-  .rc-color-picker-panel-wrap-ribbon {
-    top: 3px;
-    left: 11px;
-    right: 50px;
-    height: 6px;
-    padding: 0 6px;
-    border-radius: 3px;
-    background-image: linear-gradient(
-      to right,
-      #ff0000 0%,
-      #ff9900 10%,
-      #cdff00 20%,
-      #35ff00 30%,
-      #00ff66 40%,
-      #00fffd 50%,
-      #0066ff 60%,
-      #3200ff 70%,
-      #cd00ff 80%,
-      #ff0099 90%,
-      #ff0000 100%
-    );
-  }
+    .arco-color-picker-list {
+      display: flex;
+      flex-wrap: wrap;
+      margin: 12px -10px 0;
+      padding: 0 0 0 10px;
+
+      .arco-color-picker-item {
+        box-sizing: border-box;
+        width: 20px;
+        height: 20px;
+        margin: 0 8px 8px 0;
+        border-radius: 50%;
+        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==')
+          left center;
+        overflow: hidden;
+        cursor: pointer;
+        position: relative;
+        border: 1px solid #38393f;
+      }
 
-  .rc-color-picker-panel-ribbon {
-    background-image: none;
+      .arco-color-picker-color {
+        width: 100%;
+        height: 100%;
+      }
+    }
   }
 
-  // alpha 滑块
-  .rc-color-picker-panel-wrap-alpha {
-    bottom: 3px;
-    left: 11px;
-    right: 50px;
-    height: 6px;
-    padding: 0 6px;
+  .arco-color-picker-operate {
+    position: absolute;
+    background: var(--background-4);
+    color: var(--text-1);
+    width: 80px;
+    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.57);
     border-radius: 3px;
-    background-image: linear-gradient(
-        45deg,
-        #b9b8c1 25%,
-        transparent 0,
-        transparent 75%,
-        #b9b8c1 0
-      ),
-      linear-gradient(
-        45deg,
-        #b9b8c1 25%,
-        transparent 0,
-        transparent 75%,
-        #b9b8c1 0
-      );
-    background-color: #e1e1ea;
-    background-size: 6px 6px;
-    background-position: 0 0, 3px 3px;
-  }
 
-  .rc-color-picker-panel-alpha {
-    width: auto;
-    background-image: none;
-  }
+    .arco-color-picker-item {
+      padding: 0 16px;
+      height: 28px;
+      line-height: 28px;
+      cursor: pointer;
 
-  .rc-color-picker-panel-alpha-bg {
-    width: 177px;
-    border-radius: 3px;
-    margin-left: -6px;
+      &:hover {
+        color: #fff;
+      }
+    }
   }
+}
 
-  .rc-color-picker-panel-params-input {
-    padding: 2px 11px;
+.arco-color-picker-type {
+  display: flex;
+  height: 36px;
+  align-items: center;
+  border-bottom: 1px solid #393b4a;
+
+  .arco-color-picker-circle {
+    position: relative;
+    width: 30px;
+    height: 36px;
+    cursor: pointer;
+
+    &::before {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      content: '';
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      border: 1px solid #666;
+    }
 
-    input {
-      outline: none;
-      height: 24px;
-      border-color: var(--color-border-3);
-      background-color: var(--color-bg-white);
-      color: #bfbfbf;
+    &.arco-color-picker-linear {
+      &::before {
+        background-image: linear-gradient(#aaa, #000);
+      }
 
-      &[type='number'] {
-        margin-left: 4px;
+      &.arco-color-picker-active {
+        &::before {
+          background-image: linear-gradient(
+            180deg,
+            rgba(36, 145, 247, 0) 18%,
+            var(--easyv-primary-color) 100%
+          );
+          border: 1px solid var(--easyv-primary-color);
+        }
       }
     }
-  }
 
-  .rc-color-picker-panel-wrap-preview {
-    right: 11px;
-    border-radius: 50%;
-    overflow: hidden;
+    &.arco-color-picker-pure {
+      &::before {
+        background: #666666;
+      }
 
-    input {
-      display: none;
+      &.arco-color-picker-active {
+        &::before {
+          background: var(--easyv-primary-color);
+        }
+      }
     }
   }
+}
 
-  .rc-color-picker-panel-params-lable {
-    color: var(--easyv-text-color);
-  }
-
-  .rc-color-picker-panel-params-lable-number:hover {
-    border-radius: 0;
-    box-shadow: none;
-    background-color: transparent;
-    cursor: initial;
-  }
+.arco-color-picker-colors {
+  display: flex;
+  align-items: center;
+  height: 48px;
+  padding: 0 8px 0 16px;
+  border-bottom: 1px solid #393b4a;
 
-  // 颜色板的圈
-  .rc-color-picker-panel-board span {
-    width: 12px;
-    height: 12px;
-    border-radius: 6px;
-    border-width: 2px;
-    margin: -6px 0 0 -6px;
-  }
+  .arco-color-picker-bar {
+    position: relative;
+    width: 150px;
+    height: 6px;
+    margin-right: 16px;
+    border-radius: 4px;
+    // background-image: linear-gradient(90deg, #fff, #f00);
+    &::before {
+      content: '';
+      position: relative;
+      z-index: -1;
+      display: block;
+      width: 100%;
+      height: 100%;
+      border-radius: 4px;
+      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;
+    }
 
-  .rc-color-picker-panel-params-hex {
-    width: 70px;
+    .arco-color-picker-item {
+      position: absolute;
+      top: -2px;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      transform: translateX(-50%);
+      border: 2px solid #ffffff;
+      cursor: pointer;
+
+      &.arco-color-picker-active {
+        width: 12px;
+        height: 12px;
+        box-shadow: 0 0 0 3px rgba(36, 145, 247, 0.6);
+      }
+    }
   }
+}
 
-  .rc-color-picker-panel-params-lable-hex {
-    width: 70px;
-  }
+.arco-color-picker-recent-title {
+  color: #bfbfbf;
+  margin-bottom: 10px;
+}
 
-  .rc-color-picker-panel-inner {
-    box-shadow: none;
-    border: none;
-    border-radius: 0;
-    overflow: hidden;
-  }
+.arco-color-picker-scroll-container {
+  flex: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
 }