@douyinfe/semi-foundation 2.1.1 → 2.1.2

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

@@ -0,0 +1,59 @@
+/// <reference types="react" />
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import { BaseValueType, ValidateStatus, ValueType } from './foundation';
+export declare type Type = 'date' | 'dateRange' | 'year' | 'month' | 'dateTime' | 'dateTimeRange';
+export declare type RangeType = 'rangeStart' | 'rangeEnd';
+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;
+}
+export interface DateInputElementProps {
+    insetLabel?: any;
+    prefix?: any;
+}
+export interface DateInputFoundationProps extends DateInputElementProps, DateInputEventHandlerProps {
+    [x: string]: any;
+    value?: ValueType;
+    disabled?: boolean;
+    type?: Type;
+    multiple?: boolean;
+    showClear?: boolean;
+    format?: string;
+    inputStyle?: React.CSSProperties;
+    inputReadOnly?: boolean;
+    validateStatus?: ValidateStatus;
+    prefixCls?: string;
+    rangeSeparator?: string;
+}
+export interface DateInputAdapter extends DefaultAdapter {
+    updateIsFocusing: (isFocusing: boolean) => void;
+    notifyClick: DateInputFoundationProps['onClick'];
+    notifyChange: DateInputFoundationProps['onChange'];
+    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[]): string;
+}

package/lib/cjs/datePicker/inputFoundation.js

@@ -0,0 +1,125 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+
+var _formatter = require("./_utils/formatter");
+
+var _getDefaultFormatToken = require("./_utils/getDefaultFormatToken");
+
+/* eslint-disable max-len */
+const KEY_CODE_ENTER = 'Enter';
+const KEY_CODE_TAB = 'Tab';
+
+class InputFoundation extends _foundation.default {
+  constructor(adapter) {
+    super((0, _assign.default)({}, 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) {
+    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) {
+    const {
+      type,
+      dateFnsLocale,
+      format,
+      rangeSeparator
+    } = this._adapter.getProps();
+
+    const formatToken = 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;
+
+      default:
+        break;
+    }
+
+    return text;
+  }
+
+}
+
+exports.default = InputFoundation;

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

@@ -0,0 +1,73 @@
+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;
+}
+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/cjs/datePicker/monthFoundation.js

