@rc-component/color-picker - npm Package Compare versions

Comparing version 2.0.1 to 3.0.0

es/color.js

@@ -1,25 +0,16 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _typeof from "@babel/runtime/helpers/esm/typeof";
-var _excluded = ["b"],
-  _excluded2 = ["v"];
 import { FastColor } from '@ant-design/fast-color';
-export var getRoundNumber = function getRoundNumber(value) {
-  return Math.round(Number(value || 0));
-};
-var convertHsb2Hsv = function convertHsb2Hsv(color) {
+export const getRoundNumber = value => Math.round(Number(value || 0));
+const convertHsb2Hsv = color => {
   if (color instanceof FastColor) {
     return color;
   }
-  if (color && _typeof(color) === 'object' && 'h' in color && 'b' in color) {
-    var _ref = color,
-      b = _ref.b,
-      resets = _objectWithoutProperties(_ref, _excluded);
-    return _objectSpread(_objectSpread({}, resets), {}, {
+  if (color && typeof color === 'object' && 'h' in color && 'b' in color) {
+    const {
+      b,
+      ...resets
+    } = color;
+    return {
+      ...resets,
       v: b
-    });
+    };
   }
@@ -31,34 +22,27 @@ if (typeof color === 'string' && /hsb/.test(color)) {
 };
-export var Color = /*#__PURE__*/function (_FastColor) {
-  _inherits(Color, _FastColor);
-  var _super = _createSuper(Color);
-  function Color(color) {
-    _classCallCheck(this, Color);
-    return _super.call(this, convertHsb2Hsv(color));
+export class Color extends FastColor {
+  constructor(color) {
+    super(convertHsb2Hsv(color));
   }
-  _createClass(Color, [{
-    key: "toHsbString",
-    value: function toHsbString() {
-      var hsb = this.toHsb();
-      var saturation = getRoundNumber(hsb.s * 100);
-      var lightness = getRoundNumber(hsb.b * 100);
-      var hue = getRoundNumber(hsb.h);
-      var alpha = hsb.a;
-      var hsbString = "hsb(".concat(hue, ", ").concat(saturation, "%, ").concat(lightness, "%)");
-      var hsbaString = "hsba(".concat(hue, ", ").concat(saturation, "%, ").concat(lightness, "%, ").concat(alpha.toFixed(alpha === 0 ? 0 : 2), ")");
-      return alpha === 1 ? hsbString : hsbaString;
-    }
-  }, {
-    key: "toHsb",
-    value: function toHsb() {
-      var _this$toHsv = this.toHsv(),
-        v = _this$toHsv.v,
-        resets = _objectWithoutProperties(_this$toHsv, _excluded2);
-      return _objectSpread(_objectSpread({}, resets), {}, {
-        b: v,
-        a: this.a
-      });
-    }
-  }]);
-  return Color;
-}(FastColor);
+  toHsbString() {
+    const hsb = this.toHsb();
+    const saturation = getRoundNumber(hsb.s * 100);
+    const lightness = getRoundNumber(hsb.b * 100);
+    const hue = getRoundNumber(hsb.h);
+    const alpha = hsb.a;
+    const hsbString = `hsb(${hue}, ${saturation}%, ${lightness}%)`;
+    const hsbaString = `hsba(${hue}, ${saturation}%, ${lightness}%, ${alpha.toFixed(alpha === 0 ? 0 : 2)})`;
+    return alpha === 1 ? hsbString : hsbaString;
+  }
+  toHsb() {
+    const {
+      v,
+      ...resets
+    } = this.toHsv();
+    return {
+      ...resets,
+      b: v,
+      a: this.a
+    };
+  }
+}

es/ColorPicker.js

@@ -1,4 +0,2 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React, { forwardRef, useMemo } from 'react';
@@ -12,3 +10,3 @@ import { ColorPickerPrefixCls, defaultColor } from "./util";
 import useComponent from "./hooks/useComponent";
-var HUE_COLORS = [{
+const HUE_COLORS = [{
   color: 'rgb(255, 0, 0)',
@@ -35,50 +33,38 @@ percent: 0
 }];
-var ColorPicker = /*#__PURE__*/forwardRef(function (props, ref) {
-  var value = props.value,
-    defaultValue = props.defaultValue,
-    _props$prefixCls = props.prefixCls,
-    prefixCls = _props$prefixCls === void 0 ? ColorPickerPrefixCls : _props$prefixCls,
-    onChange = props.onChange,
-    onChangeComplete = props.onChangeComplete,
-    className = props.className,
-    style = props.style,
-    panelRender = props.panelRender,
-    _props$disabledAlpha = props.disabledAlpha,
-    disabledAlpha = _props$disabledAlpha === void 0 ? false : _props$disabledAlpha,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled,
-    components = props.components;
+const ColorPicker = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    value,
+    defaultValue,
+    prefixCls = ColorPickerPrefixCls,
+    onChange,
+    onChangeComplete,
+    className,
+    style,
+    panelRender,
+    disabledAlpha = false,
+    disabled = false,
+    components
+  } = props;
 
   // ========================== Components ==========================
-  var _useComponent = useComponent(components),
-    _useComponent2 = _slicedToArray(_useComponent, 1),
-    Slider = _useComponent2[0];
+  const [Slider] = useComponent(components);
 
   // ============================ Color =============================
-  var _useColorState = useColorState(defaultValue || defaultColor, value),
-    _useColorState2 = _slicedToArray(_useColorState, 2),
-    colorValue = _useColorState2[0],
-    setColorValue = _useColorState2[1];
-  var alphaColor = useMemo(function () {
-    return colorValue.setA(1).toRgbString();
-  }, [colorValue]);
+  const [colorValue, setColorValue] = useColorState(defaultValue || defaultColor, value);
+  const alphaColor = useMemo(() => colorValue.setA(1).toRgbString(), [colorValue]);
 
   // ============================ Events ============================
-  var handleChange = function handleChange(data, type) {
+  const handleChange = (data, type) => {
     if (!value) {
       setColorValue(data);
     }
-    onChange === null || onChange === void 0 || onChange(data, type);
+    onChange?.(data, type);
   };
 
   // Convert
-  var getHueColor = function getHueColor(hue) {
-    return new Color(colorValue.setHue(hue));
-  };
-  var getAlphaColor = function getAlphaColor(alpha) {
-    return new Color(colorValue.setA(alpha / 100));
-  };
+  const getHueColor = hue => new Color(colorValue.setHue(hue));
+  const getAlphaColor = alpha => new Color(colorValue.setA(alpha / 100));
 
   // Slider change
-  var onHueChange = function onHueChange(hue) {
+  const onHueChange = hue => {
     handleChange(getHueColor(hue), {
@@ -89,3 +75,3 @@ type: 'hue',
   };
-  var onAlphaChange = function onAlphaChange(alpha) {
+  const onAlphaChange = alpha => {
     handleChange(getAlphaColor(alpha), {
@@ -98,3 +84,3 @@ type: 'alpha',
   // Complete
-  var onHueChangeComplete = function onHueChangeComplete(hue) {
+  const onHueChangeComplete = hue => {
     if (onChangeComplete) {
@@ -104,3 +90,3 @@ onChangeComplete(getHueColor(hue));
   };
-  var onAlphaChangeComplete = function onAlphaChangeComplete(alpha) {
+  const onAlphaChangeComplete = alpha => {
     if (onChangeComplete) {
@@ -112,9 +98,11 @@ onChangeComplete(getAlphaColor(alpha));
   // ============================ Render ============================
-  var mergeCls = classNames("".concat(prefixCls, "-panel"), className, _defineProperty({}, "".concat(prefixCls, "-panel-disabled"), disabled));
-  var sharedSliderProps = {
-    prefixCls: prefixCls,
-    disabled: disabled,
+  const mergeCls = classNames(`${prefixCls}-panel`, className, {
+    [`${prefixCls}-panel-disabled`]: disabled
+  });
+  const sharedSliderProps = {
+    prefixCls,
+    disabled,
     color: colorValue
   };
-  var defaultPanel = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Picker, _extends({
+  const defaultPanel = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Picker, _extends({
     onChange: handleChange
@@ -124,5 +112,7 @@ }, sharedSliderProps, {
   })), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-slider-container")
+    className: `${prefixCls}-slider-container`
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(prefixCls, "-slider-group"), _defineProperty({}, "".concat(prefixCls, "-slider-group-disabled-alpha"), disabledAlpha))
+    className: classNames(`${prefixCls}-slider-group`, {
+      [`${prefixCls}-slider-group-disabled-alpha`]: disabledAlpha
+    })
   }, /*#__PURE__*/React.createElement(Slider, _extends({}, sharedSliderProps, {
@@ -129,0 +119,0 @@ type: "hue",

es/components/ColorBlock.js

 import classNames from 'classnames';
 import React from 'react';
-var ColorBlock = function ColorBlock(_ref) {
-  var color = _ref.color,
-    prefixCls = _ref.prefixCls,
-    className = _ref.className,
-    style = _ref.style,
-    onClick = _ref.onClick;
-  var colorBlockCls = "".concat(prefixCls, "-color-block");
+const ColorBlock = ({
+  color,
+  prefixCls,
+  className,
+  style,
+  onClick
+}) => {
+  const colorBlockCls = `${prefixCls}-color-block`;
   return /*#__PURE__*/React.createElement("div", {
@@ -15,3 +16,3 @@ className: classNames(colorBlockCls, className),
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(colorBlockCls, "-inner"),
+    className: `${colorBlockCls}-inner`,
     style: {
@@ -18,0 +19,0 @@ background: color

es/components/Gradient.js

 import React, { useMemo } from 'react';
 import { Color } from "../color";
 import { generateColor } from "../util";
-var Gradient = function Gradient(_ref) {
-  var colors = _ref.colors,
-    children = _ref.children,
-    _ref$direction = _ref.direction,
-    direction = _ref$direction === void 0 ? 'to right' : _ref$direction,
-    type = _ref.type,
-    prefixCls = _ref.prefixCls;
-  var gradientColors = useMemo(function () {
-    return colors.map(function (color, idx) {
-      var result = generateColor(color);
-      if (type === 'alpha' && idx === colors.length - 1) {
-        result = new Color(result.setA(1));
-      }
-      return result.toRgbString();
-    }).join(',');
-  }, [colors, type]);
+const Gradient = ({
+  colors,
+  children,
+  direction = 'to right',
+  type,
+  prefixCls
+}) => {
+  const gradientColors = useMemo(() => colors.map((color, idx) => {
+    let result = generateColor(color);
+    if (type === 'alpha' && idx === colors.length - 1) {
+      result = new Color(result.setA(1));
+    }
+    return result.toRgbString();
+  }).join(','), [colors, type]);
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-gradient"),
+    className: `${prefixCls}-gradient`,
     style: {
       position: 'absolute',
       inset: 0,
-      background: "linear-gradient(".concat(direction, ", ").concat(gradientColors, ")")
+      background: `linear-gradient(${direction}, ${gradientColors})`
     }
@@ -27,0 +25,0 @@ }, children);

es/components/Handler.js

@@ -1,11 +0,12 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import classNames from 'classnames';
 import React from 'react';
-var Handler = function Handler(_ref) {
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'default' : _ref$size,
-    color = _ref.color,
-    prefixCls = _ref.prefixCls;
+const Handler = ({
+  size = 'default',
+  color,
+  prefixCls
+}) => {
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(prefixCls, "-handler"), _defineProperty({}, "".concat(prefixCls, "-handler-sm"), size === 'small')),
+    className: classNames(`${prefixCls}-handler`, {
+      [`${prefixCls}-handler-sm`]: size === 'small'
+    }),
     style: {
@@ -12,0 +13,0 @@ backgroundColor: color

es/components/Palette.js

@@ -1,14 +0,15 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React from 'react';
-var Palette = function Palette(_ref) {
-  var children = _ref.children,
-    style = _ref.style,
-    prefixCls = _ref.prefixCls;
+const Palette = ({
+  children,
+  style,
+  prefixCls
+}) => {
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-palette"),
-    style: _objectSpread({
-      position: 'relative'
-    }, style)
+    className: `${prefixCls}-palette`,
+    style: {
+      position: 'relative',
+      ...style
+    }
   }, children);
 };
 export default Palette;

es/components/Picker.js

@@ -1,2 +0,1 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useRef } from 'react';
@@ -9,17 +8,18 @@ import useColorDrag from "../hooks/useColorDrag";
 import Transform from "./Transform";
-var Picker = function Picker(_ref) {
-  var color = _ref.color,
-    onChange = _ref.onChange,
-    prefixCls = _ref.prefixCls,
-    onChangeComplete = _ref.onChangeComplete,
-    disabled = _ref.disabled;
-  var pickerRef = useRef();
-  var transformRef = useRef();
-  var colorRef = useRef(color);
-  var onDragChange = useEvent(function (offsetValue) {
-    var calcColor = calculateColor({
+const Picker = ({
+  color,
+  onChange,
+  prefixCls,
+  onChangeComplete,
+  disabled
+}) => {
+  const pickerRef = useRef();
+  const transformRef = useRef();
+  const colorRef = useRef(color);
+  const onDragChange = useEvent(offsetValue => {
+    const calcColor = calculateColor({
       offset: offsetValue,
       targetRef: transformRef,
       containerRef: pickerRef,
-      color: color
+      color
     });
@@ -29,21 +29,14 @@ colorRef.current = calcColor;
   });
-  var _useColorDrag = useColorDrag({
-      color: color,
-      containerRef: pickerRef,
-      targetRef: transformRef,
-      calculate: function calculate() {
-        return calcOffset(color);
-      },
-      onDragChange: onDragChange,
-      onDragChangeComplete: function onDragChangeComplete() {
-        return onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(colorRef.current);
-      },
-      disabledDrag: disabled
-    }),
-    _useColorDrag2 = _slicedToArray(_useColorDrag, 2),
-    offset = _useColorDrag2[0],
-    dragStartHandle = _useColorDrag2[1];
+  const [offset, dragStartHandle] = useColorDrag({
+    color,
+    containerRef: pickerRef,
+    targetRef: transformRef,
+    calculate: () => calcOffset(color),
+    onDragChange,
+    onDragChangeComplete: () => onChangeComplete?.(colorRef.current),
+    disabledDrag: disabled
+  });
   return /*#__PURE__*/React.createElement("div", {
     ref: pickerRef,
-    className: "".concat(prefixCls, "-select"),
+    className: `${prefixCls}-select`,
     onMouseDown: dragStartHandle,
@@ -61,5 +54,5 @@ onTouchStart: dragStartHandle
   })), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-saturation"),
+    className: `${prefixCls}-saturation`,
     style: {
-      backgroundColor: "hsl(".concat(color.toHsb().h, ",100%, 50%)"),
+      backgroundColor: `hsl(${color.toHsb().h},100%, 50%)`,
       backgroundImage: 'linear-gradient(0deg, #000, transparent),linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0))'
@@ -66,0 +59,0 @@ }

es/components/Slider.js

@@ -1,2 +0,1 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useRef } from 'react';
@@ -12,23 +11,25 @@ import useColorDrag from "../hooks/useColorDrag";
 import Transform from "./Transform";
-var Slider = function Slider(props) {
-  var prefixCls = props.prefixCls,
-    colors = props.colors,
-    disabled = props.disabled,
-    onChange = props.onChange,
-    onChangeComplete = props.onChangeComplete,
-    color = props.color,
-    type = props.type;
-  var sliderRef = useRef();
-  var transformRef = useRef();
-  var colorRef = useRef(color);
-  var getValue = function getValue(c) {
+const Slider = props => {
+  const {
+    prefixCls,
+    colors,
+    disabled,
+    onChange,
+    onChangeComplete,
+    color,
+    type
+  } = props;
+  const sliderRef = useRef();
+  const transformRef = useRef();
+  const colorRef = useRef(color);
+  const getValue = c => {
     return type === 'hue' ? c.getHue() : c.a * 100;
   };
-  var onDragChange = useEvent(function (offsetValue) {
-    var calcColor = calculateColor({
+  const onDragChange = useEvent(offsetValue => {
+    const calcColor = calculateColor({
       offset: offsetValue,
       targetRef: transformRef,
       containerRef: sliderRef,
-      color: color,
-      type: type
+      color,
+      type
     });
@@ -38,26 +39,21 @@ colorRef.current = calcColor;
   });
-  var _useColorDrag = useColorDrag({
-      color: color,
-      targetRef: transformRef,
-      containerRef: sliderRef,
-      calculate: function calculate() {
-        return calcOffset(color, type);
-      },
-      onDragChange: onDragChange,
-      onDragChangeComplete: function onDragChangeComplete() {
-        onChangeComplete(getValue(colorRef.current));
-      },
-      direction: 'x',
-      disabledDrag: disabled
-    }),
-    _useColorDrag2 = _slicedToArray(_useColorDrag, 2),
-    offset = _useColorDrag2[0],
-    dragStartHandle = _useColorDrag2[1];
-  var handleColor = React.useMemo(function () {
+  const [offset, dragStartHandle] = useColorDrag({
+    color,
+    targetRef: transformRef,
+    containerRef: sliderRef,
+    calculate: () => calcOffset(color, type),
+    onDragChange,
+    onDragChangeComplete() {
+      onChangeComplete(getValue(colorRef.current));
+    },
+    direction: 'x',
+    disabledDrag: disabled
+  });
+  const handleColor = React.useMemo(() => {
     if (type === 'hue') {
-      var hsb = color.toHsb();
+      const hsb = color.toHsb();
       hsb.s = 1;
       hsb.b = 1;
       hsb.a = 1;
-      var lightColor = new Color(hsb);
+      const lightColor = new Color(hsb);
       return lightColor;
@@ -69,7 +65,3 @@ }
   // ========================= Gradient =========================
-  var gradientList = React.useMemo(function () {
-    return colors.map(function (info) {
-      return "".concat(info.color, " ").concat(info.percent, "%");
-    });
-  }, [colors]);
+  const gradientList = React.useMemo(() => colors.map(info => `${info.color} ${info.percent}%`), [colors]);
 
@@ -79,3 +71,3 @@ // ========================== Render ==========================
     ref: sliderRef,
-    className: classNames("".concat(prefixCls, "-slider"), "".concat(prefixCls, "-slider-").concat(type)),
+    className: classNames(`${prefixCls}-slider`, `${prefixCls}-slider-${type}`),
     onMouseDown: dragStartHandle,
@@ -82,0 +74,0 @@ onTouchStart: dragStartHandle

es/components/Transform.js

 import React, { forwardRef } from 'react';
-var Transform = /*#__PURE__*/forwardRef(function (props, ref) {
-  var children = props.children,
-    x = props.x,
-    y = props.y;
+const Transform = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    x,
+    y
+  } = props;
   return /*#__PURE__*/React.createElement("div", {
@@ -10,4 +12,4 @@ ref: ref,
       position: 'absolute',
-      left: "".concat(x, "%"),
-      top: "".concat(y, "%"),
+      left: `${x}%`,
+      top: `${y}%`,
       zIndex: 1,
@@ -14,0 +16,0 @@ transform: 'translate(-50%, -50%)'

es/hooks/useColorDrag.js

@@ -1,7 +0,6 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { useEffect, useRef, useState } from 'react';
 function getPosition(e) {
-  var obj = 'touches' in e ? e.touches[0] : e;
-  var scrollXOffset = document.documentElement.scrollLeft || document.body.scrollLeft || window.pageXOffset;
-  var scrollYOffset = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
+  const obj = 'touches' in e ? e.touches[0] : e;
+  const scrollXOffset = document.documentElement.scrollLeft || document.body.scrollLeft || window.pageXOffset;
+  const scrollYOffset = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
   return {
@@ -13,51 +12,51 @@ pageX: obj.pageX - scrollXOffset,
 function useColorDrag(props) {
-  var targetRef = props.targetRef,
-    containerRef = props.containerRef,
-    direction = props.direction,
-    onDragChange = props.onDragChange,
-    onDragChangeComplete = props.onDragChangeComplete,
-    calculate = props.calculate,
-    color = props.color,
-    disabledDrag = props.disabledDrag;
-  var _useState = useState({
-      x: 0,
-      y: 0
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    offsetValue = _useState2[0],
-    setOffsetValue = _useState2[1];
-  var mouseMoveRef = useRef(null);
-  var mouseUpRef = useRef(null);
+  const {
+    targetRef,
+    containerRef,
+    direction,
+    onDragChange,
+    onDragChangeComplete,
+    calculate,
+    color,
+    disabledDrag
+  } = props;
+  const [offsetValue, setOffsetValue] = useState({
+    x: 0,
+    y: 0
+  });
+  const mouseMoveRef = useRef(null);
+  const mouseUpRef = useRef(null);
 
   // Always get position from `color`
-  useEffect(function () {
+  useEffect(() => {
     setOffsetValue(calculate());
   }, [color]);
-  useEffect(function () {
-    return function () {
-      document.removeEventListener('mousemove', mouseMoveRef.current);
-      document.removeEventListener('mouseup', mouseUpRef.current);
-      document.removeEventListener('touchmove', mouseMoveRef.current);
-      document.removeEventListener('touchend', mouseUpRef.current);
-      mouseMoveRef.current = null;
-      mouseUpRef.current = null;
-    };
+  useEffect(() => () => {
+    document.removeEventListener('mousemove', mouseMoveRef.current);
+    document.removeEventListener('mouseup', mouseUpRef.current);
+    document.removeEventListener('touchmove', mouseMoveRef.current);
+    document.removeEventListener('touchend', mouseUpRef.current);
+    mouseMoveRef.current = null;
+    mouseUpRef.current = null;
   }, []);
-  var updateOffset = function updateOffset(e) {
-    var _getPosition = getPosition(e),
-      pageX = _getPosition.pageX,
-      pageY = _getPosition.pageY;
-    var _containerRef$current = containerRef.current.getBoundingClientRect(),
-      rectX = _containerRef$current.x,
-      rectY = _containerRef$current.y,
-      width = _containerRef$current.width,
-      height = _containerRef$current.height;
-    var _targetRef$current$ge = targetRef.current.getBoundingClientRect(),
-      targetWidth = _targetRef$current$ge.width,
-      targetHeight = _targetRef$current$ge.height;
-    var centerOffsetX = targetWidth / 2;
-    var centerOffsetY = targetHeight / 2;
-    var offsetX = Math.max(0, Math.min(pageX - rectX, width)) - centerOffsetX;
-    var offsetY = Math.max(0, Math.min(pageY - rectY, height)) - centerOffsetY;
-    var calcOffset = {
+  const updateOffset = e => {
+    const {
+      pageX,
+      pageY
+    } = getPosition(e);
+    const {
+      x: rectX,
+      y: rectY,
+      width,
+      height
+    } = containerRef.current.getBoundingClientRect();
+    const {
+      width: targetWidth,
+      height: targetHeight
+    } = targetRef.current.getBoundingClientRect();
+    const centerOffsetX = targetWidth / 2;
+    const centerOffsetY = targetHeight / 2;
+    const offsetX = Math.max(0, Math.min(pageX - rectX, width)) - centerOffsetX;
+    const offsetY = Math.max(0, Math.min(pageY - rectY, height)) - centerOffsetY;
+    const calcOffset = {
       x: offsetX,
@@ -71,9 +70,9 @@ y: direction === 'x' ? offsetValue.y : offsetY
     }
-    onDragChange === null || onDragChange === void 0 || onDragChange(calcOffset);
+    onDragChange?.(calcOffset);
   };
-  var onDragMove = function onDragMove(e) {
+  const onDragMove = e => {
     e.preventDefault();
     updateOffset(e);
   };
-  var onDragStop = function onDragStop(e) {
+  const onDragStop = e => {
     e.preventDefault();
@@ -86,5 +85,5 @@ document.removeEventListener('mousemove', mouseMoveRef.current);
     mouseUpRef.current = null;
-    onDragChangeComplete === null || onDragChangeComplete === void 0 || onDragChangeComplete();
+    onDragChangeComplete?.();
   };
-  var onDragStart = function onDragStart(e) {
+  const onDragStart = e => {
     // https://github.com/ant-design/ant-design/issues/43529
@@ -91,0 +90,0 @@ document.removeEventListener('mousemove', mouseMoveRef.current);

es/hooks/useColorState.js

@@ -1,17 +0,11 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { useMergedState } from 'rc-util';
 import { useMemo } from 'react';
 import { generateColor } from "../util";
-var useColorState = function useColorState(defaultValue, value) {
-  var _useMergedState = useMergedState(defaultValue, {
-      value: value
-    }),
-    _useMergedState2 = _slicedToArray(_useMergedState, 2),
-    mergedValue = _useMergedState2[0],
-    setValue = _useMergedState2[1];
-  var color = useMemo(function () {
-    return generateColor(mergedValue);
-  }, [mergedValue]);
+const useColorState = (defaultValue, value) => {
+  const [mergedValue, setValue] = useMergedState(defaultValue, {
+    value
+  });
+  const color = useMemo(() => generateColor(mergedValue), [mergedValue]);
   return [color, setValue];
 };
 export default useColorState;

es/hooks/useComponent.js

 import * as React from 'react';
 import Slider from "../components/Slider";
 export default function useComponent(components) {
-  return React.useMemo(function () {
-    var _ref = components || {},
-      slider = _ref.slider;
+  return React.useMemo(() => {
+    const {
+      slider
+    } = components || {};
     return [slider || Slider];
   }, [components]);
 }

es/util.js

@@ -1,5 +0,4 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { Color } from "./color";
-export var ColorPickerPrefixCls = 'rc-color-picker';
-export var generateColor = function generateColor(color) {
+export const ColorPickerPrefixCls = 'rc-color-picker';
+export const generateColor = color => {
   if (color instanceof Color) {
@@ -10,32 +9,38 @@ return color;
 };
-export var defaultColor = generateColor('#1677ff');
-export var calculateColor = function calculateColor(props) {
-  var offset = props.offset,
-    targetRef = props.targetRef,
-    containerRef = props.containerRef,
-    color = props.color,
-    type = props.type;
-  var _containerRef$current = containerRef.current.getBoundingClientRect(),
-    width = _containerRef$current.width,
-    height = _containerRef$current.height;
-  var _targetRef$current$ge = targetRef.current.getBoundingClientRect(),
-    targetWidth = _targetRef$current$ge.width,
-    targetHeight = _targetRef$current$ge.height;
-  var centerOffsetX = targetWidth / 2;
-  var centerOffsetY = targetHeight / 2;
-  var saturation = (offset.x + centerOffsetX) / width;
-  var bright = 1 - (offset.y + centerOffsetY) / height;
-  var hsb = color.toHsb();
-  var alphaOffset = saturation;
-  var hueOffset = (offset.x + centerOffsetX) / width * 360;
+export const defaultColor = generateColor('#1677ff');
+export const calculateColor = props => {
+  const {
+    offset,
+    targetRef,
+    containerRef,
+    color,
+    type
+  } = props;
+  const {
+    width,
+    height
+  } = containerRef.current.getBoundingClientRect();
+  const {
+    width: targetWidth,
+    height: targetHeight
+  } = targetRef.current.getBoundingClientRect();
+  const centerOffsetX = targetWidth / 2;
+  const centerOffsetY = targetHeight / 2;
+  const saturation = (offset.x + centerOffsetX) / width;
+  const bright = 1 - (offset.y + centerOffsetY) / height;
+  const hsb = color.toHsb();
+  const alphaOffset = saturation;
+  const hueOffset = (offset.x + centerOffsetX) / width * 360;
   if (type) {
     switch (type) {
       case 'hue':
-        return generateColor(_objectSpread(_objectSpread({}, hsb), {}, {
+        return generateColor({
+          ...hsb,
           h: hueOffset <= 0 ? 0 : hueOffset
-        }));
+        });
       case 'alpha':
-        return generateColor(_objectSpread(_objectSpread({}, hsb), {}, {
+        return generateColor({
+          ...hsb,
           a: alphaOffset <= 0 ? 0 : alphaOffset
-        }));
+        });
     }
@@ -50,4 +55,4 @@ }
 };
-export var calcOffset = function calcOffset(color, type) {
-  var hsb = color.toHsb();
+export const calcOffset = (color, type) => {
+  const hsb = color.toHsb();
   switch (type) {
@@ -54,0 +59,0 @@ case 'hue':

lib/color.js

 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
@@ -8,26 +7,18 @@ value: true
 exports.getRoundNumber = exports.Color = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _fastColor = require("@ant-design/fast-color");
-var _excluded = ["b"],
-  _excluded2 = ["v"];
-var getRoundNumber = exports.getRoundNumber = function getRoundNumber(value) {
-  return Math.round(Number(value || 0));
-};
-var convertHsb2Hsv = function convertHsb2Hsv(color) {
+const getRoundNumber = value => Math.round(Number(value || 0));
+exports.getRoundNumber = getRoundNumber;
+const convertHsb2Hsv = color => {
   if (color instanceof _fastColor.FastColor) {
     return color;
   }
-  if (color && (0, _typeof2.default)(color) === 'object' && 'h' in color && 'b' in color) {
-    var _ref = color,
-      b = _ref.b,
-      resets = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, resets), {}, {
+  if (color && typeof color === 'object' && 'h' in color && 'b' in color) {
+    const {
+      b,
+      ...resets
+    } = color;
+    return {
+      ...resets,
       v: b
-    });
+    };
   }
@@ -39,34 +30,28 @@ if (typeof color === 'string' && /hsb/.test(color)) {
 };
-var Color = exports.Color = /*#__PURE__*/function (_FastColor) {
-  (0, _inherits2.default)(Color, _FastColor);
-  var _super = (0, _createSuper2.default)(Color);
-  function Color(color) {
-    (0, _classCallCheck2.default)(this, Color);
-    return _super.call(this, convertHsb2Hsv(color));
+class Color extends _fastColor.FastColor {
+  constructor(color) {
+    super(convertHsb2Hsv(color));
   }
-  (0, _createClass2.default)(Color, [{
-    key: "toHsbString",
-    value: function toHsbString() {
-      var hsb = this.toHsb();
-      var saturation = getRoundNumber(hsb.s * 100);
-      var lightness = getRoundNumber(hsb.b * 100);
-      var hue = getRoundNumber(hsb.h);
-      var alpha = hsb.a;
-      var hsbString = "hsb(".concat(hue, ", ").concat(saturation, "%, ").concat(lightness, "%)");
-      var hsbaString = "hsba(".concat(hue, ", ").concat(saturation, "%, ").concat(lightness, "%, ").concat(alpha.toFixed(alpha === 0 ? 0 : 2), ")");
-      return alpha === 1 ? hsbString : hsbaString;
-    }
-  }, {
-    key: "toHsb",
-    value: function toHsb() {
-      var _this$toHsv = this.toHsv(),
-        v = _this$toHsv.v,
-        resets = (0, _objectWithoutProperties2.default)(_this$toHsv, _excluded2);
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, resets), {}, {
-        b: v,
-        a: this.a
-      });
-    }
-  }]);
-  return Color;
-}(_fastColor.FastColor);
+  toHsbString() {
+    const hsb = this.toHsb();
+    const saturation = getRoundNumber(hsb.s * 100);
+    const lightness = getRoundNumber(hsb.b * 100);
+    const hue = getRoundNumber(hsb.h);
+    const alpha = hsb.a;
+    const hsbString = `hsb(${hue}, ${saturation}%, ${lightness}%)`;
+    const hsbaString = `hsba(${hue}, ${saturation}%, ${lightness}%, ${alpha.toFixed(alpha === 0 ? 0 : 2)})`;
+    return alpha === 1 ? hsbString : hsbaString;
+  }
+  toHsb() {
+    const {
+      v,
+      ...resets
+    } = this.toHsv();
+    return {
+      ...resets,
+      b: v,
+      a: this.a
+    };
+  }
+}
+exports.Color = Color;

lib/ColorPicker.js

 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
@@ -9,5 +7,2 @@ value: true
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
@@ -19,5 +14,9 @@ var _util = require("./util");
 var _Picker = _interopRequireDefault(require("./components/Picker"));
-var _useColorState3 = _interopRequireDefault(require("./hooks/useColorState"));
-var _useComponent3 = _interopRequireDefault(require("./hooks/useComponent"));
-var HUE_COLORS = [{
+var _useColorState = _interopRequireDefault(require("./hooks/useColorState"));
+var _useComponent = _interopRequireDefault(require("./hooks/useComponent"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const HUE_COLORS = [{
   color: 'rgb(255, 0, 0)',
@@ -44,50 +43,38 @@ percent: 0
 }];
-var ColorPicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var value = props.value,
-    defaultValue = props.defaultValue,
-    _props$prefixCls = props.prefixCls,
-    prefixCls = _props$prefixCls === void 0 ? _util.ColorPickerPrefixCls : _props$prefixCls,
-    onChange = props.onChange,
-    onChangeComplete = props.onChangeComplete,
-    className = props.className,
-    style = props.style,
-    panelRender = props.panelRender,
-    _props$disabledAlpha = props.disabledAlpha,
-    disabledAlpha = _props$disabledAlpha === void 0 ? false : _props$disabledAlpha,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled,
-    components = props.components;
+const ColorPicker = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    value,
+    defaultValue,
+    prefixCls = _util.ColorPickerPrefixCls,
+    onChange,
+    onChangeComplete,
+    className,
+    style,
+    panelRender,
+    disabledAlpha = false,
+    disabled = false,
+    components
+  } = props;
 
   // ========================== Components ==========================
-  var _useComponent = (0, _useComponent3.default)(components),
-    _useComponent2 = (0, _slicedToArray2.default)(_useComponent, 1),
-    Slider = _useComponent2[0];
+  const [Slider] = (0, _useComponent.default)(components);
 
   // ============================ Color =============================
-  var _useColorState = (0, _useColorState3.default)(defaultValue || _util.defaultColor, value),
-    _useColorState2 = (0, _slicedToArray2.default)(_useColorState, 2),
-    colorValue = _useColorState2[0],
-    setColorValue = _useColorState2[1];
-  var alphaColor = (0, _react.useMemo)(function () {
-    return colorValue.setA(1).toRgbString();
-  }, [colorValue]);
+  const [colorValue, setColorValue] = (0, _useColorState.default)(defaultValue || _util.defaultColor, value);
+  const alphaColor = (0, _react.useMemo)(() => colorValue.setA(1).toRgbString(), [colorValue]);
 
   // ============================ Events ============================
-  var handleChange = function handleChange(data, type) {
+  const handleChange = (data, type) => {
     if (!value) {
       setColorValue(data);
     }
-    onChange === null || onChange === void 0 || onChange(data, type);
+    onChange?.(data, type);
   };
 
   // Convert
-  var getHueColor = function getHueColor(hue) {
-    return new _color.Color(colorValue.setHue(hue));
-  };
-  var getAlphaColor = function getAlphaColor(alpha) {
-    return new _color.Color(colorValue.setA(alpha / 100));
-  };
+  const getHueColor = hue => new _color.Color(colorValue.setHue(hue));
+  const getAlphaColor = alpha => new _color.Color(colorValue.setA(alpha / 100));
 
   // Slider change
-  var onHueChange = function onHueChange(hue) {
+  const onHueChange = hue => {
     handleChange(getHueColor(hue), {
@@ -98,3 +85,3 @@ type: 'hue',
   };
-  var onAlphaChange = function onAlphaChange(alpha) {
+  const onAlphaChange = alpha => {
     handleChange(getAlphaColor(alpha), {
@@ -107,3 +94,3 @@ type: 'alpha',
   // Complete
-  var onHueChangeComplete = function onHueChangeComplete(hue) {
+  const onHueChangeComplete = hue => {
     if (onChangeComplete) {
@@ -113,3 +100,3 @@ onChangeComplete(getHueColor(hue));
   };
-  var onAlphaChangeComplete = function onAlphaChangeComplete(alpha) {
+  const onAlphaChangeComplete = alpha => {
     if (onChangeComplete) {
@@ -121,9 +108,11 @@ onChangeComplete(getAlphaColor(alpha));
   // ============================ Render ============================
-  var mergeCls = (0, _classnames.default)("".concat(prefixCls, "-panel"), className, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-panel-disabled"), disabled));
-  var sharedSliderProps = {
-    prefixCls: prefixCls,
-    disabled: disabled,
+  const mergeCls = (0, _classnames.default)(`${prefixCls}-panel`, className, {
+    [`${prefixCls}-panel-disabled`]: disabled
+  });
+  const sharedSliderProps = {
+    prefixCls,
+    disabled,
     color: colorValue
   };
-  var defaultPanel = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Picker.default, (0, _extends2.default)({
+  const defaultPanel = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Picker.default, _extends({
     onChange: handleChange
@@ -133,6 +122,8 @@ }, sharedSliderProps, {
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(prefixCls, "-slider-container")
+    className: `${prefixCls}-slider-container`
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)("".concat(prefixCls, "-slider-group"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-slider-group-disabled-alpha"), disabledAlpha))
-  }, /*#__PURE__*/_react.default.createElement(Slider, (0, _extends2.default)({}, sharedSliderProps, {
+    className: (0, _classnames.default)(`${prefixCls}-slider-group`, {
+      [`${prefixCls}-slider-group-disabled-alpha`]: disabledAlpha
+    })
+  }, /*#__PURE__*/_react.default.createElement(Slider, _extends({}, sharedSliderProps, {
     type: "hue",
@@ -145,3 +136,3 @@ colors: HUE_COLORS,
     onChangeComplete: onHueChangeComplete
-  })), !disabledAlpha && /*#__PURE__*/_react.default.createElement(Slider, (0, _extends2.default)({}, sharedSliderProps, {
+  })), !disabledAlpha && /*#__PURE__*/_react.default.createElement(Slider, _extends({}, sharedSliderProps, {
     type: "alpha",
@@ -148,0 +139,0 @@ colors: [{

lib/components/ColorBlock.js

 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
@@ -10,9 +9,11 @@ value: true
 var _react = _interopRequireDefault(require("react"));
-var ColorBlock = function ColorBlock(_ref) {
-  var color = _ref.color,
-    prefixCls = _ref.prefixCls,
-    className = _ref.className,
-    style = _ref.style,
-    onClick = _ref.onClick;
-  var colorBlockCls = "".concat(prefixCls, "-color-block");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const ColorBlock = ({
+  color,
+  prefixCls,
+  className,
+  style,
+  onClick
+}) => {
+  const colorBlockCls = `${prefixCls}-color-block`;
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -23,3 +24,3 @@ className: (0, _classnames.default)(colorBlockCls, className),
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(colorBlockCls, "-inner"),
+    className: `${colorBlockCls}-inner`,
     style: {
@@ -26,0 +27,0 @@ background: color

lib/components/Gradient.js

 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
@@ -11,24 +10,24 @@ value: true
 var _util = require("../util");
-var Gradient = function Gradient(_ref) {
-  var colors = _ref.colors,
-    children = _ref.children,
-    _ref$direction = _ref.direction,
-    direction = _ref$direction === void 0 ? 'to right' : _ref$direction,
-    type = _ref.type,
-    prefixCls = _ref.prefixCls;
-  var gradientColors = (0, _react.useMemo)(function () {
-    return colors.map(function (color, idx) {
-      var result = (0, _util.generateColor)(color);
-      if (type === 'alpha' && idx === colors.length - 1) {
-        result = new _color.Color(result.setA(1));
-      }
-      return result.toRgbString();
-    }).join(',');
-  }, [colors, type]);
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Gradient = ({
+  colors,
+  children,
+  direction = 'to right',
+  type,
+  prefixCls
+}) => {
+  const gradientColors = (0, _react.useMemo)(() => colors.map((color, idx) => {
+    let result = (0, _util.generateColor)(color);
+    if (type === 'alpha' && idx === colors.length - 1) {
+      result = new _color.Color(result.setA(1));
+    }
+    return result.toRgbString();
+  }).join(','), [colors, type]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(prefixCls, "-gradient"),
+    className: `${prefixCls}-gradient`,
     style: {
       position: 'absolute',
       inset: 0,
-      background: "linear-gradient(".concat(direction, ", ").concat(gradientColors, ")")
+      background: `linear-gradient(${direction}, ${gradientColors})`
     }
@@ -35,0 +34,0 @@ }, children);

lib/components/Handler.js

 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
@@ -8,12 +7,14 @@ value: true
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
-var Handler = function Handler(_ref) {
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'default' : _ref$size,
-    color = _ref.color,
-    prefixCls = _ref.prefixCls;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const Handler = ({
+  size = 'default',
+  color,
+  prefixCls
+}) => {
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)("".concat(prefixCls, "-handler"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-handler-sm"), size === 'small')),
+    className: (0, _classnames.default)(`${prefixCls}-handler`, {
+      [`${prefixCls}-handler-sm`]: size === 'small'
+    }),
     style: {
@@ -20,0 +21,0 @@ backgroundColor: color

lib/components/Palette.js

 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
@@ -8,15 +7,17 @@ value: true
 exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _react = _interopRequireDefault(require("react"));
-var Palette = function Palette(_ref) {
-  var children = _ref.children,
-    style = _ref.style,
-    prefixCls = _ref.prefixCls;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const Palette = ({
+  children,
+  style,
+  prefixCls
+}) => {
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(prefixCls, "-palette"),
-    style: (0, _objectSpread2.default)({
-      position: 'relative'
-    }, style)
+    className: `${prefixCls}-palette`,
+    style: {
+      position: 'relative',
+      ...style
+    }
   }, children);
 };
 var _default = exports.default = Palette;

lib/components/Picker.js

 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
@@ -9,5 +7,4 @@ value: true
 exports.default = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _useColorDrag3 = _interopRequireDefault(require("../hooks/useColorDrag"));
+var _useColorDrag = _interopRequireDefault(require("../hooks/useColorDrag"));
 var _util = require("../util");
@@ -18,17 +15,21 @@ var _rcUtil = require("rc-util");
 var _Transform = _interopRequireDefault(require("./Transform"));
-var Picker = function Picker(_ref) {
-  var color = _ref.color,
-    onChange = _ref.onChange,
-    prefixCls = _ref.prefixCls,
-    onChangeComplete = _ref.onChangeComplete,
-    disabled = _ref.disabled;
-  var pickerRef = (0, _react.useRef)();
-  var transformRef = (0, _react.useRef)();
-  var colorRef = (0, _react.useRef)(color);
-  var onDragChange = (0, _rcUtil.useEvent)(function (offsetValue) {
-    var calcColor = (0, _util.calculateColor)({
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Picker = ({
+  color,
+  onChange,
+  prefixCls,
+  onChangeComplete,
+  disabled
+}) => {
+  const pickerRef = (0, _react.useRef)();
+  const transformRef = (0, _react.useRef)();
+  const colorRef = (0, _react.useRef)(color);
+  const onDragChange = (0, _rcUtil.useEvent)(offsetValue => {
+    const calcColor = (0, _util.calculateColor)({
       offset: offsetValue,
       targetRef: transformRef,
       containerRef: pickerRef,
-      color: color
+      color
     });
@@ -38,21 +39,14 @@ colorRef.current = calcColor;
   });
-  var _useColorDrag = (0, _useColorDrag3.default)({
-      color: color,
-      containerRef: pickerRef,
-      targetRef: transformRef,
-      calculate: function calculate() {
-        return (0, _util.calcOffset)(color);
-      },
-      onDragChange: onDragChange,
-      onDragChangeComplete: function onDragChangeComplete() {
-        return onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(colorRef.current);
-      },
-      disabledDrag: disabled
-    }),
-    _useColorDrag2 = (0, _slicedToArray2.default)(_useColorDrag, 2),
-    offset = _useColorDrag2[0],
-    dragStartHandle = _useColorDrag2[1];
+  const [offset, dragStartHandle] = (0, _useColorDrag.default)({
+    color,
+    containerRef: pickerRef,
+    targetRef: transformRef,
+    calculate: () => (0, _util.calcOffset)(color),
+    onDragChange,
+    onDragChangeComplete: () => onChangeComplete?.(colorRef.current),
+    disabledDrag: disabled
+  });
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: pickerRef,
-    className: "".concat(prefixCls, "-select"),
+    className: `${prefixCls}-select`,
     onMouseDown: dragStartHandle,
@@ -70,5 +64,5 @@ onTouchStart: dragStartHandle
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(prefixCls, "-saturation"),
+    className: `${prefixCls}-saturation`,
     style: {
-      backgroundColor: "hsl(".concat(color.toHsb().h, ",100%, 50%)"),
+      backgroundColor: `hsl(${color.toHsb().h},100%, 50%)`,
       backgroundImage: 'linear-gradient(0deg, #000, transparent),linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0))'
@@ -75,0 +69,0 @@ }

lib/components/Slider.js

 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
@@ -9,5 +7,4 @@ value: true
 exports.default = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _useColorDrag3 = _interopRequireDefault(require("../hooks/useColorDrag"));
+var _useColorDrag = _interopRequireDefault(require("../hooks/useColorDrag"));
 var _Palette = _interopRequireDefault(require("./Palette"));
@@ -21,23 +18,28 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _Transform = _interopRequireDefault(require("./Transform"));
-var Slider = function Slider(props) {
-  var prefixCls = props.prefixCls,
-    colors = props.colors,
-    disabled = props.disabled,
-    onChange = props.onChange,
-    onChangeComplete = props.onChangeComplete,
-    color = props.color,
-    type = props.type;
-  var sliderRef = (0, _react.useRef)();
-  var transformRef = (0, _react.useRef)();
-  var colorRef = (0, _react.useRef)(color);
-  var getValue = function getValue(c) {
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Slider = props => {
+  const {
+    prefixCls,
+    colors,
+    disabled,
+    onChange,
+    onChangeComplete,
+    color,
+    type
+  } = props;
+  const sliderRef = (0, _react.useRef)();
+  const transformRef = (0, _react.useRef)();
+  const colorRef = (0, _react.useRef)(color);
+  const getValue = c => {
     return type === 'hue' ? c.getHue() : c.a * 100;
   };
-  var onDragChange = (0, _rcUtil.useEvent)(function (offsetValue) {
-    var calcColor = (0, _util.calculateColor)({
+  const onDragChange = (0, _rcUtil.useEvent)(offsetValue => {
+    const calcColor = (0, _util.calculateColor)({
       offset: offsetValue,
       targetRef: transformRef,
       containerRef: sliderRef,
-      color: color,
-      type: type
+      color,
+      type
     });
@@ -47,26 +49,21 @@ colorRef.current = calcColor;
   });
-  var _useColorDrag = (0, _useColorDrag3.default)({
-      color: color,
-      targetRef: transformRef,
-      containerRef: sliderRef,
-      calculate: function calculate() {
-        return (0, _util.calcOffset)(color, type);
-      },
-      onDragChange: onDragChange,
-      onDragChangeComplete: function onDragChangeComplete() {
-        onChangeComplete(getValue(colorRef.current));
-      },
-      direction: 'x',
-      disabledDrag: disabled
-    }),
-    _useColorDrag2 = (0, _slicedToArray2.default)(_useColorDrag, 2),
-    offset = _useColorDrag2[0],
-    dragStartHandle = _useColorDrag2[1];
-  var handleColor = _react.default.useMemo(function () {
+  const [offset, dragStartHandle] = (0, _useColorDrag.default)({
+    color,
+    targetRef: transformRef,
+    containerRef: sliderRef,
+    calculate: () => (0, _util.calcOffset)(color, type),
+    onDragChange,
+    onDragChangeComplete() {
+      onChangeComplete(getValue(colorRef.current));
+    },
+    direction: 'x',
+    disabledDrag: disabled
+  });
+  const handleColor = _react.default.useMemo(() => {
     if (type === 'hue') {
-      var hsb = color.toHsb();
+      const hsb = color.toHsb();
       hsb.s = 1;
       hsb.b = 1;
       hsb.a = 1;
-      var lightColor = new _color.Color(hsb);
+      const lightColor = new _color.Color(hsb);
       return lightColor;
@@ -78,7 +75,3 @@ }
   // ========================= Gradient =========================
-  var gradientList = _react.default.useMemo(function () {
-    return colors.map(function (info) {
-      return "".concat(info.color, " ").concat(info.percent, "%");
-    });
-  }, [colors]);
+  const gradientList = _react.default.useMemo(() => colors.map(info => `${info.color} ${info.percent}%`), [colors]);
 
@@ -88,3 +81,3 @@ // ========================== Render ==========================
     ref: sliderRef,
-    className: (0, _classnames.default)("".concat(prefixCls, "-slider"), "".concat(prefixCls, "-slider-").concat(type)),
+    className: (0, _classnames.default)(`${prefixCls}-slider`, `${prefixCls}-slider-${type}`),
     onMouseDown: dragStartHandle,
@@ -91,0 +84,0 @@ onTouchStart: dragStartHandle

lib/components/Transform.js

 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
@@ -9,6 +8,10 @@ value: true
 var _react = _interopRequireWildcard(require("react"));
-var Transform = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var children = props.children,
-    x = props.x,
-    y = props.y;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Transform = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    children,
+    x,
+    y
+  } = props;
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -18,4 +21,4 @@ ref: ref,
       position: 'absolute',
-      left: "".concat(x, "%"),
-      top: "".concat(y, "%"),
+      left: `${x}%`,
+      top: `${y}%`,
       zIndex: 1,
@@ -22,0 +25,0 @@ transform: 'translate(-50%, -50%)'

lib/hooks/useColorDrag.js

 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
@@ -8,8 +7,7 @@ value: true
 exports.default = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 function getPosition(e) {
-  var obj = 'touches' in e ? e.touches[0] : e;
-  var scrollXOffset = document.documentElement.scrollLeft || document.body.scrollLeft || window.pageXOffset;
-  var scrollYOffset = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
+  const obj = 'touches' in e ? e.touches[0] : e;
+  const scrollXOffset = document.documentElement.scrollLeft || document.body.scrollLeft || window.pageXOffset;
+  const scrollYOffset = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
   return {
@@ -21,51 +19,51 @@ pageX: obj.pageX - scrollXOffset,
 function useColorDrag(props) {
-  var targetRef = props.targetRef,
-    containerRef = props.containerRef,
-    direction = props.direction,
-    onDragChange = props.onDragChange,
-    onDragChangeComplete = props.onDragChangeComplete,
-    calculate = props.calculate,
-    color = props.color,
-    disabledDrag = props.disabledDrag;
-  var _useState = (0, _react.useState)({
-      x: 0,
-      y: 0
-    }),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    offsetValue = _useState2[0],
-    setOffsetValue = _useState2[1];
-  var mouseMoveRef = (0, _react.useRef)(null);
-  var mouseUpRef = (0, _react.useRef)(null);
+  const {
+    targetRef,
+    containerRef,
+    direction,
+    onDragChange,
+    onDragChangeComplete,
+    calculate,
+    color,
+    disabledDrag
+  } = props;
+  const [offsetValue, setOffsetValue] = (0, _react.useState)({
+    x: 0,
+    y: 0
+  });
+  const mouseMoveRef = (0, _react.useRef)(null);
+  const mouseUpRef = (0, _react.useRef)(null);
 
   // Always get position from `color`
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     setOffsetValue(calculate());
   }, [color]);
-  (0, _react.useEffect)(function () {
-    return function () {
-      document.removeEventListener('mousemove', mouseMoveRef.current);
-      document.removeEventListener('mouseup', mouseUpRef.current);
-      document.removeEventListener('touchmove', mouseMoveRef.current);
-      document.removeEventListener('touchend', mouseUpRef.current);
-      mouseMoveRef.current = null;
-      mouseUpRef.current = null;
-    };
+  (0, _react.useEffect)(() => () => {
+    document.removeEventListener('mousemove', mouseMoveRef.current);
+    document.removeEventListener('mouseup', mouseUpRef.current);
+    document.removeEventListener('touchmove', mouseMoveRef.current);
+    document.removeEventListener('touchend', mouseUpRef.current);
+    mouseMoveRef.current = null;
+    mouseUpRef.current = null;
   }, []);
-  var updateOffset = function updateOffset(e) {
-    var _getPosition = getPosition(e),
-      pageX = _getPosition.pageX,
-      pageY = _getPosition.pageY;
-    var _containerRef$current = containerRef.current.getBoundingClientRect(),
-      rectX = _containerRef$current.x,
-      rectY = _containerRef$current.y,
-      width = _containerRef$current.width,
-      height = _containerRef$current.height;
-    var _targetRef$current$ge = targetRef.current.getBoundingClientRect(),
-      targetWidth = _targetRef$current$ge.width,
-      targetHeight = _targetRef$current$ge.height;
-    var centerOffsetX = targetWidth / 2;
-    var centerOffsetY = targetHeight / 2;
-    var offsetX = Math.max(0, Math.min(pageX - rectX, width)) - centerOffsetX;
-    var offsetY = Math.max(0, Math.min(pageY - rectY, height)) - centerOffsetY;
-    var calcOffset = {
+  const updateOffset = e => {
+    const {
+      pageX,
+      pageY
+    } = getPosition(e);
+    const {
+      x: rectX,
+      y: rectY,
+      width,
+      height
+    } = containerRef.current.getBoundingClientRect();
+    const {
+      width: targetWidth,
+      height: targetHeight
+    } = targetRef.current.getBoundingClientRect();
+    const centerOffsetX = targetWidth / 2;
+    const centerOffsetY = targetHeight / 2;
+    const offsetX = Math.max(0, Math.min(pageX - rectX, width)) - centerOffsetX;
+    const offsetY = Math.max(0, Math.min(pageY - rectY, height)) - centerOffsetY;
+    const calcOffset = {
       x: offsetX,
@@ -79,9 +77,9 @@ y: direction === 'x' ? offsetValue.y : offsetY
     }
-    onDragChange === null || onDragChange === void 0 || onDragChange(calcOffset);
+    onDragChange?.(calcOffset);
   };
-  var onDragMove = function onDragMove(e) {
+  const onDragMove = e => {
     e.preventDefault();
     updateOffset(e);
   };
-  var onDragStop = function onDragStop(e) {
+  const onDragStop = e => {
     e.preventDefault();
@@ -94,5 +92,5 @@ document.removeEventListener('mousemove', mouseMoveRef.current);
     mouseUpRef.current = null;
-    onDragChangeComplete === null || onDragChangeComplete === void 0 || onDragChangeComplete();
+    onDragChangeComplete?.();
   };
-  var onDragStart = function onDragStart(e) {
+  const onDragStart = e => {
     // https://github.com/ant-design/ant-design/issues/43529
@@ -99,0 +97,0 @@ document.removeEventListener('mousemove', mouseMoveRef.current);

lib/hooks/useColorState.js

 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
@@ -8,18 +7,12 @@ value: true
 exports.default = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _rcUtil = require("rc-util");
 var _react = require("react");
 var _util = require("../util");
-var useColorState = function useColorState(defaultValue, value) {
-  var _useMergedState = (0, _rcUtil.useMergedState)(defaultValue, {
-      value: value
-    }),
-    _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
-    mergedValue = _useMergedState2[0],
-    setValue = _useMergedState2[1];
-  var color = (0, _react.useMemo)(function () {
-    return (0, _util.generateColor)(mergedValue);
-  }, [mergedValue]);
+const useColorState = (defaultValue, value) => {
+  const [mergedValue, setValue] = (0, _rcUtil.useMergedState)(defaultValue, {
+    value
+  });
+  const color = (0, _react.useMemo)(() => (0, _util.generateColor)(mergedValue), [mergedValue]);
   return [color, setValue];
 };
 var _default = exports.default = useColorState;

lib/hooks/useComponent.js

 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
@@ -11,8 +9,12 @@ value: true
 var _Slider = _interopRequireDefault(require("../components/Slider"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function useComponent(components) {
-  return React.useMemo(function () {
-    var _ref = components || {},
-      slider = _ref.slider;
+  return React.useMemo(() => {
+    const {
+      slider
+    } = components || {};
     return [slider || _Slider.default];
   }, [components]);
 }

lib/index.js

 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
@@ -13,3 +12,3 @@ value: true
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _color.Color;
@@ -20,3 +19,3 @@ }
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _ColorBlock.default;
@@ -36,3 +35,3 @@ }
     enumerable: true,
-    get: function get() {
+    get: function () {
       return _interface[key];
@@ -42,2 +41,3 @@ }
 });
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var _default = exports.default = _ColorPicker.default;

lib/util.js

 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
@@ -8,6 +7,5 @@ value: true
 exports.generateColor = exports.defaultColor = exports.calculateColor = exports.calcOffset = exports.ColorPickerPrefixCls = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _color = require("./color");
-var ColorPickerPrefixCls = exports.ColorPickerPrefixCls = 'rc-color-picker';
-var generateColor = exports.generateColor = function generateColor(color) {
+const ColorPickerPrefixCls = exports.ColorPickerPrefixCls = 'rc-color-picker';
+const generateColor = color => {
   if (color instanceof _color.Color) {
@@ -18,32 +16,39 @@ return color;
 };
-var defaultColor = exports.defaultColor = generateColor('#1677ff');
-var calculateColor = exports.calculateColor = function calculateColor(props) {
-  var offset = props.offset,
-    targetRef = props.targetRef,
-    containerRef = props.containerRef,
-    color = props.color,
-    type = props.type;
-  var _containerRef$current = containerRef.current.getBoundingClientRect(),
-    width = _containerRef$current.width,
-    height = _containerRef$current.height;
-  var _targetRef$current$ge = targetRef.current.getBoundingClientRect(),
-    targetWidth = _targetRef$current$ge.width,
-    targetHeight = _targetRef$current$ge.height;
-  var centerOffsetX = targetWidth / 2;
-  var centerOffsetY = targetHeight / 2;
-  var saturation = (offset.x + centerOffsetX) / width;
-  var bright = 1 - (offset.y + centerOffsetY) / height;
-  var hsb = color.toHsb();
-  var alphaOffset = saturation;
-  var hueOffset = (offset.x + centerOffsetX) / width * 360;
+exports.generateColor = generateColor;
+const defaultColor = exports.defaultColor = generateColor('#1677ff');
+const calculateColor = props => {
+  const {
+    offset,
+    targetRef,
+    containerRef,
+    color,
+    type
+  } = props;
+  const {
+    width,
+    height
+  } = containerRef.current.getBoundingClientRect();
+  const {
+    width: targetWidth,
+    height: targetHeight
+  } = targetRef.current.getBoundingClientRect();
+  const centerOffsetX = targetWidth / 2;
+  const centerOffsetY = targetHeight / 2;
+  const saturation = (offset.x + centerOffsetX) / width;
+  const bright = 1 - (offset.y + centerOffsetY) / height;
+  const hsb = color.toHsb();
+  const alphaOffset = saturation;
+  const hueOffset = (offset.x + centerOffsetX) / width * 360;
   if (type) {
     switch (type) {
       case 'hue':
-        return generateColor((0, _objectSpread2.default)((0, _objectSpread2.default)({}, hsb), {}, {
+        return generateColor({
+          ...hsb,
           h: hueOffset <= 0 ? 0 : hueOffset
-        }));
+        });
       case 'alpha':
-        return generateColor((0, _objectSpread2.default)((0, _objectSpread2.default)({}, hsb), {}, {
+        return generateColor({
+          ...hsb,
           a: alphaOffset <= 0 ? 0 : alphaOffset
-        }));
+        });
     }
@@ -58,4 +63,5 @@ }
 };
-var calcOffset = exports.calcOffset = function calcOffset(color, type) {
-  var hsb = color.toHsb();
+exports.calculateColor = calculateColor;
+const calcOffset = (color, type) => {
+  const hsb = color.toHsb();
   switch (type) {
@@ -80,2 +86,3 @@ case 'hue':
   }
-};
+};
+exports.calcOffset = calcOffset;

package.json

 {
   "name": "@rc-component/color-picker",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "description": "React Color Picker",
@@ -36,3 +36,3 @@ "keywords": [
     "prepare": "husky install",
-    "prepublishOnly": "npm run compile && np --yolo --no-publish",
+    "prepublishOnly": "npm run compile && rc-np",
     "postpublish": "npm run gh-pages",
@@ -49,9 +49,9 @@ "start": "dumi dev",
   "dependencies": {
-    "@ant-design/fast-color": "^2.0.6",
-    "@babel/runtime": "^7.23.6",
-    "classnames": "^2.2.6",
-    "rc-util": "^5.38.1"
+    "@ant-design/fast-color": "^3.0.0",
+    "@rc-component/util": "^1.2.1",
+    "classnames": "^2.2.6"
   },
   "devDependencies": {
-    "@rc-component/father-plugin": "^1.0.0",
+    "@rc-component/father-plugin": "^2.0.4",
+    "@rc-component/np": "^1.0.0",
     "@rc-component/trigger": "^1.13.0",
@@ -76,3 +76,2 @@ "@testing-library/jest-dom": "^5.16.4",
     "lint-staged": "^13.1.0",
-    "np": "^7.0.0",
     "prettier": "^2.0.5",
@@ -79,0 +78,0 @@ "react": "^18.0.0",

No alert changes

Improved metrics

Dependency count

5

-16.67%

Worsened metrics

Total package byte prevSize

75990

-8.61%

Lines of code

1842

-3.31%

Dependency changes

• + Added

  @rc-component/util@^1.2.1

• + Added

  @ant-design/fast-color@3.0.0
  (transitive)

• + Added

  @rc-component/util@1.2.1
  (transitive)

• - Removed

  @babel/runtime@^7.23.6

• - Removed

  rc-util@^5.38.1

• - Removed

  @ant-design/fast-color@2.0.6
  (transitive)

• - Removed

  @babel/runtime@7.27.1
  (transitive)

• - Removed

  rc-util@5.44.4
  (transitive)

• Updated

  @ant-design/fast-color@^3.0.0