@fullcalendar/multimonth 7.0.0-beta.4 → 7.0.0-beta.5

package/index.js

@@ -1,230 +0,0 @@
-import { createPlugin } from '@fullcalendar/core/index.js';
-import { buildDayTableModel, createDayHeaderFormatter, buildDateRowConfig, DayTableSlicer, DayGridHeaderRow, DayGridRows, buildDayTableRenderRange, TableDateProfileGenerator } from '@fullcalendar/daygrid/internal.js';
-import { DateComponent, memoize, getUniqueDomId, joinClassNames, fracToCssDim, getIsHeightAuto, NowTimer, ViewContainer, Scroller, formatIsoMonthStr, watchWidth, afterSize, createDuration, intersectRanges, createFormatter, injectStyles } from '@fullcalendar/core/internal.js';
-import { createElement, createRef } from '@fullcalendar/core/preact.js';
-
-class SingleMonth extends DateComponent {
-    constructor() {
-        super(...arguments);
-        // memo
-        this.buildDayTableModel = memoize(buildDayTableModel);
-        this.createDayHeaderFormatter = memoize(createDayHeaderFormatter);
-        this.buildDateRowConfig = memoize(buildDateRowConfig);
-        // internal
-        this.slicer = new DayTableSlicer();
-        this.titleId = getUniqueDomId();
-    }
-    render() {
-        const { props, context } = this;
-        const { dateProfile, forPrint } = props;
-        const { options } = context;
-        const dayTableModel = this.buildDayTableModel(dateProfile, context.dateProfileGenerator);
-        const slicedProps = this.slicer.sliceProps(props, dateProfile, options.nextDayThreshold, context, dayTableModel);
-        const dayHeaderFormat = this.createDayHeaderFormatter(options.dayHeaderFormat, false, // datesRepDistinctDays
-        dayTableModel.colCnt);
-        const rowConfig = this.buildDateRowConfig(dayTableModel.headerDates, false, // datesRepDistinctDays
-        dateProfile, props.todayRange, dayHeaderFormat, context);
-        const invAspectRatio = 1 / options.aspectRatio;
-        const invRowAspectRatio = invAspectRatio / dayTableModel.rowCnt;
-        const isHeaderSticky = !forPrint;
-        const isAspectRatio = !forPrint || props.hasLateralSiblings;
-        return (createElement("div", { role: 'listitem', className: 'fc-multimonth-month-outer', style: { width: props.width } },
-            createElement("div", { role: 'grid', "aria-labelledby": this.titleId, "data-date": props.isoDateStr, className: joinClassNames('fc-multimonth-month', props.hasLateralSiblings && 'fc-break-inside-avoid') },
-                createElement("div", { className: "fc-multimonth-header", style: {
-                        marginBottom: isHeaderSticky ? fracToCssDim(invRowAspectRatio) : undefined,
-                    } },
-                    createElement("div", { id: this.titleId, className: 'fc-multimonth-title' }, context.dateEnv.format(props.dateProfile.currentRange.start, props.titleFormat)),
-                    createElement(DayGridHeaderRow, Object.assign({}, rowConfig, { role: 'row', className: 'fc-multimonth-header-row' }))),
-                createElement("div", { className: joinClassNames('fc-multimonth-body', isAspectRatio && 'fc-rel'), style: {
-                        marginTop: isHeaderSticky ? fracToCssDim(-invRowAspectRatio) : undefined,
-                        paddingBottom: isAspectRatio ? fracToCssDim(invAspectRatio) : undefined,
-                    } },
-                    createElement(DayGridRows, { dateProfile: props.dateProfile, todayRange: props.todayRange, cellRows: dayTableModel.cellRows, className: isAspectRatio ? 'fc-fill' : '', forPrint: forPrint && !props.hasLateralSiblings, dayMaxEvents: forPrint ? undefined : options.dayMaxEvents, dayMaxEventRows: (forPrint && props.hasLateralSiblings) ? 1 : options.dayMaxEventRows, 
-                        // content
-                        fgEventSegs: slicedProps.fgEventSegs, bgEventSegs: slicedProps.bgEventSegs, businessHourSegs: slicedProps.businessHourSegs, dateSelectionSegs: slicedProps.dateSelectionSegs, eventDrag: slicedProps.eventDrag, eventResize: slicedProps.eventResize, eventSelection: slicedProps.eventSelection, 
-                        // dimensions
-                        visibleWidth: props.visibleWidth })))));
-    }
-}
-
-class MultiMonthView extends DateComponent {
-    constructor() {
-        super(...arguments);
-        // memo
-        this.splitDateProfileByMonth = memoize(splitDateProfileByMonth);
-        this.buildMonthFormat = memoize(buildMonthFormat);
-        // ref
-        this.scrollerRef = createRef();
-        this.innerElRef = createRef(); // .fc-multimonth-inner
-        this.scrollDate = null;
-        this.handleScrollEnd = ({ isUser }) => {
-            if (isUser) {
-                this.scrollDate = null;
-            }
-        };
-    }
-    render() {
-        const { context, props, state } = this;
-        const { options } = context;
-        const verticalScrolling = !props.forPrint && !getIsHeightAuto(options);
-        const monthDateProfiles = this.splitDateProfileByMonth(context.dateProfileGenerator, props.dateProfile, context.dateEnv, options.fixedWeekCount, options.showNonCurrentDates);
-        const monthTitleFormat = this.buildMonthFormat(options.multiMonthTitleFormat, monthDateProfiles);
-        const { multiMonthMinWidth, multiMonthMaxColumns } = options;
-        const { innerWidth } = state;
-        let cols;
-        let computedMonthWidth;
-        let cssMonthWidth;
-        let hasLateralSiblings = false;
-        if (innerWidth != null) {
-            cols = Math.max(1, Math.min(multiMonthMaxColumns, Math.floor(innerWidth / multiMonthMinWidth)));
-            if (props.forPrint) {
-                cols = Math.min(cols, 2);
-            }
-            computedMonthWidth = innerWidth / cols;
-            cssMonthWidth = fracToCssDim(1 / cols);
-            hasLateralSiblings = cols > 1;
-        }
-        return (createElement(NowTimer, { unit: "day" }, (nowDate, todayRange) => (createElement(ViewContainer, { viewSpec: context.viewSpec, className: joinClassNames('fc-multimonth fc-border', (cols === 1) ?
-                'fc-multimonth-singlecol' :
-                'fc-multimonth-multicol', 
-            // HACK for Safari. Can't do break-inside:avoid with flexbox items, likely b/c it's not standard:
-            // https://stackoverflow.com/a/60256345
-            !props.forPrint && 'fc-flex-col') },
-            createElement(Scroller, { vertical: verticalScrolling, className: verticalScrolling ? 'fc-liquid' : '', ref: this.scrollerRef },
-                createElement("div", { role: 'list', "aria-labelledby": props.labelId, "aria-label": props.labelStr, className: 'fc-multimonth-inner', ref: this.innerElRef }, monthDateProfiles.map((monthDateProfile) => {
-                    const monthStr = formatIsoMonthStr(monthDateProfile.currentRange.start);
-                    return (createElement(SingleMonth, Object.assign({}, props, { key: monthStr, todayRange: todayRange, isoDateStr: monthStr, titleFormat: monthTitleFormat, dateProfile: monthDateProfile, width: cssMonthWidth, visibleWidth: computedMonthWidth, hasLateralSiblings: hasLateralSiblings })));
-                })))))));
-    }
-    // Lifecycle
-    // -----------------------------------------------------------------------------------------------
-    componentDidMount() {
-        this.resetScroll();
-        this.scrollerRef.current.addScrollEndListener(this.handleScrollEnd);
-        this.disconnectInnerWidth = watchWidth(this.innerElRef.current, (innerWidth) => {
-            afterSize(() => {
-                this.setState({ innerWidth });
-            });
-        });
-    }
-    componentDidUpdate(prevProps) {
-        if (prevProps.dateProfile !== this.props.dateProfile && this.context.options.scrollTimeReset) {
-            this.resetScroll();
-        }
-        else {
-            // NOT optimal to update so often
-            // TODO: isolate dependencies of scroll coordinate
-            this.applyScroll();
-        }
-    }
-    componentWillUnmount() {
-        this.scrollerRef.current.removeScrollEndListener(this.handleScrollEnd);
-        this.disconnectInnerWidth();
-    }
-    // Scrolling
-    // -----------------------------------------------------------------------------------------------
-    resetScroll() {
-        this.scrollDate = this.props.dateProfile.currentDate;
-        this.applyScroll();
-    }
-    applyScroll() {
-        if (this.scrollDate != null &&
-            this.state.innerWidth != null // render completed?
-        ) {
-            const scroller = this.scrollerRef.current;
-            const innerEl = this.innerElRef.current;
-            const monthEl = innerEl.querySelector(`[data-date="${formatIsoMonthStr(this.scrollDate)}"]`);
-            const scrollTop = Math.ceil(// for fractions, err on the side of scrolling further
-            monthEl.getBoundingClientRect().top -
-                innerEl.getBoundingClientRect().top);
-            scroller.scrollTo({ y: scrollTop });
-        }
-    }
-}
-// date profile
-// -------------------------------------------------------------------------------------------------
-const oneMonthDuration = createDuration(1, 'month');
-function splitDateProfileByMonth(dateProfileGenerator, dateProfile, dateEnv, fixedWeekCount, showNonCurrentDates) {
-    const { start, end } = dateProfile.currentRange;
-    let monthStart = start;
-    const monthDateProfiles = [];
-    while (monthStart.valueOf() < end.valueOf()) {
-        const monthEnd = dateEnv.add(monthStart, oneMonthDuration);
-        const currentRange = {
-            // yuck
-            start: dateProfileGenerator.skipHiddenDays(monthStart),
-            end: dateProfileGenerator.skipHiddenDays(monthEnd, -1, true),
-        };
-        let renderRange = buildDayTableRenderRange({
-            currentRange,
-            snapToWeek: true,
-            fixedWeekCount,
-            dateEnv,
-        });
-        renderRange = {
-            // yuck
-            start: dateProfileGenerator.skipHiddenDays(renderRange.start),
-            end: dateProfileGenerator.skipHiddenDays(renderRange.end, -1, true),
-        };
-        const activeRange = dateProfile.activeRange ?
-            intersectRanges(dateProfile.activeRange, showNonCurrentDates ? renderRange : currentRange) :
-            null;
-        monthDateProfiles.push({
-            currentDate: dateProfile.currentDate,
-            isValid: dateProfile.isValid,
-            validRange: dateProfile.validRange,
-            renderRange,
-            activeRange,
-            currentRange,
-            currentRangeUnit: 'month',
-            isRangeAllDay: true,
-            dateIncrement: dateProfile.dateIncrement,
-            slotMinTime: dateProfile.slotMaxTime,
-            slotMaxTime: dateProfile.slotMinTime,
-        });
-        monthStart = monthEnd;
-    }
-    return monthDateProfiles;
-}
-// date formatting
-// -------------------------------------------------------------------------------------------------
-const YEAR_MONTH_FORMATTER = createFormatter({ year: 'numeric', month: 'long' });
-const YEAR_FORMATTER = createFormatter({ month: 'long' });
-function buildMonthFormat(formatOverride, monthDateProfiles) {
-    return formatOverride ||
-        ((monthDateProfiles[0].currentRange.start.getUTCFullYear() !==
-            monthDateProfiles[monthDateProfiles.length - 1].currentRange.start.getUTCFullYear())
-            ? YEAR_MONTH_FORMATTER
-            : YEAR_FORMATTER);
-}
-
-const OPTION_REFINERS = {
-    multiMonthTitleFormat: createFormatter,
-    multiMonthMaxColumns: Number,
-    multiMonthMinWidth: Number,
-};
-
-var css_248z = ".fc-media-screen .fc-multimonth-inner{display:flex;flex-direction:row;flex-wrap:wrap}.fc-media-print.fc-direction-ltr .fc-multimonth-inner>*{float:left}.fc-media-print.fc-direction-rtl .fc-multimonth-inner>*{float:right}.fc-media-print .fc-multimonth-inner:after{clear:both;content:\"\";display:block}.fc-multimonth-multicol .fc-multimonth-month{padding:1.2em}.fc-multimonth-singlecol .fc-multimonth-title{padding:.5em 0}.fc-multimonth-multicol .fc-multimonth-title{padding-bottom:1em}.fc-multimonth-title{font-size:1.2em;font-weight:700;text-align:center}.fc-multimonth-header-row{border-top:1px solid var(--fc-border-color)}.fc-multimonth-body:not(.fc-multimonth-singlecol .fc-multimonth-month-outer:last-child .fc-multimonth-body),.fc-multimonth-header-row{border-bottom:1px solid var(--fc-border-color)}.fc-multimonth-multicol .fc-multimonth-body,.fc-multimonth-multicol .fc-multimonth-header-row{border-left:1px solid var(--fc-border-color);border-right:1px solid var(--fc-border-color);font-size:.9em;line-height:1}.fc-media-screen .fc-multimonth-singlecol .fc-multimonth-header{background:var(--fc-page-bg-color);position:sticky;top:0;z-index:2}.fc-media-screen .fc-multimonth-singlecol .fc-multimonth-body{position:relative;z-index:1}";
-injectStyles(css_248z);
-
-var index = createPlugin({
-    name: '@fullcalendar/multimonth',
-    initialView: 'multiMonthYear',
-    optionRefiners: OPTION_REFINERS,
-    views: {
-        multiMonth: {
-            component: MultiMonthView,
-            dateProfileGeneratorClass: TableDateProfileGenerator,
-            multiMonthMinWidth: 350,
-            multiMonthMaxColumns: 3,
-        },
-        multiMonthYear: {
-            type: 'multiMonth',
-            duration: { years: 1 },
-            fixedWeekCount: true,
-            showNonCurrentDates: false, // TODO: looks bad when single-col layout
-        },
-    },
-});
-
-export { index as default };