rsuite 5.46.1 → 5.48.0

package/cjs/DateInput/DateInput.js

@@ -0,0 +1,222 @@
+'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 _Input = _interopRequireDefault(require("../Input"));
+var _utils = require("../utils");
+var _utils2 = require("./utils");
+var _useDateInputState2 = _interopRequireDefault(require("./useDateInputState"));
+var isTestEnvironment = process.env.RUN_ENV === 'test';
+/**
+ * The DateInput component lets users select a date with the keyboard.
+ * @version 5.58.0
+ * @see https://rsuitejs.com/components/date-input/
+ */
+var DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _props$format = props.format,
+    formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,
+    valueProp = props.value,
+    defaultValue = props.defaultValue,
+    onChange = props.onChange,
+    onKeyDown = props.onKeyDown,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["format", "value", "defaultValue", "onChange", "onKeyDown"]);
+  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 localize = locale.dateLocale.localize;
+  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),
+    value = _useControlled[0],
+    setValue = _useControlled[1],
+    isControlled = _useControlled[2];
+  var _useDateInputState = (0, _useDateInputState2.default)({
+      formatStr: formatStr,
+      localize: localize,
+      date: value,
+      isControlledDate: isControlled
+    }),
+    dateField = _useDateInputState.dateField,
+    setDateOffset = _useDateInputState.setDateOffset,
+    setDateField = _useDateInputState.setDateField,
+    getDateField = _useDateInputState.getDateField,
+    toDateString = _useDateInputState.toDateString;
+  var dateString = toDateString();
+  var keyPressOptions = (0, _react.useMemo)(function () {
+    return {
+      formatStr: formatStr,
+      localize: localize,
+      selectedMonth: dateField.month,
+      dateString: dateString
+    };
+  }, [dateField, dateString, formatStr, localize]);
+  var setSelectionRange = (0, _react.useCallback)(function (selectionStart, selectionEnd) {
+    if (selectionStart === void 0) {
+      selectionStart = selectedState.selectionStart;
+    }
+    if (selectionEnd === void 0) {
+      selectionEnd = selectedState.selectionEnd;
+    }
+    var input = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
+    if (isTestEnvironment) {
+      (0, _utils.safeSetSelection)(input, selectionStart, selectionEnd);
+      return;
+    }
+    requestAnimationFrame(function () {
+      (0, _utils.safeSetSelection)(input, selectionStart, selectionEnd);
+    });
+  }, [selectedState]);
+  var handleChange = (0, _react.useCallback)(function (value, event) {
+    setValue(value);
+    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
+  }, [onChange, setValue]);
+  var handleChangeField = (0, _react.useCallback)(function (event, nextDirection) {
+    var input = event.target;
+    var direction = nextDirection || (event.key === 'ArrowRight' ? 'right' : 'left');
+    var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {
+      input: input,
+      direction: direction
+    }));
+    setSelectionRange(state.selectionStart, state.selectionEnd);
+    setSelectedState(state);
+  }, [keyPressOptions, setSelectionRange]);
+  var handleChangeFieldValue = (0, _react.useCallback)(function (event) {
+    var key = event.key;
+    var input = event.target;
+    var offset = key === 'ArrowUp' ? 1 : -1;
+    var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {
+      input: input,
+      valueOffset: offset
+    }));
+    setSelectedState(state);
+    setDateOffset(state.selectedPattern, offset, function (date) {
+      return handleChange(date, event);
+    });
+    setSelectionRange(state.selectionStart, state.selectionEnd);
+  }, [handleChange, keyPressOptions, setDateOffset, setSelectionRange]);
+  var isFieldFullValue = (0, _react.useCallback)(function (value, pattern) {
+    var patternGroup = (0, _utils2.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;
+    }
+  }, [formatStr]);
+  var handleChangeFieldValueWithNumericKeys = (0, _react.useCallback)(function (event) {
+    var key = event.key;
+    var input = event.target;
+    var pattern = selectedState.selectedPattern;
+    if (!pattern) {
+      return;
+    }
+    var field = 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, _utils2.validateDateTime)(field.name, padValue)) {
+      newValue = padValue;
+    }
+    if (pattern === 'M') {
+      // Month cannot be less than 1.
+      newValue = Math.max(1, newValue);
+    }
+    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 : 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 (isFieldFullValue(newValue, pattern) && input.selectionEnd !== input.value.length) {
+      handleChangeField(event, 'right');
+    }
+  }, [dateField, getDateField, handleChange, handleChangeField, isFieldFullValue, keyPressOptions, selectedState.selectedPattern, setDateField, setSelectionRange]);
+  var handleRemoveFieldValue = (0, _react.useCallback)(function (event) {
+    if (selectedState.selectedPattern) {
+      setDateField(selectedState.selectedPattern, null, function (date) {
+        return handleChange(date, event);
+      });
+      setSelectionRange();
+    }
+  }, [handleChange, selectedState, setDateField, setSelectionRange]);
+  var handleKeyDown = function handleKeyDown(event) {
+    var _key$match;
+    var key = event.key;
+    switch (key) {
+      case 'ArrowRight':
+      case 'ArrowLeft':
+        handleChangeField(event);
+        event.preventDefault();
+        break;
+      case 'ArrowUp':
+      case 'ArrowDown':
+        handleChangeFieldValue(event);
+        event.preventDefault();
+        break;
+      case 'Backspace':
+        handleRemoveFieldValue(event);
+        event.preventDefault();
+        break;
+      case (_key$match = key.match(/\d/)) === null || _key$match === void 0 ? void 0 : _key$match.input:
+        handleChangeFieldValueWithNumericKeys(event);
+        event.preventDefault();
+        break;
+    }
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+  };
+  var handleClick = (0, _react.useCallback)(function (event) {
+    var input = event.target;
+    var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {
+      input: input
+    }));
+    setSelectedState(state);
+    setSelectionRange(state.selectionStart, state.selectionEnd);
+  }, [keyPressOptions, setSelectionRange]);
+  return /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({
+    inputMode: "text",
+    autoComplete: "off",
+    autoCorrect: "off",
+    spellCheck: false,
+    ref: (0, _utils.mergeRefs)(inputRef, ref),
+    onKeyDown: handleKeyDown,
+    onClick: handleClick,
+    value: dateString
+  }, rest));
+});
+DateInput.displayName = 'DateInput';
+var _default = DateInput;
+exports.default = _default;

