@douyinfe/semi-ui 2.19.1-alpha.2 → 2.19.2-alpha.0

package/datePicker/footer.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import classnames from 'classnames';
-import Button from '../button';
-import { get } from 'lodash';
-import { Locale } from '../locale/interface';
-
-interface FooterProps {
-    prefixCls?: string;
-    locale: Locale['DatePicker'];
-    localeCode: string;
-    onCancelClick?: React.MouseEventHandler<HTMLButtonElement>;
-    onConfirmClick?: React.MouseEventHandler<HTMLButtonElement>;
-}
-
-export default function Footer(props = {} as FooterProps) {
-    const { prefixCls, locale, onCancelClick, onConfirmClick } = props;
-    const wrapCls = classnames(`${prefixCls}-footer`);
-
-    return (
-        <div className={wrapCls}>
-            <Button theme="borderless" onClick={onCancelClick}>
-                {get(locale, 'footer.cancel', '')}
-            </Button>
-            <Button theme="solid" onClick={onConfirmClick}>
-                {get(locale, 'footer.confirm', '')}
-            </Button>
-        </div>
-    );
-}

package/datePicker/index.tsx

@@ -1,86 +0,0 @@
-import React from 'react';
-
-import { forwardStatics } from '@douyinfe/semi-foundation/utils/object';
-import { numbers, strings } from '@douyinfe/semi-foundation/datePicker/constants';
-import DatePicker, { DatePickerProps } from './datePicker';
-import ConfigContext from '../configProvider/context';
-import LocaleConsumer from '../locale/localeConsumer';
-import { Locale } from '../locale/interface';
-
-export { DateInputProps } from './dateInput';
-export { DatePickerProps } from './datePicker';
-export { MonthProps } from './month';
-export { MonthsGridProps } from './monthsGrid';
-export { QuickControlProps } from './quickControl';
-export { YearAndMonthProps } from './yearAndMonth';
-
-export default forwardStatics(
-    React.forwardRef<DatePicker, DatePickerProps>((props, ref) => {
-        const propsObj = { ...props };
-        const { type, format, rangeSeparator } = propsObj;
-
-        if (typeof format === 'string' && format) {
-            if (!/[Hhms]+/.test(format)) {
-                if (type === 'dateTime') {
-                    propsObj.type = 'date';
-                } else if (type === 'dateTimeRange') {
-                    propsObj.type = 'dateRange';
-                }
-            }
-        }
-
-        // Add spaces at both ends to prevent conflicts with characters in the date when separating
-        if (rangeSeparator && typeof rangeSeparator === 'string') {
-            propsObj.rangeSeparator = ` ${rangeSeparator.trim()} `;
-        }
-
-        if (propsObj.insetInput) {
-            if (!propsObj.position) {
-                propsObj.position = strings.POSITION_INLINE_INPUT;
-            }
-            /**
-             * When insetInput is `true` and `position` includes `over`, use 1px `spacing` to solve the problem of border-radius leakage in the upper left corner
-             * 
-             * @see https://user-images.githubusercontent.com/26477537/158817185-126a5f33-41f7-414a-8e36-8d1be2dda5cd.png
-             */
-            if (propsObj.position.includes('Over') && !propsObj.spacing) {
-                propsObj.spacing = numbers.SPACING_INSET_INPUT;
-            }
-        }
-
-        return (
-            <ConfigContext.Consumer>
-                {({ timeZone }: { timeZone?: string | number }) => (
-                    <LocaleConsumer componentName={'DatePicker'}>
-                        {(locale: Locale['DatePicker'], localeCode: string, dateFnsLocale: Locale['dateFnsLocale']) => (
-                            <DatePicker
-                                timeZone={timeZone}
-                                localeCode={localeCode}
-                                locale={locale}
-                                dateFnsLocale={dateFnsLocale}
-                                {...propsObj}
-                                ref={ref}
-                            />
-                        )}
-                    </LocaleConsumer>
-                )}
-            </ConfigContext.Consumer>
-        );
-    }),
-    DatePicker
-);
-
-export {
-    BaseValueType,
-    DayStatusType,
-    DisabledDateOptions,
-    DisabledDateType,
-    DisabledTimeType,
-    InputSize,
-    Position,
-    PresetType,
-    PresetsType,
-    TriggerRenderProps,
-    ValidateStatus,
-    ValueType,
-} from '@douyinfe/semi-foundation/datePicker/foundation';

