@douyinfe/semi-foundation 2.24.2 → 2.25.0-alpha.0

package/lib/cjs/datePicker/inputFoundation.d.ts

@@ -1,9 +1,9 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { BaseValueType, ValidateStatus, ValueType } from './foundation';
 import { strings } from './constants';
-export declare type Type = 'date' | 'dateRange' | 'year' | 'month' | 'dateTime' | 'dateTimeRange';
-export declare type RangeType = 'rangeStart' | 'rangeEnd';
-export declare type PanelType = 'left' | 'right';
+export type Type = 'date' | 'dateRange' | 'year' | 'month' | 'dateTime' | 'dateTimeRange' | 'monthRange';
+export type RangeType = 'rangeStart' | 'rangeEnd';
+export type PanelType = 'left' | 'right';
 export interface DateInputEventHandlerProps {
     onClick?: (e: any) => void;
     onChange?: (value: string, e: any) => void;
@@ -16,12 +16,21 @@ export interface DateInputEventHandlerProps {
     onInsetInputChange?: (options: InsetInputChangeProps) => void;
 }
 export interface DateInputElementProps {
+    borderless?: boolean;
     insetLabel?: any;
     prefix?: any;
 }
+export interface InsetInputProps {
+    placeholder?: {
+        dateStart?: string;
+        dateEnd?: string;
+        timeStart?: string;
+        timeEnd?: string;
+    };
+}
 export interface DateInputFoundationProps extends DateInputElementProps, DateInputEventHandlerProps {
     [x: string]: any;
-    value?: BaseValueType[];
+    value?: Date[];
     disabled?: boolean;
     type?: Type;
     showClear?: boolean;
@@ -32,7 +41,7 @@ export interface DateInputFoundationProps extends DateInputElementProps, DateInp
     prefixCls?: string;
     rangeSeparator?: string;
     panelType?: PanelType;
-    insetInput?: boolean;
+    insetInput?: boolean | InsetInputProps;
     insetInputValue?: InsetInputValue;
     density?: typeof strings.DENSITY_SET[number];
     defaultPickerValue?: ValueType;
@@ -58,7 +67,7 @@ export interface InsetInputChangeProps {
     format: string;
     insetInputValue: InsetInputValue;
 }
-export interface DateInputAdapter extends DefaultAdapter {
+export interface DateInputAdapter extends DefaultAdapter<DateInputFoundationProps, Record<string, any>> {
     updateIsFocusing: (isFocusing: boolean) => void;
     notifyClick: DateInputFoundationProps['onClick'];
     notifyChange: DateInputFoundationProps['onChange'];

package/lib/cjs/datePicker/inputFoundation.js

@@ -4,59 +4,35 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _get2 = _interopRequireDefault(require("lodash/get"));
-
 var _set2 = _interopRequireDefault(require("lodash/set"));
-
 var _isObject2 = _interopRequireDefault(require("lodash/isObject"));
-
-var _cloneDeep2 = _interopRequireDefault(require("lodash/cloneDeep"));
-
 var _dateFns = require("date-fns");
-
 var _foundation = _interopRequireDefault(require("../base/foundation"));
-
 var _formatter = require("./_utils/formatter");
-
 var _getDefaultFormatToken = require("./_utils/getDefaultFormatToken");
-
 var _getInsetInputFormatToken = _interopRequireDefault(require("./_utils/getInsetInputFormatToken"));
-
 var _getInsetInputValueFromInsetInputStr = _interopRequireDefault(require("./_utils/getInsetInputValueFromInsetInputStr"));
-
 var _constants = require("./constants");
-
 var _getDefaultPickerDate = _interopRequireDefault(require("./_utils/getDefaultPickerDate"));
-
 var _parser = require("./_utils/parser");
-
 var _utils = require("./_utils");
-
+var _fastCopy = _interopRequireDefault(require("fast-copy"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const KEY_CODE_ENTER = 'Enter';
 const KEY_CODE_TAB = 'Tab';
-
 class InputFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign({}, adapter));
-  } // eslint-disable-next-line @typescript-eslint/no-empty-function
-
-
-  init() {} // eslint-disable-next-line @typescript-eslint/no-empty-function
-
-
+  }
+  init() {}
   destroy() {}
-
   handleClick(e) {
     this._adapter.notifyClick(e);
   }
-
   handleChange(value, e) {
     this._adapter.notifyChange(value, e);
   }
-
   handleInputComplete(e) {
     /**
      * onKeyPress, e.key Code gets a value of 0 instead of 13
@@ -66,34 +42,27 @@ class InputFoundation extends _foundation.default {
       this._adapter.notifyEnter(e.target.value);
     }
   }
-
   handleInputClear(e) {
     this._adapter.notifyClear(e);
   }
-
   handleRangeInputClear(e) {
     // prevent trigger click outside
     this.stopPropagation(e);
-
     this._adapter.notifyRangeInputClear(e);
   }
-
   handleRangeInputEnterPress(e, rangeInputValue) {
     if (e.key === KEY_CODE_ENTER) {
       this._adapter.notifyEnter(rangeInputValue);
     }
   }
-
   handleRangeInputEndKeyPress(e) {
     if (e.key === KEY_CODE_TAB) {
       this._adapter.notifyTabPress(e);
     }
   }
-
   handleRangeInputFocus(e, rangeType) {
     this._adapter.notifyRangeInputFocus(e, rangeType);
   }
-
   formatShowText(value, customFormat) {
     const {
       type,
@@ -101,91 +70,91 @@ class InputFoundation extends _foundation.default {
       format,
       rangeSeparator
     } = this._adapter.getProps();
-
     const formatToken = customFormat || format || (0, _getDefaultFormatToken.getDefaultFormatTokenByType)(type);
     let text = '';
-
     switch (type) {
       case 'date':
         text = (0, _formatter.formatDateValues)(value, formatToken, undefined, dateFnsLocale);
         break;
-
       case 'dateRange':
         text = (0, _formatter.formatDateValues)(value, formatToken, {
           groupSize: 2,
           groupInnerSeparator: rangeSeparator
         }, dateFnsLocale);
         break;
-
       case 'dateTime':
         text = (0, _formatter.formatDateValues)(value, formatToken, undefined, dateFnsLocale);
         break;
-
       case 'dateTimeRange':
         text = (0, _formatter.formatDateValues)(value, formatToken, {
           groupSize: 2,
           groupInnerSeparator: rangeSeparator
         }, dateFnsLocale);
         break;
-
       case 'month':
         text = (0, _formatter.formatDateValues)(value, formatToken, undefined, dateFnsLocale);
         break;
-
+      case 'monthRange':
+        text = (0, _formatter.formatDateValues)(value, formatToken, {
+          groupSize: 2,
+          groupInnerSeparator: rangeSeparator
+        }, dateFnsLocale);
+        break;
       default:
         break;
     }
-
     return text;
   }
-
   handleInsetInputChange(options) {
     const {
       value,
       valuePath,
       insetInputValue
     } = options;
-
     const {
       format,
-      type
+      type,
+      rangeSeparator
     } = this._adapter.getProps();
-
     const insetFormatToken = (0, _getInsetInputFormatToken.default)({
       type,
       format
     });
-    let newInsetInputValue = (0, _set2.default)((0, _cloneDeep2.default)(insetInputValue), valuePath, value);
-    newInsetInputValue = this._autoFillTimeToInsetInputValue({
-      insetInputValue: newInsetInputValue,
+    const newInsetInputValue = (0, _set2.default)((0, _fastCopy.default)(insetInputValue), valuePath, value);
+    const insetInputStr = this.concatInsetInputValue({
+      insetInputValue: newInsetInputValue
+    });
+    const parsedInsetInputValueFromInputStr = (0, _getInsetInputValueFromInsetInputStr.default)({
+      inputValue: insetInputStr,
+      type,
+      rangeSeparator
+    });
+    const filledTimeInsetInputValue = this._autoFillTimeToInsetInputValue({
+      insetInputValue: parsedInsetInputValueFromInputStr,
       valuePath,
       format: insetFormatToken
     });
-    const newInputValue = this.concatInsetInputValue({
-      insetInputValue: newInsetInputValue
+    const finalInsetInputStr = this.concatInsetInputValue({
+      insetInputValue: filledTimeInsetInputValue
     });
-
     this._adapter.notifyInsetInputChange({
-      insetInputValue: newInsetInputValue,
+      insetInputValue: filledTimeInsetInputValue,
       format: insetFormatToken,
-      insetInputStr: newInputValue
+      insetInputStr: finalInsetInputStr
     });
   }
-
   _autoFillTimeToInsetInputValue(options) {
     const {
       valuePath,
       insetInputValue,
       format
     } = options;
-
     const {
       type,
       defaultPickerValue,
       dateFnsLocale
     } = this._adapter.getProps();
-
-    const insetInputValueWithTime = (0, _cloneDeep2.default)(insetInputValue);
+    const insetInputValueWithTime = (0, _fastCopy.default)(insetInputValue);
     const {
       nowDate,
       nextDate
@@ -194,46 +163,35 @@ class InputFoundation extends _foundation.default {
       format,
       dateFnsLocale
     });
-
     if (type.includes('Time')) {
       let timeStr = '';
       const dateFormatToken = (0, _get2.default)(format.split(' '), '0', _constants.strings.FORMAT_FULL_DATE);
       const timeFormatToken = (0, _get2.default)(format.split(' '), '1', _constants.strings.FORMAT_TIME_PICKER);
-
       switch (valuePath) {
         case 'monthLeft.dateInput':
           const dateLeftStr = insetInputValueWithTime.monthLeft.dateInput;
-
           if (!insetInputValueWithTime.monthLeft.timeInput && dateLeftStr.length === dateFormatToken.length) {
             const dateLeftParsed = (0, _parser.compatibleParse)(insetInputValueWithTime.monthLeft.dateInput, dateFormatToken);
-
             if ((0, _utils.isValidDate)(dateLeftParsed)) {
               timeStr = (0, _dateFns.format)(nowDate, timeFormatToken);
               insetInputValueWithTime.monthLeft.timeInput = timeStr;
             }
           }
-
           break;
-
         case 'monthRight.dateInput':
           const dateRightStr = insetInputValueWithTime.monthRight.dateInput;
-
           if (!insetInputValueWithTime.monthRight.timeInput && dateRightStr.length === dateFormatToken.length) {
             const dateRightParsed = (0, _parser.compatibleParse)(dateRightStr, dateFormatToken);
-
             if ((0, _utils.isValidDate)(dateRightParsed)) {
               timeStr = (0, _dateFns.format)(nextDate, timeFormatToken);
               insetInputValueWithTime.monthRight.timeInput = timeStr;
             }
           }
-
           break;
-
         default:
           break;
       }
     }
-
     return insetInputValueWithTime;
   }
   /**
@@ -243,33 +201,31 @@ class InputFoundation extends _foundation.default {
    * The format passed in by the user will be used only if the incoming format conforms to formatReg
    * Otherwise the default format will be used as placeholder
    */
-
-
   getInsetInputPlaceholder() {
     const {
       type,
-      format
+      format,
+      rangeSeparator
     } = this._adapter.getProps();
-
     const insetInputFormat = (0, _getInsetInputFormatToken.default)({
       type,
       format
     });
     let datePlaceholder, timePlaceholder;
-
     switch (type) {
       case 'date':
       case 'month':
       case 'dateRange':
         datePlaceholder = insetInputFormat;
         break;
-
       case 'dateTime':
       case 'dateTimeRange':
         [datePlaceholder, timePlaceholder] = insetInputFormat.split(' ');
         break;
+      case 'monthRange':
+        datePlaceholder = insetInputFormat + rangeSeparator + insetInputFormat;
+        break;
     }
-
     return {
       datePlaceholder,
       timePlaceholder
@@ -280,22 +236,17 @@ class InputFoundation extends _foundation.default {
    *
    * Parse out insetInputValue from current date value or inputValue
    */
-
-
   getInsetInputValue(_ref) {
     let {
       value,
       insetInputValue
     } = _ref;
-
     const {
       type,
       rangeSeparator,
       format
     } = this._adapter.getProps();
-
     let inputValueStr = '';
-
     if ((0, _isObject2.default)(insetInputValue)) {
       inputValueStr = this.concatInsetInputValue({
         insetInputValue
@@ -307,7 +258,6 @@ class InputFoundation extends _foundation.default {
       });
       inputValueStr = this.formatShowText(value, insetInputFormat);
     }
-
     const newInsetInputValue = (0, _getInsetInputValueFromInsetInputStr.default)({
       inputValue: inputValueStr,
       type,
@@ -315,59 +265,49 @@ class InputFoundation extends _foundation.default {
     });
     return newInsetInputValue;
   }
-
   concatInsetDateAndTime(_ref2) {
     let {
       date,
       time
     } = _ref2;
-    return "".concat(date, " ").concat(time);
+    return `${date} ${time}`;
   }
-
   concatInsetDateRange(_ref3) {
     let {
       rangeStart,
       rangeEnd
     } = _ref3;
-
     const {
       rangeSeparator
     } = this._adapter.getProps();
-
-    return "".concat(rangeStart).concat(rangeSeparator).concat(rangeEnd);
+    return `${rangeStart}${rangeSeparator}${rangeEnd}`;
   }
-
   concatInsetInputValue(_ref4) {
     let {
       insetInputValue
     } = _ref4;
-
     const {
       type
     } = this._adapter.getProps();
-
     let inputValue = '';
-
     switch (type) {
       case 'date':
       case 'month':
+      case 'monthRange':
         inputValue = insetInputValue.monthLeft.dateInput;
         break;
-
       case 'dateRange':
         inputValue = this.concatInsetDateRange({
           rangeStart: insetInputValue.monthLeft.dateInput,
           rangeEnd: insetInputValue.monthRight.dateInput
         });
         break;
-
       case 'dateTime':
         inputValue = this.concatInsetDateAndTime({
           date: insetInputValue.monthLeft.dateInput,
           time: insetInputValue.monthLeft.timeInput
         });
         break;
-
       case 'dateTimeRange':
         const rangeStart = this.concatInsetDateAndTime({
           date: insetInputValue.monthLeft.dateInput,
@@ -383,10 +323,7 @@ class InputFoundation extends _foundation.default {
         });
         break;
     }
-
     return inputValue;
   }
-
 }
-
 exports.default = InputFoundation;

package/lib/cjs/datePicker/monthFoundation.d.ts

@@ -28,7 +28,7 @@ export interface MonthFoundationProps {
     localeCode: string;
     multiple: boolean;
 }
-export declare type MonthDayInfo = {
+export type MonthDayInfo = {
     dayNumber: number;
     dayNumberFull?: string;
     fullDate: string;

package/lib/cjs/datePicker/monthFoundation.js

@@ -4,55 +4,38 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _foundation = _interopRequireDefault(require("../base/foundation"));
-
 var _getMonthTable = _interopRequireDefault(require("./_utils/getMonthTable"));
-
 var _getDayOfWeek = _interopRequireDefault(require("./_utils/getDayOfWeek"));
-
 var _dateFns = require("date-fns");
-
 var _isNullOrUndefined = _interopRequireDefault(require("../utils/isNullOrUndefined"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 // import { cssClasses, strings } from './constants';
+
 class CalendarMonthFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign({}, adapter));
   }
-
   init() {
     this._getToday();
-
     this.getMonthTable();
   }
-
   _getToday() {
     const today = new Date();
     const todayText = (0, _dateFns.format)(today, 'yyyy-MM-dd');
-
     this._adapter.updateToday(todayText);
   }
-
   getMonthTable() {
     const month = this._adapter.getProp('month');
-
     const weeksRowNum = this.getState('weeksRowNum');
-
     if (month) {
       this.updateWeekDays();
-
       const weekStartsOn = this._adapter.getProp('weekStartsOn');
-
       const monthTable = (0, _getMonthTable.default)(month, weekStartsOn);
       const {
         weeks
       } = monthTable;
-
       this._adapter.updateMonthTable(monthTable);
-
       if ((0, _isNullOrUndefined.default)(weeksRowNum)) {
         this._adapter.setWeeksRowNum(weeks.length);
       } else if (Array.isArray(weeks) && weeks.length !== weeksRowNum) {
@@ -62,28 +45,19 @@ class CalendarMonthFoundation extends _foundation.default {
       }
     }
   }
-
   updateWeekDays() {
     const weekStartsOn = this._adapter.getProp('weekStartsOn');
-
     const weekdays = (0, _getDayOfWeek.default)({
       weekStartsOn
     });
-
     this._adapter.setWeekDays(weekdays);
-  } // eslint-disable-next-line @typescript-eslint/no-empty-function
-
-
+  }
   destroy() {}
-
   handleClick(day) {
     this._adapter.notifyDayClick(day);
   }
-
   handleHover(day) {
     this._adapter.notifyDayHover(day);
   }
-
 }
-
 exports.default = CalendarMonthFoundation;

package/lib/cjs/datePicker/monthsGridFoundation.d.ts

@@ -1,21 +1,23 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { strings } from './constants';
 import { WeekStartNumber } from './_utils/getMonthTable';
-import { BaseValueType, PresetPosition, ValueType } from './foundation';
+import { DateInputFoundationProps, PresetPosition, ValueType } from './foundation';
 import { MonthDayInfo } from './monthFoundation';
 import { ArrayElement } from '../utils/type';
-declare type Type = ArrayElement<typeof strings.TYPE_SET>;
+import { YearAndMonthFoundationProps } from './yearAndMonthFoundation';
+type Type = ArrayElement<typeof strings.TYPE_SET>;
 interface MonthsGridElementProps {
     navPrev?: any;
     navNext?: any;
     renderDate?: () => any;
     renderFullDate?: () => any;
 }
-export declare type PanelType = 'left' | 'right';
-export declare type YearMonthChangeType = 'prevMonth' | 'nextMonth' | 'prevYear' | 'nextYear';
-export interface MonthsGridFoundationProps extends MonthsGridElementProps {
+export type PanelType = 'left' | 'right';
+export type YearMonthChangeType = 'prevMonth' | 'nextMonth' | 'prevYear' | 'nextYear';
+export interface MonthsGridFoundationProps extends MonthsGridElementProps, Pick<YearAndMonthFoundationProps, 'startYear' | 'endYear'> {
     type?: Type;
-    defaultValue?: ValueType;
+    /** may be null if selection is not complete when type is dateRange or dateTimeRange */
+    defaultValue?: (Date | null)[];
     defaultPickerValue?: ValueType;
     multiple?: boolean;
     max?: number;
@@ -52,13 +54,17 @@ export interface MonthsGridFoundationProps extends MonthsGridElementProps {
     isAnotherPanelHasOpened?: (currentRangeInput: 'rangeStart' | 'rangeEnd') => boolean;
     focusRecordsRef?: any;
     triggerRender?: (props: Record<string, any>) => any;
-    insetInput: boolean;
+    insetInput: DateInputFoundationProps['insetInput'];
     presetPosition?: PresetPosition;
     renderQuickControls?: any;
     renderDateInput?: any;
 }
 export interface MonthInfo {
+    /** The date displayed in the current date panel, update when switching year and month */
     pickerDate: Date;
+    /**
+     * Default date or selected date (when selected)
+     */
     showDate: Date;
     isTimePickerOpen: boolean;
     isYearPickerOpen: boolean;
@@ -101,12 +107,12 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
     constructor(adapter: MonthsGridAdapter);
     init(): void;
     initDefaultPickerValue(): void;
-    updateSelectedFromProps(values: ValueType, refreshPicker?: boolean): void;
+    updateSelectedFromProps(values: (Date | null)[], refreshPicker?: boolean): void;
     calcDisabledTime(panelType: PanelType): any;
-    _initDatePickerFromValue(values: BaseValueType[], refreshPicker?: boolean): void;
-    _initDateRangePickerFromValue(values: BaseValueType[], withTime?: boolean): void;
-    _initDateTimePickerFromValue(values: BaseValueType[]): void;
-    _initDateTimeRangePickerFormValue(values: BaseValueType[]): void;
+    _initDatePickerFromValue(values: Date[], refreshPicker?: boolean): void;
+    _initDateRangePickerFromValue(values: (Date | null)[], withTime?: boolean): void;
+    _initDateTimePickerFromValue(values: Date[]): void;
+    _initDateTimeRangePickerFormValue(values: (Date | null)[]): void;
     destroy(): void;
     /**
      * sync change another panel month when change months from the else yam panel
@@ -153,7 +159,6 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
      * @returns
      */
     localeFormat(date: Date, token: string): string;
-    isValidTimeZone(timeZone?: string | number): boolean;
     /**
      * 根据 type 处理 onChange 返回的参数
      *