rc-picker - npm Package Compare versions

Comparing version 0.0.1-alpha.32 to 0.0.1-alpha.33

es/interface.d.ts

@@ -44,2 +44,3 @@ /// <reference types="react" />
 export declare type NullableDateType<DateType> = DateType | null | undefined;
+export declare type OnSelect<DateType> = (value: DateType, type: 'key' | 'mouse') => void;
 export interface PanelSharedProps<DateType> {
@@ -64,3 +65,3 @@ prefixCls: string;
     operationRef: React.MutableRefObject<PanelRefProps>;
-    onSelect: (value: DateType) => void;
+    onSelect: OnSelect<DateType>;
     onViewDateChange: (value: DateType) => void;
@@ -67,0 +68,0 @@ onPanelChange: (mode: PanelMode, viewValue: DateType) => void;

es/panels/DatePanel/DateBody.d.ts

 import * as React from 'react';
 import { GenerateConfig } from '../../generate';
-import { Locale } from '../../interface';
+import { Locale, OnSelect } from '../../interface';
 export declare type DateRender<DateType> = (currentDate: DateType, today: DateType) => React.ReactNode;
@@ -18,5 +18,5 @@ export interface DateBodyPassProps<DateType> {
     rowCount: number;
-    onSelect: (value: DateType) => void;
+    onSelect: OnSelect<DateType>;
 }
 declare function DateBody<DateType>({ prefixCls, generateConfig, prefixColumn, rowClassName, locale, rowCount, viewDate, value, disabledDate, dateRender, onSelect, }: DateBodyProps<DateType>): JSX.Element;
 export default DateBody;

es/panels/DatePanel/DateBody.js

@@ -114,3 +114,3 @@ "use strict";
           if (!disabled) {
-            onSelect(currentDate);
+            onSelect(currentDate, 'mouse');
           }
@@ -117,0 +117,0 @@ },

es/panels/DatePanel/index.js

@@ -62,12 +62,12 @@ "use strict";
         onLeftRight: function onLeftRight(diff) {
-          onSelect(generateConfig.addDate(value || viewDate, diff));
+          onSelect(generateConfig.addDate(value || viewDate, diff), 'key');
         },
         onCtrlLeftRight: function onCtrlLeftRight(diff) {
-          onSelect(generateConfig.addYear(value || viewDate, diff));
+          onSelect(generateConfig.addYear(value || viewDate, diff), 'key');
         },
         onUpDown: function onUpDown(diff) {
-          onSelect(generateConfig.addDate(value || viewDate, diff * dateUtil_1.WEEK_DAY_COUNT));
+          onSelect(generateConfig.addDate(value || viewDate, diff * dateUtil_1.WEEK_DAY_COUNT), 'key');
         },
         onPageUpDown: function onPageUpDown(diff) {
-          onSelect(generateConfig.addMonth(value || viewDate, diff));
+          onSelect(generateConfig.addMonth(value || viewDate, diff), 'key');
         }
@@ -74,0 +74,0 @@ }, keyboardConfig));

es/panels/DatetimePanel/index.js

@@ -51,2 +51,14 @@ "use strict";
 
+function setTime(generateConfig, date, defaultDate) {
+  if (!defaultDate) {
+    return date;
+  }
+
+  var newDate = date;
+  newDate = generateConfig.setHour(newDate, generateConfig.getHour(defaultDate));
+  newDate = generateConfig.setMinute(newDate, generateConfig.getMinute(defaultDate));
+  newDate = generateConfig.setSecond(newDate, generateConfig.getSecond(defaultDate));
+  return newDate;
+}
+
 var ACTIVE_PANEL = miscUtil_1.tuple('date', 'time');
@@ -140,3 +152,3 @@
     if (onSelect) {
-      onSelect(selectedDate);
+      onSelect(selectedDate, 'mouse');
     }
@@ -153,3 +165,3 @@ }; // ======================== Render ========================
     onSelect: function onSelect(date) {
-      onInternalSelect(date, 'date');
+      onInternalSelect(setTime(generateConfig, date, showTime && _typeof(showTime) === 'object' ? showTime.defaultValue : null), 'date');
     }
@@ -156,0 +168,0 @@ })), React.createElement(TimePanel_1.default, Object.assign({}, props, {

es/panels/DecadePanel/index.js

@@ -48,9 +48,9 @@ "use strict";
         onLeftRight: function onLeftRight(diff) {
-          onSelect(generateConfig.addYear(viewDate, diff * exports.DECADE_UNIT_DIFF));
+          onSelect(generateConfig.addYear(viewDate, diff * exports.DECADE_UNIT_DIFF), 'key');
         },
         onCtrlLeftRight: function onCtrlLeftRight(diff) {
-          onSelect(generateConfig.addYear(viewDate, diff * exports.DECADE_DISTANCE_COUNT));
+          onSelect(generateConfig.addYear(viewDate, diff * exports.DECADE_DISTANCE_COUNT), 'key');
         },
         onUpDown: function onUpDown(diff) {
-          onSelect(generateConfig.addYear(viewDate, diff * exports.DECADE_UNIT_DIFF * DecadeBody_1.DECADE_COL_COUNT));
+          onSelect(generateConfig.addYear(viewDate, diff * exports.DECADE_UNIT_DIFF * DecadeBody_1.DECADE_COL_COUNT), 'key');
         },
@@ -69,3 +69,3 @@ onEnter: function onEnter() {
   var onInternalSelect = function onInternalSelect(date) {
-    onSelect(date);
+    onSelect(date, 'mouse');
     onPanelChange('year', date);
@@ -72,0 +72,0 @@ };

es/panels/MonthPanel/index.js

@@ -46,9 +46,9 @@ "use strict";
         onLeftRight: function onLeftRight(diff) {
-          _onSelect(generateConfig.addMonth(value || viewDate, diff));
+          _onSelect(generateConfig.addMonth(value || viewDate, diff), 'key');
         },
         onCtrlLeftRight: function onCtrlLeftRight(diff) {
-          _onSelect(generateConfig.addYear(value || viewDate, diff));
+          _onSelect(generateConfig.addYear(value || viewDate, diff), 'key');
         },
         onUpDown: function onUpDown(diff) {
-          _onSelect(generateConfig.addMonth(value || viewDate, diff * MonthBody_1.MONTH_COL_COUNT));
+          _onSelect(generateConfig.addMonth(value || viewDate, diff * MonthBody_1.MONTH_COL_COUNT), 'key');
         },
@@ -82,3 +82,3 @@ onEnter: function onEnter() {
     onSelect: function onSelect(date) {
-      _onSelect(date);
+      _onSelect(date, 'mouse');
 
@@ -85,0 +85,0 @@ onPanelChange('date', date);

es/panels/TimePanel/index.js

@@ -86,3 +86,3 @@ "use strict";
         onEnter: function onEnter() {
-          onSelect(value || generateConfig.getNow());
+          onSelect(value || generateConfig.getNow(), 'key');
           setActiveColumnIndex(-1);
@@ -89,0 +89,0 @@ }

es/panels/TimePanel/TimeBody.d.ts

 import * as React from 'react';
 import { GenerateConfig } from '../../generate';
-import { Locale } from '../../interface';
+import { Locale, OnSelect } from '../../interface';
 import { SharedTimeProps } from '.';
@@ -13,3 +13,3 @@ export interface BodyOperationRef {
     value?: DateType | null;
-    onSelect: (value: DateType) => void;
+    onSelect: OnSelect<DateType>;
     activeColumnIndex: number;
@@ -16,0 +16,0 @@ operationRef: React.MutableRefObject<BodyOperationRef | undefined>;

es/panels/TimePanel/TimeBody.js

@@ -139,3 +139,3 @@ "use strict";
   }), hour, hours, function (num) {
-    onSelect(setTime(isPM, num, minute, second));
+    onSelect(setTime(isPM, num, minute, second), 'mouse');
   }); // Minute
@@ -146,3 +146,3 @@
   }), minute, minutes, function (num) {
-    onSelect(setTime(isPM, hour, num, second));
+    onSelect(setTime(isPM, hour, num, second), 'mouse');
   }); // Second
@@ -153,3 +153,3 @@
   }), second, seconds, function (num) {
-    onSelect(setTime(isPM, hour, minute, num));
+    onSelect(setTime(isPM, hour, minute, num), 'mouse');
   }); // 12 Hours
