@douyinfe/semi-foundation 2.1.1 → 2.1.5

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

@@ -0,0 +1,409 @@
+/// <reference types="react" />
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import { strings } from './constants';
+import { Type, DateInputFoundationProps } from './inputFoundation';
+import { MonthsGridFoundationProps } from './monthsGridFoundation';
+import { WeekStartNumber } from './_utils/getMonthTable';
+import { ArrayElement, Motion } from '../utils/type';
+export declare type ValidateStatus = ArrayElement<typeof strings.STATUS>;
+export declare type InputSize = ArrayElement<typeof strings.SIZE_SET>;
+export declare type Position = ArrayElement<typeof strings.POSITION_SET>;
+export declare type BaseValueType = string | number | Date;
+export declare type DayStatusType = {
+    isToday?: boolean;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+    isSelectedStart?: boolean;
+    isSelectedEnd?: boolean;
+    isInRange?: boolean;
+    isHover?: boolean;
+    isOffsetRangeStart?: boolean;
+    isOffsetRangeEnd?: boolean;
+    isHoverInOffsetRange?: boolean;
+};
+export declare type DisabledDateOptions = {
+    rangeStart?: string;
+    rangeEnd?: string;
+};
+export declare type PresetType = {
+    start?: string | Date | number;
+    end?: string | Date | number;
+    text?: string;
+};
+export declare type TriggerRenderProps = {
+    [x: string]: any;
+    value?: ValueType;
+    inputValue?: string;
+    placeholder?: string | string[];
+    autoFocus?: boolean;
+    size?: InputSize;
+    disabled?: boolean;
+    inputReadOnly?: boolean;
+    componentProps?: DatePickerFoundationProps;
+};
+export declare type DateOffsetType = (selectedDate?: Date) => Date;
+export declare type DensityType = 'default' | 'compact';
+export declare type DisabledDateType = (date?: Date, options?: DisabledDateOptions) => boolean;
+export declare type DisabledTimeType = (date?: Date | Date[], panelType?: string) => ({
+    disabledHours?: () => number[];
+    disabledMinutes?: (hour: number) => number[];
+    disabledSeconds?: (hour: number, minute: number) => number[];
+});
+export declare type OnCancelType = (date: Date | Date[], dateStr: string | string[]) => void;
+export declare type OnPanelChangeType = (date: Date | Date[], dateStr: string | string[]) => void;
+export declare type OnChangeType = (date?: Date | Date[] | string | string[], dateStr?: string | string[] | Date | Date[]) => void;
+export declare type OnConfirmType = (date: Date | Date[], dateStr: string | string[]) => void;
+export declare type OnPresetClickType = (item: PresetType, e: any) => void;
+export declare type PresetsType = Array<PresetType | (() => PresetType)>;
+export declare type RenderDateType = (dayNumber?: number, fullDate?: string) => any;
+export declare type RenderFullDateType = (dayNumber?: number, fullDate?: string, dayStatus?: DayStatusType) => any;
+export declare type TriggerRenderType = (props: TriggerRenderProps) => any;
+export declare type ValueType = BaseValueType | BaseValueType[];
+export interface ElementProps {
+    bottomSlot?: any;
+    insetLabel?: any;
+    prefix?: any;
+    topSlot?: any;
+}
+export interface RenderProps {
+    renderDate?: RenderDateType;
+    renderFullDate?: RenderFullDateType;
+    triggerRender?: TriggerRenderType;
+}
+export interface EventHandlerProps {
+    onCancel?: OnCancelType;
+    onChange?: OnChangeType;
+    onOpenChange?: (status: boolean) => void;
+    onPanelChange?: OnPanelChangeType;
+    onConfirm?: OnConfirmType;
+    onBlur?: (e: any) => void;
+    onClear?: (e: any) => void;
+    onFocus?: (e: any, rangType: 'rangeStart' | 'rangeEnd') => void;
+    onPresetClick?: OnPresetClickType;
+}
+export interface DatePickerFoundationProps extends ElementProps, RenderProps, EventHandlerProps {
+    autoAdjustOverflow?: boolean;
+    autoFocus?: boolean;
+    autoSwitchDate?: boolean;
+    className?: string;
+    defaultOpen?: boolean;
+    defaultPickerValue?: ValueType;
+    defaultValue?: ValueType;
+    density?: DensityType;
+    disabled?: boolean;
+    disabledDate?: DisabledDateType;
+    disabledTime?: DisabledTimeType;
+    dropdownClassName?: string;
+    dropdownStyle?: React.CSSProperties;
+    endDateOffset?: DateOffsetType;
+    format?: string;
+    getPopupContainer?: () => HTMLElement;
+    inputReadOnly?: boolean;
+    inputStyle?: React.CSSProperties;
+    max?: number;
+    motion?: Motion;
+    multiple?: boolean;
+    needConfirm?: boolean;
+    onChangeWithDateFirst?: boolean;
+    open?: boolean;
+    placeholder?: string | string[];
+    position?: Position;
+    prefixCls?: string;
+    presets?: PresetsType;
+    showClear?: boolean;
+    size?: InputSize;
+    spacing?: number;
+    startDateOffset?: DateOffsetType;
+    stopPropagation?: boolean | string;
+    style?: React.CSSProperties;
+    timePickerOpts?: any;
+    timeZone?: string | number;
+    type?: Type;
+    validateStatus?: ValidateStatus;
+    value?: ValueType;
+    weekStartsOn?: WeekStartNumber;
+    zIndex?: number;
+    syncSwitchMonth?: boolean;
+    hideDisabledOptions?: MonthsGridFoundationProps['hideDisabledOptions'];
+    disabledTimePicker?: MonthsGridFoundationProps['disabledTimePicker'];
+    locale?: any;
+    dateFnsLocale?: any;
+    localeCode?: string;
+    rangeSeparator?: string;
+}
+export interface DatePickerFoundationState {
+    panelShow: boolean;
+    isRange: boolean;
+    inputValue: string;
+    value: ValueType;
+    cachedSelectedValue: ValueType;
+    prevTimeZone: string | number;
+    motionEnd: boolean;
+    rangeInputFocus: 'rangeStart' | 'rangeEnd' | boolean;
+    autofocus: boolean;
+}
+export { Type, DateInputFoundationProps };
+export interface DatePickerAdapter extends DefaultAdapter<DatePickerFoundationProps, DatePickerFoundationState> {
+    togglePanel: (panelShow: boolean) => void;
+    registerClickOutSide: () => void;
+    unregisterClickOutSide: () => void;
+    notifyBlur: DatePickerFoundationProps['onBlur'];
+    notifyFocus: DatePickerFoundationProps['onFocus'];
+    notifyClear: DatePickerFoundationProps['onClear'];
+    notifyChange: DatePickerFoundationProps['onChange'];
+    notifyCancel: DatePickerFoundationProps['onCancel'];
+    notifyConfirm: DatePickerFoundationProps['onConfirm'];
+    notifyOpenChange: DatePickerFoundationProps['onOpenChange'];
+    notifyPresetsClick: DatePickerFoundationProps['onPresetClick'];
+    updateValue: (value: ValueType) => void;
+    updatePrevTimezone: (prevTimeZone: string | number) => void;
+    updateCachedSelectedValue: (cachedSelectedValue: ValueType) => void;
+    updateInputValue: (inputValue: string) => void;
+    needConfirm: () => boolean;
+    typeIsYearOrMonth: () => boolean;
+    setMotionEnd: (motionEnd: boolean) => void;
+    setRangeInputFocus: (rangeInputFocus: DatePickerFoundationState['rangeInputFocus']) => void;
+    couldPanelClosed: () => boolean;
+    isEventTarget: (e: any) => boolean;
+}
+/**
+ * The datePicker foundation.js is responsible for maintaining the date value and the input box value, as well as the callback of both
+ *  task 1. Accept the selected date change, update the date value, and update the input box value according to the date = > Notify the change
+ *  task 2. When the input box changes, update the date value = > Notify the change
+ */
+export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapter> {
+    constructor(adapter: DatePickerAdapter);
+    init(): void;
+    isValidTimeZone(timeZone?: string | number): boolean;
+    initFromProps({ value, timeZone, prevTimeZone }: Pick<DatePickerFoundationProps, 'value' | 'timeZone'> & {
+        prevTimeZone?: string | number;
+    }): void;
+    parseWithTimezone(value: ValueType, timeZone: string | number, prevTimeZone: string | number): Date[];
+    _isMultiple(): boolean;
+    /**
+     *
+     *  Verify and parse the following three format inputs
+     *
+        1. Date object
+        2. ISO 9601-compliant string
+        3. ts timestamp
+
+        Unified here to format the incoming value and output it as a Date object
+     *
+     */
+    _parseValue(value: BaseValueType): Date;
+    destroy(): void;
+    initPanelOpenStatus(defaultOpen?: boolean): void;
+    openPanel(): void;
+    /**
+     * do these side effects when type is dateRange or dateTimeRange
+     *   1. trigger input blur, if input value is invalid, set input value and state value to previous status
+     *   2. set cachedSelectedValue using given dates(in needConfirm mode)
+     *      - directly closePanel without click confirm will set cachedSelectedValue to state value
+     *      - select one date(which means that the selection value is incomplete) and click confirm also set cachedSelectedValue to state value
+     * @param {String} inputValue
+     * @param {Date[]} dates
+     */
+    rangeTypeSideEffectsWhenClosePanel(inputValue: string, dates: Date[]): void;
+    /**
+     * timing to call closePanel
+     *  1. click confirm button
+     *  2. click cancel button
+     *  3. select date, time, year, month
+     *    - date type and not multiple, close panel after select date
+     *    - dateRange type, close panel after select rangeStart and rangeEnd
+     *  4. click outside
+     * @param {Event} e
+     * @param {String} inputValue
+     * @param {Date[]} dates
+     */
+    closePanel(e?: any, inputValue?: string, dates?: Date[]): void;
+    /**
+     * Callback when the content of the input box changes
+     * Update the date panel if the changed value is a legal date, otherwise only update the input box
+     * @param {String} input The value of the input box after the change
+     * @param {Event} e
+     */
+    handleInputChange(input: string, e: any): void;
+    /**
+     * Input box blur
+     * @param {String} input
+     * @param {Event} e
+     */
+    handleInputBlur(input?: string, e?: any): void;
+    /**
+     * called when range type rangeEnd input tab press
+     * @param {Event} e
+     */
+    handleRangeEndTabPress(e: any): void;
+    /**
+     * called when the input box is focused
+     * @param {Event} e input focus event
+     * @param {String} range 'rangeStart' or 'rangeEnd', use when type is range
+     */
+    handleInputFocus(e: any, range: 'rangeStart' | 'rangeEnd'): void;
+    handleSetRangeFocus(rangeInputFocus: boolean | 'rangeStart' | 'rangeEnd'): void;
+    handleInputClear(e: any): void;
+    /**
+     * 范围选择清除按钮回调
+     * 因为清除按钮没有集成在Input内，因此需要手动清除 value、inputValue、cachedValue
+     *
+     * callback of range input clear button
+     * Since the clear button is not integrated in Input, you need to manually clear value, inputValue, cachedValue
+     */
+    handleRangeInputClear(e: any): void;
+    handleRangeInputBlur(value: any, e: any): void;
+    handleInputComplete(input?: any): void;
+    /**
+     * Parse the input, return the time object if it is valid,
+     *  otherwise return "
+     *
+     * @param {string} input
+     * @returns  {Date [] | '}
+     */
+    parseInput(input?: string): Date[];
+    /**
+     * Parses the input when multiple is true, if valid,
+     *  returns a list of time objects, otherwise returns an array
+     *
+     * @param {string} [input='']
+     * @param {string} [separator=',']
+     * @param {boolean} [needDedupe=false]
+     * @returns {Date[]}
+     */
+    parseMultipleInput(input?: string, separator?: string, needDedupe?: boolean): Date[];
+    /**
+     * dates[] => string
+     *
+     * @param {Date[]} dates
+     * @returns {string}
+     */
+    formatDates(dates?: Date[]): string;
+    /**
+     * dates[] => string
+     *
+     * @param {Date[]} dates
+     * @returns {string}
+     */
+    formatMultipleDates(dates?: Date[], separator?: string): string;
+    /**
+     * Update date value and the value of the input box
+     * 1. Select Update
+     * 2. Input Update
+     * @param {Date|''} value
+     * @param {Boolean} forceUpdateValue
+     * @param {String} input
+     */
+    _updateValueAndInput(value: Date | Array<Date>, forceUpdateValue?: boolean, input?: string): void;
+    /**
+     * when changing the selected value through the date panel
+     * @param {*} value
+     * @param {*} options
+     */
+    handleSelectedChange(value: Date[], options?: {
+        fromPreset?: boolean;
+        needCheckFocusRecord?: boolean;
+    }): void;
+    /**
+     * when changing the year and month through the panel when the type is year or month
+     * @param {*} item
+     */
+    handleYMSelectedChange(item?: {
+        currentMonth?: number;
+        currentYear?: number;
+    }): void;
+    handleConfirm(): void;
+    handleCancel(): void;
+    handlePresetClick(item: PresetType, e: any): void;
+    /**
+     * 根据 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");
+     *
+     * According to the type processing onChange returned parameters
+     *
+     *   - the returned date needs to convert the user time to the set time zone time
+     *       - user time: user computer system time
+     *       - time zone time: timeZone set by ConfigProvider
+     *   - example: the user sets the time zone to + 9, the computer's time zone is + 8 zone, 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 passed out, you need to + 8 22:00 = > + 9 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
+     * @return {{ notifyDate: Date|Date[], notifyValue: string|string[]}}
+     */
+    disposeCallbackArgs(value: Date | Date[]): {
+        notifyValue: any;
+        notifyDate: any;
+    };
+    /**
+     * Notice: Check whether the date is the same as the state value before calling
+     * @param {Date[]} value
+     */
+    _notifyChange(value: Date[]): void;
+    /**
+     * Get the date changed through the date panel or enter
+     * @param {Date[]} dates
+     * @returns {Date[]}
+     */
+    _getChangedDates(dates: Date[]): any[];
+    /**
+     * Whether a date is disabled
+     * @param {Array} value
+     */
+    _someDateDisabled(value: Date[]): boolean;
+    getMergedMotion: (motion: any) => any;
+    /**
+     * Format locale date
+     * locale get from LocaleProvider
+     * @param {Date} date
+     * @param {String} token
+     */
+    localeFormat(date: Date, token: string): string;
+    _isRangeType: () => boolean;
+    _isRangeValueComplete: (value: Date[] | Date) => boolean;
+    /**
+     * Convert computer date to UTC date
+     * Before passing the date to the user, you need to convert the date to UTC time
+     * dispose date from computer date to utc date
+     * When given timeZone prop, you should convert computer date to utc date before passing to user
+     * @param {(date: Date) => Boolean} fn
+     * @param {Date|Date[]} date
+     * @returns {Boolean}
+     */
+    disposeDateFn(fn: (date: Date, ...rest: any) => boolean, date: Date | Date[], ...rest: any[]): boolean;
+    /**
+     * Determine whether the date is disabled
+     * Whether the date is disabled
+     * @param {Date} date
+     * @returns {Boolean}
+     */
+    disabledDisposeDate(date: Date, ...rest: any[]): boolean;
+    /**
+     * Determine whether the date is disabled
+     * Whether the date time is disabled
+     * @param {Date|Date[]} date
+     * @returns {Object}
+     */
+    disabledDisposeTime(date: Date | Date[], ...rest: any[]): boolean;
+    /**
+     * Trigger wrapper needs to do two things:
+     *  1. Open Panel when clicking trigger;
+     *  2. When clicking on a child but the child does not listen to the focus event, manually trigger focus
+     *
+     * @param {Event} e
+     * @returns
+     */
+    handleTriggerWrapperClick(e: any): void;
+}