react-big-calendar - npm Package Compare versions

Comparing version 0.7.2 to 0.8.0

CHANGELOG.md

@@ -0,1 +1,10 @@
+v0.8.0 - Mon, 26 Oct 2015 12:32:54 GMT
+--------------------------------------
+
+- [4dac3f5](../../commit/4dac3f5) [added] rbc-event-allday class in month view
+- [e314128](../../commit/e314128) [fixed] missing keys in popup
+- [0d5df79](../../commit/0d5df79) [changed] "show more" behavior is cleaner
+
+
+
 v0.7.2 - Sat, 24 Oct 2015 03:21:53 GMT
@@ -2,0 +11,0 @@ --------------------------------------

lib/Calendar.js

@@ -238,2 +238,5 @@ 'use strict';
 
+    /**
+     * String messages used throughout the component, override to provide localizations
+     */
     messages: _react.PropTypes.shape({
@@ -247,3 +250,4 @@ allDay: _react.PropTypes.string,
       day: _react.PropTypes.string,
-      agenda: _react.PropTypes.string
+      agenda: _react.PropTypes.string,
+      showMore: _react.PropTypes.func
     })
@@ -250,0 +254,0 @@ },

lib/DaySlot.js

@@ -197,5 +197,7 @@ 'use strict';
           style: _extends({}, xStyle, style),
+          title: label + ': ' + title,
           onClick: _this._select.bind(null, event),
           className: _classnames2['default']('rbc-event', className, {
-            'rbc-selected': _isSelected
+            'rbc-selected': _isSelected,
+            'rbc-event-overlaps': leftOffset !== 0
           })
@@ -205,3 +207,3 @@ },
           'div',
-          { className: 'rbc-event-label', title: label },
+          { className: 'rbc-event-label' },
           label
@@ -219,2 +221,5 @@ ),
   _slotStyle: function _slotStyle(startSlot, endSlot, leftOffset) {
+
+    endSlot = Math.max(endSlot, startSlot + this.props.step); //must be at least one `step` high
+
     var eventOffset = this.props.eventOffset || 10;
@@ -224,2 +229,4 @@
     var bottom = endSlot / this._totalMin * 100;
+    var per = leftOffset === 0 ? 0 : leftOffset * eventOffset;
+    var rightDiff = eventOffset / (leftOffset + 1);
 
@@ -229,4 +236,4 @@ return {
       height: bottom - top + '%',
-      left: leftOffset === 0 ? 0 : leftOffset * eventOffset + '%',
-      right: 0
+      left: per + '%',
+      width: (leftOffset === 0 ? 100 - eventOffset : 100 - per - rightDiff) + '%'
     };
@@ -243,3 +250,3 @@ },
 
