@fullcalendar/timeline 7.0.0-beta.1 → 7.0.0-beta.4
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 +1 -1
- package/index.global.js +143 -258
- package/index.global.min.js +2 -2
- package/index.js +1 -1
- package/internal.cjs +141 -256
- package/internal.d.ts +32 -58
- package/internal.js +143 -256
- package/package.json +4 -4
package/internal.cjs
CHANGED
|
@@ -452,42 +452,33 @@ class TimelineSlatCell extends internal_cjs.BaseComponent {
|
|
|
452
452
|
}
|
|
453
453
|
render() {
|
|
454
454
|
let { props, context } = this;
|
|
455
|
-
let { dateEnv, options
|
|
455
|
+
let { dateEnv, options } = context;
|
|
456
456
|
let { date, tDateProfile, isEm } = props;
|
|
457
457
|
let dateMeta = internal_cjs.getDateMeta(props.date, props.todayRange, props.nowDate, props.dateProfile);
|
|
458
458
|
let renderProps = Object.assign(Object.assign({ date: dateEnv.toDate(props.date) }, dateMeta), { view: context.viewApi });
|
|
459
|
-
return (preact_cjs.createElement(internal_cjs.ContentContainer, {
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
'fc-timeline-slot-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
'fc-timeline-slot-major' :
|
|
469
|
-
'fc-timeline-slot-minor') : '',
|
|
470
|
-
...(props.isDay ?
|
|
471
|
-
internal_cjs.getDayClassNames(dateMeta, theme) :
|
|
472
|
-
internal_cjs.getSlotClassNames(dateMeta, theme)),
|
|
473
|
-
], elAttrs: {
|
|
474
|
-
'data-date': dateEnv.formatIso(date, {
|
|
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: Object.assign({ 'data-date': dateEnv.formatIso(date, {
|
|
475
468
|
omitTimeZoneOffset: true,
|
|
476
469
|
omitTime: !tDateProfile.isTimeScale,
|
|
477
|
-
}),
|
|
478
|
-
}, elStyle: {
|
|
470
|
+
}) }, (dateMeta.isToday ? { 'aria-current': 'date' } : {})), style: {
|
|
479
471
|
width: props.width,
|
|
480
|
-
}, renderProps: renderProps, generatorName: "slotLaneContent", customGenerator: options.slotLaneContent, classNameGenerator: options.slotLaneClassNames, didMount: options.slotLaneDidMount, willUnmount: options.slotLaneWillUnmount }, (InnerContent) => (preact_cjs.createElement(
|
|
481
|
-
preact_cjs.createElement(InnerContent, { elTag: "div", elClasses: ['fc-cell-inner'] })))));
|
|
472
|
+
}, 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 }))));
|
|
482
473
|
}
|
|
483
474
|
componentDidMount() {
|
|
484
475
|
const innerEl = this.innerElRef.current;
|
|
485
|
-
this.
|
|
476
|
+
this.disconnectInnerWidth = internal_cjs.watchWidth(innerEl, (width) => {
|
|
486
477
|
internal_cjs.setRef(this.props.innerWidthRef, width);
|
|
487
478
|
});
|
|
488
479
|
}
|
|
489
480
|
componentWillUnmount() {
|
|
490
|
-
this.
|
|
481
|
+
this.disconnectInnerWidth();
|
|
491
482
|
internal_cjs.setRef(this.props.innerWidthRef, null);
|
|
492
483
|
}
|
|
493
484
|
}
|
|
@@ -513,9 +504,9 @@ class TimelineSlats extends internal_cjs.BaseComponent {
|
|
|
513
504
|
let { tDateProfile, slotWidth } = props;
|
|
514
505
|
let { slotDates, isWeekStarts } = tDateProfile;
|
|
515
506
|
let isDay = !tDateProfile.isTimeScale && !tDateProfile.largeUnit;
|
|
516
|
-
return (preact_cjs.createElement("div", { className: "fc-timeline-slots fc-fill fc-flex-row" }, slotDates.map((slotDate, i) => {
|
|
507
|
+
return (preact_cjs.createElement("div", { "aria-hidden": true, className: "fc-timeline-slots fc-fill fc-flex-row", style: { height: props.height } }, slotDates.map((slotDate, i) => {
|
|
517
508
|
let key = slotDate.toISOString();
|
|
518
|
-
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,
|
|
509
|
+
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),
|
|
519
510
|
// ref
|
|
520
511
|
innerWidthRef: innerWidthRefMap.createRef(key),
|
|
521
512
|
// dimensions
|
|
@@ -549,30 +540,6 @@ function computeDateSnapCoverage$1(date, tDateProfile, dateEnv) {
|
|
|
549
540
|
return snapCoverage;
|
|
550
541
|
}
|
|
551
542
|
/*
|
|
552
|
-
TODO: audit!!!
|
|
553
|
-
*/
|
|
554
|
-
function coordToCss(hcoord, isRtl) {
|
|
555
|
-
if (hcoord === null) {
|
|
556
|
-
return { left: '', right: '' };
|
|
557
|
-
}
|
|
558
|
-
if (isRtl) {
|
|
559
|
-
return { right: hcoord, left: '' };
|
|
560
|
-
}
|
|
561
|
-
return { left: hcoord, right: '' };
|
|
562
|
-
}
|
|
563
|
-
/*
|
|
564
|
-
TODO: audit!!!
|
|
565
|
-
*/
|
|
566
|
-
function coordsToCss(hcoords, isRtl) {
|
|
567
|
-
if (!hcoords) {
|
|
568
|
-
return { left: '', right: '' };
|
|
569
|
-
}
|
|
570
|
-
if (isRtl) {
|
|
571
|
-
return { right: hcoords.start, left: -hcoords.end };
|
|
572
|
-
}
|
|
573
|
-
return { left: hcoords.start, right: -hcoords.end };
|
|
574
|
-
}
|
|
575
|
-
/*
|
|
576
543
|
TODO: DRY up with elsewhere?
|
|
577
544
|
*/
|
|
578
545
|
function horizontalsToCss(hcoord, isRtl) {
|
|
@@ -603,7 +570,8 @@ function createVerticalStyle(props) {
|
|
|
603
570
|
};
|
|
604
571
|
}
|
|
605
572
|
}
|
|
606
|
-
function createHorizontalStyle(
|
|
573
|
+
function createHorizontalStyle(// TODO: DRY up?
|
|
574
|
+
props, isRtl) {
|
|
607
575
|
if (props) {
|
|
608
576
|
return {
|
|
609
577
|
[isRtl ? 'right' : 'left']: props.start,
|
|
@@ -676,13 +644,13 @@ function computeDateSnapCoverage(date, tDateProfile, dateEnv) {
|
|
|
676
644
|
function computeManySegHorizontals(segs, segMinWidth, dateEnv, tDateProfile, slotWidth) {
|
|
677
645
|
const res = {};
|
|
678
646
|
for (const seg of segs) {
|
|
679
|
-
res[seg
|
|
647
|
+
res[internal_cjs.getEventKey(seg)] = computeSegHorizontals(seg, segMinWidth, dateEnv, tDateProfile, slotWidth);
|
|
680
648
|
}
|
|
681
649
|
return res;
|
|
682
650
|
}
|
|
683
651
|
function computeSegHorizontals(seg, segMinWidth, dateEnv, tDateProfile, slotWidth) {
|
|
684
|
-
const startCoord = dateToCoord(seg.
|
|
685
|
-
const endCoord = dateToCoord(seg.
|
|
652
|
+
const startCoord = dateToCoord(seg.startDate, dateEnv, tDateProfile, slotWidth);
|
|
653
|
+
const endCoord = dateToCoord(seg.endDate, dateEnv, tDateProfile, slotWidth);
|
|
686
654
|
let size = endCoord - startCoord;
|
|
687
655
|
if (segMinWidth) {
|
|
688
656
|
size = Math.max(size, segMinWidth);
|
|
@@ -690,95 +658,58 @@ function computeSegHorizontals(seg, segMinWidth, dateEnv, tDateProfile, slotWidt
|
|
|
690
658
|
return { start: startCoord, size };
|
|
691
659
|
}
|
|
692
660
|
function computeFgSegPlacements(// mostly horizontals
|
|
693
|
-
segs, segHorizontals,
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
segEntries.push({
|
|
703
|
-
index: i,
|
|
704
|
-
seg,
|
|
705
|
-
span: {
|
|
706
|
-
start: hcoords.start,
|
|
707
|
-
end: hcoords.start + hcoords.size,
|
|
708
|
-
},
|
|
709
|
-
thickness: height,
|
|
710
|
-
});
|
|
661
|
+
segs, segHorizontals, // TODO: use Map
|
|
662
|
+
segHeights, // keyed by instanceId
|
|
663
|
+
hiddenGroupHeights, strictOrder, maxDepth) {
|
|
664
|
+
const segRanges = [];
|
|
665
|
+
// isn't it true that there will either be ALL hcoords or NONE? can optimize
|
|
666
|
+
for (const seg of segs) {
|
|
667
|
+
const hcoords = segHorizontals[internal_cjs.getEventKey(seg)];
|
|
668
|
+
if (hcoords) {
|
|
669
|
+
segRanges.push(Object.assign(Object.assign({}, seg), { start: hcoords.start, end: hcoords.start + hcoords.size }));
|
|
711
670
|
}
|
|
712
671
|
}
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
}
|
|
720
|
-
let
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
hierarchy.maxStackCnt = -1;
|
|
730
|
-
hierarchy.addSegs(hiddenGroupEntries);
|
|
731
|
-
let visibleRects = hierarchy.toRects();
|
|
732
|
-
let segTops = {};
|
|
733
|
-
let hiddenGroupTops = {};
|
|
734
|
-
for (let rect of visibleRects) {
|
|
735
|
-
const { seg, segGroup } = rect;
|
|
736
|
-
if (seg) { // regular seg
|
|
737
|
-
segTops[seg.eventRange.instance.instanceId] = rect.levelCoord;
|
|
738
|
-
}
|
|
739
|
-
else { // hiddenGroup
|
|
740
|
-
hiddenGroupTops[segGroup.key] = rect.levelCoord;
|
|
672
|
+
const hierarchy = new internal_cjs.SegHierarchy(segRanges, (seg) => segHeights.get(internal_cjs.getEventKey(seg)), strictOrder, undefined, // maxCoord
|
|
673
|
+
maxDepth);
|
|
674
|
+
const segTops = new Map();
|
|
675
|
+
hierarchy.traverseSegs((seg, segTop) => {
|
|
676
|
+
segTops.set(internal_cjs.getEventKey(seg), segTop);
|
|
677
|
+
});
|
|
678
|
+
const { hiddenSegs } = hierarchy;
|
|
679
|
+
let totalHeight = 0;
|
|
680
|
+
for (const segRange of segRanges) {
|
|
681
|
+
const segKey = internal_cjs.getEventKey(segRange);
|
|
682
|
+
const segHeight = segHeights.get(segKey);
|
|
683
|
+
const segTop = segTops.get(segKey);
|
|
684
|
+
if (segHeight != null) {
|
|
685
|
+
if (segTop != null) {
|
|
686
|
+
totalHeight = Math.max(totalHeight, segTop + segHeight);
|
|
687
|
+
}
|
|
741
688
|
}
|
|
742
689
|
}
|
|
690
|
+
const hiddenGroups = internal_cjs.groupIntersectingSegs(hiddenSegs);
|
|
691
|
+
const hiddenGroupTops = new Map();
|
|
692
|
+
// HACK for hiddenGroup findInsertion() call
|
|
693
|
+
hierarchy.strictOrder = true;
|
|
694
|
+
for (const hiddenGroup of hiddenGroups) {
|
|
695
|
+
const { levelCoord: top } = hierarchy.findInsertion(hiddenGroup, 0);
|
|
696
|
+
const hiddenGroupHeight = hiddenGroupHeights.get(hiddenGroup.key) || 0;
|
|
697
|
+
hiddenGroupTops.set(hiddenGroup.key, top);
|
|
698
|
+
totalHeight = Math.max(totalHeight, top + hiddenGroupHeight);
|
|
699
|
+
}
|
|
743
700
|
return [
|
|
744
701
|
segTops,
|
|
745
|
-
computeMaxBottom(segs, segTops, segHeights),
|
|
746
702
|
hiddenGroups,
|
|
747
703
|
hiddenGroupTops,
|
|
704
|
+
totalHeight,
|
|
748
705
|
];
|
|
749
706
|
}
|
|
750
|
-
function computeMaxBottom(segs, segTops, segHeights) {
|
|
751
|
-
let max = 0;
|
|
752
|
-
for (const seg of segs) {
|
|
753
|
-
const { instanceId } = seg.eventRange.instance;
|
|
754
|
-
const top = segTops[instanceId];
|
|
755
|
-
const height = segHeights.get(instanceId);
|
|
756
|
-
if (top != null && height != null) {
|
|
757
|
-
max = Math.max(max, top + height);
|
|
758
|
-
}
|
|
759
|
-
}
|
|
760
|
-
return max;
|
|
761
|
-
}
|
|
762
|
-
/*
|
|
763
|
-
TODO: converge with computeMaxBottom, but keys are different
|
|
764
|
-
*/
|
|
765
|
-
function computeMoreLinkMaxBottom(hiddenGroups, hiddenGroupTops, hiddenGroupHeights) {
|
|
766
|
-
let max = 0;
|
|
767
|
-
for (const hiddenGroup of hiddenGroups) {
|
|
768
|
-
const top = hiddenGroupTops[hiddenGroup.key];
|
|
769
|
-
const height = hiddenGroupHeights.get(hiddenGroup.key);
|
|
770
|
-
if (top != null && height != null) {
|
|
771
|
-
max = Math.max(max, top + height);
|
|
772
|
-
}
|
|
773
|
-
}
|
|
774
|
-
return max;
|
|
775
|
-
}
|
|
776
707
|
|
|
777
708
|
class TimelineLaneBg extends internal_cjs.BaseComponent {
|
|
778
709
|
render() {
|
|
779
710
|
let { props } = this;
|
|
780
711
|
let highlightSeg = [].concat(props.eventResizeSegs, props.dateSelectionSegs);
|
|
781
|
-
return (preact_cjs.createElement(
|
|
712
|
+
return (preact_cjs.createElement(preact_cjs.Fragment, null,
|
|
782
713
|
this.renderSegs(props.businessHourSegs || [], 'non-business'),
|
|
783
714
|
this.renderSegs(props.bgEventSegs || [], 'bg-event'),
|
|
784
715
|
this.renderSegs(highlightSeg, 'highlight')));
|
|
@@ -792,7 +723,7 @@ class TimelineLaneBg extends internal_cjs.BaseComponent {
|
|
|
792
723
|
let segHorizontal = computeSegHorizontals(seg, undefined, dateEnv, tDateProfile, slotWidth);
|
|
793
724
|
hStyle = horizontalsToCss(segHorizontal, isRtl);
|
|
794
725
|
}
|
|
795
|
-
return (preact_cjs.createElement("div", { key: internal_cjs.buildEventRangeKey(seg.eventRange), className: "fc-
|
|
726
|
+
return (preact_cjs.createElement("div", { key: internal_cjs.buildEventRangeKey(seg.eventRange), className: "fc-fill-y", style: hStyle }, fillType === 'bg-event' ?
|
|
796
727
|
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))));
|
|
797
728
|
})));
|
|
798
729
|
}
|
|
@@ -809,8 +740,8 @@ class TimelineLaneSlicer extends internal_cjs.Slicer {
|
|
|
809
740
|
let slicedRange = internal_cjs.intersectRanges(normalRange, tDateProfile.normalizedRange);
|
|
810
741
|
if (slicedRange) {
|
|
811
742
|
segs.push({
|
|
812
|
-
|
|
813
|
-
|
|
743
|
+
startDate: slicedRange.start,
|
|
744
|
+
endDate: slicedRange.end,
|
|
814
745
|
isStart: slicedRange.start.valueOf() === normalRange.start.valueOf()
|
|
815
746
|
&& isValidDate(slicedRange.start, tDateProfile, dateProfile, dateProfileGenerator),
|
|
816
747
|
isEnd: slicedRange.end.valueOf() === normalRange.end.valueOf()
|
|
@@ -832,13 +763,8 @@ class TimelineEvent extends internal_cjs.BaseComponent {
|
|
|
832
763
|
render() {
|
|
833
764
|
let { props, context } = this;
|
|
834
765
|
let { options } = context;
|
|
835
|
-
return (preact_cjs.createElement(internal_cjs.StandardEvent, Object.assign({}, props, {
|
|
836
|
-
'fc-timeline-event',
|
|
837
|
-
'fc-h-event',
|
|
838
|
-
options.eventOverlap === false // TODO: fix bad default
|
|
839
|
-
? 'fc-timeline-event-spacious'
|
|
840
|
-
: ''
|
|
841
|
-
], defaultTimeFormat: DEFAULT_TIME_FORMAT, defaultDisplayEventTime: !props.isTimeScale })));
|
|
766
|
+
return (preact_cjs.createElement(internal_cjs.StandardEvent, Object.assign({}, props, { className: internal_cjs.joinClassNames('fc-timeline-event', options.eventOverlap === false // TODO: fix bad default
|
|
767
|
+
&& 'fc-timeline-event-spacious', 'fc-h-event'), defaultTimeFormat: DEFAULT_TIME_FORMAT, defaultDisplayEventTime: !props.isTimeScale })));
|
|
842
768
|
}
|
|
843
769
|
}
|
|
844
770
|
|
|
@@ -846,13 +772,13 @@ class TimelineLaneMoreLink extends internal_cjs.BaseComponent {
|
|
|
846
772
|
render() {
|
|
847
773
|
let { props } = this;
|
|
848
774
|
let { hiddenSegs, resourceId, forcedInvisibleMap } = props;
|
|
849
|
-
let
|
|
850
|
-
return (preact_cjs.createElement(internal_cjs.MoreLinkContainer, {
|
|
775
|
+
let dateSpanProps = resourceId ? { resourceId } : {};
|
|
776
|
+
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) => {
|
|
851
777
|
let { eventRange } = seg;
|
|
852
778
|
let instanceId = eventRange.instance.instanceId;
|
|
853
779
|
return (preact_cjs.createElement("div", { key: instanceId, style: { visibility: forcedInvisibleMap[instanceId] ? 'hidden' : '' } },
|
|
854
780
|
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)))));
|
|
855
|
-
}))) }, (InnerContent) => (preact_cjs.createElement(InnerContent, {
|
|
781
|
+
}))) }, (InnerContent) => (preact_cjs.createElement(InnerContent, { tag: "div", className: 'fc-timeline-more-link-inner fc-sticky-s' }))));
|
|
856
782
|
}
|
|
857
783
|
}
|
|
858
784
|
|
|
@@ -871,12 +797,12 @@ class TimelineEventHarness extends preact_cjs.Component {
|
|
|
871
797
|
}
|
|
872
798
|
componentDidMount() {
|
|
873
799
|
const rootEl = this.rootElRef.current; // TODO: make dynamic with useEffect
|
|
874
|
-
this.
|
|
800
|
+
this.disconnectHeight = internal_cjs.watchHeight(rootEl, (height) => {
|
|
875
801
|
internal_cjs.setRef(this.props.heightRef, height);
|
|
876
802
|
});
|
|
877
803
|
}
|
|
878
804
|
componentWillUnmount() {
|
|
879
|
-
this.
|
|
805
|
+
this.disconnectHeight();
|
|
880
806
|
internal_cjs.setRef(this.props.heightRef, null);
|
|
881
807
|
}
|
|
882
808
|
}
|
|
@@ -909,7 +835,7 @@ class TimelineLane extends internal_cjs.BaseComponent {
|
|
|
909
835
|
TODO: lots of memoization needed here!
|
|
910
836
|
*/
|
|
911
837
|
render() {
|
|
912
|
-
let { props, context, segHeightRefMap } = this;
|
|
838
|
+
let { props, context, segHeightRefMap, moreLinkHeightRefMap } = this;
|
|
913
839
|
let { options } = context;
|
|
914
840
|
let { dateProfile, tDateProfile } = props;
|
|
915
841
|
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 +847,7 @@ class TimelineLane extends internal_cjs.BaseComponent {
|
|
|
921
847
|
let fgSegHorizontals = props.slotWidth != null
|
|
922
848
|
? computeManySegHorizontals(fgSegs, options.eventMinWidth, context.dateEnv, tDateProfile, props.slotWidth)
|
|
923
849
|
: {};
|
|
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);
|
|
850
|
+
let [fgSegTops, hiddenGroups, hiddenGroupTops, totalHeight] = computeFgSegPlacements(fgSegs, fgSegHorizontals, segHeightRefMap.current, moreLinkHeightRefMap.current, options.eventOrderStrict, options.eventMaxStack);
|
|
928
851
|
let forcedInvisibleMap = // TODO: more convenient/DRY
|
|
929
852
|
(slicedProps.eventDrag ? slicedProps.eventDrag.affectedInstances : null) ||
|
|
930
853
|
(slicedProps.eventResize ? slicedProps.eventResize.affectedInstances : null) ||
|
|
@@ -935,20 +858,18 @@ class TimelineLane extends internal_cjs.BaseComponent {
|
|
|
935
858
|
bgEventSegs: slicedProps.bgEventSegs, businessHourSegs: slicedProps.businessHourSegs, dateSelectionSegs: slicedProps.dateSelectionSegs, eventResizeSegs: slicedProps.eventResize ? slicedProps.eventResize.segs : [] /* bad new empty array? */,
|
|
936
859
|
// dimensions
|
|
937
860
|
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 } },
|
|
861
|
+
preact_cjs.createElement("div", { className: internal_cjs.joinClassNames('fc-timeline-events', options.eventOverlap === false // TODO: fix bad default
|
|
862
|
+
? 'fc-timeline-events-overlap-disabled'
|
|
863
|
+
: 'fc-timeline-events-overlap-enabled', 'fc-content-box'), style: { height: totalHeight } },
|
|
945
864
|
this.renderFgSegs(fgSegs, fgSegHorizontals, fgSegTops, forcedInvisibleMap, hiddenGroups, hiddenGroupTops, false, // isDragging
|
|
946
865
|
false, // isResizing
|
|
947
866
|
false),
|
|
948
867
|
this.renderFgSegs(mirrorSegs, props.slotWidth // TODO: memoize
|
|
949
868
|
? computeManySegHorizontals(mirrorSegs, options.eventMinWidth, context.dateEnv, tDateProfile, props.slotWidth)
|
|
950
869
|
: {}, fgSegTops, {}, // forcedInvisibleMap
|
|
951
|
-
[],
|
|
870
|
+
[], // hiddenGroups
|
|
871
|
+
new Map(), // hiddenGroupTops
|
|
872
|
+
Boolean(slicedProps.eventDrag), Boolean(slicedProps.eventResize), false))));
|
|
952
873
|
}
|
|
953
874
|
renderFgSegs(segs, segHorizontals, segTops, forcedInvisibleMap, hiddenGroups, hiddenGroupTops, isDragging, isResizing, isDateSelecting) {
|
|
954
875
|
let { props, context, segHeightRefMap, moreLinkHeightRefMap } = this;
|
|
@@ -957,18 +878,18 @@ class TimelineLane extends internal_cjs.BaseComponent {
|
|
|
957
878
|
segs.map((seg) => {
|
|
958
879
|
const { eventRange } = seg;
|
|
959
880
|
const { instanceId } = eventRange.instance;
|
|
960
|
-
const segTop = segTops
|
|
881
|
+
const segTop = segTops.get(instanceId);
|
|
961
882
|
const segHorizontal = segHorizontals[instanceId];
|
|
962
883
|
const isVisible = isMirror ||
|
|
963
884
|
(segHorizontal && segTop != null && !forcedInvisibleMap[instanceId]);
|
|
964
885
|
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) },
|
|
965
886
|
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)))));
|
|
966
887
|
}),
|
|
967
|
-
hiddenGroups.map((hiddenGroup) => (preact_cjs.createElement(TimelineEventHarness, { key: hiddenGroup.key, style: Object.assign({ top: hiddenGroupTops
|
|
968
|
-
start: hiddenGroup.
|
|
969
|
-
size: hiddenGroup.
|
|
888
|
+
hiddenGroups.map((hiddenGroup) => (preact_cjs.createElement(TimelineEventHarness, { key: hiddenGroup.key, style: Object.assign({ top: hiddenGroupTops.get(hiddenGroup.key) || 0 }, horizontalsToCss({
|
|
889
|
+
start: hiddenGroup.start,
|
|
890
|
+
size: hiddenGroup.end - hiddenGroup.start
|
|
970
891
|
}, context.isRtl)), heightRef: moreLinkHeightRefMap.createRef(hiddenGroup.key) },
|
|
971
|
-
preact_cjs.createElement(TimelineLaneMoreLink, { hiddenSegs: hiddenGroup.segs
|
|
892
|
+
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 }))))));
|
|
972
893
|
}
|
|
973
894
|
}
|
|
974
895
|
|
|
@@ -977,7 +898,6 @@ class TimelineHeaderCell extends internal_cjs.BaseComponent {
|
|
|
977
898
|
super(...arguments);
|
|
978
899
|
// memo
|
|
979
900
|
this.refineRenderProps = internal_cjs.memoizeObjArg(refineRenderProps);
|
|
980
|
-
this.buildCellNavLinkAttrs = internal_cjs.memoize(buildCellNavLinkAttrs);
|
|
981
901
|
// ref
|
|
982
902
|
this.innerElRef = preact_cjs.createRef();
|
|
983
903
|
}
|
|
@@ -996,36 +916,24 @@ class TimelineHeaderCell extends internal_cjs.BaseComponent {
|
|
|
996
916
|
dateEnv: context.dateEnv,
|
|
997
917
|
viewApi: context.viewApi,
|
|
998
918
|
});
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
'
|
|
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: {
|
|
1013
|
-
'data-date': dateEnv.formatIso(cell.date, {
|
|
919
|
+
let isNavLink = !dateMeta.isDisabled && (cell.rowUnit && cell.rowUnit !== 'time');
|
|
920
|
+
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
|
|
921
|
+
'fc-header-cell fc-cell fc-flex-col fc-justify-center', props.borderStart && 'fc-border-s', props.isCentered ? 'fc-align-center' : 'fc-align-start',
|
|
922
|
+
// TODO: so slot classnames for week/month/bigger. see note above about rowUnit
|
|
923
|
+
cell.rowUnit === 'time' ?
|
|
924
|
+
internal_cjs.getSlotClassName(dateMeta) :
|
|
925
|
+
internal_cjs.getDayClassName(dateMeta)), attrs: Object.assign({ 'data-date': dateEnv.formatIso(cell.date, {
|
|
1014
926
|
omitTime: !tDateProfile.isTimeScale,
|
|
1015
927
|
omitTimeZoneOffset: true,
|
|
1016
|
-
}),
|
|
1017
|
-
}, elStyle: {
|
|
928
|
+
}) }, (dateMeta.isToday ? { 'aria-current': 'date' } : {})), style: {
|
|
1018
929
|
width: props.slotWidth != null
|
|
1019
930
|
? props.slotWidth * cell.colspan
|
|
1020
931
|
: 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
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
'fc-cell-inner',
|
|
1027
|
-
'fc-padding-md',
|
|
1028
|
-
], elAttrs: this.buildCellNavLinkAttrs(context, cell.date, cell.rowUnit) })))));
|
|
932
|
+
}, renderProps: renderProps, generatorName: "slotLabelContent", customGenerator: options.slotLabelContent, defaultGenerator: renderInnerContent, classNameGenerator: options.slotLabelClassNames, didMount: options.slotLabelDidMount, willUnmount: options.slotLabelWillUnmount }, (InnerContent) => (preact_cjs.createElement(InnerContent, { tag: 'div', attrs: isNavLink
|
|
933
|
+
// not tabbable because parent is aria-hidden
|
|
934
|
+
? internal_cjs.buildNavLinkAttrs(context, cell.date, cell.rowUnit, undefined, /* isTabbable = */ false)
|
|
935
|
+
: {} // don't bother with aria-hidden because parent already hidden
|
|
936
|
+
, 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;
|
|
@@ -1049,11 +957,6 @@ class TimelineHeaderCell extends internal_cjs.BaseComponent {
|
|
|
1049
957
|
}
|
|
1050
958
|
// Utils
|
|
1051
959
|
// -------------------------------------------------------------------------------------------------
|
|
1052
|
-
function buildCellNavLinkAttrs(context, cellDate, rowUnit) {
|
|
1053
|
-
return (rowUnit && rowUnit !== 'time')
|
|
1054
|
-
? internal_cjs.buildNavLinkAttrs(context, cellDate, rowUnit)
|
|
1055
|
-
: {};
|
|
1056
|
-
}
|
|
1057
960
|
function renderInnerContent(renderProps) {
|
|
1058
961
|
return renderProps.text;
|
|
1059
962
|
}
|
|
@@ -1099,13 +1002,14 @@ class TimelineHeaderRow extends internal_cjs.BaseComponent {
|
|
|
1099
1002
|
const { props, innerWidthRefMap, innerHeightRefMap } = this;
|
|
1100
1003
|
const isCentered = !(props.tDateProfile.isTimeScale && props.isLastRow);
|
|
1101
1004
|
const isSticky = !props.isLastRow;
|
|
1102
|
-
return (preact_cjs.createElement("div", { className: 'fc-row',
|
|
1005
|
+
return (preact_cjs.createElement("div", { className: internal_cjs.joinClassNames('fc-flex-row fc-grow', // TODO: move fc-grow to parent?
|
|
1006
|
+
!props.isLastRow && 'fc-border-b') }, props.cells.map((cell, cellI) => {
|
|
1103
1007
|
// TODO: make this part of the cell obj?
|
|
1104
1008
|
// TODO: rowUnit seems wrong sometimes. says 'month' when it should be day
|
|
1105
1009
|
// TODO: rowUnit is relevant to whole row. put it on a row object, not the cells
|
|
1106
1010
|
// TODO: use rowUnit to key the Row itself?
|
|
1107
1011
|
const key = cell.rowUnit + ':' + cell.date.toISOString();
|
|
1108
|
-
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,
|
|
1012
|
+
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),
|
|
1109
1013
|
// refs
|
|
1110
1014
|
innerWidthRef: innerWidthRefMap.createRef(key), innerHeightRef: innerHeightRefMap.createRef(key),
|
|
1111
1015
|
// dimensions
|
|
@@ -1123,7 +1027,7 @@ class TimelineNowIndicatorLine extends internal_cjs.BaseComponent {
|
|
|
1123
1027
|
const { props, context } = this;
|
|
1124
1028
|
return (preact_cjs.createElement("div", { className: "fc-timeline-now-indicator-container" },
|
|
1125
1029
|
preact_cjs.createElement(internal_cjs.NowIndicatorContainer // TODO: make separate component?
|
|
1126
|
-
, {
|
|
1030
|
+
, { className: 'fc-timeline-now-indicator-line', style: props.slotWidth != null
|
|
1127
1031
|
? horizontalCoordToCss(dateToCoord(props.nowDate, context.dateEnv, props.tDateProfile, props.slotWidth), context.isRtl)
|
|
1128
1032
|
: {}, isAxis: false, date: props.nowDate })));
|
|
1129
1033
|
}
|
|
@@ -1133,7 +1037,7 @@ class TimelineNowIndicatorArrow extends internal_cjs.BaseComponent {
|
|
|
1133
1037
|
render() {
|
|
1134
1038
|
const { props, context } = this;
|
|
1135
1039
|
return (preact_cjs.createElement("div", { className: "fc-timeline-now-indicator-container" },
|
|
1136
|
-
preact_cjs.createElement(internal_cjs.NowIndicatorContainer, {
|
|
1040
|
+
preact_cjs.createElement(internal_cjs.NowIndicatorContainer, { className: 'fc-timeline-now-indicator-arrow', style: props.slotWidth != null
|
|
1137
1041
|
? horizontalCoordToCss(dateToCoord(props.nowDate, context.dateEnv, props.tDateProfile, props.slotWidth), context.isRtl)
|
|
1138
1042
|
: {}, isAxis: true, date: props.nowDate })));
|
|
1139
1043
|
}
|
|
@@ -1166,38 +1070,25 @@ class TimelineView extends internal_cjs.DateComponent {
|
|
|
1166
1070
|
this.setState({ slotInnerWidth });
|
|
1167
1071
|
}
|
|
1168
1072
|
};
|
|
1169
|
-
this.
|
|
1170
|
-
this.setState({
|
|
1171
|
-
scrollerWidth,
|
|
1172
|
-
});
|
|
1173
|
-
};
|
|
1174
|
-
this.handleLeftScrollbarWidth = (leftScrollbarWidth) => {
|
|
1073
|
+
this.handleClientWidth = (clientWidth) => {
|
|
1175
1074
|
this.setState({
|
|
1176
|
-
|
|
1075
|
+
clientWidth,
|
|
1177
1076
|
});
|
|
1178
1077
|
};
|
|
1179
|
-
this.
|
|
1078
|
+
this.handleEndScrollbarWidth = (endScrollbarWidth) => {
|
|
1180
1079
|
this.setState({
|
|
1181
|
-
|
|
1080
|
+
endScrollbarWidth
|
|
1182
1081
|
});
|
|
1183
1082
|
};
|
|
1184
|
-
this.
|
|
1083
|
+
this.handleTimeScrollRequest = (scrollTime) => {
|
|
1185
1084
|
this.scrollTime = scrollTime;
|
|
1186
|
-
this.
|
|
1085
|
+
this.applyTimeScroll();
|
|
1187
1086
|
};
|
|
1188
|
-
this.
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
let x = timeToCoord(scrollTime, context.dateEnv, props.dateProfile, tDateProfile, slotWidth);
|
|
1192
|
-
if (x) {
|
|
1193
|
-
x += context.isRtl ? -1 : 1; // overcome border. TODO: DRY this up
|
|
1194
|
-
}
|
|
1195
|
-
this.syncedScroller.scrollTo({ x });
|
|
1087
|
+
this.handleTimeScrollEnd = ({ isUser }) => {
|
|
1088
|
+
if (isUser) {
|
|
1089
|
+
this.scrollTime = null;
|
|
1196
1090
|
}
|
|
1197
1091
|
};
|
|
1198
|
-
this.clearScroll = () => {
|
|
1199
|
-
this.scrollTime = null;
|
|
1200
|
-
};
|
|
1201
1092
|
// Hit System
|
|
1202
1093
|
// -----------------------------------------------------------------------------------------------
|
|
1203
1094
|
this.handeBodyEl = (el) => {
|
|
@@ -1223,44 +1114,30 @@ class TimelineView extends internal_cjs.DateComponent {
|
|
|
1223
1114
|
const stickyFooterScrollbar = !props.forPrint && internal_cjs.getStickyFooterScrollbar(options);
|
|
1224
1115
|
/* table positions */
|
|
1225
1116
|
const [canvasWidth, slotWidth] = this.computeSlotWidth(tDateProfile.slotCnt, tDateProfile.slotsPerLabel, options.slotMinWidth, state.slotInnerWidth, // is ACTUALLY the label width. rename?
|
|
1226
|
-
state.
|
|
1117
|
+
state.clientWidth);
|
|
1227
1118
|
this.slotWidth = slotWidth;
|
|
1228
1119
|
return (preact_cjs.createElement(internal_cjs.NowTimer, { unit: timerUnit }, (nowDate, todayRange) => {
|
|
1229
1120
|
const enableNowIndicator = // TODO: DRY
|
|
1230
1121
|
options.nowIndicator &&
|
|
1231
1122
|
slotWidth != null &&
|
|
1232
1123
|
internal_cjs.rangeContainsMarker(props.dateProfile.currentRange, nowDate);
|
|
1233
|
-
return (preact_cjs.createElement(internal_cjs.ViewContainer, { viewSpec: context.viewSpec,
|
|
1234
|
-
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
'fc-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
preact_cjs.createElement("div", { className: 'fc-rel fc-content-box' // origin for now-indicator
|
|
1244
|
-
, style: {
|
|
1245
|
-
width: canvasWidth,
|
|
1246
|
-
paddingLeft: state.leftScrollbarWidth,
|
|
1247
|
-
paddingRight: state.rightScrollbarWidth,
|
|
1248
|
-
} },
|
|
1249
|
-
preact_cjs.createElement("div", null, cellRows.map((cells, rowLevel) => {
|
|
1124
|
+
return (preact_cjs.createElement(internal_cjs.ViewContainer, { viewSpec: context.viewSpec, className: internal_cjs.joinClassNames('fc-timeline fc-border',
|
|
1125
|
+
// HACK for Safari print-mode, where fc-scroller-no-bars won't take effect for
|
|
1126
|
+
// the below Scrollers if they have liquid flex height
|
|
1127
|
+
!props.forPrint && 'fc-flex-col') },
|
|
1128
|
+
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 },
|
|
1129
|
+
preact_cjs.createElement("div", {
|
|
1130
|
+
// TODO: DRY
|
|
1131
|
+
className: internal_cjs.joinClassNames('fc-rel', // origin for now-indicator
|
|
1132
|
+
canvasWidth == null && 'fc-liquid'), style: { width: canvasWidth } },
|
|
1133
|
+
cellRows.map((cells, rowLevel) => {
|
|
1250
1134
|
const isLast = rowLevel === cellRows.length - 1;
|
|
1251
1135
|
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) }));
|
|
1252
|
-
})
|
|
1253
|
-
enableNowIndicator && (
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
'fc-timeline-body',
|
|
1258
|
-
'fc-rowgroup',
|
|
1259
|
-
verticalScrolling ? 'fc-liquid' : '',
|
|
1260
|
-
], ref: this.bodyScrollerRef, widthRef: this.handleScrollerWidth, leftScrollbarWidthRef: this.handleLeftScrollbarWidth, rightScrollbarWidthRef: this.handleRightScrollbarWidth },
|
|
1261
|
-
preact_cjs.createElement("div", { className: "fc-rel fc-grow", style: {
|
|
1262
|
-
width: canvasWidth,
|
|
1263
|
-
}, ref: this.handeBodyEl },
|
|
1136
|
+
}),
|
|
1137
|
+
enableNowIndicator && (preact_cjs.createElement(TimelineNowIndicatorArrow, { tDateProfile: tDateProfile, nowDate: nowDate, slotWidth: slotWidth }))),
|
|
1138
|
+
Boolean(state.endScrollbarWidth) && (preact_cjs.createElement("div", { className: 'fc-border-s fc-filler', style: { minWidth: state.endScrollbarWidth } }))),
|
|
1139
|
+
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 },
|
|
1140
|
+
preact_cjs.createElement("div", { "aria-label": options.eventsHint, className: "fc-rel fc-grow", style: { width: canvasWidth }, ref: this.handeBodyEl },
|
|
1264
1141
|
preact_cjs.createElement(TimelineSlats, { dateProfile: props.dateProfile, tDateProfile: tDateProfile, nowDate: nowDate, todayRange: todayRange,
|
|
1265
1142
|
// ref
|
|
1266
1143
|
innerWidthRef: this.handleBodySlotInnerWidth,
|
|
@@ -1278,8 +1155,8 @@ class TimelineView extends internal_cjs.DateComponent {
|
|
|
1278
1155
|
this.syncedScroller = new internal_cjs$1.ScrollerSyncer(true); // horizontal=true
|
|
1279
1156
|
this.updateSyncedScroller();
|
|
1280
1157
|
this.resetScroll();
|
|
1281
|
-
this.context.emitter.on('_timeScrollRequest', this.
|
|
1282
|
-
this.syncedScroller.addScrollEndListener(this.
|
|
1158
|
+
this.context.emitter.on('_timeScrollRequest', this.handleTimeScrollRequest);
|
|
1159
|
+
this.syncedScroller.addScrollEndListener(this.handleTimeScrollEnd);
|
|
1283
1160
|
}
|
|
1284
1161
|
componentDidUpdate(prevProps) {
|
|
1285
1162
|
this.updateSyncedScroller();
|
|
@@ -1288,13 +1165,13 @@ class TimelineView extends internal_cjs.DateComponent {
|
|
|
1288
1165
|
}
|
|
1289
1166
|
else {
|
|
1290
1167
|
// TODO: inefficient to update so often
|
|
1291
|
-
this.
|
|
1168
|
+
this.applyTimeScroll();
|
|
1292
1169
|
}
|
|
1293
1170
|
}
|
|
1294
1171
|
componentWillUnmount() {
|
|
1295
1172
|
this.syncedScroller.destroy();
|
|
1296
|
-
this.context.emitter.off('_timeScrollRequest', this.
|
|
1297
|
-
this.syncedScroller.removeScrollEndListener(this.
|
|
1173
|
+
this.context.emitter.off('_timeScrollRequest', this.handleTimeScrollRequest);
|
|
1174
|
+
this.syncedScroller.removeScrollEndListener(this.handleTimeScrollEnd);
|
|
1298
1175
|
}
|
|
1299
1176
|
// Scrolling
|
|
1300
1177
|
// -----------------------------------------------------------------------------------------------
|
|
@@ -1306,7 +1183,17 @@ class TimelineView extends internal_cjs.DateComponent {
|
|
|
1306
1183
|
]);
|
|
1307
1184
|
}
|
|
1308
1185
|
resetScroll() {
|
|
1309
|
-
this.
|
|
1186
|
+
this.handleTimeScrollRequest(this.context.options.scrollTime);
|
|
1187
|
+
}
|
|
1188
|
+
applyTimeScroll() {
|
|
1189
|
+
const { props, context, tDateProfile, scrollTime, slotWidth } = this;
|
|
1190
|
+
if (scrollTime != null && slotWidth != null) {
|
|
1191
|
+
let x = timeToCoord(scrollTime, context.dateEnv, props.dateProfile, tDateProfile, slotWidth);
|
|
1192
|
+
if (x) {
|
|
1193
|
+
x += 1; // overcome border. TODO: DRY this up
|
|
1194
|
+
}
|
|
1195
|
+
this.syncedScroller.scrollTo({ x });
|
|
1196
|
+
}
|
|
1310
1197
|
}
|
|
1311
1198
|
queryHit(positionLeft, positionTop, elWidth, elHeight) {
|
|
1312
1199
|
const { props, context, tDateProfile, slotWidth } = this;
|
|
@@ -1353,7 +1240,7 @@ class TimelineView extends internal_cjs.DateComponent {
|
|
|
1353
1240
|
}
|
|
1354
1241
|
}
|
|
1355
1242
|
|
|
1356
|
-
var css_248z = ".fc-timeline-slots{z-index:1}.fc-timeline-
|
|
1243
|
+
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}";
|
|
1357
1244
|
internal_cjs.injectStyles(css_248z);
|
|
1358
1245
|
|
|
1359
1246
|
exports.TimelineHeaderRow = TimelineHeaderRow;
|
|
@@ -1366,8 +1253,6 @@ exports.TimelineSlats = TimelineSlats;
|
|
|
1366
1253
|
exports.TimelineView = TimelineView;
|
|
1367
1254
|
exports.buildTimelineDateProfile = buildTimelineDateProfile;
|
|
1368
1255
|
exports.computeSlotWidth = computeSlotWidth;
|
|
1369
|
-
exports.coordToCss = coordToCss;
|
|
1370
|
-
exports.coordsToCss = coordsToCss;
|
|
1371
1256
|
exports.createHorizontalStyle = createHorizontalStyle;
|
|
1372
1257
|
exports.createVerticalStyle = createVerticalStyle;
|
|
1373
1258
|
exports.timeToCoord = timeToCoord;
|