@fullcalendar/list 7.0.0-beta.3 → 7.0.0-beta.5

package/internal.js

@@ -1,261 +0,0 @@
-import { BaseComponent, getStickyHeaderDates, getDateMeta, buildNavLinkAttrs, joinClassNames, ContentContainer, getDayClassName, formatDayString, createFormatter, watchWidth, setRef, getEventRangeAnchorAttrs, EventContainer, buildEventRangeTimeText, memoize, sortEventSegs, RefMap, afterSize, getEventKey, getEventRangeMeta, DateComponent, getIsHeightAuto, ViewContainer, Scroller, NowTimer, sliceEventStore, intersectRanges, startOfDay, addDays, injectStyles } from '@fullcalendar/core/internal.js';
-import { createElement, Fragment } from '@fullcalendar/core/preact.js';
-
-class ListDayHeader extends BaseComponent {
-    render() {
-        let { dateEnv, options, viewApi } = this.context;
-        let { dayDate, todayRange } = this.props;
-        let stickyHeaderDates = !this.props.forPrint && getStickyHeaderDates(options);
-        let dayMeta = getDateMeta(dayDate, todayRange);
-        // will ever be falsy?
-        let text = options.listDayFormat ? dateEnv.format(dayDate, options.listDayFormat) : '';
-        // will ever be falsy? also, BAD NAME "alt"
-        let sideText = options.listDaySideFormat ? dateEnv.format(dayDate, options.listDaySideFormat) : '';
-        let renderProps = Object.assign({ date: dateEnv.toDate(dayDate), view: viewApi, text,
-            sideText, navLinkAttrs: buildNavLinkAttrs(this.context, dayDate), sideNavLinkAttrs: buildNavLinkAttrs(this.context, dayDate, 'day', false) }, dayMeta);
-        // TODO: make a reusable HOC for dayHeader (used in daygrid/timegrid too)
-        return (createElement("div", { className: joinClassNames('fc-list-day-outer', stickyHeaderDates && 'fc-list-day-outer-sticky') },
-            createElement(ContentContainer, { tag: "div", className: joinClassNames('fc-list-day', getDayClassName(dayMeta)), attrs: {
-                    'data-date': formatDayString(dayDate),
-                }, renderProps: renderProps, generatorName: "dayHeaderContent", customGenerator: options.dayHeaderContent, defaultGenerator: renderInnerContent, classNameGenerator: options.dayHeaderClassNames, didMount: options.dayHeaderDidMount, willUnmount: options.dayHeaderWillUnmount })));
-    }
-}
-function renderInnerContent(props) {
-    return (createElement(Fragment, null,
-        props.text && (createElement("a", Object.assign({ id: props.textId, className: "fc-list-day-text" }, props.navLinkAttrs), props.text)),
-        props.sideText && ( /* not keyboard tabbable */createElement("a", Object.assign({ className: "fc-list-day-side-text" }, props.sideNavLinkAttrs), props.sideText))));
-}
-
-const DEFAULT_TIME_FORMAT = createFormatter({
-    hour: 'numeric',
-    minute: '2-digit',
-    meridiem: 'short',
-});
-class ListEvent extends BaseComponent {
-    constructor() {
-        super(...arguments);
-        this.handleTitleEl = (titleEl) => {
-            if (this.disconnectTitleWidth) {
-                this.disconnectTitleWidth();
-            }
-            if (titleEl) {
-                this.disconnectTitleWidth = watchWidth(titleEl, (titleWidth) => {
-                    setRef(this.props.timeWidthRef, titleWidth);
-                });
-            }
-        };
-    }
-    render() {
-        let { props, context } = this;
-        let { eventRange } = props;
-        let { options } = context;
-        let timeFormat = options.eventTimeFormat || DEFAULT_TIME_FORMAT;
-        let anchorAttrs = getEventRangeAnchorAttrs(eventRange, context);
-        return (createElement(EventContainer, Object.assign({}, props, { tag: anchorAttrs ? 'a' : 'div', attrs: anchorAttrs, className: 'fc-list-event', defaultGenerator: renderEventTitleOnly, eventRange: eventRange, timeText: "", disableDragging: true, disableResizing: true }), (InnerContent, eventContentArg) => (createElement(Fragment, null,
-            createElement("div", { className: 'fc-list-event-time-outer', style: { width: props.timeOuterWidth } }, this.buildTimeContent(eventRange, props.slicedStart, props.slicedEnd, props.isStart, props.isEnd, timeFormat, context)),
-            createElement("div", { className: "fc-list-event-dot-outer" },
-                createElement("span", { className: "fc-list-event-dot", style: {
-                        borderColor: eventContentArg.borderColor || eventContentArg.backgroundColor,
-                    } })),
-            createElement(InnerContent, { tag: "div", className: 'fc-list-event-title' })))));
-    }
-    buildTimeContent(eventRange, // whole-day span
-    slicedStart, // view-sliced whole-day span
-    slicedEnd, // view-sliced whole-day span
-    isStart, isEnd, timeFormat, context) {
-        let { options } = context;
-        if (options.displayEventTime !== false) {
-            if (eventRange.def.allDay || (!isStart && !isEnd)) {
-                let renderProps = {
-                    text: context.options.allDayText,
-                    view: context.viewApi,
-                };
-                return (createElement(ContentContainer, { tag: "div", className: 'fc-list-event-time', renderProps: renderProps, elRef: this.handleTitleEl, generatorName: "allDayContent", customGenerator: options.allDayContent, defaultGenerator: renderAllDayInner, classNameGenerator: options.allDayClassNames, didMount: options.allDayDidMount, willUnmount: options.allDayWillUnmount }));
-            }
-            else {
-                return (createElement("div", { className: "fc-list-event-time", ref: this.handleTitleEl }, buildEventRangeTimeText(timeFormat, eventRange, slicedStart, slicedEnd, isStart, isEnd, context)));
-            }
-        }
-        return null;
-    }
-    componentWillUnmount() {
-        setRef(this.props.timeWidthRef, null);
-    }
-}
-function renderEventTitleOnly(renderProps) {
-    return renderProps.event.title;
-}
-function renderAllDayInner(renderProps) {
-    return renderProps.text;
-}
-
-class ListDay extends BaseComponent {
-    constructor() {
-        super(...arguments);
-        // memo
-        this.sortEventSegs = memoize(sortEventSegs);
-        // ref
-        this.timeWidthRefMap = new RefMap(() => {
-            afterSize(this.handleTimeWidths);
-        });
-        this.handleTimeWidths = () => {
-            const timeWidthMap = this.timeWidthRefMap.current;
-            let max = 0;
-            for (const timeWidth of timeWidthMap.values()) {
-                max = Math.max(max, timeWidth);
-            }
-            setRef(this.props.timeWidthRef, max);
-        };
-    }
-    render() {
-        const { props, context, timeWidthRefMap } = this;
-        const { nowDate, todayRange } = props;
-        const { options } = context;
-        const segs = this.sortEventSegs(props.segs, options.eventOrder);
-        return (createElement("div", { className: 'fc-list-day-and-events' },
-            createElement(ListDayHeader, { dayDate: props.dayDate, todayRange: todayRange, forPrint: props.forPrint }),
-            segs.map((seg) => {
-                const key = getEventKey(seg);
-                return (createElement(ListEvent, Object.assign({ key: key, eventRange: seg.eventRange, slicedStart: seg.slicedStart, slicedEnd: seg.slicedEnd, isStart: seg.isStart, isEnd: seg.isEnd, timeWidthRef: timeWidthRefMap.createRef(key), timeOuterWidth: props.timeOuterWidth, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: false }, getEventRangeMeta(seg.eventRange, todayRange, nowDate))));
-            })));
-    }
-    componentWillUnmount() {
-        setRef(this.props.timeWidthRef, null);
-    }
-}
-
-/*
-Responsible for the scroller, and forwarding event-related actions into the "grid".
-*/
-class ListView extends DateComponent {
-    constructor() {
-        super(...arguments);
-        // memo
-        this.computeDateVars = memoize(computeDateVars);
-        this.eventStoreToSegs = memoize(this._eventStoreToSegs);
-        // ref
-        this.timeWidthRefMap = new RefMap(() => {
-            afterSize(this.handleTimeWidths);
-        });
-        this.setRootEl = (rootEl) => {
-            if (rootEl) {
-                this.context.registerInteractiveComponent(this, {
-                    el: rootEl,
-                    disableHits: true, // HACK to not do date-clicking/selecting
-                });
-            }
-            else {
-                this.context.unregisterInteractiveComponent(this);
-            }
-        };
-        this.handleTimeWidths = () => {
-            const timeWidthMap = this.timeWidthRefMap.current;
-            let max = 0;
-            for (const timeWidth of timeWidthMap.values()) {
-                max = Math.max(max, timeWidth);
-            }
-            this.setState({ timeOuterWidth: max });
-        };
-    }
-    render() {
-        let { props, context } = this;
-        let { options } = context;
-        let { dayDates, dayRanges } = this.computeDateVars(props.dateProfile);
-        let eventSegs = this.eventStoreToSegs(props.eventStore, props.eventUiBases, dayRanges);
-        let verticalScrolling = !props.forPrint && !getIsHeightAuto(options);
-        return (createElement(ViewContainer, { elRef: this.setRootEl, className: 'fc-list fc-flex-col fc-border', viewSpec: context.viewSpec },
-            createElement(Scroller // TODO: don't need heavyweight component
-            , { vertical: verticalScrolling, className: verticalScrolling ? 'fc-liquid' : '' }, eventSegs.length > 0 ?
-                this.renderSegList(eventSegs, dayDates) :
-                this.renderEmptyMessage())));
-    }
-    renderEmptyMessage() {
-        let { options, viewApi } = this.context;
-        let renderProps = {
-            text: options.noEventsText,
-            view: viewApi,
-        };
-        return (createElement(ContentContainer, { tag: "div", className: 'fc-list-empty', renderProps: renderProps, generatorName: "noEventsContent", customGenerator: options.noEventsContent, defaultGenerator: renderNoEventsInner, classNameGenerator: options.noEventsClassNames, didMount: options.noEventsDidMount, willUnmount: options.noEventsWillUnmount }, (InnerContent) => (createElement(InnerContent, { tag: "div", className: 'fc-list-empty-inner' }))));
-    }
-    renderSegList(allSegs, dayDates) {
-        let segsByDay = groupSegsByDay(allSegs); // sparse array
-        return (createElement(NowTimer, { unit: "day" }, (nowDate, todayRange) => {
-            const dayNodes = [];
-            for (let dayIndex = 0; dayIndex < segsByDay.length; dayIndex += 1) {
-                let daySegs = segsByDay[dayIndex];
-                if (daySegs) { // sparse array, so might be undefined
-                    const dayDate = dayDates[dayIndex];
-                    const key = formatDayString(dayDate);
-                    dayNodes.push(createElement(ListDay, { key: key, dayDate: dayDate, nowDate: nowDate, todayRange: todayRange, segs: daySegs, forPrint: this.props.forPrint, timeWidthRef: this.timeWidthRefMap.createRef(key), timeOuterWidth: this.state.timeOuterWidth }));
-                }
-            }
-            return (createElement(Fragment, null, dayNodes));
-        }));
-    }
-    _eventStoreToSegs(eventStore, eventUiBases, dayRanges) {
-        return this.eventRangesToSegs(sliceEventStore(eventStore, eventUiBases, 
-        // HACKY to reference internal state...
-        this.props.dateProfile.activeRange, this.context.options.nextDayThreshold).fg, dayRanges);
-    }
-    eventRangesToSegs(fullDayEventRanges, dayRanges) {
-        let segs = [];
-        for (let fullDayEventRange of fullDayEventRanges) {
-            segs.push(...this.eventRangeToSegs(fullDayEventRange, dayRanges));
-        }
-        return segs;
-    }
-    eventRangeToSegs(fullDayEventRange, dayRanges) {
-        let fullDayRange = fullDayEventRange.range;
-        let dayIndex;
-        let segs = [];
-        for (dayIndex = 0; dayIndex < dayRanges.length; dayIndex += 1) {
-            const slicedFullDayRange = intersectRanges(fullDayRange, dayRanges[dayIndex]);
-            if (slicedFullDayRange) {
-                segs.push({
-                    eventRange: fullDayEventRange,
-                    slicedStart: slicedFullDayRange.start,
-                    slicedEnd: slicedFullDayRange.end,
-                    isStart: fullDayEventRange.isStart && fullDayRange.start.valueOf() === slicedFullDayRange.start.valueOf(),
-                    isEnd: fullDayEventRange.isEnd && fullDayRange.end.valueOf() === slicedFullDayRange.end.valueOf(),
-                    dayIndex,
-                });
-            }
-        }
-        return segs;
-    }
-}
-function renderNoEventsInner(renderProps) {
-    return renderProps.text;
-}
-function computeDateVars(dateProfile) {
-    let dayStart = startOfDay(dateProfile.renderRange.start);
-    let viewEnd = dateProfile.renderRange.end;
-    let dayDates = [];
-    let dayRanges = [];
-    while (dayStart < viewEnd) {
-        dayDates.push(dayStart);
-        dayRanges.push({
-            start: dayStart,
-            end: addDays(dayStart, 1),
-        });
-        dayStart = addDays(dayStart, 1);
-    }
-    return { dayDates, dayRanges };
-}
-// Returns a sparse array of arrays, segs grouped by their dayIndex
-function groupSegsByDay(segs) {
-    let segsByDay = []; // sparse array
-    let i;
-    let seg;
-    for (i = 0; i < segs.length; i += 1) {
-        seg = segs[i];
-        (segsByDay[seg.dayIndex] || (segsByDay[seg.dayIndex] = []))
-            .push(seg);
-    }
-    return segsByDay;
-}
-
-var css_248z = ":root{--fc-list-event-dot-width:10px;--fc-list-event-hover-bg-color:#f5f5f5}.fc-list-day,.fc-list-event-dot-outer,.fc-list-event-time,.fc-list-event-title{padding:8px 14px}.fc-direction-ltr .fc-list-event-dot-outer{padding-right:0}.fc-direction-rtl .fc-list-event-dot-outer{padding-left:0}.fc-list-empty{align-items:center;background-color:var(--fc-neutral-bg-color);display:flex;height:100%;justify-content:center}.fc-list-empty-inner{margin:5em 0}.fc-list-day,.fc-list-event:not(.fc-list-day-and-events:last-child .fc-list-event:last-child){border-bottom:1px solid var(--fc-border-color)}.fc-list-day-outer-sticky{background:var(--fc-page-bg-color);position:sticky;top:0}.fc-list-day{background:var(--fc-neutral-bg-color);display:flex;font-weight:700;justify-content:space-between}.fc-list-event{display:flex;flex-direction:row}a.fc-list-event{color:inherit;text-decoration:none}.fc-list-event:hover{background-color:var(--fc-list-event-hover-bg-color)}.fc-list-event-time-outer{display:flex;flex-direction:row}.fc-list-event-dot-outer,.fc-list-event-time{white-space:nowrap}.fc-list-event-dot{border:calc(var(--fc-list-event-dot-width)/2) solid var(--fc-event-border-color);border-radius:calc(var(--fc-list-event-dot-width)/2);box-sizing:content-box;display:inline-block;height:0;width:0}a.fc-list-event:hover .fc-list-event-title{text-decoration:underline}";
-injectStyles(css_248z);
-
-export { ListView };