package/cjs/DateInput/index.d.ts

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

package/cjs/DateInput/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 _DateInput = _interopRequireDefault(require("./DateInput"));
+var _default = _DateInput.default;
+exports.default = _default;

package/cjs/DateInput/useDateInputState.d.ts

@@ -0,0 +1,165 @@
+import type { Locale } from 'date-fns';
+interface DateInputState {
+    formatStr: string;
+    localize: Locale['localize'];
+    date?: Date | null;
+    isControlledDate?: boolean;
+}
+declare function useDateInputState({ formatStr, localize, date, isControlledDate }: DateInputState): {
+    dateField: {
+        year: any;
+        format: string;
+        patternArray: {
+            pattern: string;
+            key: string;
+        }[];
+        month: number | null;
+        day: number | null;
+        hour: number | null;
+        minute: number | null;
+        second: number | null;
+        meridian: "AM" | "PM" | null;
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
+        should: Chai.Assertion;
+    } | {
+        month: any;
+        format: string;
+        patternArray: {
+            pattern: string;
+            key: string;
+        }[];
+        year: number | null;
+        day: number | null;
+        hour: number | null;
+        minute: number | null;
+        second: number | null;
+        meridian: "AM" | "PM" | null;
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
+        should: Chai.Assertion;
+    } | {
+        day: any;
+        format: string;
+        patternArray: {
+            pattern: string;
+            key: string;
+        }[];
+        year: number | null;
+        month: number | null;
+        hour: number | null;
+        minute: number | null;
+        second: number | null;
+        meridian: "AM" | "PM" | null;
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
+        should: Chai.Assertion;
+    } | {
+        hour: any;
+        format: string;
+        patternArray: {
+            pattern: string;
+            key: string;
+        }[];
+        year: number | null;
+        month: number | null;
+        day: number | null;
+        minute: number | null;
+        second: number | null;
+        meridian: "AM" | "PM" | null;
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
+        should: Chai.Assertion;
+    } | {
+        minute: any;
+        format: string;
+        patternArray: {
+            pattern: string;
+            key: string;
+        }[];
+        year: number | null;
+        month: number | null;
+        day: number | null;
+        hour: number | null;
+        second: number | null;
+        meridian: "AM" | "PM" | null;
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
+        should: Chai.Assertion;
+    } | {
+        second: any;
+        format: string;
+        patternArray: {
+            pattern: string;
+            key: string;
+        }[];
+        year: number | null;
+        month: number | null;
+        day: number | null;
+        hour: number | null;
+        minute: number | null;
+        meridian: "AM" | "PM" | null;
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
+        should: Chai.Assertion;
+    } | {
+        meridian: any;
+        format: string;
+        patternArray: {
+            pattern: string;
+            key: string;
+        }[];
+        year: number | null;
+        month: number | null;
+        day: number | null;
+        hour: number | null;
+        minute: number | null;
+        second: number | null;
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
+        should: Chai.Assertion;
+    };
+    setDateOffset: (pattern: string, offset: number, callback?: ((newDate: Date) => void) | undefined) => void;
+    setDateField: (pattern: string, value: number | null, callback?: ((newDate: Date) => void) | undefined) => void;
+    getDateField: (pattern: string) => {
+        name: any;
+        value: any;
+    };
+    toDateString: () => string;
+};
+export default useDateInputState;

