@easyv/react-components 0.0.2 → 0.0.5

package/dist/Collapse/index.d.ts

@@ -1,4 +1,10 @@
-import { Collapse } from '@arco-design/web-react';
+import React, { PropsWithChildren } from 'react';
+import type { CollapseProps } from '@arco-design/web-react';
 import './index.less';
-export default Collapse;
-export type * from './interface';
+declare function XCollapse(props: PropsWithChildren<CollapseProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace XCollapse {
+    var Item: React.ForwardRefExoticComponent<import("@arco-design/web-react").CollapseItemProps & {
+        children?: any;
+    } & React.RefAttributes<unknown>>;
+}
+export default XCollapse;

package/dist/Collapse/index.js

@@ -1,3 +1,17 @@
+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 React from 'react';
 import { Collapse } from '@arco-design/web-react';
+import { RightOutlined } from '@easyv/react-icons';
 import "./index.less";
-export default Collapse;
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function XCollapse(props) {
+  return /*#__PURE__*/_jsx(Collapse, _objectSpread({
+    expandIcon: /*#__PURE__*/_jsx(RightOutlined, {})
+  }, props));
+}
+XCollapse.Item = Collapse.Item;

package/dist/Collapse/index.less

@@ -0,0 +1,5 @@
+.arco-collapse-item-active
+  > .arco-collapse-item-header
+  .arco-collapse-item-header-title {
+  font-weight: normal;
+}

package/dist/ColorPicker/ColorPreview.d.ts

@@ -0,0 +1,19 @@
+import './ColorPreview.less';
+declare type ColorPreviewProps = PureColorProps | LinearColorProps;
+interface PureColorProps {
+    type: 'pure';
+    value: string;
+}
+interface LinearColorProps {
+    type: 'linear';
+    value: {
+        stops: {
+            color: string;
+            offset: number;
+        }[];
+        angle: number;
+        opacity: number;
+    };
+}
+export default function ColorPreview({ type, value }: ColorPreviewProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/ColorPicker/ColorPreview.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import "./ColorPreview.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ColorPreview(_ref) {
+  var type = _ref.type,
+    value = _ref.value;
+  switch (type) {
+    case 'pure':
+      {
+        return /*#__PURE__*/_jsx("div", {
+          className: "arco-color-picker-preview",
+          style: {
+            backgroundColor: value
+          }
+        });
+      }
+    case 'linear':
+      {
+        return /*#__PURE__*/_jsx("div", {
+          children: "\u6E10\u53D8"
+        });
+      }
+    default:
+      console.error('未知的颜色类型' + type);
+      return null;
+  }
+}

package/dist/ColorPicker/ColorPreview.less

@@ -0,0 +1,5 @@
+.arco-color-picker-preview {
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
+}

package/dist/ColorPicker/Points.d.ts

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

package/dist/ColorPicker/Points.js

@@ -0,0 +1,79 @@
+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 React, { useRef, useCallback } from 'react';
+import classNames from 'classnames';
+import { useEventListener } from 'ahooks';
+import { getBackgroundAccordingColor, getMiddleColor } from "./utils";
+import "./Points.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);
+    onChange(dots.concat({
+      color: newColor,
+      offset: offset
+    }));
+    setActive(dots.length);
+  };
+  return /*#__PURE__*/_jsx("div", {
+    className: 'arco-color-picker-points-bar',
+    style: getBackgroundAccordingColor(dots, 90),
+    onMouseDown: handleAddColor,
+    ref: containerRef,
+    children: dots.map(function (dot, i) {
+      return /*#__PURE__*/_jsx("span", {
+        className: classNames('arco-color-picker-points-dot', {
+          'arco-color-picker-points-dot-active': active === i
+        }),
+        style: {
+          backgroundColor: dot.color,
+          left: "".concat(dot.offset, "%")
+        },
+        onMouseDown: function onMouseDown(e) {
+          return handleMouseDown(i, e);
+        }
+      }, i);
+    })
+  });
+}

package/dist/ColorPicker/Points.less

@@ -0,0 +1,51 @@
+.arco-color-picker-points-bar {
+  position: relative;
+  width: 150px;
+  height: 6px;
+  margin-right: 16px;
+  border-radius: 4px;
+
+  &::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;
+  }
+
+  .arco-color-picker-points-dot {
+    position: absolute;
+    top: -2px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    transform: translateX(-50%);
+    border: 2px solid #ffffff;
+    cursor: pointer;
+
+    &.arco-color-picker-points-dot-active {
+      width: 12px;
+      height: 12px;
+      box-shadow: 0 0 0 3px rgba(36, 145, 247, 0.6);
+    }
+  }
+}

package/dist/ColorPicker/index.d.ts