@@ -172,3 +172,3 @@
   }], function (num) {
-    onSelect(setTime(!!num, hour, minute, second));
+    onSelect(setTime(!!num, hour, minute, second), 'mouse');
   });
@@ -175,0 +175,0 @@ return React.createElement("div", {

es/panels/YearPanel/index.js

@@ -48,9 +48,9 @@ "use strict";
         onLeftRight: function onLeftRight(diff) {
-          _onSelect(generateConfig.addYear(value || viewDate, diff));
+          _onSelect(generateConfig.addYear(value || viewDate, diff), 'key');
         },
         onCtrlLeftRight: function onCtrlLeftRight(diff) {
-          _onSelect(generateConfig.addYear(value || viewDate, diff * exports.YEAR_DECADE_COUNT));
+          _onSelect(generateConfig.addYear(value || viewDate, diff * exports.YEAR_DECADE_COUNT), 'key');
         },
         onUpDown: function onUpDown(diff) {
-          _onSelect(generateConfig.addYear(value || viewDate, diff * YearBody_1.YEAR_COL_COUNT));
+          _onSelect(generateConfig.addYear(value || viewDate, diff * YearBody_1.YEAR_COL_COUNT), 'key');
         },
@@ -86,3 +86,3 @@ onEnter: function onEnter() {
 
-      _onSelect(date);
+      _onSelect(date, 'mouse');
     }
@@ -89,0 +89,0 @@ })));

es/Picker.js

@@ -71,2 +71,4 @@ "use strict";
 
+var warning_1 = require("rc-util/lib/warning");
+
 var PickerPanel_1 = __importDefault(require("./PickerPanel"));
@@ -203,4 +205,11 @@
     }
+    /* istanbul ignore next */
 
-    return false;
+    /* eslint-disable no-lone-blocks */
+
+
+    {
+      warning_1.warning(false, 'Picker not correct forward KeyDown operation. Please help to fire issue about this.');
+      return false;
+    }
   }; // ============================= Text ==============================
@@ -207,0 +216,0 @@

es/PickerPanel.js

@@ -117,7 +117,7 @@ "use strict";
   var _React$useContext = React.useContext(RangeContext_1.default),
-      extraFooterSelections = _React$useContext.extraFooterSelections,
       inRange = _React$useContext.inRange,
       panelPosition = _React$useContext.panelPosition,
       rangedValue = _React$useContext.rangedValue,
-      hoverRangedValue = _React$useContext.hoverRangedValue;
+      hoverRangedValue = _React$useContext.hoverRangedValue,
+      onContextSelect = _React$useContext.onSelect;
 
@@ -187,9 +187,3 @@ var panelRef = React.useRef({}); // Handle init logic
 
-  var mergedMode = mode || innerMode; // const mergedMode: PanelMode = React.useMemo(() => {
-  //   const newMode = mode || innerMode;
-  //   if (newMode === 'date' && showTime) {
-  //     return 'datetime';
-  //   }
-  //   return newMode;
-  // }, [mode || innerMode]);
+  var mergedMode = mode || innerMode;
 