-    selector.on('selecting', function (_ref2) {
+    var selectionState = function selectionState(_ref2) {
       var x = _ref2.x;
@@ -275,3 +282,3 @@ var y = _ref2.y;
 
-      _this2.setState({
+      return {
         selecting: true,
@@ -282,5 +289,13 @@ startDate: start,
         endSlot: positionFromDate(end, min, step)
-      });
+      };
+    };
+
+    selector.on('selecting', function (box) {
+      return _this2.setState(selectionState(box));
     });
 
+    selector.on('selectStart', function (box) {
+      return _this2.setState(selectionState(box));
+    });
+
     selector.on('click', function () {
@@ -287,0 +302,0 @@ _this2._clickTimer = setTimeout(function () {

lib/EventCell.js

@@ -48,3 +48,6 @@ 'use strict';
         end = _utilsAccessors.accessor(event, endAccessor),
-        start = _utilsAccessors.accessor(event, startAccessor);
+        start = _utilsAccessors.accessor(event, startAccessor),
+        isAllDay = _utilsAccessors.accessor(event, props.allDayAccessor),
+        continuesPrior = _utilsDates2['default'].lt(start, slotStart, 'day'),
+        continuesAfter = _utilsDates2['default'].gt(end, slotEnd, 'day');
 
@@ -61,4 +64,5 @@ if (eventPropGetter) var _eventPropGetter = eventPropGetter(event, start, end, selected),
           'rbc-selected': selected,
-          'rbc-event-continues-prior': _utilsDates2['default'].lt(start, slotStart, 'day'),
-          'rbc-event-continues-after': _utilsDates2['default'].gt(end, slotEnd, 'day')
+          'rbc-event-allday': isAllDay || _utilsDates2['default'].diff(start, _utilsDates2['default'].ceil(end, 'day'), 'day') > 1,
+          'rbc-event-continues-prior': continuesPrior,
+          'rbc-event-continues-after': continuesAfter
         }),
@@ -65,0 +69,0 @@ onClick: function () {

lib/EventRow.js

@@ -11,31 +11,6 @@ 'use strict';
 
-var _reactDom = require('react-dom');
+var _EventRowMixin = require('./EventRowMixin');
 
-var _EventCell = require('./EventCell');
+var _EventRowMixin2 = _interopRequireDefault(_EventRowMixin);
 
-var _EventCell2 = _interopRequireDefault(_EventCell);
-
-var _domHelpersQueryHeight = require('dom-helpers/query/height');
-
-var _domHelpersQueryHeight2 = _interopRequireDefault(_domHelpersQueryHeight);
-
-var _utilsPropTypes = require('./utils/propTypes');
-
-var _utilsEventLevels = require('./utils/eventLevels');
-
-var _utilsSelection = require('./utils/selection');
-
-var propTypes = {
-  segments: _react2['default'].PropTypes.array,
-  end: _react2['default'].PropTypes.instanceOf(Date),
-  start: _react2['default'].PropTypes.instanceOf(Date),
-
-  titleAccessor: _utilsPropTypes.accessor,
-  allDayAccessor: _utilsPropTypes.accessor,
-  startAccessor: _utilsPropTypes.accessor,
-  endAccessor: _utilsPropTypes.accessor,
-
-  onEventClick: _react2['default'].PropTypes.func
-};
-
 var EventRow = _react2['default'].createClass({
@@ -45,19 +20,12 @@
 
-  propTypes: propTypes,
-
-  getDefaultProps: function getDefaultProps() {
-    return {
-      segments: [],
-      selected: [],
-      slots: 7
-    };
+  propTypes: {
+    segments: _react2['default'].PropTypes.array
   },
 
+  mixins: [_EventRowMixin2['default']],
+
   render: function render() {
     var _this = this;
 
-    var _props = this.props;
-    var segments = _props.segments;
-    var start = _props.start;
-    var end = _props.end;
+    var segments = this.props.segments;
 
@@ -78,3 +46,3 @@ var lastEnd = 1;
 
-        var content = _this.renderEvent(event, start, end);
+        var content = _this.renderEvent(event);
 
@@ -90,42 +58,2 @@ if (gap) row.push(_this.renderSpan(gap, key + '_gap'));
     );
-  },
-
-  renderEvent: function renderEvent(event, start, end) {
-    var props = arguments[3] === undefined ? {} : arguments[3];
-    var _props2 = this.props;
-    var eventPropGetter = _props2.eventPropGetter;
-    var selected = _props2.selected;
-    var startAccessor = _props2.startAccessor;
-    var endAccessor = _props2.endAccessor;
-    var titleAccessor = _props2.titleAccessor;
-    var eventComponent = _props2.eventComponent;
-    var onSelect = _props2.onSelect;
-
-    return _react2['default'].createElement(_EventCell2['default'], {
-      event: event,
-      eventPropGetter: eventPropGetter,
-      onSelect: onSelect,
-      selected: _utilsSelection.isSelected(event, selected),
-      startAccessor: startAccessor,
-      endAccessor: endAccessor,
-      titleAccessor: titleAccessor,
-      slotStart: start,
-      slotEnd: end,
-      component: eventComponent
-    });
-  },
-
-  renderSpan: function renderSpan(len, key) {
-    var content = arguments[2] === undefined ? ' ' : arguments[2];
-    var slots = this.props.slots;
-
-    return _react2['default'].createElement(
-      'div',
-      { key: key, className: 'rbc-row-segment', style: _utilsEventLevels.segStyle(Math.abs(len), slots) },
-      content
-    );
-  },
-
-  getRowHeight: function getRowHeight() {
-    _domHelpersQueryHeight2['default'](_reactDom.findDOMNode(this));
   }
@@ -132,0 +60,0 @@ });

lib/Month.js

@@ -55,2 +55,6 @@ 'use strict';
 
+var _EventEndingRow = require('./EventEndingRow');
+
+var _EventEndingRow2 = _interopRequireDefault(_EventEndingRow);
+
 var _Popup = require('./Popup');
@@ -72,6 +76,2 @@
 
-var isSegmentInSlot = function isSegmentInSlot(seg, slot) {
-  return seg.left <= slot && seg.right >= slot;
-};
-
 var eventsForWeek = function eventsForWeek(evts, start, end, props) {
@@ -83,2 +83,6 @@ return evts.filter(function (e) {
 
+var isSegmentInSlot = function isSegmentInSlot(seg, slot) {
+  return seg.left <= slot && seg.right >= slot;
+};
+
 var propTypes = _extends({}, _EventRow2['default'].PropTypes, {
@@ -160,7 +164,7 @@
     var month = _utilsDates2['default'].visibleDays(date, culture);
-    var rows = _lodashArrayChunk2['default'](month, 7);
+    var weeks = _lodashArrayChunk2['default'](month, 7);
 
     var measure = this.state.needLimitMeasure;
 
-    this._rowCount = rows.length;
+    this._weekCount = weeks.length;
 
@@ -177,6 +181,6 @@ var elementProps = _lodashObjectOmit2['default'](this.props, Object.keys(propTypes));
         { className: 'rbc-row rbc-month-header' },
-        this._headers(rows[0], weekdayFormat, culture)
+        this._headers(weeks[0], weekdayFormat, culture)
       ),
-      rows.map(function (row, idx) {
-        return _this2._row(row, idx, measure && _this2._renderMeasureRows);
+      weeks.map(function (week, idx) {
+        return _this2.renderWeek(week, idx, measure && _this2._renderMeasureRows);
       })
@@ -186,8 +190,8 @@ );
 
-  _row: function _row(row, rowIdx, content) {
+  renderWeek: function renderWeek(week, weekIdx, content) {
     var _this3 = this;
 
-    var first = row[0];
-    var last = row[row.length - 1];
-    var evts = eventsForWeek(this.props.events, row[0], row[row.length - 1], this.props);
+    var first = week[0];
+    var last = week[week.length - 1];
+    var evts = eventsForWeek(this.props.events, week[0], week[week.length - 1], this.props);
 
@@ -201,3 +205,3 @@ evts.sort(function (a, b) {
     });
-    var limit = this.state.rowLimit;
+    var limit = this.state.rowLimit - 1 || 1;
 
@@ -209,11 +213,17 @@ var _eventLevels = _utilsEventLevels.eventLevels(segments, limit);
 
+    content = content || function (lvls, wk) {
+      return lvls.map(function (lvl, idx) {
+        return _this3.renderRowLevel(lvl, wk, idx);
+      });
+    };
+
     return _react2['default'].createElement(
       'div',
-      { key: 'week_' + rowIdx,
+      { key: 'week_' + weekIdx,
         className: 'rbc-month-row',
-        ref: !rowIdx && function (r) {
+        ref: !weekIdx && function (r) {
           return _this3._firstRow = r;
         }
       },
-      this.renderBackground(row, rowIdx),
+      this.renderBackground(week, weekIdx),
       _react2['default'].createElement(
@@ -228,13 +238,11 @@ 'div',
             className: 'rbc-row',
-            ref: !rowIdx && function (r) {
+            ref: !weekIdx && function (r) {
               return _this3._firstDateRow = r;
             }
           },
-          this._dates(row)
+          this._dates(week)
         ),
-        content ? content(levels, row, rowIdx) : levels.map(function (l, idx) {
-          return _this3.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()
@@ -244,16 +252,2 @@ );
 
-  renderRowLevel: function renderRowLevel(segments, week, idx) {
-    var first = week[0];
-    var last = week[week.length - 1];
-
-    return _react2['default'].createElement(_EventRow2['default'], _extends({}, this.props, {
-      eventComponent: this.props.components.event,
-      onSelect: this._selectEvent,
-      key: idx,
-      segments: segments,
-      start: first,
-      end: last
-    }));
-  },
-
   renderBackground: function renderBackground(row, idx) {
@@ -289,33 +283,35 @@ var _this4 = this;
 
-  renderShowMore: function renderShowMore(segments, extraSegments, row, rowIdx) {
-    var _this5 = this;
+  renderRowLevel: function renderRowLevel(segments, week, idx) {
+    var first = week[0];
+    var last = week[week.length - 1];
 
-    return row.map(function (date, idx) {
-      var slot = idx + 1;
+    return _react2['default'].createElement(_EventRow2['default'], _extends({}, this.props, {
+      eventComponent: this.props.components.event,
+      onSelect: this._selectEvent,
+      key: idx,
+      segments: segments,
+      start: first,
+      end: last
+    }));
+  },
 
-      var count = extraSegments.filter(function (seg) {
-        return isSegmentInSlot(seg, slot);
-      }).length;
+  renderShowMore: function renderShowMore(segments, extraSegments, week, weekIdx) {
+    var _this5 = this;
 
-      var events = segments.filter(function (seg) {
-        return isSegmentInSlot(seg, slot);
-      }).map(function (seg) {
-        return seg.event;
-      });
+    var first = week[0];
+    var last = week[week.length - 1];
 
-      var onClick = function onClick() {
-        return _this5._showMore(events, date, rowIdx, idx);
-      };
+    var onClick = function onClick(slot) {
+      return _this5._showMore(segments, week[slot - 1], weekIdx, slot);
+    };
 
-      return count ? _react2['default'].createElement(
-        'a',
-        {
-          key: 'sm_' + idx,
-          href: '#',
-          className: 'rbc-show-more rbc-show-offset-' + slot,
-          onClick: onClick
-        },
-        'show ' + count + ' more'
-      ) : false;
-    });
+    return _react2['default'].createElement(_EventEndingRow2['default'], _extends({}, this.props, {
+      eventComponent: this.props.components.event,
+      onSelect: this._selectEvent,
+      onShowMore: onClick,
+      key: 'last_row_' + weekIdx,
+      segments: extraSegments,
+      start: first,
+      end: last
+    }));
   },
@@ -467,5 +463,11 @@
 
-  _showMore: function _showMore(events, date, row, slot) {
-    var cell = _reactDom.findDOMNode(this._bgRows[row]).children[slot];
+  _showMore: function _showMore(segments, date, weekIdx, slot) {
+    var cell = _reactDom.findDOMNode(this._bgRows[weekIdx]).children[slot - 1];
 
+    var events = segments.filter(function (seg) {
+      return isSegmentInSlot(seg, slot);
+    }).map(function (seg) {
+      return seg.event;
+    });
+
     //cancel any pending selections so only the event click goes through.
@@ -472,0 +474,0 @@ this.clearSelection();

lib/Popup.js

@@ -53,4 +53,4 @@ 'use strict';
       { style: style, className: 'rbc-overlay' },
-      events.map(function (event) {
-        return _react2['default'].createElement(_EventCell2['default'], _extends({}, props, { event: event, selected: _utilsSelection.isSelected(event, selected) }));
+      events.map(function (event, idx) {
+        return _react2['default'].createElement(_EventCell2['default'], _extends({ key: idx }, props, { event: event, selected: _utilsSelection.isSelected(event, selected) }));
       })
@@ -57,0 +57,0 @@ );

lib/Selection.js

@@ -32,2 +32,4 @@ 'use strict';
 
+var clickTolerance = 5;
+
 var Selection = (function () {
@@ -152,11 +154,5 @@ function Selection(node) {
 
-    var clickTolerance = 5;
-
-    var _mouseDownData = this._mouseDownData;
-    var x = _mouseDownData.x;
-    var y = _mouseDownData.y;
-
     var inRoot = !this.container || _domHelpersQueryContains2['default'](this.container(), e.target);
     var bounds = this._selectRect;
-    var click = Math.abs(e.pageX - x) <= clickTolerance && Math.abs(e.pageY - y) <= clickTolerance;
+    var click = this.isClick(e.pageX, e.pageY);
 
@@ -178,5 +174,5 @@ this._mouseDownData = null;
   Selection.prototype._openSelector = function _openSelector(e) {
-    var _mouseDownData2 = this._mouseDownData;
-    var x = _mouseDownData2.x;
-    var y = _mouseDownData2.y;
+    var _mouseDownData = this._mouseDownData;
+    var x = _mouseDownData.x;
+    var y = _mouseDownData.y;
 
@@ -196,3 +192,3 @@ var w = Math.abs(x - e.pageX);
 
-    this.emit('selecting', this._selectRect = {
+    if (!this.isClick(e.pageX, e.pageY)) this.emit('selecting', this._selectRect = {
       top: top,
@@ -211,2 +207,10 @@ left: left,
 
+  Selection.prototype.isClick = function isClick(pageX, pageY) {
+    var _mouseDownData2 = this._mouseDownData;
+    var x = _mouseDownData2.x;
+    var y = _mouseDownData2.y;
+
+    return Math.abs(pageX - x) <= clickTolerance && Math.abs(pageY - y) <= clickTolerance;
+  };
+
   return Selection;
@@ -213,0 +217,0 @@ })();

lib/utils/dates.js

@@ -62,2 +62,8 @@ 'use strict';
 
+  ceil: function ceil(date, unit) {
+    var floor = dates.startOf(date, unit);
+
+    return dates.eq(floor, date) ? floor : dates.add(floor, 1, unit);
+  },
+
   move: function move(date, min, max, unit, direction) {
@@ -64,0 +70,0 @@ var isUpOrDown = direction === _constants.directions.UP || direction === _constants.directions.DOWN,

lib/utils/eventLevels.js

@@ -26,3 +26,3 @@ 'use strict';
   var start = _dates2['default'].max(_accessors.accessor(event, startAccessor), first);
-  var end = _dates2['default'].min(_accessors.accessor(event, endAccessor), _dates2['default'].add(last, 1, 'day'));
+  var end = _dates2['default'].min(_dates2['default'].ceil(_accessors.accessor(event, endAccessor), 'day'), _dates2['default'].add(last, 1, 'day'));
 
@@ -29,0 +29,0 @@ var span = _dates2['default'].diff(start, end, 'day');

lib/utils/messages.js

@@ -32,4 +32,4 @@ 'use strict';
 
-  hiddenEvents: function hiddenEvents(total) {
-    return 'show ' + total + ' more';
+  showMore: function showMore(total) {
+    return '+' + total + ' more';
   }
@@ -36,0 +36,0 @@ };

package.json

 {
   "name": "react-big-calendar",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "Calendar! with events",
@@ -5,0 +5,0 @@ "author": "Jason Quense <[e-mail]>",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

142892

increased by3.64%

Number of package files

47

increased by4.44%

Lines of code

2901

increased by4.69%

No dependency changes