Skip to content

Commit

Permalink
[changed] "show more" behavior is cleaner
Browse files Browse the repository at this point in the history
  • Loading branch information
jquense committed Oct 26, 2015
1 parent 329dda4 commit 0d5df79
Show file tree
Hide file tree
Showing 5 changed files with 235 additions and 129 deletions.
94 changes: 94 additions & 0 deletions src/EventEndingRow.jsx
Original file line number Diff line number Diff line change
@@ -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 (
<div className='rbc-row'>
{ row }
</div>
)
},

canRenderSlotEvent(slot, span){
let { segments } = this.props;

return range(slot, slot + span).every(s => {
let count = eventsInSlot(segments, s)

return count === 1
})
},

renderShowMore(segments, slot) {
let messages = message(this.props.messages)
let count = eventsInSlot(segments, slot)

return count
? (
<a
key={'sm_' + slot}
href='#'
className={'rbc-show-more'}
onClick={this.props.onShowMore.bind(null, slot)}
>
{messages.showMore(count)}
</a>
) : false
}
});

export default EventRow
72 changes: 7 additions & 65 deletions src/EventRow.jsx
Original file line number Diff line number Diff line change
@@ -1,41 +1,19 @@
import React from 'react';
import { findDOMNode } from 'react-dom';
import EventCell from './EventCell';
import getHeight from 'dom-helpers/query/height';
import { accessor } from './utils/propTypes';
import { segStyle } from './utils/eventLevels';
import { isSelected } from './utils/selection';

let propTypes = {
segments: React.PropTypes.array,
end: React.PropTypes.instanceOf(Date),
start: React.PropTypes.instanceOf(Date),

titleAccessor: accessor,
allDayAccessor: accessor,
startAccessor: accessor,
endAccessor: accessor,

onEventClick: React.PropTypes.func
};
import EventRowMixin from './EventRowMixin';


let EventRow = React.createClass({

displayName: 'EventRow',

propTypes,

getDefaultProps() {
return {
segments: [],
selected: [],
slots: 7
};
propTypes: {
segments: React.PropTypes.array
},

mixins: [EventRowMixin],

render(){
let { segments, start, end } = this.props;
let { segments } = this.props;

let lastEnd = 1;

Expand All @@ -46,7 +24,7 @@ let EventRow = React.createClass({
let key = '_lvl_' + li;
let gap = left - lastEnd;

let content = this.renderEvent(event, start, end)
let content = this.renderEvent(event)

if (gap)
row.push(this.renderSpan(gap, key + '_gap'))
Expand All @@ -62,42 +40,6 @@ let EventRow = React.createClass({
}
</div>
)
},

renderEvent(event, start, end, props = {}){
let {
eventPropGetter, selected, startAccessor, endAccessor
, titleAccessor, eventComponent, onSelect } = this.props;


return (
<EventCell
event={event}
eventPropGetter={eventPropGetter}
onSelect={onSelect}
selected={isSelected(event, selected)}
startAccessor={startAccessor}
endAccessor={endAccessor}
titleAccessor={titleAccessor}
slotStart={start}
slotEnd={end}
component={eventComponent}
/>
)
},

renderSpan(len, key, content = ' '){
let { slots } = this.props;

return (
<div key={key} className='rbc-row-segment' style={segStyle(Math.abs(len), slots)}>
{content}
</div>
)
},

getRowHeight(){
getHeight(findDOMNode(this))
}
});

Expand Down
71 changes: 71 additions & 0 deletions src/EventRowMixin.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import React, { PropTypes } from 'react';
import { findDOMNode } from 'react-dom';
import EventCell from './EventCell';
import getHeight from 'dom-helpers/query/height';
import { accessor, elementType } from './utils/propTypes';
import { segStyle } from './utils/eventLevels';
import { isSelected } from './utils/selection';


export default {
propType: {
slots: PropTypes.number.isRequired,
end: PropTypes.instanceOf(Date),
start: PropTypes.instanceOf(Date),

selected: PropTypes.array,
eventPropGetter: PropTypes.func,
titleAccessor: accessor,
allDayAccessor: accessor,
startAccessor: accessor,
endAccessor: accessor,

eventComponent: elementType,
onSelect: React.PropTypes.func
},

getDefaultProps() {
return {
segments: [],
selected: [],
slots: 7
}
},

renderEvent(event){
let {
eventPropGetter, selected, start, end
, startAccessor, endAccessor, titleAccessor
, allDayAccessor, eventComponent, onSelect } = this.props;

return (
<EventCell
event={event}
eventPropGetter={eventPropGetter}
onSelect={onSelect}
selected={isSelected(event, selected)}
startAccessor={startAccessor}
endAccessor={endAccessor}
titleAccessor={titleAccessor}
allDayAccessor={allDayAccessor}
slotStart={start}
slotEnd={end}
component={eventComponent}
/>
)
},

renderSpan(len, key, content = ' '){
let { slots } = this.props;

return (
<div key={key} className='rbc-row-segment' style={segStyle(Math.abs(len), slots)}>
{content}
</div>
)
},

getRowHeight(){
getHeight(findDOMNode(this))
}
}
Loading

0 comments on commit 0d5df79

Please sign in to comment.