rsuite 5.48.1 → 5.50.0

package/cjs/DatePicker/Toolbar.js

@@ -7,20 +7,15 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _utils = require("../utils");
 var _PredefinedRanges = _interopRequireDefault(require("./PredefinedRanges"));
 var _Stack = _interopRequireDefault(require("../Stack"));
 var SubmitButton = function SubmitButton(_ref) {
-  var hide = _ref.hide,
-    disabledOkBtn = _ref.disabledOkBtn,
+  var disabledOkBtn = _ref.disabledOkBtn,
     calendarDate = _ref.calendarDate,
     onOk = _ref.onOk,
     children = _ref.children;
-  if (hide) {
-    return null;
-  }
   var disabled = disabledOkBtn === null || disabledOkBtn === void 0 ? void 0 : disabledOkBtn(calendarDate);
   return /*#__PURE__*/_react.default.createElement(_Button.default, {
     appearance: "primary",
@@ -33,7 +28,7 @@ var SubmitButton = function SubmitButton(_ref) {
 /**
  * Toolbar for DatePicker and DateRangePicker
  */
-var Toolbar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+var Toolbar = /*#__PURE__*/_react.default.forwardRef(function Toolbar(props, ref) {
   var className = props.className,
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'picker-toolbar' : _props$classPrefix,
@@ -66,27 +61,15 @@ var Toolbar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     calendarDate: calendarDate,
     locale: locale,
     disabledShortcut: disabledShortcut,
-    onShortcutClick: onShortcutClick
+    onShortcutClick: onShortcutClick,
+    "data-testid": "daterange-predefined-bottom"
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: prefix('right')
-  }, /*#__PURE__*/_react.default.createElement(SubmitButton, {
+  }, !hideOkBtn && /*#__PURE__*/_react.default.createElement(SubmitButton, {
     disabledOkBtn: disabledOkBtn,
-    hide: hideOkBtn,
     calendarDate: calendarDate,
     onOk: onOk
   }, locale === null || locale === void 0 ? void 0 : locale.ok)));
 });
-Toolbar.displayName = 'Toolbar';
-Toolbar.propTypes = {
-  ranges: _propTypes.default.array,
-  className: _propTypes.default.string,
-  classPrefix: _propTypes.default.string,
-  calendarDate: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date))]).isRequired,
-  onShortcutClick: _propTypes.default.func,
-  onOk: _propTypes.default.func,
-  disabledShortcut: _propTypes.default.func,
-  disabledOkBtn: _propTypes.default.func,
-  hideOkBtn: _propTypes.default.bool
-};
 var _default = Toolbar;
 exports.default = _default;

package/cjs/DatePicker/utils.d.ts

@@ -1,5 +1,5 @@
 import { ToolbarProps } from './Toolbar';
-import { InnerRange } from './types';
+import { InnerRange, RangeType } from './types';
 import { DateRange } from '../DateRangePicker/types';
 export declare function getDefaultRanges<T extends Date | DateRange>(value: T): InnerRange<T>[];
 /**
@@ -8,3 +8,7 @@ export declare function getDefaultRanges<T extends Date | DateRange>(value: T):
  * @param calendarDate
  */
 export declare const getRanges: <T extends Date | DateRange>({ ranges, calendarDate }: Pick<ToolbarProps<T, T>, "calendarDate" | "ranges">) => InnerRange<T>[];
+export declare function splitRanges(ranges?: RangeType<Date>[]): {
+    sideRanges: RangeType<Date>[];
+    bottomRanges: RangeType<Date>[];
+};

package/cjs/DatePicker/utils.js

@@ -4,6 +4,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.getDefaultRanges = getDefaultRanges;
+exports.splitRanges = splitRanges;
 exports.getRanges = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
@@ -58,4 +59,19 @@ var getRanges = function getRanges(_ref3) {
     calendarDate: calendarDate
   }));
 };
-exports.getRanges = getRanges;
+exports.getRanges = getRanges;
+function splitRanges(ranges) {
+  // The shortcut option on the left side of the calendar panel
+  var sideRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
+    return (range === null || range === void 0 ? void 0 : range.placement) === 'left';
+  })) || [];
+
+  // The shortcut option on the bottom of the calendar panel
+  var bottomRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
+    return (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined;
+  })) || [];
+  return {
+    sideRanges: sideRanges,
+    bottomRanges: bottomRanges
+  };
+}

