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

package/calendar/monthCalendar.tsx

@@ -1,400 +0,0 @@
-/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
-import React, { ReactInstance } from 'react';
-import ReactDOM from 'react-dom';
-import cls from 'classnames';
-import { isEqual } from 'lodash';
-import PropTypes from 'prop-types';
-import { IconClose } from '@douyinfe/semi-icons';
-// eslint-disable-next-line max-len
-import CalendarFoundation, { CalendarAdapter, EventObject, MonthData, MonthlyEvent, ParsedEventsType, ParsedEventsWithArray, ParsedRangeEvent } from '@douyinfe/semi-foundation/calendar/foundation';
-import { cssClasses } from '@douyinfe/semi-foundation/calendar/constants';
-import { DateObj } from '@douyinfe/semi-foundation/calendar/eventUtil';
-import LocaleConsumer from '../locale/localeConsumer';
-import localeContext from '../locale/context';
-import BaseComponent from '../_base/baseComponent';
-import Popover from '../popover';
-import Button from '../iconButton';
-import { Locale } from '../locale/interface';
-import { MonthCalendarProps } from './interface';
-
-import '@douyinfe/semi-foundation/calendar/calendar.scss';
-
-const toPercent = (num: number) => {
-    const res = num < 1 ? num * 100 : 100;
-    return `${res}%`;
-};
-
-const prefixCls = `${cssClasses.PREFIX}-month`;
-const contentPadding = 60;
-const contentHeight = 24;
-
-export interface MonthCalendarState {
-    itemLimit: number;
-    showCard: Record<string, [boolean] | [boolean, string]>;
-    parsedEvents: MonthlyEvent;
-    cachedKeys: Array<string>;
-}
-
-export default class monthCalendar extends BaseComponent<MonthCalendarProps, MonthCalendarState> {
-    static propTypes = {
-        displayValue: PropTypes.instanceOf(Date),
-        header: PropTypes.node,
-        events: PropTypes.array,
-        mode: PropTypes.string,
-        markWeekend: PropTypes.bool,
-        width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-        height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-        style: PropTypes.object,
-        className: PropTypes.string,
-        dateGridRender: PropTypes.func,
-        onClick: PropTypes.func,
-        onClose: PropTypes.func,
-    };
-
-    static defaultProps = {
-        displayValue: new Date(),
-        events: [] as EventObject[],
-        mode: 'month',
-    };
-
-    static contextType = localeContext;
-
-    cellDom: React.RefObject<HTMLDivElement>;
-    foundation: CalendarFoundation;
-    cardRef: Map<string, ReactInstance>;
-    contentCellHeight: number;
-    monthlyData: MonthData;
-
-    clickOutsideHandler: (e: MouseEvent) => void;
-
-    constructor(props: MonthCalendarProps) {
-        super(props);
-        this.state = {
-            itemLimit: 0,
-            showCard: {},
-            parsedEvents: {} as MonthlyEvent,
-            cachedKeys: []
-        };
-        this.cellDom = React.createRef();
-        this.foundation = new CalendarFoundation(this.adapter);
-        this.handleClick = this.handleClick.bind(this);
-        this.cardRef = new Map();
-    }
-
-    get adapter(): CalendarAdapter<MonthCalendarProps, MonthCalendarState> {
-        return {
-            ...super.adapter,
-            registerClickOutsideHandler: (key: string, cb: () => void) => {
-                const clickOutsideHandler = (e: MouseEvent) => {
-                    const cardInstance = this.cardRef && this.cardRef.get(key);
-                    // eslint-disable-next-line react/no-find-dom-node
-                    const cardDom = ReactDOM.findDOMNode(cardInstance);
-                    if (cardDom && !cardDom.contains(e.target as any)) {
-                        cb();
-                    }
-                };
-                this.clickOutsideHandler = clickOutsideHandler;
-                document.addEventListener('mousedown', clickOutsideHandler, false);
-            },
-            unregisterClickOutsideHandler: () => {
-                document.removeEventListener('mousedown', this.clickOutsideHandler, false);
-            },
-            setMonthlyData: data => {
-                this.monthlyData = data;
-            },
-            getMonthlyData: () => this.monthlyData,
-            notifyClose: (e, key) => {
-                const updates = {};
-                updates[key] = [false];
-                this.setState(prevState => ({
-                    showCard: { ...prevState.showCard, ...updates }
-                }));
-                this.props.onClose && this.props.onClose(e);
-            },
-            openCard: (key, spacing) => {
-                const updates = {};
-                const pos = spacing ? 'leftTopOver' : 'rightTopOver';
-                updates[key] = [true, pos];
-                this.setState(prevState => ({
-                    showCard: { ...updates }
-                }));
-            },
-            setParsedEvents: (parsedEvents: ParsedEventsType) => {
-                this.setState({ parsedEvents: parsedEvents as MonthlyEvent });
-            },
-            setItemLimit: itemLimit => {
-                this.setState({ itemLimit });
-            },
-            cacheEventKeys: cachedKeys => {
-                this.setState({ cachedKeys });
-            }
-        };
-    }
-
-    calcItemLimit = () => {
-        this.contentCellHeight = this.cellDom.current.getBoundingClientRect().height;
-        return Math.max(0, Math.ceil((this.contentCellHeight - contentPadding) / contentHeight));
-    };
-
-    componentDidMount() {
-        this.foundation.init();
-        const itemLimit = this.calcItemLimit();
-        this.foundation.parseMonthlyEvents(itemLimit);
-    }
-
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
-
-    componentDidUpdate(prevProps: MonthCalendarProps, prevState: MonthCalendarState) {
-        const prevEventKeys = prevState.cachedKeys;
-        const nowEventKeys = this.props.events.map(event => event.key);
-
-        let itemLimitUpdate = false;
-        let { itemLimit } = this.state;
-        if (prevProps.height !== this.props.height) {
-            itemLimit = this.calcItemLimit();
-            if (prevState.itemLimit !== itemLimit) {
-                itemLimitUpdate = true;
-            }
-        }
-        if (!isEqual(prevEventKeys, nowEventKeys) || itemLimitUpdate) {
-            this.foundation.parseMonthlyEvents((itemLimit || this.props.events) as any);
-        }
-    }
-
-    handleClick = (e: React.MouseEvent, val: [Date]) => {
-        const { onClick } = this.props;
-        const value = this.foundation.formatCbValue(val);
-        onClick && onClick(e, value);
-    };
-
-    closeCard(e: React.MouseEvent, key: string) {
-        this.foundation.closeCard(e, key);
-    }
-
-    showCard = (e: React.MouseEvent, key: string) => {
-        this.foundation.showCard(e, key);
-    };
-
-    renderHeader = (dateFnsLocale: Locale['dateFnsLocale']) => {
-        const { markWeekend, displayValue } = this.props;
-        this.monthlyData = this.foundation.getMonthlyData(displayValue, dateFnsLocale);
-        return (
-            <div className={`${prefixCls}-header`} role="presentation">
-                <div role="presentation" className={`${prefixCls}-grid`}>
-                    <ul role="row" className={`${prefixCls}-grid-row`}>
-                        {this.monthlyData[0].map(day => {
-                            const { weekday } = day;
-                            const listCls = cls({
-                                [`${cssClasses.PREFIX}-weekend`]: markWeekend && day.isWeekend,
-                            });
-                            return (
-                                <li role="columnheader" aria-label={weekday} key={`${weekday}-monthheader`} className={listCls}>
-                                    <span>{weekday}</span>
-                                </li>
-                            );
-                        })}
-                    </ul>
-                </div>
-            </div>
-        );
-    };
-
-    renderEvents = (events: ParsedRangeEvent[]) => {
-        if (!events) {
-            return undefined;
-        }
-        const list = events.map((event, ind) => {
-            const { leftPos, width, topInd, key, children } = event;
-            const style = {
-                left: toPercent(leftPos),
-                width: toPercent(width),
-                top: `${topInd}em`
-            };
-            return (
-                <li
-                    className={`${cssClasses.PREFIX}-event-item ${cssClasses.PREFIX}-event-month`}
-                    key={key || `${ind}-monthevent`}
-                    style={style}
-                >
-                    {children}
-                </li>
-            );
-        });
-        return list;
-    };
-
-    renderCollapsed = (events: MonthlyEvent['day'][number], itemInfo: DateObj, listCls: string, month: string) => {
-        const { itemLimit, showCard } = this.state;
-        const { weekday, dayString, date } = itemInfo;
-        const key = date.toString();
-        const remained = events.filter(i => Boolean(i)).length - itemLimit;
-        const cardCls = `${prefixCls}-event-card`;
-        // const top = contentPadding / 2 + this.state.itemLimit * contentHeight;
-        const shouldRenderCard = remained > 0;
-        const closer = (
-            <Button
-                className={`${cardCls}-close`}
-                onClick={e => this.closeCard(e, key)}
-                type="tertiary"
-                icon={<IconClose />}
-                theme="borderless"
-                size="small"
-            />
-        );
-        const header = (
-            <div className={`${cardCls}-header-info`}>
-                <div className={`${cardCls}-header-info-weekday`}>{weekday}</div>
-                <div className={`${cardCls}-header-info-date`}>{dayString}</div>
-            </div>
-        );
-        const content = (
-            <div className={cardCls}>
-                <div className={`${cardCls}-content`}>
-                    <div className={`${cardCls}-header`}>
-                        {header}
-                        {closer}
-                    </div>
-                    <div className={`${cardCls}-body`}>
-                        <ul className={`${cardCls}-list`}>
-                            {events.map(item => (
-                                <li key={item.key || `${item.start.toString()}-event`}>{item.children}</li>
-                            ))}
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        );
-        const pos = showCard && showCard[key] ? showCard[key][1] : 'leftTopOver';
-        const text = (
-            <LocaleConsumer componentName="Calendar">
-                {(locale: Locale['Calendar']) => (// eslint-disable-next-line jsx-a11y/no-static-element-interactions
-                    <div
-                        className={`${cardCls}-wrapper`}
-                        style={{ bottom: 0 }}
-                        onClick={e => this.showCard(e, key)}
-                    >
-                        {locale.remaining.replace('${remained}', String(remained))}
-                    </div>
-                )}
-            </LocaleConsumer>
-        );
-        return (
-            <Popover
-                key={`${date.valueOf()}`}
-                content={content}
-                position={pos as any}
-                trigger="custom"
-                visible={showCard && showCard[key] && showCard[key][0]}
-                ref={ref => this.cardRef.set(key, ref)}
-            >
-                <li key={date as any} className={listCls} onClick={e => this.handleClick(e, [date])}>
-                    {this.formatDayString(month, dayString)}
-                    {shouldRenderCard ? text : null}
-                    {this.renderCusDateGrid(date)}
-                </li>
-            </Popover>
-        );
-    };
-
-    formatDayString = (month: string, date: string) => {
-        if (date === '1') {
-            return (
-                <LocaleConsumer componentName="Calendar">
-                    {(locale: Locale['Calendar'], localeCode: string) => (
-                        <span className={`${prefixCls}-date`}>
-                            {month}
-                            <span className={`${cssClasses.PREFIX}-today-date`}>&nbsp;{date}</span>
-                            {locale.datestring}
-                        </span>
-                    )}
-                </LocaleConsumer>
-            );
-        }
-        return (
-            // eslint-disable-next-line max-len
-            <span className={`${prefixCls}-date`}><span className={`${cssClasses.PREFIX}-today-date`}>{date}</span></span>
-        );
-    };
-
-    renderCusDateGrid = (date: Date) => {
-        const { dateGridRender } = this.props;
-        if (!dateGridRender) {
-            return null;
-        }
-        return dateGridRender(date.toString(), date);
-    };
-
-    renderWeekRow = (index: number | string, weekDay: MonthData[number], events: MonthlyEvent = {} as MonthlyEvent) => {
-        const { markWeekend } = this.props;
-        const { itemLimit } = this.state;
-        const { display, day } = events;
-        return (
-            <div role="presentation" className={`${prefixCls}-weekrow`} ref={this.cellDom} key={`${index}-weekrow`}>
-                <ul role="row" className={`${prefixCls}-skeleton`}>
-                    {weekDay.map(each => {
-                        const { date, dayString, isToday, isSameMonth, isWeekend, month, ind } = each;
-                        const listCls = cls({
-                            [`${cssClasses.PREFIX}-today`]: isToday,
-                            [`${cssClasses.PREFIX}-weekend`]: markWeekend && isWeekend,
-                            [`${prefixCls}-same`]: isSameMonth
-                        });
-                        const shouldRenderCollapsed = Boolean(day && day[ind] && day[ind].length > itemLimit);
-                        const inner = (
-                            <li role="gridcell" aria-label={date.toLocaleDateString()} aria-current={isToday ? "date" : false} key={`${date}-weeksk`} className={listCls} onClick={e => this.handleClick(e, [date])}>
-                                {this.formatDayString(month, dayString)}
-                                {this.renderCusDateGrid(date)}
-                            </li>
-                        );
-                        if (!shouldRenderCollapsed) {
-                            return inner;
-                        }
-                        return this.renderCollapsed(day[ind], each, listCls, month);
-                    })}
-                </ul>
-                <ul className={`${cssClasses.PREFIX}-event-items`}>
-                    {display ? this.renderEvents(display) : null}
-                </ul>
-            </div>
-        );
-    };
-
-    renderMonthGrid = () => {
-        const { parsedEvents } = this.state;
-        return (
-            <div role="presentation" className={`${prefixCls}-week`}>
-                <ul role="presentation" className={`${prefixCls}-grid-col`}>
-                    {Object.keys(this.monthlyData).map(weekInd =>
-                        this.renderWeekRow(weekInd, this.monthlyData[weekInd], parsedEvents[weekInd])
-                    )}
-                </ul>
-            </div>
-        );
-    };
-
-    render() {
-        const { className, height, width, style, header } = this.props;
-        const monthCls = cls(prefixCls, className);
-        const monthStyle = {
-            height,
-            width,
-            ...style,
-        };
-        return (
-            <LocaleConsumer componentName="Calendar">
-                {(locale: Locale['Calendar'], localeCode: string, dateFnsLocale: Locale['dateFnsLocale']) => (
-                    <div role="grid" className={monthCls} key={this.state.itemLimit} style={monthStyle}>
-                        <div role="presentation" className={`${prefixCls}-sticky-top`}>
-                            {header}
-                            {this.renderHeader(dateFnsLocale)}
-                        </div>
-                        <div role="presentation" className={`${prefixCls}-grid-wrapper`}>
-                            {this.renderMonthGrid()}
-                        </div>
-                    </div>
-                )}
-            </LocaleConsumer>
-        );
-    }
-}

