@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/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, theme } = context;
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, { elTag: "div", elClasses: [
462
- 'fc-flex-column',
463
- 'fc-align-start',
464
- 'fc-cell',
465
- 'fc-timeline-slot',
466
- 'fc-timeline-slot-lane',
467
- isEm ? 'fc-timeline-slot-em' : '',
468
- tDateProfile.isTimeScale ? (internal_cjs.isInt(dateEnv.countDurationsBetween(// best to do this here?
469
- tDateProfile.normalizedRange.start, props.date, tDateProfile.labelInterval)) ?
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
- }, elStyle: {
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("div", { ref: this.innerElRef, className: 'fc-flex-column' },
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.detachWidth = internal_cjs.watchWidth(innerEl, (width) => {
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.detachWidth();
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(props, isRtl) {
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.eventRange.instance.instanceId] = computeSegHorizontals(seg, segMinWidth, dateEnv, tDateProfile, slotWidth);
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.start, dateEnv, tDateProfile, slotWidth);
686
- const endCoord = dateToCoord(seg.end, dateEnv, tDateProfile, slotWidth);
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, segHeights, // keyed by instanceId
695
- strictOrder, maxStackCnt) {
696
- let segEntries = [];
697
- for (let i = 0; i < segs.length; i += 1) {
698
- let seg = segs[i];
699
- let instanceId = seg.eventRange.instance.instanceId;
700
- let height = segHeights.get(instanceId);
701
- let hcoords = segHorizontals[instanceId];
702
- if (height != null && hcoords != null) {
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
- let hierarchy = new internal_cjs.SegHierarchy();
715
- if (strictOrder != null) {
716
- hierarchy.strictOrder = strictOrder;
717
- }
718
- if (maxStackCnt != null) {
719
- hierarchy.maxStackCnt = maxStackCnt;
720
- }
721
- let hiddenEntries = hierarchy.addSegs(segEntries);
722
- let hiddenGroups = internal_cjs.groupIntersectingEntries(hiddenEntries);
723
- let hiddenGroupEntries = hiddenGroups.map((hiddenGroup, index) => ({
724
- index: segs.length + index,
725
- segGroup: hiddenGroup,
726
- span: hiddenGroup.span,
727
- thickness: 1, // HACK to ensure it's placed
728
- }));
729
- // add more-links into the hierarchy, but don't limit
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("div", { className: "fc-timeline-bg" },
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-timeline-bg-harness", style: hStyle }, fillType === 'bg-event' ?
797
- preact_cjs.createElement(internal_cjs.BgEvent, Object.assign({ seg: seg }, internal_cjs.getSegMeta(seg, todayRange, nowDate))) :
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
- start: slicedRange.start,
815
- end: slicedRange.end,
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, { elClasses: [
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 extraDateSpan = resourceId ? { resourceId } : {};
852
- return (preact_cjs.createElement(internal_cjs.MoreLinkContainer, { elClasses: ['fc-timeline-more-link'], allDayDate: null, segs: hiddenSegs, hiddenSegs: hiddenSegs, dateProfile: props.dateProfile, todayRange: props.todayRange, extraDateSpan: extraDateSpan, popoverContent: () => (preact_cjs.createElement(preact_cjs.Fragment, null, hiddenSegs.map((seg) => {
853
- let instanceId = seg.eventRange.instance.instanceId;
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.getSegMeta(seg, props.todayRange, props.nowDate)))));
856
- }))) }, (InnerContent) => (preact_cjs.createElement(InnerContent, { elTag: "div", elClasses: ['fc-timeline-more-link-inner', 'fc-sticky-x'] }))));
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.detachHeight = internal_cjs.watchHeight(rootEl, (height) => {
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.detachHeight();
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, fgSegsBottom, hiddenGroups, hiddenGroupTops] = computeFgSegPlacements(// verticals
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
- [], {}, Boolean(slicedProps.eventDrag), Boolean(slicedProps.eventResize), false))));
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 { instanceId } = seg.eventRange.instance;
959
- const segTop = segTops[instanceId];
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.getSegMeta(seg, props.todayRange, props.nowDate)))));
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[hiddenGroup.key] || 0 }, horizontalsToCss({
967
- start: hiddenGroup.span.start,
968
- size: hiddenGroup.span.end - hiddenGroup.span.start
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 /* TODO: make SegGroup generic! */, dateProfile: props.dateProfile, nowDate: props.nowDate, todayRange: props.todayRange, isTimeScale: props.tDateProfile.isTimeScale, eventSelection: props.eventSelection, resourceId: props.resourceId, forcedInvisibleMap: forcedInvisibleMap }))))));
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, { elTag: "div", elClasses: [
1000
- 'fc-timeline-slot-label',
1001
- 'fc-timeline-slot',
1002
- cell.isWeekStart ? 'fc-timeline-slot-em' : '',
1003
- 'fc-header-cell',
1004
- 'fc-cell',
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
- }, elStyle: {
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("div", { ref: this.innerElRef, className: [
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', style: { height: props.height } }, props.cells.map((cell) => {
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
- , { elClasses: ['fc-timeline-now-indicator-line'], elStyle: props.slotWidth != null
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, { elClasses: ['fc-timeline-now-indicator-arrow'], elStyle: props.slotWidth != null
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.headerSlotInnerWidth, this.bodySlotInnerWidth);
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.handleScrollerWidth = (scrollerWidth) => {
1078
+ this.handleClientWidth = (clientWidth) => {
1162
1079
  this.setState({
1163
- scrollerWidth,
1080
+ clientWidth,
1164
1081
  });
1165
1082
  };
1166
- this.handleLeftScrollbarWidth = (leftScrollbarWidth) => {
1083
+ this.handleEndScrollbarWidth = (endScrollbarWidth) => {
1167
1084
  this.setState({
1168
- leftScrollbarWidth
1085
+ endScrollbarWidth
1169
1086
  });
1170
1087
  };
1171
- this.handleRightScrollbarWidth = (rightScrollbarWidth) => {
1172
- this.setState({
1173
- rightScrollbarWidth
1174
- });
1088
+ this.handleTimeScroll = (scrollTime) => {
1089
+ this.scrollTime = scrollTime;
1090
+ this.updateScroll();
1175
1091
  };
1176
- this.timeScrollResponder = new internal_cjs.ScrollResponder((time) => {
1177
- const { props, context, tDateProfile, slotWidth } = this;
1178
- if (slotWidth != null) {
1179
- const x = timeToCoord(time, context.dateEnv, props.dateProfile, tDateProfile, slotWidth) +
1180
- (context.isRtl ? -1 : 1); // overcome border. TODO: DRY this up
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
- return false;
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.scrollerWidth);
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, elClasses: [
1219
- 'fc-timeline-view',
1220
- 'fc-flex-column',
1221
- 'fc-border',
1222
- ] },
1223
- preact_cjs.createElement(internal_cjs.Scroller, { horizontal: true, hideScrollbars: true, elClassNames: [
1224
- 'fc-timeline-header',
1225
- 'fc-rowgroup',
1226
- stickyHeaderDates ? 'fc-sticky-header' : '',
1227
- ], ref: this.headerScrollerRef },
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: isLast ? this.handleHeaderSlotInnerWidth : undefined }));
1237
- })),
1238
- enableNowIndicator && (
1239
- // TODO: make this positioned WITHIN padding?
1240
- preact_cjs.createElement(TimelineNowIndicatorArrow, { tDateProfile: tDateProfile, nowDate: nowDate, slotWidth: slotWidth })))),
1241
- preact_cjs.createElement(internal_cjs.Scroller, { vertical: verticalScrolling, horizontal: true, elClassNames: [
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
- const { context } = this;
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
- context.emitter.on('_timeScrollRequest', this.timeScrollResponder.handleScroll);
1269
- this.timeScrollResponder.handleScroll(options.scrollTime);
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.timeScrollResponder.handleScroll(options.scrollTime);
1176
+ if (prevProps.dateProfile !== this.props.dateProfile && this.context.options.scrollTimeReset) {
1177
+ this.resetScroll();
1276
1178
  }
1277
1179
  else {
1278
- this.timeScrollResponder.drain();
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.timeScrollResponder.handleScroll);
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
- ], this.context.isRtl);
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;