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

Comparing version 1.1.1 to 1.2.0

es/ColorPicker.d.ts

@@ -11,4 +11,6 @@ import type { CSSProperties } from 'react';
     panelRender?: (panel: React.ReactElement) => React.ReactElement;
+    /** Disabled alpha selection */
+    disabledAlpha?: boolean;
 }
 declare const _default: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;

es/ColorPicker.js

@@ -0,1 +1,3 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
@@ -16,5 +18,10 @@ import React, { forwardRef, useMemo } from 'react';
     onChange = props.onChange,
+    onChangeComplete = props.onChangeComplete,
     className = props.className,
     style = props.style,
-    panelRender = props.panelRender;
+    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;
   var _useColorState = useColorState(defaultColor, {
@@ -33,3 +40,8 @@ value: value,
   }, [colorValue]);
-  var mergeCls = classNames("".concat(prefixCls, "-panel"), className);
+  var mergeCls = classNames("".concat(prefixCls, "-panel"), className, _defineProperty({}, "".concat(prefixCls, "-panel-disabled"), disabled));
+  var basicProps = {
+    prefixCls: prefixCls,
+    onChangeComplete: onChangeComplete,
+    disabled: disabled
+  };
   var handleChange = function handleChange(data, type) {
@@ -41,13 +53,11 @@ if (!value) {
   };
-  var defaultPanel = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Picker, {
+  var defaultPanel = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Picker, _extends({
     color: colorValue,
-    onChange: handleChange,
-    prefixCls: prefixCls
-  }), /*#__PURE__*/React.createElement("div", {
+    onChange: handleChange
+  }, basicProps)), /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-slider-container")
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-slider-group")
-  }, /*#__PURE__*/React.createElement(Slider, {
+    className: classNames("".concat(prefixCls, "-slider-group"), _defineProperty({}, "".concat(prefixCls, "-slider-group-disabled-alpha"), disabledAlpha))
+  }, /*#__PURE__*/React.createElement(Slider, _extends({
     gradientColors: hueColor,
-    prefixCls: prefixCls,
     color: colorValue,
@@ -58,6 +68,5 @@ value: "hsl(".concat(colorValue.toHsb().h, ",100%, 50%)"),
     }
-  }), /*#__PURE__*/React.createElement(Slider, {
+  }, basicProps)), !disabledAlpha && /*#__PURE__*/React.createElement(Slider, _extends({
     type: "alpha",
     gradientColors: ['rgba(255, 0, 4, 0) 0%', alphaColor],
-    prefixCls: prefixCls,
     color: colorValue,
@@ -68,3 +77,3 @@ value: colorValue.toRgbString(),
     }
-  })), /*#__PURE__*/React.createElement(ColorBlock, {
+  }, basicProps))), /*#__PURE__*/React.createElement(ColorBlock, {
     color: colorValue.toRgbString(),
@@ -71,0 +80,0 @@ prefixCls: prefixCls

es/components/Picker.js

@@ -11,3 +11,5 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
     onChange = _ref.onChange,
-    prefixCls = _ref.prefixCls;
+    prefixCls = _ref.prefixCls,
+    onChangeComplete = _ref.onChangeComplete,
+    disabled = _ref.disabled;
   var pickerRef = useRef();
@@ -29,3 +31,5 @@ var transformRef = useRef();
         }));
-      }
+      },
+      onDragChangeComplete: onChangeComplete,
+      disabledDrag: disabled
     }),
@@ -32,0 +36,0 @@ _useColorDrag2 = _slicedToArray(_useColorDrag, 2),

es/components/Slider.js

@@ -18,2 +18,4 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
     onChange = _ref.onChange,
+    onChangeComplete = _ref.onChangeComplete,
+    disabled = _ref.disabled,
     prefixCls = _ref.prefixCls;
@@ -38,3 +40,7 @@ var sliderRef = useRef();
       },
-      direction: 'x'
+      onDragChangeComplete: function onDragChangeComplete() {
+        onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(type);
+      },
+      direction: 'x',
+      disabledDrag: disabled
     }),
@@ -41,0 +47,0 @@ _useColorDrag2 = _slicedToArray(_useColorDrag, 2),

es/hooks/useColorDrag.d.ts

@@ -12,5 +12,8 @@ import type { Color } from '../color';
     onDragChange?: (offset: TransformOffset) => void;
