[changed] "show more" behavior is cleaner

Author: jquense

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 (
+      <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

src/EventRow.jsx

@@ -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;
 
@@ -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'))
@@ -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))
   }
 });
 

src/EventRowMixin.js

@@ -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))
+  }
+}