@douyinfe/semi-foundation 2.28.0-beta.0 → 2.28.0

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

@@ -0,0 +1,133 @@
+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 interface DateInputEventHandlerProps {
+    onClick?: (e: any) => void;
+    onChange?: (value: string, e: any) => void;
+    onEnterPress?: (e: any) => void;
+    onBlur?: (e: any) => void;
+    onFocus?: (e: any, rangeType: RangeType) => void;
+    onClear?: (e: any) => void;
+    onRangeInputClear?: (e: any) => void;
+    onRangeEndTabPress?: (e: any) => void;
+    onInsetInputChange?: (options: InsetInputChangeProps) => void;
+}
+export interface DateInputElementProps {
+    insetLabel?: any;
+    prefix?: any;
+}
+export interface DateInputFoundationProps extends DateInputElementProps, DateInputEventHandlerProps {
+    [x: string]: any;
+    value?: BaseValueType[];
+    disabled?: boolean;
+    type?: Type;
+    showClear?: boolean;
+    format?: string;
+    inputStyle?: Record<string, any>;
+    inputReadOnly?: boolean;
+    validateStatus?: ValidateStatus;
+    prefixCls?: string;
+    rangeSeparator?: string;
+    panelType?: PanelType;
+    insetInput?: boolean;
+    insetInputValue?: InsetInputValue;
+    density?: typeof strings.DENSITY_SET[number];
+    defaultPickerValue?: ValueType;
+}
+export interface InsetInputValue {
+    monthLeft: {
+        dateInput: string;
+        timeInput: string;
+    };
+    monthRight: {
+        dateInput: string;
+        timeInput: string;
+    };
+}
+export interface InsetInputChangeFoundationProps {
+    value: string;
+    insetInputValue: InsetInputValue;
+    event: any;
+    valuePath: string;
+}
+export interface InsetInputChangeProps {
+    insetInputStr: string;
+    format: string;
+    insetInputValue: InsetInputValue;
+}
+export interface DateInputAdapter extends DefaultAdapter {
+    updateIsFocusing: (isFocusing: boolean) => void;
+    notifyClick: DateInputFoundationProps['onClick'];
+    notifyChange: DateInputFoundationProps['onChange'];
+    notifyInsetInputChange: DateInputFoundationProps['onInsetInputChange'];
+    notifyEnter: DateInputFoundationProps['onEnterPress'];
+    notifyBlur: DateInputFoundationProps['onBlur'];
+    notifyClear: DateInputFoundationProps['onClear'];
+    notifyFocus: DateInputFoundationProps['onFocus'];
+    notifyRangeInputClear: DateInputFoundationProps['onRangeInputClear'];
+    notifyRangeInputFocus: DateInputFoundationProps['onFocus'];
+    notifyTabPress: DateInputFoundationProps['onRangeEndTabPress'];
+}
+export default class InputFoundation extends BaseFoundation<DateInputAdapter> {
+    constructor(adapter: DateInputAdapter);
+    init(): void;
+    destroy(): void;
+    handleClick(e: any): void;
+    handleChange(value: string, e: any): void;
+    handleInputComplete(e: any): void;
+    handleInputClear(e: any): void;
+    handleRangeInputClear(e: any): void;
+    handleRangeInputEnterPress(e: any, rangeInputValue: string): void;
+    handleRangeInputEndKeyPress(e: any): void;
+    handleRangeInputFocus(e: any, rangeType: RangeType): void;
+    formatShowText(value: BaseValueType[], customFormat?: string): string;
+    handleInsetInputChange(options: InsetInputChangeFoundationProps): void;
+    _autoFillTimeToInsetInputValue(options: {
+        insetInputValue: InsetInputValue;
+        format: string;
+        valuePath: string;
+    }): InsetInputValue;
+    /**
+     * 只有传入的 format 符合 formatReg 时，才会使用用户传入的 format
+     * 否则会使用默认的 format 作为 placeholder
+     *
+     * 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(): {
+        datePlaceholder: any;
+        timePlaceholder: any;
+    };
+    /**
+     * 从当前日期值或 inputValue 中解析出 insetInputValue
+     *
+     * Parse out insetInputValue from current date value or inputValue
+     */
+    getInsetInputValue({ value, insetInputValue }: {
+        value: BaseValueType[];
+        insetInputValue: InsetInputValue;
+    }): {
+        monthLeft: {
+            dateInput: string;
+            timeInput: string;
+        };
+        monthRight: {
+            dateInput: string;
+            timeInput: string;
+        };
+    };
+    concatInsetDateAndTime({ date, time }: {
+        date: any;
+        time: any;
+    }): string;
+    concatInsetDateRange({ rangeStart, rangeEnd }: {
+        rangeStart: any;
+        rangeEnd: any;
+    }): string;
+    concatInsetInputValue({ insetInputValue }: {
+        insetInputValue: InsetInputValue;
+    }): string;
+}

