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

package/lib/es/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/es/datePicker/inputFoundation.js

@@ -1,7 +1,6 @@
 import _get from "lodash/get";
 import _set from "lodash/set";
 import _isObject from "lodash/isObject";
-import _cloneDeep from "lodash/cloneDeep";
 import { format as formatFn } from 'date-fns';
 import BaseFoundation from '../base/foundation';
 import { formatDateValues } from './_utils/formatter';
@@ -12,27 +11,21 @@ import { strings } from './constants';
 import getDefaultPickerDate from './_utils/getDefaultPickerDate';
 import { compatibleParse } from './_utils/parser';
 import { isValidDate } from './_utils';
+import copy from 'fast-copy';
 const KEY_CODE_ENTER = 'Enter';
 const KEY_CODE_TAB = 'Tab';
 export default class InputFoundation extends BaseFoundation {
   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
@@ -42,34 +35,27 @@ export default class InputFoundation extends BaseFoundation {
       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,
@@ -77,94 +63,91 @@ export default class InputFoundation extends BaseFoundation {
       format,
       rangeSeparator
     } = this._adapter.getProps();
-
     const formatToken = customFormat || format || getDefaultFormatTokenByType(type);
     let text = '';
-
     switch (type) {
       case 'date':
         text = formatDateValues(value, formatToken, undefined, dateFnsLocale);
         break;
-
       case 'dateRange':
         text = formatDateValues(value, formatToken, {
           groupSize: 2,
           groupInnerSeparator: rangeSeparator
         }, dateFnsLocale);
         break;
-
       case 'dateTime':
         text = formatDateValues(value, formatToken, undefined, dateFnsLocale);
         break;
-
       case 'dateTimeRange':
         text = formatDateValues(value, formatToken, {
           groupSize: 2,
           groupInnerSeparator: rangeSeparator
         }, dateFnsLocale);
         break;
-
       case 'month':
         text = formatDateValues(value, formatToken, undefined, dateFnsLocale);
         break;
-
+      case 'monthRange':
+        text = 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 = getInsetInputFormatToken({
       type,
       format
     });
-
-    let newInsetInputValue = _set(_cloneDeep(insetInputValue), valuePath, value);
-
-    newInsetInputValue = this._autoFillTimeToInsetInputValue({
-      insetInputValue: newInsetInputValue,
+    const newInsetInputValue = _set(copy(insetInputValue), valuePath, value);
+    const insetInputStr = this.concatInsetInputValue({
+      insetInputValue: newInsetInputValue
+    });
+    const parsedInsetInputValueFromInputStr = getInsetInputValueFromInsetInputStr({
+      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 = _cloneDeep(insetInputValue);
-
+    const insetInputValueWithTime = copy(insetInputValue);
     const {
       nowDate,
       nextDate
@@ -173,48 +156,35 @@ export default class InputFoundation extends BaseFoundation {
       format,
       dateFnsLocale
     });
-
     if (type.includes('Time')) {
       let timeStr = '';
-
       const dateFormatToken = _get(format.split(' '), '0', strings.FORMAT_FULL_DATE);
-
       const timeFormatToken = _get(format.split(' '), '1', strings.FORMAT_TIME_PICKER);
-
       switch (valuePath) {
         case 'monthLeft.dateInput':
           const dateLeftStr = insetInputValueWithTime.monthLeft.dateInput;
-
           if (!insetInputValueWithTime.monthLeft.timeInput && dateLeftStr.length === dateFormatToken.length) {
             const dateLeftParsed = compatibleParse(insetInputValueWithTime.monthLeft.dateInput, dateFormatToken);
-
             if (isValidDate(dateLeftParsed)) {
               timeStr = formatFn(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 = compatibleParse(dateRightStr, dateFormatToken);
-
             if (isValidDate(dateRightParsed)) {
               timeStr = formatFn(nextDate, timeFormatToken);
               insetInputValueWithTime.monthRight.timeInput = timeStr;
             }
           }
-
           break;
-
         default:
           break;
       }
     }
-
     return insetInputValueWithTime;
   }
   /**
@@ -224,33 +194,31 @@ export default class InputFoundation extends BaseFoundation {
    * 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 = getInsetInputFormatToken({
       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
@@ -261,22 +229,17 @@ export default class InputFoundation extends BaseFoundation {
    *
    * 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 (_isObject(insetInputValue)) {
       inputValueStr = this.concatInsetInputValue({
         insetInputValue
@@ -288,7 +251,6 @@ export default class InputFoundation extends BaseFoundation {
       });
       inputValueStr = this.formatShowText(value, insetInputFormat);
     }
-
     const newInsetInputValue = getInsetInputValueFromInsetInputStr({
       inputValue: inputValueStr,
       type,
@@ -296,59 +258,49 @@ export default class InputFoundation extends BaseFoundation {
     });
     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,
@@ -364,8 +316,6 @@ export default class InputFoundation extends BaseFoundation {
         });
         break;
     }
-
     return inputValue;
   }
-
 }

package/lib/es/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/es/datePicker/monthFoundation.js

@@ -1,5 +1,5 @@
-import BaseFoundation from '../base/foundation'; // import { cssClasses, strings } from './constants';
-
+import BaseFoundation from '../base/foundation';
+// import { cssClasses, strings } from './constants';
 import getMonthTable from './_utils/getMonthTable';
 import getDayOfWeek from './_utils/getDayOfWeek';
 import { format } from 'date-fns';
@@ -8,37 +8,26 @@ export default class CalendarMonthFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
   }
-
   init() {
     this._getToday();
-
     this.getMonthTable();
   }
-
   _getToday() {
     const today = new Date();
     const todayText = 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 = getMonthTable(month, weekStartsOn);
       const {
         weeks
       } = monthTable;
-
       this._adapter.updateMonthTable(monthTable);
-
       if (isNullOrUndefined(weeksRowNum)) {
         this._adapter.setWeeksRowNum(weeks.length);
       } else if (Array.isArray(weeks) && weeks.length !== weeksRowNum) {
@@ -48,26 +37,18 @@ export default class CalendarMonthFoundation extends BaseFoundation {
       }
     }
   }
-
   updateWeekDays() {
     const weekStartsOn = this._adapter.getProp('weekStartsOn');
-
     const weekdays = getDayOfWeek({
       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);
   }
-
 }

package/lib/es/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 返回的参数
      *