Skip to content

Commit

Permalink
get table cell content working for print mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@arshaw
arshaw committed May 23, 2020
1 parent 610a4ab commit c5ce499
Show file tree
Hide file tree
Showing 8 changed files with 107 additions and 79 deletions.
2 changes: 1 addition & 1 deletion packages-premium
Submodule packages-premium updated from f389f6 to 2f25f4
2 changes: 2 additions & 0 deletions packages/daygrid/src/DayTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export interface DayTableProps {
headerAlignElRef?: RefObject<HTMLElement> // for more popover alignment
clientWidth: number | null
clientHeight: number | null
forPrint: boolean
}

export class DayTable extends DateComponent<DayTableProps, ViewContext> {
Expand Down Expand Up @@ -68,6 +69,7 @@ export class DayTable extends DateComponent<DayTableProps, ViewContext> {
headerAlignElRef={props.headerAlignElRef}
clientWidth={props.clientWidth}
clientHeight={props.clientHeight}
forPrint={props.forPrint}
/>
)
}
Expand Down
1 change: 1 addition & 0 deletions packages/daygrid/src/DayTableView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ export class DayTableView extends TableView {
headerAlignElRef={this.headerElRef}
clientWidth={contentArg.clientWidth}
clientHeight={contentArg.clientHeight}
forPrint={props.forPrint}
/>
)

Expand Down
4 changes: 3 additions & 1 deletion packages/daygrid/src/Table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ export interface TableProps {
dayMaxEvents: boolean | number
dayMaxEventRows: boolean | number
headerAlignElRef?: RefObject<HTMLElement>
forPrint: boolean
}