+    onDragChangeComplete?: () => void;
     calculate?: (containerRef: React.RefObject<HTMLDivElement>) => TransformOffset;
+    /** Disabled drag */
+    disabledDrag?: boolean;
 }
 declare function useColorDrag(props: useColorDragProps): [TransformOffset, EventHandle];
 export default useColorDrag;

es/hooks/useColorDrag.js

@@ -18,4 +18,6 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
     onDragChange = props.onDragChange,
+    onDragChangeComplete = props.onDragChangeComplete,
     calculate = props.calculate,
-    color = props.color;
+    color = props.color,
+    disabledDrag = props.disabledDrag;
   var _useState = useState(offset || {
@@ -92,4 +94,8 @@ x: 0,
     mouseUpRef.current = null;
+    onDragChangeComplete === null || onDragChangeComplete === void 0 ? void 0 : onDragChangeComplete();
   };
   var onDragStart = function onDragStart(e) {
+    if (disabledDrag) {
+      return;
+    }
     updateOffset(e);
@@ -96,0 +102,0 @@ dragRef.current.flag = true;

es/interface.d.ts

 import type { Color } from './color';
-export declare type TriggerPlacement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight';
 export interface HSB {
@@ -25,7 +24,8 @@ h: number | string;
 };
-export declare type TriggerType = 'click' | 'hover';
 export interface BaseColorPickerProps {
     color?: Color;
     prefixCls?: string;
+    disabled?: boolean;
     onChange?: (color: Color, type?: HsbaColorType) => void;
+    onChangeComplete?: (type?: HsbaColorType) => void;
 }

lib/ColorPicker.d.ts

@@ -11,4 +11,6 @@ import type { CSSProperties } from 'react';
     panelRender?: (panel: React.ReactElement) => React.ReactElement;
+    /** Disabled alpha selection */
+    disabledAlpha?: boolean;
 }
 declare const _default: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;

lib/ColorPicker.js

@@ -9,2 +9,4 @@ "use strict";
 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"));
@@ -27,5 +29,10 @@ var _react = _interopRequireWildcard(require("react"));
     onChange = props.onChange,
+    onChangeComplete = props.onChangeComplete,
     className = props.className,
     style = props.style,
-    panelRender = props.panelRender;
+    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;
   var _useColorState = (0, _useColorState3.default)(_util.defaultColor, {
@@ -44,3 +51,8 @@ value: value,
   }, [colorValue]);
-  var mergeCls = (0, _classnames.default)("".concat(prefixCls, "-panel"), className);
+  var mergeCls = (0, _classnames.default)("".concat(prefixCls, "-panel"), className, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-panel-disabled"), disabled));
+  var basicProps = {
+    prefixCls: prefixCls,
+    onChangeComplete: onChangeComplete,
+    disabled: disabled
+  };
   var handleChange = function handleChange(data, type) {
@@ -52,13 +64,11 @@ if (!value) {
   };
-  var defaultPanel = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Picker.default, {
+  var defaultPanel = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Picker.default, (0, _extends2.default)({
     color: colorValue,
-    onChange: handleChange,
-    prefixCls: prefixCls
-  }), /*#__PURE__*/_react.default.createElement("div", {
+    onChange: handleChange
+  }, basicProps)), /*#__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, {
+    className: (0, _classnames.default)("".concat(prefixCls, "-slider-group"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-slider-group-disabled-alpha"), disabledAlpha))
+  }, /*#__PURE__*/_react.default.createElement(_Slider.default, (0, _extends2.default)({
     gradientColors: hueColor,
-    prefixCls: prefixCls,
     color: colorValue,
@@ -69,6 +79,5 @@ value: "hsl(".concat(colorValue.toHsb().h, ",100%, 50%)"),
     }
-  }), /*#__PURE__*/_react.default.createElement(_Slider.default, {
+  }, basicProps)), !disabledAlpha && /*#__PURE__*/_react.default.createElement(_Slider.default, (0, _extends2.default)({
     type: "alpha",
     gradientColors: ['rgba(255, 0, 4, 0) 0%', alphaColor],
-    prefixCls: prefixCls,
     color: colorValue,
@@ -79,3 +88,3 @@ value: colorValue.toRgbString(),
     }
-  })), /*#__PURE__*/_react.default.createElement(_ColorBlock.default, {
+  }, basicProps))), /*#__PURE__*/_react.default.createElement(_ColorBlock.default, {
     color: colorValue.toRgbString(),
@@ -82,0 +91,0 @@ prefixCls: prefixCls

lib/components/Picker.js

@@ -21,3 +21,5 @@ "use strict";
     onChange = _ref.onChange,
-    prefixCls = _ref.prefixCls;
+    prefixCls = _ref.prefixCls,
+    onChangeComplete = _ref.onChangeComplete,
+    disabled = _ref.disabled;
   var pickerRef = (0, _react.useRef)();
@@ -39,3 +41,5 @@ var transformRef = (0, _react.useRef)();
         }));
