react-big-calendar - npm Package Compare versions

Comparing version 0.12.3 to 0.13.0

CHANGELOG.md

@@ -0,1 +1,8 @@
+v0.13.0 - Wed, 22 Mar 2017 15:09:54 GMT
+---------------------------------------
+
+
+
+
+
 v0.12.3 - Sun, 15 Jan 2017 17:15:59 GMT
@@ -2,0 +9,0 @@ ---------------------------------------

lib/addons/dragAndDrop/backgroundWrapper.js

@@ -45,3 +45,3 @@ 'use strict';
   // the original start date and add it to newDate.value
-  var nextStart = type === 'dateWrapper' ? _dates2.default.merge(dropDate, start) : dropDate;
+  var nextStart = type === 'dateCellWrapper' ? _dates2.default.merge(dropDate, start) : dropDate;
 
@@ -48,0 +48,0 @@ var nextEnd = _dates2.default.add(nextStart, duration, 'milliseconds');

lib/Calendar.js

@@ -194,2 +194,37 @@ 'use strict';
     /**
+     * The string name of the destination view for drill-down actions, such
+     * as clicking a date header, or the truncated events links. If
+     * `getDrilldownView` is also specified it will be used instead.
+     *
+     * Set to `null` to disable drill-down actions.
+     *
+     * ```js
+     * <BigCalendar
+     *   drilldownView="agenda"
+     * />
+     * ```
+     */
+    drilldownView: _react2.default.PropTypes.string,
+
+    /**
+     * Functionally equivalent to `drilldownView`, but accepts a function
+     * that can return a view name. It's useful for customizing the drill-down
+     * actions depending on the target date and triggering view.
+     *
+     * Return `null` to disable drill-down actions.
+     *
+     * ```js
+     * <BigCalendar
+     *   getDrilldownView={(targetDate, currentViewName, configuredViewNames) =>
+     *     if (currentViewName === 'month' && configuredViewNames.includes('week'))
+     *       return 'week'
+     *
+     *     return null;
+     *   }}
+     * />
+     * ```
+     */
+    getDrilldownView: _react2.default.PropTypes.func,
+
+    /**
      * Determines whether the toolbar is displayed
@@ -461,2 +496,4 @@ */
 
+      drilldownView: _constants.views.DAY,
+
       titleAccessor: 'title',
@@ -494,18 +531,29 @@ allDayAccessor: 'allDay',
   },
