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

Comparing version 1.1.0 to 1.1.1

es/ColorPicker.js

@@ -33,35 +33,37 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
   var mergeCls = classNames("".concat(prefixCls, "-panel"), className);
-  var handleChange = function handleChange(data) {
+  var handleChange = function handleChange(data, type) {
     if (!value) {
       setColorValue(data);
     }
-    onChange === null || onChange === void 0 ? void 0 : onChange(data);
+    onChange === null || onChange === void 0 ? void 0 : onChange(data, type);
   };
-  var panelElement = useMemo(function () {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Picker, {
-      color: colorValue,
-      onChange: handleChange,
-      prefixCls: prefixCls
-    }), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-slider-container")
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-slider-group")
-    }, /*#__PURE__*/React.createElement(Slider, {
-      gradientColors: hueColor,
-      prefixCls: prefixCls,
-      color: colorValue,
-      value: "hsl(".concat(colorValue.toHsb().h, ",100%, 50%)"),
-      onChange: handleChange
-    }), /*#__PURE__*/React.createElement(Slider, {
-      type: "alpha",
-      gradientColors: ['rgba(255, 0, 4, 0) 0%', alphaColor],
-      prefixCls: prefixCls,
-      color: colorValue,
-      value: colorValue.toRgbString(),
-      onChange: handleChange
-    })), /*#__PURE__*/React.createElement(ColorBlock, {
-      color: colorValue.toRgbString(),
-      prefixCls: prefixCls
-    })));
-  }, [prefixCls, alphaColor, colorValue, handleChange]);
+  var defaultPanel = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Picker, {
+    color: colorValue,
+    onChange: handleChange,
+    prefixCls: prefixCls
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-slider-container")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-slider-group")
+  }, /*#__PURE__*/React.createElement(Slider, {
+    gradientColors: hueColor,
+    prefixCls: prefixCls,
+    color: colorValue,
+    value: "hsl(".concat(colorValue.toHsb().h, ",100%, 50%)"),
+    onChange: function onChange(color) {
+      return handleChange(color, 'hue');
+    }
+  }), /*#__PURE__*/React.createElement(Slider, {
+    type: "alpha",
+    gradientColors: ['rgba(255, 0, 4, 0) 0%', alphaColor],
+    prefixCls: prefixCls,
+    color: colorValue,
+    value: colorValue.toRgbString(),
+    onChange: function onChange(color) {
+      return handleChange(color, 'alpha');
+    }
+  })), /*#__PURE__*/React.createElement(ColorBlock, {
+    color: colorValue.toRgbString(),
+    prefixCls: prefixCls
+  })));
   return /*#__PURE__*/React.createElement("div", {
@@ -71,3 +73,3 @@ className: mergeCls,
     ref: ref
-  }, typeof panelRender === 'function' ? panelRender(panelElement) : panelElement);
+  }, typeof panelRender === 'function' ? panelRender(defaultPanel) : defaultPanel);
 });

es/hooks/useColorDrag.js

@@ -39,3 +39,3 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
     }
-  }, [color]);
+  }, [color, containerRef]);
   useEffect(function () {
@@ -42,0 +42,0 @@ return function () {

es/interface.d.ts

@@ -29,3 +29,3 @@ import type { Color } from './color';
     prefixCls?: string;
-    onChange?: (color: Color) => void;
+    onChange?: (color: Color, type?: HsbaColorType) => void;
 }

lib/ColorPicker.js

@@ -43,35 +43,37 @@ "use strict";
   var mergeCls = (0, _classnames.default)("".concat(prefixCls, "-panel"), className);
-  var handleChange = function handleChange(data) {
+  var handleChange = function handleChange(data, type) {
     if (!value) {
       setColorValue(data);
     }
-    onChange === null || onChange === void 0 ? void 0 : onChange(data);
+    onChange === null || onChange === void 0 ? void 0 : onChange(data, type);
   };
-  var panelElement = (0, _react.useMemo)(function () {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Picker.default, {
-      color: colorValue,
-      onChange: handleChange,
-      prefixCls: prefixCls
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-slider-container")
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-slider-group")
-    }, /*#__PURE__*/_react.default.createElement(_Slider.default, {
-      gradientColors: hueColor,
-      prefixCls: prefixCls,
-      color: colorValue,
-      value: "hsl(".concat(colorValue.toHsb().h, ",100%, 50%)"),
-      onChange: handleChange
-    }), /*#__PURE__*/_react.default.createElement(_Slider.default, {
-      type: "alpha",
-      gradientColors: ['rgba(255, 0, 4, 0) 0%', alphaColor],
-      prefixCls: prefixCls,
-      color: colorValue,
-      value: colorValue.toRgbString(),
-      onChange: handleChange
-    })), /*#__PURE__*/_react.default.createElement(_ColorBlock.default, {
-      color: colorValue.toRgbString(),
-      prefixCls: prefixCls
-    })));
-  }, [prefixCls, alphaColor, colorValue, handleChange]);
+  var defaultPanel = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Picker.default, {
+    color: colorValue,
+    onChange: handleChange,
+    prefixCls: prefixCls
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-slider-container")
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-slider-group")
+  }, /*#__PURE__*/_react.default.createElement(_Slider.default, {
+    gradientColors: hueColor,
+    prefixCls: prefixCls,
+    color: colorValue,
+    value: "hsl(".concat(colorValue.toHsb().h, ",100%, 50%)"),
+    onChange: function onChange(color) {
+      return handleChange(color, 'hue');
+    }
+  }), /*#__PURE__*/_react.default.createElement(_Slider.default, {
+    type: "alpha",
+    gradientColors: ['rgba(255, 0, 4, 0) 0%', alphaColor],
+    prefixCls: prefixCls,
+    color: colorValue,
+    value: colorValue.toRgbString(),
+    onChange: function onChange(color) {
+      return handleChange(color, 'alpha');
+    }
+  })), /*#__PURE__*/_react.default.createElement(_ColorBlock.default, {
+    color: colorValue.toRgbString(),
+    prefixCls: prefixCls
+  })));
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -81,4 +83,4 @@ className: mergeCls,
     ref: ref
-  }, typeof panelRender === 'function' ? panelRender(panelElement) : panelElement);
+  }, typeof panelRender === 'function' ? panelRender(defaultPanel) : defaultPanel);
 });
 exports.default = _default;

lib/hooks/useColorDrag.js

@@ -46,3 +46,3 @@ "use strict";
     }
-  }, [color]);
+  }, [color, containerRef]);
   (0, _react.useEffect)(function () {
@@ -49,0 +49,0 @@ return function () {

lib/interface.d.ts

@@ -29,3 +29,3 @@ import type { Color } from './color';
     prefixCls?: string;
-    onChange?: (color: Color) => void;
+    onChange?: (color: Color, type?: HsbaColorType) => void;
 }

package.json

 {
   "name": "@rc-component/color-picker",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "React Color Picker",
@@ -5,0 +5,0 @@ "keywords": [

No alert changes

Improved metrics

Total package byte prevSize

71293

increased by0.08%

Lines of code

1589

increased by0.25%

No dependency changes