rc-picker - npm Package Compare versions

Comparing version 0.0.1-alpha.22 to 0.0.1-alpha.23

es/panels/DatetimePanel/index.js

@@ -153,3 +153,5 @@ "use strict";
     }
-  })), React.createElement(TimePanel_1.default, Object.assign({}, props, timeProps, disabledTimes, {
+  })), React.createElement(TimePanel_1.default, Object.assign({}, props, {
+    format: undefined
+  }, timeProps, disabledTimes, {
     defaultValue: undefined,
@@ -156,0 +158,0 @@ operationRef: timeOperationRef,

es/Picker.d.ts

@@ -16,2 +16,7 @@ /**
 import { PickerPanelBaseProps, PickerPanelDateProps, PickerPanelTimeProps } from './PickerPanel';
+export interface PickerRefConfig {
+    focus: () => void;
+    blur: () => void;
+    open: () => void;
+}
 export interface PickerSharedProps<DateType> extends React.AriaAttributes {
@@ -48,3 +53,3 @@ dropdownClassName?: string;
     /** @private Internal usage, do not use in production mode!!! */
-    inputRef?: React.Ref<HTMLInputElement>;
+    pickerRef?: React.MutableRefObject<PickerRefConfig>;
     role?: string;
@@ -61,7 +66,8 @@ name?: string;
 declare class Picker<DateType> extends React.Component<PickerProps<DateType>> {
-    inputRef: React.RefObject<HTMLInputElement>;
+    pickerRef: React.RefObject<PickerRefConfig>;
     focus: () => void;
     blur: () => void;
+    open: () => void;
     render(): JSX.Element;
 }
 export default Picker;

es/Picker.js

@@ -114,3 +114,3 @@ "use strict";
       getPopupContainer = props.getPopupContainer,
-      inputRef = props.inputRef,
+      pickerRef = props.pickerRef,
       onChange = props.onChange,
@@ -125,3 +125,4 @@ onOpenChange = props.onOpenChange,
       onContextMenu = props.onContextMenu,
-      onClick = props.onClick; // ============================= State =============================
+      onClick = props.onClick;
+  var inputRef = React.useRef(null); // ============================= State =============================
 
@@ -379,4 +380,23 @@ var formatList = miscUtil_1.toArray(uiUtil_1.getDefaultFormat(format, picker, showTime, use12Hours)); // Panel ref
     });
-  }); // ============================= Panel =============================
+  }); // ============================ Private ============================
 