interface TableState {
Expand Down Expand Up @@ -152,11 +153,12 @@ export class Table extends DateComponent<TableProps, TableState> {
clientWidth={props.clientWidth}
buildMoreLinkText={buildMoreLinkText}
onMoreClick={this.handleMoreLinkClick}
forPrint={props.forPrint}
/>
))}
</tbody>
</table>
{(morePopoverState && morePopoverState.currentFgEventSegs === props.fgEventSegs) && // clear popover on event mod
{(!props.forPrint && morePopoverState && morePopoverState.currentFgEventSegs === props.fgEventSegs) && // clear popover on event mod
<MorePopover
date={morePopoverState.date}
dateProfile={dateProfile}
Expand Down
40 changes: 3 additions & 37 deletions packages/daygrid/src/TableCell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,6 @@ import {
DayCellRoot,
DayCellContent,
BaseComponent,
EventRenderRange,
addDays,
intersectRanges,
DateProfile,
VUIEvent,
setRef,
Expand All @@ -37,15 +34,15 @@ export interface TableCellProps {
fgContentElRef?: Ref<HTMLDivElement> // TODO: rename!!! classname confusion. is the "event" div
fgContent: ComponentChildren
fgPaddingBottom: CssDimValue
hasEvents: boolean // TODO: do something with this
// hasEvents: boolean // TODO: when reviving, event should "have events" even when none *start* on the cell
moreCnt: number
moreMarginTop: number
showDayNumber: boolean
showWeekNumber: boolean
todayRange: DateRange
buildMoreLinkText: (num: number) => string
onMoreClick?: (arg: MoreLinkArg) => void
allFgSegs: TableSeg[] // for more-popover. includes segs that aren't rooted in this cell but that pass over it
segsByEachCol: TableSeg[] // for more-popover. includes segs that aren't rooted in this cell but that pass over it
segIsHidden: { [instanceId: string]: boolean } // for more-popover. TODO: rename to be about selected instances
}

Expand Down Expand Up @@ -184,7 +181,7 @@ export class TableCell extends DateComponent<TableCellProps> {
let { props } = this

if (props.onMoreClick) {
let allSegs = resliceDaySegs(props.allFgSegs, props.date)
let allSegs = props.segsByEachCol
let hiddenSegs = allSegs.filter(
(seg: TableSeg) => props.segIsHidden[seg.eventRange.instance.instanceId]
)
Expand Down Expand Up @@ -213,37 +210,6 @@ function renderMoreLinkInner(props) {
}


// Given the events within an array of segment objects, reslice them to be in a single day
function resliceDaySegs(segs, dayDate) {
let dayStart = dayDate
let dayEnd = addDays(dayStart, 1)
let dayRange = { start: dayStart, end: dayEnd }
let newSegs = []

for (let seg of segs) {
let eventRange = seg.eventRange
let origRange = eventRange.range
let slicedRange = intersectRanges(origRange, dayRange)

if (slicedRange) {
newSegs.push({
...seg,
eventRange: {
def: eventRange.def,
ui: { ...eventRange.ui, durationEditable: false }, // hack to disable resizing
instance: eventRange.instance,
range: slicedRange
} as EventRenderRange,
isStart: seg.isStart && slicedRange.start.valueOf() === origRange.start.valueOf(),
isEnd: seg.isEnd && slicedRange.end.valueOf() === origRange.end.valueOf()
})
}
}

return newSegs
}


interface TableCellTopProps {
date: DateMarker
dateProfile: DateProfile
Expand Down
39 changes: 21 additions & 18 deletions packages/daygrid/src/TableRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,13 +46,14 @@ export interface TableRowProps {
showDayNumbers: boolean
showWeekNumbers: boolean
buildMoreLinkText: (num: number) => string
forPrint: boolean
}

interface TableRowState {
cellInnerPositions: PositionCache
cellContentPositions: PositionCache
maxContentHeight: number | null
segHeights: { [instanceId: string]: number } | null
segHeights: { [instanceIdAndFirstCol: string]: number } | null
}


Expand All @@ -61,7 +62,7 @@ export class TableRow extends DateComponent<TableRowProps, TableRowState> {
private cellElRefs = new RefMap<HTMLTableCellElement>() // the <td>
private cellInnerElRefs = new RefMap<HTMLElement>() // the fc-daygrid-day-frame
private cellContentElRefs = new RefMap<HTMLDivElement>() // the fc-daygrid-day-events
private segHarnessRefs = new RefMap<HTMLDivElement>()
private segHarnessRefs = new RefMap<HTMLDivElement>() // indexed by "instanceId:firstCol"
private rootElRef = createRef<HTMLTableRowElement>()

state: TableRowState = {
Expand All @@ -81,7 +82,9 @@ export class TableRow extends DateComponent<TableRowProps, TableRowState> {
let highlightSegsByCol = splitSegsByFirstCol(this.getHighlightSegs(), colCnt)
let mirrorSegsByCol = splitSegsByFirstCol(this.getMirrorSegs(), colCnt)

let { paddingBottoms, finalSegsByCol, segsByFirstCol, segIsHidden, segTops, segMarginTops, moreCnts, moreTops } = computeFgSegPlacement(
let { paddingBottoms, segsByFirstCol, segsByEachCol, segIsHidden, segTops, segMarginTops, moreCnts, moreTops } = computeFgSegPlacement(
props.forPrint,
props.cells,
props.fgEventSegs,
props.dayMaxEvents,
props.dayMaxEventRows,
Expand Down Expand Up @@ -137,12 +140,11 @@ export class TableRow extends DateComponent<TableRowProps, TableRowState> {
extraDataAttrs={cell.extraDataAttrs}
extraClassNames={cell.extraClassNames}
moreCnt={moreCnts[col]}
moreMarginTop={moreTops[col] /* rename */}
buildMoreLinkText={props.buildMoreLinkText}
onMoreClick={props.onMoreClick}
hasEvents={Boolean(normalFgNodes.length)}
allFgSegs={finalSegsByCol[col]}
segIsHidden={segIsHidden}
moreMarginTop={moreTops[col] /* rename */}
segsByEachCol={segsByEachCol[col]}
fgPaddingBottom={paddingBottoms[col]}
fgContentElRef={this.cellContentElRefs.createRef(cell.key)}
fgContent={( // Fragment scopes the keys
Expand All @@ -152,11 +154,12 @@ export class TableRow extends DateComponent<TableRowProps, TableRowState> {
</Fragment>
)}
bgContent={( // Fragment scopes the keys
<Fragment>
{this.renderFillSegs(highlightSegsByCol[col], 'highlight')}
{this.renderFillSegs(businessHoursByCol[col], 'non-business')}
{this.renderFillSegs(bgEventSegsByCol[col], 'bg-event')}
</Fragment>
!props.forPrint &&
<Fragment>
{this.renderFillSegs(highlightSegsByCol[col], 'highlight')}
{this.renderFillSegs(businessHoursByCol[col], 'non-business')}
{this.renderFillSegs(bgEventSegsByCol[col], 'bg-event')}
</Fragment>
)}
/>
)
Expand Down Expand Up @@ -219,18 +222,18 @@ export class TableRow extends DateComponent<TableRowProps, TableRowState> {
isDateSelecting?: boolean
): VNode[] {
let { context } = this
let { eventSelection } = this.props
let { eventSelection, forPrint } = this.props
let { cellInnerPositions, cellContentPositions } = this.state
let defaultDisplayEventEnd = this.props.cells.length === 1 // colCnt === 1
let nodes: VNode[] = []

if (cellInnerPositions && cellContentPositions) {
if (forPrint || (cellInnerPositions && cellContentPositions)) {
for (let seg of segs) {
let instanceId = seg.eventRange.instance.instanceId
let isMirror = isDragging || isResizing || isDateSelecting
let isSelected = selectedInstanceHash[instanceId]
let isInvisible = segIsHidden[instanceId] || isSelected
let isAbsolute = segIsHidden[instanceId] || isMirror || seg.firstCol !== seg.lastCol || !seg.isStart || !seg.isEnd // TODO: simpler way? NOT DRY
let isInvisible = !forPrint && (segIsHidden[instanceId] || isSelected)
let isAbsolute = !forPrint && (segIsHidden[instanceId] || isMirror || seg.firstCol !== seg.lastCol || !seg.isStart || !seg.isEnd) // TODO: simpler way? NOT DRY
let marginTop: CssDimValue
let top: CssDimValue
let left: CssDimValue
Expand Down Expand Up @@ -261,7 +264,7 @@ export class TableRow extends DateComponent<TableRowProps, TableRowState> {
<div
className={'fc-daygrid-event-harness' + (isAbsolute ? ' fc-daygrid-event-harness-abs' : '')}
key={instanceId}
ref={isMirror ? null : this.segHarnessRefs.createRef(instanceId)}
ref={isMirror ? null : this.segHarnessRefs.createRef(instanceId + ':' + seg.firstCol) /* in print mode when in mult cols, could collide */}
style={{
visibility: isInvisible ? 'hidden' : ('' as any),
marginTop: marginTop || '',
Expand Down Expand Up @@ -341,7 +344,7 @@ export class TableRow extends DateComponent<TableRowProps, TableRowState> {
updateSizing(isExternalSizingChange) {
let { props, cellInnerElRefs, cellContentElRefs } = this

if (props.clientWidth !== null) { // positioning ready?
if (props.clientWidth !== null && !props.forPrint) { // positioning ready?

if (isExternalSizingChange) {
let cellInnerEls = props.cells.map((cell) => cellInnerElRefs.currentMap[cell.key])
Expand Down Expand Up @@ -378,7 +381,7 @@ export class TableRow extends DateComponent<TableRowProps, TableRowState> {


computeSegHeights() { // query
return mapHash(this.segHarnessRefs.currentMap, (eventHarnessEl, instanceId) => (
return mapHash(this.segHarnessRefs.currentMap, (eventHarnessEl) => (
eventHarnessEl.getBoundingClientRect().height
))
}
Expand Down

0 comments on commit c5ce499

Please sign in to comment.