package/datePicker/insetInput.tsx

@@ -1,76 +0,0 @@
-import React from 'react';
-import { get } from 'lodash';
-
-import {
-    InsetInputValue,
-    Type,
-    InsetInputChangeFoundationProps,
-} from '@douyinfe/semi-foundation/datePicker/inputFoundation';
-import Input, { InputProps } from '../input';
-
-export interface InsetDateInputProps {
-    forwardRef: InputProps['forwardRef'];
-    insetInputValue: InsetInputValue;
-    placeholder: string;
-    valuePath: string;
-    onChange: (options: InsetInputChangeFoundationProps) => void;
-    onFocus: InputProps['onFocus'];
-}
-
-export interface InsetTimeInputProps {
-    disabled: boolean;
-    insetInputValue: InsetInputValue;
-    placeholder: string;
-    valuePath: string;
-    type: Type;
-    onChange: (options: InsetInputChangeFoundationProps) => void;
-    onFocus: InputProps['onFocus'];
-}
-
-export function InsetDateInput(props: InsetDateInputProps) {
-    const { insetInputValue, valuePath, onFocus, onChange, placeholder, forwardRef } = props;
-    const value = get(insetInputValue, valuePath);
-
-    return (
-        <Input
-            value={value}
-            onChange={(value, event) => {
-                onChange({
-                    value,
-                    event,
-                    insetInputValue,
-                    valuePath,
-                });
-            }}
-            onFocus={onFocus}
-            placeholder={placeholder}
-            ref={forwardRef}
-        />
-    );
-}
-
-export function InsetTimeInput(props: InsetTimeInputProps) {
-    const { insetInputValue, valuePath, type, onFocus, onChange, placeholder, disabled } = props;
-    const _isTimeType = type.includes('Time');
-    if (!_isTimeType) {
-        return null;
-    }
-    const value = get(insetInputValue, valuePath);
-
-    return (
-        <Input
-            value={value}
-            onChange={(value, event) => {
-                onChange({
-                    value,
-                    event,
-                    insetInputValue,
-                    valuePath,
-                });
-            }}
-            onFocus={onFocus}
-            placeholder={placeholder}
-            disabled={disabled}
-        />
-    );
-}

package/datePicker/month.tsx