@@ -0,0 +1,4 @@
+import 'rc-color-picker/assets/index.css';
+import { ColorPickerProps } from './interface';
+import './index.less';
+export default function ColorPicker({ value, onChange, }: ColorPickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/ColorPicker/index.js

@@ -0,0 +1,57 @@
+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';
+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 = {
+    stops: [{
+      offset: 0,
+      color: '#fff'
+    }, {
+      offset: 100,
+      color: '#000'
+    }],
+    angle: 0,
+    opacity: 100
+  };
+  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
+    })]
+  });
+}

package/dist/ColorPicker/index.less

@@ -0,0 +1,160 @@
+.arco-color-picker {
+  border: 1px solid var(--color-border-3);
+  background-color: var(--color-bg-white);
+  width: 238px;
+
+  .rc-color-picker-panel-board {
+    margin: 11px 11px 0;
+  }
+
+  .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;
+    }
+  }
+
+  .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%
+    );
+  }
+
+  .rc-color-picker-panel-ribbon {
+    background-image: none;
+  }
+
+  // alpha 滑块
+  .rc-color-picker-panel-wrap-alpha {
+    bottom: 3px;
+    left: 11px;
+    right: 50px;
+    height: 6px;
+    padding: 0 6px;
+    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;
+  }
+
+  .rc-color-picker-panel-alpha-bg {
+    width: 177px;
+    border-radius: 3px;
+    margin-left: -6px;
+  }
+
+  .rc-color-picker-panel-params-input {
+    padding: 2px 11px;
+
+    input {
+      outline: none;
+      height: 24px;
+      border-color: var(--color-border-3);
+      background-color: var(--color-bg-white);
+      color: #bfbfbf;
+
+      &[type='number'] {
+        margin-left: 4px;
+      }
+    }
+  }
+
+  .rc-color-picker-panel-wrap-preview {
+    right: 11px;
+    border-radius: 50%;
+    overflow: hidden;
+
+    input {
+      display: none;
+    }
+  }
+
+  .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;
+  }
+
+  // 颜色板的圈
+  .rc-color-picker-panel-board span {
+    width: 12px;
+    height: 12px;
+    border-radius: 6px;
+    border-width: 2px;
+    margin: -6px 0 0 -6px;
+  }
+
+  .rc-color-picker-panel-params-hex {
+    width: 70px;
+  }
+
+  .rc-color-picker-panel-params-lable-hex {
+    width: 70px;
+  }
+
+  .rc-color-picker-panel-inner {
+    box-shadow: none;
+    border: none;
+    border-radius: 0;
+    overflow: hidden;
+  }
+}

package/dist/ColorPicker/interface.d.ts

@@ -0,0 +1,4 @@
+export interface ColorPickerProps {
+    value?: string;
+    onChange?: (value: string) => void;
+}

package/dist/ColorPicker/interface.js

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

package/dist/ColorPicker/utils.d.ts

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

package/dist/ColorPicker/utils.js