package/cjs/DateRangeInput/DateRangeInput.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { InputProps } from '../Input';
+import { FormControlBaseProps } from '../@types/common';
+declare type ValueType = [Date | null, Date | null] | null;
+export interface DateRangeInputProps extends Omit<InputProps, 'value' | 'onChange' | 'defaultValue'>, FormControlBaseProps<ValueType> {
+    /**
+     * The character between the start and end dates.
+     * @default ' ~ '
+     **/
+    character?: string;
+    /**
+     * Format of the date when rendered in the input. Format of the string is based on Unicode Technical Standard.
+     *
+     * @see https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
+     * @default 'yyyy-MM-dd'
+     **/
+    format?: string;
+    /**
+     * The `placeholder` prop defines the text displayed in a form control when the control has no value.
+     */
+    placeholder?: string;
+}
+/**
+ * The DateRangeInput component lets users select a date with the keyboard.
+ * @version 5.59.0
+ * @see https://rsuitejs.com/components/date-range-input/
+ */
+declare const DateRangeInput: React.ForwardRefExoticComponent<DateRangeInputProps & React.RefAttributes<unknown>>;
+export default DateRangeInput;

package/cjs/DateRangeInput/DateRangeInput.js

@@ -0,0 +1,244 @@
+'use client';
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Input = _interopRequireDefault(require("../Input"));
+var _utils = require("../utils");
+var _DateInput = require("../DateInput");
+var _utils2 = require("./utils");
+/**
+ * The DateRangeInput component lets users select a date with the keyboard.
+ * @version 5.59.0
+ * @see https://rsuitejs.com/components/date-range-input/
+ */
+var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var className = props.className,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'date-range-input' : _props$classPrefix,
+    _props$character = props.character,
+    character = _props$character === void 0 ? ' ~ ' : _props$character,
+    _props$format = props.format,
+    formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,
+    valueProp = props.value,
+    _props$defaultValue = props.defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? [] : _props$defaultValue,
+    placeholder = props.placeholder,
+    onChange = props.onChange,
+    onKeyDown = props.onKeyDown,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["className", "classPrefix", "character", "format", "value", "defaultValue", "placeholder", "onChange", "onKeyDown", "onBlur", "onFocus"]);
+  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+    withClassPrefix = _useClassNames.withClassPrefix,
+    merge = _useClassNames.merge;
+  var classes = merge(className, withClassPrefix());
+  var inputRef = (0, _react.useRef)();
+  var _useState = (0, _react.useState)({
+      selectedPattern: 'y',
+      selectionStart: 0,
+      selectionEnd: 0
+    }),
+    selectedState = _useState[0],
+    setSelectedState = _useState[1];
+  var _useCustom = (0, _utils.useCustom)('Calendar'),
+    locale = _useCustom.locale;
+  var rangeFormatStr = "" + formatStr + character + formatStr;
+  var dateLocale = locale.dateLocale;
+  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),
+    value = _useControlled[0],
+    setValue = _useControlled[1],
+    isControlled = _useControlled[2];
+  var _useState2 = (0, _react.useState)(_utils2.DateType.Start),
+    dateType = _useState2[0],
+    setDateType = _useState2[1];
+  var dateInputOptions = {
+    formatStr: formatStr,
+    locale: dateLocale,
+    isControlledDate: isControlled
+  };
+  var startDateState = (0, _DateInput.useDateInputState)((0, _extends2.default)({}, dateInputOptions, {
+    date: (value === null || value === void 0 ? void 0 : value[0]) || null
+  }));
+  var endDateState = (0, _DateInput.useDateInputState)((0, _extends2.default)({}, dateInputOptions, {
+    date: (value === null || value === void 0 ? void 0 : value[1]) || null
+  }));
+  var getActiveState = function getActiveState(type) {
+    if (type === void 0) {
+      type = dateType;
+    }
+    return type === _utils2.DateType.Start ? startDateState : endDateState;
+  };
+  var _useIsFocused = (0, _DateInput.useIsFocused)({
+      onBlur: onBlur,
+      onFocus: onFocus
+    }),
+    focused = _useIsFocused[0],
+    focusEventProps = _useIsFocused[1];
+  var renderedValue = (0, _react.useMemo)(function () {
+    var dateString = startDateState.toDateString() + character + endDateState.toDateString();
+    if (!startDateState.isEmptyValue() || !endDateState.isEmptyValue()) {
+      return dateString;
+    }
+    return !focused ? '' : dateString;
+  }, [character, endDateState, focused, startDateState]);
+  var keyPressOptions = {
+    formatStr: formatStr,
+    rangeFormatStr: rangeFormatStr,
+    localize: dateLocale.localize,
+    selectedMonth: getActiveState().dateField.month,
+    dateString: renderedValue,
+    dateType: dateType,
+    character: character
+  };
+  var setSelectionRange = (0, _DateInput.useInputSelection)(inputRef);
+  var handleChange = (0, _utils.useEventCallback)(function (date, event) {
+    var nextValue = dateType === _utils2.DateType.Start ? [date, value === null || value === void 0 ? void 0 : value[1]] : [value === null || value === void 0 ? void 0 : value[0], date];
+    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
+    setValue(nextValue);
+  });
+  var onSegmentChange = (0, _utils.useEventCallback)(function (event, nextDirection) {
+    var input = event.target;
+    var key = event.key;
+    var direction = nextDirection || (key === 'ArrowRight' ? 'right' : 'left');
+    if (input.selectionEnd === null || input.selectionStart === null) {
+      return;
+    }
+    var cursorIndex = direction === 'right' ? input.selectionEnd : input.selectionStart;
+    var nextDateType = dateType;
+    if ((0, _utils2.isSwitchDateType)(renderedValue, character, cursorIndex, direction)) {
+      nextDateType = dateType === _utils2.DateType.Start ? _utils2.DateType.End : _utils2.DateType.Start;
+      setDateType(nextDateType);
+    }
+    var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {
+      dateType: nextDateType,
+      selectedMonth: getActiveState(nextDateType).dateField.month,
+      input: input,
+      direction: direction
+    }));
+    setSelectionRange(state.selectionStart, state.selectionEnd);
+    setSelectedState(state);
+  });
+  var onSegmentValueChange = (0, _utils.useEventCallback)(function (event) {
+    var input = event.target;
+    var key = event.key;
+    var offset = key === 'ArrowUp' ? 1 : -1;
+    var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {
+      input: input,
+      valueOffset: offset
+    }));
+    setSelectedState(state);
+    getActiveState().setDateOffset(state.selectedPattern, offset, function (date) {
+      return handleChange(date, event);
+    });
+    setSelectionRange(state.selectionStart, state.selectionEnd);
+  });
+  var onSegmentValueChangeWithNumericKeys = (0, _utils.useEventCallback)(function (event) {
+    var input = event.target;
+    var key = event.key;
+    var pattern = selectedState.selectedPattern;
+    if (!pattern) {
+      return;
+    }
+    var field = getActiveState().getDateField(pattern);
+    var value = parseInt(key, 10);
+    var padValue = parseInt("" + (field.value || '') + key, 10);
+    var newValue = value;
+
+    // Check if the value entered by the user is a valid date
+    if ((0, _DateInput.validateDateTime)(field.name, padValue)) {
+      newValue = padValue;
+    }
+    if (pattern === 'M') {
+      // Month cannot be less than 1.
+      newValue = Math.max(1, newValue);
+    }
+    getActiveState().setDateField(pattern, newValue, function (date) {
+      return handleChange(date, event);
+    });
+
+    // The currently selected month will be retained as a parameter of getInputSelectedState,
+    // but if the user enters a month, the month value will be replaced with the value entered by the user.
+    var selectedMonth = pattern === 'M' ? newValue : getActiveState().dateField.month;
+    var nextState = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {
+      input: input,
+      selectedMonth: selectedMonth
+    }));
+    setSelectedState(nextState);
+    setSelectionRange(nextState.selectionStart, nextState.selectionEnd);
+
+    // If the field is full value, move the cursor to the next field
+    if ((0, _DateInput.isFieldFullValue)(formatStr, newValue, pattern) && input.selectionEnd !== input.value.length) {
+      onSegmentChange(event, 'right');
+    }
+  });
+  var onSegmentValueRemove = (0, _utils.useEventCallback)(function (event) {
+    var input = event.target;
+    if (selectedState.selectedPattern) {
+      var nextState = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {
+        input: input,
+        valueOffset: null
+      }));
+      setSelectedState(nextState);
+      setSelectionRange(nextState.selectionStart, nextState.selectionEnd);
+      getActiveState().setDateField(selectedState.selectedPattern, null, function (date) {
+        return handleChange(date, event);
+      });
+    }
+  });
+  var handleClick = (0, _utils.useEventCallback)(function (event) {
+    var input = event.target;
+    if (input.selectionStart === null) {
+      return;
+    }
+    var cursorIndex = input.selectionStart === renderedValue.length ? 0 : input.selectionStart;
+    var dateType = (0, _utils2.getDateType)(renderedValue, character, cursorIndex);
+    var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {
+      dateType: dateType,
+      selectedMonth: getActiveState(dateType).dateField.month,
+      input: input
+    }));
+    setDateType(dateType);
+    setSelectedState(state);
+    setSelectionRange(state.selectionStart, state.selectionEnd);
+  });
+  var onKeyboardInput = (0, _DateInput.useKeyboardInputEvent)({
+    onSegmentChange: onSegmentChange,
+    onSegmentValueChange: onSegmentValueChange,
+    onSegmentValueChangeWithNumericKeys: onSegmentValueChangeWithNumericKeys,
+    onSegmentValueRemove: onSegmentValueRemove,
+    onKeyDown: onKeyDown
+  });
+  return /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({
+    inputMode: focused ? 'numeric' : 'text',
+    autoComplete: "off",
+    autoCorrect: "off",
+    spellCheck: false,
+    className: classes,
+    ref: (0, _utils.mergeRefs)(inputRef, ref),
+    onKeyDown: onKeyboardInput,
+    onClick: handleClick,
+    value: renderedValue,
+    placeholder: placeholder || rangeFormatStr
+  }, focusEventProps, rest));
+});
+DateRangeInput.displayName = 'DateRangeInput';
+DateRangeInput.propTypes = {
+  character: _propTypes.default.string,
+  className: _propTypes.default.string,
+  classPrefix: _propTypes.default.string,
+  format: _propTypes.default.string,
+  placeholder: _propTypes.default.string,
+  onChange: _propTypes.default.func,
+  onKeyDown: _propTypes.default.func,
+  onFocus: _propTypes.default.func,
+  onBlur: _propTypes.default.func
+};
+var _default = DateRangeInput;
+exports.default = _default;

