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

Comparing version 1.0.0-alpha.5 to 1.0.0-alpha.6

es/ColorPicker.d.ts

 import type { BuildInPlacements, TriggerProps } from '@rc-component/trigger';
-import type { CSSProperties, FC } from 'react';
-import React from 'react';
+import React, { CSSProperties, FC } from 'react';
 import { TriggerPlacement, TriggerType } from './interface';
@@ -5,0 +4,0 @@ import type { PanelProps } from './Panel';

es/ColorPicker.js

@@ -7,3 +7,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import useMergedState from "rc-util/es/hooks/useMergedState";
-import React from 'react';
+import React, { useRef } from 'react';
 import placements from "./components/placements";
@@ -39,8 +39,25 @@ import Panel from "./Panel";
     setOpenValue = _useMergedState2[1];
+  var dragRef = useRef(false);
   return /*#__PURE__*/React.createElement(Trigger, _extends({
     action: [trigger],
     popupVisible: openValue,
-    popup: /*#__PURE__*/React.createElement(Panel, props),
+    popup: /*#__PURE__*/React.createElement(Panel, _extends({}, props, {
+      onDragStart: function onDragStart() {
+        return dragRef.current = true;
+      },
+      onDragStop: function onDragStop() {
+        return setTimeout(function () {
+          return dragRef.current = false;
+        }), 0;
+      }
+    })),
     popupPlacement: placement,
-    onPopupVisibleChange: setOpenValue,
+    onPopupVisibleChange: function onPopupVisibleChange(visible) {
+      if (!dragRef.current) {
+        setOpenValue(visible);
+      }
+      if (dragRef.current) {
+        dragRef.current = !dragRef.current;
+      }
+    },
     popupClassName: classNames === null || classNames === void 0 ? void 0 : classNames.popup,
@@ -47,0 +64,0 @@ popupStyle: styles === null || styles === void 0 ? void 0 : styles.popup,

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,
+    onDragStart = _ref.onDragStart,
+    onDragStop = _ref.onDragStop;
   var pickerRef = useRef();
@@ -29,3 +31,5 @@ var transformRef = useRef();
         }));
-      }
+      },
+      onDragStart: onDragStart,
+      onDragStop: onDragStop
     }),
@@ -32,0 +36,0 @@ _useColorDrag2 = _slicedToArray(_useColorDrag, 2),

es/components/Slider.js

@@ -18,3 +18,5 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
     onChange = _ref.onChange,
-    prefixCls = _ref.prefixCls;
+    prefixCls = _ref.prefixCls,
+    onDragStart = _ref.onDragStart,
+    onDragStop = _ref.onDragStop;
   var sliderRef = useRef();
@@ -38,3 +40,5 @@ var transformRef = useRef();
       },
-      direction: 'x'
+      direction: 'x',
+      onDragStart: onDragStart,
+      onDragStop: onDragStop
     }),
@@ -41,0 +45,0 @@ _useColorDrag2 = _slicedToArray(_useColorDrag, 2),

es/hooks/useColorDrag.d.ts

@@ -14,4 +14,6 @@ /// <reference types="react" />
     calculate?: (containerRef: React.RefObject<HTMLDivElement>) => TransformOffset;
+    onDragStart?: () => void;
+    onDragStop?: () => void;
 }
 declare function useColorDrag(props: useColorDragProps): [TransformOffset, EventHandle];
 export default useColorDrag;

es/hooks/useColorDrag.js

@@ -19,3 +19,5 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
     calculate = props.calculate,