package/calendar/rangeCalendar.tsx

@@ -1,270 +0,0 @@
-import React from 'react';
-import cls from 'classnames';
-import PropTypes from 'prop-types';
-// eslint-disable-next-line max-len
-import CalendarFoundation, { ParsedEvents, CalendarAdapter, RangeData, ParsedRangeEvent, ParsedEventsType } from '@douyinfe/semi-foundation/calendar/foundation';
-import LocaleConsumer from '../locale/localeConsumer';
-import localeContext from '../locale/context';
-import { cssClasses } from '@douyinfe/semi-foundation/calendar/constants';
-import BaseComponent from '../_base/baseComponent';
-import DayCol from './dayCol';
-import TimeCol from './timeCol';
-import { isEqual } from 'lodash';
-import { calcRowHeight } from '@douyinfe/semi-foundation/calendar/eventUtil';
-import '@douyinfe/semi-foundation/calendar/calendar.scss';
-import { RangeCalendarProps } from './interface';
-import { Locale } from '../locale/interface';
-
-const toPercent = (num: number) => {
-    const res = num < 1 ? num * 100 : 100;
-    return `${res}%`;
-};
-
-const prefixCls = `${cssClasses.PREFIX}-week`;
-const allDayCls = `${cssClasses.PREFIX}-all-day`;
-
-export interface RangeCalendarState {
-    scrollHeight: number;
-    parsedEvents: ParsedEvents;
-    cachedKeys: Array<string>;
-}
-
-
-export default class RangeCalendar extends BaseComponent<RangeCalendarProps, RangeCalendarState> {
-    static propTypes = {
-        // displayValue: PropTypes.instanceOf(Date),
-        range: PropTypes.array,
-        header: PropTypes.node,
-        events: PropTypes.array,
-        mode: PropTypes.string,
-        showCurrTime: PropTypes.bool,
-        markWeekend: PropTypes.bool,
-        scrollTop: PropTypes.number,
-        renderTimeDisplay: PropTypes.func,
-        dateGridRender: PropTypes.func,
-        width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-        height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-        style: PropTypes.object,
-        className: PropTypes.string,
-    };
-
-    static defaultProps = {
-        events: [] as ParsedEvents[],
-        mode: 'range',
-    };
-
-    static contextType = localeContext;
-
-    dom: React.RefObject<HTMLDivElement>;
-    scrollDom: React.RefObject<HTMLDivElement>;
-    isWeekend: boolean;
-    allDayRowHeight: number;
-    RangeData: RangeData;
-
-    foundation: CalendarFoundation;
-
-    constructor(props: RangeCalendarProps) {
-        super(props);
-        this.state = {
-            scrollHeight: 0,
-            parsedEvents: {
-                day: new Map(),
-                allDay: new Map()
-            },
-            cachedKeys: [],
-        };
-        this.foundation = new CalendarFoundation(this.adapter);
-        this.dom = React.createRef();
-        this.scrollDom = React.createRef();
-        this.handleClick = this.handleClick.bind(this);
-        this.allDayRowHeight = 1;
-    }
-
-    get adapter(): CalendarAdapter<RangeCalendarProps, RangeCalendarState> {
-        return {
-            ...super.adapter,
-            setRangeData: data => {
-                this.RangeData = data;
-            },
-            getRangeData: () => this.RangeData,
-            updateScrollHeight: scrollHeight => {
-                this.setState({ scrollHeight });
-            },
-            setParsedEvents: (parsedEvents: ParsedEventsType) => {
-                this.setState({ parsedEvents: parsedEvents as ParsedEvents });
-            },
-            cacheEventKeys: cachedKeys => {
-                this.setState({ cachedKeys });
-            }
-        };
-    }
-
-    componentDidMount() {
-        this.foundation.init();
-        const { scrollHeight } = this.scrollDom.current;
-        this.dom.current.scrollTop = this.props.scrollTop;
-        this.foundation.notifyScrollHeight(scrollHeight);
-        this.foundation.parseRangeEvents();
-    }
-
-    componentDidUpdate(prevProps: RangeCalendarProps, prevState: RangeCalendarState) {
-        const prevEventKeys = prevState.cachedKeys;
-        const nowEventKeys = this.props.events.map(event => event.key);
-        if (!isEqual(prevEventKeys, nowEventKeys)) {
-            this.foundation.parseRangeEvents();
-        }
-    }
-
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
-
-    handleClick = (e: React.MouseEvent, val: [Date, number, number, number]) => {
-        const { onClick } = this.props;
-        const value = this.foundation.formatCbValue(val);
-        onClick && onClick(e, value);
-    };
-
-    renderDayGrid = () => {
-        const { parsedEvents } = this.state;
-        const events = parsedEvents.day;
-        const { week } = this.RangeData;
-        const { markWeekend, dateGridRender } = this.props;
-        const inner = week.map(day => {
-            const dateString = day.date.toString();
-            const dayEvents = events.has(dateString) ? events.get(dateString) : [];
-            const parsed = this.foundation.getParseDailyEvents(dayEvents, day.date);
-            return (
-                <DayCol
-                    key={`${dateString}-weekday`}
-                    displayValue={day.date}
-                    scrollHeight={this.state.scrollHeight}
-                    handleClick={this.handleClick}
-                    events={parsed.day}
-                    showCurrTime={this.props.showCurrTime}
-                    isWeekend={markWeekend && day.isWeekend}
-                    dateGridRender={dateGridRender}
-                />
-            );
-        });
-        return inner;
-    };
-
-    renderHeader = (dateFnsLocale: Locale['dateFnsLocale']) => {
-        const { markWeekend, range } = this.props;
-        const { month, week } = this.foundation.getRangeData(range[0], dateFnsLocale);
-        return (
-            <div className={`${prefixCls}-header`}>
-                <ul className={`${cssClasses.PREFIX}-tag ${prefixCls}-tag ${prefixCls}-sticky-left`}>
-                    <span>{month}</span>
-                </ul>
-                <div role="gridcell" className={`${prefixCls}-grid`}>
-                    <ul className={`${prefixCls}-grid-row`}>
-                        {week.map(day => {
-                            const { date, dayString, weekday, isToday } = day;
-                            const listCls = cls({
-                                [`${cssClasses.PREFIX}-today`]: isToday,
-                                [`${cssClasses.PREFIX}-weekend`]: markWeekend && day.isWeekend,
-                            });
-                            return (
-                                <li key={`${date.toString()}-weekheader`} className={listCls}>
-                                    <span className={`${cssClasses.PREFIX}-today-date`}>{dayString}</span>
-                                    <span>{weekday}</span>
-                                </li>
-                            );
-                        })}
-                    </ul>
-                </div>
-            </div>
-        );
-    };
-
-    renderAllDayEvents = (events: Array<ParsedRangeEvent>) => {
-        const list = events.map((event, ind) => {
-            const { leftPos, width, topInd, children } = event;
-            const top = `${topInd}em`;
-            const style = {
-                left: toPercent(leftPos),
-                width: toPercent(width),
-                top,
-            };
-            return (
-                <li
-                    className={`${cssClasses.PREFIX}-event-item ${cssClasses.PREFIX}-event-allday`}
-                    key={`allDay-${ind}`}
-                    style={style}
-                >
-                    {children}
-                </li>
-            );
-        });
-        return list;
-    };
-
-    renderAllDay = (locale: Locale['Calendar']) => {
-        const { allDay } = this.state.parsedEvents;
-        const parsed = this.foundation.parseRangeAllDayEvents(allDay);
-        const maxRowHeight = calcRowHeight(parsed);
-        const style = {
-            height: `${maxRowHeight}em`
-        };
-        const { markWeekend } = this.props;
-        const { week } = this.RangeData;
-        return (
-
-            <div className={`${allDayCls}`} style={style}>
-                <ul className={`${cssClasses.PREFIX}-tag ${allDayCls}-tag ${prefixCls}-sticky-left`}>
-                    <span>{locale.allDay}</span>
-                </ul>
-                <div role="gridcell" className={`${cssClasses.PREFIX}-content ${allDayCls}-content`}>
-                    <ul className={`${allDayCls}-skeleton`}>
-                        {Object.keys(week).map((date, ind) => {
-                            const listCls = cls({
-                                [`${cssClasses.PREFIX}-weekend`]: markWeekend && week[date].isWeekend,
-                            });
-                            return (
-                                <li key={`${date}-weekgrid`} className={listCls} />
-                            );
-                        })}
-                    </ul>
-                    <ul className={`${cssClasses.PREFIX}-event-items`}>
-                        {this.renderAllDayEvents(parsed)}
-                    </ul>
-                </div>
-            </div>
-
-        );
-    };
-
-    render() {
-        const { renderTimeDisplay, className, height, width, style, header } = this.props;
-        const weekCls = cls(prefixCls, className);
-        const weekStyle = {
-            height,
-            width,
-            ...style,
-        };
-        return (
-            <LocaleConsumer componentName="Calendar">
-                {(locale: Locale['Calendar'], localeCode: string, dateFnsLocale: Locale['dateFnsLocale']) => (
-                    <div className={weekCls} style={weekStyle} ref={this.dom}>
-                        <div className={`${prefixCls}-sticky-top`}>
-                            {header}
-                            {this.renderHeader(dateFnsLocale)}
-                            {this.renderAllDay(locale)}
-                        </div>
-                        <div className={`${prefixCls}-scroll-wrapper`}>
-                            <div className={`${prefixCls}-scroll`} ref={this.scrollDom}>
-                                <TimeCol
-                                    className={`${prefixCls}-sticky-left`}
-                                    renderTimeDisplay={renderTimeDisplay}
-                                />
-                                {this.renderDayGrid()}
-                            </div>
-                        </div>
-                    </div>
-                )}
-            </LocaleConsumer>
-        );
-    }
-}