+  if (pickerRef) {
+    pickerRef.current = {
+      focus: function focus() {
+        if (inputRef.current) {
+          inputRef.current.focus();
+        }
+      },
+      blur: function blur() {
+        if (inputRef.current) {
+          inputRef.current.blur();
+        }
+      },
+      open: function open() {
+        triggerOpen(true);
+      }
+    };
+  } // ============================= Panel =============================
+
+
   var panelProps = _objectSpread({}, props, {
@@ -475,7 +495,7 @@ className: undefined,
     _this = _possibleConstructorReturn(this, _getPrototypeOf(Picker).apply(this, arguments));
-    _this.inputRef = React.createRef();
+    _this.pickerRef = React.createRef();
 
     _this.focus = function () {
-      if (_this.inputRef.current) {
-        _this.inputRef.current.focus();
+      if (_this.pickerRef.current) {
+        _this.pickerRef.current.focus();
       }
@@ -485,7 +505,13 @@ };
     _this.blur = function () {
-      if (_this.inputRef.current) {
-        _this.inputRef.current.blur();
+      if (_this.pickerRef.current) {
+        _this.pickerRef.current.blur();
       }
     };
 
+    _this.open = function () {
+      if (_this.pickerRef.current) {
+        _this.pickerRef.current.open();
+      }
+    };
+
     return _this;
@@ -498,3 +524,3 @@ }
       return React.createElement(InnerPicker, Object.assign({}, this.props, {
-        inputRef: this.inputRef
+        pickerRef: this.pickerRef
       }));
@@ -501,0 +527,0 @@ }

es/PickerPanel.js

 "use strict";
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
 
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
-
-function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
-
 function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -113,3 +105,4 @@
   var _React$useContext = React.useContext(RangeContext_1.default),
-      extraFooterSelections = _React$useContext.extraFooterSelections;
+      extraFooterSelections = _React$useContext.extraFooterSelections,
+      inRange = _React$useContext.inRange;
 
@@ -341,19 +334,16 @@ var panelRef = React.useRef({}); // Handle init logic
   var extraSelectionNode;
+  var mergedSelections = [];
 
-  if (extraFooterSelections && extraFooterSelections.length || showTime) {
-    var mergedSelections = [];
+  if (extraFooterSelections && extraFooterSelections.length) {
+    mergedSelections = extraFooterSelections;
+  } else if (showTime && !inRange) {
+    mergedSelections.push({
+      label: locale.now,
+      onClick: function onClick() {
+        triggerSelect(generateConfig.getNow());
+      }
+    });
+  }
 
-    if (showTime) {
-      mergedSelections.push({
-        label: locale.now,
-        onClick: function onClick() {
-          triggerSelect(generateConfig.getNow());
-        }
-      });
-    }
-
-    if (extraFooterSelections) {
-      mergedSelections = [].concat(_toConsumableArray(mergedSelections), _toConsumableArray(extraFooterSelections));
-    }
-
+  if (mergedSelections.length) {
     extraSelectionNode = React.createElement("ul", {
@@ -360,0 +350,0 @@ className: "".concat(prefixCls, "-ranges")

es/PickerTrigger.js

@@ -32,6 +32,14 @@ "use strict";
     overflow: {
-      adjustX: 0,
+      adjustX: 1,
       adjustY: 1
     }
   },
+  bottomRight: {
+    points: ['tr', 'br'],
+    offset: [0, 4],
+    overflow: {
+      adjustX: 1,
+      adjustY: 1
+    }
+  },
   topLeft: {
@@ -44,2 +52,10 @@ points: ['bl', 'tl'],
     }
+  },
+  topRight: {
+    points: ['br', 'tr'],
+    offset: [0, -4],
+    overflow: {
+      adjustX: 0,
+      adjustY: 1
+    }
   }
@@ -46,0 +62,0 @@ };

es/RangeContext.d.ts

@@ -14,4 +14,5 @@ import * as React from 'react';
     rangedValue?: [NullableDateType<any>, NullableDateType<any>];
+    inRange?: boolean;
 }
 declare const RangeContext: React.Context<RangeContextProps>;
 export default RangeContext;

es/RangePicker.d.ts

@@ -7,3 +7,3 @@ /**
 import * as React from 'react';
-import Picker, { PickerBaseProps, PickerDateProps, PickerTimeProps } from './Picker';
+import { PickerBaseProps, PickerDateProps, PickerTimeProps, PickerRefConfig } from './Picker';
 import { DisabledTimes, PanelMode } from './interface';
@@ -42,3 +42,3 @@ import { SharedTimeProps } from './panels/TimePanel';
 declare class RangePicker<DateType> extends React.Component<RangePickerProps<DateType>> {
-    pickerRef: React.RefObject<Picker<DateType>>;
+    pickerRef: React.RefObject<PickerRefConfig>;
     focus: () => void;
@@ -45,0 +45,0 @@ blur: () => void;

es/RangePicker.js

@@ -217,4 +217,34 @@ "use strict";
     }
-  }; // ============================== Mode ==============================
+  }; // ============================== Open ==============================
 
+
+  var startPickerRef = React.useRef(null);
+  var endPickerRef = React.useRef(null);
+  var lastOpenIdRef = React.useRef();
+
+  var onStartOpenChange = function onStartOpenChange(open) {
+    if (!open && selectedValues && selectedValues[0]) {
+      lastOpenIdRef.current = window.setTimeout(function () {
+        if (endPickerRef.current) {
+          endPickerRef.current.focus();
+          endPickerRef.current.open();
+        }
+      }, 100);
+    }
+
+    if (props.onOpenChange) {
+      props.onOpenChange(open);
+    }
+  };
+
+  React.useEffect(function () {
+    return function () {
+      window.clearTimeout(lastOpenIdRef.current);
+    };
+  }, []);
+
+  if (pickerRef) {
+    pickerRef.current = startPickerRef.current;
+  } // ============================== Mode ==============================
+
   /**
@@ -343,3 +373,4 @@ * [Legacy] handle internal `onPanelChange`
       extraFooterSelections: extraFooterSelections,
-      rangedValue: selectedValues
+      rangedValue: selectedValues,
+      inRange: true
     }
@@ -350,3 +381,3 @@ }, React.createElement("div", {
   }, React.createElement(Picker_1.default, Object.assign({}, pickerProps, {
-    ref: pickerRef,
+    ref: startPickerRef,
     prefixCls: prefixCls,
@@ -369,4 +400,6 @@ value: value1,
     onBlur: onBlur,
-    onPanelChange: onStartPanelChange
+    onPanelChange: onStartPanelChange,
+    onOpenChange: onStartOpenChange
   })), separator, React.createElement(Picker_1.default, Object.assign({}, pickerProps, {
+    ref: endPickerRef,
     prefixCls: prefixCls,
@@ -373,0 +406,0 @@ value: value2,

lib/panels/DatetimePanel/index.js

@@ -153,3 +153,5 @@ "use strict";
     }
-  })), React.createElement(TimePanel_1.default, Object.assign({}, props, timeProps, disabledTimes, {
+  })), React.createElement(TimePanel_1.default, Object.assign({}, props, {
+    format: undefined
+  }, timeProps, disabledTimes, {
     defaultValue: undefined,
@@ -156,0 +158,0 @@ operationRef: timeOperationRef,

lib/Picker.d.ts

@@ -16,2 +16,7 @@ /**
 import { PickerPanelBaseProps, PickerPanelDateProps, PickerPanelTimeProps } from './PickerPanel';
+export interface PickerRefConfig {
+    focus: () => void;
+    blur: () => void;
+    open: () => void;
+}
 export interface PickerSharedProps<DateType> extends React.AriaAttributes {
@@ -48,3 +53,3 @@ dropdownClassName?: string;
     /** @private Internal usage, do not use in production mode!!! */
-    inputRef?: React.Ref<HTMLInputElement>;
+    pickerRef?: React.MutableRefObject<PickerRefConfig>;
     role?: string;
@@ -61,7 +66,8 @@ name?: string;
 declare class Picker<DateType> extends React.Component<PickerProps<DateType>> {
-    inputRef: React.RefObject<HTMLInputElement>;
+    pickerRef: React.RefObject<PickerRefConfig>;
     focus: () => void;
     blur: () => void;
+    open: () => void;
     render(): JSX.Element;
 }
 export default Picker;

lib/Picker.js

@@ -114,3 +114,3 @@ "use strict";
       getPopupContainer = props.getPopupContainer,
-      inputRef = props.inputRef,
+      pickerRef = props.pickerRef,
       onChange = props.onChange,
@@ -125,3 +125,4 @@ onOpenChange = props.onOpenChange,
       onContextMenu = props.onContextMenu,
-      onClick = props.onClick; // ============================= State =============================
+      onClick = props.onClick;
+  var inputRef = React.useRef(null); // ============================= State =============================
 
@@ -379,4 +380,23 @@ var formatList = miscUtil_1.toArray(uiUtil_1.getDefaultFormat(format, picker, showTime, use12Hours)); // Panel ref
     });