@@ -1,395 +0,0 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions */
-/* eslint-disable max-len */
-import React from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import MonthFoundation, { MonthAdapter, MonthDayInfo, MonthFoundationProps, MonthFoundationState } from '@douyinfe/semi-foundation/datePicker/monthFoundation';
-import { cssClasses, numbers } from '@douyinfe/semi-foundation/datePicker/constants';
-import BaseComponent, { BaseProps } from '../_base/baseComponent';
-import { isBefore, isAfter, isBetween, isSameDay } from '@douyinfe/semi-foundation/datePicker/_utils/index';
-import { noop, stubFalse, isFunction } from 'lodash';
-import { parseISO } from 'date-fns';
-import { Locale } from '../locale/interface';
-
-const prefixCls = cssClasses.PREFIX;
-
-export interface MonthProps extends MonthFoundationProps, BaseProps {
-    forwardRef: React.Ref<any>;
-    locale: Locale['DatePicker'];
-    focusRecordsRef: React.RefObject<{ rangeStart: boolean; rangeEnd: boolean }>;
-}
-
-export type MonthState = MonthFoundationState;
-
-export default class Month extends BaseComponent<MonthProps, MonthState> {
-    static propTypes = {
-        month: PropTypes.object,
-        selected: PropTypes.object,
-        rangeStart: PropTypes.string,
-        rangeEnd: PropTypes.string,
-        offsetRangeStart: PropTypes.string,
-        offsetRangeEnd: PropTypes.string,
-        onDayClick: PropTypes.func,
-        onDayHover: PropTypes.func,
-        weekStartsOn: PropTypes.number,
-        disabledDate: PropTypes.func,
-        weeksRowNum: PropTypes.number,
-        onWeeksRowNumChange: PropTypes.func,
-        renderDate: PropTypes.func,
-        renderFullDate: PropTypes.func,
-        hoverDay: PropTypes.string, // Real-time hover date
-        startDateOffset: PropTypes.func,
-        endDateOffset: PropTypes.func,
-        rangeInputFocus: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-        focusRecordsRef: PropTypes.object,
-        multiple: PropTypes.bool,
-    };
-
-    static defaultProps = {
-        month: new Date(),
-        selected: new Set(),
-        rangeStart: '',
-        rangeEnd: '',
-        onDayClick: noop,
-        onDayHover: noop,
-        onWeeksRowNumChange: noop,
-        weekStartsOn: numbers.WEEK_START_ON,
-        disabledDate: stubFalse,
-        weeksRowNum: 0,
-    };
-    monthRef: React.RefObject<HTMLDivElement>;
-    foundation: MonthFoundation;
-
-    constructor(props: MonthProps) {
-        super(props);
-        this.state = {
-            weekdays: [],
-            month: { weeks: [], monthText: '' },
-            todayText: '',
-            weeksRowNum: props.weeksRowNum,
-        };
-        this.monthRef = React.createRef();
-    }
-
-    get adapter(): MonthAdapter {
-        return {
-            ...super.adapter,
-            updateToday: todayText => this.setState({ todayText }),
-            setWeekDays: weekdays => this.setState({ weekdays }),
-            setWeeksRowNum: (weeksRowNum, callback) => this.setState({ weeksRowNum }, callback),
-            updateMonthTable: month => this.setState({ month }),
-            notifyDayClick: day => this.props.onDayClick(day),
-            notifyDayHover: day => this.props.onDayHover(day),
-            notifyWeeksRowNumChange: weeksRowNum => this.props.onWeeksRowNumChange(weeksRowNum),
-        };
-    }
-
-    componentDidMount() {
-        this.foundation = new MonthFoundation(this.adapter);
-        this.foundation.init();
-    }
-
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
-
-    componentDidUpdate(prevProps: MonthProps, prevState: MonthState) {
-        if (prevProps.month !== this.props.month) {
-            this.foundation.getMonthTable();
-        }
-    }
-
-    getSingleDayStatus(options: Partial<MonthProps> & { fullDate: string; todayText: string }) {
-        const { fullDate, todayText, selected, disabledDate, rangeStart, rangeEnd } = options;
-        const disabledOptions = { rangeStart, rangeEnd };
-        const isToday = fullDate === todayText;
-        const isSelected = selected.has(fullDate);
-
-        let isDisabled = disabledDate && disabledDate(parseISO(fullDate), disabledOptions);
-        if (
-            !isDisabled &&
-            this.props.rangeInputFocus === 'rangeStart' &&
-            rangeEnd &&
-            this.props.focusRecordsRef &&
-            this.props.focusRecordsRef.current.rangeEnd
-        ) {
-            // The reason for splitting is that the dateRangeTime format: 'yyyy-MM-dd HH:MM:SS'
-            isDisabled = isAfter(fullDate, rangeEnd.trim().split(/\s+/)[0]);
-        }
-        if (
-            !isDisabled &&
-            this.props.rangeInputFocus === 'rangeEnd' &&
-            rangeStart &&
-            this.props.focusRecordsRef &&
-            this.props.focusRecordsRef.current.rangeStart
-        ) {
-            // The reason for splitting is that the dateRangeTime format: 'yyyy-MM-dd HH:MM:SS'
-            isDisabled = isBefore(fullDate, rangeStart.trim().split(/\s+/)[0]);
-        }
-
-        return {
-            isToday, // Today
-            isSelected, // Selected
-            isDisabled // Disabled
-        };
-    }
-
-    getDateRangeStatus(options: Partial<MonthProps> & { fullDate: string }) {
-        const { rangeStart, rangeEnd, fullDate, hoverDay, offsetRangeStart, offsetRangeEnd, rangeInputFocus } = options;
-
-        // If no item is selected, return the empty object directly
-        const _isDateRangeAnySelected = Boolean(rangeStart || rangeEnd);
-        const _isDateRangeSelected = Boolean(rangeStart && rangeEnd);
-        const _isOffsetDateRangeAnyExist = offsetRangeStart || offsetRangeEnd;
-        if (!_isDateRangeAnySelected) {
-            return ({});
-        }
-
-        // The range selects the hover date, and the normal hover is .semi-datepicker-main: hover
-        const _isHoverDay = isSameDay(hoverDay, fullDate);
-
-        // When one is selected
-        // eslint-disable-next-line one-var
-        let _isHoverAfterStart, _isHoverBeforeEnd, isSelectedStart, isSelectedEnd, isHoverDayAroundOneSelected;
-        if (rangeStart) {
-            isSelectedStart = isSameDay(fullDate, rangeStart);
-            if (rangeInputFocus === 'rangeEnd') {
-                _isHoverAfterStart = isBetween(fullDate, { start: rangeStart, end: hoverDay });
-            }
-        }
-        if (rangeEnd) {
-            isSelectedEnd = isSameDay(fullDate, rangeEnd);
-            if (rangeInputFocus === 'rangeStart') {
-                _isHoverBeforeEnd = isBetween(fullDate, { start: hoverDay, end: rangeEnd });
-            }
-        }
-
-        if (!_isDateRangeSelected && _isDateRangeAnySelected) {
-            isHoverDayAroundOneSelected = _isHoverDay;
-        }
-
-        // eslint-disable-next-line one-var
-        let isHover;
-        if (!_isOffsetDateRangeAnyExist) {
-            isHover = _isHoverAfterStart || _isHoverBeforeEnd || _isHoverDay;
-        }
-
-        // Select all
-        // eslint-disable-next-line one-var
-        let isInRange, isSelectedStartAfterHover, isSelectedEndBeforeHover, isHoverDayInStartSelection, isHoverDayInEndSelection, isHoverDayInRange;
-        if (_isDateRangeSelected) {
-            isInRange = isBetween(fullDate, { start: rangeStart, end: rangeEnd });
-            if (!_isOffsetDateRangeAnyExist) {
-                isSelectedStartAfterHover = isSelectedStart && isAfter(rangeStart, hoverDay);
-                isSelectedEndBeforeHover = isSelectedEnd && isBefore(rangeEnd, hoverDay);
-                isHoverDayInStartSelection = _isHoverDay && rangeInputFocus === 'rangeStart';
-                isHoverDayInEndSelection = _isHoverDay && rangeInputFocus === 'rangeEnd';
-                isHoverDayInRange = _isHoverDay && isBetween(hoverDay, { start: rangeStart, end: rangeEnd });
-            }
-        }
-
-        return {
-            isHoverDay: _isHoverDay, // Is the current hover date
-            isSelectedStart, // Select Start
-            isSelectedEnd, // End of selection
-            isInRange, // Range within the selected date
-            isHover, // Date between selection and hover date
-            isSelectedStartAfterHover, // Choose to start behind the hover
-            isSelectedEndBeforeHover, // Choose to end in front of the hover
-            isHoverDayInRange, // Hover date within range
-            isHoverDayInStartSelection, // Hover date when starting Date is selected
-            isHoverDayInEndSelection, // Hover date when endDate is selected
-            isHoverDayAroundOneSelected, // Hover date and select a date
-        };
-    }
-
-    getOffsetDateStatus(options: Partial<MonthProps> & { fullDate: string }) {
-        const { offsetRangeStart, offsetRangeEnd, rangeStart, rangeEnd, fullDate, hoverDay } = options;
-
-        // When there is no offset, return the empty object directly
-        const _isOffsetDateRangeNull = !(offsetRangeStart || offsetRangeEnd);
-        if (_isOffsetDateRangeNull) {
-            return ({});
-        }
-
-        // Range Select base date
-        const _isInRange = isBetween(fullDate, { start: rangeStart, end: rangeEnd });
-        const _isHoverDay = isSameDay(hoverDay, fullDate);
-        const _isSelectedStart = rangeStart && isSameDay(fullDate, rangeStart);
-        const _isSelectedEnd = rangeEnd && isSameDay(fullDate, rangeEnd);
-        const _isDateRangeSelected = Boolean(rangeStart && rangeEnd);
-
-        // Determine whether it is offsetStart or offsetRangeEnd
-        const isOffsetRangeStart = isSameDay(fullDate, offsetRangeStart);
-        const isOffsetRangeEnd = isSameDay(fullDate, offsetRangeEnd);
-        const isHoverDayOffset = _isHoverDay;
-
-        // When selected
-        let isHoverInOffsetRange, isInOffsetRange;
-        if (_isDateRangeSelected) {
-            isHoverInOffsetRange = _isInRange && _isHoverDay;
-        }
-
-        // When there is an offset area
-        const _isOffsetDateRangeSelected = Boolean(offsetRangeStart && offsetRangeEnd);
-        if (_isOffsetDateRangeSelected) {
-            isInOffsetRange = (_isSelectedStart || isBetween(fullDate, { start: offsetRangeStart, end: offsetRangeEnd }) || _isSelectedEnd);
-        }
-
-        return {
-            isOffsetRangeStart, // Week selection start
-            isOffsetRangeEnd, // End of week selection
-            isHoverInOffsetRange, // Hover in the week selection
-            isHoverDayOffset, // Week selection hover day
-            isInOffsetRange // Include start and end within the week selection (start and end styles are the same as other dates, so start and end are included)
-        };
-    }
-
-    /**
-     * get day current status
-     * @param {Object} fullDate
-     * @param {Object} options
-     * @returns {Object}
-     */
-    getDayStatus(currentDay: MonthDayInfo, options: MonthProps & { todayText: string }) {
-        const { fullDate } = currentDay;
-        const { hoverDay, rangeStart, rangeEnd, todayText, offsetRangeStart, offsetRangeEnd, disabledDate, selected, rangeInputFocus } = options;
-
-        const singleDayStatus = this.getSingleDayStatus({ fullDate, todayText, hoverDay, selected, disabledDate, rangeStart, rangeEnd });
-        const dateRangeStatus = this.getDateRangeStatus({ fullDate, rangeStart, rangeEnd, hoverDay, offsetRangeStart, offsetRangeEnd, rangeInputFocus, ...singleDayStatus });
-        const offsetDataStatus = this.getOffsetDateStatus({ offsetRangeStart, offsetRangeEnd, rangeStart, rangeEnd, fullDate, hoverDay, ...singleDayStatus, ...dateRangeStatus });
-
-        // this parameter will pass to the user when given renderFullDate function, do not delete or modify its key
-        const dayStatus = {
-            ...singleDayStatus,
-            ...dateRangeStatus,
-            ...offsetDataStatus,
-        };
-
-        return dayStatus;
-    }
-
-    renderDayOfWeek() {
-        const { locale } = this.props;
-        const weekdayCls = classNames(cssClasses.WEEKDAY);
-        const weekdayItemCls = classNames(`${prefixCls}-weekday-item`);
-        const { weekdays } = this.state;
-        // i18n
-        const weekdaysText = weekdays.map(key => locale.weeks[key]);
-        return (
-            <div role="row" className={weekdayCls}>
-                {weekdaysText.map((E, i) => (
-                    <div role="columnheader" key={E + i} className={weekdayItemCls}>
-                        {E}
-                    </div>
-                ))}
-            </div>
-        );
-    }
-
-    renderWeeks() {
-        const { month } = this.state;
-        const { weeks } = month;
-        const { weeksRowNum } = this.props;
-        let style = {};
-        if (weeksRowNum) {
-            const height = weeksRowNum * numbers.WEEK_HEIGHT;
-            style = { height };
-        }
-        const weeksCls = classNames(cssClasses.WEEKS);
-        return (
-            <div className={weeksCls} style={style}>
-                {weeks.map((week, weekIndex) => this.renderWeek(week, weekIndex))}
-            </div>
-        );
-    }
-
-    renderWeek(week: MonthDayInfo[], weekIndex: number) {
-        const weekCls = cssClasses.WEEK;
-        return (
-            <div role="row" className={weekCls} key={weekIndex}>
-                {week.map((day, dayIndex) => this.renderDay(day, dayIndex))}
-            </div>
-        );
-    }
-
-    renderDay(day: MonthDayInfo, dayIndex: number) {
-        const { todayText } = this.state;
-        const { renderFullDate, renderDate } = this.props;
-        const { fullDate, dayNumber } = day;
-        if (!fullDate) {
-            return (
-                <div role="gridcell" tabIndex={-1} key={(dayNumber as number) + dayIndex} className={cssClasses.DAY}>
-                    <span />
-                </div>
-            );
-        }
-
-        const dayStatus = this.getDayStatus(day, { todayText, ...this.props });
-
-        const dayCls = classNames(cssClasses.DAY, {
-            [cssClasses.DAY_TODAY]: dayStatus.isToday,
-            [cssClasses.DAY_IN_RANGE]: dayStatus.isInRange,
-            [cssClasses.DAY_HOVER]: dayStatus.isHover,
-            [cssClasses.DAY_SELECTED]: dayStatus.isSelected,
-            [cssClasses.DAY_SELECTED_START]: dayStatus.isSelectedStart,
-            [cssClasses.DAY_SELECTED_END]: dayStatus.isSelectedEnd,
-            [cssClasses.DAY_DISABLED]: dayStatus.isDisabled,
-            // offsetDate class
-            [cssClasses.DAY_HOVER_DAY]: dayStatus.isHoverDayOffset,
-            [cssClasses.DAY_IN_OFFSET_RANGE]: dayStatus.isInOffsetRange,
-            [cssClasses.DAY_SELECTED_RANGE_HOVER]: dayStatus.isHoverInOffsetRange,
-            [cssClasses.DAY_OFFSET_RANGE_START]: dayStatus.isOffsetRangeStart,
-            [cssClasses.DAY_OFFSET_RANGE_END]: dayStatus.isOffsetRangeEnd,
-            // range input class
-            [cssClasses.DAY_SELECTED_START_AFTER_HOVER]: dayStatus.isSelectedStartAfterHover,
-            [cssClasses.DAY_SELECTED_END_BEFORE_HOVER]: dayStatus.isSelectedEndBeforeHover,
-            [cssClasses.DAY_HOVER_DAY_BEFORE_RANGE]: dayStatus.isHoverDayInStartSelection,
-            [cssClasses.DAY_HOVER_DAY_AFTER_RANGE]: dayStatus.isHoverDayInEndSelection,
-            [cssClasses.DAY_HOVER_DAY_AROUND_SINGLE_SELECTED]: dayStatus.isHoverDayAroundOneSelected,
-        });
-
-        const dayMainCls = classNames({
-            [`${cssClasses.DAY}-main`]: true,
-        });
-
-        const fullDateArgs = [dayNumber, fullDate, dayStatus];
-        const customRender = isFunction(renderFullDate);
-
-        return (
-            <div
-                role="gridcell"
-                tabIndex={dayStatus.isDisabled ? -1 : 0}
-                aria-disabled={dayStatus.isDisabled}
-                aria-selected={dayStatus.isSelected}
-                aria-label={fullDate}
-                className={!customRender ? dayCls : cssClasses.DAY}
-                title={fullDate}
-                key={(dayNumber as number) + dayIndex}
-                onClick={e => !dayStatus.isDisabled && this.foundation.handleClick(day)}
-                onMouseEnter={() => this.foundation.handleHover(day)}
-                onMouseLeave={() => this.foundation.handleHover()}
-            >
-                {customRender ? renderFullDate(...fullDateArgs) : (
-                    <div className={dayMainCls}>
-                        {isFunction(renderDate) ? renderDate(dayNumber, fullDate) : <span>{dayNumber}</span>}
-                    </div>
-                )}
-            </div>
-        );
-    }
-
-    render() {
-        const { forwardRef, multiple } = this.props;
-        const weekday = this.renderDayOfWeek();
-        const weeks = this.renderWeeks();
-        const monthCls = classNames(cssClasses.MONTH);
-        const ref = forwardRef || this.monthRef;
-        return (
-            <div role="grid" aria-multiselectable={multiple} ref={ref} className={monthCls} >
-                {weekday}
-                {weeks}
-            </div>
-        );
-    }
-}