rsuite 5.48.1 → 5.49.0

package/esm/DateInput/utils.js

@@ -1,10 +1,89 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { setYear, setMonth, setDate, setHours, setMinutes, setSeconds } from '../utils/dateUtils';
+import { safeSetSelection } from '../utils';
 export function getPatternGroups(format, pattern) {
   var _format$match;
   return ((_format$match = format.match(new RegExp("(" + pattern + ")+"))) === null || _format$match === void 0 ? void 0 : _format$match[0]) || '';
 }
+export function getSelectIndexGap(options) {
+  var pattern = options.pattern,
+    formatStr = options.formatStr,
+    valueOffset = options.valueOffset,
+    selectedMonth = options.selectedMonth,
+    localize = options.localize;
+  var gap = 0;
+  var monthIsAbbreviated = formatStr.includes('MMM');
+  var monthIsFull = formatStr.includes('MMMM');
+
+  // If the month is abbreviated or full, the gap needs to be adjusted.
+  if (monthIsAbbreviated || monthIsFull) {
+    var isSelectedMonth = pattern === 'M';
+
+    // If the selected is the month, and the valueOffset is null,
+    // it means that the delete key is pressed, and the default pattern is displayed, and the gap is 0 at this time.
+    if (isSelectedMonth && valueOffset === null) {
+      return 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 (selectedMonth === null && valueOffset === 0) {
+      return 0;
+    }
+    var month = selectedMonth ? selectedMonth + (isSelectedMonth ? valueOffset || 0 : 0) : 1;
+    if (month > 12) {
+      month = 1;
+    } else if (month === 0) {
+      month = 12;
+    }
+    var monthStr = localize === null || localize === void 0 ? void 0 : localize.month(month - 1, {
+      width: monthIsFull ? 'wide' : 'abbreviated'
+    });
+    gap = monthStr.length - (monthIsFull ? 4 : 3);
+  }
+  return gap;
+}
+export function getDatePattern(options) {
+  var selectionIndex = options.selectionIndex,
+    _options$positionOffs = options.positionOffset,
+    positionOffset = _options$positionOffs === void 0 ? -1 : _options$positionOffs,
+    formatStr = options.formatStr,
+    dateString = options.dateString,
+    valueOffset = options.valueOffset,
+    selectedMonth = options.selectedMonth,
+    localize = options.localize;
+  var pattern = formatStr.charAt(selectionIndex || 0);
+  if (selectionIndex < 0 || selectionIndex > dateString.length - 1) {
+    pattern = formatStr.trim().charAt(0);
+    return pattern;
+  }
+  var gap = 0;
+  if (isCursorAfterMonth(selectionIndex, formatStr)) {
+    gap = getSelectIndexGap({
+      pattern: pattern,
+      formatStr: formatStr,
+      valueOffset: valueOffset,
+      selectedMonth: selectedMonth,
+      localize: localize
+    });
+  }
+  pattern = formatStr.charAt(selectionIndex - gap);
+
+  // If the pattern is not a letter, then get the pattern from the previous or next letter.
+  if (!pattern.match(/[y|d|M|H|h|m|s|a]/)) {
+    var nextIndex = selectionIndex + positionOffset;
+    pattern = getDatePattern(_extends({}, options, {
+      selectionIndex: nextIndex
+    }));
+  }
+  return pattern;
+}
+
+// Determine whether the cursor is after the month.
+// If the currently operated field is after the month, the selected field needs to be moved backward.
+export function isCursorAfterMonth(cursorIndex, formatStr) {
+  return cursorIndex > formatStr.indexOf('M');
+}
 export function getInputSelectedState(options) {
   var input = options.input,
     direction = options.direction,
@@ -14,74 +93,61 @@ export function getInputSelectedState(options) {
     dateString = options.dateString,
     _options$valueOffset = options.valueOffset,
     valueOffset = _options$valueOffset === void 0 ? 0 : _options$valueOffset;
-  var getSelectIndexGap = function getSelectIndexGap(pattern) {
-    var gap = 0;
-    var monthIsAbbreviated = formatStr.includes('MMM');
-    var monthIsFull = formatStr.includes('MMMM');
-
-    // If the month is abbreviated or full, the gap needs to be adjusted.
-    if (monthIsAbbreviated || monthIsFull) {
-      var isSelected = pattern === 'M';
-      if (selectedMonth === null && valueOffset === 0) {
-        return gap;
-      }
-      var month = selectedMonth ? selectedMonth + (isSelected ? valueOffset : 0) : 1;
-      if (month > 12) {
-        month = 1;
-      } else if (month === 0) {
-        month = 12;
-      }
-      var monthStr = localize === null || localize === void 0 ? void 0 : localize.month(month - 1, {
-        width: monthIsFull ? 'wide' : 'abbreviated'
-      });
-      gap = monthStr.length - (monthIsFull ? 4 : 3);
-    }
-    return gap;
-  };
-  var getDatePattern = function getDatePattern(selectionIndex, positionOffset) {
-    if (positionOffset === void 0) {
-      positionOffset = -1;
-    }
-    var pattern = formatStr.charAt((input === null || input === void 0 ? void 0 : input.selectionStart) || 0);
-    if (selectionIndex < 0 || selectionIndex > dateString.length - 1) {
-      pattern = formatStr.trim().charAt(0);
-      return pattern;
-    }
-    var gap = getSelectIndexGap(pattern);
-    pattern = formatStr.charAt(selectionIndex - gap);
-
-    // If the pattern is not a letter, then get the pattern from the previous or next letter.
-    if (!pattern.match(/[y|d|M|H|h|m|s|a]/)) {
-      var nextIndex = selectionIndex + positionOffset;
-      pattern = getDatePattern(nextIndex, positionOffset);
-    }
-    return pattern;
-  };
   var getPatternSelectedIndexes = function getPatternSelectedIndexes(pattern) {
     var selectionStart = formatStr.indexOf(pattern);
     var selectionEnd = formatStr.lastIndexOf(pattern) + 1;
-    var gap = getSelectIndexGap(pattern);
-    if (pattern === 'M') {
+    var gap = 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 (isCursorAfterMonth(selectionStart, formatStr)) {
+      return {
+        selectionStart: selectionStart + gap,
+        selectionEnd: selectionEnd + gap
+      };
+    }
     return {
-      selectionStart: selectionStart + gap,
-      selectionEnd: selectionEnd + gap
+      selectionStart: selectionStart,
+      selectionEnd: selectionEnd
     };
   };
   if (typeof input.selectionEnd === 'number' && typeof input.selectionStart === 'number') {
-    var index = input.selectionStart;
+    var selectionIndex = input.selectionStart;
     var positionOffset = -1;
     if (direction === 'left') {
-      index = input.selectionStart - 1;
+      selectionIndex = input.selectionStart - 1;
     } else if (direction === 'right') {
-      index = input.selectionEnd + 1;
+      selectionIndex = input.selectionEnd + 1;
       positionOffset = 1;
     }
-    var datePattern = getDatePattern(index, positionOffset);
+    var datePattern = getDatePattern({
+      selectionIndex: selectionIndex,
+      positionOffset: positionOffset,
+      formatStr: formatStr,
+      dateString: dateString,
+      valueOffset: valueOffset,
+      selectedMonth: selectedMonth,
+      localize: localize
+    });
     var indexes = getPatternSelectedIndexes(datePattern);
     return _extends({
       selectedPattern: datePattern
@@ -148,4 +214,37 @@ export function modifyDate(date, type, value) {
       return setSeconds(date, value);
   }
   return date;
+}
+export function isFieldFullValue(formatStr, value, pattern) {
+  var patternGroup = getPatternGroups(formatStr, pattern);
+  if (value.toString().length === patternGroup.length) {
+    return true;
+  }
+  switch (pattern) {
+    case 'M':
+      return parseInt(value + "0") > 12;
+    case 'd':
+      return parseInt(value + "0") > 31;
+    case 'H':
+      return parseInt(value + "0") > 23;
+    case 'h':
+      return parseInt(value + "0") > 12;
+    case 'm':
+    case 's':
+      return parseInt(value + "0") > 59;
+    default:
+      return false;
+  }
+}
+var isTestEnvironment = undefined === 'test';
+export function useInputSelection(input) {
+  return function setSelectionRange(selectionStart, selectionEnd) {
+    if (isTestEnvironment) {
+      safeSetSelection(input.current, selectionStart, selectionEnd);
+      return;
+    }
+    requestAnimationFrame(function () {
+      safeSetSelection(input.current, selectionStart, selectionEnd);
+    });
+  };
 }

package/esm/DatePicker/DatePicker.d.ts

@@ -1,14 +1,15 @@
 import React from 'react';
 import { RangeType } from './Toolbar';
 import { DatePickerLocale } from '../locales';
-import { PickerToggleProps } from '../Picker';
 import { FormControlBaseProps, PickerBaseProps, RsRefForwardingComponent } from '../@types/common';
 export type { RangeType } from './Toolbar';
-export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, FormControlBaseProps<Date | null>, Pick<PickerToggleProps, 'caretAs' | 'readOnly' | 'plaintext' | 'loading'> {
-    /** Predefined date Ranges */
-    ranges?: RangeType<Date>[];
+export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, FormControlBaseProps<Date | null> {
+    /** Custom caret component */
+    caretAs?: React.ElementType | null;
     /** Calendar panel default presentation date and time */
     calendarDefaultDate?: Date;
+    /** Whether disabled the component */
+    disabled?: boolean;
     /** Rendered as an input, the date can be entered via the keyboard */
     editable?: boolean;
     /** Format date */
@@ -21,16 +22,26 @@ export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, Form
     inline?: boolean;
     /** ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day */
     isoWeek?: boolean;
+    /** A label displayed at the beginning of toggle button */
+    label?: React.ReactNode;
     /** Set the upper limit of the available year relative to the current selection date */
     limitEndYear?: number;
     /** Set the lower limit of the available year relative to the current selection date */
     limitStartYear?: number;
+    /** Whether to display a loading state indicator */
+    loading?: boolean;
+    /** one tap to select */
+    oneTap?: boolean;
+    /** Whether plaintext the component */
+    plaintext?: boolean;
+    /** Whether read only the component */
+    readOnly?: boolean;
+    /** Predefined date Ranges */
+    ranges?: RangeType<Date>[];
     /** Whether to show week numbers */
     showWeekNumbers?: boolean;
     /** Meridian format */
     showMeridian?: boolean;
-    /** one tap to select */
-    oneTap?: boolean;
     /**
      * Whether to disable a date on the calendar view
      *
@@ -98,7 +109,9 @@ export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, Form
     onShortcutClick?: (range: RangeType<Date>, event: React.MouseEvent) => void;
     /** Called when clean */
     onClean?: (event: React.MouseEvent) => void;
-    /** Custom render value */
+    /**
+     * @deprecated
+     */
     renderValue?: (value: Date, format: string) => string;
 }
 /**