rc-picker - npm Package Compare versions

Comparing version 0.0.1-alpha.11 to 0.0.1-alpha.12

es/PanelContext.d.ts

@@ -10,4 +10,5 @@ import * as React from 'react';
     hideHeader?: boolean;
+    panelRef?: React.Ref<HTMLDivElement>;
 }
 declare const PanelContext: React.Context<PanelContextProps>;
 export default PanelContext;

es/Picker.js

@@ -119,4 +119,7 @@ "use strict";
 
-  var formatList = miscUtil_1.toArray(uiUtil_1.getDefaultFormat(format, picker, showTime, use12Hours)); // Real value
+  var formatList = miscUtil_1.toArray(uiUtil_1.getDefaultFormat(format, picker, showTime, use12Hours)); // Panel ref
 
+  var panelDivRef = React.useRef(null);
+  var inputDivRef = React.useRef(null); // Real value
+
   var _React$useState = React.useState(function () {
@@ -337,4 +340,14 @@ if (value !== undefined) {
     }
-  }, [mergedValue]); // ============================= Panel =============================
+  }, [mergedValue]); // Global click handler
 
+  React.useEffect(function () {
+    return uiUtil_1.addGlobalClickEvent(function (_ref) {
+      var target = _ref.target;
+
+      if (mergedOpen && panelDivRef.current && !panelDivRef.current.contains(target) && inputDivRef.current && !inputDivRef.current.contains(target) && onOpenChange) {
+        onOpenChange(false);
+      }
+    });
+  }); // ============================= Panel =============================
+
   var panelProps = _objectSpread({}, props, {
@@ -381,3 +394,4 @@ className: undefined,
       operationRef: operationRef,
-      hideHeader: picker === 'time'
+      hideHeader: picker === 'time',
+      panelRef: panelDivRef
     }
@@ -397,3 +411,4 @@ }, React.createElement("div", {
   }, React.createElement("div", {
-    className: "".concat(prefixCls, "-input")
+    className: "".concat(prefixCls, "-input"),
+    ref: inputDivRef
   }, React.createElement("input", {
@@ -400,0 +415,0 @@ disabled: disabled,

es/PickerPanel.js

@@ -94,3 +94,4 @@ "use strict";
   var _React$useContext = React.useContext(PanelContext_1.default),
-      operationRef = _React$useContext.operationRef;
+      operationRef = _React$useContext.operationRef,
+      panelDivRef = _React$useContext.panelRef;
 
@@ -345,3 +346,4 @@ var _React$useContext2 = React.useContext(RangeContext_1.default),
     onBlur: onInternalBlur,
-    onMouseDown: onMouseDown
+    onMouseDown: onMouseDown,
+    ref: panelDivRef
   }, panelNode, extraFooter || todayNode || extraSelectionNode ? React.createElement("div", {
@@ -348,0 +350,0 @@ className: "".concat(prefixCls, "-footer")

es/utils/uiUtil.d.ts

@@ -14,2 +14,5 @@ /// <reference types="react" />
 export declare function getInputSize(picker: PickerMode | undefined, format: string): number;
+declare type ClickEventHandler = (event: MouseEvent) => void;
+export declare function addGlobalClickEvent(callback: ClickEventHandler): () => void;
 export declare const PickerModeMap: Record<PickerMode, ((next: PanelMode) => PanelMode) | null>;
+export {};

es/utils/uiUtil.js

@@ -172,4 +172,30 @@ "use strict";
 
-exports.getInputSize = getInputSize; // ====================== Mode ======================
+exports.getInputSize = getInputSize;
+var globalClickFunc = null;
+var clickCallbacks = new Set();
 
+function addGlobalClickEvent(callback) {
+  if (!globalClickFunc && typeof window !== 'undefined' && window.addEventListener) {
+    globalClickFunc = function globalClickFunc(e) {
+      clickCallbacks.forEach(function (queueFunc) {
+        queueFunc(e);
+      });
+    };
+
+    window.addEventListener('click', globalClickFunc);
+  }
+
+  clickCallbacks.add(callback);
+  return function () {
+    clickCallbacks.delete(callback);
+
+    if (clickCallbacks.size === 0) {
+      window.removeEventListener('click', globalClickFunc);
+      globalClickFunc = null;
+    }
+  };
+}
+
+exports.addGlobalClickEvent = addGlobalClickEvent; // ====================== Mode ======================
+
 var getYearNextMode = function getYearNextMode(next) {
@@ -176,0 +202,0 @@ if (next === 'month' || next === 'date') {

lib/PanelContext.d.ts

@@ -10,4 +10,5 @@ import * as React from 'react';
     hideHeader?: boolean;
+    panelRef?: React.Ref<HTMLDivElement>;
 }
 declare const PanelContext: React.Context<PanelContextProps>;
 export default PanelContext;

lib/Picker.js

@@ -119,4 +119,7 @@ "use strict";
 
-  var formatList = miscUtil_1.toArray(uiUtil_1.getDefaultFormat(format, picker, showTime, use12Hours)); // Real value
+  var formatList = miscUtil_1.toArray(uiUtil_1.getDefaultFormat(format, picker, showTime, use12Hours)); // Panel ref
 
+  var panelDivRef = React.useRef(null);
+  var inputDivRef = React.useRef(null); // Real value
+
   var _React$useState = React.useState(function () {
@@ -337,4 +340,14 @@ if (value !== undefined) {
     }
-  }, [mergedValue]); // ============================= Panel =============================
+  }, [mergedValue]); // Global click handler
 
+  React.useEffect(function () {
+    return uiUtil_1.addGlobalClickEvent(function (_ref) {
+      var target = _ref.target;
+
+      if (mergedOpen && panelDivRef.current && !panelDivRef.current.contains(target) && inputDivRef.current && !inputDivRef.current.contains(target) && onOpenChange) {
+        onOpenChange(false);
+      }
+    });
+  }); // ============================= Panel =============================
+
   var panelProps = _objectSpread({}, props, {
@@ -381,3 +394,4 @@ className: undefined,
       operationRef: operationRef,
-      hideHeader: picker === 'time'
+      hideHeader: picker === 'time',
+      panelRef: panelDivRef
     }
@@ -397,3 +411,4 @@ }, React.createElement("div", {
   }, React.createElement("div", {
-    className: "".concat(prefixCls, "-input")
+    className: "".concat(prefixCls, "-input"),
+    ref: inputDivRef
   }, React.createElement("input", {
@@ -400,0 +415,0 @@ disabled: disabled,

lib/PickerPanel.js

@@ -94,3 +94,4 @@ "use strict";
   var _React$useContext = React.useContext(PanelContext_1.default),
-      operationRef = _React$useContext.operationRef;
+      operationRef = _React$useContext.operationRef,
+      panelDivRef = _React$useContext.panelRef;
 
@@ -345,3 +346,4 @@ var _React$useContext2 = React.useContext(RangeContext_1.default),
     onBlur: onInternalBlur,
-    onMouseDown: onMouseDown
+    onMouseDown: onMouseDown,
+    ref: panelDivRef
   }, panelNode, extraFooter || todayNode || extraSelectionNode ? React.createElement("div", {
@@ -348,0 +350,0 @@ className: "".concat(prefixCls, "-footer")

lib/utils/uiUtil.d.ts

@@ -14,2 +14,5 @@ /// <reference types="react" />
 export declare function getInputSize(picker: PickerMode | undefined, format: string): number;
+declare type ClickEventHandler = (event: MouseEvent) => void;
+export declare function addGlobalClickEvent(callback: ClickEventHandler): () => void;
 export declare const PickerModeMap: Record<PickerMode, ((next: PanelMode) => PanelMode) | null>;
+export {};

lib/utils/uiUtil.js

@@ -172,4 +172,30 @@ "use strict";
 
-exports.getInputSize = getInputSize; // ====================== Mode ======================
+exports.getInputSize = getInputSize;
+var globalClickFunc = null;
+var clickCallbacks = new Set();
 
+function addGlobalClickEvent(callback) {
+  if (!globalClickFunc && typeof window !== 'undefined' && window.addEventListener) {
+    globalClickFunc = function globalClickFunc(e) {
+      clickCallbacks.forEach(function (queueFunc) {
+        queueFunc(e);
+      });
+    };
+
+    window.addEventListener('click', globalClickFunc);
+  }
+
+  clickCallbacks.add(callback);
+  return function () {
+    clickCallbacks.delete(callback);
+
+    if (clickCallbacks.size === 0) {
+      window.removeEventListener('click', globalClickFunc);
+      globalClickFunc = null;
+    }
+  };
+}
+
+exports.addGlobalClickEvent = addGlobalClickEvent; // ====================== Mode ======================
+
 var getYearNextMode = function getYearNextMode(next) {
@@ -176,0 +202,0 @@ if (next === 'month' || next === 'date') {

package.json

 {
   "name": "rc-picker",
-  "version": "0.0.1-alpha.11",
+  "version": "0.0.1-alpha.12",
   "description": "React date & time picker",
@@ -5,0 +5,0 @@ "keywords": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

421072

increased by0.7%

Lines of code

10716

increased by0.73%

No dependency changes