package/cjs/DateRangeInput/index.d.ts

@@ -0,0 +1,3 @@
+import DateRangeInput from './DateRangeInput';
+export type { DateRangeInputProps } from './DateRangeInput';
+export default DateRangeInput;

package/cjs/DateRangeInput/index.js

@@ -0,0 +1,9 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _DateRangeInput = _interopRequireDefault(require("./DateRangeInput"));
+var _default = _DateRangeInput.default;
+exports.default = _default;

package/cjs/DateRangeInput/utils.d.ts

@@ -0,0 +1,61 @@
+import { type Locale } from 'date-fns';
+export declare enum DateType {
+    Start = "Start",
+    End = "End"
+}
+interface SelectedStateOptions {
+    /**
+     * The input element
+     */
+    input: HTMLInputElement;
+    /**
+     * The direction of the arrow key, left or right
+     */
+    direction?: 'left' | 'right';
+    /**
+     * Format of the string is based on Unicode Technical Standard.
+     * @see https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
+     */
+    formatStr: string;
+    /**
+     * The format string of the range, which is used to calculate the selection range.
+     */
+    rangeFormatStr: string;
+    /**
+     * The locale object, date-fns locale object
+     */
+    localize: Locale['localize'];
+    /**
+     * The selected month, used to calculate the offset of the character selection range
+     */
+    selectedMonth: number | null;
+    /**
+     * The offset of the value, which is used to calculate the month.
+     * This value will be changed when pressing the up and down arrow keys.
+     */
+    valueOffset?: number | null;
+    /**
+     * The date is rendered in string format according to format
+     */
+    dateString: string;
+    /**
+     * The character that separates two dates
+     *
+     * Only for `DateRangeInput`
+     **/
+    character: string;
+    /**
+     * The date type, start or end
+     *
+     * Only for `DateRangeInput`
+     */
+    dateType: DateType;
+}
+export declare function getInputSelectedState(options: SelectedStateOptions): {
+    selectionStart: number;
+    selectionEnd: number;
+    selectedPattern: string;
+};
+export declare function getDateType(dateString: string, character: string, cursorIndex: number): DateType;
+export declare function isSwitchDateType(dateString: string, character: string, cursorIndex: number, direction: 'right' | 'left'): boolean;
+export {};