package/lib/es/datePicker/inputFoundation.js

@@ -0,0 +1,371 @@
+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';
+import { getDefaultFormatTokenByType } from './_utils/getDefaultFormatToken';
+import getInsetInputFormatToken from './_utils/getInsetInputFormatToken';
+import getInsetInputValueFromInsetInputStr from './_utils/getInsetInputValueFromInsetInputStr';
+import { strings } from './constants';
+import getDefaultPickerDate from './_utils/getDefaultPickerDate';
+import { compatibleParse } from './_utils/parser';
+import { isValidDate } from './_utils';
+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
+
+
+  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
+     * Here key is used to judge the button
+     */
+    if (e.key === KEY_CODE_ENTER) {
+      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,
+      dateFnsLocale,
+      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;
+
+      default:
+        break;
+    }
+
+    return text;
+  }
+
+  handleInsetInputChange(options) {
+    const {
+      value,
+      valuePath,
+      insetInputValue
+    } = options;
+
+    const {
+      format,
+      type
+    } = this._adapter.getProps();
+
+    const insetFormatToken = getInsetInputFormatToken({
+      type,
+      format
+    });
+
+    let newInsetInputValue = _set(_cloneDeep(insetInputValue), valuePath, value);
+
+    newInsetInputValue = this._autoFillTimeToInsetInputValue({
+      insetInputValue: newInsetInputValue,
+      valuePath,
+      format: insetFormatToken
+    });
+    const newInputValue = this.concatInsetInputValue({
+      insetInputValue: newInsetInputValue
+    });
+
+    this._adapter.notifyInsetInputChange({
+      insetInputValue: newInsetInputValue,
+      format: insetFormatToken,
+      insetInputStr: newInputValue
+    });
+  }
+
+  _autoFillTimeToInsetInputValue(options) {
+    const {
+      valuePath,
+      insetInputValue,
+      format
+    } = options;
+
+    const {
+      type,
+      defaultPickerValue,
+      dateFnsLocale
+    } = this._adapter.getProps();
+
+    const insetInputValueWithTime = _cloneDeep(insetInputValue);
+
+    const {
+      nowDate,
+      nextDate
+    } = getDefaultPickerDate({
+      defaultPickerValue,
+      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;
+  }
+  /**
+   * 只有传入的 format 符合 formatReg 时，才会使用用户传入的 format
+   * 否则会使用默认的 format 作为 placeholder
+   *
+   * 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
+    } = 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;
+    }
+
+    return {
+      datePlaceholder,
+      timePlaceholder
+    };
+  }
+  /**
+   * 从当前日期值或 inputValue 中解析出 insetInputValue
+   *
+   * 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
+      });
+    } else {
+      const insetInputFormat = getInsetInputFormatToken({
+        format,
+        type
+      });
+      inputValueStr = this.formatShowText(value, insetInputFormat);
+    }
+
+    const newInsetInputValue = getInsetInputValueFromInsetInputStr({
+      inputValue: inputValueStr,
+      type,
+      rangeSeparator
+    });
+    return newInsetInputValue;
+  }
+
+  concatInsetDateAndTime(_ref2) {
+    let {
+      date,
+      time
+    } = _ref2;
+    return `${date} ${time}`;
+  }
+
+  concatInsetDateRange(_ref3) {
+    let {
+      rangeStart,
+      rangeEnd
+    } = _ref3;
+
+    const {
+      rangeSeparator
+    } = this._adapter.getProps();
+
+    return `${rangeStart}${rangeSeparator}${rangeEnd}`;
+  }
+
+  concatInsetInputValue(_ref4) {
+    let {
+      insetInputValue
+    } = _ref4;
+
+    const {
+      type
+    } = this._adapter.getProps();
+
+    let inputValue = '';
+
+    switch (type) {
+      case 'date':
+      case 'month':
+        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,
+          time: insetInputValue.monthLeft.timeInput
+        });
+        const rangeEnd = this.concatInsetDateAndTime({
+          date: insetInputValue.monthRight.dateInput,
+          time: insetInputValue.monthRight.timeInput
+        });
+        inputValue = this.concatInsetDateRange({
+          rangeStart,
+          rangeEnd
+        });
+        break;
+    }
+
+    return inputValue;
+  }
+
+}

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

@@ -0,0 +1,74 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import { WeekStartNumber } from './_utils/getMonthTable';
+export interface MonthFoundationProps {
+    forwardRef: any;
+    month: Date;
+    selected: Set<string>;
+    rangeStart: string;
+    rangeEnd: string;
+    offsetRangeStart: string;
+    offsetRangeEnd: string;
+    onDayClick: (day: MonthDayInfo) => void;
+    onDayHover: (day: MonthDayInfo) => void;
+    weekStartsOn: WeekStartNumber;
+    disabledDate: (day: Date, options?: {
+        rangeStart: string;
+        rangeEnd: string;
+    }) => boolean;
+    weeksRowNum: number;
+    onWeeksRowNumChange: (weeksRowNum: number) => void;
+    renderDate: () => void;
+    renderFullDate: () => void;
+    hoverDay: string;
+    startDateOffset: () => void;
+    endDateOffset: () => void;
+    rangeInputFocus: string | boolean;
+    focusRecordsRef: any;
+    locale: any;
+    localeCode: string;
+    multiple: boolean;
+}
+export declare type MonthDayInfo = {
+    dayNumber: number;
+    dayNumberFull?: string;
+    fullDate: string;
+} | {
+    dayNumber: string;
+    dayNumberFull?: string;
+    fullDate: string;
+};
+export interface MonthInfo {
+    weeks: Array<MonthDayInfo[]>;
+    monthText: string;
+    month?: Date;
+}
+export interface MonthFoundationState {
+    weekdays: string[];
+    month: MonthInfo;
+    todayText: string;
+    weeksRowNum: number;
+}
+export interface MonthTable {
+    monthText: string;
+    weeks: unknown;
+    month: unknown;
+}
+export interface MonthAdapter extends DefaultAdapter<MonthFoundationProps, MonthFoundationState> {
+    updateToday: (todayText: string) => void;
+    setWeekDays: (weekdays: string[]) => void;
+    setWeeksRowNum: (weeksRowNum: number, callback?: () => void) => void;
+    updateMonthTable: (month: MonthInfo) => void;
+    notifyDayClick: MonthFoundationProps['onDayClick'];
+    notifyDayHover: MonthFoundationProps['onDayHover'];
+    notifyWeeksRowNumChange: MonthFoundationProps['onWeeksRowNumChange'];
+}
+export default class CalendarMonthFoundation extends BaseFoundation<MonthAdapter> {
+    constructor(adapter: MonthAdapter);
+    init(): void;
+    _getToday(): void;
+    getMonthTable(): void;
+    updateWeekDays(): void;
+    destroy(): void;
+    handleClick(day: MonthDayInfo): void;
+    handleHover(day?: MonthDayInfo): void;
+}

package/lib/es/datePicker/monthFoundation.js

@@ -0,0 +1,73 @@
+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';
+import isNullOrUndefined from '../utils/isNullOrUndefined';
+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) {
+        this._adapter.setWeeksRowNum(weeks.length, () => {
+          this._adapter.notifyWeeksRowNumChange(weeks.length);
+        });
+      }
+    }
+  }
+
+  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);
+  }
+
+}