"Fossies" - the Fresh Open Source Software Archive  

Source code changes of the file "packages/list/src/ListViewEventRow.tsx" between
fullcalendar-5.9.0.tar.gz and fullcalendar-5.10.0.tar.gz

About: FullCalendar is a full-sized drag & drop JavaScript event calendar.

ListViewEventRow.tsx  (fullcalendar-5.9.0):ListViewEventRow.tsx  (fullcalendar-5.10.0)
import { import {
MinimalEventProps, BaseComponent, ViewContext, createElement, AllDayContentArg , MinimalEventProps, BaseComponent, ViewContext, createElement, AllDayContentArg ,
Seg, isMultiDayRange, DateFormatter, buildSegTimeText, createFormatter, EventC ontentArg, EventRoot, ComponentChildren, RenderHook, Seg, isMultiDayRange, DateFormatter, buildSegTimeText, createFormatter, EventR oot, ComponentChildren, RenderHook, getSegAnchorAttrs,
} from '@fullcalendar/common' } from '@fullcalendar/common'
const DEFAULT_TIME_FORMAT = createFormatter({ const DEFAULT_TIME_FORMAT = createFormatter({
hour: 'numeric', hour: 'numeric',
minute: '2-digit', minute: '2-digit',
meridiem: 'short', meridiem: 'short',
}) })
export class ListViewEventRow extends BaseComponent<MinimalEventProps> { export interface ListViewEventRowProps extends MinimalEventProps {
timeHeaderId: string
eventHeaderId: string
dateHeaderId: string
}
export class ListViewEventRow extends BaseComponent<ListViewEventRowProps> {
render() { render() {
let { props, context } = this let { props, context } = this
let { seg } = props let { seg, timeHeaderId, eventHeaderId, dateHeaderId } = props
let timeFormat = context.options.eventTimeFormat || DEFAULT_TIME_FORMAT let timeFormat = context.options.eventTimeFormat || DEFAULT_TIME_FORMAT
return ( return (
<EventRoot <EventRoot
seg={seg} seg={seg}
timeText="" // BAD. because of all-day content timeText="" // BAD. because of all-day content
disableDragging disableDragging
disableResizing disableResizing
defaultContent={renderEventInnerContent} defaultContent={() => renderEventInnerContent(seg, context) /* weird */}
isPast={props.isPast} isPast={props.isPast}
isFuture={props.isFuture} isFuture={props.isFuture}
isToday={props.isToday} isToday={props.isToday}
isSelected={props.isSelected} isSelected={props.isSelected}
isDragging={props.isDragging} isDragging={props.isDragging}
isResizing={props.isResizing} isResizing={props.isResizing}
isDateSelecting={props.isDateSelecting} isDateSelecting={props.isDateSelecting}
> >
{(rootElRef, classNames, innerElRef, innerContent, hookProps) => ( {(rootElRef, classNames, innerElRef, innerContent, hookProps) => (
<tr className={['fc-list-event', hookProps.event.url ? 'fc-event-force d-url' : ''].concat(classNames).join(' ')} ref={rootElRef}> <tr className={['fc-list-event', hookProps.event.url ? 'fc-event-force d-url' : ''].concat(classNames).join(' ')} ref={rootElRef}>
{buildTimeContent(seg, timeFormat, context)} {buildTimeContent(seg, timeFormat, context, timeHeaderId, dateHeader
<td className="fc-list-event-graphic"> Id)}
<td aria-hidden className="fc-list-event-graphic">
<span className="fc-list-event-dot" style={{ borderColor: hookProp s.borderColor || hookProps.backgroundColor }} /> <span className="fc-list-event-dot" style={{ borderColor: hookProp s.borderColor || hookProps.backgroundColor }} />
</td> </td>
<td className="fc-list-event-title" ref={innerElRef}> <td ref={innerElRef} headers={`${eventHeaderId} ${dateHeaderId}`} cl assName="fc-list-event-title">
{innerContent} {innerContent}
</td> </td>
</tr> </tr>
)} )}
</EventRoot> </EventRoot>
) )
} }
} }
function renderEventInnerContent(props: EventContentArg) { function renderEventInnerContent(seg: Seg, context: ViewContext) {
let { event } = props let interactiveAttrs = getSegAnchorAttrs(seg, context)
let url = event.url
let anchorAttrs = url ? { href: url } : {}
return ( return (
<a {...anchorAttrs}> <a {...interactiveAttrs}>
{/* TODO: document how whole row become clickable */} {/* TODO: document how whole row become clickable */}
{event.title} {seg.eventRange.def.title}
</a> </a>
) )
} }
function buildTimeContent(seg: Seg, timeFormat: DateFormatter, context: ViewCont function buildTimeContent(
ext): ComponentChildren { seg: Seg,
timeFormat: DateFormatter,
context: ViewContext,
timeHeaderId: string,
dateHeaderId: string,
): ComponentChildren {
let { options } = context let { options } = context
if (options.displayEventTime !== false) { if (options.displayEventTime !== false) {
let eventDef = seg.eventRange.def let eventDef = seg.eventRange.def
let eventInstance = seg.eventRange.instance let eventInstance = seg.eventRange.instance
let doAllDay = false let doAllDay = false
let timeText: string let timeText: string
if (eventDef.allDay) { if (eventDef.allDay) {
doAllDay = true doAllDay = true
skipping to change at line 122 skipping to change at line 130
return ( return (
<RenderHook<AllDayContentArg> // needed? <RenderHook<AllDayContentArg> // needed?
hookProps={hookProps} hookProps={hookProps}
classNames={options.allDayClassNames} classNames={options.allDayClassNames}
content={options.allDayContent} content={options.allDayContent}
defaultContent={renderAllDayInner} defaultContent={renderAllDayInner}
didMount={options.allDayDidMount} didMount={options.allDayDidMount}
willUnmount={options.allDayWillUnmount} willUnmount={options.allDayWillUnmount}
> >
{(rootElRef, classNames, innerElRef, innerContent) => ( {(rootElRef, classNames, innerElRef, innerContent) => (
<td className={['fc-list-event-time'].concat(classNames).join(' ')} ref={rootElRef}> <td ref={rootElRef} headers={`${timeHeaderId} ${dateHeaderId}`} clas sName={['fc-list-event-time'].concat(classNames).join(' ')}>
{innerContent} {innerContent}
</td> </td>
)} )}
</RenderHook> </RenderHook>
) )
} }
return ( return (
<td className="fc-list-event-time"> <td className="fc-list-event-time">
{timeText} {timeText}
 End of changes. 11 change blocks. 
18 lines changed or deleted 26 lines changed or added

Home  |  About  |  Features  |  All  |  Newest  |  Dox  |  Diffs  |  RSS Feeds  |  Screenshots  |  Comments  |  Imprint  |  Privacy  |  HTTP(S)