diff --git a/src/EventEndingRow.jsx b/src/EventEndingRow.jsx
new file mode 100644
index 000000000..6dde90020
--- /dev/null
+++ b/src/EventEndingRow.jsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import EventRowMixin from './EventRowMixin';
+import { eventLevels } from './utils/eventLevels';
+import message from './utils/messages';
+import range from 'lodash/utility/range';
+
+let isSegmentInSlot = (seg, slot) => seg.left <= slot && seg.right >= slot;
+let eventsInSlot = (segments, slot) => segments.filter(seg => isSegmentInSlot(seg, slot)).length
+
+let EventRow = React.createClass({
+
+ displayName: 'EventRow',
+
+ propTypes: {
+ segments: React.PropTypes.array,
+ slots: React.PropTypes.number
+ },
+
+ mixins: [ EventRowMixin ],
+
+ render(){
+ let { segments, slots: slotCount } = this.props;
+ let rowSegments = eventLevels(segments).levels[0];
+
+ let current = 1
+ , lastEnd = 1
+ , row = [];
+
+ while (current <= slotCount){
+ let key = '_lvl_' + current;
+
+ let { event, left, right, span } = rowSegments
+ .filter(seg => isSegmentInSlot(seg, current))[0] || {} //eslint-disable-line
+
+ if (!event) {
+ current++
+ continue;
+ }
+
+ if (this.canRenderSlotEvent(left, span)) {
+ let gap = left - lastEnd;
+ let content = this.renderEvent(event)
+
+ if (gap)
+ row.push(this.renderSpan(gap, key + '_gap'))
+
+ row.push(
+ this.renderSpan(span, key, content)
+ )
+
+ lastEnd = current = (right + 1);
+ }
+ else {
+ row.push(this.renderSpan(1, key, this.renderShowMore(segments, current)))
+ current++;
+ }
+ }
+
+ return (
+
- {this._headers(rows[0], weekdayFormat, culture)}
+ {this._headers(weeks[0], weekdayFormat, culture)}
- { rows.map((row, idx) =>
- this._row(row, idx, measure && this._renderMeasureRows))
+ { weeks.map((week, idx) =>
+ this.renderWeek(week, idx, measure && this._renderMeasureRows))
}
)
},
- _row(row, rowIdx, content) {
- let first = row[0]
- let last = row[row.length - 1]
- let evts = eventsForWeek(this.props.events, row[0], row[row.length - 1], this.props)
+ renderWeek(week, weekIdx, content) {
+ let first = week[0]
+ let last = week[week.length - 1]
+ let evts = eventsForWeek(this.props.events, week[0], week[week.length - 1], this.props)
evts.sort((a, b) => sortEvents(a, b, this.props))
let segments = evts = evts.map(evt => eventSegments(evt, first, last, this.props))
- let limit = this.state.rowLimit;
+ let limit = (this.state.rowLimit - 1) || 1;
let { levels, extra } = eventLevels(segments, limit)
+ content = content || ((lvls, wk) => lvls.map((lvl, idx) => this.renderRowLevel(lvl, wk, idx)))
+
return (
- this._firstRow = r)}
+ ref={!weekIdx && (r => this._firstRow = r)}
>
{
- this.renderBackground(row, rowIdx)
+ this.renderBackground(week, weekIdx)
}
this._firstDateRow = r)}
+ ref={!weekIdx && (r => this._firstDateRow = r)}
>
- { this._dates(row) }
+ { this._dates(week) }
{
- content
- ? content(levels, row, rowIdx)
- : levels.map((l, idx) => this.renderRowLevel(l, row, idx))
+ content(levels, week, weekIdx)
+ }
+ {
+ !!extra.length &&
+ this.renderShowMore(segments, extra, week, weekIdx, levels.length)
}
- {
- this.renderShowMore(segments, extra, row, rowIdx)
- }
{ this.props.popup
&& this._renderOverlay()
}
@@ -165,23 +167,6 @@ let MonthView = React.createClass({
)
},
- renderRowLevel(segments, week, idx){
- let first = week[0]
- let last = week[week.length - 1]
-
- return (
-
- )
- },
-
renderBackground(row, idx){
let self = this;
@@ -204,31 +189,41 @@ let MonthView = React.createClass({
)
},
- renderShowMore(segments, extraSegments, row, rowIdx) {
- return row.map((date, idx) => {
- let slot = idx + 1;
+ renderRowLevel(segments, week, idx){
+ let first = week[0]
+ let last = week[week.length - 1]
- let count = extraSegments
- .filter(seg => isSegmentInSlot(seg, slot)).length
+ return (
+
+ )
+ },
- let events = segments
- .filter(seg => isSegmentInSlot(seg, slot))
- .map(seg => seg.event)
+ renderShowMore(segments, extraSegments, week, weekIdx) {
+ let first = week[0]
+ let last = week[week.length - 1]
- let onClick = ()=> this._showMore(events, date, rowIdx, idx)
+ let onClick = slot => this._showMore(segments, week[slot - 1], weekIdx, slot)
- return count
- ? (
-
- {'show ' + count + ' more'}
-
- ) : false
- })
+ return (
+
+ )
},
_dates(row){
@@ -348,12 +343,16 @@ let MonthView = React.createClass({
})
},
- _showMore(events, date, row, slot){
- let cell = findDOMNode(this._bgRows[row]).children[slot];
+ _showMore(segments, date, weekIdx, slot){
+ let cell = findDOMNode(this._bgRows[weekIdx]).children[slot - 1];
+
+ let events = segments
+ .filter(seg => isSegmentInSlot(seg, slot))
+ .map(seg => seg.event)
//cancel any pending selections so only the event click goes through.
this.clearSelection()
-
+
if (this.props.popup) {
let position = getPosition(cell, findDOMNode(this));
diff --git a/src/utils/messages.js b/src/utils/messages.js
index 8f6d0194d..d9f54269a 100644
--- a/src/utils/messages.js
+++ b/src/utils/messages.js
@@ -15,7 +15,7 @@ import invariant from 'invariant';
today: 'today',
agenda: 'agenda',
- hiddenEvents: total => `show ${total} more`
+ showMore: total => `+${total} more`
}
export function set(key, msg){