Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Timeview all-day area collapse #3

Merged
merged 2 commits into from
Jul 2, 2018
Merged

Timeview all-day area collapse #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8584ba8
BigCalendar - Scroll and expand for all-day area
MichaelLonin Jun 26, 2018
1e5e24a
#305
alxmiron Jul 2, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 90 additions & 13 deletions examples/events.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,91 +8,168 @@ export default [
},
{
id: 1,
title: 'All Day Event very long title',
allDay: true,
start: new Date(2015, 3, 0),
end: new Date(2015, 3, 1),
},
{
id: 2,
title: 'All Day Event very long title',
allDay: true,
start: new Date(2015, 3, 0),
end: new Date(2015, 3, 1),
},
{
id: 3,
title: 'All Day Event very long title',
allDay: true,
start: new Date(2015, 3, 0),
end: new Date(2015, 3, 1),
},
{
id: 4,
title: 'All Day Event very long title',
allDay: true,
start: new Date(2015, 3, 0),
end: new Date(2015, 3, 1),
},
{
id: 5,
title: 'All Day Event very long title',
allDay: true,
start: new Date(2015, 3, 0),
end: new Date(2015, 3, 1),
},
{
id: 6,
title: 'All Day Event very long title',
allDay: true,
start: new Date(2015, 3, 0),
end: new Date(2015, 3, 1),
},
{
id: 7,
title: 'All Day Event very long title',
allDay: true,
start: new Date(2015, 3, 0),
end: new Date(2015, 3, 1),
},
{
id: 8,
title: 'All Day Event very long title',
allDay: true,
start: new Date(2015, 3, 0),
end: new Date(2015, 3, 1),
},
{
id: 9,
title: 'All Day Event very long title',
allDay: true,
start: new Date(2015, 3, 0),
end: new Date(2015, 3, 1),
},
{
id: 10,
title: 'All Day Event very long title',
allDay: true,
start: new Date(2015, 3, 0),
end: new Date(2015, 3, 1),
},
{
id: 11,
title: 'All Day Event very long title',
allDay: true,
start: new Date(2015, 3, 0),
end: new Date(2015, 3, 1),
},
{
id: 12,
title: 'Long Event',
start: new Date(2015, 3, 7),
end: new Date(2015, 3, 10),
},

{
id: 2,
id: 13,
title: 'DTS STARTS',
start: new Date(2016, 2, 13, 0, 0, 0),
end: new Date(2016, 2, 20, 0, 0, 0),
},

{
id: 3,
id: 14,
title: 'DTS ENDS',
start: new Date(2016, 10, 6, 0, 0, 0),
end: new Date(2016, 10, 13, 0, 0, 0),
},

