@easyv/react-components 0.2.0 → 0.2.1

package/dist/ColorsPicker/ControlBar.d.ts

@@ -2,7 +2,8 @@ import { Color } from './interface';
 interface ControlBarProps {
     color: Color;
     type: 'hue' | 'alpha';
-    onChange: (x: number) => void;
+    onChange?: (x: number) => void;
+    onChangeComplete?: (x: number) => void;
 }
-export default function ControlBar({ color, type, onChange }: ControlBarProps): import("react/jsx-runtime").JSX.Element;
+export default function ControlBar({ color, type, onChange, onChangeComplete, }: ControlBarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ColorsPicker/ControlBar.js

@@ -6,7 +6,8 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function ControlBar(_ref) {
   var color = _ref.color,
     type = _ref.type,
-    _onChange = _ref.onChange;
+    _onChange = _ref.onChange,
+    _onChangeComplete = _ref.onChangeComplete;
   var x;
   if (type === 'alpha') {
     x = color.alpha;
@@ -18,9 +19,16 @@ export default function ControlBar(_ref) {
       value: [x, 0],
       onChange: function onChange(value) {
         if (type === 'hue') {
-          _onChange(value[0] * 360);
+          _onChange === null || _onChange === void 0 ? void 0 : _onChange(value[0] * 360);
         } else {
-          _onChange(value[0]);
+          _onChange === null || _onChange === void 0 ? void 0 : _onChange(value[0]);
+        }
+      },
+      onChangeComplete: function onChangeComplete(value) {
+        if (type === 'hue') {
+          _onChangeComplete === null || _onChangeComplete === void 0 ? void 0 : _onChangeComplete(value[0] * 360);
+        } else {
+          _onChangeComplete === null || _onChangeComplete === void 0 ? void 0 : _onChangeComplete(value[0]);
         }
       }
     }),

package/dist/ColorsPicker/LinearColorPicker/LinearColorPanel.d.ts

@@ -1,7 +1,8 @@
 import { ColorValueMap } from '../interface';
 interface LinearColorPanelProps {
     value: ColorValueMap['linear'];
-    onChange: (value: ColorValueMap['linear']) => void;
+    onChange?: (value: ColorValueMap['linear']) => void;
+    onChangeComplete?: (value: ColorValueMap['linear']) => void;
 }
-export default function LinearColorPanel({ value, onChange, }: LinearColorPanelProps): import("react/jsx-runtime").JSX.Element;
+export default function LinearColorPanel({ value, onChange, onChangeComplete, }: LinearColorPanelProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ColorsPicker/LinearColorPicker/LinearColorPanel.js

@@ -25,7 +25,8 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function LinearColorPanel(_ref) {
   var _value$stops$currentI;
   var value = _ref.value,
-    onChange = _ref.onChange;
+    onChange = _ref.onChange,
+    onChangeComplete = _ref.onChangeComplete;
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     currentIndex = _useState2[0],
@@ -37,12 +38,18 @@ export default function LinearColorPanel(_ref) {
   useHistory({
     value: value
   });
-  var handleChange = function handleChange(color) {
+  var handleChange = function handleChange(color, complete) {
     var newStops = _toConsumableArray(value.stops);
     newStops[currentIndex].color = color;
-    onChange(_objectSpread(_objectSpread({}, value), {}, {
-      stops: newStops
-    }));
+    if (complete) {
+      onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(_objectSpread(_objectSpread({}, value), {}, {
+        stops: newStops
+      }));
+    } else {
+      onChange === null || onChange === void 0 ? void 0 : onChange(_objectSpread(_objectSpread({}, value), {}, {
+        stops: newStops
+      }));
+    }
   };
   var handleIndexSelect = function handleIndexSelect(index) {
     setCurrentIndex(index);
@@ -52,9 +59,10 @@ export default function LinearColorPanel(_ref) {
   };
   var handleSelect = function handleSelect(val) {
     if (typeof val === 'string') {
-      handleChange(val);
+      handleChange(val, true);
     } else {
-      onChange(val);
+      onChange === null || onChange === void 0 ? void 0 : onChange(val);
+      onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(val);
     }
     setUpdateKey(function (prev) {
       return prev + 1;
@@ -65,10 +73,14 @@ export default function LinearColorPanel(_ref) {
       active: currentIndex,
       value: value,
       onSelect: handleIndexSelect,
-      onChange: onChange
+      onChange: onChange,
+      onChangeComplete: onChangeComplete
     }), /*#__PURE__*/_jsx(Panel, {
       color: (_value$stops$currentI = value.stops[currentIndex]) === null || _value$stops$currentI === void 0 ? void 0 : _value$stops$currentI.color,
-      onChange: handleChange
+      onChange: handleChange,
+      onChangeComplete: function onChangeComplete(val) {
+        return handleChange(val, true);
+      }
     }, updateKey), /*#__PURE__*/_jsx(History, {
       type: "linear",
       onSelect: handleSelect

package/dist/ColorsPicker/LinearColorPicker/LinearPointsBar.d.ts

@@ -3,7 +3,8 @@ interface LinearPointsBarProps {
     active: number;
     value: ColorValueMap['linear'];
     onSelect: (current: number) => void;
-    onChange: (value: ColorValueMap['linear']) => void;
+    onChange?: (value: ColorValueMap['linear']) => void;
+    onChangeComplete?: (value: ColorValueMap['linear']) => void;
 }
-export default function LinearPointsBar({ active, value, onSelect, onChange, }: LinearPointsBarProps): import("react/jsx-runtime").JSX.Element;
+export default function LinearPointsBar({ active, value, onSelect, onChange, onChangeComplete, }: LinearPointsBarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ColorsPicker/LinearColorPicker/LinearPointsBar.js

@@ -22,7 +22,8 @@ export default function LinearPointsBar(_ref) {
   var active = _ref.active,
     value = _ref.value,
     onSelect = _ref.onSelect,
-    _onChange = _ref.onChange;
+    _onChange = _ref.onChange,
+    _onChangeComplete = _ref.onChangeComplete;
   var currentIndexRef = useRef(active);
   var valueRef = useRef(value);
   useEffect(function () {
@@ -35,7 +36,10 @@ export default function LinearPointsBar(_ref) {
     if (value.stops.length <= 2) return;
     var newStops = _toConsumableArray(value.stops);
     newStops.splice(active, 1);
-    _onChange(_objectSpread(_objectSpread({}, value), {}, {
+    _onChange === null || _onChange === void 0 ? void 0 : _onChange(_objectSpread(_objectSpread({}, value), {}, {
+      stops: newStops
+    }));
+    _onChangeComplete === null || _onChangeComplete === void 0 ? void 0 : _onChangeComplete(_objectSpread(_objectSpread({}, value), {}, {
       stops: newStops
     }));
     handleSelect(Math.max(active - 1, 0));
@@ -72,11 +76,11 @@ export default function LinearPointsBar(_ref) {
               stops: [].concat(_toConsumableArray(value.stops), [newStop])
             });
             valueRef.current = newValue;
-            _onChange(newValue);
+            _onChange === null || _onChange === void 0 ? void 0 : _onChange(newValue);
             handleSelect(value.stops.length);
           }
         } else {
-          _onChange(_objectSpread(_objectSpread({}, value), {}, {
+          _onChange === null || _onChange === void 0 ? void 0 : _onChange(_objectSpread(_objectSpread({}, value), {}, {
             stops: valueRef.current.stops.map(function (d, i) {
               return _objectSpread(_objectSpread({}, d), {}, {
                 offset: i === currentIndexRef.current ? val[0] * 100 : d.offset
@@ -84,6 +88,15 @@ export default function LinearPointsBar(_ref) {
             })
           }));
         }
+      },
+      onChangeComplete: function onChangeComplete(val) {
+        _onChangeComplete === null || _onChangeComplete === void 0 ? void 0 : _onChangeComplete(_objectSpread(_objectSpread({}, value), {}, {
+          stops: valueRef.current.stops.map(function (d, i) {
+            return _objectSpread(_objectSpread({}, d), {}, {
+              offset: i === currentIndexRef.current ? val[0] * 100 : d.offset
+            });
+          })
+        }));
       }
     }),
     blockRef = _useControlBlock.blockRef,
@@ -94,7 +107,10 @@ export default function LinearPointsBar(_ref) {
         offset: 100 - d.offset
       });
     });
-    _onChange(_objectSpread(_objectSpread({}, value), {}, {
+    _onChange === null || _onChange === void 0 ? void 0 : _onChange(_objectSpread(_objectSpread({}, value), {}, {
+      stops: newStops
+    }));
+    _onChangeComplete === null || _onChangeComplete === void 0 ? void 0 : _onChangeComplete(_objectSpread(_objectSpread({}, value), {}, {
       stops: newStops
     }));
   };

package/dist/ColorsPicker/MixedColorPicker/MixedPanel.d.ts

@@ -2,7 +2,8 @@ import { ColorType, ColorValueObj } from '../interface';
 interface MixedPanelProps {
     type: ColorType[];
     value: ColorValueObj;
-    onChange: (value: ColorValueObj) => void;
+    onChange?: (value: ColorValueObj) => void;
+    onChangeComplete?: (value: ColorValueObj) => void;
 }
-export default function MixedPanel({ type, value, onChange }: MixedPanelProps): import("react/jsx-runtime").JSX.Element;
+export default function MixedPanel({ type, value, onChange, onChangeComplete, }: MixedPanelProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ColorsPicker/MixedColorPicker/MixedPanel.js

@@ -14,14 +14,23 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function MixedPanel(_ref) {
   var type = _ref.type,
     value = _ref.value,
-    onChange = _ref.onChange;
+    onChange = _ref.onChange,
+    onChangeComplete = _ref.onChangeComplete;
   var handleChange = function handleChange(type) {
     return function (newValue) {
-      onChange(_objectSpread(_objectSpread({}, value), {}, _defineProperty({}, type, newValue)));
+      onChange === null || onChange === void 0 ? void 0 : onChange(_objectSpread(_objectSpread({}, value), {}, _defineProperty({}, type, newValue)));
+    };
+  };
+  var handleChangeComplete = function handleChangeComplete(type) {
+    return function (newValue) {
+      onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(_objectSpread(_objectSpread({}, value), {}, _defineProperty({}, type, newValue)));
     };
   };
   var handleTypeChange = function handleTypeChange(newType) {
-    onChange(_objectSpread(_objectSpread({}, value), {}, {
+    onChange === null || onChange === void 0 ? void 0 : onChange(_objectSpread(_objectSpread({}, value), {}, {
+      type: newType
+    }));
+    onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(_objectSpread(_objectSpread({}, value), {}, {
       type: newType
     }));
   };
@@ -31,21 +40,24 @@ export default function MixedPanel(_ref) {
         {
           return /*#__PURE__*/_jsx(PureColorPanel, {
             value: value['pure'],
-            onChange: handleChange('pure')
+            onChange: handleChange('pure'),
+            onChangeComplete: handleChangeComplete('pure')
           });
         }
       case 'pures':
         {
           return /*#__PURE__*/_jsx(PuresColorPanel, {
             value: value['pures'],
-            onChange: handleChange('pures')
+            onChange: handleChange('pures'),
+            onChangeComplete: handleChangeComplete('pures')
           });
         }
       case 'linear':
         {
           return /*#__PURE__*/_jsx(LinearColorPanel, {
             value: value['linear'],
-            onChange: handleChange('linear')
+            onChange: handleChange('linear'),
+            onChangeComplete: handleChangeComplete('linear')
           });
         }
       default:

package/dist/ColorsPicker/Palette.d.ts

@@ -1,7 +1,8 @@
 import { Color } from './interface';
 interface PaletteProps {
     color: Color;
-    onChange: (s: number, v: number) => void;
+    onChange?: (s: number, v: number) => void;
+    onChangeComplete?: (s: number, v: number) => void;
 }
-export default function Palette({ color, onChange }: PaletteProps): import("react/jsx-runtime").JSX.Element;
+export default function Palette({ color, onChange, onChangeComplete, }: PaletteProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ColorsPicker/Palette.js

@@ -3,7 +3,8 @@ import { useControlBlock } from "./hooks/useControlBlock";
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function Palette(_ref) {
   var color = _ref.color,
-    _onChange = _ref.onChange;
+    _onChange = _ref.onChange,
+    _onChangeComplete = _ref.onChangeComplete;
   var _color$hsv = color.hsv,
     h = _color$hsv.h,
     s = _color$hsv.s,
@@ -16,7 +17,10 @@ export default function Palette(_ref) {
   var _useControlBlock = useControlBlock({
       value: [s, 1 - v],
       onChange: function onChange(value) {
-        return _onChange(value[0], 1 - value[1]);
+        return _onChange === null || _onChange === void 0 ? void 0 : _onChange(value[0], 1 - value[1]);
+      },
+      onChangeComplete: function onChangeComplete(value) {
+        return _onChangeComplete === null || _onChangeComplete === void 0 ? void 0 : _onChangeComplete(value[0], 1 - value[1]);
       }
     }),
     blockRef = _useControlBlock.blockRef,

package/dist/ColorsPicker/Panel.d.ts

@@ -1,6 +1,7 @@
 interface PanelProps {
     color: string;
-    onChange: (color: string) => void;
+    onChange?: (color: string) => void;
+    onChangeComplete?: (color: string) => void;
 }
-export default function Panel({ color: propsColor, onChange }: PanelProps): import("react/jsx-runtime").JSX.Element;
+export default function Panel({ color: propsColor, onChange, onChangeComplete, }: PanelProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ColorsPicker/Panel.js

@@ -22,7 +22,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function Panel(_ref) {
   var propsColor = _ref.color,
-    onChange = _ref.onChange;
+    onChange = _ref.onChange,
+    onChangeComplete = _ref.onChangeComplete;
   var _useState = useState(function () {
       return {
         hsv: tinycolor(propsColor).toHsv(),
@@ -43,21 +44,33 @@ export default function Panel(_ref) {
   var colorString = tinycolor(color.hsv).setAlpha(color.alpha).toRgbString();
   var hexString = tinycolor(color.hsv).toHexString();
   var hexRef = useRef(null);
-  var handleHsvChange = function handleHsvChange(hsv) {
+  var handleHsvChange = function handleHsvChange(hsv, complete) {
     setColor(_objectSpread(_objectSpread({}, color), {}, {
       hsv: hsv
     }));
-    onChange(tinycolor(_objectSpread(_objectSpread({}, hsv), {}, {
-      a: color.alpha
-    })).toRgbString());
+    if (complete) {
+      onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(tinycolor(_objectSpread(_objectSpread({}, hsv), {}, {
+        a: color.alpha
+      })).toRgbString());
+    } else {
+      onChange === null || onChange === void 0 ? void 0 : onChange(tinycolor(_objectSpread(_objectSpread({}, hsv), {}, {
+        a: color.alpha
+      })).toRgbString());
+    }
   };
-  var handleAlphaChange = function handleAlphaChange(alpha) {
+  var handleAlphaChange = function handleAlphaChange(alpha, complete) {
     setColor(_objectSpread(_objectSpread({}, color), {}, {
       alpha: alpha
     }));
-    onChange(tinycolor(_objectSpread(_objectSpread({}, color.hsv), {}, {
-      a: alpha
-    })).toRgbString());
+    if (complete) {
+      onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(tinycolor(_objectSpread(_objectSpread({}, color.hsv), {}, {
+        a: alpha
+      })).toRgbString());
+    } else {
+      onChange === null || onChange === void 0 ? void 0 : onChange(tinycolor(_objectSpread(_objectSpread({}, color.hsv), {}, {
+        a: alpha
+      })).toRgbString());
+    }
   };
   var handleHexChange = function handleHexChange(val) {
     var hexVal = getHexValue(val);
@@ -67,7 +80,7 @@ export default function Panel(_ref) {
     setColor(_objectSpread(_objectSpread({}, color), {}, {
       hsv: hsv
     }));
-    onChange(tinycolor(_objectSpread(_objectSpread({}, hsv), {}, {
+    onChangeWithComplete(tinycolor(_objectSpread(_objectSpread({}, hsv), {}, {
       a: color.alpha
     })).toRgbString());
   };
@@ -80,7 +93,7 @@ export default function Panel(_ref) {
     setColor(_objectSpread(_objectSpread({}, color), {}, {
       hsv: hsv
     }));
-    onChange(tinycolor(_objectSpread(_objectSpread({}, hsv), {}, {
+    onChangeWithComplete(tinycolor(_objectSpread(_objectSpread({}, hsv), {}, {
       a: color.alpha
     })).toRgbString());
   };
@@ -89,7 +102,11 @@ export default function Panel(_ref) {
       hsv: tinycolor(color).toHsv(),
       alpha: 1
     });
-    onChange(color);
+    onChangeWithComplete(color);
+  };
+  var onChangeWithComplete = function onChangeWithComplete(color) {
+    onChange === null || onChange === void 0 ? void 0 : onChange(color);
+    onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(color);
   };
   return /*#__PURE__*/_jsxs("div", {
     className: "colors-picker-panel",
@@ -101,6 +118,13 @@ export default function Panel(_ref) {
           s: newS,
           v: newV
         });
+      },
+      onChangeComplete: function onChangeComplete(newS, newV) {
+        return handleHsvChange({
+          h: h,
+          s: newS,
+          v: newV
+        }, true);
       }
     }), /*#__PURE__*/_jsxs("div", {
       className: "colors-picker-control-wrapper",
@@ -125,11 +149,21 @@ export default function Panel(_ref) {
               s: s,
               v: v
             });
+          },
+          onChangeComplete: function onChangeComplete(newH) {
+            return handleHsvChange({
+              h: newH,
+              s: s,
+              v: v
+            }, true);
           }
         }), /*#__PURE__*/_jsx(ControlBar, {
           type: "alpha",
           color: color,
-          onChange: handleAlphaChange
+          onChange: handleAlphaChange,
+          onChangeComplete: function onChangeComplete(val) {
+            return handleAlphaChange(val, true);
+          }
         })]
       }), /*#__PURE__*/_jsx(Preview, {
         type: "pure",
@@ -212,7 +246,7 @@ export default function Panel(_ref) {
             return +val >= 0 && +val <= 100;
           },
           onChange: function onChange(val) {
-            return handleAlphaChange(+val / 100);
+            return handleAlphaChange(+val / 100, true);
           }
         }), /*#__PURE__*/_jsx("span", {
           className: "colors-picker-input-label",

package/dist/ColorsPicker/PureColorPicker/PureColorInput.d.ts

@@ -1,7 +1,7 @@
 interface PureColorInputProps {
     value: string;
     onTrigger: () => void;
-    onChange: (val: string) => void;
+    onChange?: (val: string) => void;
 }
 export default function PureColorInput({ value, onChange, onTrigger, }: PureColorInputProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ColorsPicker/PureColorPicker/PureColorInput.js

@@ -18,11 +18,11 @@ export default function PureColorInput(_ref) {
     var hexString = tinycolor(hsv).toHexString();
     hexRef.current.forceUpdate(hexString.slice(1).toUpperCase());
     var newColor = tinycolor(hexString).setAlpha(alpha).toRgbString();
-    onChange(newColor);
+    onChange === null || onChange === void 0 ? void 0 : onChange(newColor);
   };
   var handleAlphaChange = function handleAlphaChange(val) {
     var newColor = tinycolor(hexString).setAlpha(val).toRgbString();
-    onChange(newColor);
+    onChange === null || onChange === void 0 ? void 0 : onChange(newColor);
   };
   return /*#__PURE__*/_jsxs("div", {
     className: "pure-color-picker",

package/dist/ColorsPicker/PureColorPicker/PureColorPanel.d.ts

@@ -1,7 +1,8 @@
 import { ColorValueMap } from '../interface';
 interface PureColorPanelProps {
     value: ColorValueMap['pure'];
-    onChange: (value: ColorValueMap['pure']) => void;
+    onChange?: (value: ColorValueMap['pure']) => void;
+    onChangeComplete?: (value: ColorValueMap['pure']) => void;
 }
-export default function PureColorPanel({ value, onChange, }: PureColorPanelProps): import("react/jsx-runtime").JSX.Element;
+export default function PureColorPanel({ value, onChange, onChangeComplete, }: PureColorPanelProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ColorsPicker/PureColorPicker/PureColorPanel.js

@@ -13,13 +13,15 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function PureColorPanel(_ref) {
   var value = _ref.value,
-    onChange = _ref.onChange;
+    onChange = _ref.onChange,
+    onChangeComplete = _ref.onChangeComplete;
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     updateKey = _useState2[0],
     setUpdateKey = _useState2[1];
   var handleSelect = function handleSelect(val) {
-    onChange(val);
+    onChange === null || onChange === void 0 ? void 0 : onChange(val);
+    onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(val);
     setUpdateKey(function (prev) {
       return prev + 1;
     });
@@ -30,7 +32,8 @@ export default function PureColorPanel(_ref) {
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Panel, {
       color: value,
-      onChange: onChange
+      onChange: onChange,
+      onChangeComplete: onChangeComplete
     }, updateKey), /*#__PURE__*/_jsx(History, {
       type: "pure",
       onSelect: handleSelect

package/dist/ColorsPicker/PuresColorPicker/PuresColorPanel.d.ts

@@ -1,7 +1,8 @@
 import { ColorValueMap } from '../interface';
 interface PuresColorPanelProps {
     value: ColorValueMap['pures'];
-    onChange: (value: ColorValueMap['pures']) => void;
+    onChange?: (value: ColorValueMap['pures']) => void;
+    onChangeComplete?: (value: ColorValueMap['pures']) => void;
 }
-export default function PuresColorPanel({ value, onChange, }: PuresColorPanelProps): import("react/jsx-runtime").JSX.Element;
+export default function PuresColorPanel({ value, onChange, onChangeComplete, }: PuresColorPanelProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ColorsPicker/PuresColorPicker/PuresColorPanel.js

@@ -18,7 +18,8 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function PuresColorPanel(_ref) {
   var value = _ref.value,
-    onChange = _ref.onChange;
+    onChange = _ref.onChange,
+    onChangeComplete = _ref.onChangeComplete;
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     currentIndex = _useState2[0],
@@ -34,16 +35,25 @@ export default function PuresColorPanel(_ref) {
   var handleChange = function handleChange(color) {
     var newValue = _toConsumableArray(value);
     newValue[currentIndex] = color;
-    onChange(newValue);
+    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+  };
+  var handleChangeComplete = function handleChangeComplete(color) {
+    var newValue = _toConsumableArray(value);
+    newValue[currentIndex] = color;
+    onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(newValue);
   };
   var handleAdd = function handleAdd() {
-    onChange(value.concat('#000000'));
+    onChange === null || onChange === void 0 ? void 0 : onChange(value.concat('#000000'));
+    onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(value.concat('#000000'));
     setCurrentIndex(value.length);
     setUpdateKey(updateKey + 1);
   };
   var handleDelete = function handleDelete() {
     if (value.length > 1) {
-      onChange(value.filter(function (_, index) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(value.filter(function (_, index) {
+        return index !== currentIndex;
+      }));
+      onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(value.filter(function (_, index) {
         return index !== currentIndex;
       }));
       setCurrentIndex(currentIndex > 0 ? currentIndex - 1 : 0);
@@ -57,7 +67,8 @@ export default function PuresColorPanel(_ref) {
   var handleHistorySelect = function handleHistorySelect(val) {
     var newValue = _toConsumableArray(value);
     newValue[currentIndex] = val;
-    onChange(newValue);
+    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(newValue);
     setUpdateKey(updateKey + 1);
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
@@ -69,7 +80,8 @@ export default function PuresColorPanel(_ref) {
       onSelect: handleSelect
     }), /*#__PURE__*/_jsx(Panel, {
       color: value[currentIndex],
-      onChange: handleChange
+      onChange: handleChange,
+      onChangeComplete: handleChangeComplete
     }, updateKey), /*#__PURE__*/_jsx(History, {
       type: "pure",
       onSelect: handleHistorySelect

package/dist/ColorsPicker/RangeColorPicker/RangeColorPanel.d.ts

@@ -1,7 +1,8 @@
 import { ColorValueMap } from '../interface';
 interface RangeColorPanelProps {
     value: ColorValueMap['range'];
-    onChange: (value: ColorValueMap['range']) => void;
+    onChange?: (value: ColorValueMap['range']) => void;
+    onChangeComplete?: (value: ColorValueMap['range']) => void;
 }
-export default function RangeColorPanel({ value, onChange, }: RangeColorPanelProps): import("react/jsx-runtime").JSX.Element;
+export default function RangeColorPanel({ value, onChange, onChangeComplete, }: RangeColorPanelProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ColorsPicker/RangeColorPicker/RangeColorPanel.js

@@ -17,7 +17,8 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function RangeColorPanel(_ref) {
   var value = _ref.value,
-    onChange = _ref.onChange;
+    onChange = _ref.onChange,
+    onChangeComplete = _ref.onChangeComplete;
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     currentIndex = _useState2[0],
@@ -26,17 +27,21 @@ export default function RangeColorPanel(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     updateKey = _useState4[0],
     setUpdateKey = _useState4[1];
-  var handleChange = function handleChange(newValue) {
+  var handleChange = function handleChange(newValue, complete) {
     var newValueArray = _toConsumableArray(value);
     newValueArray[currentIndex] = newValue;
-    onChange(newValueArray);
+    if (complete) {
+      onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(newValueArray);
+    } else {
+      onChange === null || onChange === void 0 ? void 0 : onChange(newValueArray);
+    }
+  };
+  var handleSelect = function handleSelect(val) {
+    handleChange(val, true);
     setUpdateKey(function (prev) {
       return prev + 1;
     });
   };
-  var handleSelect = function handleSelect(val) {
-    handleChange(val);
-  };
   var handleIndexSelect = function handleIndexSelect(index) {
     setCurrentIndex(index);
     setUpdateKey(function (prev) {
@@ -50,7 +55,10 @@ export default function RangeColorPanel(_ref) {
       onSelect: handleIndexSelect
     }), /*#__PURE__*/_jsx(Panel, {
       color: value[currentIndex],
-      onChange: handleChange
+      onChange: handleChange,
+      onChangeComplete: function onChangeComplete(val) {
+        return handleChange(val, true);
+      }
     }, updateKey), /*#__PURE__*/_jsx(History, {
       type: "pure",
       onSelect: handleSelect

package/dist/ColorsPicker/hooks/useColorsPicker.d.ts

@@ -1,25 +1,2 @@
-import { ColorValueObj, ColorsPickerProps, ColorsPickerType } from '../interface';
-export default function useColorsPicker<T extends ColorsPickerType>(props: ColorsPickerProps<T>): ColorsPickerProps<T> | {
-    type: string | T;
-    value: string;
-    onChange: (value: T extends import("../interface").ColorType ? import("../interface").ColorValueMap[T] : ColorValueObj) => void;
-} | {
-    type: T;
-    value: string[];
-    onChange: (value: T extends import("../interface").ColorType ? import("../interface").ColorValueMap[T] : ColorValueObj) => void;
-} | {
-    type: T;
-    value: {
-        stops: {
-            color: string;
-            offset: number;
-        }[];
-        angle: number;
-        opacity: number;
-    };
-    onChange: (value: T extends import("../interface").ColorType ? import("../interface").ColorValueMap[T] : ColorValueObj) => void;
-} | {
-    type: T & any[];
-    value: {};
-    onChange: (value: T extends import("../interface").ColorType ? import("../interface").ColorValueMap[T] : ColorValueObj) => void;
-};
+import { ColorsPickerProps, ColorsPickerType } from '../interface';
+export default function useColorsPicker<T extends ColorsPickerType>(props: ColorsPickerProps<T>): ColorsPickerProps<T>;

package/dist/ColorsPicker/hooks/useColorsPicker.js

@@ -1,12 +1,19 @@
-var _excluded = ["type", "value"];
+var _excluded = ["type", "value", "onChange"];
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { useCallback, useEffect, useState } from 'react';
 var defaultValues = {
   pure: '#000000',
   pures: ['#ffffff', '#000000'],
@@ -20,18 +27,32 @@ var defaultValues = {
     }],
     angle: 0,
     opacity: 1
-  }
+  },
+  range: ['#ffffff', '#000000']
 };
 export default function useColorsPicker(props) {
   var _props$type = props.type,
     type = _props$type === void 0 ? 'pure' : _props$type,
     value = props.value,
+    onChange = props.onChange,
     rest = _objectWithoutProperties(props, _excluded);
+  var _useState = useState(value),
+    _useState2 = _slicedToArray(_useState, 2),
+    localValue = _useState2[0],
+    setLocalValue = _useState2[1];
+  useEffect(function () {
+    setLocalValue(value);
+  }, [value]);
+  var handleChange = useCallback(function (val) {
+    setLocalValue(val);
+    onChange === null || onChange === void 0 ? void 0 : onChange(val);
+  }, [onChange]);
   if (type === 'pure') {
     if (!value || typeof value !== 'string') {
       return _objectSpread(_objectSpread({}, rest), {}, {
         type: type,
-        value: defaultValues.pure
+        value: defaultValues.pure,
+        onChange: handleChange
       });
     }
   } else if (type === 'pures') {
@@ -40,14 +61,16 @@ export default function useColorsPicker(props) {
     })) {
       return _objectSpread(_objectSpread({}, rest), {}, {
         type: type,
-        value: defaultValues.pures
+        value: defaultValues.pures,
+        onChange: handleChange
       });
     }
   } else if (type === 'linear') {
     if (!value || _typeof(value) !== 'object') {
       return _objectSpread(_objectSpread({}, rest), {}, {
         type: type,
-        value: defaultValues.linear
+        value: defaultValues.linear,
+        onChange: handleChange
       });
     }
   } else if (Array.isArray(type)) {
@@ -56,7 +79,8 @@ export default function useColorsPicker(props) {
         type: type,
         value: type.reduce(function (all, cur) {
           return all[cur] = defaultValues[cur];
-        }, {})
+        }, {}),
+        onChange: handleChange
       });
     } else if (type.some(function (d) {
       return !value[d];
@@ -70,9 +94,13 @@ export default function useColorsPicker(props) {
       });
       return _objectSpread(_objectSpread({}, rest), {}, {
         type: type,
-        value: newValue
+        value: newValue,
+        onChange: handleChange
       });
     }
   }
-  return props;
+  return _objectSpread(_objectSpread({}, props), {}, {
+    value: localValue,
+    onChange: handleChange
+  });
 }

package/dist/ColorsPicker/hooks/useControlBlock.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 interface UsePaletteControlProps {
     value: [number, number];
-    onChange?: (value: [number, number], e: MouseEvent | React.MouseEvent, mousedownChange?: boolean) => void;
+    onChange?: (value: [number, number], e: MouseEvent | React.MouseEvent) => void;
+    onChangeComplete?: (value: [number, number]) => void;
 }
-export declare function useControlBlock({ value, onChange }: UsePaletteControlProps): {
+export declare function useControlBlock({ value, onChange, onChangeComplete, }: UsePaletteControlProps): {
     active: boolean;
     blockRef: React.RefObject<HTMLDivElement>;
     onMouseDown: (ev: React.MouseEvent) => void;

package/dist/ColorsPicker/hooks/useControlBlock.js

@@ -7,7 +7,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useRef, useState } from 'react';
 export function useControlBlock(_ref) {
   var value = _ref.value,
-    onChange = _ref.onChange;
+    onChange = _ref.onChange,
+    onChangeComplete = _ref.onChangeComplete;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     active = _useState2[0],
@@ -22,13 +23,17 @@ export function useControlBlock(_ref) {
     }
     return value / max;
   };
-  var setCurrentPosition = function setCurrentPosition(ev, mousedownChange) {
+  var setCurrentPosition = function setCurrentPosition(ev) {
     var clientX = ev.clientX,
       clientY = ev.clientY;
     var rect = blockRef.current.getBoundingClientRect();
     var newValue = [getPercentNumber(clientX - rect.x, rect.width), getPercentNumber(clientY - rect.y, rect.height)];
     if (newValue[0] !== value[0] || newValue[1] !== value[1]) {
-      onChange === null || onChange === void 0 ? void 0 : onChange(newValue, ev, mousedownChange);
+      if (ev.type === 'mouseup') {
+        onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(newValue);
+      } else {
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue, ev);
+      }
     }
   };
   function onMouseMove(ev) {
@@ -39,7 +44,10 @@ export function useControlBlock(_ref) {
       removeListener();
     }
   }
-  var removeListener = function removeListener() {
+  var removeListener = function removeListener(e) {
+    if ((e === null || e === void 0 ? void 0 : e.type) === 'mouseup') {
+      setCurrentPosition(e);
+    }
     setActive(false);
     window.removeEventListener('mousemove', onMouseMove);
     window.removeEventListener('mouseup', removeListener);
@@ -48,7 +56,7 @@ export function useControlBlock(_ref) {
   var onMouseDown = function onMouseDown(ev) {
     ev.stopPropagation();
     setActive(true);
-    setCurrentPosition(ev, true);
+    setCurrentPosition(ev);
     window.addEventListener('mousemove', onMouseMove);
     window.addEventListener('mouseup', removeListener);
     window.addEventListener('contextmenu', removeListener);

package/dist/ColorsPicker/index.js

@@ -25,7 +25,8 @@ function ColorsPicker(props) {
   var _useColorsPicker = useColorsPicker(props),
     type = _useColorsPicker.type,
     value = _useColorsPicker.value,
-    onChange = _useColorsPicker.onChange;
+    onChange = _useColorsPicker.onChange,
+    onChangeComplete = _useColorsPicker.onChangeComplete;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     visible = _useState2[0],
@@ -34,9 +35,13 @@ function ColorsPicker(props) {
     switch (type) {
       case 'pure':
         {
+          var handleChange = function handleChange(val) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(val);
+            onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(val);
+          };
           return /*#__PURE__*/_jsx(PureColorInput, {
             value: value,
-            onChange: onChange,
+            onChange: handleChange,
             onTrigger: function onTrigger() {
               return setVisible(!visible);
             }
@@ -53,9 +58,13 @@ function ColorsPicker(props) {
         }
       case 'linear':
         {
+          var _handleChange = function _handleChange(val) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(val);
+            onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(val);
+          };
           return /*#__PURE__*/_jsx(LinearColorInput, {
             value: value,
-            onChange: onChange,
+            onChange: _handleChange,
             onTrigger: function onTrigger() {
               return setVisible(!visible);
             }
@@ -74,7 +83,10 @@ function ColorsPicker(props) {
         {
           if (Array.isArray(type)) {
             var val = value;
-            var onValueChange = onChange;
+            var onValueChange = function onValueChange(val) {
+              onChange === null || onChange === void 0 ? void 0 : onChange(val);
+              onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(val);
+            };
             if (val.type === 'pure') {
               return /*#__PURE__*/_jsx(PureColorInput, {
                 value: val.pure,
@@ -126,28 +138,32 @@ function ColorsPicker(props) {
           {
             return /*#__PURE__*/_jsx(PureColorPanel, {
               value: value,
-              onChange: onChange
+              onChange: onChange,
+              onChangeComplete: onChangeComplete
             });
           }
         case 'pures':
           {
             return /*#__PURE__*/_jsx(PuresColorPanel, {
               value: value,
-              onChange: onChange
+              onChange: onChange,
+              onChangeComplete: onChangeComplete
             });
           }
         case 'linear':
           {
             return /*#__PURE__*/_jsx(LinearColorPanel, {
               value: value,
-              onChange: onChange
+              onChange: onChange,
+              onChangeComplete: onChangeComplete
             });
           }
         case 'range':
           {
             return /*#__PURE__*/_jsx(RangeColorPanel, {
               value: value,
-              onChange: onChange
+              onChange: onChange,
+              onChangeComplete: onChangeComplete
             });
           }
         default:
@@ -156,7 +172,8 @@ function ColorsPicker(props) {
               return /*#__PURE__*/_jsx(MixedPanel, {
                 type: type,
                 value: value,
-                onChange: onChange
+                onChange: onChange,
+                onChangeComplete: onChangeComplete
               });
             }
             console.error('unknown color picker type');

package/dist/ColorsPicker/interface.d.ts

@@ -33,7 +33,8 @@ export declare type ColorsPickerType = ColorType | ColorType[];
 export interface ColorsPickerProps<T extends ColorsPickerType> {
     type: T;
     value: T extends ColorType ? ColorValueMap[T] : ColorValueObj;
-    onChange: (value: T extends ColorType ? ColorValueMap[T] : ColorValueObj) => void;
+    onChange?: (value: T extends ColorType ? ColorValueMap[T] : ColorValueObj) => void;
+    onChangeComplete?: (value: T extends ColorType ? ColorValueMap[T] : ColorValueObj) => void;
 }
 export interface ColorValueMap {
     pure: string;

package/dist/ColorsPicker/style/index.less

@@ -313,6 +313,16 @@
 .pure-color-picker {
   display: flex;
   gap: 12px;
+
+  .pure-color-picker-hex {
+    font-size: 12px;
+  }
+
+  .pure-color-picker-alpha {
+    width: 64px;
+    flex-shrink: 0;
+    font-size: 12px;
+  }
 }
 
 .pure-color-picker-preview {
@@ -348,16 +358,6 @@
   }
 }
 
-.pure-color-picker-hex {
-  font-size: 12px;
-}
-
-.pure-color-picker-alpha {
-  width: 64px;
-  flex-shrink: 0;
-  font-size: 12px;
-}
-
 // 多种类型的颜色选择 Tab
 .colors-picker-tabs {
   padding: 10px 12px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/react-components",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "a react component library base on arco design",
   "license": "MIT",
   "module": "dist/index.js",