@easyv/react-components 0.4.7 → 0.4.8

package/dist/ColorsPicker/Panel.js

@@ -34,44 +34,61 @@ export default function Panel(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     color = _useState2[0],
     setColor = _useState2[1];
+  var _useState3 = useState(function () {
+      return color.hsv.h;
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hue = _useState4[0],
+    setHue = _useState4[1];
   useEffect(function () {
     if (propsColor) {
+      var hsv = tinycolor(propsColor).toHsv();
       setColor({
-        hsv: tinycolor(propsColor).toHsv(),
+        hsv: hsv,
         alpha: tinycolor(propsColor).getAlpha()
       });
+      // 只有当饱和度和亮度都不为 0 时，才从 props 更新 hue
+      // 否则保留当前内存中的 hue，避免边缘跳动
+      if (hsv.s !== 0 && hsv.v !== 0) {
+        setHue(hsv.h);
+      }
     }
   }, [propsColor]);
   var _color$hsv = color.hsv,
-    h = _color$hsv.h,
     s = _color$hsv.s,
     v = _color$hsv.v;
-  var _tinycolor$toRgb = tinycolor(color.hsv).toRgb(),
+  var h = hue;
+  var colorHsv = {
+    h: h,
+    s: s,
+    v: v
+  };
+  var _tinycolor$toRgb = tinycolor(colorHsv).toRgb(),
     r = _tinycolor$toRgb.r,
     g = _tinycolor$toRgb.g,
     b = _tinycolor$toRgb.b;
-  var colorString = tinycolor(color.hsv).setAlpha(color.alpha).toRgbString();
-  var hexString = tinycolor(color.hsv).toHexString();
+  var colorString = tinycolor(colorHsv).setAlpha(color.alpha).toRgbString();
+  var hexString = tinycolor(colorHsv).toHexString();
   var hexRef = useRef(null);
   var handleHsvChange = function handleHsvChange(hsv, complete) {
+    setHue(hsv.h);
     setColor(_objectSpread(_objectSpread({}, color), {}, {
       hsv: hsv
     }));
+    var colorStr = 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());
+      onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(colorStr);
     } else {
-      onChange === null || onChange === void 0 ? void 0 : onChange(tinycolor(_objectSpread(_objectSpread({}, hsv), {}, {
-        a: color.alpha
-      })).toRgbString());
+      onChange === null || onChange === void 0 ? void 0 : onChange(colorStr);
     }
   };
   var handleAlphaChange = function handleAlphaChange(alpha, complete) {
     setColor(_objectSpread(_objectSpread({}, color), {}, {
       alpha: alpha
     }));
-    var value = tinycolor(_objectSpread(_objectSpread({}, color.hsv), {}, {
+    var value = tinycolor(_objectSpread(_objectSpread({}, colorHsv), {}, {
       a: alpha
     })).toRgbString();
     if (complete === 'all') {
@@ -85,9 +102,11 @@ export default function Panel(_ref) {
   };
   var handleHexChange = function handleHexChange(val) {
     var hexVal = getHexValue(val);
-    var hsv = tinycolor(hexVal).toHsv();
-    var hexString = tinycolor(hsv).toHexString();
+    var tc = tinycolor(hexVal);
+    var hsv = tc.toHsv();
+    var hexString = tc.toHexString();
     hexRef.current.forceUpdate(hexString.slice(1).toUpperCase());
+    setHue(hsv.h);
     setColor(_objectSpread(_objectSpread({}, color), {}, {
       hsv: hsv
     }));
@@ -96,11 +115,13 @@ export default function Panel(_ref) {
     })).toRgbString());
   };
   var handleRgbChange = function handleRgbChange(rgb) {
-    var hsv = tinycolor(_objectSpread({
+    var tc = tinycolor(_objectSpread({
       r: r,
       g: g,
       b: b
-    }, rgb)).toHsv();
+    }, rgb));
+    var hsv = tc.toHsv();
+    setHue(hsv.h);
     setColor(_objectSpread(_objectSpread({}, color), {}, {
       hsv: hsv
     }));
@@ -108,21 +129,26 @@ export default function Panel(_ref) {
       a: color.alpha
     })).toRgbString());
   };
-  var handleColorChange = function handleColorChange(color) {
+  var handleColorChange = function handleColorChange(colorStr) {
+    var tc = tinycolor(colorStr);
+    var hsv = tc.toHsv();
+    setHue(hsv.h);
     setColor({
-      hsv: tinycolor(color).toHsv(),
+      hsv: hsv,
       alpha: 1
     });
-    onChangeWithComplete(color);
+    onChangeWithComplete(colorStr);
   };
-  var onChangeWithComplete = function onChangeWithComplete(color) {
-    onChange === null || onChange === void 0 ? void 0 : onChange(color);
-    onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(color);
+  var onChangeWithComplete = function onChangeWithComplete(colorStr) {
+    onChange === null || onChange === void 0 ? void 0 : onChange(colorStr);
+    onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(colorStr);
   };
   return /*#__PURE__*/_jsxs("div", {
     className: "colors-picker-panel",
     children: [/*#__PURE__*/_jsx(Palette, {
-      color: color,
+      color: _objectSpread(_objectSpread({}, color), {}, {
+        hsv: colorHsv
+      }),
       onChange: function onChange(newS, newV) {
         return handleHsvChange({
           h: h,
@@ -153,7 +179,9 @@ export default function Panel(_ref) {
         className: "colors-picker-control-bars",
         children: [/*#__PURE__*/_jsx(ControlBar, {
           type: "hue",
-          color: color,
+          color: _objectSpread(_objectSpread({}, color), {}, {
+            hsv: colorHsv
+          }),
           onChange: function onChange(newH) {
             return handleHsvChange({
               h: newH,
@@ -170,7 +198,9 @@ export default function Panel(_ref) {
           }
         }), !disabledAlpha && /*#__PURE__*/_jsx(ControlBar, {
           type: "alpha",
-          color: color,
+          color: _objectSpread(_objectSpread({}, color), {}, {
+            hsv: colorHsv
+          }),
           onChange: handleAlphaChange,
           onChangeComplete: function onChangeComplete(val) {
             return handleAlphaChange(val, true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/react-components",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "description": "a react component library base on arco design",
   "license": "MIT",
   "sideEffects": [
@@ -101,7 +101,7 @@
   },
   "packageManager": "pnpm@8.12.1",
   "engines": {
-    "node": ">=14.17.0"
+    "node": ">=14.17.0 <24.0.0"
   },
   "publishConfig": {
     "access": "public",