-    color = props.color;
+    color = props.color,
+    handleDragStart = props.onDragStart,
+    handleDragEnd = props.onDragStop;
   var _useState = useState(offset || {
@@ -92,2 +94,3 @@ x: 0,
     mouseUpRef.current = null;
+    handleDragEnd === null || handleDragEnd === void 0 ? void 0 : handleDragEnd();
   };
@@ -103,2 +106,3 @@ var onDragStart = function onDragStart(e) {
     mouseUpRef.current = onDragStop;
+    handleDragStart === null || handleDragStart === void 0 ? void 0 : handleDragStart();
   };
@@ -105,0 +109,0 @@ return [offsetValue, onDragStart];

es/interface.d.ts

@@ -30,2 +30,4 @@ import type { Color } from './color';
     onChange?: (color: Color) => void;
+    onDragStart?: () => void;
+    onDragStop?: () => void;
 }

es/Panel.js

@@ -15,3 +15,5 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
     onChange = _ref.onChange,
-    panelRender = _ref.panelRender;
+    panelRender = _ref.panelRender,
+    onDragStart = _ref.onDragStart,
+    onDragStop = _ref.onDragStop;
   var _useColorState = useColorState(defaultColor, {
@@ -40,3 +42,5 @@ value: value,
       onChange: handleChange,
-      prefixCls: prefixCls
+      prefixCls: prefixCls,
+      onDragStart: onDragStart,
+      onDragStop: onDragStop
     }), /*#__PURE__*/React.createElement("div", {
@@ -54,3 +58,5 @@ className: "".concat(prefixCls, "-slider-container")
       value: "hsl(".concat(colorValue.toHsb().h, ",100%, 50%)"),
-      onChange: handleChange
+      onChange: handleChange,
+      onDragStart: onDragStart,
+      onDragStop: onDragStop
     }), /*#__PURE__*/React.createElement(Slider, {
@@ -62,3 +68,5 @@ type: "alpha",
       value: colorValue.toRgbString(),
-      onChange: handleChange
+      onChange: handleChange,
+      onDragStart: onDragStart,
+      onDragStop: onDragStop
     }))));
@@ -65,0 +73,0 @@ }, [prefixCls, alphaColor, colorValue, handleChange]);

lib/ColorPicker.d.ts

 import type { BuildInPlacements, TriggerProps } from '@rc-component/trigger';
-import type { CSSProperties, FC } from 'react';
-import React from 'react';
+import React, { CSSProperties, FC } from 'react';
 import { TriggerPlacement, TriggerType } from './interface';
@@ -5,0 +4,0 @@ import type { PanelProps } from './Panel';

lib/ColorPicker.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
@@ -13,3 +14,3 @@ value: true
 var _useMergedState3 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _placements = _interopRequireDefault(require("./components/placements"));