-  }); // ============================= Panel =============================
+  }); // ============================ Private ============================
 
+  if (pickerRef) {
+    pickerRef.current = {
+      focus: function focus() {
+        if (inputRef.current) {
+          inputRef.current.focus();
+        }
+      },
+      blur: function blur() {
+        if (inputRef.current) {
+          inputRef.current.blur();
+        }
+      },
+      open: function open() {
+        triggerOpen(true);
+      }
+    };
+  } // ============================= Panel =============================
+
+
   var panelProps = _objectSpread({}, props, {
@@ -475,7 +495,7 @@ className: undefined,
     _this = _possibleConstructorReturn(this, _getPrototypeOf(Picker).apply(this, arguments));
-    _this.inputRef = React.createRef();
+    _this.pickerRef = React.createRef();
 
     _this.focus = function () {
-      if (_this.inputRef.current) {
-        _this.inputRef.current.focus();
+      if (_this.pickerRef.current) {
+        _this.pickerRef.current.focus();
       }
@@ -485,7 +505,13 @@ };
     _this.blur = function () {
-      if (_this.inputRef.current) {
-        _this.inputRef.current.blur();
+      if (_this.pickerRef.current) {
+        _this.pickerRef.current.blur();
       }
     };
 
+    _this.open = function () {
+      if (_this.pickerRef.current) {
+        _this.pickerRef.current.open();
+      }
+    };
+
     return _this;
@@ -498,3 +524,3 @@ }
       return React.createElement(InnerPicker, Object.assign({}, this.props, {
-        inputRef: this.inputRef
+        pickerRef: this.pickerRef
       }));
@@ -501,0 +527,0 @@ }

lib/PickerPanel.js

 "use strict";
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
 
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
-
-function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
-
 function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -113,3 +105,4 @@
   var _React$useContext = React.useContext(RangeContext_1.default),
-      extraFooterSelections = _React$useContext.extraFooterSelections;
+      extraFooterSelections = _React$useContext.extraFooterSelections,
+      inRange = _React$useContext.inRange;
 
@@ -341,19 +334,16 @@ var panelRef = React.useRef({}); // Handle init logic
   var extraSelectionNode;
+  var mergedSelections = [];
 
-  if (extraFooterSelections && extraFooterSelections.length || showTime) {
-    var mergedSelections = [];
+  if (extraFooterSelections && extraFooterSelections.length) {
+    mergedSelections = extraFooterSelections;
+  } else if (showTime && !inRange) {
+    mergedSelections.push({
+      label: locale.now,
+      onClick: function onClick() {
+        triggerSelect(generateConfig.getNow());
+      }
+    });
+  }
 
-    if (showTime) {
-      mergedSelections.push({
-        label: locale.now,
-        onClick: function onClick() {
-          triggerSelect(generateConfig.getNow());
-        }
-      });
-    }
-
-    if (extraFooterSelections) {
-      mergedSelections = [].concat(_toConsumableArray(mergedSelections), _toConsumableArray(extraFooterSelections));
-    }
-
+  if (mergedSelections.length) {
     extraSelectionNode = React.createElement("ul", {
@@ -360,0 +350,0 @@ className: "".concat(prefixCls, "-ranges")

lib/PickerTrigger.js

@@ -32,6 +32,14 @@ "use strict";
     overflow: {
-      adjustX: 0,
+      adjustX: 1,
       adjustY: 1
     }
   },
+  bottomRight: {
+    points: ['tr', 'br'],
+    offset: [0, 4],
+    overflow: {
+      adjustX: 1,
+      adjustY: 1
+    }
+  },
   topLeft: {
@@ -44,2 +52,10 @@ points: ['bl', 'tl'],
     }
+  },
+  topRight: {
+    points: ['br', 'tr'],
+    offset: [0, -4],
+    overflow: {
+      adjustX: 0,
+      adjustY: 1
+    }
   }
@@ -46,0 +62,0 @@ };

lib/RangeContext.d.ts

@@ -14,4 +14,5 @@ import * as React from 'react';
     rangedValue?: [NullableDateType<any>, NullableDateType<any>];
+    inRange?: boolean;
 }
 declare const RangeContext: React.Context<RangeContextProps>;
 export default RangeContext;

lib/RangePicker.d.ts

@@ -7,3 +7,3 @@ /**
 import * as React from 'react';
-import Picker, { PickerBaseProps, PickerDateProps, PickerTimeProps } from './Picker';
+import { PickerBaseProps, PickerDateProps, PickerTimeProps, PickerRefConfig } from './Picker';
 import { DisabledTimes, PanelMode } from './interface';
@@ -42,3 +42,3 @@ import { SharedTimeProps } from './panels/TimePanel';
 declare class RangePicker<DateType> extends React.Component<RangePickerProps<DateType>> {
-    pickerRef: React.RefObject<Picker<DateType>>;
+    pickerRef: React.RefObject<PickerRefConfig>;
     focus: () => void;
@@ -45,0 +45,0 @@ blur: () => void;

lib/RangePicker.js

@@ -217,4 +217,34 @@ "use strict";
     }
-  }; // ============================== Mode ==============================
+  }; // ============================== Open ==============================
 
+
+  var startPickerRef = React.useRef(null);
+  var endPickerRef = React.useRef(null);
+  var lastOpenIdRef = React.useRef();
+
+  var onStartOpenChange = function onStartOpenChange(open) {
+    if (!open && selectedValues && selectedValues[0]) {
+      lastOpenIdRef.current = window.setTimeout(function () {
+        if (endPickerRef.current) {
+          endPickerRef.current.focus();
+          endPickerRef.current.open();
+        }
+      }, 100);
+    }
+
+    if (props.onOpenChange) {
+      props.onOpenChange(open);
+    }
+  };
+
+  React.useEffect(function () {
+    return function () {
+      window.clearTimeout(lastOpenIdRef.current);
+    };
+  }, []);
+
+  if (pickerRef) {
+    pickerRef.current = startPickerRef.current;
+  } // ============================== Mode ==============================
+
   /**
@@ -343,3 +373,4 @@ * [Legacy] handle internal `onPanelChange`
       extraFooterSelections: extraFooterSelections,
-      rangedValue: selectedValues
+      rangedValue: selectedValues,
+      inRange: true
     }
@@ -350,3 +381,3 @@ }, React.createElement("div", {
   }, React.createElement(Picker_1.default, Object.assign({}, pickerProps, {
-    ref: pickerRef,
+    ref: startPickerRef,
     prefixCls: prefixCls,
@@ -369,4 +400,6 @@ value: value1,
     onBlur: onBlur,
-    onPanelChange: onStartPanelChange
+    onPanelChange: onStartPanelChange,
+    onOpenChange: onStartOpenChange
   })), separator, React.createElement(Picker_1.default, Object.assign({}, pickerProps, {
+    ref: endPickerRef,
     prefixCls: prefixCls,
@@ -373,0 +406,0 @@ value: value2,

package.json

 {
   "name": "rc-picker",
-  "version": "0.0.1-alpha.22",
+  "version": "0.0.1-alpha.23",
   "description": "React date & time picker",
@@ -62,3 +62,3 @@ "keywords": [
     "eslint-plugin-react-hooks": "^2.3.0",
-    "eslint-plugin-unicorn": "^13.0.0",
+    "eslint-plugin-unicorn": "^14.0.1",
     "father": "^2.13.4",
@@ -65,0 +65,0 @@ "less": "^3.10.3",

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

450361

increased by0.59%

Lines of code

11070

increased by1.3%

No dependency changes