@@ -205,4 +199,4 @@ var onInternalPanelChange = function onInternalPanelChange(newMode, viewValue) {
 
-  var triggerSelect = function triggerSelect(date) {
-    var forceTriggerSelect = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var triggerSelect = function triggerSelect(date, type) {
+    var forceTriggerSelect = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
 
@@ -212,2 +206,6 @@ if (mergedMode === picker || forceTriggerSelect) {
 
+      if (onContextSelect) {
+        onContextSelect(date, type);
+      }
+
       if (onSelect) {
@@ -288,5 +286,5 @@ onSelect(date);
       panelNode = React.createElement(DecadePanel_1.default, Object.assign({}, pickerProps, {
-        onSelect: function onSelect(date) {
+        onSelect: function onSelect(date, type) {
           setViewDate(date);
-          triggerSelect(date);
+          triggerSelect(date, type);
         }
@@ -298,5 +296,5 @@ }));
       panelNode = React.createElement(YearPanel_1.default, Object.assign({}, pickerProps, {
-        onSelect: function onSelect(date) {
+        onSelect: function onSelect(date, type) {
           setViewDate(date);
-          triggerSelect(date);
+          triggerSelect(date, type);
         }
@@ -308,5 +306,5 @@ }));
       panelNode = React.createElement(MonthPanel_1.default, Object.assign({}, pickerProps, {
-        onSelect: function onSelect(date) {
+        onSelect: function onSelect(date, type) {
           setViewDate(date);
-          triggerSelect(date);
+          triggerSelect(date, type);
         }
@@ -318,5 +316,5 @@ }));
       panelNode = React.createElement(WeekPanel_1.default, Object.assign({}, pickerProps, {
-        onSelect: function onSelect(date) {
+        onSelect: function onSelect(date, type) {
           setViewDate(date);
-          triggerSelect(date);
+          triggerSelect(date, type);
         }
@@ -329,5 +327,5 @@ }));
       panelNode = React.createElement(TimePanel_1.default, Object.assign({}, pickerProps, _typeof(showTime) === 'object' ? showTime : null, {
-        onSelect: function onSelect(date) {
+        onSelect: function onSelect(date, type) {
           setViewDate(date);
-          triggerSelect(date);
+          triggerSelect(date, type);
         }
@@ -340,5 +338,5 @@ }));
         panelNode = React.createElement(DatetimePanel_1.default, Object.assign({}, pickerProps, {
-          onSelect: function onSelect(date) {
+          onSelect: function onSelect(date, type) {
             setViewDate(date);
-            triggerSelect(date);
+            triggerSelect(date, type);
           }
@@ -348,5 +346,5 @@ }));
         panelNode = React.createElement(DatePanel_1.default, Object.assign({}, pickerProps, {
-          onSelect: function onSelect(date) {
+          onSelect: function onSelect(date, type) {
             setViewDate(date);
-            triggerSelect(date);
+            triggerSelect(date, type);
           }
@@ -367,9 +365,19 @@ }));
 
+  var nowNode;
   var todayNode;
 
-  if (showToday && mergedMode === 'date' && picker === 'date' && !showTime) {
+  if (showTime && !inRange) {
+    nowNode = React.createElement("div", {
+      className: "".concat(prefixCls, "-now")
+    }, React.createElement("a", {
+      className: "".concat(prefixCls, "-now-btn"),
+      onClick: function onClick() {
+        triggerSelect(generateConfig.getNow(), 'mouse', true);
+      }
+    }, locale.now));
+  } else if (showToday && mergedMode === 'date' && picker === 'date') {
     todayNode = React.createElement("a", {
       className: "".concat(prefixCls, "-today-btn"),
       onClick: function onClick() {
-        triggerSelect(generateConfig.getNow(), true);
+        triggerSelect(generateConfig.getNow(), 'mouse', true);
       }
@@ -379,29 +387,2 @@ }, locale.today);
 
-  var extraSelectionNode;
-  var mergedSelections = [];
-
-  if (extraFooterSelections && extraFooterSelections.length) {
-    mergedSelections = extraFooterSelections;
-  } else if (showTime && !inRange) {
-    mergedSelections.push({
-      label: locale.now,
-      onClick: function onClick() {
-        triggerSelect(generateConfig.getNow(), true);
-      }
-    });
-  }
-
-  if (mergedSelections.length) {
-    extraSelectionNode = React.createElement("ul", {
-      className: "".concat(prefixCls, "-ranges")
-    }, mergedSelections.map(function (_ref) {
-      var label = _ref.label,
-          onClick = _ref.onClick;
-      return React.createElement("li", {
-        key: label,
-        onClick: onClick
-      }, label);
-    }));
-  }
-
   return React.createElement(PanelContext_1.default.Provider, {
@@ -421,5 +402,5 @@ value: _objectSpread({}, panelContext, {
     ref: panelDivRef
-  }, panelNode, extraFooter || todayNode || extraSelectionNode ? React.createElement("div", {
+  }, panelNode, extraFooter || nowNode || todayNode ? React.createElement("div", {
     className: "".concat(prefixCls, "-footer")
-  }, extraFooter, extraSelectionNode, todayNode) : null));
+  }, extraFooter, nowNode, todayNode) : null));
 }
@@ -426,0 +407,0 @@

es/RangeContext.d.ts

 import * as React from 'react';
-import { NullableDateType, RangeValue } from './interface';
-export interface FooterSelection {
-    label: string;
-    onClick: React.MouseEventHandler<HTMLElement>;
-}
+import { NullableDateType, RangeValue, OnSelect } from './interface';
 interface RangeContextProps {
-    extraFooterSelections?: FooterSelection[];
     /**
@@ -17,4 +12,5 @@ * Set displayed range value style.
     panelPosition?: 'left' | 'right' | false;
+    onSelect?: OnSelect<any>;
 }
 declare const RangeContext: React.Context<RangeContextProps>;
 export default RangeContext;

es/RangePicker.d.ts

@@ -21,2 +21,6 @@ import * as React from 'react';
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    /** @private Internal usage. Do not use in your production env */
+    components?: {
+        button: React.ComponentType;
+    };
 }
@@ -23,0 +27,0 @@ declare type OmitPickerProps<Props> = Omit<Props, 'value' | 'defaultValue' | 'defaultPickerValue' | 'placeholder' | 'disabled' | 'disabledTime' | 'showToday' | 'showTime' | 'mode' | 'onChange' | 'onSelect' | 'onPanelChange' | 'pickerValue' | 'onPickerValueChange'>;

es/RangePicker.js

@@ -59,2 +59,4 @@ "use strict";
 
+var warning_1 = __importDefault(require("rc-util/lib/warning"));
+
 var useMergeState_1 = __importDefault(require("./hooks/useMergeState"));
@@ -92,3 +94,3 @@
 
-function canValueTrigger(value, index, disabledList, allowEmpty) {
+function canValueTrigger(value, index, allowEmpty) {
   if (value) {
@@ -100,7 +102,2 @@ return true;
     return true;
-  } // If another one is disabled, this can be trigger
-
-
-  if (disabledList[(index + 1) % 2]) {
-    return true;
   }
@@ -141,2 +138,4 @@
       disabledDate = props.disabledDate,
+      _disabledTime = props.disabledTime,
+      ranges = props.ranges,
       allowEmpty = props.allowEmpty,
@@ -152,4 +151,6 @@ allowClear = props.allowClear,
       onPanelChange = props.onPanelChange,
+      onCalendarChange = props.onCalendarChange,
       _onFocus = props.onFocus,
-      onBlur = props.onBlur;
+      onBlur = props.onBlur,
+      components = props.components;
   var containerRef = React.useRef(null);
@@ -221,3 +222,7 @@ var panelDivRef = React.useRef(null);
     postState: function postState(postViewDates) {
-      return postViewDates || [miscUtil_1.getValue(mergedValue, 0) || generateConfig.getNow(), miscUtil_1.getValue(mergedValue, 0) || generateConfig.getNow()];
+      var startViewDate = miscUtil_1.getValue(postViewDates, 0) || miscUtil_1.getValue(mergedValue, 0);
+      var endViewDate = miscUtil_1.getValue(postViewDates, 1) || miscUtil_1.getValue(mergedValue, 1);
+      startViewDate = startViewDate || endViewDate || generateConfig.getNow();
+      endViewDate = endViewDate || startViewDate || generateConfig.getNow();
+      return [startViewDate, endViewDate];
     }
@@ -236,3 +241,3 @@ }),
       for (var i = 0; i < 2; i += 1) {
-        if (mergedDisabled[i] && !miscUtil_1.getValue(postValues, i)) {
+        if (mergedDisabled[i] && !miscUtil_1.getValue(postValues, i) && !miscUtil_1.getValue(allowEmpty, i)) {
           postValues = miscUtil_1.updateValues(postValues, generateConfig.getNow(), i);
@@ -343,4 +348,11 @@ }
     setSelectedValue(values);
-    var canStartValueTrigger = canValueTrigger(startValue, 0, mergedDisabled, allowEmpty);
-    var canEndValueTrigger = canValueTrigger(endValue, 1, mergedDisabled, allowEmpty);
+    var startStr = startValue ? generateConfig.locale.format(locale.locale, startValue, formatList[0]) : '';
+    var endStr = endValue ? generateConfig.locale.format(locale.locale, endValue, formatList[0]) : '';
+
+    if (onCalendarChange) {
+      onCalendarChange(values, [startStr, endStr]);
+    }
+
+    var canStartValueTrigger = canValueTrigger(startValue, 0, allowEmpty);
+    var canEndValueTrigger = canValueTrigger(endValue, 1, allowEmpty);
     var canTrigger = values === null || canStartValueTrigger && canEndValueTrigger;
@@ -355,3 +367,3 @@
       if (onChange && (!dateUtil_1.isEqual(generateConfig, miscUtil_1.getValue(mergedValue, 0), startValue) || !dateUtil_1.isEqual(generateConfig, miscUtil_1.getValue(mergedValue, 1), endValue))) {
-        onChange(values, [startValue ? generateConfig.locale.format(locale.locale, startValue, formatList[0]) : '', endValue ? generateConfig.locale.format(locale.locale, endValue, formatList[0]) : '']);
+        onChange(values, [startStr, endStr]);
       }
@@ -399,4 +411,11 @@ } else if (forceInput) {
     }
+    /* istanbul ignore next */
 
-    return false;
+    /* eslint-disable no-lone-blocks */
+
+
+    {
+      warning_1.default(false, 'Picker not correct forward KeyDown operation. Please help to fire issue about this.');
+      return false;
+    }
   }; // ============================= Text ==============================
@@ -465,5 +484,2 @@
         triggerChange(selectedValue);
-
-        _triggerOpen(false, index, true);
-
         resetText();
@@ -500,2 +516,4 @@ },
 
+  var startStr = mergedValue && mergedValue[0] ? generateConfig.locale.format(locale.locale, mergedValue[0], 'YYYYMMDDHHmmss') : '';
+  var endStr = mergedValue && mergedValue[1] ? generateConfig.locale.format(locale.locale, mergedValue[1], 'YYYYMMDDHHmmss') : '';
   React.useEffect(function () {
@@ -508,6 +526,12 @@ if (!mergedOpen) {
   React.useEffect(function () {
-    // Sync select value
     setSelectedValue(mergedValue);
-  }, [mergedValue]); // ============================ Private ============================
+  }, [startStr, endStr]); // ============================ Warning ============================
 
+  if (process.env.NODE_ENV !== 'production') {
+    if (value && Array.isArray(disabled) && (miscUtil_1.getValue(disabled, 0) && !miscUtil_1.getValue(value, 0) || miscUtil_1.getValue(disabled, 1) && !miscUtil_1.getValue(value, 1))) {
+      warning_1.default(false, '`disabled` should not set with empty `value`. You should set `allowEmpty` or `value` instead.');
+    }
+  } // ============================ Private ============================
+
+
   if (pickerRef) {
@@ -544,7 +568,20 @@ pickerRef.current = {
 
-    if (panelShowTime && _typeof(panelShowTime) === 'object' && panelShowTime.defaultValue) {
+    if (showTime && _typeof(showTime) === 'object' && showTime.defaultValue) {
       var timeDefaultValues = showTime.defaultValue;
-      panelShowTime.defaultValue = miscUtil_1.getValue(timeDefaultValues, activePickerIndex) || undefined;
+      panelShowTime = _objectSpread({}, showTime, {
+        defaultValue: miscUtil_1.getValue(timeDefaultValues, activePickerIndex) || undefined
+      });
     }
 
+    var onContextSelect = function onContextSelect(date, type) {
+      var values = miscUtil_1.updateValues(selectedValue, date, activePickerIndex);
+
+      if (type === 'key' || picker === 'date' && showTime) {
+        setSelectedValue(values);
+      } else {
+        // triggerChange will also update selected values
+        triggerChange(values);
+      }
+    };
+
     return React.createElement(RangeContext_1.default.Provider, {
@@ -555,3 +592,4 @@ value: {
         rangedValue: selectedValue,
-        hoverRangedValue: panelHoverRangedValue
+        hoverRangedValue: panelHoverRangedValue,
+        onSelect: onContextSelect
       }
@@ -564,19 +602,13 @@ }, React.createElement(PickerPanel_1.default, Object.assign({}, props, panelProps, {
       disabledDate: activePickerIndex === 0 ? disabledStartDate : disabledEndDate,
-      className: classnames_1.default(_defineProperty({}, "".concat(prefixCls, "-panel-focused"), !startTyping && !endTyping)),
+      disabledTime: function disabledTime(date) {
+        if (_disabledTime) {
+          return _disabledTime(date, activePickerIndex === 0 ? 'start' : 'end');
+        }
+
+        return false;
+      },
+      className: classnames_1.default(_defineProperty({}, "".concat(prefixCls, "-panel-focused"), activePickerIndex === 0 ? !startTyping : !endTyping)),
       value: miscUtil_1.getValue(selectedValue, activePickerIndex),
       locale: locale,
       tabIndex: -1,
-      onMouseDown: function onMouseDown(e) {
-        e.preventDefault();
-      },
-      onSelect: function onSelect(date) {
-        var values = miscUtil_1.updateValues(selectedValue, date, activePickerIndex);
-
-        if (picker === 'date' && showTime) {
-          setSelectedValue(values);
-        } else {
-          // triggerChange will also update selected values
-          triggerChange(values);
-        }
-      },
       onPanelChange: function onPanelChange(date, newMode) {
@@ -586,2 +618,3 @@ triggerModesChange(miscUtil_1.updateValues(mergedModes, newMode, activePickerIndex), miscUtil_1.updateValues(selectedValue, date, activePickerIndex));
       },
+      onSelect: undefined,
       onChange: undefined,
@@ -628,2 +661,29 @@ defaultValue: undefined,
 
+    var rangesNode;
+
+    if (ranges || showTime) {
+      var mergedRanges = ranges || {};
+      var rangeList = Object.keys(mergedRanges);
+      var Button = components && components.button || 'button';
+      rangesNode = React.createElement("ul", {
+        className: "".concat(prefixCls, "-ranges")
+      }, rangeList.map(function (label) {
+        var range = mergedRanges[label];
+        return React.createElement("li", {
+          key: label,
+          onClick: function onClick() {
+            var newValues = Array.isArray(range) ? range : range();
+            triggerChange(newValues);
+          }
+        }, label);
+      }), showTime && React.createElement("li", {
+        className: "".concat(prefixCls, "-ok"),
+        onClick: function onClick() {
+          triggerChange(selectedValue);
+        }
+      }, React.createElement(Button, {
+        disabled: !miscUtil_1.getValue(selectedValue, activePickerIndex)
+      }, locale.ok)));
+    }
+
     return React.createElement("div", {
@@ -634,4 +694,9 @@ className: "".concat(prefixCls, "-panel-container"),
       },
-      ref: panelDivRef
-    }, panels);
+      ref: panelDivRef,
+      onMouseDown: function onMouseDown(e) {
+        e.preventDefault();
+      }
+    }, React.createElement("div", {
+      className: "".concat(prefixCls, "-panels")
+    }, panels), rangesNode);
   }
@@ -649,3 +714,4 @@
     }
-  }), renderPanels());
+  }), renderPanels()); // ============================= Icons =============================
+
   var suffixNode;
@@ -652,0 +718,0 @@

lib/interface.d.ts

@@ -44,2 +44,3 @@ /// <reference types="react" />
 export declare type NullableDateType<DateType> = DateType | null | undefined;
+export declare type OnSelect<DateType> = (value: DateType, type: 'key' | 'mouse') => void;
 export interface PanelSharedProps<DateType> {
@@ -64,3 +65,3 @@ prefixCls: string;
     operationRef: React.MutableRefObject<PanelRefProps>;
-    onSelect: (value: DateType) => void;
+    onSelect: OnSelect<DateType>;
     onViewDateChange: (value: DateType) => void;
@@ -67,0 +68,0 @@ onPanelChange: (mode: PanelMode, viewValue: DateType) => void;

lib/panels/DatePanel/DateBody.d.ts

 import * as React from 'react';
 import { GenerateConfig } from '../../generate';
-import { Locale } from '../../interface';
+import { Locale, OnSelect } from '../../interface';
 export declare type DateRender<DateType> = (currentDate: DateType, today: DateType) => React.ReactNode;
@@ -18,5 +18,5 @@ export interface DateBodyPassProps<DateType> {
     rowCount: number;
-    onSelect: (value: DateType) => void;
+    onSelect: OnSelect<DateType>;
 }
 declare function DateBody<DateType>({ prefixCls, generateConfig, prefixColumn, rowClassName, locale, rowCount, viewDate, value, disabledDate, dateRender, onSelect, }: DateBodyProps<DateType>): JSX.Element;
 export default DateBody;

lib/panels/DatePanel/DateBody.js

@@ -114,3 +114,3 @@ "use strict";
           if (!disabled) {
-            onSelect(currentDate);
+            onSelect(currentDate, 'mouse');
           }
@@ -117,0 +117,0 @@ },

lib/panels/DatePanel/index.js

@@ -62,12 +62,12 @@ "use strict";
         onLeftRight: function onLeftRight(diff) {
-          onSelect(generateConfig.addDate(value || viewDate, diff));
+          onSelect(generateConfig.addDate(value || viewDate, diff), 'key');
         },
         onCtrlLeftRight: function onCtrlLeftRight(diff) {
-          onSelect(generateConfig.addYear(value || viewDate, diff));
+          onSelect(generateConfig.addYear(value || viewDate, diff), 'key');
         },
         onUpDown: function onUpDown(diff) {
-          onSelect(generateConfig.addDate(value || viewDate, diff * dateUtil_1.WEEK_DAY_COUNT));
+          onSelect(generateConfig.addDate(value || viewDate, diff * dateUtil_1.WEEK_DAY_COUNT), 'key');
         },
         onPageUpDown: function onPageUpDown(diff) {
-          onSelect(generateConfig.addMonth(value || viewDate, diff));
+          onSelect(generateConfig.addMonth(value || viewDate, diff), 'key');
         }
@@ -74,0 +74,0 @@ }, keyboardConfig));

lib/panels/DatetimePanel/index.js

@@ -51,2 +51,14 @@ "use strict";
 
+function setTime(generateConfig, date, defaultDate) {
+  if (!defaultDate) {
+    return date;
+  }
+
+  var newDate = date;
+  newDate = generateConfig.setHour(newDate, generateConfig.getHour(defaultDate));
+  newDate = generateConfig.setMinute(newDate, generateConfig.getMinute(defaultDate));
+  newDate = generateConfig.setSecond(newDate, generateConfig.getSecond(defaultDate));
+  return newDate;
+}
+
 var ACTIVE_PANEL = miscUtil_1.tuple('date', 'time');
@@ -140,3 +152,3 @@
     if (onSelect) {
-      onSelect(selectedDate);
+      onSelect(selectedDate, 'mouse');
     }
@@ -153,3 +165,3 @@ }; // ======================== Render ========================
     onSelect: function onSelect(date) {
-      onInternalSelect(date, 'date');
+      onInternalSelect(setTime(generateConfig, date, showTime && _typeof(showTime) === 'object' ? showTime.defaultValue : null), 'date');
     }
@@ -156,0 +168,0 @@ })), React.createElement(TimePanel_1.default, Object.assign({}, props, {

lib/panels/DecadePanel/index.js

@@ -48,9 +48,9 @@ "use strict";
         onLeftRight: function onLeftRight(diff) {
-          onSelect(generateConfig.addYear(viewDate, diff * exports.DECADE_UNIT_DIFF));
+          onSelect(generateConfig.addYear(viewDate, diff * exports.DECADE_UNIT_DIFF), 'key');
         },
         onCtrlLeftRight: function onCtrlLeftRight(diff) {
-          onSelect(generateConfig.addYear(viewDate, diff * exports.DECADE_DISTANCE_COUNT));
+          onSelect(generateConfig.addYear(viewDate, diff * exports.DECADE_DISTANCE_COUNT), 'key');
         },
         onUpDown: function onUpDown(diff) {
-          onSelect(generateConfig.addYear(viewDate, diff * exports.DECADE_UNIT_DIFF * DecadeBody_1.DECADE_COL_COUNT));
+          onSelect(generateConfig.addYear(viewDate, diff * exports.DECADE_UNIT_DIFF * DecadeBody_1.DECADE_COL_COUNT), 'key');
         },
@@ -69,3 +69,3 @@ onEnter: function onEnter() {
   var onInternalSelect = function onInternalSelect(date) {
-    onSelect(date);
+    onSelect(date, 'mouse');
     onPanelChange('year', date);
@@ -72,0 +72,0 @@ };

lib/panels/MonthPanel/index.js

@@ -46,9 +46,9 @@ "use strict";
         onLeftRight: function onLeftRight(diff) {
-          _onSelect(generateConfig.addMonth(value || viewDate, diff));
+          _onSelect(generateConfig.addMonth(value || viewDate, diff), 'key');
         },
         onCtrlLeftRight: function onCtrlLeftRight(diff) {
-          _onSelect(generateConfig.addYear(value || viewDate, diff));
+          _onSelect(generateConfig.addYear(value || viewDate, diff), 'key');
         },
         onUpDown: function onUpDown(diff) {
-          _onSelect(generateConfig.addMonth(value || viewDate, diff * MonthBody_1.MONTH_COL_COUNT));
+          _onSelect(generateConfig.addMonth(value || viewDate, diff * MonthBody_1.MONTH_COL_COUNT), 'key');
         },
@@ -82,3 +82,3 @@ onEnter: function onEnter() {
     onSelect: function onSelect(date) {
-      _onSelect(date);
+      _onSelect(date, 'mouse');
 
@@ -85,0 +85,0 @@ onPanelChange('date', date);

lib/panels/TimePanel/index.js

@@ -86,3 +86,3 @@ "use strict";
         onEnter: function onEnter() {
-          onSelect(value || generateConfig.getNow());
+          onSelect(value || generateConfig.getNow(), 'key');
           setActiveColumnIndex(-1);
@@ -89,0 +89,0 @@ }

lib/panels/TimePanel/TimeBody.d.ts

 import * as React from 'react';
 import { GenerateConfig } from '../../generate';
-import { Locale } from '../../interface';
+import { Locale, OnSelect } from '../../interface';
 import { SharedTimeProps } from '.';
@@ -13,3 +13,3 @@ export interface BodyOperationRef {
     value?: DateType | null;
-    onSelect: (value: DateType) => void;
+    onSelect: OnSelect<DateType>;
     activeColumnIndex: number;
@@ -16,0 +16,0 @@ operationRef: React.MutableRefObject<BodyOperationRef | undefined>;

lib/panels/TimePanel/TimeBody.js

@@ -139,3 +139,3 @@ "use strict";
   }), hour, hours, function (num) {
-    onSelect(setTime(isPM, num, minute, second));
+    onSelect(setTime(isPM, num, minute, second), 'mouse');
   }); // Minute
@@ -146,3 +146,3 @@
   }), minute, minutes, function (num) {
-    onSelect(setTime(isPM, hour, num, second));
+    onSelect(setTime(isPM, hour, num, second), 'mouse');
   }); // Second
@@ -153,3 +153,3 @@
   }), second, seconds, function (num) {
-    onSelect(setTime(isPM, hour, minute, num));
+    onSelect(setTime(isPM, hour, minute, num), 'mouse');
   }); // 12 Hours
