simplify how morelink needs segs

packages-premium

@@ -1 +1 @@
-Subproject commit 8b7794f44fbe872dd7e63ca33439f7bcb14e9014
+Subproject commit ab2791f615dcb53bc6b779dd2025cd715278fc7b

packages/common/src/common/MoreLinkRoot.tsx

@@ -1,8 +1,10 @@
+import { EventApi } from '../api/EventApi'
+import { Seg } from '../component/DateComponent'
+import { DateMarker } from '../datelib/marker'
 import { ComponentChildren, createElement, Ref, RefObject } from '../vdom'
 import { BaseComponent } from '../vdom-util'
 import { ViewApi } from '../ViewApi'
 import { ViewContext, ViewContextType } from '../ViewContext'
-import { EventSegment } from './more-link'
 import { MountArg, RenderHook } from './render-hook'
 
 export type MoreLinkChildren = (
@@ -10,12 +12,13 @@ export type MoreLinkChildren = (
   classNames: string[],
   innerElRef: Ref<any>,
   innerContent: ComponentChildren,
-  handleClick: () => void,
+  handleClick: (ev: MouseEvent) => void,
 ) => ComponentChildren
 
 export interface MoreLinkRootProps { // what the MoreLinkRoot component receives
-  allSegs: EventSegment[]
-  hiddenSegs: EventSegment[]
+  allDayDate: DateMarker | null
+  allSegs: Seg[]
+  hiddenSegs: Seg[]
   positionElRef: RefObject<HTMLElement>
   defaultContent?: (hookProps: MoreLinkContentArg) => ComponentChildren // not used by anyone yet
   children: MoreLinkChildren
@@ -68,86 +71,81 @@ export class MoreLinkRoot extends BaseComponent<MoreLinkRootProps> {
     )
   }
 
-  handleClick = () => {
-    console.log('handle click', this.props.hiddenSegs, this.props.positionElRef.current)
-  }
-}
+  handleClick = (ev: MouseEvent) => {
+    let { props, context } = this
+    let { moreLinkClick } = context.options
+    let allDay = Boolean(props.allDayDate)
+    let date = allDay ? context.dateEnv.toDate(props.allDayDate) :
+      context.dateEnv.toDate(getEarliestSeg(props.hiddenSegs).eventRange.range.start)
+
+    function buildPublicSeg(seg: Seg) {
+      let { def, instance, range } = seg.eventRange
+      return {
+        event: new EventApi(context, def, instance),
+        start: context.dateEnv.toDate(range.start),
+        end: context.dateEnv.toDate(range.end),
+        isStart: seg.isStart,
+        isEnd: seg.isEnd,
+      }
+    }
 
-function renderMoreLinkInner(props: MoreLinkContentArg) {
-  return props.text
-}
+    if (typeof moreLinkClick === 'function') {
+      moreLinkClick = moreLinkClick({
+        date,
+        allDay,
+        allSegs: props.allSegs.map(buildPublicSeg),
+        hiddenSegs: props.hiddenSegs.map(buildPublicSeg),
+        jsEvent: ev,
+        view: context.viewApi,
+      }) as string | undefined
+    }
 
-/*
-let { props, context } = this
-let { options, dateEnv } = context
-let { moreLinkClick } = options
-let allSegs: EventSegment[] = []
-let hiddenSegs: EventSegment[] = []
-
-function segForPublic(seg: TableSeg) {
-  let { def, instance, range } = seg.eventRange
-  return {
-    event: new EventApi(context, def, instance),
-    start: dateEnv.toDate(range.start),
-    end: dateEnv.toDate(range.end),
-    isStart: seg.isStart,
-    isEnd: seg.isEnd,
-  }
-}
+    if (!moreLinkClick || moreLinkClick === 'popover') {
+      console.log('open popover', date, props.hiddenSegs, props.positionElRef.current)
+      /*
+      (!props.forPrint && (
+        <MorePopover
+          ref={this.morePopoverRef}
+          date={morePopoverState.date}
+          dateProfile={dateProfile}
+          segs={morePopoverState.allSegs}
+          alignmentEl={morePopoverState.dayEl}
+          topAlignmentEl={rowCnt === 1 ? props.headerAlignElRef.current : null}
+          selectedInstanceId={props.eventSelection}
+          hiddenInstances={// yuck
+            (props.eventDrag ? props.eventDrag.affectedInstances : null) ||
+            (props.eventResize ? props.eventResize.affectedInstances : null) ||
+            {}
+          }
+          todayRange={todayRange}
+        />
+      )
+
+      let morePopoverHit = morePopover ? morePopover.positionToHit(leftPosition, topPosition, this.rootEl) : null
+      let { morePopoverState } = this.state
+      if (morePopoverHit) {
+        return {
+          row: morePopoverState.fromRow,
+          col: morePopoverState.fromCol,
+          ...morePopoverHit,
+        }
+      }
+      */
 
-for (let placement of props.singlePlacements) {
-  let publicSeg = segForPublic(placement.seg)
-  allSegs.push(publicSeg)
-  if (!placement.isVisible) {
-    hiddenSegs.push(publicSeg)
+    } else if (typeof moreLinkClick === 'string') { // a view name
+      context.calendarApi.zoomTo(date, moreLinkClick)
+    }
   }
 }
 