package/cjs/DateRangeInput/utils.js

@@ -0,0 +1,146 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.getInputSelectedState = getInputSelectedState;
+exports.getDateType = getDateType;
+exports.isSwitchDateType = isSwitchDateType;
+exports.DateType = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _DateInput = require("../DateInput");
+var DateType;
+exports.DateType = DateType;
+(function (DateType) {
+  DateType["Start"] = "Start";
+  DateType["End"] = "End";
+})(DateType || (exports.DateType = DateType = {}));
+function getInputSelectedState(options) {
+  var input = options.input,
+    direction = options.direction,
+    formatStr = options.formatStr,
+    rangeFormatStr = options.rangeFormatStr,
+    localize = options.localize,
+    selectedMonth = options.selectedMonth,
+    _options$valueOffset = options.valueOffset,
+    valueOffset = _options$valueOffset === void 0 ? 0 : _options$valueOffset,
+    character = options.character,
+    dateType = options.dateType,
+    dateString = options.dateString;
+  var getPatternSelectedIndexes = function getPatternSelectedIndexes(pattern) {
+    var selectionStart = 0;
+    var selectionEnd = 0;
+    if (dateType === DateType.Start) {
+      selectionStart = rangeFormatStr.indexOf(pattern);
+      selectionEnd = rangeFormatStr.split(character)[0].lastIndexOf(pattern) + 1;
+    } else if (dateType === DateType.End) {
+      var position = rangeFormatStr.indexOf(character) + character.length;
+      selectionStart = rangeFormatStr.indexOf(pattern, position);
+      selectionEnd = rangeFormatStr.lastIndexOf(pattern) + 1;
+    }
+    var endDateGap = dateString.indexOf(character) - rangeFormatStr.indexOf(character);
+
+    // If the date type is end, and the end date is not selected, the selection range needs to be adjusted.
+    if (dateType === DateType.End && endDateGap > 0) {
+      selectionStart += endDateGap;
+      selectionEnd += endDateGap;
+    }
+    var gap = (0, _DateInput.getSelectIndexGap)({
+      pattern: pattern,
+      formatStr: formatStr,
+      valueOffset: valueOffset,
+      selectedMonth: selectedMonth,
+      localize: localize
+    });
+    var isSelectedMonth = pattern === 'M';
+    var isNullMonth = selectedMonth === null && !(isSelectedMonth && valueOffset !== 0);
+
+    // If the month is null and the valueOffset is 0, the month will not be updated, and the gap is 0 at this time.
+    if (isNullMonth) {
+      return {
+        selectionStart: selectionStart,
+        selectionEnd: selectionEnd
+      };
+    }
+    if (isSelectedMonth) {
+      return {
+        selectionStart: selectionStart,
+        selectionEnd: selectionEnd + gap
+      };
+    }
+    if ((0, _DateInput.isCursorAfterMonth)(selectionStart, formatStr)) {
+      return {
+        selectionStart: selectionStart + gap,
+        selectionEnd: selectionEnd + gap
+      };
+    }
+    return {
+      selectionStart: selectionStart,
+      selectionEnd: selectionEnd
+    };
+  };
+  if (typeof input.selectionEnd === 'number' && typeof input.selectionStart === 'number') {
+    var index = input.selectionStart;
+    var positionOffset = -1;
+    if (direction === 'left') {
+      index = input.selectionStart - 1;
+    } else if (direction === 'right') {
+      index = input.selectionEnd + 1;
+      positionOffset = 1;
+    }
+
+    // The start position of the index of the end date
+    var endDateIndex = dateString.indexOf(character) + character.length;
+    var datePattern = (0, _DateInput.getDatePattern)({
+      selectionIndex: dateType === DateType.End ? index - endDateIndex : index,
+      positionOffset: positionOffset,
+      formatStr: formatStr,
+      dateString: dateString,
+      valueOffset: valueOffset,
+      selectedMonth: selectedMonth,
+      localize: localize
+    });
+    var indexes = getPatternSelectedIndexes(datePattern);
+    return (0, _extends2.default)({
+      selectedPattern: datePattern
+    }, indexes);
+  }
+  return {
+    selectedPattern: 'y',
+    selectionStart: 0,
+    selectionEnd: 0
+  };
+}
+function getDateType(dateString, character, cursorIndex) {
+  var splitIndex = dateString.indexOf(character);
+  if (cursorIndex > splitIndex) {
+    return DateType.End;
+  }
+  return DateType.Start;
+}
+function isSwitchDateType(dateString, character, cursorIndex, direction) {
+  var characterIndex = dateString.indexOf(character);
+  var startIndex = cursorIndex;
+  var endIndex = startIndex + character.length;
+  if (direction === 'left') {
+    endIndex = cursorIndex;
+    startIndex = endIndex - character.length;
+  }
+
+  // Check whether the cursor is a separator before and after
+  if (dateString.substring(startIndex, endIndex) === character) {
+    return true;
+  }
+
+  // Check whether the cursor is a number or letter before and after. If not, switch the date type.
+  // eg: `2020年12月01日`, the cursor is behind 01, press the right key, and switch to the end date.
+  if (direction === 'right') {
+    if (!dateString.substring(cursorIndex, characterIndex).match(/[0-9a-zA-Z]/)) {
+      return true;
+    }
+  }
+  if (!dateString.substring(characterIndex, cursorIndex).match(/[0-9a-zA-Z]/)) {
+    return true;
+  }
+  return false;
+}