@@ -172,3 +172,3 @@
   }], function (num) {
-    onSelect(setTime(!!num, hour, minute, second));
+    onSelect(setTime(!!num, hour, minute, second), 'mouse');
   });
@@ -175,0 +175,0 @@ return React.createElement("div", {

lib/panels/YearPanel/index.js

@@ -48,9 +48,9 @@ "use strict";
         onLeftRight: function onLeftRight(diff) {
-          _onSelect(generateConfig.addYear(value || viewDate, diff));
+          _onSelect(generateConfig.addYear(value || viewDate, diff), 'key');
         },
         onCtrlLeftRight: function onCtrlLeftRight(diff) {
-          _onSelect(generateConfig.addYear(value || viewDate, diff * exports.YEAR_DECADE_COUNT));
+          _onSelect(generateConfig.addYear(value || viewDate, diff * exports.YEAR_DECADE_COUNT), 'key');
         },
         onUpDown: function onUpDown(diff) {
-          _onSelect(generateConfig.addYear(value || viewDate, diff * YearBody_1.YEAR_COL_COUNT));
+          _onSelect(generateConfig.addYear(value || viewDate, diff * YearBody_1.YEAR_COL_COUNT), 'key');
         },
@@ -86,3 +86,3 @@ onEnter: function onEnter() {
 
-      _onSelect(date);
+      _onSelect(date, 'mouse');
     }
@@ -89,0 +89,0 @@ })));