-if (typeof moreLinkClick === 'function') {
-  moreLinkClick = moreLinkClick({
-    date: context.dateEnv.toDate(props.date),
-    allDay: true,
-    allSegs,
-    hiddenSegs,
-    jsEvent: ev,
-    view: context.viewApi,
-  }) as string | undefined
+function renderMoreLinkInner(props: MoreLinkContentArg) {
+  return props.text
 }
 
-if (!moreLinkClick || moreLinkClick === 'popover') {
-  console.log('TODO: open popover', allSegs, this.rootEl)
-
-  (!props.forPrint && (
-    <MorePopover
-      ref={this.morePopoverRef}
-      date={morePopoverState.date}
-      dateProfile={dateProfile}
-      segs={morePopoverState.allSegs}
-      alignmentEl={morePopoverState.dayEl}
-      topAlignmentEl={rowCnt === 1 ? props.headerAlignElRef.current : null}
-      selectedInstanceId={props.eventSelection}
-      hiddenInstances={// yuck
-        (props.eventDrag ? props.eventDrag.affectedInstances : null) ||
-        (props.eventResize ? props.eventResize.affectedInstances : null) ||
-        {}
-      }
-      todayRange={todayRange}
-    />
-  )
-
-  let morePopoverHit = morePopover ? morePopover.positionToHit(leftPosition, topPosition, this.rootEl) : null
-  let { morePopoverState } = this.state
-  if (morePopoverHit) {
-    return {
-      row: morePopoverState.fromRow,
-      col: morePopoverState.fromCol,
-      ...morePopoverHit,
-    }
-  }
-
-} else if (typeof moreLinkClick === 'string') { // a view name
-  context.calendarApi.zoomTo(props.date, moreLinkClick)
+function getEarliestSeg(segs: Seg[]): Seg {
+  return segs.reduce(getEarlierSeg)
 }
-*/
 
-// TODO: address ticket where event refreshing closes popover
+function getEarlierSeg(seg0, seg1) {
+  return seg0.eventRange.range.start < seg1.eventRange.range.start ? seg0 : seg1
+}

packages/common/src/common/more-link.ts

@@ -1,8 +1,6 @@
 import { EventApi } from '../api/EventApi'
-import { EventRenderRange } from '../component/event-rendering'
 import { VUIEvent } from '../vdom'
 import { ViewApi } from '../ViewApi'
-import { ViewContext } from '../ViewContext'
 
 export interface EventSegment {
   event: EventApi
@@ -25,21 +23,3 @@ export interface MoreLinkArg {
 }
 
 export type MoreLinkHandler = (arg: MoreLinkArg) => MoreLinkSimpleAction | void
-
-export function buildPublicSeg(
-  seg: {
-    eventRange?: EventRenderRange, // needed because Seg's prop is optional. why?
-    isStart: boolean,
-    isEnd: boolean
-  },
-  context: ViewContext
-) {
-  let { def, instance, range } = seg.eventRange
-  return {
-    event: new EventApi(context, def, instance),
-    start: context.dateEnv.toDate(range.start),
-    end: context.dateEnv.toDate(range.end),
-    isStart: seg.isStart,
-    isEnd: seg.isEnd,
-  }
-}

packages/common/src/main.ts

@@ -264,7 +264,6 @@ export { DayCellContent, DayCellContentProps } from './common/DayCellContent'
 export { EventRoot, MinimalEventProps } from './common/EventRoot'
 export { renderFill, BgEvent, BgEventProps } from './common/bg-fill'
 export { WeekNumberRoot, WeekNumberRootProps } from './common/WeekNumberRoot'
-export { buildPublicSeg } from './common/more-link'
 export { MoreLinkRoot, MoreLinkRootProps, MoreLinkContentArg, MoreLinkMountArg } from './common/MoreLinkRoot'
 
 export { ViewRoot, ViewRootProps } from './common/ViewRoot'

packages/daygrid/src/TableCell.tsx

@@ -107,6 +107,7 @@ export class TableCell extends DateComponent<TableCellProps> {
               >
                 {props.fgContent}
                 <TableCellMoreLink
+                  allDayDate={date}
                   singlePlacements={props.singlePlacements}
                   marginTop={props.moreMarginTop}
                   positionElRef={rootElRef}

packages/timegrid/src/TimeCol.tsx

@@ -1,7 +1,7 @@
 import {
   Ref, DateMarker, BaseComponent, createElement, EventSegUiInteractionState, Seg, getSegMeta,
   DateRange, Fragment, DayCellRoot, NowIndicatorRoot, BgEvent, renderFill,
-  DateProfile, config, buildEventRangeKey, sortEventSegs, SegInput, memoize, SegEntryGroup,
+  DateProfile, config, buildEventRangeKey, sortEventSegs, SegInput, memoize, SegEntryGroup, SegEntry,
 } from '@fullcalendar/common'
 import { TimeColMoreLink } from './TimeColMoreLink'
 import { TimeColsSeg } from './TimeColsSeg'
@@ -203,11 +203,9 @@ export class TimeCol extends BaseComponent<TimeColProps> {
   renderHiddenGroups(hiddenGroups: SegEntryGroup[], segs: TimeColsSeg[]) {
     return hiddenGroups.map((hiddenGroup) => {
       let positionCss = this.computeSegTopBottomCss(hiddenGroup)
-
       return (
         <TimeColMoreLink
-          segEntries={hiddenGroup.entries}
-          segs={segs}
+          hiddenSegs={compileSegsFromEntries(hiddenGroup.entries, segs)}
           top={positionCss.top}
           bottom={positionCss.bottom}
         />
@@ -326,3 +324,7 @@ export class TimeCol extends BaseComponent<TimeColProps> {
     return props
   }
 }
+
+function compileSegsFromEntries(segEntries: SegEntry[], allSegs: TimeColsSeg[]) {
+  return segEntries.map((segEntry) => allSegs[segEntry.segInput.index])
+}