more morepopover stuff

packages-premium

@@ -1 +1 @@
-Subproject commit 93ccd1ad6527eeab906791656d53c1d269ecf79d
+Subproject commit 91cf1e1f3f23680a8a722442cfd3030e97ca6aab

packages/common/src/common/MoreLinkRoot.tsx

@@ -1,11 +1,15 @@
 import { EventApi } from '../api/EventApi'
 import { Seg } from '../component/DateComponent'
+import { DateRange } from '../datelib/date-range'
 import { DateMarker } from '../datelib/marker'
+import { DateProfile } from '../DateProfileGenerator'
 import { Dictionary } from '../options'
-import { ComponentChildren, createElement, Ref, RefObject } from '../vdom'
+import { memoize } from '../util/memoize'
+import { ComponentChildren, createElement, Fragment, Ref, RefObject } from '../vdom'
 import { BaseComponent } from '../vdom-util'
 import { ViewApi } from '../ViewApi'
 import { ViewContext, ViewContextType } from '../ViewContext'
+import { MorePopover } from './MorePopover'
 import { MountArg, RenderHook } from './render-hook'
 
 export type MoreLinkChildren = (
@@ -17,11 +21,13 @@ export type MoreLinkChildren = (
 ) => ComponentChildren
 
 export interface MoreLinkRootProps { // what the MoreLinkRoot component receives
+  dateProfile: DateProfile
+  todayRange: DateRange
   allDayDate: DateMarker | null
   allSegs: Seg[]
   hiddenSegs: Seg[]
   extraDateSpan?: Dictionary
-  positionElRef: RefObject<HTMLElement>
+  alignmentElRef: RefObject<HTMLElement>
   defaultContent?: (hookProps: MoreLinkContentArg) => ComponentChildren // not used by anyone yet
   children: MoreLinkChildren
 }
@@ -35,7 +41,16 @@ export interface MoreLinkContentArg { // what the render-hooks receive
 
 export type MoreLinkMountArg = MountArg<MoreLinkContentArg>
 
-export class MoreLinkRoot extends BaseComponent<MoreLinkRootProps> {
+interface MoreLinkRootState {
+  isPopoverOpen: boolean
+}
+
+export class MoreLinkRoot extends BaseComponent<MoreLinkRootProps, MoreLinkRootState> {
+  computeDate = memoize(computeDate)
+  state = {
+    isPopoverOpen: false // HACK
+  }
+
   render(props: MoreLinkRootProps) {
     return (
       <ViewContextType.Consumer>
@@ -55,18 +70,30 @@ export class MoreLinkRoot extends BaseComponent<MoreLinkRootProps> {
           }
 
           return (
-            <RenderHook<MoreLinkContentArg>
-              hookProps={hookProps}
-              classNames={options.moreLinkClassNames}
-              content={options.moreLinkContent}
-              defaultContent={props.defaultContent || renderMoreLinkInner}
-              didMount={options.moreLinkDidMount}
-              willUnmount={options.moreLinkWillUnmount}
-            >
-              {(rootElRef, customClassNames, innerElRef, innerContent) => props.children(
-                rootElRef, ['fc-event-more'].concat(customClassNames), innerElRef, innerContent, this.handleClick
+            <Fragment>
+              <RenderHook<MoreLinkContentArg>
+                hookProps={hookProps}
+                classNames={options.moreLinkClassNames}
+                content={options.moreLinkContent}
+                defaultContent={props.defaultContent || renderMoreLinkInner}
+                didMount={options.moreLinkDidMount}
+                willUnmount={options.moreLinkWillUnmount}
+              >
+                {(rootElRef, customClassNames, innerElRef, innerContent) => props.children(
+                  rootElRef, ['fc-event-more'].concat(customClassNames), innerElRef, innerContent, this.handleClick
+                )}
+              </RenderHook>
+              {this.state.isPopoverOpen && (
+                <MorePopover
+                  date={this.computeDate(props.allDayDate, props.hiddenSegs, context)}
+                  dateProfile={props.dateProfile}
+                  todayRange={props.todayRange}
+                  extraDateSpan={props.extraDateSpan}
+                  alignmentEl={props.alignmentElRef.current}
+                  onClose={this.handlePopoverClose}
+                >this is some stuff</MorePopover>
               )}
-            </RenderHook>
+            </Fragment>
           )
         }}
       </ViewContextType.Consumer>
@@ -76,9 +103,7 @@ export class MoreLinkRoot extends BaseComponent<MoreLinkRootProps> {
   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)
+    let date = context.dateEnv.toDate(this.computeDate(props.allDayDate, props.hiddenSegs, context))
 
     function buildPublicSeg(seg: Seg) {
       let { def, instance, range } = seg.eventRange
@@ -94,7 +119,7 @@ export class MoreLinkRoot extends BaseComponent<MoreLinkRootProps> {
     if (typeof moreLinkClick === 'function') {
       moreLinkClick = moreLinkClick({
         date,
-        allDay,
+        allDay: Boolean(props.allDayDate),
         allSegs: props.allSegs.map(buildPublicSeg),
         hiddenSegs: props.hiddenSegs.map(buildPublicSeg),
         jsEvent: ev,
@@ -103,31 +128,16 @@ export class MoreLinkRoot extends BaseComponent<MoreLinkRootProps> {
     }
 
     if (!moreLinkClick || moreLinkClick === 'popover') {
-      console.log('open popover', date, props.hiddenSegs, props.positionElRef.current, props.extraDateSpan)
-      /*
-      (!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}
-        />
-      )
-      */
+      this.setState({ isPopoverOpen: true })
 
     } else if (typeof moreLinkClick === 'string') { // a view name
       context.calendarApi.zoomTo(date, moreLinkClick)
     }
   }
+
+  handlePopoverClose = () => {
+    this.setState({ isPopoverOpen: false })
+  }
 }
 
 function renderMoreLinkInner(props: MoreLinkContentArg) {
@@ -141,3 +151,8 @@ function getEarliestSeg(segs: Seg[]): Seg {
 function getEarlierSeg(seg0, seg1) {
   return seg0.eventRange.range.start < seg1.eventRange.range.start ? seg0 : seg1
 }
+
+function computeDate(allDayDate: DateMarker, segs: Seg[], context: ViewContext) {
+  return allDayDate ? context.dateEnv.toDate(allDayDate) :
+    context.dateEnv.toDate(getEarliestSeg(segs).eventRange.range.start)
+}

packages/daygrid/src/MorePopover.tsx → packages/common/src/common/MorePopover.tsx

@@ -1,34 +1,22 @@
-import {
-  DateComponent,
-  DateMarker,
-  createElement,
-  EventInstanceHash,
-  addDays,
-  DateRange,
-  getSegMeta,
-  DayCellRoot,
-  DayCellContent,
-  DateProfile,
-  Hit,
-  Dictionary,
-} from '@fullcalendar/common'
-import { TableSeg } from './TableSeg'
-import { TableBlockEvent } from './TableBlockEvent'
-import { TableListItemEvent } from './TableListItemEvent'
+import { DateComponent } from '../component/DateComponent'
+import { DateRange } from '../datelib/date-range'
+import { addDays, DateMarker } from '../datelib/marker'
+import { DateProfile } from '../DateProfileGenerator'
+import { Hit } from '../interactions/hit'
+import { Dictionary } from '../options'
+import { createElement, ComponentChildren } from '../vdom'
+import { DayCellContent } from './DayCellContent'
+import { DayCellRoot } from './DayCellRoot'
 import { Popover } from './Popover'
-import { hasListItemDisplay } from './event-rendering'
 
 export interface MorePopoverProps {
   date: DateMarker
   dateProfile: DateProfile
-  segs: TableSeg[]
-  selectedInstanceId: string
-  hiddenInstances: EventInstanceHash
   alignmentEl: HTMLElement
-  topAlignmentEl?: HTMLElement
-  onCloseClick?: () => void
   todayRange: DateRange
   extraDateSpan: Dictionary
+  children: ComponentChildren
+  onClose?: () => void
 }
 
 export class MorePopover extends DateComponent<MorePopoverProps> {
@@ -37,7 +25,7 @@ export class MorePopover extends DateComponent<MorePopoverProps> {
   render() {
     let { options, dateEnv } = this.context
     let { props } = this
-    let { date, hiddenInstances, todayRange, dateProfile, selectedInstanceId } = props
+    let { date, todayRange, dateProfile } = props
     let title = dateEnv.format(date, options.dayPopoverFormat)
 
     return (
@@ -48,9 +36,8 @@ export class MorePopover extends DateComponent<MorePopoverProps> {
             title={title}
             extraClassNames={['fc-more-popover'].concat(dayClassNames)}
             extraAttrs={dataAttrs}
-            onClose={props.onCloseClick}
             alignmentEl={props.alignmentEl}
-            topAlignmentEl={props.topAlignmentEl}
+            onClose={props.onClose}
           >
             <DayCellContent date={date} dateProfile={dateProfile} todayRange={todayRange}>
               {(innerElRef, innerContent) => (
@@ -58,38 +45,7 @@ export class MorePopover extends DateComponent<MorePopoverProps> {
                   <div className="fc-more-popover-misc" ref={innerElRef}>{innerContent}</div>
               )}
             </DayCellContent>
-            {props.segs.map((seg) => {
-              let instanceId = seg.eventRange.instance.instanceId
-              return (
-                <div
-                  className="fc-daygrid-event-harness"
-                  key={instanceId}
-                  style={{
-                    visibility: hiddenInstances[instanceId] ? 'hidden' : ('' as any),
-                  }}
-                >
-                  {hasListItemDisplay(seg) ? (
-                    <TableListItemEvent
-                      seg={seg}
-                      isDragging={false}
-                      isSelected={instanceId === selectedInstanceId}
-                      defaultDisplayEventEnd={false}
-                      {...getSegMeta(seg, todayRange)}
-                    />
-                  ) : (
-                    <TableBlockEvent
-                      seg={seg}
-                      isDragging={false}
-                      isResizing={false}
-                      isDateSelecting={false}
-                      isSelected={instanceId === selectedInstanceId}
-                      defaultDisplayEventEnd={false}
-                      {...getSegMeta(seg, todayRange)}
-                    />
-                  )}
-                </div>
-              )
-            })}
+            {props.children}
           </Popover>
         )}
       </DayCellRoot>

packages/daygrid/src/Popover.tsx → packages/common/src/common/Popover.tsx

@@ -1,14 +1,17 @@
-import { createElement, ComponentChildren, applyStyle, BaseComponent, DelayedRunner, Ref, setRef, Dictionary } from '@fullcalendar/common'
+import { Dictionary } from '../options'
+import { DelayedRunner } from '../util/DelayedRunner'
+import { applyStyle } from '../util/dom-manip'
+import { createElement, ComponentChildren, Ref } from '../vdom'
+import { BaseComponent, setRef } from '../vdom-util'
 
 export interface PopoverProps {
+  elRef?: Ref<HTMLElement>
   title: string
   extraClassNames?: string[]
   extraAttrs?: Dictionary
   alignmentEl: HTMLElement
-  topAlignmentEl?: HTMLElement
-  onClose?: () => void
-  elRef?: Ref<HTMLDivElement>
   children?: ComponentChildren
+  onClose?: () => void
 }
 
 const PADDING_FROM_VIEWPORT = 10
@@ -64,11 +67,9 @@ export class Popover extends BaseComponent<PopoverProps> {
 
   // Triggered when the user clicks *anywhere* in the document, for the autoHide feature
   handleDocumentMousedown = (ev) => {
-    let { onClose } = this.props
-
     // only hide the popover if the click happened outside the popover
-    if (onClose && !this.rootEl.contains(ev.target)) {
-      onClose()
+    if (!this.rootEl.contains(ev.target)) {
+      this.handleCloseClick()
     }
   }
 
@@ -78,31 +79,26 @@ export class Popover extends BaseComponent<PopoverProps> {
 
   handleCloseClick = () => {
     let { onClose } = this.props
-
     if (onClose) {
       onClose()
     }
   }
 
-  // TODO: adjust on window resize
-
-  /*
-  NOTE: the popover is position:fixed, so coordinates are relative to the viewport
-  NOTE: the PARENT calls this as well, on window resize. we would have wanted to use the repositioner,
-        but need to ensure that all other components have updated size first (for alignmentEl)
-  */
   private updateSize() {
-    let { alignmentEl, topAlignmentEl } = this.props
+    let { alignmentEl } = this.props
     let { rootEl } = this
 
     if (!rootEl) {
       return // not sure why this was null, but we shouldn't let external components call updateSize() anyway
     }
 
+    applyStyle(rootEl, { top: 0, left: 0 })
+    return
+
     let dims = rootEl.getBoundingClientRect() // only used for width,height
     let alignment = alignmentEl.getBoundingClientRect()
 
-    let top = topAlignmentEl ? topAlignmentEl.getBoundingClientRect().top : alignment.top
+    let top = alignment.top
     top = Math.min(top, window.innerHeight - dims.height - PADDING_FROM_VIEWPORT)
     top = Math.max(top, PADDING_FROM_VIEWPORT)
 

packages/common/src/main.css

@@ -17,3 +17,4 @@
 @import './styles/bg';
 @import './styles/event';
 @import './styles/h-event';
+@import './styles/popover';

packages/daygrid/src/styles/popover.css → packages/common/src/styles/popover.css

@@ -2,8 +2,6 @@
 .fc {
 
   & .fc-popover {
-    position: fixed;
-    top: 0; // for when not positioned yet
     box-shadow: 0 2px 6px rgba(0,0,0,.15);
   }
 

packages/daygrid/src/TableCell.tsx

@@ -103,8 +103,10 @@ export class TableCell extends DateComponent<TableCellProps> {
                   allDayDate={date}
                   singlePlacements={props.singlePlacements}
                   marginTop={props.moreMarginTop}
-                  positionElRef={rootElRef}
+                  alignmentElRef={rootElRef}
                   extraDateSpan={props.extraDateSpan}
+                  dateProfile={props.dateProfile}
+                  todayRange={props.todayRange}
                 />
               </div>
               <div className="fc-daygrid-day-bg">

packages/daygrid/src/TableCellMoreLink.tsx

@@ -6,6 +6,8 @@ import {
   memoize,
   DateMarker,
   Dictionary,
+  DateProfile,
+  DateRange,
 } from '@fullcalendar/common'
 import { TableSegPlacement } from './event-placement'
 import { TableSeg } from './TableSeg'
@@ -14,8 +16,10 @@ export interface TableCellMoreLinkProps {
   allDayDate: DateMarker
   singlePlacements: TableSegPlacement[]
   marginTop: number
-  positionElRef: RefObject<HTMLElement>
+  alignmentElRef: RefObject<HTMLElement>
   extraDateSpan?: Dictionary
+  dateProfile: DateProfile
+  todayRange: DateRange
 }
 
 export class TableCellMoreLink extends BaseComponent<TableCellMoreLinkProps> {
@@ -27,10 +31,12 @@ export class TableCellMoreLink extends BaseComponent<TableCellMoreLinkProps> {
     return Boolean(hiddenSegs.length) && (
       <div className="fc-daygrid-day-bottom" style={{ marginTop: props.marginTop }}>
         <MoreLinkRoot
+          dateProfile={props.dateProfile}
+          todayRange={props.todayRange}
           allDayDate={props.allDayDate}
           allSegs={allSegs}
           hiddenSegs={hiddenSegs}
-          positionElRef={props.positionElRef}
+          alignmentElRef={props.alignmentElRef}
           extraDateSpan={props.extraDateSpan}
         >
           {(rootElRef, classNames, innerElRef, innerContent, handleClick) => (
@@ -45,6 +51,59 @@ export class TableCellMoreLink extends BaseComponent<TableCellMoreLinkProps> {
         </MoreLinkRoot>
       </div>
     )
+
+    /*
+      (!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}
+        />
+      )
+
+      {props.segs.map((seg) => {
+        let instanceId = seg.eventRange.instance.instanceId
+        return (
+          <div
+            className="fc-daygrid-event-harness"
+            key={instanceId}
+            style={{
+              visibility: hiddenInstances[instanceId] ? 'hidden' : ('' as any),
+            }}
+          >
+            {hasListItemDisplay(seg) ? (
+              <TableListItemEvent
+                seg={seg}
+                isDragging={false}
+                isSelected={instanceId === selectedInstanceId}
+                defaultDisplayEventEnd={false}
+                {...getSegMeta(seg, todayRange)}
+              />
+            ) : (
+              <TableBlockEvent
+                seg={seg}
+                isDragging={false}
+                isResizing={false}
+                isDateSelecting={false}
+                isSelected={instanceId === selectedInstanceId}
+                defaultDisplayEventEnd={false}
+                {...getSegMeta(seg, todayRange)}
+              />
+            )}
+          </div>
+        )
+      })}
+      */
   }
 }
 

packages/daygrid/src/main.css

@@ -2,6 +2,5 @@
 @import '../../common/src/styles/mixins';
 
 @import './styles/vars';
-@import './styles/popover';
 @import './styles/daygrid';
 @import './styles/daygrid-event';

packages/timegrid/src/TimeCol.tsx

@@ -202,7 +202,8 @@ export class TimeCol extends BaseComponent<TimeColProps> {
 
   // will already have eventMinHeight applied because segInputs already had it
   renderHiddenGroups(hiddenGroups: SegEntryGroup[], segs: TimeColsSeg[]) {
-    let { extraDateSpan } = this.props
+    let { extraDateSpan, dateProfile, todayRange } = this.props
+
     return hiddenGroups.map((hiddenGroup) => {
       let positionCss = this.computeSegTopBottomCss(hiddenGroup)
       return (
@@ -211,6 +212,8 @@ export class TimeCol extends BaseComponent<TimeColProps> {
           top={positionCss.top}
           bottom={positionCss.bottom}
           extraDateSpan={extraDateSpan}
+          dateProfile={dateProfile}
+          todayRange={todayRange}
         />
       )
     })

packages/timegrid/src/TimeColMoreLink.tsx

@@ -1,5 +1,5 @@
 import {
-  createElement, MoreLinkContentArg, MoreLinkRoot, BaseComponent, createRef, setRef, Dictionary,
+  createElement, MoreLinkContentArg, MoreLinkRoot, BaseComponent, createRef, setRef, Dictionary, DateProfile, DateRange,
 } from '@fullcalendar/common'
 import { TimeColsSeg } from './TimeColsSeg'
 
@@ -8,6 +8,8 @@ export interface TimeColMoreLinkProps {
   top: number
   bottom: number
   extraDateSpan?: Dictionary
+  dateProfile: DateProfile
+  todayRange: DateRange
 }
 
 export class TimeColMoreLink extends BaseComponent<TimeColMoreLinkProps> {
@@ -19,9 +21,11 @@ export class TimeColMoreLink extends BaseComponent<TimeColMoreLinkProps> {
         allDayDate={null}
         allSegs={props.hiddenSegs}
         hiddenSegs={props.hiddenSegs}
-        positionElRef={this.rootElRef}
+        alignmentElRef={this.rootElRef}
         defaultContent={renderMoreLinkInner}
         extraDateSpan={props.extraDateSpan}
+        dateProfile={props.dateProfile}
+        todayRange={props.todayRange}
       >
         {(rootElRef, classNames, innerElRef, innerContent, handleClick) => (
           <a