@@ -19,2 +20,4 @@ var _Panel = _interopRequireDefault(require("./Panel"));
 var _excluded = ["open", "disabled", "trigger", "children", "onOpenChange", "placement", "classNames", "styles", "prefixCls", "builtinPlacements", "motion"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var ColorPicker = function ColorPicker(props) {
@@ -47,8 +50,25 @@ var open = props.open,
     setOpenValue = _useMergedState2[1];
+  var dragRef = (0, _react.useRef)(false);
   return /*#__PURE__*/_react.default.createElement(_trigger.default, (0, _extends2.default)({
     action: [trigger],
     popupVisible: openValue,
-    popup: /*#__PURE__*/_react.default.createElement(_Panel.default, props),
+    popup: /*#__PURE__*/_react.default.createElement(_Panel.default, (0, _extends2.default)({}, props, {
+      onDragStart: function onDragStart() {
+        return dragRef.current = true;
+      },
+      onDragStop: function onDragStop() {
+        return setTimeout(function () {
+          return dragRef.current = false;
+        }), 0;
+      }
+    })),
     popupPlacement: placement,
-    onPopupVisibleChange: setOpenValue,
+    onPopupVisibleChange: function onPopupVisibleChange(visible) {
+      if (!dragRef.current) {
+        setOpenValue(visible);
+      }
+      if (dragRef.current) {
+        dragRef.current = !dragRef.current;
+      }
+    },
     popupClassName: classNames === null || classNames === void 0 ? void 0 : classNames.popup,
@@ -55,0 +75,0 @@ popupStyle: styles === null || styles === void 0 ? void 0 : styles.popup,

lib/components/Picker.js

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

lib/components/Slider.js

@@ -28,3 +28,5 @@ "use strict";
     onChange = _ref.onChange,
-    prefixCls = _ref.prefixCls;
+    prefixCls = _ref.prefixCls,
+    onDragStart = _ref.onDragStart,
+    onDragStop = _ref.onDragStop;
   var sliderRef = (0, _react.useRef)();
@@ -48,3 +50,5 @@ var transformRef = (0, _react.useRef)();
       },
-      direction: 'x'
+      direction: 'x',
+      onDragStart: onDragStart,
+      onDragStop: onDragStop
     }),
@@ -51,0 +55,0 @@ _useColorDrag2 = (0, _slicedToArray2.default)(_useColorDrag, 2),

lib/hooks/useColorDrag.d.ts

@@ -14,4 +14,6 @@ /// <reference types="react" />
     calculate?: (containerRef: React.RefObject<HTMLDivElement>) => TransformOffset;
+    onDragStart?: () => void;
+    onDragStop?: () => void;
 }
 declare function useColorDrag(props: useColorDragProps): [TransformOffset, EventHandle];
 export default useColorDrag;

lib/hooks/useColorDrag.js

@@ -26,3 +26,5 @@ "use strict";
     calculate = props.calculate,
-    color = props.color;
+    color = props.color,
+    handleDragStart = props.onDragStart,
+    handleDragEnd = props.onDragStop;
   var _useState = (0, _react.useState)(offset || {
@@ -99,2 +101,3 @@ x: 0,
     mouseUpRef.current = null;
+    handleDragEnd === null || handleDragEnd === void 0 ? void 0 : handleDragEnd();
   };
@@ -110,2 +113,3 @@ var onDragStart = function onDragStart(e) {
     mouseUpRef.current = onDragStop;
+    handleDragStart === null || handleDragStart === void 0 ? void 0 : handleDragStart();
   };
@@ -112,0 +116,0 @@ return [offsetValue, onDragStart];

lib/interface.d.ts

@@ -30,2 +30,4 @@ import type { Color } from './color';
     onChange?: (color: Color) => void;
+    onDragStart?: () => void;
+    onDragStop?: () => void;
 }

lib/Panel.js

@@ -25,3 +25,5 @@ "use strict";
     onChange = _ref.onChange,
-    panelRender = _ref.panelRender;
+    panelRender = _ref.panelRender,
+    onDragStart = _ref.onDragStart,
+    onDragStop = _ref.onDragStop;
   var _useColorState = (0, _useColorState3.default)(_util.defaultColor, {
@@ -50,3 +52,5 @@ value: value,
       onChange: handleChange,
-      prefixCls: prefixCls
+      prefixCls: prefixCls,
+      onDragStart: onDragStart,
+      onDragStop: onDragStop
     }), /*#__PURE__*/_react.default.createElement("div", {
@@ -64,3 +68,5 @@ className: "".concat(prefixCls, "-slider-container")
       value: "hsl(".concat(colorValue.toHsb().h, ",100%, 50%)"),
-      onChange: handleChange
+      onChange: handleChange,
+      onDragStart: onDragStart,
+      onDragStop: onDragStop
     }), /*#__PURE__*/_react.default.createElement(_Slider.default, {
@@ -72,3 +78,5 @@ type: "alpha",
       value: colorValue.toRgbString(),
-      onChange: handleChange
+      onChange: handleChange,
+      onDragStart: onDragStart,
+      onDragStop: onDragStop
     }))));
@@ -75,0 +83,0 @@ }, [prefixCls, alphaColor, colorValue, handleChange]);

package.json

 {
   "name": "@rc-component/color-picker",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.6",
   "description": "React Color Picker",
@@ -5,0 +5,0 @@ "keywords": [

No alert changes

Improved metrics

Total package byte prevSize

81807

increased by5.03%

Lines of code

1972

increased by4.56%

No dependency changes