-  render: function render() {
+  getDrilldownView: function getDrilldownView(date) {
     var _props = this.props,
         view = _props.view,
-        toolbar = _props.toolbar,
-        events = _props.events,
-        culture = _props.culture,
-        _props$components = _props.components,
-        components = _props$components === undefined ? {} : _props$components,
-        _props$formats = _props.formats,
-        formats = _props$formats === undefined ? {} : _props$formats,
-        style = _props.style,
-        className = _props.className,
-        elementProps = _props.elementProps,
-        current = _props.date,
-        props = _objectWithoutProperties(_props, ['view', 'toolbar', 'events', 'culture', 'components', 'formats', 'style', 'className', 'elementProps', 'date']);
+        drilldownView = _props.drilldownView,
+        getDrilldownView = _props.getDrilldownView;
 
+
+    if (!getDrilldownView) return drilldownView;
+
+    return getDrilldownView(date, view, Object.keys(this.getViews()));
+  },
+  render: function render() {
+    var _props2 = this.props,
+        view = _props2.view,
+        toolbar = _props2.toolbar,
+        events = _props2.events,
+        culture = _props2.culture,
+        _props2$components = _props2.components,
+        components = _props2$components === undefined ? {} : _props2$components,
+        _props2$formats = _props2.formats,
+        formats = _props2$formats === undefined ? {} : _props2$formats,
+        style = _props2.style,
+        className = _props2.className,
+        elementProps = _props2.elementProps,
+        current = _props2.date,
+        props = _objectWithoutProperties(_props2, ['view', 'toolbar', 'events', 'culture', 'components', 'formats', 'style', 'className', 'elementProps', 'date']);
+
     formats = (0, _formats2.default)(formats);
@@ -549,4 +597,5 @@
         components: viewComponents,
+        getDrilldownView: this.getDrilldownView,
         onNavigate: this.handleNavigate,
-        onHeaderClick: this.handleHeaderClick,
+        onDrillDown: this.handleDrillDown,
         onSelectEvent: this.handleSelectEvent,
@@ -559,6 +608,6 @@ onSelectSlot: this.handleSelectSlot,
   handleNavigate: function handleNavigate(action, newDate) {
-    var _props2 = this.props,
-        view = _props2.view,
-        date = _props2.date,
-        onNavigate = _props2.onNavigate;
+    var _props3 = this.props,
+        view = _props3.view,
+        date = _props3.date,
+        onNavigate = _props3.onNavigate;
 
@@ -570,4 +619,2 @@ var ViewComponent = this.getView();
     onNavigate(date, view);
-
-    if (action === _constants.navigate.DATE) this.handleViewChange(_constants.views.DAY);
   },
@@ -587,8 +634,5 @@ handleViewChange: function handleViewChange(view) {
   },
-  handleHeaderClick: function handleHeaderClick(date) {
-    var view = this.props.view;
+  handleDrillDown: function handleDrillDown(date, view) {
+    if (view) this.handleViewChange(view);
 
-
-    if (view === _constants.views.MONTH || view === _constants.views.WEEK) this._view(_constants.views.day);
-
     this.handleNavigate(_constants.navigate.DATE, date);
@@ -595,0 +639,0 @@ }

lib/DayColumn.js

@@ -37,2 +37,6 @@ 'use strict';
 
+var _dayViewLayout = require('./utils/dayViewLayout');
+
+var _dayViewLayout2 = _interopRequireDefault(_dayViewLayout);
+
 var _TimeColumn = require('./TimeColumn');
@@ -51,6 +55,2 @@
 
-function startsBefore(date, min) {
-  return _dates2.default.lt(_dates2.default.merge(min, date), min, 'minutes');
-}
-
 function startsAfter(date, max) {
@@ -60,29 +60,2 @@ return _dates2.default.gt(_dates2.default.merge(max, date), max, 'minutes');
 
-function positionFromDate(date, min, total) {
-  if (startsBefore(date, min)) return 0;
-
-  var diff = _dates2.default.diff(min, _dates2.default.merge(min, date), 'minutes');
-  return Math.min(diff, total);
-}
-
-function overlaps(event, events, _ref, last) {
-  var startAccessor = _ref.startAccessor,
-      endAccessor = _ref.endAccessor;
-
-  var eStart = (0, _accessors.accessor)(event, startAccessor);
-  var offset = last;
-
-  function overlap(eventB) {
-    return _dates2.default.lt(eStart, (0, _accessors.accessor)(eventB, endAccessor));
-  }
-
-  if (!events.length) return last - 1;
-  events.reverse().some(function (prevEvent) {
-    if (overlap(prevEvent)) return true;
-    offset = offset - 1;
-  });
-
-  return offset;
-}
-
 var DaySlot = _react2.default.createClass({
@@ -156,5 +129,6 @@ displayName: 'DaySlot',
         startSlot = _state.startSlot,
-        endSlot = _state.endSlot,
-        style = this._slotStyle(startSlot, endSlot, 0);
+        endSlot = _state.endSlot;
 
+    var style = this._slotStyle(startSlot, endSlot);
+
     var selectDates = {
@@ -199,2 +173,4 @@ start: this.state.startDate,
         EventWrapper = _props2.eventWrapperComponent,
+        isRtl = _props2.rtl,
+        step = _props2.step,
         startAccessor = _props2.startAccessor,
@@ -205,22 +181,20 @@ endAccessor = _props2.endAccessor,
 
-    var EventComponent = eventComponent,
-        lastLeftOffset = 0;
+    var EventComponent = eventComponent;
 
-    events.sort(function (a, b) {
-      return +(0, _accessors.accessor)(a, startAccessor) - +(0, _accessors.accessor)(b, startAccessor);
+    var styledEvents = (0, _dayViewLayout2.default)({
+      events: events, startAccessor: startAccessor, endAccessor: endAccessor, min: min, totalMin: this._totalMin, step: step
     });
 
-    return events.map(function (event, idx) {
+    return styledEvents.map(function (_ref, idx) {
+      var _extends2;
+
+      var event = _ref.event,
+          style = _ref.style;
+
       var start = (0, _accessors.accessor)(event, startAccessor);
       var end = (0, _accessors.accessor)(event, endAccessor);
-      var startSlot = positionFromDate(start, min, _this._totalMin);
-      var endSlot = positionFromDate(end, min, _this._totalMin);
 
-      var continuesPrior = startsBefore(start, min);
+      var continuesPrior = (0, _dayViewLayout.startsBefore)(start, min);
       var continuesAfter = startsAfter(end, max);
 
-      lastLeftOffset = Math.max(0, overlaps(event, events.slice(0, idx), _this.props, lastLeftOffset + 1));
-
-      var style = _this._slotStyle(startSlot, endSlot, lastLeftOffset);
-
       var title = (0, _accessors.accessor)(event, titleAccessor);
@@ -234,2 +208,8 @@ var label = _localizer2.default.format({ start: start, end: end }, eventTimeRangeFormat, culture);
 
+      var height = style.height,
+          top = style.top,
+          width = style.width,
+          xOffset = style.xOffset;
+
+
       return _react2.default.createElement(
@@ -241,3 +221,6 @@ EventWrapper,
           {
-            style: _extends({}, xStyle, style),
+            style: _extends({}, xStyle, (_extends2 = {
+              top: top + '%',
+              height: height + '%'
+            }, _extends2[isRtl ? 'right' : 'left'] = Math.max(0, xOffset) + '%', _extends2.width = width + '%', _extends2)),
             title: label + ': ' + title,
@@ -249,3 +232,2 @@ onClick: function onClick(e) {
               'rbc-selected': _isSelected,
-              'rbc-event-overlaps': lastLeftOffset !== 0,
               'rbc-event-continues-earlier': continuesPrior,
@@ -269,19 +251,10 @@ 'rbc-event-continues-later': continuesAfter
   },
-  _slotStyle: function _slotStyle(startSlot, endSlot, leftOffset) {
-    var _ref2;
-
-    endSlot = Math.max(endSlot, startSlot + this.props.step); //must be at least one `step` high
-
-    var eventOffset = this.props.eventOffset || 10,
-        isRtl = this.props.rtl;
-
+  _slotStyle: function _slotStyle(startSlot, endSlot) {
     var top = startSlot / this._totalMin * 100;
     var bottom = endSlot / this._totalMin * 100;
-    var per = leftOffset === 0 ? 0 : leftOffset * eventOffset;
-    var rightDiff = eventOffset / (leftOffset + 1);
 
-    return _ref2 = {
+    return {
       top: top + '%',
       height: bottom - top + '%'
-    }, _ref2[isRtl ? 'right' : 'left'] = per + '%', _ref2.width = (leftOffset === 0 ? 100 - eventOffset : 100 - per - rightDiff) + '%', _ref2;
+    };
   },
@@ -311,4 +284,4 @@ _selectable: function _selectable() {
 
-    var selectionState = function selectionState(_ref3) {
-      var y = _ref3.y;
+    var selectionState = function selectionState(_ref2) {
+      var y = _ref2.y;
       var _props3 = _this2.props,
@@ -344,4 +317,4 @@ step = _props3.step,
         endDate: end,
-        startSlot: positionFromDate(start, min, _this2._totalMin),
-        endSlot: positionFromDate(end, min, _this2._totalMin)
+        startSlot: (0, _dayViewLayout.positionFromDate)(start, min, _this2._totalMin),
+        endSlot: (0, _dayViewLayout.positionFromDate)(end, min, _this2._totalMin)
       };
@@ -377,5 +350,5 @@ };
   },
-  _selectSlot: function _selectSlot(_ref4) {
-    var startDate = _ref4.startDate,
-        endDate = _ref4.endDate;
+  _selectSlot: function _selectSlot(_ref3) {
+    var startDate = _ref3.startDate,
+        endDate = _ref3.endDate;
 
@@ -382,0 +355,0 @@ var current = startDate,

lib/Month.js

@@ -102,2 +102,4 @@ 'use strict';
   onShowMore: _react2.default.PropTypes.func,
+  onDrillDown: _react2.default.PropTypes.func,
+  getDrilldownView: _react2.default.PropTypes.func.isRequired,
 
@@ -109,2 +111,3 @@ dateFormat: _propTypes.dateFormat,
 
+  messages: _react2.default.PropTypes.object,
   components: _react2.default.PropTypes.object.isRequired,
@@ -204,2 +207,3 @@ popupOffset: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.number, _react2.default.PropTypes.shape({
         eventPropGetter = _props2.eventPropGetter,
+        messages = _props2.messages,
         selected = _props2.selected;
@@ -226,2 +230,3 @@ var _state = this.state,
       selectable: selectable,
+      messages: messages,
 
@@ -255,2 +260,3 @@ titleAccessor: titleAccessor,
         currentDate = _props3.date,
+        getDrilldownView = _props3.getDrilldownView,
         dateFormat = _props3.dateFormat,
@@ -262,2 +268,4 @@ culture = _props3.culture;
     var isCurrent = _dates2.default.eq(date, currentDate, 'day');
+    var drilldownView = getDrilldownView(date);
+    var label = _localizer2.default.format(date, dateFormat, culture);
 
@@ -269,8 +277,15 @@ return _react2.default.createElement(
       }),
-      _react2.default.createElement(
+      drilldownView ? _react2.default.createElement(
         'a',
-        { href: '#', onClick: function onClick(e) {
-            return _this4.handleHeadingClick(date, e);
-          } },
-        _localizer2.default.format(date, dateFormat, culture)
+        {
+          href: '#',
+          onClick: function onClick(e) {
+            return _this4.handleHeadingClick(date, drilldownView, e);
+          }
+        },
+        label
+      ) : _react2.default.createElement(
+        'span',
+        null,
+        label
       )
@@ -347,6 +362,6 @@ );
   },
-  handleHeadingClick: function handleHeadingClick(date, e) {
+  handleHeadingClick: function handleHeadingClick(date, view, e) {
     e.preventDefault();
     this.clearSelection();
-    (0, _helpers.notify)(this.props.onNavigate, [_constants.navigate.DATE, date]);
+    (0, _helpers.notify)(this.props.onDrillDown, [date, view]);
   },
@@ -380,4 +395,5 @@ handleSelectEvent: function handleSelectEvent() {
         popup = _props4.popup,
-        onNavigate = _props4.onNavigate,
-        onShowMore = _props4.onShowMore;
+        onDrillDown = _props4.onDrillDown,
+        onShowMore = _props4.onShowMore,
+        getDrilldownView = _props4.getDrilldownView;
     //cancel any pending selections so only the event click goes through.
@@ -394,3 +410,3 @@
     } else {
-      (0, _helpers.notify)(onNavigate, [_constants.navigate.DATE, date]);
+      (0, _helpers.notify)(onDrillDown, [date, getDrilldownView(date) || _constants.views.DAY]);
     }
@@ -397,0 +413,0 @@

lib/Selection.js

@@ -0,0 +0,0 @@ 'use strict';

lib/TimeGrid.js

@@ -57,4 +57,2 @@ 'use strict';
 
-var _constants = require('./utils/constants');
-
 var _accessors = require('./utils/accessors');
@@ -303,3 +301,4 @@
         culture = _props5.culture,
-        components = _props5.components;
+        components = _props5.components,
+        getDrilldownView = _props5.getDrilldownView;
 
@@ -309,2 +308,13 @@ var HeaderComponent = components.header || _Header2.default;
     return range.map(function (date, i) {
+      var drilldownView = getDrilldownView(date);
+      var label = _localizer2.default.format(date, dayFormat, culture);
+
+      var header = _react2.default.createElement(HeaderComponent, {
+        date: date,
+        label: label,
+        localizer: _localizer2.default,
+        format: dayFormat,
+        culture: culture
+      });
+
       return _react2.default.createElement(
@@ -317,12 +327,15 @@ 'div',
         },
-        _react2.default.createElement(
+        drilldownView ? _react2.default.createElement(
           'a',
-          { href: '#', onClick: _this5.handleHeaderClick.bind(null, date) },
-          _react2.default.createElement(HeaderComponent, {
-            date: date,
-            label: _localizer2.default.format(date, dayFormat, culture),
-            localizer: _localizer2.default,
-            format: dayFormat,
-            culture: culture
-          })
+          {
+            href: '#',
+            onClick: function onClick(e) {
+              return _this5.handleHeaderClick(date, drilldownView, e);
+            }
+          },
+          header
+        ) : _react2.default.createElement(
+          'span',
+          null,
+          header
         )
@@ -333,5 +346,5 @@ );
 
-  TimeGrid.prototype.handleHeaderClick = function handleHeaderClick(date, e) {
+  TimeGrid.prototype.handleHeaderClick = function handleHeaderClick(date, view, e) {
     e.preventDefault();
-    (0, _helpers.notify)(this.props.onNavigate, [_constants.navigate.DATE, date]);
+    (0, _helpers.notify)(this.props.onDrillDown, [date, view]);
   };
@@ -487,2 +500,4 @@
   onSelectEvent: _react2.default.PropTypes.func,
+  onDrillDown: _react2.default.PropTypes.func,
+  getDrilldownView: _react2.default.PropTypes.func.isRequired,
 
@@ -489,0 +504,0 @@ messages: _react2.default.PropTypes.object,

lib/utils/propTypes.js

@@ -60,2 +60,20 @@ 'use strict';
 
+/**
+ * accepts either an array of builtin view names:
+ *
+ * ```
+ * views={['month', 'day', 'agenda']}
+ * ```
+ *
+ * or an object hash of the view name and the component (or boolean for builtin)
+ *
+ * ```
+ * views={{
+ *   month: true,
+ *   week: false,
+ *   workweek: WorkWeekViewComponent,
+ * }}
+ * ```
+ * @type {[type]}
+ */
 var views = exports.views = _react.PropTypes.oneOfType([_react.PropTypes.arrayOf(_react.PropTypes.oneOf(viewNames)), (0, _all2.default)([_react.PropTypes.object, function (props, name) {
@@ -62,0 +80,0 @@ for (var _len = arguments.length, args = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {

package.json

 {
   "name": "react-big-calendar",
-  "version": "0.12.3",
+  "version": "0.13.0",
   "description": "Calendar! with events",
@@ -27,5 +27,8 @@ "author": "Jason Quense <[e-mail]>",
     "clean:examples": "rimraf examples/static",
-    "less": "lessc --autoprefix=\"ie >= 10, last 2 versions\" src/less/styles.less ./lib/css/react-big-calendar.css",
-    "assets": "cpy src/less/* lib/less",
-    "build": "npm run clean && babel src --out-dir lib && npm run assets && npm run less",
+    "l": "lessc --autoprefix=\"ie >= 10, last 2 versions\" ",
+    "less": "npm run l src/less/styles.less ./lib/css/react-big-calendar.css && npm run less-dnd",
+    "less-dnd": "npm run l src/addons/dragAndDrop/styles.less ./lib/addons/dragAndDrop/styles.css",
+    "assets": "cpy src/less/* lib/less && npm run assets-addons",
+    "assets-addons": "cpy addons/**/*.less ../lib/ --cwd=src --parents",
+    "build": "npm run clean && babel src --out-dir lib && npm run assets && npm run less && npm run less",
     "build:examples": "npm run clean:examples && webpack --config webpack/examples.config.js",
@@ -32,0 +35,0 @@ "build:visual-test": "webpack --config webpack/visual-test.js",

No alert changes

Improved metrics

Total package byte prevSize

232923

increased by5.26%

Number of package files

59

increased by5.36%

Lines of code

5197

increased by6.67%

No dependency changes