@@ -0,0 +1,96 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+
+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"));
+
+// import { cssClasses, strings } from './constants';
+class CalendarMonthFoundation extends _foundation.default {
+  constructor(adapter) {
+    super((0, _assign.default)({}, 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 ((0, _isArray.default)(weeks) && weeks.length !== weeksRowNum) {
+        this._adapter.setWeeksRowNum(weeks.length, () => {
+          this._adapter.notifyWeeksRowNumChange(weeks.length);
+        });
+      }
+    }
+  }
+
+  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

@@ -0,0 +1,218 @@
+/// <reference types="react" />
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import { strings } from './constants';
+import { WeekStartNumber } from './_utils/getMonthTable';
+import { BaseValueType, ValueType } from './foundation';
+import { MonthDayInfo } from './monthFoundation';
+import { ArrayElement } from '../utils/type';
+declare type Type = ArrayElement<typeof strings.TYPE_SET>;
+interface MonthsGridElementProps {
+    navPrev?: React.ReactNode;
+    navNext?: React.ReactNode;
+    renderDate?: () => React.ReactNode;
+    renderFullDate?: () => React.ReactNode;
+}
+export declare type PanelType = 'left' | 'right';
+export interface MonthsGridFoundationProps extends MonthsGridElementProps {
+    type?: Type;
+    defaultValue?: ValueType;
+    defaultPickerValue?: ValueType;
+    multiple?: boolean;
+    max?: number;
+    splitPanels?: boolean;
+    weekStartsOn?: WeekStartNumber;
+    disabledDate?: (date: Date, options?: {
+        rangeStart: string;
+        rangeEnd: string;
+    }) => boolean;
+    disabledTime?: (date: Date | Date[], panelType: PanelType) => void;
+    disabledTimePicker?: boolean;
+    hideDisabledOptions?: boolean;
+    onMaxSelect?: (v?: any) => void;
+    timePickerOpts?: any;
+    isControlledComponent?: boolean;
+    rangeStart?: string;
+    rangeInputFocus?: boolean | string;
+    locale?: any;
+    localeCode?: string;
+    format?: string;
+    startDateOffset?: () => void;
+    endDateOffset?: () => void;
+    autoSwitchDate?: boolean;
+    motionEnd?: boolean;
+    density?: string;
+    dateFnsLocale?: any;
+    timeZone?: string | number;
+    syncSwitchMonth?: boolean;
+    onChange?: (value: [Date] | [Date, Date], options?: {
+        closePanel?: boolean;
+        needCheckFocusRecord?: boolean;
+    }) => void;
+    onPanelChange?: (date: Date | Date[], dateString: string | string[]) => void;
+    setRangeInputFocus?: (rangeInputFocus: 'rangeStart' | 'rangeEnd') => void;
+    isAnotherPanelHasOpened?: (currentRangeInput: 'rangeStart' | 'rangeEnd') => boolean;
+    focusRecordsRef?: any;
+}
+export interface MonthInfo {
+    pickerDate: Date;
+    showDate: Date;
+    isTimePickerOpen: boolean;
+    isYearPickerOpen: boolean;
+}
+export interface MonthsGridFoundationState {
+    selected: Set<string>;
+    monthLeft: MonthInfo;
+    monthRight: MonthInfo;
+    maxWeekNum: number;
+    hoverDay: string;
+    rangeStart: string;
+    rangeEnd: string;
+    currentPanelHeight: number;
+    offsetRangeStart: string;
+    offsetRangeEnd: string;
+    weeksRowNum?: number;
+}
+export interface MonthsGridDateAdapter {
+    updateDaySelected: (selected: Set<string>) => void;
+}
+export interface MonthsGridRangeAdapter {
+    setRangeStart: (rangeStart: string) => void;
+    setRangeEnd: (rangeEnd: string) => void;
+    setHoverDay: (hoverDay: string) => void;
+    setWeeksHeight: (maxWeekNum: number) => void;
+    setOffsetRangeStart: (offsetRangeStart: string) => void;
+    setOffsetRangeEnd: (offsetRangeEnd: string) => void;
+}
+export interface MonthsGridAdapter extends DefaultAdapter<MonthsGridFoundationProps, MonthsGridFoundationState>, MonthsGridRangeAdapter, MonthsGridDateAdapter {
+    updateMonthOnLeft: (v: MonthInfo) => void;
+    updateMonthOnRight: (v: MonthInfo) => void;
+    notifySelectedChange: MonthsGridFoundationProps['onChange'];
+    notifyMaxLimit: MonthsGridFoundationProps['onMaxSelect'];
+    notifyPanelChange: MonthsGridFoundationProps['onPanelChange'];
+    setRangeInputFocus: MonthsGridFoundationProps['setRangeInputFocus'];
+    isAnotherPanelHasOpened: MonthsGridFoundationProps['isAnotherPanelHasOpened'];
+}
+export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapter> {
+    newBiMonthPanelDate: [Date, Date];
+    constructor(adapter: MonthsGridAdapter);
+    init(): void;
+    initDefaultPickerValue(): void;
+    updateSelectedFromProps(values: ValueType, 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;
+    destroy(): void;
+    toMonth(panelType: PanelType, target: Date): void;
+    toYear(panelType: PanelType, target: Date): void;
+    toYearMonth(panelType: PanelType, target: Date): void;
+    isRangeType(type?: Type): boolean;
+    handleSwitchMonth(switchType: 'prevMonth' | 'nextMonth', panelType: PanelType): void;
+    prevMonth(panelType: PanelType): void;
+    nextMonth(panelType: PanelType): void;
+    prevYear(panelType: PanelType): void;
+    nextYear(panelType: PanelType): void;
+    /**
+     * Calculate the year and month difference
+     */
+    _getDiff(type: 'month' | 'year', target: Date, panelType: PanelType): number;
+    _getPanelDetail(panelType: PanelType): any;
+    /**
+     * Format locale date
+     * locale get from LocaleProvider
+     * @param {Date} date
+     * @param {String} token
+     * @returns
+     */
+    localeFormat(date: Date, token: string): string;
+    isValidTimeZone(timeZone?: string | number): boolean;
+    /**
+     * 根据 type 处理 onChange 返回的参数
+     *
+     *  - 返回的日期需要把用户时间转换为设置的时区时间
+     *      - 用户时间：用户计算机系统时间
+     *      - 时区时间：通过 ConfigProvider 设置的 timeZone
+     *  - 例子：用户设置时区为+9，计算机所在时区为+8区，然后用户选择了22:00
+     *      - DatePicker 内部保存日期 state 为 +8 的 22:00 => a = new Date("2021-05-25 22:00:00")
+     *      - 传出去时，需要把 +8 的 22:00 => +9 的 22:00 => b = zonedTimeToUtc(a, "+09:00");
+     *
+     * The parameters returned by onChange are processed according to type
+     *
+     *  -The returned date needs to convert the user time to the set time zone time
+     *      -User time: user computer system time
+     *      -Time zone: timeZone set by ConfigProvider
+     *  -Example: The user sets the time zone to + 9, and the time zone where the computer is located is + 8, and then the user selects 22:00
+     *      -DatePicker internal save date state is + 8 22:00 = > a = new Date ("2021-05-25 22:00:00")
+     *      -When passing out, you need to put + 8's 22:00 = > + 9's 22:00 = > b = zonedTimeToUtc (a, "+ 09:00");
+     *
+     *  e.g.
+     *  let a = new Date ("2021-05-25 22:00:00");
+     *       = > Tue May 25 2021 22:00:00 GMT + 0800 (China Standard Time)
+     *  let b = zonedTimeToUtc (a, "+ 09:00");
+     *       = > Tue May 25 2021 21:00:00 GMT + 0800 (China Standard Time)
+     *
+     * @param {Date|Date[]} value
+     */
+    disposeCallbackArgs(value: Date | Date[]): {
+        notifyValue: any;
+        notifyDate: any;
+    };
+    handleYearOrMonthChange(type: 'prevMonth' | 'nextMonth' | 'prevYear' | 'nextYear', panelType?: PanelType, step?: number, notSeparateInRange?: boolean): void;
+    /**
+     * You have chosen to switch the year and month in the future to directly update the Date without closing the date panel
+     * @param {*} type
+     * @param {*} targetDate
+     */
+    updateDateAfterChangeYM(type: 'prevMonth' | 'nextMonth' | 'prevYear' | 'nextYear', targetDate: Date): void;
+    _isMultiple(): boolean;
+    _isRange(): void;
+    handleDayClick(day: MonthDayInfo, panelType: PanelType): void;
+    handleDateSelected(day: {
+        fullDate: string;
+        fullValidDate?: Date;
+    }, panelType: PanelType): void;
+    handleShowDateAndTime(panelType: PanelType, pickerDate: number | Date, showDate?: Date): void;
+    /**
+     * link date and time
+     *
+     * @param {Date|string} date
+     * @param {Date|string} time
+     * @returns {Date}
+     */
+    _mergeDateAndTime(date: Date | string, time: Date | string): Date;
+    handleRangeSelected(day: MonthDayInfo): void;
+    _isNeedSwap(rangeStart: Date | string, rangeEnd: Date | string): boolean;
+    /**
+     * Day may be empty, this is unhover state
+     * @param {*} day
+     */
+    handleDayHover(day?: {
+        fullDate: string;
+    }, panelType?: PanelType): void;
+    _autoAdjustMonth(monthLeft: MonthInfo, monthRight: MonthInfo): {
+        monthLeft: MonthInfo;
+        monthRight: MonthInfo;
+    };
+    getValidTimeFormat(): string;
+    getValidDateFormat(): any;
+    handleTimeChange(newTime: {
+        timeStampValue: number;
+    }, panelType: PanelType): void;
+    /**
+     * Update the time part in the range
+     * @param {string} panelType
+     * @param {Date} timeDate
+     */
+    _updateTimeInDateRange(panelType: PanelType, timeDate: Date): void;
+    _updatePanelDetail(panelType: PanelType, kvs: {
+        showDate?: number | Date;
+        pickerDate?: number | Date;
+        isTimePickerOpen?: boolean;
+        isYearPickerOpen?: boolean;
+    }): void;
+    showYearPicker(panelType: PanelType): void;
+    showTimePicker(panelType: PanelType, opt?: boolean): void;
+    showDatePanel(panelType: PanelType): void;
+}
+export {};