@@ -0,0 +1,156 @@
+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 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, ")");
+}
+export function getBackgroundAccordingColor(color, fixedAngle) {
+  if (typeof color === 'string') {
+    return {
+      background: color
+    };
+  } else if (Array.isArray(color)) {
+    var rebaseStops = color.concat();
+    rebaseStops.sort(function (a, b) {
+      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;
+      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 stepOpacity = (nextA - a) / 5;
+        var stepOffset = (rebaseStops[index + 1].offset - item.offset) / 5;
+        var stepR = (nextR - r) / 5;
+        var stepG = (nextG - g) / 5;
+        var stepB = (nextB - b) / 5;
+        return Array.from({
+          length: 5
+        }).map(function (d, i) {
+          return "".concat(transformColor("rgb(".concat(Math.round(r + stepR * i), ",").concat(Math.round(g + stepG * i), ",").concat(Math.round(b + stepB * i), ")"), a + stepOpacity * i), " ").concat(item.offset + stepOffset * i, "%");
+        }).join(',');
+      }
+    });
+    return {
+      backgroundImage: "linear-gradient(".concat(fixedAngle || 0, "deg, ").concat(colors.join(','), ")")
+    };
+  } else if (_typeof(color) === 'object') {
+    var _color$type = color.type,
+      type = _color$type === void 0 ? 'pure' : _color$type,
+      _color$linear = color.linear,
+      _color$linear2 = _color$linear === void 0 ? {
+        stops: [{
+          offset: 0,
+          color: '#000'
+        }, {
+          offset: 100,
+          color: '#fff'
+        }],
+        angle: 0,
+        opacity: 1
+      } : _color$linear,
+      stops = _color$linear2.stops,
+      angle = _color$linear2.angle,
+      opacity = _color$linear2.opacity,
+      _color$pure = color.pure,
+      pureColor = _color$pure === void 0 ? '#000' : _color$pure;
+    if (type === 'linear') {
+      var _rebaseStops = stops.concat();
+      _rebaseStops.sort(function (a, b) {
+        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;
+        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 stepOpacity = (nextA - a) / 5;
+          var stepOffset = (_rebaseStops[index + 1].offset - item.offset) / 5;
+          var stepR = (nextR - r) / 5;
+          var stepG = (nextG - g) / 5;
+          var stepB = (nextB - b) / 5;
+          return Array.from({
+            length: 5
+          }).map(function (d, i) {
+            return "".concat(transformColor("rgb(".concat(Math.round(r + stepR * i), ",").concat(Math.round(g + stepG * i), ",").concat(Math.round(b + stepB * i), ")"), (a + stepOpacity * i) * opacity), " ").concat(item.offset + stepOffset * i, "%");
+          }).join(',');
+        }
+      });
+      return {
+        backgroundImage: "linear-gradient(".concat(fixedAngle !== undefined ? fixedAngle : angle, "deg, ").concat(_colors.join(','), ")")
+      };
+    } else {
+      return {
+        background: pureColor
+      };
+    }
+  }
+}
+export function getMiddleColor(colors, offset) {
+  var leftColor;
+  var rightColor;
+  var leftColors = colors.filter(function (d) {
+    return d.offset < offset;
+  });
+  var rightColors = colors.filter(function (d) {
+    return d.offset > offset;
+  });
+  if (leftColors.length) {
+    leftColors.sort(function (a, b) {
+      return b.offset - a.offset;
+    });
+    leftColor = leftColors[0];
+  }
+  if (rightColors.length) {
+    rightColors.sort(function (a, b) {
+      return a.offset - b.offset;
+    });
+    rightColor = rightColors[0];
+  }
+  if (!leftColor) {
+    return rightColor.color;
+  }
+  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;
+  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);
+  var newA = (rightA - leftA) / (rightColor.offset - leftColor.offset) * (offset - leftColor.offset) + leftA;
+  return newA === 1 ? "#".concat(toHex(newR)).concat(toHex(newG)).concat(toHex(newB)) : "RGBA(".concat(newR, ",").concat(newG, ",").concat(newB, ",").concat(newA, ")");
+}

package/dist/Input/index.js

@@ -23,7 +23,10 @@ var XInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ref: ref,
     className: classNames(className, {
       'arco-input-borderless': !bordered
-    })
+    }),
+    onPressEnter: function onPressEnter(e) {
+      e.target.blur();
+    }
   }, restProps));
 });
 var InputSearch = /*#__PURE__*/forwardRef(function (_ref2, ref) {

package/dist/Select/index.less

@@ -1,10 +1,4 @@
 div.arco-select {
-  &:not(.arco-select-disabled) {
-    .arco-select-view {
-      background-color: transparent;
-    }
-  }
-
   .arco-select-view {
     border-color: var(--color-border-2);
 

package/dist/index.d.ts

@@ -131,3 +131,4 @@ export { default as Space } from './Space';
 export type { SpaceProps } from './Space/interface';
 export { default as Tag } from './Tag';
 export type { TagProps } from './Tag/interface';
+export { default as ColorPicker } from './ColorPicker';

package/dist/index.js

@@ -64,4 +64,5 @@ export { default as Modal } from "./Modal";
 export { default as Radio } from "./Radio";
 export { default as Select } from "./Select";
 export { default as Space } from "./Space";
-export { default as Tag } from "./Tag";
+export { default as Tag } from "./Tag";
+export { default as ColorPicker } from "./ColorPicker";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/react-components",
-  "version": "0.0.2",
+  "version": "0.0.5",
   "description": "a react component library base on arco design",
   "license": "MIT",
   "module": "dist/index.js",
@@ -48,11 +48,13 @@
   },
   "dependencies": {
     "@easyv/react-icons": "4.0.0",
-    "classnames": "^2.3.2"
+    "ahooks": "^3.7.8",
+    "classnames": "^2.3.2",
+    "rc-color-picker": "^1.2.6"
   },
   "devDependencies": {
-    "@arco-design/web-react": "2.52.0",
-    "@arco-themes/react-dtable": "0.0.29",
+    "@arco-design/web-react": "2.55.1",
+    "@arco-themes/react-dtable": "0.0.31",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
     "@easyv/sync-to-mirror": "^0.0.2",
@@ -95,6 +97,6 @@
     "registry": "https://registry.npmjs.org"
   },
   "authors": [
-    "xiaoyaoliu@dtstack.com"
+    "xiaoyao@dtstack.com"
   ]
 }