@kdcloudjs/kdesign 1.6.37 → 1.6.39

package/es/config-provider/compDefaultProps.d.ts

@@ -371,6 +371,7 @@ declare const compDefaultProps: {
         viewMode: number;
         aspectRatio: number;
         okText: string;
+        autoCropArea: number;
     };
     Anchor: {
         type: string;

package/es/config-provider/compDefaultProps.js

@@ -384,7 +384,8 @@ var compDefaultProps = {
     dragMode: 'crop',
     viewMode: 0,
     aspectRatio: NaN,
-    okText: '确认裁剪'
+    okText: '确认裁剪',
+    autoCropArea: 0.5
   },
   Anchor: {
     type: 'bookmarks',

package/es/date-picker/date-panel.js

@@ -22,7 +22,10 @@ function Panel(props) {
     locale = context.locale,
     innerPicker = context.innerPicker,
     setInnerPicker = context.setInnerPicker;
-  var isInInnerPicker = innerPicker !== undefined;
+  var isInnerPicker = innerPicker !== undefined;
+  var isPositionLeft = panelPosition === 'left';
+  var isPositionRight = panelPosition === 'right';
+  var isPositionUnset = typeof panelPosition === 'undefined';
   var _props$picker = props.picker,
     picker = _props$picker === void 0 ? 'date' : _props$picker,
     format = props.format,
@@ -51,7 +54,7 @@ function Panel(props) {
     return /*#__PURE__*/React.createElement(Quarter, _extends({}, props));
   };
   var renderDatePanel = function renderDatePanel() {
-    if (isInInnerPicker) {
+    if (isInnerPicker) {
       if (innerPicker === 'year') {
         return renderYearPanel();
       } else {
@@ -192,8 +195,8 @@ function Panel(props) {
         panel = renderYearPanel();
         headerObj = renderYearHeader();
         headerProps = {
-          onSuperPrev: panelPosition === 'right' ? undefined : onSuperPrev,
-          onSuperNext: panelPosition === 'left' ? undefined : onSuperNext
+          onSuperPrev: isPositionRight ? undefined : onSuperPrev,
+          onSuperNext: isPositionLeft ? undefined : onSuperNext
         };
         break;
       }
@@ -202,8 +205,8 @@ function Panel(props) {
         panel = renderMonthPanel();
         headerObj = renderMonthHeader();
         headerProps = {
-          onSuperPrev: panelPosition === 'right' ? undefined : onSuperPrev,
-          onSuperNext: panelPosition === 'left' ? undefined : onSuperNext
+          onSuperPrev: isPositionRight ? undefined : onSuperPrev,
+          onSuperNext: isPositionLeft ? undefined : onSuperNext
         };
         break;
       }
@@ -212,19 +215,20 @@ function Panel(props) {
         panel = renderQuarterPanel();
         headerObj = renderMonthHeader();
         headerProps = {
-          onSuperPrev: panelPosition === 'right' ? undefined : onSuperPrev,
-          onSuperNext: panelPosition === 'left' ? undefined : onSuperNext
+          onSuperPrev: isPositionRight ? undefined : onSuperPrev,
+          onSuperNext: isPositionLeft ? undefined : onSuperNext
         };
         break;
       }
+    // 时间面板，4个箭头的显隐，在时间范围时需要判断是否在快捷选择面板下
     case 'date':
       {
         headerObj = renderDateHeader();
         headerProps = {
-          onPrev: panelPosition === 'right' || isInInnerPicker ? undefined : onPrev,
-          onNext: panelPosition === 'left' || isInInnerPicker ? undefined : onNext,
-          onSuperPrev: panelPosition === 'right' || innerPicker === 'month' ? undefined : onSuperPrev,
-          onSuperNext: panelPosition === 'left' || innerPicker === 'month' ? undefined : onSuperNext
+          onPrev: isPositionLeft && !isInnerPicker || innerPicker === 'month' || isPositionUnset ? onPrev : undefined,
+          onNext: isPositionRight && !isInnerPicker || innerPicker === 'month' || isPositionUnset ? onNext : undefined,
+          onSuperPrev: isPositionLeft && !isInnerPicker || innerPicker === 'year' || isPositionUnset ? onSuperPrev : undefined,
+          onSuperNext: isPositionRight && !isInnerPicker || innerPicker === 'year' || isPositionUnset ? onSuperNext : undefined
         };
         panel = renderDatePanel();
         break;
@@ -234,10 +238,10 @@ function Panel(props) {
         panel = renderDatePanel();
         headerObj = renderDateHeader();
         headerProps = {
-          onPrev: panelPosition === 'right' ? undefined : onPrev,
-          onNext: panelPosition === 'left' ? undefined : onNext,
-          onSuperPrev: panelPosition === 'right' ? undefined : onSuperPrev,
-          onSuperNext: panelPosition === 'left' ? undefined : onSuperNext
+          onPrev: isPositionRight ? undefined : onPrev,
+          onNext: isPositionLeft ? undefined : onNext,
+          onSuperPrev: isPositionRight ? undefined : onSuperPrev,
+          onSuperNext: isPositionLeft ? undefined : onSuperNext
         };
         break;
       }

package/es/date-picker/range-picker.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { ReactNode, Ref, FocusEventHandler, CSSProperties } from 'react';
 import { DateType, RangeValue, EventValue, DisabledTimes, PanelMode, SharedTimeProps } from './interface';
 import { PickerBaseProps, PickerDateProps, PickerTimeProps } from './date-picker';
 export declare type RangeType = 'start' | 'end';
 export interface RangeInfo {
     range: RangeType;
 }
-export declare type RangeDateRender = (currentDate: DateType, today: DateType, info: RangeInfo) => React.ReactNode;
+export declare type RangeDateRender = (currentDate: DateType, today: DateType, info: RangeInfo) => ReactNode;
 export interface RangePickerSharedProps {
     id?: string;
     value?: RangeValue;
@@ -15,23 +15,23 @@ export interface RangePickerSharedProps {
     disabled?: boolean | [boolean, boolean];
     disabledTimePanel?: (date: EventValue, type: RangeType) => DisabledTimes;
     ranges?: Record<string, DateType[] | (() => DateType[])>;
-    separator?: React.ReactNode;
+    separator?: ReactNode;
     allowEmpty?: [boolean, boolean];
-    suffixIcon?: React.ReactNode;
-    clearIcon?: React.ReactNode;
+    suffixIcon?: ReactNode;
+    clearIcon?: ReactNode;
     mode?: [PanelMode, PanelMode];
     onChange?: (values: RangeValue, formatString: [string | null, string | null]) => void;
     onCalendarChange?: (values: RangeValue, formatString: [string | null, string | null], info: RangeInfo) => void;
     onPanelChange?: (values: RangeValue, modes: [PanelMode, PanelMode]) => void;
-    onFocus?: React.FocusEventHandler<HTMLInputElement>;
-    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
     onOk?: (dates: RangeValue) => void;
     activePickerIndex?: 0 | 1;
     dateRender?: RangeDateRender;
-    panelRender?: (originPanel: React.ReactNode) => React.ReactNode;
+    panelRender?: (originPanel: ReactNode) => ReactNode;
     getPopupContainer?: (node: HTMLElement) => HTMLElement;
-    popupRef?: React.Ref<any>;
-    popupStyle?: React.CSSProperties;
+    popupRef?: Ref<any>;
+    popupStyle?: CSSProperties;
     dropdownClassName?: string;
 }
 declare type OmitPickerProps<Props> = Omit<Props, 'value' | 'defaultValue' | 'defaultPickerValue' | 'placeholder' | 'disabled' | 'disabledTimePanel' | 'showToday' | 'showTime' | 'mode' | 'onChange' | 'onSelect' | 'onPanelChange' | 'pickerValue' | 'onPickerValueChange' | 'onOk' | 'dateRender'>;

package/es/date-picker/range-picker.js

@@ -4,10 +4,10 @@ import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState, useRef, useMemo, forwardRef } from 'react';
 import isSameWeek from 'date-fns/isSameWeek';
 import ConfigContext from '../config-provider/ConfigContext';
-import { useMergedState, useOnClickOutside } from '../_utils/hooks';
+import { useMergedState } from '../_utils/hooks';
 import { getCompProps } from '../_utils';
 import Context from './context';
 import Panel from './date-panel';
@@ -115,16 +115,18 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
     componentName: 'DatePicker'
   }), locale || {});
   // ref
-  var panelDivRef = React.useRef(null);
-  var inputDivRef = ref || /*#__PURE__*/React.createRef();
-  var startInputDivRef = React.useRef(null);
-  var endInputDivRef = React.useRef(null);
-  var separatorRef = React.useRef(null);
-  var startInputRef = React.useRef(null);
-  var endInputRef = React.useRef(null);
-  var popperRef = popupRef || /*#__PURE__*/React.createRef();
-  var openRecordsRef = React.useRef({});
-  var mergedDisabled = React.useMemo(function () {
+  var panelDivRef = useRef(null);
+  var defaultRef = useRef(null);
+  var inputDivRef = ref || defaultRef;
+  var startInputDivRef = useRef(null);
+  var endInputDivRef = useRef(null);
+  var separatorRef = useRef(null);
+  var startInputRef = useRef(null);
+  var endInputRef = useRef(null);
+  var defaultPopupRef = useRef(null);
+  var popperRef = popupRef || defaultPopupRef;
+  var openRecordsRef = useRef({});
+  var mergedDisabled = useMemo(function () {
     if (Array.isArray(disabled)) {
       return disabled;
     }
@@ -268,10 +270,10 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
     endText = _useTextValueMapping4[0],
     triggerEndTextChange = _useTextValueMapping4[1],
     resetEndText = _useTextValueMapping4[2];
-  var _React$useState = React.useState([null, null]),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    hoverRangedValue = _React$useState2[0],
-    setHoverRangedValue = _React$useState2[1];
+  var _useState = useState([null, null]),
+    _useState2 = _slicedToArray(_useState, 2),
+    hoverRangedValue = _useState2[0],
+    setHoverRangedValue = _useState2[1];
   var _useHoverValue = useHoverValue(startText, {
       format: _format
     }),
@@ -309,20 +311,13 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
     _useMergedState10 = _slicedToArray(_useMergedState9, 2),
     mergedModes = _useMergedState10[0],
     setInnerModes = _useMergedState10[1];
-  var _useState = useState(undefined),
-    _useState2 = _slicedToArray(_useState, 2),
-    innerPicker = _useState2[0],
-    setInnerPicker = _useState2[1];
+  var _useState3 = useState(undefined),
+    _useState4 = _slicedToArray(_useState3, 2),
+    innerPicker = _useState4[0],
+    setInnerPicker = _useState4[1];
   useEffect(function () {
     setInnerModes([picker, picker]);
   }, [picker]);
-  // const triggerModesChange = (modes: [PanelMode, PanelMode], values: RangeValue) => {
-  //   setInnerModes(modes)
-  //   if (onPanelChange) {
-  //     onPanelChange(values, modes)
-  //   }
-  // }
-  // ========================= Disable Date ==========================
   var _useRangeDisabled = useRangeDisabled({
       picker: picker,
       selectedValue: selectedValue,
@@ -332,11 +327,7 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
     _useRangeDisabled2 = _slicedToArray(_useRangeDisabled, 2),
     disabledStartDate = _useRangeDisabled2[0],
     disabledEndDate = _useRangeDisabled2[1];
-  // const onResetText = () => {
-  //   resetEndText()
-  //   resetStartText()
-  // }
-  var triggerRef = React.useRef();
+  var triggerRef = useRef();
   var triggerOpen = function triggerOpen(newOpen, index) {
     if (newOpen) {
       clearTimeout(triggerRef.current);
@@ -415,22 +406,28 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
       triggerOpen(false, sourceIndex);
     }
   };
-  useOnClickOutside([popperRef, inputDivRef], function () {
-    setViewDate(null, 0);
-    setViewDate(null, 1);
-    setHoverRangedValue([null, null]);
-  });
+  // useOnClickOutside([popperRef, inputDivRef], () => {
+  //   setViewDate(null, 0)
+  //   setViewDate(null, 1)
+  //   setHoverRangedValue([null, null])
+  // })
   var onSelect = function onSelect(date, type) {
     var values = updateValues(selectedValue, date, mergedActivePickerIndex);
-    if (type === 'submit' || type !== 'key' && !needConfirmButton) {
-      triggerChange(values, mergedActivePickerIndex);
-      if (mergedActivePickerIndex === 0) {
-        onStartLeave();
-      } else {
-        onEndLeave();
+    if (type === 'inner') {
+      if (values && values[mergedActivePickerIndex]) {
+        setViewDate(values[mergedActivePickerIndex], mergedActivePickerIndex);
       }
     } else {
-      setSelectedValue(values);
+      if (type === 'submit' || type !== 'key' && !needConfirmButton) {
+        triggerChange(values, mergedActivePickerIndex);
+        if (mergedActivePickerIndex === 0) {
+          onStartLeave();
+        } else {
+          onEndLeave();
+        }
+      } else {
+        setSelectedValue(values);
+      }
     }
   };
   var onDateMouseEnter = function onDateMouseEnter(date) {
@@ -460,6 +457,11 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
       if (!endValueTexts.length || endValueTexts[0] === '') {
         triggerEndTextChange('');
       }
+      setViewDate(null, 0);
+      setViewDate(null, 1);
+      setHoverRangedValue([null, null]);
+    } else {
+      setInnerPicker(undefined);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mergedOpen, startValueTexts, endValueTexts]);
@@ -539,7 +541,7 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
       }, renderPanel());
       panels = /*#__PURE__*/React.createElement("div", {
         className: classNames("".concat(datePickerPrefixCls, "-container-date"))
-      }, leftPanel, rightPanel);
+      }, leftPanel, innerPicker === undefined ? rightPanel : null);
     } else {
       panels = /*#__PURE__*/React.createElement(Context.Provider, {
         value: {
@@ -694,6 +696,6 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
     getPopupContainer: getPopupContainer
   });
 };
-var RangePicker = /*#__PURE__*/React.forwardRef(InternalRangePicker);
+var RangePicker = /*#__PURE__*/forwardRef(InternalRangePicker);
 RangePicker.displayName = 'RangePicker';
 export default RangePicker;

package/es/image-cropper/cropper.d.ts

@@ -19,7 +19,8 @@ export interface CropperProps {
     modal?: boolean;
     zoomOnWheel?: boolean;
     cropBoxMovable?: boolean;
+    autoCropArea?: number;
     onCropSuccess?: () => void;
 }
-declare const Cropper: React.ForwardRefExoticComponent<Pick<CropperProps, "className" | "modal" | "imgSrc" | "dragMode" | "viewMode" | "aspectRatio" | "zoomOnWheel" | "cropBoxMovable" | "onCropSuccess"> & React.RefAttributes<CropperInstance | null>>;
+declare const Cropper: React.ForwardRefExoticComponent<Pick<CropperProps, "className" | "modal" | "imgSrc" | "dragMode" | "viewMode" | "aspectRatio" | "zoomOnWheel" | "cropBoxMovable" | "autoCropArea" | "onCropSuccess"> & React.RefAttributes<CropperInstance | null>>;
 export default Cropper;

package/es/image-cropper/cropper.js

@@ -27,6 +27,7 @@ var Cropper = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
     dragMode = props.dragMode,
     viewMode = props.viewMode,
     aspectRatio = props.aspectRatio,
+    autoCropArea = props.autoCropArea,
     _props$modal = props.modal,
     modal = _props$modal === void 0 ? true : _props$modal,
     _props$zoomOnWheel = props.zoomOnWheel,
@@ -43,9 +44,9 @@ var Cropper = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
       dragMode: dragMode,
       cropBoxMovable: cropBoxMovable,
       modal: modal,
-      autoCropArea: 0.5
+      autoCropArea: autoCropArea
     };
-  }, [aspectRatio, viewMode, zoomOnWheel, dragMode, modal, cropBoxMovable]);
+  }, [aspectRatio, viewMode, zoomOnWheel, dragMode, cropBoxMovable, modal, autoCropArea]);
   useEffect(function () {
     if (!imgRef.current) return;
     if (!imgSrc) return;

package/es/image-cropper/image-cropper.d.ts

@@ -24,6 +24,7 @@ export interface ImageCropperProps {
     customComponents?: customComponentsProps;
     showDeaultToolbar?: boolean;
     cropBoxMovable?: boolean;
+    autoCropArea?: number;
     onClose?: () => void;
     onCropSuccess?: (file: File) => void;
     onCropFailed?: () => void;

package/es/image-cropper/image-cropper.js

@@ -78,7 +78,8 @@ var InternalImageCropper = function InternalImageCropper(props, forwardedRef) {
     cropBoxMovable = _a.cropBoxMovable,
     customComponents = _a.customComponents,
     showDeaultToolbar = _a.showDeaultToolbar,
-    restProps = __rest(_a, ["prefixCls", "containerWidth", "containerHeight", "title", "visible", "onClose", "onCropSuccess", "onCropFailed", "dragMode", "viewMode", "aspectRatio", "modal", "okText", "okBtn", "image", "zoomOnWheel", "imageMaxSize", "cropBoxMovable", "customComponents", "showDeaultToolbar"]);
+    autoCropArea = _a.autoCropArea,
+    restProps = __rest(_a, ["prefixCls", "containerWidth", "containerHeight", "title", "visible", "onClose", "onCropSuccess", "onCropFailed", "dragMode", "viewMode", "aspectRatio", "modal", "okText", "okBtn", "image", "zoomOnWheel", "imageMaxSize", "cropBoxMovable", "customComponents", "showDeaultToolbar", "autoCropArea"]);
   var prefixCls = getPrefixCls(pkgPrefixCls, 'image-cropper', customPrefixcls);
   var handleOkClick = function handleOkClick() {
     return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
@@ -125,6 +126,7 @@ var InternalImageCropper = function InternalImageCropper(props, forwardedRef) {
     zoomOnWheel: zoomOnWheel,
     cropBoxMovable: cropBoxMovable,
     imgSrc: cropperSrc,
+    autoCropArea: autoCropArea,
     ref: cropperRef
   });
   var OperationBarNode = /*#__PURE__*/React.createElement(OperationBar, {

package/es/radio/group.js

@@ -12,14 +12,14 @@ var RadioGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
     getPrefixCls = _React$useContext.getPrefixCls,
     prefixCls = _React$useContext.prefixCls,
     userDefaultProps = _React$useContext.compDefaultProps;
-  var initValue = props.value === undefined ? props.defaultValue : props.value;
+  var initValue = typeof props.value === 'undefined' ? props.defaultValue : props.value;
   var _React$useState = React.useState(initValue),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     value = _React$useState2[0],
     setValue = _React$useState2[1];
   // 从props更新value值
   React.useEffect(function () {
-    if (props.value !== undefined) {
+    if (typeof props.value !== 'undefined') {
       setValue(props.value);
     }
   }, [props.value]);

package/es/radio/radio.js

@@ -57,7 +57,9 @@ var InternalRadio = function InternalRadio(props, ref) {
   }, [checked, defaultChecked, context === null || context === void 0 ? void 0 : context.value]);
   var onChange = function onChange(e) {
     if (disabled) return;
-    setIsChecked(e.target.checked);
+    if (typeof (context === null || context === void 0 ? void 0 : context.value) === 'undefined') {
+      setIsChecked(e.target.checked);
+    }
     if (props.onChange) {
       props.onChange(e);
     }

package/lib/config-provider/compDefaultProps.d.ts

@@ -371,6 +371,7 @@ declare const compDefaultProps: {
         viewMode: number;
         aspectRatio: number;
         okText: string;
+        autoCropArea: number;
     };
     Anchor: {
         type: string;

package/lib/config-provider/compDefaultProps.js

@@ -395,7 +395,8 @@ var compDefaultProps = {
     dragMode: 'crop',
     viewMode: 0,
     aspectRatio: NaN,
-    okText: '确认裁剪'
+    okText: '确认裁剪',
+    autoCropArea: 0.5
   },
   Anchor: {
     type: 'bookmarks',

package/lib/date-picker/date-panel.js

@@ -34,7 +34,10 @@ function Panel(props) {
     locale = context.locale,
     innerPicker = context.innerPicker,
     setInnerPicker = context.setInnerPicker;
-  var isInInnerPicker = innerPicker !== undefined;
+  var isInnerPicker = innerPicker !== undefined;
+  var isPositionLeft = panelPosition === 'left';
+  var isPositionRight = panelPosition === 'right';
+  var isPositionUnset = typeof panelPosition === 'undefined';
   var _props$picker = props.picker,
     picker = _props$picker === void 0 ? 'date' : _props$picker,
     format = props.format,
@@ -63,7 +66,7 @@ function Panel(props) {
     return /*#__PURE__*/_react.default.createElement(_quarter.default, (0, _extends2.default)({}, props));
   };
   var renderDatePanel = function renderDatePanel() {
-    if (isInInnerPicker) {
+    if (isInnerPicker) {
       if (innerPicker === 'year') {
         return renderYearPanel();
       } else {
@@ -204,8 +207,8 @@ function Panel(props) {
         panel = renderYearPanel();
         headerObj = renderYearHeader();
         headerProps = {
-          onSuperPrev: panelPosition === 'right' ? undefined : onSuperPrev,
-          onSuperNext: panelPosition === 'left' ? undefined : onSuperNext
+          onSuperPrev: isPositionRight ? undefined : onSuperPrev,
+          onSuperNext: isPositionLeft ? undefined : onSuperNext
         };
         break;
       }
@@ -214,8 +217,8 @@ function Panel(props) {
         panel = renderMonthPanel();
         headerObj = renderMonthHeader();
         headerProps = {
-          onSuperPrev: panelPosition === 'right' ? undefined : onSuperPrev,
-          onSuperNext: panelPosition === 'left' ? undefined : onSuperNext
+          onSuperPrev: isPositionRight ? undefined : onSuperPrev,
+          onSuperNext: isPositionLeft ? undefined : onSuperNext
         };
         break;
       }
@@ -224,19 +227,20 @@ function Panel(props) {
         panel = renderQuarterPanel();
         headerObj = renderMonthHeader();
         headerProps = {
-          onSuperPrev: panelPosition === 'right' ? undefined : onSuperPrev,
-          onSuperNext: panelPosition === 'left' ? undefined : onSuperNext
+          onSuperPrev: isPositionRight ? undefined : onSuperPrev,
+          onSuperNext: isPositionLeft ? undefined : onSuperNext
         };
         break;
       }
+    // 时间面板，4个箭头的显隐，在时间范围时需要判断是否在快捷选择面板下
     case 'date':
       {
         headerObj = renderDateHeader();
         headerProps = {
-          onPrev: panelPosition === 'right' || isInInnerPicker ? undefined : onPrev,
-          onNext: panelPosition === 'left' || isInInnerPicker ? undefined : onNext,
-          onSuperPrev: panelPosition === 'right' || innerPicker === 'month' ? undefined : onSuperPrev,
-          onSuperNext: panelPosition === 'left' || innerPicker === 'month' ? undefined : onSuperNext
+          onPrev: isPositionLeft && !isInnerPicker || innerPicker === 'month' || isPositionUnset ? onPrev : undefined,
+          onNext: isPositionRight && !isInnerPicker || innerPicker === 'month' || isPositionUnset ? onNext : undefined,
+          onSuperPrev: isPositionLeft && !isInnerPicker || innerPicker === 'year' || isPositionUnset ? onSuperPrev : undefined,
+          onSuperNext: isPositionRight && !isInnerPicker || innerPicker === 'year' || isPositionUnset ? onSuperNext : undefined
         };
         panel = renderDatePanel();
         break;
@@ -246,10 +250,10 @@ function Panel(props) {
         panel = renderDatePanel();
         headerObj = renderDateHeader();
         headerProps = {
-          onPrev: panelPosition === 'right' ? undefined : onPrev,
-          onNext: panelPosition === 'left' ? undefined : onNext,
-          onSuperPrev: panelPosition === 'right' ? undefined : onSuperPrev,
-          onSuperNext: panelPosition === 'left' ? undefined : onSuperNext
+          onPrev: isPositionRight ? undefined : onPrev,
+          onNext: isPositionLeft ? undefined : onNext,
+          onSuperPrev: isPositionRight ? undefined : onSuperPrev,
+          onSuperNext: isPositionLeft ? undefined : onSuperNext
         };
         break;
       }

package/lib/date-picker/range-picker.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { ReactNode, Ref, FocusEventHandler, CSSProperties } from 'react';
 import { DateType, RangeValue, EventValue, DisabledTimes, PanelMode, SharedTimeProps } from './interface';
 import { PickerBaseProps, PickerDateProps, PickerTimeProps } from './date-picker';
 export declare type RangeType = 'start' | 'end';
 export interface RangeInfo {
     range: RangeType;
 }
-export declare type RangeDateRender = (currentDate: DateType, today: DateType, info: RangeInfo) => React.ReactNode;
+export declare type RangeDateRender = (currentDate: DateType, today: DateType, info: RangeInfo) => ReactNode;
 export interface RangePickerSharedProps {
     id?: string;
     value?: RangeValue;
@@ -15,23 +15,23 @@ export interface RangePickerSharedProps {
     disabled?: boolean | [boolean, boolean];
     disabledTimePanel?: (date: EventValue, type: RangeType) => DisabledTimes;
     ranges?: Record<string, DateType[] | (() => DateType[])>;
-    separator?: React.ReactNode;
+    separator?: ReactNode;
     allowEmpty?: [boolean, boolean];
-    suffixIcon?: React.ReactNode;
-    clearIcon?: React.ReactNode;
+    suffixIcon?: ReactNode;
+    clearIcon?: ReactNode;
     mode?: [PanelMode, PanelMode];
     onChange?: (values: RangeValue, formatString: [string | null, string | null]) => void;
     onCalendarChange?: (values: RangeValue, formatString: [string | null, string | null], info: RangeInfo) => void;
     onPanelChange?: (values: RangeValue, modes: [PanelMode, PanelMode]) => void;
-    onFocus?: React.FocusEventHandler<HTMLInputElement>;
-    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
     onOk?: (dates: RangeValue) => void;
     activePickerIndex?: 0 | 1;
     dateRender?: RangeDateRender;
-    panelRender?: (originPanel: React.ReactNode) => React.ReactNode;
+    panelRender?: (originPanel: ReactNode) => ReactNode;
     getPopupContainer?: (node: HTMLElement) => HTMLElement;
-    popupRef?: React.Ref<any>;
-    popupStyle?: React.CSSProperties;
+    popupRef?: Ref<any>;
+    popupStyle?: CSSProperties;
     dropdownClassName?: string;
 }
 declare type OmitPickerProps<Props> = Omit<Props, 'value' | 'defaultValue' | 'defaultPickerValue' | 'placeholder' | 'disabled' | 'disabledTimePanel' | 'showToday' | 'showTime' | 'mode' | 'onChange' | 'onSelect' | 'onPanelChange' | 'pickerValue' | 'onPickerValueChange' | 'onOk' | 'dateRender'>;