@fullcalendar/list - npm Package Compare versions

Comparing version 5.0.0-beta.2 to 5.0.0-beta.3

main.d.ts

@@ -1,26 +0,39 @@
-// Generated by dts-bundle v0.7.3-fork.1
-// Dependencies for this module:
-//   ../../../../../@fullcalendar/core
+import { DateComponent, ViewProps, createElement, Seg, DateMarker, EventStore, EventUiHash, DateRange, EventRenderRange, ViewApi, Identity, ClassNamesGenerator, CustomContentGenerator, DidMountHandler, WillUnmountHandler, FormatterInput, DateFormatter, PluginDef } from '@fullcalendar/common';
 
-declare module '@fullcalendar/list' {
-    import ListView from '@fullcalendar/list/ListView';
-    
-    export { ListView };
-    const _default: import("@fullcalendar/core").PluginDef;
-    export default _default;
+interface NoEventsHookProps {
+    text: string;
+    view: ViewApi;
 }
+declare class ListView extends DateComponent<ViewProps> {
+    private computeDateVars;
+    private eventStoreToSegs;
+    render(): createElement.JSX.Element;
+    setRootEl: (rootEl: HTMLDivElement | null) => void;
+    renderEmptyMessage(): createElement.JSX.Element;
+    renderSegList(allSegs: Seg[], dayDates: DateMarker[]): createElement.JSX.Element;
+    _eventStoreToSegs(eventStore: EventStore, eventUiBases: EventUiHash, dayRanges: DateRange[]): Seg[];
+    eventRangesToSegs(eventRanges: EventRenderRange[], dayRanges: DateRange[]): any[];
+    eventRangeToSegs(eventRange: EventRenderRange, dayRanges: DateRange[]): any[];
+}
 
-declare module '@fullcalendar/list/ListView' {
-    import { h, ViewProps, DateMarker, DateRange, ComponentContext, EventUiHash, EventRenderRange, EventStore, Seg, DateComponent } from '@fullcalendar/core';
-    export { ListView as default, ListView };
-    class ListView extends DateComponent<ViewProps> {
-        render(props: ViewProps, state: {}, context: ComponentContext): h.JSX.Element;
-        setRootEl: (rootEl: HTMLDivElement) => void;
-        renderEmptyMessage(): h.JSX.Element;
-        renderSegList(allSegs: Seg[], dayDates: DateMarker[]): h.JSX.Element;
-        _eventStoreToSegs(eventStore: EventStore, eventUiBases: EventUiHash, dayRanges: DateRange[]): Seg[];
-        eventRangesToSegs(eventRanges: EventRenderRange[], dayRanges: DateRange[]): any[];
-        eventRangeToSegs(eventRange: EventRenderRange, dayRanges: DateRange[]): any[];
+
+declare const OPTION_REFINERS: {
+    listDayFormat: typeof createFalsableFormatter;
+    listDaySideFormat: typeof createFalsableFormatter;
+    noEventsClassNames: Identity<ClassNamesGenerator<NoEventsHookProps>>;
+    noEventsContent: Identity<CustomContentGenerator<NoEventsHookProps>>;
+    noEventsDidMount: Identity<DidMountHandler<NoEventsHookProps>>;
+    noEventsWillUnmount: Identity<WillUnmountHandler<NoEventsHookProps>>;
+};
+declare function createFalsableFormatter(input: FormatterInput | false): DateFormatter;
+
+declare type ExtraOptionRefiners = typeof OPTION_REFINERS;
+declare module '@fullcalendar/common' {
+    interface BaseOptionRefiners extends ExtraOptionRefiners {
     }
 }
 
+declare const _default: PluginDef;
+
+export default _default;
+export { ListView };

main.js

 /*!
-FullCalendar List View Plugin v5.0.0-beta.2
+FullCalendar v5.0.0-beta.3
 Docs & License: https://fullcalendar.io/
 (c) 2019 Adam Shaw
 */
+import './main.css';
 
-import { getDateMeta, createFormatter, buildNavLinkData, getDayClassNames, h, RenderHook, formatDayString, BaseComponent, EventRoot, isMultiDayRange, buildSegTimeText, memoize, ViewRoot, Scroller, NowTimer, sortEventSegs, getSegMeta, sliceEventStore, intersectRanges, DateComponent, startOfDay, addDays, createPlugin } from '@fullcalendar/core';
+import { getDateMeta, buildNavLinkData, getDayClassNames, createElement, RenderHook, formatDayString, BaseComponent, Fragment, createFormatter, EventRoot, isMultiDayRange, buildSegTimeText, memoize, ViewRoot, Scroller, NowTimer, sortEventSegs, getSegMeta, sliceEventStore, intersectRanges, DateComponent, startOfDay, addDays, identity, createPlugin } from '@fullcalendar/common';
 import { __extends, __assign } from 'tslib';
-import './main.css';
 
@@ -16,21 +16,19 @@ var ListViewHeaderRow = /** @class */ (function (_super) {
     }
-    ListViewHeaderRow.prototype.render = function (props, state, context) {
-        var theme = context.theme, dateEnv = context.dateEnv, options = context.options;
-        var dayDate = props.dayDate;
-        var dayMeta = getDateMeta(dayDate, props.todayRange);
-        var mainFormat = createFormatter(options.listDayFormat); // TODO: cache
-        var sideFormat = createFormatter(options.listDaySideFormat); // TODO: cache
-        var text = mainFormat ? dateEnv.format(dayDate, mainFormat) : ''; // will ever be falsy?
-        var sideText = sideFormat ? dateEnv.format(dayDate, sideFormat) : ''; // will ever be falsy? also, BAD NAME "alt"
+    ListViewHeaderRow.prototype.render = function () {
+        var _a = this.props, dayDate = _a.dayDate, todayRange = _a.todayRange;
+        var _b = this.context, theme = _b.theme, dateEnv = _b.dateEnv, options = _b.options, viewApi = _b.viewApi;
+        var dayMeta = getDateMeta(dayDate, todayRange);
+        var text = options.listDayFormat ? dateEnv.format(dayDate, options.listDayFormat) : ''; // will ever be falsy?
+        var sideText = options.listDaySideFormat ? dateEnv.format(dayDate, options.listDaySideFormat) : ''; // will ever be falsy? also, BAD NAME "alt"
         var navLinkData = options.navLinks
             ? buildNavLinkData(dayDate)
             : null;
-        var hookProps = __assign({ date: dateEnv.toDate(dayDate), view: context.view, text: text,
+        var hookProps = __assign({ date: dateEnv.toDate(dayDate), view: viewApi, text: text,
             sideText: sideText,
             navLinkData: navLinkData }, dayMeta);
-        var classNames = ['fc-list-day'].concat(getDayClassNames(dayMeta, context.theme));
+        var classNames = ['fc-list-day'].concat(getDayClassNames(dayMeta, theme));
         // TODO: make a reusable HOC for dayHeader (used in daygrid/timegrid too)
-        return (h(RenderHook, { name: 'dayHeader', hookProps: hookProps, defaultContent: renderInnerContent }, function (rootElRef, customClassNames, innerElRef, innerContent) { return (h("tr", { ref: rootElRef, className: classNames.concat(customClassNames).join(' '), "data-date": formatDayString(dayDate) },
-            h("th", { colSpan: 3 },
-                h("div", { className: 'fc-list-day-frame ' + theme.getClass('tableCellShaded'), ref: innerElRef }, innerContent)))); }));
+        return (createElement(RenderHook, { hookProps: hookProps, classNames: options.dayHeaderClassNames, content: options.dayHeaderContent, defaultContent: renderInnerContent, didMount: options.dayHeaderDidMount, willUnmount: options.dayHeaderWillUnmount }, function (rootElRef, customClassNames, innerElRef, innerContent) { return (createElement("tr", { ref: rootElRef, className: classNames.concat(customClassNames).join(' '), "data-date": formatDayString(dayDate) },
+            createElement("th", { colSpan: 3 },
+                createElement("div", { className: 'fc-list-day-frame ' + theme.getClass('tableCellShaded'), ref: innerElRef }, innerContent)))); }));
     };
@@ -40,15 +38,14 @@ return ListViewHeaderRow;
 function renderInnerContent(props) {
-    return [
+    return (createElement(Fragment, null,
         props.text &&
-            h("a", { className: 'fc-list-day-text', "data-navlink": props.navLinkData }, props.text),
+            createElement("a", { className: 'fc-list-day-text', "data-navlink": props.navLinkData }, props.text),
         props.sideText &&
-            h("a", { className: 'fc-list-day-side-text', "data-navlink": props.navLinkData }, props.sideText)
-    ];
+            createElement("a", { className: 'fc-list-day-side-text', "data-navlink": props.navLinkData }, props.sideText)));
 }
 
-var DEFAULT_TIME_FORMAT = {
+var DEFAULT_TIME_FORMAT = createFormatter({
     hour: 'numeric',
     minute: '2-digit',
     meridiem: 'short'
-};
+});
 var ListViewEventRow = /** @class */ (function (_super) {
@@ -59,14 +56,11 @@ __extends(ListViewEventRow, _super);
     }
-    ListViewEventRow.prototype.render = function (props, state, context) {
-        var options = context.options;
+    ListViewEventRow.prototype.render = function () {
+        var _a = this, props = _a.props, context = _a.context;
         var seg = props.seg;
-        // TODO: avoid createFormatter, cache!!! see TODO in StandardEvent
-        var timeFormat = createFormatter(options.eventTimeFormat || DEFAULT_TIME_FORMAT, options.defaultRangeSeparator);
-        return (h(EventRoot, { seg: seg, timeText: '' /* BAD. because of all-day content */, disableDragging: true, disableResizing: true, defaultContent: renderEventInnerContent, isPast: props.isPast, isFuture: props.isFuture, isToday: props.isToday, isSelected: props.isSelected, isDragging: props.isDragging, isResizing: props.isResizing, isDateSelecting: props.isDateSelecting }, function (rootElRef, classNames, style, innerElRef, innerContent, hookProps) { return (h("tr", { className: ['fc-list-event', hookProps.event.url ? 'fc-event-forced-url' : ''].concat(classNames).join(' '), ref: rootElRef },
+        var timeFormat = context.options.eventTimeFormat || DEFAULT_TIME_FORMAT;
+        return (createElement(EventRoot, { seg: seg, timeText: '' /* BAD. because of all-day content */, disableDragging: true, disableResizing: true, defaultContent: renderEventInnerContent, isPast: props.isPast, isFuture: props.isFuture, isToday: props.isToday, isSelected: props.isSelected, isDragging: props.isDragging, isResizing: props.isResizing, isDateSelecting: props.isDateSelecting }, function (rootElRef, classNames, innerElRef, innerContent, hookProps) { return (createElement("tr", { className: ['fc-list-event', hookProps.event.url ? 'fc-event-forced-url' : ''].concat(classNames).join(' '), ref: rootElRef },
             buildTimeContent(seg, timeFormat, context),
-            h("td", { class: 'fc-list-event-graphic' },
-                h("span", { class: 'fc-list-event-dot', style: {
-                        backgroundColor: hookProps.event.backgroundColor
-                    } })),
-            h("td", { class: 'fc-list-event-title', ref: innerElRef }, innerContent))); }));
+            createElement("td", { className: 'fc-list-event-graphic' },
+                createElement("span", { className: 'fc-list-event-dot', style: { backgroundColor: hookProps.backgroundColor } })),
+            createElement("td", { className: 'fc-list-event-title', ref: innerElRef, style: { color: hookProps.textColor } }, innerContent))); }));
     };
@@ -79,7 +73,7 @@ return ListViewEventRow;
     var anchorAttrs = url ? { href: url } : {};
-    return (h("a", __assign({}, anchorAttrs), event.title));
+    return (createElement("a", __assign({}, anchorAttrs), event.title));
 }
 function buildTimeContent(seg, timeFormat, context) {
-    var displayEventTime = context.options.displayEventTime;
-    if (displayEventTime !== false) {
+    var options = context.options;
+    if (options.displayEventTime !== false) {
         var eventDef = seg.eventRange.def;
@@ -109,8 +103,8 @@ var eventInstance = seg.eventRange.instance;
                 text: context.options.allDayText,
-                view: context.view
+                view: context.viewApi
             };
-            return (h(RenderHook, { name: 'allDay', hookProps: hookProps, defaultContent: renderAllDayInner }, function (rootElRef, classNames, innerElRef, innerContent) { return (h("td", { class: ['fc-list-event-time'].concat(classNames).join(' '), ref: rootElRef }, innerContent)); }));
+            return (createElement(RenderHook, { hookProps: hookProps, classNames: options.allDayClassNames, content: options.allDayContent, defaultContent: renderAllDayInner, didMount: options.allDayDidMount, willUnmount: options.allDayWillUnmount }, function (rootElRef, classNames, innerElRef, innerContent) { return (createElement("td", { className: ['fc-list-event-time'].concat(classNames).join(' '), ref: rootElRef }, innerContent)); }));
         }
         else {
-            return (h("td", { class: 'fc-list-event-time' }, timeText));
+            return (createElement("td", { className: 'fc-list-event-time' }, timeText));
         }
@@ -135,3 +129,3 @@ }
             if (rootEl) {
-                _this.context.calendar.registerInteractiveComponent(_this, {
+                _this.context.registerInteractiveComponent(_this, {
                     el: rootEl
@@ -141,3 +135,3 @@ });
             else {
-                _this.context.calendar.unregisterInteractiveComponent(_this);
+                _this.context.unregisterInteractiveComponent(_this);
             }
@@ -147,4 +141,5 @@ };
     }
-    ListView.prototype.render = function (props, state, context) {
+    ListView.prototype.render = function () {
         var _this = this;
+        var _a = this, props = _a.props, context = _a.context;
         var extraClassNames = [
@@ -155,6 +150,6 @@ 'fc-list',
         ];
-        var _a = this.computeDateVars(props.dateProfile), dayDates = _a.dayDates, dayRanges = _a.dayRanges;
+        var _b = this.computeDateVars(props.dateProfile), dayDates = _b.dayDates, dayRanges = _b.dayRanges;
         var eventSegs = this.eventStoreToSegs(props.eventStore, props.eventUiBases, dayRanges);
-        return (h(ViewRoot, { viewSpec: props.viewSpec, elRef: this.setRootEl }, function (rootElRef, classNames) { return (h("div", { ref: rootElRef, class: extraClassNames.concat(classNames).join(' ') },
-            h(Scroller, { liquid: !props.isHeightAuto, overflowX: props.isHeightAuto ? 'visible' : 'hidden', overflowY: props.isHeightAuto ? 'visible' : 'auto' }, eventSegs.length > 0 ?
+        return (createElement(ViewRoot, { viewSpec: context.viewSpec, elRef: this.setRootEl }, function (rootElRef, classNames) { return (createElement("div", { ref: rootElRef, className: extraClassNames.concat(classNames).join(' ') },
+            createElement(Scroller, { liquid: !props.isHeightAuto, overflowX: props.isHeightAuto ? 'visible' : 'hidden', overflowY: props.isHeightAuto ? 'visible' : 'auto' }, eventSegs.length > 0 ?
                 _this.renderSegList(eventSegs, dayDates) :
@@ -164,33 +159,34 @@ _this.renderEmptyMessage()))); }));
     ListView.prototype.renderEmptyMessage = function () {
-        var context = this.context;
+        var _a = this.context, options = _a.options, viewApi = _a.viewApi;
         var hookProps = {
-            text: context.options.noEventsText,
-            view: context.view
+            text: options.noEventsText,
+            view: viewApi
         };
-        return (h(RenderHook, { name: 'noEvents', hookProps: hookProps, defaultContent: renderNoEventsInner }, function (rootElRef, classNames, innerElRef, innerContent) { return (h("div", { className: ['fc-list-empty'].concat(classNames).join(' '), ref: rootElRef },
-            h("div", { className: 'fc-list-empty-cushion', ref: innerElRef }, innerContent))); }));
+        return (createElement(RenderHook, { hookProps: hookProps, classNames: options.noEventsClassNames, content: options.noEventsContent, defaultContent: renderNoEventsInner, didMount: options.noEventsDidMount, willUnmount: options.noEventsWillUnmount }, function (rootElRef, classNames, innerElRef, innerContent) { return (createElement("div", { className: ['fc-list-empty'].concat(classNames).join(' '), ref: rootElRef },
+            createElement("div", { className: 'fc-list-empty-cushion', ref: innerElRef }, innerContent))); }));
     };
     ListView.prototype.renderSegList = function (allSegs, dayDates) {
-        var _a = this.context, theme = _a.theme, eventOrderSpecs = _a.eventOrderSpecs;
+        var _a = this.context, theme = _a.theme, options = _a.options;
         var segsByDay = groupSegsByDay(allSegs); // sparse array
-        return (h(NowTimer, { unit: 'day', content: function (nowDate, todayRange) {
-                var innerNodes = [];
-                for (var dayIndex = 0; dayIndex < segsByDay.length; dayIndex++) {
-                    var daySegs = segsByDay[dayIndex];
-                    if (daySegs) { // sparse array, so might be undefined
-                        // append a day header
-                        innerNodes.push(h(ListViewHeaderRow, { dayDate: dayDates[dayIndex], todayRange: todayRange }));
-                        daySegs = sortEventSegs(daySegs, eventOrderSpecs);
-                        for (var _i = 0, daySegs_1 = daySegs; _i < daySegs_1.length; _i++) {
-                            var seg = daySegs_1[_i];
-                            innerNodes.push(h(ListViewEventRow, __assign({ seg: seg, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: false }, getSegMeta(seg, todayRange, nowDate))));
-                        }
+        return (createElement(NowTimer, { unit: 'day' }, function (nowDate, todayRange) {
+            var innerNodes = [];
+            for (var dayIndex = 0; dayIndex < segsByDay.length; dayIndex++) {
+                var daySegs = segsByDay[dayIndex];
+                if (daySegs) { // sparse array, so might be undefined
+                    var dayStr = dayDates[dayIndex].toISOString();
+                    // append a day header
+                    innerNodes.push(createElement(ListViewHeaderRow, { key: dayStr, dayDate: dayDates[dayIndex], todayRange: todayRange }));
+                    daySegs = sortEventSegs(daySegs, options.eventOrder);
+                    for (var _i = 0, daySegs_1 = daySegs; _i < daySegs_1.length; _i++) {
+                        var seg = daySegs_1[_i];
+                        innerNodes.push(createElement(ListViewEventRow, __assign({ key: dayStr + ':' + seg.eventRange.instance.instanceId /* are multiple segs for an instanceId */, seg: seg, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: false }, getSegMeta(seg, todayRange, nowDate))));
                     }
                 }
-                return (h("table", { class: 'fc-list-table ' + theme.getClass('table') },
-                    h("tbody", null, innerNodes)));
-            } }));
+            }
+            return (createElement("table", { className: 'fc-list-table ' + theme.getClass('table') },
+                createElement("tbody", null, innerNodes)));
+        }));
     };
     ListView.prototype._eventStoreToSegs = function (eventStore, eventUiBases, dayRanges) {
-        return this.eventRangesToSegs(sliceEventStore(eventStore, eventUiBases, this.props.dateProfile.activeRange, this.context.nextDayThreshold).fg, dayRanges);
+        return this.eventRangesToSegs(sliceEventStore(eventStore, eventUiBases, this.props.dateProfile.activeRange, this.context.options.nextDayThreshold).fg, dayRanges);
     };
@@ -206,3 +202,4 @@ ListView.prototype.eventRangesToSegs = function (eventRanges, dayRanges) {
     ListView.prototype.eventRangeToSegs = function (eventRange, dayRanges) {
-        var _a = this.context, dateEnv = _a.dateEnv, nextDayThreshold = _a.nextDayThreshold;
+        var dateEnv = this.context.dateEnv;
+        var nextDayThreshold = this.context.options.nextDayThreshold;
         var range = eventRange.range;
@@ -274,3 +271,17 @@ var allDay = eventRange.def.allDay;
 
+var OPTION_REFINERS = {
+    listDayFormat: createFalsableFormatter,
+    listDaySideFormat: createFalsableFormatter,
+    noEventsClassNames: identity,
+    noEventsContent: identity,
+    noEventsDidMount: identity,
+    noEventsWillUnmount: identity
+    // noEventsText is defined in base options
+};
+function createFalsableFormatter(input) {
+    return input === false ? null : createFormatter(input);
+}
+
 var main = createPlugin({
+    optionRefiners: OPTION_REFINERS,
     views: {
@@ -308,1 +319,2 @@ list: {
 export { ListView };
+//# sourceMappingURL=main.js.map

package.json

 {
   "name": "@fullcalendar/list",
-  "version": "5.0.0-beta.2",
+  "version": "5.0.0-beta.3",
   "title": "FullCalendar List View Plugin",
   "description": "View your events as a bulleted list",
-  "keywords": [
-    "calendar",
-    "event",
-    "full-sized"
-  ],
+  "docs": "https://fullcalendar.io/docs/list-view",
+  "dependencies": {
+    "@fullcalendar/common": "5.0.0-beta.3",
+    "tslib": "^1.9.3"
+  },
+  "module": "main.js",
+  "types": "main.d.ts",
   "homepage": "https://fullcalendar.io/",
-  "docs": "https://fullcalendar.io/docs/list-view",
   "bugs": "https://fullcalendar.io/reporting-bugs",
@@ -25,11 +26,3 @@ "repository": {
   },
-  "copyright": "2019 Adam Shaw",
-  "dependencies": {
-    "tslib": "^1.9.3"
-  },
-  "peerDependencies": {
-    "@fullcalendar/core": "5.0.0-beta.2"
-  },
-  "main": "main.js",
-  "types": "main.d.ts"
+  "copyright": "2019 Adam Shaw"
 }

No alert changes

Improved metrics

Total package byte prevSize

49426

increased by156.55%

Lines of code

440

increased by9.18%

Dependency changes

• + Added@fullcalendar/common@5.0.0-beta.3

• + Added@fullcalendar/common@5.0.0-beta.3(transitive)

• - Removed@fullcalendar/core@5.0.0-beta.2(transitive)

• - Removedpreact@10.26.0(transitive)