{
id: 4,
id: 15,
title: 'Some Event',
start: new Date(2015, 3, 9, 0, 0, 0),
end: new Date(2015, 3, 9, 0, 0, 0),
},
{
id: 5,
id: 16,
title: 'Conference',
start: new Date(2015, 3, 11),
end: new Date(2015, 3, 13),
desc: 'Big conference for important people',
},
{
id: 6,
id: 17,
title: 'Meeting',
start: new Date(2015, 3, 12, 10, 30, 0, 0),
end: new Date(2015, 3, 12, 12, 30, 0, 0),
desc: 'Pre-meeting meeting, to prepare for the meeting',
},
{
id: 7,
id: 18,
title: 'Lunch',
start: new Date(2015, 3, 12, 12, 0, 0, 0),
end: new Date(2015, 3, 12, 13, 0, 0, 0),
desc: 'Power lunch',
},
{
id: 8,
id: 19,
title: 'Meeting',
start: new Date(2015, 3, 12, 14, 0, 0, 0),
end: new Date(2015, 3, 12, 15, 0, 0, 0),
},
{
id: 9,
id: 20,
title: 'Happy Hour',
start: new Date(2015, 3, 12, 17, 0, 0, 0),
end: new Date(2015, 3, 12, 17, 30, 0, 0),
desc: 'Most important meal of the day',
},
{
id: 10,
id: 21,
title: 'Dinner',
start: new Date(2015, 3, 12, 20, 0, 0, 0),
end: new Date(2015, 3, 12, 21, 0, 0, 0),
},
{
id: 11,
id: 22,
title: 'Birthday Party',
start: new Date(2015, 3, 13, 7, 0, 0),
end: new Date(2015, 3, 13, 10, 30, 0),
},
{
id: 12,
id: 23,
title: 'Late Night Event',
start: new Date(2015, 3, 17, 19, 30, 0),
end: new Date(2015, 3, 18, 2, 0, 0),
},
{
id: 13,
id: 24,
title: 'Multi-day Event',
start: new Date(2015, 3, 20, 19, 30, 0),
end: new Date(2015, 3, 22, 2, 0, 0),
},
{
id: 14,
id: 25,
title: 'Today',
start: new Date(new Date().setHours(new Date().getHours() - 3)),
end: new Date(new Date().setHours(new Date().getHours() + 3)),
Expand Down
110 changes: 59 additions & 51 deletions src/DateContentRow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { eventSegments, endOfRange, eventLevels } from './utils/eventLevels'
import BackgroundCells from './BackgroundCells'
import EventRow from './EventRow'
import EventEndingRow from './EventEndingRow'
import DateContentRowCollapse from './DateContentRowCollapse'

let isSegmentInSlot = (seg, slot) => seg.left <= slot && seg.right >= slot

Expand All @@ -28,6 +29,8 @@ const propTypes = {
selectable: PropTypes.oneOf([true, false, 'ignoreEvents']),
longPressThreshold: PropTypes.number,

collapsable: PropTypes.bool,

onShowMore: PropTypes.func,
onSelectSlot: PropTypes.func,
onSelectEnd: PropTypes.func,
Expand All @@ -41,13 +44,14 @@ const propTypes = {
eventComponent: elementType,
eventWrapperComponent: elementType.isRequired,
dateCellWrapperComponent: elementType,
minRows: PropTypes.number.isRequired,
minRows: PropTypes.number,
maxRows: PropTypes.number.isRequired,
}

const defaultProps = {
minRows: 0,
maxRows: Infinity,
collapsable: false,
}

class DateContentRow extends React.Component {
Expand Down Expand Up @@ -149,6 +153,7 @@ class DateContentRow extends React.Component {
onSelectStart,
onSelectEnd,
longPressThreshold,
collapsable,
...props
} = this.props

Expand All @@ -170,60 +175,63 @@ class DateContentRow extends React.Component {
))

let { levels, extra } = eventLevels(segments, Math.max(maxRows - 1, 1))
levels.push([]) // Always add empty row to catch all-day clicks
while (levels.length < minRows) levels.push([])

return (
<div className={className}>
<BackgroundCells
date={date}
getNow={getNow}
rtl={rtl}
range={range}
selectable={selectable}
container={this.getContainer}
dayPropGetter={dayPropGetter}
onSelectStart={onSelectStart}
onSelectEnd={onSelectEnd}
onSelectSlot={this.handleSelectSlot}
cellWrapperComponent={dateCellWrapperComponent}
longPressThreshold={longPressThreshold}
/>

<div className="rbc-row-content">
{renderHeader && (
<div className="rbc-row" ref={this.createHeadingRef}>
{range.map(this.renderHeadingCell)}
</div>
)}
{levels.map((segs, idx) => (
<EventRow
{...props}
key={idx}
start={first}
end={last}
segments={segs}
slots={range.length}
eventComponent={eventComponent}
eventWrapperComponent={eventWrapperComponent}
startAccessor={startAccessor}
endAccessor={endAccessor}
/>
))}
{!!extra.length && (
<EventEndingRow
{...props}
start={first}
end={last}
segments={extra}
onShowMore={this.handleShowMore}
eventComponent={eventComponent}
eventWrapperComponent={eventWrapperComponent}
startAccessor={startAccessor}
endAccessor={endAccessor}
/>
)}
<DateContentRowCollapse enabled={collapsable && levels.length > 5}>
<div className={className}>
<BackgroundCells
date={date}
getNow={getNow}
rtl={rtl}
range={range}
selectable={selectable}
container={this.getContainer}
dayPropGetter={dayPropGetter}
onSelectStart={onSelectStart}
onSelectEnd={onSelectEnd}
onSelectSlot={this.handleSelectSlot}
cellWrapperComponent={dateCellWrapperComponent}
longPressThreshold={longPressThreshold}
/>

<div className="rbc-row-content">
{renderHeader && (
<div className="rbc-row" ref={this.createHeadingRef}>
{range.map(this.renderHeadingCell)}
</div>
)}
{levels.map((segs, idx) => (
<EventRow
{...props}
key={idx}
start={first}
end={last}
segments={segs}
slots={range.length}
eventComponent={eventComponent}
eventWrapperComponent={eventWrapperComponent}
startAccessor={startAccessor}
endAccessor={endAccessor}
/>
))}
{!!extra.length && (
<EventEndingRow
{...props}
start={first}
end={last}
segments={extra}
onShowMore={this.handleShowMore}
eventComponent={eventComponent}
eventWrapperComponent={eventWrapperComponent}
startAccessor={startAccessor}
endAccessor={endAccessor}
/>
)}
</div>
</div>
</div>
</DateContentRowCollapse>
)
}
}
Expand Down
49 changes: 49 additions & 0 deletions src/DateContentRowCollapse.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import React from 'react'
import cn from 'classnames'
import PropTypes from 'prop-types'

const propTypes = {
enabled: PropTypes.bool,
}

const defaultProps = {
enabled: false,
}

class DateContentRowCollapse extends React.Component {
state = {
collapsed: true,
}

handleButtonClick = () => {
this.setState({ collapsed: !this.state.collapsed })
}

render() {
const { enabled, children } = this.props
if (!enabled) return children
return (
<React.Fragment>
<div
className={cn(
'rbc-row-content-collapse',
this.state.collapsed && 'collapsed'
)}
>
{children}
</div>
<button
onClick={this.handleButtonClick}
className="rbc-collapse-button"
>
{this.state.collapsed ? <span>&#9660;</span> : <span>&#9650;</span>}
</button>
</React.Fragment>
)
}
}

DateContentRowCollapse.propTypes = propTypes
DateContentRowCollapse.defaultProps = defaultProps

export default DateContentRowCollapse
1 change: 1 addition & 0 deletions src/TimeGridHeader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,7 @@ class TimeGridHeader extends React.Component {
onDoubleClick={this.props.onDoubleClickEvent}
onSelectSlot={this.props.onSelectSlot}
longPressThreshold={this.props.longPressThreshold}
collapsable
/>
</div>
</div>
Expand Down
Loading