package/cjs/DateInput/useDateInputState.js

@@ -0,0 +1,105 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = require("react");
+var _startCase = _interopRequireDefault(require("lodash/startCase"));
+var _dateUtils = require("../utils/dateUtils");
+var _DateField = require("./DateField");
+function useDateInputState(_ref) {
+  var formatStr = _ref.formatStr,
+    localize = _ref.localize,
+    date = _ref.date,
+    isControlledDate = _ref.isControlledDate;
+  var _useDateField = (0, _DateField.useDateField)(formatStr, localize, date),
+    dateField = _useDateField.dateField,
+    dispatch = _useDateField.dispatch,
+    toDateString = _useDateField.toDateString,
+    toDate = _useDateField.toDate;
+  var setDateOffset = (0, _react.useCallback)(function (pattern, offset, callback) {
+    var currentDate = new Date();
+    var year = dateField.year || currentDate.getFullYear();
+    var month = dateField.month ? dateField.month - 1 : currentDate.getMonth();
+    var day = dateField.day || 0;
+    var hour = dateField.hour || 0;
+    var minute = dateField.minute || 0;
+    var second = dateField.second || 0;
+    var actionName;
+    var value;
+    switch (pattern) {
+      case 'y':
+        actionName = 'setYear';
+        value = (0, _dateUtils.addYears)(new Date(year, 0), offset).getFullYear();
+        break;
+      case 'M':
+        actionName = 'setMonth';
+        value = (0, _dateUtils.addMonths)(new Date(year, month), offset).getMonth() + 1;
+        break;
+      case 'd':
+        actionName = 'setDay';
+        var prevDate = new Date(year, month, day);
+        value = (0, _dateUtils.addDays)(prevDate, offset).getDate();
+        if (offset > 0) {
+          value = (0, _dateUtils.isLastDayOfMonth)(prevDate) ? 1 : value;
+        } else {
+          value = prevDate.getDate() === 1 ? (0, _dateUtils.lastDayOfMonth)(prevDate).getDate() : value;
+        }
+        break;
+      case 'H':
+      case 'h':
+        actionName = 'setHour';
+        value = (0, _dateUtils.addHours)(new Date(year, month, day, hour), offset).getHours();
+        break;
+      case 'm':
+        actionName = 'setMinute';
+        value = (0, _dateUtils.addMinutes)(new Date(year, month, day, hour, minute), offset).getMinutes();
+        break;
+      case 's':
+        actionName = 'setSecond';
+        value = (0, _dateUtils.addSeconds)(new Date(year, month, day, hour, minute, second), offset).getSeconds();
+        break;
+      case 'a':
+        actionName = 'setMeridian';
+        value = dateField.meridian === 'AM' ? 'PM' : 'AM';
+        break;
+    }
+    if (actionName && value) {
+      dispatch({
+        type: actionName,
+        value: value
+      });
+      var field = _DateField.patternMap[pattern];
+      callback === null || callback === void 0 ? void 0 : callback(toDate(field, value));
+    }
+  }, [dateField, toDate, dispatch]);
+  var setDateField = (0, _react.useCallback)(function (pattern, value, callback) {
+    var field = _DateField.patternMap[pattern];
+    var actionName = "set" + (0, _startCase.default)(field);
+    dispatch({
+      type: actionName,
+      value: value
+    });
+    callback === null || callback === void 0 ? void 0 : callback(toDate(field, value));
+  }, [toDate, dispatch]);
+  var getDateField = (0, _react.useCallback)(function (pattern) {
+    var fieldName = _DateField.patternMap[pattern];
+    return {
+      name: fieldName,
+      value: dateField[fieldName]
+    };
+  }, [dateField]);
+  var toControlledDateString = (0, _react.useCallback)(function () {
+    return (0, _dateUtils.format)(date || new Date(), formatStr);
+  }, [date, formatStr]);
+  return {
+    dateField: dateField,
+    setDateOffset: setDateOffset,
+    setDateField: setDateField,
+    getDateField: getDateField,
+    toDateString: isControlledDate ? toControlledDateString : toDateString
+  };
+}
+var _default = useDateInputState;
+exports.default = _default;

package/cjs/DateInput/utils.d.ts

@@ -0,0 +1,41 @@
+import { type Locale } from 'date-fns';
+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: https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
+     */
+    formatStr: 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;
+    /**
+     * The date is rendered in string format according to format
+     */
+    dateString: string;
+}
+export declare function getPatternGroups(format: string, pattern: string): string;
+export declare function getInputSelectedState(options: SelectedStateOptions): {
+    selectionStart: number;
+    selectionEnd: number;
+    selectedPattern: string;
+};
+export declare function validateDateTime(type: string, value: number): boolean;
+export declare function modifyDate(date: Date, type: string, value: number): Date;
+export {};