-      }
+      },
+      onDragChangeComplete: onChangeComplete,
+      disabledDrag: disabled
     }),
@@ -42,0 +46,0 @@ _useColorDrag2 = (0, _slicedToArray2.default)(_useColorDrag, 2),

lib/components/Slider.js

@@ -28,2 +28,4 @@ "use strict";
     onChange = _ref.onChange,
+    onChangeComplete = _ref.onChangeComplete,
+    disabled = _ref.disabled,
     prefixCls = _ref.prefixCls;
@@ -48,3 +50,7 @@ var sliderRef = (0, _react.useRef)();
       },
-      direction: 'x'
+      onDragChangeComplete: function onDragChangeComplete() {
+        onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(type);
+      },
+      direction: 'x',
+      disabledDrag: disabled
     }),
@@ -51,0 +57,0 @@ _useColorDrag2 = (0, _slicedToArray2.default)(_useColorDrag, 2),

lib/hooks/useColorDrag.d.ts

@@ -12,5 +12,8 @@ import type { Color } from '../color';
     onDragChange?: (offset: TransformOffset) => void;
+    onDragChangeComplete?: () => void;
     calculate?: (containerRef: React.RefObject<HTMLDivElement>) => TransformOffset;
+    /** Disabled drag */
+    disabledDrag?: boolean;
 }
 declare function useColorDrag(props: useColorDragProps): [TransformOffset, EventHandle];
 export default useColorDrag;

lib/hooks/useColorDrag.js

@@ -25,4 +25,6 @@ "use strict";
     onDragChange = props.onDragChange,
+    onDragChangeComplete = props.onDragChangeComplete,
     calculate = props.calculate,
-    color = props.color;
+    color = props.color,
+    disabledDrag = props.disabledDrag;
   var _useState = (0, _react.useState)(offset || {
@@ -99,4 +101,8 @@ x: 0,
     mouseUpRef.current = null;
+    onDragChangeComplete === null || onDragChangeComplete === void 0 ? void 0 : onDragChangeComplete();
   };
   var onDragStart = function onDragStart(e) {
+    if (disabledDrag) {
+      return;
+    }
     updateOffset(e);
@@ -103,0 +109,0 @@ dragRef.current.flag = true;

lib/interface.d.ts

 import type { Color } from './color';
-export declare type TriggerPlacement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight';
 export interface HSB {
@@ -25,7 +24,8 @@ h: number | string;
 };
-export declare type TriggerType = 'click' | 'hover';
 export interface BaseColorPickerProps {
     color?: Color;
     prefixCls?: string;
+    disabled?: boolean;
     onChange?: (color: Color, type?: HsbaColorType) => void;
+    onChangeComplete?: (type?: HsbaColorType) => void;
 }

package.json

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

README.md

@@ -54,3 +54,6 @@ # @rc-component/color-picker
 | defaultValue | Default value of color | string \| `Color` | - |
-| onChange | Callback when `value` is changed | `(value: Color, hex: string) => void` | - |
+| onChange | Callback when `value` is changed | `(value: Color, type: hue \| alpha) => void` | - |
+| onChangeComplete | Callback when `drag` is stop | `(type: hue \| alpha) => void` | - |
+| disabled | Disabled ColorPicker | boolean | false |
+| disabledAlpha | Disabled alpha slider | boolean | false |
 | panelRender | Custom panel render | `(panel: React.ReactElement) => React.ReactElement` | - |
@@ -57,0 +60,0 @@

No alert changes

Improved metrics

Total package byte prevSize

74543

increased by4.56%

Lines of code

1649

increased by3.78%

Number of lines in readme file

82

increased by3.8%

No dependency changes