@fullcalendar/timeline 7.0.0-beta.0 → 7.0.0-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.cjs +2 -1
- package/index.global.js +170 -263
- package/index.global.min.js +2 -2
- package/index.js +2 -1
- package/internal.cjs +169 -261
- package/internal.d.ts +37 -59
- package/internal.js +170 -260
- package/package.json +4 -4
package/internal.cjs
CHANGED
|
@@ -4,9 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var internal_cjs = require('@fullcalendar/core/internal.cjs');
|
|
6
6
|
var preact_cjs = require('@fullcalendar/core/preact.cjs');
|
|
7
|
-
|
|
8
|
-
var css_248z = ".fc-timeline-slots{z-index:1}.fc-timeline-slot-minor{border-style:dotted}.fc-timeline-now-indicator-container{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:4}.fc-timeline-now-indicator-arrow,.fc-timeline-now-indicator-line{border-color:var(--fc-now-indicator-color);border-style:solid;pointer-events:none;position:absolute;top:0}.fc-timeline-now-indicator-arrow{border-left-color:transparent;border-right-color:transparent;border-width:6px 5px 0;margin:0 -5px}.fc-timeline-now-indicator-line{border-width:0 0 0 1px;bottom:0}.fc-timeline-events{z-index:3}.fc-timeline-events-overlap-enabled{padding-bottom:10px}.fc-timeline-event{border-radius:0;font-size:var(--fc-small-font-size);margin-bottom:1px;z-index:1}.fc-timeline-event.fc-event-mirror{z-index:2}.fc-direction-ltr .fc-timeline-event.fc-event-end{margin-right:1px}.fc-direction-rtl .fc-timeline-event.fc-event-end{margin-left:1px}.fc-timeline-event-spacious{margin-bottom:0;padding-bottom:5px;padding-top:5px}.fc-timeline-event .fc-event-inner{align-items:center;display:flex;flex-direction:row;padding:2px 1px}.fc-timeline-event:not(.fc-event-end) .fc-event-inner:after,.fc-timeline-event:not(.fc-event-start) .fc-event-inner:before{border-color:transparent #000;border-style:solid;border-width:5px;content:\"\";flex-grow:0;flex-shrink:0;height:0;margin:0 1px;opacity:.5;width:0}.fc-direction-ltr .fc-timeline-event:not(.fc-event-start) .fc-event-inner:before,.fc-direction-rtl .fc-timeline-event:not(.fc-event-end) .fc-event-inner:after{border-left:0}.fc-direction-ltr .fc-timeline-event:not(.fc-event-end) .fc-event-inner:after,.fc-direction-rtl .fc-timeline-event:not(.fc-event-start) .fc-event-inner:before{border-right:0}.fc-timeline-event .fc-event-time{font-weight:700}.fc-timeline-event .fc-event-time,.fc-timeline-event .fc-event-title{padding:0 2px}.fc-timeline-more-link{align-items:flex-start;background:var(--fc-more-link-bg-color);color:var(--fc-more-link-text-color);cursor:pointer;display:flex;flex-direction:column;font-size:var(--fc-small-font-size);padding:1px}.fc-direction-ltr .fc-timeline-more-link{margin-right:1px}.fc-direction-rtl .fc-timeline-more-link{margin-left:1px}.fc-timeline-more-link-inner{padding:2px}.fc-timeline-bg{bottom:0;left:0;position:absolute;right:0;top:0;z-index:2}.fc-timeline-bg .fc-non-business{z-index:1}.fc-timeline-bg .fc-bg-event{z-index:2}.fc-timeline-bg .fc-highlight{z-index:3}.fc-timeline-bg-harness{bottom:0;position:absolute;top:0}";
|
|
9
|
-
internal_cjs.injectStyles(css_248z);
|
|
7
|
+
var internal_cjs$1 = require('@fullcalendar/scrollgrid/internal.cjs');
|
|
10
8
|
|
|
11
9
|
const MIN_AUTO_LABELS = 18; // more than `12` months but less that `24` hours
|
|
12
10
|
const MAX_AUTO_SLOTS_PER_LABEL = 6; // allows 6 10-min slots in an hour
|
|
@@ -454,42 +452,36 @@ class TimelineSlatCell extends internal_cjs.BaseComponent {
|
|
|
454
452
|
}
|
|
455
453
|
render() {
|
|
456
454
|
let { props, context } = this;
|
|
457
|
-
let { dateEnv, options
|
|
455
|
+
let { dateEnv, options } = context;
|
|
458
456
|
let { date, tDateProfile, isEm } = props;
|
|
459
457
|
let dateMeta = internal_cjs.getDateMeta(props.date, props.todayRange, props.nowDate, props.dateProfile);
|
|
460
458
|
let renderProps = Object.assign(Object.assign({ date: dateEnv.toDate(props.date) }, dateMeta), { view: context.viewApi });
|
|
461
|
-
return (preact_cjs.createElement(internal_cjs.ContentContainer, {
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
'fc-timeline-slot-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
'fc-timeline-slot-major' :
|
|
471
|
-
'fc-timeline-slot-minor') : '',
|
|
472
|
-
...(props.isDay ?
|
|
473
|
-
internal_cjs.getDayClassNames(dateMeta, theme) :
|
|
474
|
-
internal_cjs.getSlotClassNames(dateMeta, theme)),
|
|
475
|
-
], elAttrs: {
|
|
459
|
+
return (preact_cjs.createElement(internal_cjs.ContentContainer, { tag: "div",
|
|
460
|
+
// fc-align-start shrinks width of InnerContent
|
|
461
|
+
// TODO: document this semantic className fc-timeline-slot-em
|
|
462
|
+
className: internal_cjs.joinClassNames('fc-timeline-slot', isEm && 'fc-timeline-slot-em', tDateProfile.isTimeScale && (internal_cjs.isInt(dateEnv.countDurationsBetween(// best to do this here?
|
|
463
|
+
tDateProfile.normalizedRange.start, props.date, tDateProfile.labelInterval)) ?
|
|
464
|
+
'fc-timeline-slot-major' :
|
|
465
|
+
'fc-timeline-slot-minor'), 'fc-timeline-slot-lane fc-cell fc-flex-col fc-align-start', props.borderStart && 'fc-border-s', props.isDay ?
|
|
466
|
+
internal_cjs.getDayClassName(dateMeta) :
|
|
467
|
+
internal_cjs.getSlotClassName(dateMeta)), attrs: {
|
|
476
468
|
'data-date': dateEnv.formatIso(date, {
|
|
477
469
|
omitTimeZoneOffset: true,
|
|
478
470
|
omitTime: !tDateProfile.isTimeScale,
|
|
479
471
|
}),
|
|
480
|
-
},
|
|
472
|
+
}, style: {
|
|
481
473
|
width: props.width,
|
|
482
|
-
}, renderProps: renderProps, generatorName: "slotLaneContent", customGenerator: options.slotLaneContent, classNameGenerator: options.slotLaneClassNames, didMount: options.slotLaneDidMount, willUnmount: options.slotLaneWillUnmount }, (InnerContent) => (preact_cjs.createElement(
|
|
483
|
-
preact_cjs.createElement(InnerContent, { elTag: "div", elClasses: ['fc-cell-inner'] })))));
|
|
474
|
+
}, renderProps: renderProps, generatorName: "slotLaneContent", customGenerator: options.slotLaneContent, classNameGenerator: options.slotLaneClassNames, didMount: options.slotLaneDidMount, willUnmount: options.slotLaneWillUnmount }, (InnerContent) => (preact_cjs.createElement(InnerContent, { tag: "div", className: 'fc-cell-inner', elRef: this.innerElRef }))));
|
|
484
475
|
}
|
|
485
476
|
componentDidMount() {
|
|
486
477
|
const innerEl = this.innerElRef.current;
|
|
487
|
-
this.
|
|
478
|
+
this.disconnectInnerWidth = internal_cjs.watchWidth(innerEl, (width) => {
|
|
488
479
|
internal_cjs.setRef(this.props.innerWidthRef, width);
|
|
489
480
|
});
|
|
490
481
|
}
|
|
491
482
|
componentWillUnmount() {
|
|
492
|
-
this.
|
|
483
|
+
this.disconnectInnerWidth();
|
|
484
|
+
internal_cjs.setRef(this.props.innerWidthRef, null);
|
|
493
485
|
}
|
|
494
486
|
}
|
|
495
487
|
|
|
@@ -514,9 +506,9 @@ class TimelineSlats extends internal_cjs.BaseComponent {
|
|
|
514
506
|
let { tDateProfile, slotWidth } = props;
|
|
515
507
|
let { slotDates, isWeekStarts } = tDateProfile;
|
|
516
508
|
let isDay = !tDateProfile.isTimeScale && !tDateProfile.largeUnit;
|
|
517
|
-
return (preact_cjs.createElement("div", { className: "fc-timeline-slots fc-fill fc-flex-row" }, slotDates.map((slotDate, i) => {
|
|
509
|
+
return (preact_cjs.createElement("div", { className: "fc-timeline-slots fc-fill fc-flex-row", style: { height: props.height } }, slotDates.map((slotDate, i) => {
|
|
518
510
|
let key = slotDate.toISOString();
|
|
519
|
-
return (preact_cjs.createElement(TimelineSlatCell, { key: key, date: slotDate, dateProfile: props.dateProfile, tDateProfile: tDateProfile, nowDate: props.nowDate, todayRange: props.todayRange, isEm: isWeekStarts[i], isDay: isDay,
|
|
511
|
+
return (preact_cjs.createElement(TimelineSlatCell, { key: key, date: slotDate, dateProfile: props.dateProfile, tDateProfile: tDateProfile, nowDate: props.nowDate, todayRange: props.todayRange, isEm: isWeekStarts[i], isDay: isDay, borderStart: Boolean(i),
|
|
520
512
|
// ref
|
|
521
513
|
innerWidthRef: innerWidthRefMap.createRef(key),
|
|
522
514
|
// dimensions
|
|
@@ -550,30 +542,6 @@ function computeDateSnapCoverage$1(date, tDateProfile, dateEnv) {
|
|
|
550
542
|
return snapCoverage;
|
|
551
543
|
}
|
|
552
544
|
/*
|
|
553
|
-
TODO: audit!!!
|
|
554
|
-
*/
|
|
555
|
-
function coordToCss(hcoord, isRtl) {
|
|
556
|
-
if (hcoord === null) {
|
|
557
|
-
return { left: '', right: '' };
|
|
558
|
-
}
|
|
559
|
-
if (isRtl) {
|
|
560
|
-
return { right: hcoord, left: '' };
|
|
561
|
-
}
|
|
562
|
-
return { left: hcoord, right: '' };
|
|
563
|
-
}
|
|
564
|
-
/*
|
|
565
|
-
TODO: audit!!!
|
|
566
|
-
*/
|
|
567
|
-
function coordsToCss(hcoords, isRtl) {
|
|
568
|
-
if (!hcoords) {
|
|
569
|
-
return { left: '', right: '' };
|
|
570
|
-
}
|
|
571
|
-
if (isRtl) {
|
|
572
|
-
return { right: hcoords.start, left: -hcoords.end };
|
|
573
|
-
}
|
|
574
|
-
return { left: hcoords.start, right: -hcoords.end };
|
|
575
|
-
}
|
|
576
|
-
/*
|
|
577
545
|
TODO: DRY up with elsewhere?
|
|
578
546
|
*/
|
|
579
547
|
function horizontalsToCss(hcoord, isRtl) {
|
|
@@ -604,7 +572,8 @@ function createVerticalStyle(props) {
|
|
|
604
572
|
};
|
|
605
573
|
}
|
|
606
574
|
}
|
|
607
|
-
function createHorizontalStyle(
|
|
575
|
+
function createHorizontalStyle(// TODO: DRY up?
|
|
576
|
+
props, isRtl) {
|
|
608
577
|
if (props) {
|
|
609
578
|
return {
|
|
610
579
|
[isRtl ? 'right' : 'left']: props.start,
|
|
@@ -677,13 +646,13 @@ function computeDateSnapCoverage(date, tDateProfile, dateEnv) {
|
|
|
677
646
|
function computeManySegHorizontals(segs, segMinWidth, dateEnv, tDateProfile, slotWidth) {
|
|
678
647
|
const res = {};
|
|
679
648
|
for (const seg of segs) {
|
|
680
|
-
res[seg
|
|
649
|
+
res[internal_cjs.getEventKey(seg)] = computeSegHorizontals(seg, segMinWidth, dateEnv, tDateProfile, slotWidth);
|
|
681
650
|
}
|
|
682
651
|
return res;
|
|
683
652
|
}
|
|
684
653
|
function computeSegHorizontals(seg, segMinWidth, dateEnv, tDateProfile, slotWidth) {
|
|
685
|
-
const startCoord = dateToCoord(seg.
|
|
686
|
-
const endCoord = dateToCoord(seg.
|
|
654
|
+
const startCoord = dateToCoord(seg.startDate, dateEnv, tDateProfile, slotWidth);
|
|
655
|
+
const endCoord = dateToCoord(seg.endDate, dateEnv, tDateProfile, slotWidth);
|
|
687
656
|
let size = endCoord - startCoord;
|
|
688
657
|
if (segMinWidth) {
|
|
689
658
|
size = Math.max(size, segMinWidth);
|
|
@@ -691,95 +660,58 @@ function computeSegHorizontals(seg, segMinWidth, dateEnv, tDateProfile, slotWidt
|
|
|
691
660
|
return { start: startCoord, size };
|
|
692
661
|
}
|
|
693
662
|
function computeFgSegPlacements(// mostly horizontals
|
|
694
|
-
segs, segHorizontals,
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
segEntries.push({
|
|
704
|
-
index: i,
|
|
705
|
-
seg,
|
|
706
|
-
span: {
|
|
707
|
-
start: hcoords.start,
|
|
708
|
-
end: hcoords.start + hcoords.size,
|
|
709
|
-
},
|
|
710
|
-
thickness: height,
|
|
711
|
-
});
|
|
663
|
+
segs, segHorizontals, // TODO: use Map
|
|
664
|
+
segHeights, // keyed by instanceId
|
|
665
|
+
hiddenGroupHeights, strictOrder, maxDepth) {
|
|
666
|
+
const segRanges = [];
|
|
667
|
+
// isn't it true that there will either be ALL hcoords or NONE? can optimize
|
|
668
|
+
for (const seg of segs) {
|
|
669
|
+
const hcoords = segHorizontals[internal_cjs.getEventKey(seg)];
|
|
670
|
+
if (hcoords) {
|
|
671
|
+
segRanges.push(Object.assign(Object.assign({}, seg), { start: hcoords.start, end: hcoords.start + hcoords.size }));
|
|
712
672
|
}
|
|
713
673
|
}
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
}
|
|
721
|
-
let
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
hierarchy.maxStackCnt = -1;
|
|
731
|
-
hierarchy.addSegs(hiddenGroupEntries);
|
|
732
|
-
let visibleRects = hierarchy.toRects();
|
|
733
|
-
let segTops = {};
|
|
734
|
-
let hiddenGroupTops = {};
|
|
735
|
-
for (let rect of visibleRects) {
|
|
736
|
-
const { seg, segGroup } = rect;
|
|
737
|
-
if (seg) { // regular seg
|
|
738
|
-
segTops[seg.eventRange.instance.instanceId] = rect.levelCoord;
|
|
739
|
-
}
|
|
740
|
-
else { // hiddenGroup
|
|
741
|
-
hiddenGroupTops[segGroup.key] = rect.levelCoord;
|
|
674
|
+
const hierarchy = new internal_cjs.SegHierarchy(segRanges, (seg) => segHeights.get(internal_cjs.getEventKey(seg)), strictOrder, undefined, // maxCoord
|
|
675
|
+
maxDepth);
|
|
676
|
+
const segTops = new Map();
|
|
677
|
+
hierarchy.traverseSegs((seg, segTop) => {
|
|
678
|
+
segTops.set(internal_cjs.getEventKey(seg), segTop);
|
|
679
|
+
});
|
|
680
|
+
const { hiddenSegs } = hierarchy;
|
|
681
|
+
let totalHeight = 0;
|
|
682
|
+
for (const segRange of segRanges) {
|
|
683
|
+
const segKey = internal_cjs.getEventKey(segRange);
|
|
684
|
+
const segHeight = segHeights.get(segKey);
|
|
685
|
+
const segTop = segTops.get(segKey);
|
|
686
|
+
if (segHeight != null) {
|
|
687
|
+
if (segTop != null) {
|
|
688
|
+
totalHeight = Math.max(totalHeight, segTop + segHeight);
|
|
689
|
+
}
|
|
742
690
|
}
|
|
743
691
|
}
|
|
692
|
+
const hiddenGroups = internal_cjs.groupIntersectingSegs(hiddenSegs);
|
|
693
|
+
const hiddenGroupTops = new Map();
|
|
694
|
+
// HACK for hiddenGroup findInsertion() call
|
|
695
|
+
hierarchy.strictOrder = true;
|
|
696
|
+
for (const hiddenGroup of hiddenGroups) {
|
|
697
|
+
const { levelCoord: top } = hierarchy.findInsertion(hiddenGroup, 0);
|
|
698
|
+
const hiddenGroupHeight = hiddenGroupHeights.get(hiddenGroup.key) || 0;
|
|
699
|
+
hiddenGroupTops.set(hiddenGroup.key, top);
|
|
700
|
+
totalHeight = Math.max(totalHeight, top + hiddenGroupHeight);
|
|
701
|
+
}
|
|
744
702
|
return [
|
|
745
703
|
segTops,
|
|
746
|
-
computeMaxBottom(segs, segTops, segHeights),
|
|
747
704
|
hiddenGroups,
|
|
748
705
|
hiddenGroupTops,
|
|
706
|
+
totalHeight,
|
|
749
707
|
];
|
|
750
708
|
}
|
|
751
|
-
function computeMaxBottom(segs, segTops, segHeights) {
|
|
752
|
-
let max = 0;
|
|
753
|
-
for (const seg of segs) {
|
|
754
|
-
const { instanceId } = seg.eventRange.instance;
|
|
755
|
-
const top = segTops[instanceId];
|
|
756
|
-
const height = segHeights.get(instanceId);
|
|
757
|
-
if (top != null && height != null) {
|
|
758
|
-
max = Math.max(max, top + height);
|
|
759
|
-
}
|
|
760
|
-
}
|
|
761
|
-
return max;
|
|
762
|
-
}
|
|
763
|
-
/*
|
|
764
|
-
TODO: converge with computeMaxBottom, but keys are different
|
|
765
|
-
*/
|
|
766
|
-
function computeMoreLinkMaxBottom(hiddenGroups, hiddenGroupTops, hiddenGroupHeights) {
|
|
767
|
-
let max = 0;
|
|
768
|
-
for (const hiddenGroup of hiddenGroups) {
|
|
769
|
-
const top = hiddenGroupTops[hiddenGroup.key];
|
|
770
|
-
const height = hiddenGroupHeights.get(hiddenGroup.key);
|
|
771
|
-
if (top != null && height != null) {
|
|
772
|
-
max = Math.max(max, top + height);
|
|
773
|
-
}
|
|
774
|
-
}
|
|
775
|
-
return max;
|
|
776
|
-
}
|
|
777
709
|
|
|
778
710
|
class TimelineLaneBg extends internal_cjs.BaseComponent {
|
|
779
711
|
render() {
|
|
780
712
|
let { props } = this;
|
|
781
713
|
let highlightSeg = [].concat(props.eventResizeSegs, props.dateSelectionSegs);
|
|
782
|
-
return (preact_cjs.createElement(
|
|
714
|
+
return (preact_cjs.createElement(preact_cjs.Fragment, null,
|
|
783
715
|
this.renderSegs(props.businessHourSegs || [], 'non-business'),
|
|
784
716
|
this.renderSegs(props.bgEventSegs || [], 'bg-event'),
|
|
785
717
|
this.renderSegs(highlightSeg, 'highlight')));
|
|
@@ -793,9 +725,8 @@ class TimelineLaneBg extends internal_cjs.BaseComponent {
|
|
|
793
725
|
let segHorizontal = computeSegHorizontals(seg, undefined, dateEnv, tDateProfile, slotWidth);
|
|
794
726
|
hStyle = horizontalsToCss(segHorizontal, isRtl);
|
|
795
727
|
}
|
|
796
|
-
return (preact_cjs.createElement("div", { key: internal_cjs.buildEventRangeKey(seg.eventRange), className: "fc-
|
|
797
|
-
preact_cjs.createElement(internal_cjs.BgEvent, Object.assign({ seg: seg }, internal_cjs.
|
|
798
|
-
internal_cjs.renderFill(fillType)));
|
|
728
|
+
return (preact_cjs.createElement("div", { key: internal_cjs.buildEventRangeKey(seg.eventRange), className: "fc-fill-y", style: hStyle }, fillType === 'bg-event' ?
|
|
729
|
+
preact_cjs.createElement(internal_cjs.BgEvent, Object.assign({ eventRange: seg.eventRange, isStart: seg.isStart, isEnd: seg.isEnd }, internal_cjs.getEventRangeMeta(seg.eventRange, todayRange, nowDate))) : (internal_cjs.renderFill(fillType))));
|
|
799
730
|
})));
|
|
800
731
|
}
|
|
801
732
|
}
|
|
@@ -811,8 +742,8 @@ class TimelineLaneSlicer extends internal_cjs.Slicer {
|
|
|
811
742
|
let slicedRange = internal_cjs.intersectRanges(normalRange, tDateProfile.normalizedRange);
|
|
812
743
|
if (slicedRange) {
|
|
813
744
|
segs.push({
|
|
814
|
-
|
|
815
|
-
|
|
745
|
+
startDate: slicedRange.start,
|
|
746
|
+
endDate: slicedRange.end,
|
|
816
747
|
isStart: slicedRange.start.valueOf() === normalRange.start.valueOf()
|
|
817
748
|
&& isValidDate(slicedRange.start, tDateProfile, dateProfile, dateProfileGenerator),
|
|
818
749
|
isEnd: slicedRange.end.valueOf() === normalRange.end.valueOf()
|
|
@@ -834,13 +765,8 @@ class TimelineEvent extends internal_cjs.BaseComponent {
|
|
|
834
765
|
render() {
|
|
835
766
|
let { props, context } = this;
|
|
836
767
|
let { options } = context;
|
|
837
|
-
return (preact_cjs.createElement(internal_cjs.StandardEvent, Object.assign({}, props, {
|
|
838
|
-
'fc-timeline-event',
|
|
839
|
-
'fc-h-event',
|
|
840
|
-
options.eventOverlap === false // TODO: fix bad default
|
|
841
|
-
? 'fc-timeline-event-spacious'
|
|
842
|
-
: ''
|
|
843
|
-
], defaultTimeFormat: DEFAULT_TIME_FORMAT, defaultDisplayEventTime: !props.isTimeScale })));
|
|
768
|
+
return (preact_cjs.createElement(internal_cjs.StandardEvent, Object.assign({}, props, { className: internal_cjs.joinClassNames('fc-timeline-event', options.eventOverlap === false // TODO: fix bad default
|
|
769
|
+
&& 'fc-timeline-event-spacious', 'fc-h-event'), defaultTimeFormat: DEFAULT_TIME_FORMAT, defaultDisplayEventTime: !props.isTimeScale })));
|
|
844
770
|
}
|
|
845
771
|
}
|
|
846
772
|
|
|
@@ -848,12 +774,13 @@ class TimelineLaneMoreLink extends internal_cjs.BaseComponent {
|
|
|
848
774
|
render() {
|
|
849
775
|
let { props } = this;
|
|
850
776
|
let { hiddenSegs, resourceId, forcedInvisibleMap } = props;
|
|
851
|
-
let
|
|
852
|
-
return (preact_cjs.createElement(internal_cjs.MoreLinkContainer, {
|
|
853
|
-
let
|
|
777
|
+
let dateSpanProps = resourceId ? { resourceId } : {};
|
|
778
|
+
return (preact_cjs.createElement(internal_cjs.MoreLinkContainer, { className: 'fc-timeline-more-link', allDayDate: null, segs: hiddenSegs, hiddenSegs: hiddenSegs, dateProfile: props.dateProfile, todayRange: props.todayRange, dateSpanProps: dateSpanProps, popoverContent: () => (preact_cjs.createElement(preact_cjs.Fragment, null, hiddenSegs.map((seg) => {
|
|
779
|
+
let { eventRange } = seg;
|
|
780
|
+
let instanceId = eventRange.instance.instanceId;
|
|
854
781
|
return (preact_cjs.createElement("div", { key: instanceId, style: { visibility: forcedInvisibleMap[instanceId] ? 'hidden' : '' } },
|
|
855
|
-
preact_cjs.createElement(TimelineEvent, Object.assign({ isTimeScale: props.isTimeScale, seg: seg, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: instanceId === props.eventSelection }, internal_cjs.
|
|
856
|
-
}))) }, (InnerContent) => (preact_cjs.createElement(InnerContent, {
|
|
782
|
+
preact_cjs.createElement(TimelineEvent, Object.assign({ isTimeScale: props.isTimeScale, eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: instanceId === props.eventSelection }, internal_cjs.getEventRangeMeta(eventRange, props.todayRange, props.nowDate)))));
|
|
783
|
+
}))) }, (InnerContent) => (preact_cjs.createElement(InnerContent, { tag: "div", className: 'fc-timeline-more-link-inner fc-sticky-s' }))));
|
|
857
784
|
}
|
|
858
785
|
}
|
|
859
786
|
|
|
@@ -872,12 +799,13 @@ class TimelineEventHarness extends preact_cjs.Component {
|
|
|
872
799
|
}
|
|
873
800
|
componentDidMount() {
|
|
874
801
|
const rootEl = this.rootElRef.current; // TODO: make dynamic with useEffect
|
|
875
|
-
this.
|
|
802
|
+
this.disconnectHeight = internal_cjs.watchHeight(rootEl, (height) => {
|
|
876
803
|
internal_cjs.setRef(this.props.heightRef, height);
|
|
877
804
|
});
|
|
878
805
|
}
|
|
879
806
|
componentWillUnmount() {
|
|
880
|
-
this.
|
|
807
|
+
this.disconnectHeight();
|
|
808
|
+
internal_cjs.setRef(this.props.heightRef, null);
|
|
881
809
|
}
|
|
882
810
|
}
|
|
883
811
|
|
|
@@ -909,7 +837,7 @@ class TimelineLane extends internal_cjs.BaseComponent {
|
|
|
909
837
|
TODO: lots of memoization needed here!
|
|
910
838
|
*/
|
|
911
839
|
render() {
|
|
912
|
-
let { props, context, segHeightRefMap } = this;
|
|
840
|
+
let { props, context, segHeightRefMap, moreLinkHeightRefMap } = this;
|
|
913
841
|
let { options } = context;
|
|
914
842
|
let { dateProfile, tDateProfile } = props;
|
|
915
843
|
let slicedProps = this.slicer.sliceProps(props, dateProfile, tDateProfile.isTimeScale ? null : props.nextDayThreshold, context, // wish we didn't have to pass in the rest of the args...
|
|
@@ -921,10 +849,7 @@ class TimelineLane extends internal_cjs.BaseComponent {
|
|
|
921
849
|
let fgSegHorizontals = props.slotWidth != null
|
|
922
850
|
? computeManySegHorizontals(fgSegs, options.eventMinWidth, context.dateEnv, tDateProfile, props.slotWidth)
|
|
923
851
|
: {};
|
|
924
|
-
let [fgSegTops,
|
|
925
|
-
fgSegs, fgSegHorizontals, segHeightRefMap.current, options.eventOrderStrict, options.eventMaxStack);
|
|
926
|
-
let moreLinksBottom = computeMoreLinkMaxBottom(hiddenGroups, hiddenGroupTops, this.moreLinkHeightRefMap.current);
|
|
927
|
-
let innerHeight = Math.max(moreLinksBottom, fgSegsBottom);
|
|
852
|
+
let [fgSegTops, hiddenGroups, hiddenGroupTops, totalHeight] = computeFgSegPlacements(fgSegs, fgSegHorizontals, segHeightRefMap.current, moreLinkHeightRefMap.current, options.eventOrderStrict, options.eventMaxStack);
|
|
928
853
|
let forcedInvisibleMap = // TODO: more convenient/DRY
|
|
929
854
|
(slicedProps.eventDrag ? slicedProps.eventDrag.affectedInstances : null) ||
|
|
930
855
|
(slicedProps.eventResize ? slicedProps.eventResize.affectedInstances : null) ||
|
|
@@ -935,39 +860,38 @@ class TimelineLane extends internal_cjs.BaseComponent {
|
|
|
935
860
|
bgEventSegs: slicedProps.bgEventSegs, businessHourSegs: slicedProps.businessHourSegs, dateSelectionSegs: slicedProps.dateSelectionSegs, eventResizeSegs: slicedProps.eventResize ? slicedProps.eventResize.segs : [] /* bad new empty array? */,
|
|
936
861
|
// dimensions
|
|
937
862
|
slotWidth: props.slotWidth }),
|
|
938
|
-
preact_cjs.createElement("div", { className:
|
|
939
|
-
'fc-timeline-events'
|
|
940
|
-
'fc-content-box',
|
|
941
|
-
options.eventOverlap === false // TODO: fix bad default
|
|
942
|
-
? 'fc-timeline-events-overlap-disabled'
|
|
943
|
-
: 'fc-timeline-events-overlap-enabled'
|
|
944
|
-
].join(' '), style: { height: innerHeight } },
|
|
863
|
+
preact_cjs.createElement("div", { className: internal_cjs.joinClassNames('fc-timeline-events', options.eventOverlap === false // TODO: fix bad default
|
|
864
|
+
? 'fc-timeline-events-overlap-disabled'
|
|
865
|
+
: 'fc-timeline-events-overlap-enabled', 'fc-content-box'), style: { height: totalHeight } },
|
|
945
866
|
this.renderFgSegs(fgSegs, fgSegHorizontals, fgSegTops, forcedInvisibleMap, hiddenGroups, hiddenGroupTops, false, // isDragging
|
|
946
867
|
false, // isResizing
|
|
947
868
|
false),
|
|
948
869
|
this.renderFgSegs(mirrorSegs, props.slotWidth // TODO: memoize
|
|
949
870
|
? computeManySegHorizontals(mirrorSegs, options.eventMinWidth, context.dateEnv, tDateProfile, props.slotWidth)
|
|
950
871
|
: {}, fgSegTops, {}, // forcedInvisibleMap
|
|
951
|
-
[],
|
|
872
|
+
[], // hiddenGroups
|
|
873
|
+
new Map(), // hiddenGroupTops
|
|
874
|
+
Boolean(slicedProps.eventDrag), Boolean(slicedProps.eventResize), false))));
|
|
952
875
|
}
|
|
953
876
|
renderFgSegs(segs, segHorizontals, segTops, forcedInvisibleMap, hiddenGroups, hiddenGroupTops, isDragging, isResizing, isDateSelecting) {
|
|
954
877
|
let { props, context, segHeightRefMap, moreLinkHeightRefMap } = this;
|
|
955
878
|
let isMirror = isDragging || isResizing || isDateSelecting;
|
|
956
879
|
return (preact_cjs.createElement(preact_cjs.Fragment, null,
|
|
957
880
|
segs.map((seg) => {
|
|
958
|
-
const {
|
|
959
|
-
const
|
|
881
|
+
const { eventRange } = seg;
|
|
882
|
+
const { instanceId } = eventRange.instance;
|
|
883
|
+
const segTop = segTops.get(instanceId);
|
|
960
884
|
const segHorizontal = segHorizontals[instanceId];
|
|
961
885
|
const isVisible = isMirror ||
|
|
962
886
|
(segHorizontal && segTop != null && !forcedInvisibleMap[instanceId]);
|
|
963
887
|
return (preact_cjs.createElement(TimelineEventHarness, { key: instanceId, style: Object.assign({ visibility: isVisible ? '' : 'hidden', top: segTop || 0 }, horizontalsToCss(segHorizontal, context.isRtl)), heightRef: isMirror ? undefined : segHeightRefMap.createRef(instanceId) },
|
|
964
|
-
preact_cjs.createElement(TimelineEvent, Object.assign({ isTimeScale: props.tDateProfile.isTimeScale, seg: seg, isDragging: isDragging, isResizing: isResizing, isDateSelecting: isDateSelecting, isSelected: instanceId === props.eventSelection /* TODO: bad for mirror? */ }, internal_cjs.
|
|
888
|
+
preact_cjs.createElement(TimelineEvent, Object.assign({ isTimeScale: props.tDateProfile.isTimeScale, eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: isDragging, isResizing: isResizing, isDateSelecting: isDateSelecting, isSelected: instanceId === props.eventSelection /* TODO: bad for mirror? */ }, internal_cjs.getEventRangeMeta(eventRange, props.todayRange, props.nowDate)))));
|
|
965
889
|
}),
|
|
966
|
-
hiddenGroups.map((hiddenGroup) => (preact_cjs.createElement(TimelineEventHarness, { key: hiddenGroup.key, style: Object.assign({ top: hiddenGroupTops
|
|
967
|
-
start: hiddenGroup.
|
|
968
|
-
size: hiddenGroup.
|
|
890
|
+
hiddenGroups.map((hiddenGroup) => (preact_cjs.createElement(TimelineEventHarness, { key: hiddenGroup.key, style: Object.assign({ top: hiddenGroupTops.get(hiddenGroup.key) || 0 }, horizontalsToCss({
|
|
891
|
+
start: hiddenGroup.start,
|
|
892
|
+
size: hiddenGroup.end - hiddenGroup.start
|
|
969
893
|
}, context.isRtl)), heightRef: moreLinkHeightRefMap.createRef(hiddenGroup.key) },
|
|
970
|
-
preact_cjs.createElement(TimelineLaneMoreLink, { hiddenSegs: hiddenGroup.segs
|
|
894
|
+
preact_cjs.createElement(TimelineLaneMoreLink, { hiddenSegs: hiddenGroup.segs, dateProfile: props.dateProfile, nowDate: props.nowDate, todayRange: props.todayRange, isTimeScale: props.tDateProfile.isTimeScale, eventSelection: props.eventSelection, resourceId: props.resourceId, forcedInvisibleMap: forcedInvisibleMap }))))));
|
|
971
895
|
}
|
|
972
896
|
}
|
|
973
897
|
|
|
@@ -979,7 +903,6 @@ class TimelineHeaderCell extends internal_cjs.BaseComponent {
|
|
|
979
903
|
this.buildCellNavLinkAttrs = internal_cjs.memoize(buildCellNavLinkAttrs);
|
|
980
904
|
// ref
|
|
981
905
|
this.innerElRef = preact_cjs.createRef();
|
|
982
|
-
// TODO: unset width/height ref on unmount?
|
|
983
906
|
}
|
|
984
907
|
render() {
|
|
985
908
|
let { props, context } = this;
|
|
@@ -996,36 +919,21 @@ class TimelineHeaderCell extends internal_cjs.BaseComponent {
|
|
|
996
919
|
dateEnv: context.dateEnv,
|
|
997
920
|
viewApi: context.viewApi,
|
|
998
921
|
});
|
|
999
|
-
return (preact_cjs.createElement(internal_cjs.ContentContainer, {
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
'fc-flex-column',
|
|
1006
|
-
'fc-justify-center',
|
|
1007
|
-
props.isCentered ? 'fc-align-center' : 'fc-align-start',
|
|
1008
|
-
...( // TODO: so slot classnames for week/month/bigger. see note above about rowUnit
|
|
1009
|
-
cell.rowUnit === 'time' ?
|
|
1010
|
-
internal_cjs.getSlotClassNames(dateMeta, context.theme) :
|
|
1011
|
-
internal_cjs.getDayClassNames(dateMeta, context.theme)),
|
|
1012
|
-
], elAttrs: {
|
|
922
|
+
return (preact_cjs.createElement(internal_cjs.ContentContainer, { tag: "div", className: internal_cjs.joinClassNames('fc-timeline-slot-label fc-timeline-slot', cell.isWeekStart && 'fc-timeline-slot-em', // TODO: document this semantic className
|
|
923
|
+
'fc-header-cell fc-cell fc-flex-col fc-justify-center', props.borderStart && 'fc-border-s', props.isCentered ? 'fc-align-center' : 'fc-align-start',
|
|
924
|
+
// TODO: so slot classnames for week/month/bigger. see note above about rowUnit
|
|
925
|
+
cell.rowUnit === 'time' ?
|
|
926
|
+
internal_cjs.getSlotClassName(dateMeta) :
|
|
927
|
+
internal_cjs.getDayClassName(dateMeta)), attrs: {
|
|
1013
928
|
'data-date': dateEnv.formatIso(cell.date, {
|
|
1014
929
|
omitTime: !tDateProfile.isTimeScale,
|
|
1015
930
|
omitTimeZoneOffset: true,
|
|
1016
931
|
}),
|
|
1017
|
-
},
|
|
932
|
+
}, style: {
|
|
1018
933
|
width: props.slotWidth != null
|
|
1019
934
|
? props.slotWidth * cell.colspan
|
|
1020
935
|
: undefined,
|
|
1021
|
-
}, renderProps: renderProps, generatorName: "slotLabelContent", customGenerator: options.slotLabelContent, defaultGenerator: renderInnerContent, classNameGenerator: options.slotLabelClassNames, didMount: options.slotLabelDidMount, willUnmount: options.slotLabelWillUnmount }, (InnerContent) => (preact_cjs.createElement(
|
|
1022
|
-
'fc-flex-column',
|
|
1023
|
-
props.isSticky ? 'fc-sticky-x' : '',
|
|
1024
|
-
].join(' ') },
|
|
1025
|
-
preact_cjs.createElement(InnerContent, { elTag: "a", elClasses: [
|
|
1026
|
-
'fc-cell-inner',
|
|
1027
|
-
'fc-padding-md',
|
|
1028
|
-
], elAttrs: this.buildCellNavLinkAttrs(context, cell.date, cell.rowUnit) })))));
|
|
936
|
+
}, renderProps: renderProps, generatorName: "slotLabelContent", customGenerator: options.slotLabelContent, defaultGenerator: renderInnerContent, classNameGenerator: options.slotLabelClassNames, didMount: options.slotLabelDidMount, willUnmount: options.slotLabelWillUnmount }, (InnerContent) => (preact_cjs.createElement(InnerContent, { tag: "a", attrs: this.buildCellNavLinkAttrs(context, cell.date, cell.rowUnit), className: internal_cjs.joinClassNames('fc-cell-inner fc-padding-md', props.isSticky && 'fc-sticky-s'), elRef: this.innerElRef }))));
|
|
1029
937
|
}
|
|
1030
938
|
componentDidMount() {
|
|
1031
939
|
const { props } = this;
|
|
@@ -1041,7 +949,10 @@ class TimelineHeaderCell extends internal_cjs.BaseComponent {
|
|
|
1041
949
|
});
|
|
1042
950
|
}
|
|
1043
951
|
componentWillUnmount() {
|
|
952
|
+
const { props } = this;
|
|
1044
953
|
this.detachSize();
|
|
954
|
+
internal_cjs.setRef(props.innerWidthRef, null);
|
|
955
|
+
internal_cjs.setRef(props.innerHeightRef, null);
|
|
1045
956
|
}
|
|
1046
957
|
}
|
|
1047
958
|
// Utils
|
|
@@ -1096,18 +1007,24 @@ class TimelineHeaderRow extends internal_cjs.BaseComponent {
|
|
|
1096
1007
|
const { props, innerWidthRefMap, innerHeightRefMap } = this;
|
|
1097
1008
|
const isCentered = !(props.tDateProfile.isTimeScale && props.isLastRow);
|
|
1098
1009
|
const isSticky = !props.isLastRow;
|
|
1099
|
-
return (preact_cjs.createElement("div", { className: 'fc-row',
|
|
1010
|
+
return (preact_cjs.createElement("div", { className: internal_cjs.joinClassNames('fc-flex-row fc-grow', // TODO: move fc-grow to parent?
|
|
1011
|
+
!props.isLastRow && 'fc-border-b') }, props.cells.map((cell, cellI) => {
|
|
1100
1012
|
// TODO: make this part of the cell obj?
|
|
1101
1013
|
// TODO: rowUnit seems wrong sometimes. says 'month' when it should be day
|
|
1102
1014
|
// TODO: rowUnit is relevant to whole row. put it on a row object, not the cells
|
|
1015
|
+
// TODO: use rowUnit to key the Row itself?
|
|
1103
1016
|
const key = cell.rowUnit + ':' + cell.date.toISOString();
|
|
1104
|
-
return (preact_cjs.createElement(TimelineHeaderCell, { key: key, cell: cell, rowLevel: props.rowLevel, dateProfile: props.dateProfile, tDateProfile: props.tDateProfile, todayRange: props.todayRange, nowDate: props.nowDate, isCentered: isCentered, isSticky: isSticky,
|
|
1017
|
+
return (preact_cjs.createElement(TimelineHeaderCell, { key: key, cell: cell, rowLevel: props.rowLevel, dateProfile: props.dateProfile, tDateProfile: props.tDateProfile, todayRange: props.todayRange, nowDate: props.nowDate, isCentered: isCentered, isSticky: isSticky, borderStart: Boolean(cellI),
|
|
1105
1018
|
// refs
|
|
1106
1019
|
innerWidthRef: innerWidthRefMap.createRef(key), innerHeightRef: innerHeightRefMap.createRef(key),
|
|
1107
1020
|
// dimensions
|
|
1108
1021
|
slotWidth: props.slotWidth }));
|
|
1109
1022
|
})));
|
|
1110
1023
|
}
|
|
1024
|
+
componentWillUnmount() {
|
|
1025
|
+
internal_cjs.setRef(this.props.innerWidthRef, null);
|
|
1026
|
+
internal_cjs.setRef(this.props.innerHeighRef, null);
|
|
1027
|
+
}
|
|
1111
1028
|
}
|
|
1112
1029
|
|
|
1113
1030
|
class TimelineNowIndicatorLine extends internal_cjs.BaseComponent {
|
|
@@ -1115,7 +1032,7 @@ class TimelineNowIndicatorLine extends internal_cjs.BaseComponent {
|
|
|
1115
1032
|
const { props, context } = this;
|
|
1116
1033
|
return (preact_cjs.createElement("div", { className: "fc-timeline-now-indicator-container" },
|
|
1117
1034
|
preact_cjs.createElement(internal_cjs.NowIndicatorContainer // TODO: make separate component?
|
|
1118
|
-
, {
|
|
1035
|
+
, { className: 'fc-timeline-now-indicator-line', style: props.slotWidth != null
|
|
1119
1036
|
? horizontalCoordToCss(dateToCoord(props.nowDate, context.dateEnv, props.tDateProfile, props.slotWidth), context.isRtl)
|
|
1120
1037
|
: {}, isAxis: false, date: props.nowDate })));
|
|
1121
1038
|
}
|
|
@@ -1125,7 +1042,7 @@ class TimelineNowIndicatorArrow extends internal_cjs.BaseComponent {
|
|
|
1125
1042
|
render() {
|
|
1126
1043
|
const { props, context } = this;
|
|
1127
1044
|
return (preact_cjs.createElement("div", { className: "fc-timeline-now-indicator-container" },
|
|
1128
|
-
preact_cjs.createElement(internal_cjs.NowIndicatorContainer, {
|
|
1045
|
+
preact_cjs.createElement(internal_cjs.NowIndicatorContainer, { className: 'fc-timeline-now-indicator-arrow', style: props.slotWidth != null
|
|
1129
1046
|
? horizontalCoordToCss(dateToCoord(props.nowDate, context.dateEnv, props.tDateProfile, props.slotWidth), context.isRtl)
|
|
1130
1047
|
: {}, isAxis: true, date: props.nowDate })));
|
|
1131
1048
|
}
|
|
@@ -1141,48 +1058,50 @@ class TimelineView extends internal_cjs.DateComponent {
|
|
|
1141
1058
|
this.headerScrollerRef = preact_cjs.createRef();
|
|
1142
1059
|
this.bodyScrollerRef = preact_cjs.createRef();
|
|
1143
1060
|
this.footerScrollerRef = preact_cjs.createRef();
|
|
1061
|
+
this.headerRowInnerWidthMap = new internal_cjs.RefMap(() => {
|
|
1062
|
+
internal_cjs.afterSize(this.handleSlotInnerWidths);
|
|
1063
|
+
});
|
|
1064
|
+
this.scrollTime = null;
|
|
1144
1065
|
// Sizing
|
|
1145
1066
|
// -----------------------------------------------------------------------------------------------
|
|
1146
|
-
this.handleHeaderSlotInnerWidth = (innerWidth) => {
|
|
1147
|
-
this.headerSlotInnerWidth = innerWidth;
|
|
1148
|
-
internal_cjs.afterSize(this.handleSlotInnerWidths);
|
|
1149
|
-
};
|
|
1150
1067
|
this.handleBodySlotInnerWidth = (innerWidth) => {
|
|
1151
1068
|
this.bodySlotInnerWidth = innerWidth;
|
|
1152
1069
|
internal_cjs.afterSize(this.handleSlotInnerWidths);
|
|
1153
1070
|
};
|
|
1154
1071
|
this.handleSlotInnerWidths = () => {
|
|
1155
1072
|
const { state } = this;
|
|
1156
|
-
const slotInnerWidth = Math.max(this.
|
|
1073
|
+
const slotInnerWidth = Math.max(this.headerRowInnerWidthMap.current.get(this.tDateProfile.cellRows.length - 1) || 0, this.bodySlotInnerWidth);
|
|
1157
1074
|
if (state.slotInnerWidth !== slotInnerWidth) {
|
|
1158
1075
|
this.setState({ slotInnerWidth });
|
|
1159
1076
|
}
|
|
1160
1077
|
};
|
|
1161
|
-
this.
|
|
1078
|
+
this.handleClientWidth = (clientWidth) => {
|
|
1162
1079
|
this.setState({
|
|
1163
|
-
|
|
1080
|
+
clientWidth,
|
|
1164
1081
|
});
|
|
1165
1082
|
};
|
|
1166
|
-
this.
|
|
1083
|
+
this.handleEndScrollbarWidth = (endScrollbarWidth) => {
|
|
1167
1084
|
this.setState({
|
|
1168
|
-
|
|
1085
|
+
endScrollbarWidth
|
|
1169
1086
|
});
|
|
1170
1087
|
};
|
|
1171
|
-
this.
|
|
1172
|
-
this.
|
|
1173
|
-
|
|
1174
|
-
});
|
|
1088
|
+
this.handleTimeScroll = (scrollTime) => {
|
|
1089
|
+
this.scrollTime = scrollTime;
|
|
1090
|
+
this.updateScroll();
|
|
1175
1091
|
};
|
|
1176
|
-
this.
|
|
1177
|
-
const { props, context, tDateProfile, slotWidth } = this;
|
|
1178
|
-
if (slotWidth != null) {
|
|
1179
|
-
|
|
1180
|
-
|
|
1092
|
+
this.updateScroll = () => {
|
|
1093
|
+
const { props, context, tDateProfile, scrollTime, slotWidth } = this;
|
|
1094
|
+
if (scrollTime != null && slotWidth != null) {
|
|
1095
|
+
let x = timeToCoord(scrollTime, context.dateEnv, props.dateProfile, tDateProfile, slotWidth);
|
|
1096
|
+
if (x) {
|
|
1097
|
+
x += 1; // overcome border. TODO: DRY this up
|
|
1098
|
+
}
|
|
1181
1099
|
this.syncedScroller.scrollTo({ x });
|
|
1182
|
-
return true;
|
|
1183
1100
|
}
|
|
1184
|
-
|
|
1185
|
-
|
|
1101
|
+
};
|
|
1102
|
+
this.clearScroll = () => {
|
|
1103
|
+
this.scrollTime = null;
|
|
1104
|
+
};
|
|
1186
1105
|
// Hit System
|
|
1187
1106
|
// -----------------------------------------------------------------------------------------------
|
|
1188
1107
|
this.handeBodyEl = (el) => {
|
|
@@ -1208,44 +1127,30 @@ class TimelineView extends internal_cjs.DateComponent {
|
|
|
1208
1127
|
const stickyFooterScrollbar = !props.forPrint && internal_cjs.getStickyFooterScrollbar(options);
|
|
1209
1128
|
/* table positions */
|
|
1210
1129
|
const [canvasWidth, slotWidth] = this.computeSlotWidth(tDateProfile.slotCnt, tDateProfile.slotsPerLabel, options.slotMinWidth, state.slotInnerWidth, // is ACTUALLY the label width. rename?
|
|
1211
|
-
state.
|
|
1130
|
+
state.clientWidth);
|
|
1212
1131
|
this.slotWidth = slotWidth;
|
|
1213
1132
|
return (preact_cjs.createElement(internal_cjs.NowTimer, { unit: timerUnit }, (nowDate, todayRange) => {
|
|
1214
1133
|
const enableNowIndicator = // TODO: DRY
|
|
1215
1134
|
options.nowIndicator &&
|
|
1216
1135
|
slotWidth != null &&
|
|
1217
1136
|
internal_cjs.rangeContainsMarker(props.dateProfile.currentRange, nowDate);
|
|
1218
|
-
return (preact_cjs.createElement(internal_cjs.ViewContainer, { viewSpec: context.viewSpec,
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
'fc-
|
|
1226
|
-
|
|
1227
|
-
|
|
1228
|
-
preact_cjs.createElement("div", { className: 'fc-rel fc-content-box' // origin for now-indicator
|
|
1229
|
-
, style: {
|
|
1230
|
-
width: canvasWidth,
|
|
1231
|
-
paddingLeft: state.leftScrollbarWidth,
|
|
1232
|
-
paddingRight: state.rightScrollbarWidth,
|
|
1233
|
-
} },
|
|
1234
|
-
preact_cjs.createElement("div", null, cellRows.map((cells, rowLevel) => {
|
|
1137
|
+
return (preact_cjs.createElement(internal_cjs.ViewContainer, { viewSpec: context.viewSpec, className: internal_cjs.joinClassNames('fc-timeline fc-border',
|
|
1138
|
+
// HACK for Safari print-mode, where fc-scroller-no-bars won't take effect for
|
|
1139
|
+
// the below Scrollers if they have liquid flex height
|
|
1140
|
+
!props.forPrint && 'fc-flex-col') },
|
|
1141
|
+
preact_cjs.createElement(internal_cjs.Scroller, { horizontal: true, hideScrollbars: true, className: internal_cjs.joinClassNames('fc-timeline-header fc-flex-row fc-border-b', stickyHeaderDates && 'fc-table-header-sticky'), ref: this.headerScrollerRef },
|
|
1142
|
+
preact_cjs.createElement("div", {
|
|
1143
|
+
// TODO: DRY
|
|
1144
|
+
className: internal_cjs.joinClassNames('fc-rel', // origin for now-indicator
|
|
1145
|
+
canvasWidth == null && 'fc-liquid'), style: { width: canvasWidth } },
|
|
1146
|
+
cellRows.map((cells, rowLevel) => {
|
|
1235
1147
|
const isLast = rowLevel === cellRows.length - 1;
|
|
1236
|
-
return (preact_cjs.createElement(TimelineHeaderRow, { key: rowLevel, dateProfile: props.dateProfile, tDateProfile: tDateProfile, nowDate: nowDate, todayRange: todayRange, rowLevel: rowLevel, isLastRow: isLast, cells: cells, slotWidth: slotWidth, innerWidthRef:
|
|
1237
|
-
})
|
|
1238
|
-
enableNowIndicator && (
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
'fc-timeline-body',
|
|
1243
|
-
'fc-rowgroup',
|
|
1244
|
-
verticalScrolling ? 'fc-liquid' : '',
|
|
1245
|
-
], ref: this.bodyScrollerRef, widthRef: this.handleScrollerWidth, leftScrollbarWidthRef: this.handleLeftScrollbarWidth, rightScrollbarWidthRef: this.handleRightScrollbarWidth },
|
|
1246
|
-
preact_cjs.createElement("div", { className: "fc-rel fc-grow", style: {
|
|
1247
|
-
width: canvasWidth,
|
|
1248
|
-
}, ref: this.handeBodyEl },
|
|
1148
|
+
return (preact_cjs.createElement(TimelineHeaderRow, { key: rowLevel, dateProfile: props.dateProfile, tDateProfile: tDateProfile, nowDate: nowDate, todayRange: todayRange, rowLevel: rowLevel, isLastRow: isLast, cells: cells, slotWidth: slotWidth, innerWidthRef: this.headerRowInnerWidthMap.createRef(rowLevel) }));
|
|
1149
|
+
}),
|
|
1150
|
+
enableNowIndicator && (preact_cjs.createElement(TimelineNowIndicatorArrow, { tDateProfile: tDateProfile, nowDate: nowDate, slotWidth: slotWidth }))),
|
|
1151
|
+
Boolean(state.endScrollbarWidth) && (preact_cjs.createElement("div", { className: 'fc-border-s fc-filler', style: { minWidth: state.endScrollbarWidth } }))),
|
|
1152
|
+
preact_cjs.createElement(internal_cjs.Scroller, { vertical: verticalScrolling, horizontal: true, hideScrollbars: props.forPrint, className: internal_cjs.joinClassNames('fc-timeline-body fc-flex-col', verticalScrolling && 'fc-liquid'), ref: this.bodyScrollerRef, clientWidthRef: this.handleClientWidth, endScrollbarWidthRef: this.handleEndScrollbarWidth },
|
|
1153
|
+
preact_cjs.createElement("div", { className: "fc-rel fc-grow", style: { width: canvasWidth }, ref: this.handeBodyEl },
|
|
1249
1154
|
preact_cjs.createElement(TimelineSlats, { dateProfile: props.dateProfile, tDateProfile: tDateProfile, nowDate: nowDate, todayRange: todayRange,
|
|
1250
1155
|
// ref
|
|
1251
1156
|
innerWidthRef: this.handleBodySlotInnerWidth,
|
|
@@ -1260,27 +1165,26 @@ class TimelineView extends internal_cjs.DateComponent {
|
|
|
1260
1165
|
// Lifecycle
|
|
1261
1166
|
// -----------------------------------------------------------------------------------------------
|
|
1262
1167
|
componentDidMount() {
|
|
1263
|
-
|
|
1264
|
-
const { options } = context;
|
|
1265
|
-
const ScrollerSyncer = internal_cjs.getScrollerSyncerClass(this.context.pluginHooks);
|
|
1266
|
-
this.syncedScroller = new ScrollerSyncer(true); // horizontal=true
|
|
1168
|
+
this.syncedScroller = new internal_cjs$1.ScrollerSyncer(true); // horizontal=true
|
|
1267
1169
|
this.updateSyncedScroller();
|
|
1268
|
-
|
|
1269
|
-
this.
|
|
1170
|
+
this.resetScroll();
|
|
1171
|
+
this.context.emitter.on('_timeScrollRequest', this.handleTimeScroll);
|
|
1172
|
+
this.syncedScroller.addScrollEndListener(this.clearScroll);
|
|
1270
1173
|
}
|
|
1271
1174
|
componentDidUpdate(prevProps) {
|
|
1272
|
-
const { options } = this.context;
|
|
1273
1175
|
this.updateSyncedScroller();
|
|
1274
|
-
if (prevProps.dateProfile !== this.props.dateProfile && options.scrollTimeReset) {
|
|
1275
|
-
this.
|
|
1176
|
+
if (prevProps.dateProfile !== this.props.dateProfile && this.context.options.scrollTimeReset) {
|
|
1177
|
+
this.resetScroll();
|
|
1276
1178
|
}
|
|
1277
1179
|
else {
|
|
1278
|
-
|
|
1180
|
+
// TODO: inefficient to update so often
|
|
1181
|
+
this.updateScroll();
|
|
1279
1182
|
}
|
|
1280
1183
|
}
|
|
1281
1184
|
componentWillUnmount() {
|
|
1282
1185
|
this.syncedScroller.destroy();
|
|
1283
|
-
this.context.emitter.off('_timeScrollRequest', this.
|
|
1186
|
+
this.context.emitter.off('_timeScrollRequest', this.handleTimeScroll);
|
|
1187
|
+
this.syncedScroller.removeScrollEndListener(this.clearScroll);
|
|
1284
1188
|
}
|
|
1285
1189
|
// Scrolling
|
|
1286
1190
|
// -----------------------------------------------------------------------------------------------
|
|
@@ -1289,7 +1193,10 @@ class TimelineView extends internal_cjs.DateComponent {
|
|
|
1289
1193
|
this.headerScrollerRef.current,
|
|
1290
1194
|
this.bodyScrollerRef.current,
|
|
1291
1195
|
this.footerScrollerRef.current
|
|
1292
|
-
]
|
|
1196
|
+
]);
|
|
1197
|
+
}
|
|
1198
|
+
resetScroll() {
|
|
1199
|
+
this.handleTimeScroll(this.context.options.scrollTime);
|
|
1293
1200
|
}
|
|
1294
1201
|
queryHit(positionLeft, positionTop, elWidth, elHeight) {
|
|
1295
1202
|
const { props, context, tDateProfile, slotWidth } = this;
|
|
@@ -1336,6 +1243,9 @@ class TimelineView extends internal_cjs.DateComponent {
|
|
|
1336
1243
|
}
|
|
1337
1244
|
}
|
|
1338
1245
|
|
|
1246
|
+
var css_248z = ".fc-timeline-slots{z-index:1}.fc-timeline-events{position:relative;z-index:2}.fc-timeline-slot-minor{border-style:dotted}.fc-timeline-events-overlap-enabled{padding-bottom:10px}.fc-timeline-event{border-radius:0;font-size:var(--fc-small-font-size);margin-bottom:1px}.fc-direction-ltr .fc-timeline-event.fc-event-end{margin-right:1px}.fc-direction-rtl .fc-timeline-event.fc-event-end{margin-left:1px}.fc-timeline-event .fc-event-inner{align-items:center;display:flex;flex-direction:row;padding:2px 1px}.fc-timeline-event-spacious .fc-event-inner{padding-bottom:5px;padding-top:5px}.fc-timeline-event .fc-event-time{font-weight:700}.fc-timeline-event .fc-event-time,.fc-timeline-event .fc-event-title{padding:0 2px}.fc-timeline-event:not(.fc-event-end) .fc-event-inner:after,.fc-timeline-event:not(.fc-event-start) .fc-event-inner:before{border-color:transparent #000;border-style:solid;border-width:5px;content:\"\";flex-grow:0;flex-shrink:0;height:0;margin:0 1px;opacity:.5;width:0}.fc-direction-ltr .fc-timeline-event:not(.fc-event-start) .fc-event-inner:before,.fc-direction-rtl .fc-timeline-event:not(.fc-event-end) .fc-event-inner:after{border-left:0}.fc-direction-ltr .fc-timeline-event:not(.fc-event-end) .fc-event-inner:after,.fc-direction-rtl .fc-timeline-event:not(.fc-event-start) .fc-event-inner:before{border-right:0}.fc-timeline-more-link{align-items:flex-start;background:var(--fc-more-link-bg-color);color:var(--fc-more-link-text-color);cursor:pointer;display:flex;flex-direction:column;font-size:var(--fc-small-font-size);padding:1px}.fc-direction-ltr .fc-timeline-more-link{margin-right:1px}.fc-direction-rtl .fc-timeline-more-link{margin-left:1px}.fc-timeline-more-link-inner{padding:2px}.fc-timeline-now-indicator-container{bottom:0;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;z-index:4}.fc-timeline-now-indicator-arrow{border-bottom-style:solid;border-bottom-width:0;border-color:var(--fc-now-indicator-color);border-left:5px solid transparent;border-right:5px solid transparent;border-top-style:solid;border-top-width:6px;height:0;margin:0 -5px;position:absolute;top:0;width:0}.fc-timeline-now-indicator-line{border-left:1px solid var(--fc-now-indicator-color);bottom:0;position:absolute;top:0}";
|
|
1247
|
+
internal_cjs.injectStyles(css_248z);
|
|
1248
|
+
|
|
1339
1249
|
exports.TimelineHeaderRow = TimelineHeaderRow;
|
|
1340
1250
|
exports.TimelineLane = TimelineLane;
|
|
1341
1251
|
exports.TimelineLaneBg = TimelineLaneBg;
|
|
@@ -1346,8 +1256,6 @@ exports.TimelineSlats = TimelineSlats;
|
|
|
1346
1256
|
exports.TimelineView = TimelineView;
|
|
1347
1257
|
exports.buildTimelineDateProfile = buildTimelineDateProfile;
|
|
1348
1258
|
exports.computeSlotWidth = computeSlotWidth;
|
|
1349
|
-
exports.coordToCss = coordToCss;
|
|
1350
|
-
exports.coordsToCss = coordsToCss;
|
|
1351
1259
|
exports.createHorizontalStyle = createHorizontalStyle;
|
|
1352
1260
|
exports.createVerticalStyle = createVerticalStyle;
|
|
1353
1261
|
exports.timeToCoord = timeToCoord;
|