lib/Picker.js

@@ -71,2 +71,4 @@ "use strict";
 
+var warning_1 = require("rc-util/lib/warning");
+
 var PickerPanel_1 = __importDefault(require("./PickerPanel"));
@@ -203,4 +205,11 @@
     }
+    /* istanbul ignore next */
 
-    return false;
+    /* eslint-disable no-lone-blocks */
+
+
+    {
+      warning_1.warning(false, 'Picker not correct forward KeyDown operation. Please help to fire issue about this.');
+      return false;
+    }
   }; // ============================= Text ==============================
@@ -207,0 +216,0 @@

lib/PickerPanel.js

@@ -117,7 +117,7 @@ "use strict";
   var _React$useContext = React.useContext(RangeContext_1.default),
-      extraFooterSelections = _React$useContext.extraFooterSelections,
       inRange = _React$useContext.inRange,
       panelPosition = _React$useContext.panelPosition,
       rangedValue = _React$useContext.rangedValue,
-      hoverRangedValue = _React$useContext.hoverRangedValue;
+      hoverRangedValue = _React$useContext.hoverRangedValue,
+      onContextSelect = _React$useContext.onSelect;
 
@@ -187,9 +187,3 @@ var panelRef = React.useRef({}); // Handle init logic
 
-  var mergedMode = mode || innerMode; // const mergedMode: PanelMode = React.useMemo(() => {
-  //   const newMode = mode || innerMode;
-  //   if (newMode === 'date' && showTime) {
-  //     return 'datetime';
-  //   }
-  //   return newMode;
-  // }, [mode || innerMode]);
+  var mergedMode = mode || innerMode;
 
@@ -205,4 +199,4 @@ var onInternalPanelChange = function onInternalPanelChange(newMode, viewValue) {
 
-  var triggerSelect = function triggerSelect(date) {
-    var forceTriggerSelect = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var triggerSelect = function triggerSelect(date, type) {
+    var forceTriggerSelect = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
 
@@ -212,2 +206,6 @@ if (mergedMode === picker || forceTriggerSelect) {
 
+      if (onContextSelect) {
+        onContextSelect(date, type);
+      }
+
       if (onSelect) {
@@ -288,5 +286,5 @@ onSelect(date);
       panelNode = React.createElement(DecadePanel_1.default, Object.assign({}, pickerProps, {
-        onSelect: function onSelect(date) {
+        onSelect: function onSelect(date, type) {
           setViewDate(date);
-          triggerSelect(date);
+          triggerSelect(date, type);
         }
@@ -298,5 +296,5 @@ }));
       panelNode = React.createElement(YearPanel_1.default, Object.assign({}, pickerProps, {
-        onSelect: function onSelect(date) {
+        onSelect: function onSelect(date, type) {
           setViewDate(date);
-          triggerSelect(date);
+          triggerSelect(date, type);
         }
@@ -308,5 +306,5 @@ }));
       panelNode = React.createElement(MonthPanel_1.default, Object.assign({}, pickerProps, {
-        onSelect: function onSelect(date) {
+        onSelect: function onSelect(date, type) {
           setViewDate(date);
-          triggerSelect(date);
+          triggerSelect(date, type);
         }
@@ -318,5 +316,5 @@ }));
       panelNode = React.createElement(WeekPanel_1.default, Object.assign({}, pickerProps, {
-        onSelect: function onSelect(date) {
+        onSelect: function onSelect(date, type) {
           setViewDate(date);
-          triggerSelect(date);
+          triggerSelect(date, type);
         }
@@ -329,5 +327,5 @@ }));
       panelNode = React.createElement(TimePanel_1.default, Object.assign({}, pickerProps, _typeof(showTime) === 'object' ? showTime : null, {
-        onSelect: function onSelect(date) {
+        onSelect: function onSelect(date, type) {
           setViewDate(date);
-          triggerSelect(date);
+          triggerSelect(date, type);
         }
@@ -340,5 +338,5 @@ }));
         panelNode = React.createElement(DatetimePanel_1.default, Object.assign({}, pickerProps, {
-          onSelect: function onSelect(date) {
+          onSelect: function onSelect(date, type) {
             setViewDate(date);
-            triggerSelect(date);
+            triggerSelect(date, type);
           }
@@ -348,5 +346,5 @@ }));
         panelNode = React.createElement(DatePanel_1.default, Object.assign({}, pickerProps, {
-          onSelect: function onSelect(date) {
+          onSelect: function onSelect(date, type) {
             setViewDate(date);
-            triggerSelect(date);
+            triggerSelect(date, type);
           }
@@ -367,9 +365,19 @@ }));
 
+  var nowNode;
   var todayNode;
 
-  if (showToday && mergedMode === 'date' && picker === 'date' && !showTime) {
+  if (showTime && !inRange) {
+    nowNode = React.createElement("div", {
+      className: "".concat(prefixCls, "-now")
+    }, React.createElement("a", {
+      className: "".concat(prefixCls, "-now-btn"),
+      onClick: function onClick() {
+        triggerSelect(generateConfig.getNow(), 'mouse', true);
+      }
+    }, locale.now));
+  } else if (showToday && mergedMode === 'date' && picker === 'date') {
     todayNode = React.createElement("a", {
       className: "".concat(prefixCls, "-today-btn"),
       onClick: function onClick() {
-        triggerSelect(generateConfig.getNow(), true);
+        triggerSelect(generateConfig.getNow(), 'mouse', true);
       }
@@ -379,29 +387,2 @@ }, locale.today);
 
-  var extraSelectionNode;
-  var mergedSelections = [];
-
-  if (extraFooterSelections && extraFooterSelections.length) {
-    mergedSelections = extraFooterSelections;
-  } else if (showTime && !inRange) {
-    mergedSelections.push({
-      label: locale.now,
-      onClick: function onClick() {
-        triggerSelect(generateConfig.getNow(), true);
-      }
-    });
-  }
-
-  if (mergedSelections.length) {
-    extraSelectionNode = React.createElement("ul", {
-      className: "".concat(prefixCls, "-ranges")
-    }, mergedSelections.map(function (_ref) {
-      var label = _ref.label,
-          onClick = _ref.onClick;
-      return React.createElement("li", {
-        key: label,
-        onClick: onClick
-      }, label);
-    }));
-  }
-
   return React.createElement(PanelContext_1.default.Provider, {
@@ -421,5 +402,5 @@ value: _objectSpread({}, panelContext, {
     ref: panelDivRef
-  }, panelNode, extraFooter || todayNode || extraSelectionNode ? React.createElement("div", {
+  }, panelNode, extraFooter || nowNode || todayNode ? React.createElement("div", {
     className: "".concat(prefixCls, "-footer")
-  }, extraFooter, extraSelectionNode, todayNode) : null));
+  }, extraFooter, nowNode, todayNode) : null));
 }
@@ -426,0 +407,0 @@

lib/RangeContext.d.ts

 import * as React from 'react';
-import { NullableDateType, RangeValue } from './interface';
-export interface FooterSelection {
-    label: string;
-    onClick: React.MouseEventHandler<HTMLElement>;
-}
+import { NullableDateType, RangeValue, OnSelect } from './interface';
 interface RangeContextProps {
-    extraFooterSelections?: FooterSelection[];
     /**
@@ -17,4 +12,5 @@ * Set displayed range value style.
     panelPosition?: 'left' | 'right' | false;
+    onSelect?: OnSelect<any>;
 }
 declare const RangeContext: React.Context<RangeContextProps>;
 export default RangeContext;

lib/RangePicker.d.ts

@@ -21,2 +21,6 @@ import * as React from 'react';
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    /** @private Internal usage. Do not use in your production env */
+    components?: {
+        button: React.ComponentType;
+    };
 }
@@ -23,0 +27,0 @@ declare type OmitPickerProps<Props> = Omit<Props, 'value' | 'defaultValue' | 'defaultPickerValue' | 'placeholder' | 'disabled' | 'disabledTime' | 'showToday' | 'showTime' | 'mode' | 'onChange' | 'onSelect' | 'onPanelChange' | 'pickerValue' | 'onPickerValueChange'>;

lib/RangePicker.js

@@ -59,2 +59,4 @@ "use strict";
 
+var warning_1 = __importDefault(require("rc-util/lib/warning"));
+
 var useMergeState_1 = __importDefault(require("./hooks/useMergeState"));
@@ -92,3 +94,3 @@
 
-function canValueTrigger(value, index, disabledList, allowEmpty) {
+function canValueTrigger(value, index, allowEmpty) {
   if (value) {
@@ -100,7 +102,2 @@ return true;
     return true;
-  } // If another one is disabled, this can be trigger
-
-
-  if (disabledList[(index + 1) % 2]) {
-    return true;
   }
@@ -141,2 +138,4 @@
       disabledDate = props.disabledDate,
+      _disabledTime = props.disabledTime,
+      ranges = props.ranges,
       allowEmpty = props.allowEmpty,
@@ -152,4 +151,6 @@ allowClear = props.allowClear,
       onPanelChange = props.onPanelChange,
+      onCalendarChange = props.onCalendarChange,
       _onFocus = props.onFocus,
-      onBlur = props.onBlur;
+      onBlur = props.onBlur,
+      components = props.components;
   var containerRef = React.useRef(null);
@@ -221,3 +222,7 @@ var panelDivRef = React.useRef(null);
     postState: function postState(postViewDates) {
-      return postViewDates || [miscUtil_1.getValue(mergedValue, 0) || generateConfig.getNow(), miscUtil_1.getValue(mergedValue, 0) || generateConfig.getNow()];
+      var startViewDate = miscUtil_1.getValue(postViewDates, 0) || miscUtil_1.getValue(mergedValue, 0);
+      var endViewDate = miscUtil_1.getValue(postViewDates, 1) || miscUtil_1.getValue(mergedValue, 1);
+      startViewDate = startViewDate || endViewDate || generateConfig.getNow();
+      endViewDate = endViewDate || startViewDate || generateConfig.getNow();
+      return [startViewDate, endViewDate];
     }
@@ -236,3 +241,3 @@ }),
       for (var i = 0; i < 2; i += 1) {
-        if (mergedDisabled[i] && !miscUtil_1.getValue(postValues, i)) {
+        if (mergedDisabled[i] && !miscUtil_1.getValue(postValues, i) && !miscUtil_1.getValue(allowEmpty, i)) {
           postValues = miscUtil_1.updateValues(postValues, generateConfig.getNow(), i);
@@ -343,4 +348,11 @@ }
     setSelectedValue(values);
-    var canStartValueTrigger = canValueTrigger(startValue, 0, mergedDisabled, allowEmpty);
-    var canEndValueTrigger = canValueTrigger(endValue, 1, mergedDisabled, allowEmpty);
+    var startStr = startValue ? generateConfig.locale.format(locale.locale, startValue, formatList[0]) : '';
+    var endStr = endValue ? generateConfig.locale.format(locale.locale, endValue, formatList[0]) : '';
+
+    if (onCalendarChange) {
+      onCalendarChange(values, [startStr, endStr]);
+    }
+
+    var canStartValueTrigger = canValueTrigger(startValue, 0, allowEmpty);
+    var canEndValueTrigger = canValueTrigger(endValue, 1, allowEmpty);
     var canTrigger = values === null || canStartValueTrigger && canEndValueTrigger;
@@ -355,3 +367,3 @@
       if (onChange && (!dateUtil_1.isEqual(generateConfig, miscUtil_1.getValue(mergedValue, 0), startValue) || !dateUtil_1.isEqual(generateConfig, miscUtil_1.getValue(mergedValue, 1), endValue))) {
-        onChange(values, [startValue ? generateConfig.locale.format(locale.locale, startValue, formatList[0]) : '', endValue ? generateConfig.locale.format(locale.locale, endValue, formatList[0]) : '']);
+        onChange(values, [startStr, endStr]);
       }
@@ -399,4 +411,11 @@ } else if (forceInput) {
     }
+    /* istanbul ignore next */
 
-    return false;
+    /* eslint-disable no-lone-blocks */
+
+
+    {
+      warning_1.default(false, 'Picker not correct forward KeyDown operation. Please help to fire issue about this.');
+      return false;
+    }
   }; // ============================= Text ==============================
@@ -465,5 +484,2 @@
         triggerChange(selectedValue);
-
-        _triggerOpen(false, index, true);
-
         resetText();
@@ -500,2 +516,4 @@ },
 
+  var startStr = mergedValue && mergedValue[0] ? generateConfig.locale.format(locale.locale, mergedValue[0], 'YYYYMMDDHHmmss') : '';
+  var endStr = mergedValue && mergedValue[1] ? generateConfig.locale.format(locale.locale, mergedValue[1], 'YYYYMMDDHHmmss') : '';
   React.useEffect(function () {
@@ -508,6 +526,12 @@ if (!mergedOpen) {
   React.useEffect(function () {
-    // Sync select value
     setSelectedValue(mergedValue);
-  }, [mergedValue]); // ============================ Private ============================
+  }, [startStr, endStr]); // ============================ Warning ============================
 
+  if (process.env.NODE_ENV !== 'production') {
+    if (value && Array.isArray(disabled) && (miscUtil_1.getValue(disabled, 0) && !miscUtil_1.getValue(value, 0) || miscUtil_1.getValue(disabled, 1) && !miscUtil_1.getValue(value, 1))) {
+      warning_1.default(false, '`disabled` should not set with empty `value`. You should set `allowEmpty` or `value` instead.');
+    }
+  } // ============================ Private ============================
+
+
   if (pickerRef) {
@@ -544,7 +568,20 @@ pickerRef.current = {
 
-    if (panelShowTime && _typeof(panelShowTime) === 'object' && panelShowTime.defaultValue) {
+    if (showTime && _typeof(showTime) === 'object' && showTime.defaultValue) {
       var timeDefaultValues = showTime.defaultValue;
-      panelShowTime.defaultValue = miscUtil_1.getValue(timeDefaultValues, activePickerIndex) || undefined;
+      panelShowTime = _objectSpread({}, showTime, {
+        defaultValue: miscUtil_1.getValue(timeDefaultValues, activePickerIndex) || undefined
+      });
     }
 
+    var onContextSelect = function onContextSelect(date, type) {
+      var values = miscUtil_1.updateValues(selectedValue, date, activePickerIndex);
+
+      if (type === 'key' || picker === 'date' && showTime) {
+        setSelectedValue(values);
+      } else {
+        // triggerChange will also update selected values
+        triggerChange(values);
+      }
+    };
+
     return React.createElement(RangeContext_1.default.Provider, {
@@ -555,3 +592,4 @@ value: {
         rangedValue: selectedValue,
-        hoverRangedValue: panelHoverRangedValue
+        hoverRangedValue: panelHoverRangedValue,
+        onSelect: onContextSelect
       }
@@ -564,19 +602,13 @@ }, React.createElement(PickerPanel_1.default, Object.assign({}, props, panelProps, {
       disabledDate: activePickerIndex === 0 ? disabledStartDate : disabledEndDate,
-      className: classnames_1.default(_defineProperty({}, "".concat(prefixCls, "-panel-focused"), !startTyping && !endTyping)),
+      disabledTime: function disabledTime(date) {
+        if (_disabledTime) {
+          return _disabledTime(date, activePickerIndex === 0 ? 'start' : 'end');
+        }
+
+        return false;
+      },
+      className: classnames_1.default(_defineProperty({}, "".concat(prefixCls, "-panel-focused"), activePickerIndex === 0 ? !startTyping : !endTyping)),
       value: miscUtil_1.getValue(selectedValue, activePickerIndex),
       locale: locale,
       tabIndex: -1,
-      onMouseDown: function onMouseDown(e) {
-        e.preventDefault();
-      },
-      onSelect: function onSelect(date) {
-        var values = miscUtil_1.updateValues(selectedValue, date, activePickerIndex);
-
-        if (picker === 'date' && showTime) {
-          setSelectedValue(values);
-        } else {
-          // triggerChange will also update selected values
-          triggerChange(values);
-        }
-      },
       onPanelChange: function onPanelChange(date, newMode) {
@@ -586,2 +618,3 @@ triggerModesChange(miscUtil_1.updateValues(mergedModes, newMode, activePickerIndex), miscUtil_1.updateValues(selectedValue, date, activePickerIndex));
       },
+      onSelect: undefined,
       onChange: undefined,
@@ -628,2 +661,29 @@ defaultValue: undefined,
 
+    var rangesNode;
+
+    if (ranges || showTime) {
+      var mergedRanges = ranges || {};
+      var rangeList = Object.keys(mergedRanges);
+      var Button = components && components.button || 'button';
+      rangesNode = React.createElement("ul", {
+        className: "".concat(prefixCls, "-ranges")
+      }, rangeList.map(function (label) {
+        var range = mergedRanges[label];
+        return React.createElement("li", {
+          key: label,
+          onClick: function onClick() {
+            var newValues = Array.isArray(range) ? range : range();
+            triggerChange(newValues);
+          }
+        }, label);
+      }), showTime && React.createElement("li", {
+        className: "".concat(prefixCls, "-ok"),
+        onClick: function onClick() {
+          triggerChange(selectedValue);
+        }
+      }, React.createElement(Button, {
+        disabled: !miscUtil_1.getValue(selectedValue, activePickerIndex)
+      }, locale.ok)));
+    }
+
     return React.createElement("div", {
@@ -634,4 +694,9 @@ className: "".concat(prefixCls, "-panel-container"),
       },
-      ref: panelDivRef
-    }, panels);
+      ref: panelDivRef,
+      onMouseDown: function onMouseDown(e) {
+        e.preventDefault();
+      }
+    }, React.createElement("div", {
+      className: "".concat(prefixCls, "-panels")
+    }, panels), rangesNode);
   }
@@ -649,3 +714,4 @@
     }
-  }), renderPanels());
+  }), renderPanels()); // ============================= Icons =============================
+
   var suffixNode;
@@ -652,0 +718,0 @@

package.json

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

README.md

@@ -120,3 +120,3 @@ # rc-picker
 | use12Hours            | Boolean                                                                        | false                                                 | 12 hours display mode                                                                                                                              |
-| disabledTime          | Function(date: moment, type:'start'                                            | 'end'):Object                                         |                                                                                                                                                    | to specify the time that cannot be selected |
+| disabledTime          | Function(date: moment, type:'start'\|'end'):Object                             |                                         |                                                                                                                                                    | to specify the time that cannot be selected |
 | ranges                | { String \| [range: string]: moment[] } \| { [range: string]: () => moment[] } |                                                       | preseted ranges for quick selection                                                                                                                |
@@ -123,0 +123,0 @@ | format                | String \| String[]                                                             | depends on whether you set timePicker and your locale | use to format/parse date(without time) value to/from input. When an array is provided, all values are used for parsing and first value for display |

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

535575

increased by1.28%

Lines of code

12751

increased by0.94%

Worsened metrics

Number of low supply chain risk alerts

4

increased by100%

No dependency changes