react-calendar-timeline - npm Package Compare versions

lib/lib/default-config.js

lib/lib/layout/TimelineElementsHeader.js

lib/lib/scroll/ScrollElement.js

src/lib/__tests__/components/Header/Header.test.js

src/lib/__tests__/components/Header/TimelineElementsHeader.test.js

src/lib/__tests__/components/ScrollElement/ScrollElement.test.js

src/lib/default-config.js

src/lib/layout/TimelineElementsHeader.js

src/lib/scroll/ScrollElement.js

13

CHANGELOG.md

		@@ -10,4 +10,15 @@ # Change Log

		When you submit a PR, add your changes here!
		### Added

		* added `stickyHeader` to disable/enable timeline header sticking on scroll.
		* removed `fullUpdate` prop and functionality. Labels rely on `position: sticky` to show for items that start before `visibleTimeStart`. This (should) greatly improve scroll performance.
		* removed extraneous css such as `text-align: center` on `.rct-item`, `.rct-item-overflow` to simplify the dom structure of `Item.js`
		* added `headerRef` callback to receive a reference to the header element. Due to the change in how the header positioning is implemented (i.e. using `position: sticky`), there is a need to use a polyfill in [certain browsers](https://caniuse.com/#feat=css-sticky) that don't support `position: sticky`. With a reference to the header dom element, you can use a polyfill to apply sticky behavior.

		### Breaking

		* removed `fixedHeader` prop in favor of using `position: sticky` by default

		## 0.15.10

		### Fixed
		@@ -14,0 +25,0 @@

14

lib/index.js

		@@ -13,14 +13,2 @@ 'use strict';

		var _default = _Timeline2.default;
		exports.default = _default;
		;

		var _temp = function () {
		if (typeof __REACT_HOT_LOADER__ === 'undefined') {
		return;
		}

		__REACT_HOT_LOADER__.register(_default, 'default', 'src/index.js');
		}();

		;
		exports.default = _Timeline2.default;

15

lib/lib/__tests__/index.js

		@@ -166,15 +166,2 @@ 'use strict';
		});
		});
		;

		var _temp = function () {
		if (typeof __REACT_HOT_LOADER__ === 'undefined') {
		return;
		}

		__REACT_HOT_LOADER__.register(groups, 'groups', 'src/lib/__tests__/index.js');

		__REACT_HOT_LOADER__.register(items, 'items', 'src/lib/__tests__/index.js');
		}();

		;
		});

11

lib/lib/__tests__/utils/calendar/calculate-dimensions.js

		@@ -234,11 +234,2 @@ 'use strict';
		});
		});
		;

		var _temp = function () {
		if (typeof __REACT_HOT_LOADER__ === 'undefined') {
		return;
		}
		}();

		;
		});

11

lib/lib/__tests__/utils/calendar/calculate-x-position-for-time.js

		@@ -39,11 +39,2 @@ 'use strict';
		});
		});
		;

		var _temp = function () {
		if (typeof __REACT_HOT_LOADER__ === 'undefined') {
		return;
		}
		}();

		;
		});

13

lib/lib/__tests__/utils/calendar/collision.js

		@@ -95,13 +95,2 @@ 'use strict';
		});
		});
		;

		var _temp = function () {
		if (typeof __REACT_HOT_LOADER__ === 'undefined') {
		return;
		}

		__REACT_HOT_LOADER__.register(buildObject, 'buildObject', 'src/lib/__tests__/utils/calendar/collision.js');
		}();

		;
		});

11

lib/lib/__tests__/utils/calendar/coordinate-to-time-ratio.js

		@@ -15,11 +15,2 @@ 'use strict';
		});
		});
		;

		var _temp = function () {
		if (typeof __REACT_HOT_LOADER__ === 'undefined') {
		return;
		}
		}();

		;
		});

11

lib/lib/__tests__/utils/calendar/get-group-orders.js

		@@ -7,11 +7,2 @@ 'use strict';
		xit('WRITE UNIT TEST HERE', function () {});
		}); /* eslint-disable */
		;

		var _temp = function () {
		if (typeof __REACT_HOT_LOADER__ === 'undefined') {
		return;
		}
		}();

		;
		}); /* eslint-disable */

11

lib/lib/__tests__/utils/calendar/get-grouped-items.js

		@@ -7,11 +7,2 @@ 'use strict';
		xit('WRITE UNIT TEST HERE', function () {});
		}); /* eslint-disable */
		;

		var _temp = function () {
		if (typeof __REACT_HOT_LOADER__ === 'undefined') {
		return;
		}
		}();

		;
		}); /* eslint-disable */

13

lib/lib/__tests__/utils/calendar/get-min-unit.js

		@@ -63,13 +63,2 @@ 'use strict';
		});
		});
		;

		var _temp = function () {
		if (typeof __REACT_HOT_LOADER__ === 'undefined') {
		return;
		}

		__REACT_HOT_LOADER__.register(defaultTimeSteps, 'defaultTimeSteps', 'src/lib/__tests__/utils/calendar/get-min-unit.js');
		}();

		;
		});

11

lib/lib/__tests__/utils/calendar/get-next-unit.js

		@@ -35,11 +35,2 @@ 'use strict';
		});
		}); /* eslint-disable */
		;

		var _temp = function () {
		if (typeof __REACT_HOT_LOADER__ === 'undefined') {
		return;
		}
		}();

		;
		}); /* eslint-disable */

17

lib/lib/__tests__/utils/calendar/get-visible-items.js

		@@ -81,17 +81,2 @@ 'use strict';
		});
		});
		;

		var _temp = function () {
		if (typeof __REACT_HOT_LOADER__ === 'undefined') {
		return;
		}

		__REACT_HOT_LOADER__.register(itemTimeStartKey, 'itemTimeStartKey', 'src/lib/__tests__/utils/calendar/get-visible-items.js');

		__REACT_HOT_LOADER__.register(itemTimeEndKey, 'itemTimeEndKey', 'src/lib/__tests__/utils/calendar/get-visible-items.js');

		__REACT_HOT_LOADER__.register(keys, 'keys', 'src/lib/__tests__/utils/calendar/get-visible-items.js');
		}();

		;
		});

12

lib/lib/__tests__/utils/calendar/iterate-times.js

		@@ -7,12 +7,2 @@ 'use strict';
		xit('WRITE TEST HERE :)', function () {});
		}); /* eslint-disable */

		;

		var _temp = function () {
		if (typeof __REACT_HOT_LOADER__ === 'undefined') {
		return;
		}
		}();

		;
		}); /* eslint-disable */

11

lib/lib/__tests__/utils/calendar/no-stack.js

		@@ -7,11 +7,2 @@ 'use strict';
		xit('WRITE UNIT TEST HERE', function () {});
		}); /* eslint-disable */
		;

		var _temp = function () {
		if (typeof __REACT_HOT_LOADER__ === 'undefined') {
		return;
		}
		}();

		;
		}); /* eslint-disable */

11

lib/lib/__tests__/utils/calendar/stack.js

		@@ -7,11 +7,2 @@ 'use strict';
		xit('WRITE UNIT TEST HERE', function () {});
		}); /* eslint-disable */
		;

		var _temp = function () {
		if (typeof __REACT_HOT_LOADER__ === 'undefined') {
		return;
		}
		}();

		;
		}); /* eslint-disable */

11

lib/lib/__tests__/utils/dom-helpers/get-parent-position.js

		@@ -7,11 +7,2 @@ 'use strict';
		xit('WRITE TEST HERE', function () {});
		}); /* eslint-disable */
		;

		var _temp = function () {
		if (typeof __REACT_HOT_LOADER__ === 'undefined') {
		return;
		}
		}();

		;
		}); /* eslint-disable */

13

lib/lib/__tests__/utils/dom-helpers/has-same-parent-class.js

		@@ -56,13 +56,2 @@ 'use strict';
		});
		});
		;

		var _temp = function () {
		if (typeof __REACT_HOT_LOADER__ === 'undefined') {
		return;
		}

		__REACT_HOT_LOADER__.register(targetId, 'targetId', 'src/lib/__tests__/utils/dom-helpers/has-same-parent-class.js');
		}();

		;
		});

129

lib/lib/items/Item.js

		@@ -45,24 +45,44 @@ 'use strict';

		_this.onMouseDown = function () {
		return _this.__onMouseDown__REACT_HOT_LOADER__.apply(_this, arguments);
		_this.onMouseDown = function (e) {
		if (!_this.state.interactMounted) {
		e.preventDefault();
		_this.startedClicking = true;
		}
		};

		_this.onMouseUp = function () {
		return _this.__onMouseUp__REACT_HOT_LOADER__.apply(_this, arguments);
		_this.onMouseUp = function (e) {
		if (!_this.state.interactMounted && _this.startedClicking) {
		_this.startedClicking = false;
		_this.actualClick(e, 'click');
		}
		};

		_this.onTouchStart = function () {
		return _this.__onTouchStart__REACT_HOT_LOADER__.apply(_this, arguments);
		_this.onTouchStart = function (e) {
		if (!_this.state.interactMounted) {
		e.preventDefault();
		_this.startedTouching = true;
		}
		};

		_this.onTouchEnd = function () {
		return _this.__onTouchEnd__REACT_HOT_LOADER__.apply(_this, arguments);
		_this.onTouchEnd = function (e) {
		if (!_this.state.interactMounted && _this.startedTouching) {
		_this.startedTouching = false;
		_this.actualClick(e, 'touch');
		}
		};

		_this.handleDoubleClick = function () {
		return _this.__handleDoubleClick__REACT_HOT_LOADER__.apply(_this, arguments);
		_this.handleDoubleClick = function (e) {
		e.preventDefault();
		e.stopPropagation();
		if (_this.props.onItemDoubleClick) {
		_this.props.onItemDoubleClick(_this.itemId, e);
		}
		};

		_this.handleContextMenu = function () {
		return _this.__handleContextMenu__REACT_HOT_LOADER__.apply(_this, arguments);
		_this.handleContextMenu = function (e) {
		if (_this.props.onContextMenu) {
		e.preventDefault();
		e.stopPropagation();
		_this.props.onContextMenu(_this.itemId, e);
		}
		};
		@@ -94,52 +114,2 @@
		_createClass(Item, [{
		key: '__handleContextMenu__REACT_HOT_LOADER__',
		value: function __handleContextMenu__REACT_HOT_LOADER__(e) {
		if (this.props.onContextMenu) {
		e.preventDefault();
		e.stopPropagation();
		this.props.onContextMenu(this.itemId, e);
		}
		}
		}, {
		key: '__handleDoubleClick__REACT_HOT_LOADER__',
		value: function __handleDoubleClick__REACT_HOT_LOADER__(e) {
		e.preventDefault();
		e.stopPropagation();
		if (this.props.onItemDoubleClick) {
		this.props.onItemDoubleClick(this.itemId, e);
		}
		}
		}, {
		key: '__onTouchEnd__REACT_HOT_LOADER__',
		value: function __onTouchEnd__REACT_HOT_LOADER__(e) {
		if (!this.state.interactMounted && this.startedTouching) {
		this.startedTouching = false;
		this.actualClick(e, 'touch');
		}
		}
		}, {
		key: '__onTouchStart__REACT_HOT_LOADER__',
		value: function __onTouchStart__REACT_HOT_LOADER__(e) {
		if (!this.state.interactMounted) {
		e.preventDefault();
		this.startedTouching = true;
		}
		}
		}, {
		key: '__onMouseUp__REACT_HOT_LOADER__',
		value: function __onMouseUp__REACT_HOT_LOADER__(e) {
		if (!this.state.interactMounted && this.startedClicking) {
		this.startedClicking = false;
		this.actualClick(e, 'click');
		}
		}
		}, {
		key: '__onMouseDown__REACT_HOT_LOADER__',
		value: function __onMouseDown__REACT_HOT_LOADER__(e) {
		if (!this.state.interactMounted) {
		e.preventDefault();
		this.startedClicking = true;
		}
		}
		}, {
		key: 'shouldComponentUpdate',
		@@ -413,3 +383,3 @@ value: function shouldComponentUpdate(nextProps, nextState) {

		if (!props.canResizeLeft \|\| props.dimensions.clippedLeft) {
		if (!props.canResizeLeft) {
		return false;
		@@ -425,3 +395,3 @@ }

		if (!props.canResizeRight \|\| props.dimensions.clippedRight) {
		if (!props.canResizeRight) {
		return false;
		@@ -504,3 +474,3 @@ }

		var classNames = 'rct-item' + (this.props.selected ? ' selected' : '') + (this.canMove(this.props) ? ' can-move' : '') + (this.canResizeLeft(this.props) \|\| this.canResizeRight(this.props) ? ' can-resize' : '') + (this.canResizeLeft(this.props) ? ' can-resize-left' : '') + (this.canResizeRight(this.props) ? ' can-resize-right' : '') + (this.props.item.className ? ' ' + this.props.item.className : '') + (dimensions.clippedLeft ? ' clipped-left' : '') + (dimensions.clippedRight ? ' clipped-right' : '');
		var classNames = 'rct-item' + (this.props.selected ? ' selected' : '') + (this.canMove(this.props) ? ' can-move' : '') + (this.canResizeLeft(this.props) \|\| this.canResizeRight(this.props) ? ' can-resize' : '') + (this.canResizeLeft(this.props) ? ' can-resize-left' : '') + (this.canResizeRight(this.props) ? ' can-resize-right' : '') + (this.props.item.className ? ' ' + this.props.item.className : '');

		@@ -537,8 +507,9 @@ var style = {
		'div',
		{ className: 'rct-item-overflow' },
		_react2.default.createElement(
		'div',
		{ className: 'rct-item-content' },
		this.renderContent()
		)
		{
		className: 'rct-item-content',
		style: {
		maxWidth: dimensions.width + 'px'
		}
		},
		this.renderContent()
		),
		@@ -596,16 +567,2 @@ this.props.useResizeHandle ? _react2.default.createElement('div', { ref: function ref(el) {
		};
		var _default = Item;
		exports.default = _default;
		;

		var _temp = function () {
		if (typeof __REACT_HOT_LOADER__ === 'undefined') {
		return;
		}

		__REACT_HOT_LOADER__.register(Item, 'Item', 'src/lib/items/Item.js');

		__REACT_HOT_LOADER__.register(_default, 'default', 'src/lib/items/Item.js');
		}();

		;
		exports.default = Item;

20

lib/lib/items/Items.js

		@@ -200,20 +200,2 @@ 'use strict';
		};
		var _default = Items;
		exports.default = _default;
		;

		var _temp = function () {
		if (typeof __REACT_HOT_LOADER__ === 'undefined') {
		return;
		}

		__REACT_HOT_LOADER__.register(canResizeLeft, 'canResizeLeft', 'src/lib/items/Items.js');

		__REACT_HOT_LOADER__.register(canResizeRight, 'canResizeRight', 'src/lib/items/Items.js');

		__REACT_HOT_LOADER__.register(Items, 'Items', 'src/lib/items/Items.js');

		__REACT_HOT_LOADER__.register(_default, 'default', 'src/lib/items/Items.js');
		}();

		;
		exports.default = Items;

279

lib/lib/layout/Header.js

		@@ -9,6 +9,2 @@ 'use strict';

		var _propTypes = require('prop-types');

		var _propTypes2 = _interopRequireDefault(_propTypes);

		var _react = require('react');
		@@ -18,8 +14,10 @@

		var _moment = require('moment');
		var _propTypes = require('prop-types');

		var _moment2 = _interopRequireDefault(_moment);
		var _propTypes2 = _interopRequireDefault(_propTypes);

		var _calendar = require('../utility/calendar');
		var _TimelineElementsHeader = require('./TimelineElementsHeader');

		var _TimelineElementsHeader2 = _interopRequireDefault(_TimelineElementsHeader);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
		@@ -36,222 +34,25 @@

		function Header(props) {
		function Header() {
		_classCallCheck(this, Header);

		var _this = _possibleConstructorReturn(this, (Header.__proto__ \|\| Object.getPrototypeOf(Header)).call(this, props));

		_this.periodClick = function () {
		return _this.__periodClick__REACT_HOT_LOADER__.apply(_this, arguments);
		};

		_this.touchStart = function () {
		return _this.__touchStart__REACT_HOT_LOADER__.apply(_this, arguments);
		};

		_this.touchEnd = function () {
		return _this.__touchEnd__REACT_HOT_LOADER__.apply(_this, arguments);
		};

		_this.state = {
		touchTarget: null,
		touchActive: false
		};
		return _this;
		return _possibleConstructorReturn(this, (Header.__proto__ \|\| Object.getPrototypeOf(Header)).apply(this, arguments));
		}

		_createClass(Header, [{
		key: '__touchEnd__REACT_HOT_LOADER__',
		value: function __touchEnd__REACT_HOT_LOADER__(e) {
		if (!this.state.touchActive) {
		return this.resetTouchState();
		}

		var changedTouches = e.changedTouches[0];
		if (changedTouches) {
		var elem = document.elementFromPoint(changedTouches.pageX, changedTouches.pageY);
		if (elem !== this.state.touchTarget) {
		return this.resetTouchState();
		}
		}

		this.resetTouchState();
		this.periodClick(e);
		}
		}, {
		key: '__touchStart__REACT_HOT_LOADER__',
		value: function __touchStart__REACT_HOT_LOADER__(e) {
		if (e.touches.length === 1) {
		this.setState({
		touchTarget: e.target \|\| e.touchTarget,
		touchActive: true
		});
		}
		}
		}, {
		key: '__periodClick__REACT_HOT_LOADER__',
		value: function __periodClick__REACT_HOT_LOADER__(e) {
		var _e$target$dataset = e.target.dataset,
		time = _e$target$dataset.time,
		unit = _e$target$dataset.unit;

		if (time && unit) {
		this.props.showPeriod((0, _moment2.default)(time - 0), unit);
		}
		}
		}, {
		key: 'headerLabel',
		value: function headerLabel(time, unit, width) {
		var f = this.props.headerLabelFormats;


		if (unit === 'year') {
		return time.format(width < 46 ? f.yearShort : f.yearLong);
		} else if (unit === 'month') {
		return time.format(width < 65 ? f.monthShort : width < 75 ? f.monthMedium : width < 120 ? f.monthMediumLong : f.monthLong);
		} else if (unit === 'day') {
		return time.format(width < 150 ? f.dayShort : f.dayLong);
		} else if (unit === 'hour') {
		return time.format(width < 50 ? f.hourShort : width < 130 ? f.hourMedium : width < 150 ? f.hourMediumLong : f.hourLong);
		} else {
		return time.format(f.time);
		}
		}
		}, {
		key: 'subHeaderLabel',
		value: function subHeaderLabel(time, unit, width) {
		var f = this.props.subHeaderLabelFormats;


		if (unit === 'year') {
		return time.format(width < 46 ? f.yearShort : f.yearLong);
		} else if (unit === 'month') {
		return time.format(width < 37 ? f.monthShort : width < 85 ? f.monthMedium : f.monthLong);
		} else if (unit === 'day') {
		return time.format(width < 47 ? f.dayShort : width < 80 ? f.dayMedium : width < 120 ? f.dayMediumLong : f.dayLong);
		} else if (unit === 'hour') {
		return time.format(width < 50 ? f.hourShort : f.hourLong);
		} else if (unit === 'minute') {
		return time.format(width < 60 ? f.minuteShort : f.minuteLong);
		} else {
		return time.get(unit);
		}
		}
		}, {
		key: 'resetTouchState',
		value: function resetTouchState() {
		this.setState({
		touchTarget: null,
		touchActive: false
		});
		}
		}, {
		key: 'render',
		value: function render() {
		var _this2 = this;

		var timeLabels = [];
		var _props = this.props,
		canvasTimeStart = _props.canvasTimeStart,
		canvasTimeEnd = _props.canvasTimeEnd,
		canvasWidth = _props.canvasWidth,
		lineHeight = _props.lineHeight,
		visibleTimeStart = _props.visibleTimeStart,
		visibleTimeEnd = _props.visibleTimeEnd,
		minUnit = _props.minUnit,
		timeSteps = _props.timeSteps,
		fixedHeader = _props.fixedHeader,
		leftSidebarHeader = _props.leftSidebarHeader,
		rightSidebarHeader = _props.rightSidebarHeader,
		width = _props.width,
		stickyOffset = _props.stickyOffset,
		headerPosition = _props.headerPosition,
		headerLabelGroupHeight = _props.headerLabelGroupHeight,
		headerLabelHeight = _props.headerLabelHeight,
		hasRightSidebar = _props.hasRightSidebar,
		width = _props.width;
		stickyHeader = _props.stickyHeader,
		headerRef = _props.headerRef;


		var ratio = canvasWidth / (canvasTimeEnd - canvasTimeStart);
		var twoHeaders = minUnit !== 'year';

		var correctLeftPositions = fixedHeader === 'fixed' \|\| fixedHeader === 'sticky' && headerPosition === 'fixed';

		// add the top header
		if (twoHeaders) {
		var nextUnit = (0, _calendar.getNextUnit)(minUnit);

		(0, _calendar.iterateTimes)(visibleTimeStart, visibleTimeEnd, nextUnit, timeSteps, function (time, nextTime) {
		var startTime = Math.max(visibleTimeStart, time.valueOf());
		var endTime = Math.min(visibleTimeEnd, nextTime.valueOf());
		var left = Math.round((startTime.valueOf() - canvasTimeStart) * ratio, -2);
		var right = Math.round((endTime.valueOf() - canvasTimeStart) * ratio, -2);
		var labelWidth = right - left;
		var leftCorrect = correctLeftPositions ? Math.round((canvasTimeStart - visibleTimeStart) * ratio) - 1 : 0;

		timeLabels.push(_react2.default.createElement(
		'div',
		{
		key: 'top-label-' + time.valueOf(),
		className: 'rct-label-group' + (hasRightSidebar ? ' rct-has-right-sidebar' : ''),
		'data-time': time,
		'data-unit': nextUnit,
		style: {
		left: left + leftCorrect + 'px',
		width: labelWidth + 'px',
		height: headerLabelGroupHeight + 'px',
		lineHeight: headerLabelGroupHeight + 'px',
		cursor: 'pointer'
		}
		},
		_this2.headerLabel(time, nextUnit, labelWidth)
		));
		});
		}

		(0, _calendar.iterateTimes)(canvasTimeStart, canvasTimeEnd, minUnit, timeSteps, function (time, nextTime) {
		var left = Math.round((time.valueOf() - canvasTimeStart) * ratio, -2);
		var minUnitValue = time.get(minUnit === 'day' ? 'date' : minUnit);
		var firstOfType = minUnitValue === (minUnit === 'day' ? 1 : 0);
		var labelWidth = Math.round((nextTime.valueOf() - time.valueOf()) * ratio, -2);
		var borderWidth = firstOfType ? 2 : 1;
		var leftCorrect = correctLeftPositions ? Math.round((canvasTimeStart - visibleTimeStart) * ratio) - borderWidth + 1 : 0;

		timeLabels.push(_react2.default.createElement(
		'div',
		{
		key: 'label-' + time.valueOf(),
		className: 'rct-label ' + (twoHeaders ? '' : 'rct-label-only') + ' ' + (firstOfType ? 'rct-first-of-type' : '') + ' ' + (minUnit !== 'month' ? 'rct-day-' + time.day() : '') + ' ',
		'data-time': time,
		'data-unit': minUnit,
		style: {
		top: (minUnit === 'year' ? 0 : headerLabelGroupHeight) + 'px',
		left: left + leftCorrect + 'px',
		width: labelWidth + 'px',
		height: (minUnit === 'year' ? headerLabelGroupHeight + headerLabelHeight : headerLabelHeight) + 'px',
		lineHeight: (minUnit === 'year' ? headerLabelGroupHeight + headerLabelHeight : headerLabelHeight) + 'px',
		fontSize: (labelWidth > 30 ? '14' : labelWidth > 20 ? '12' : '10') + 'px',
		cursor: 'pointer'
		}
		},
		_this2.subHeaderLabel(time, minUnit, labelWidth)
		));
		});

		var headerStyle = {
		height: headerLabelGroupHeight + headerLabelHeight + 'px',
		lineHeight: lineHeight + 'px'
		top: stickyHeader ? stickyOffset \|\| 0 : 0
		};

		if (fixedHeader === 'fixed') {
		headerStyle.position = 'fixed';
		headerStyle.width = width + 'px';
		} else if (fixedHeader === 'sticky') {
		if (headerPosition === 'top') {
		// do nothing, keep at the top
		} else if (headerPosition === 'fixed') {
		headerStyle.position = 'fixed';
		headerStyle.top = stickyOffset;
		headerStyle.width = width + 'px';
		} else if (headerPosition === 'bottom') {
		headerStyle.position = 'absolute';
		headerStyle.bottom = 0;
		headerStyle.width = canvasWidth + 'px';
		}
		}
		var headerClass = stickyHeader ? 'header-sticky' : '';

		@@ -261,10 +62,16 @@ return _react2.default.createElement(
		{
		key: 'header',
		className: 'rct-header',
		onTouchStart: this.touchStart,
		onTouchEnd: this.touchEnd,
		onClick: this.periodClick,
		className: 'rct-header-container ' + headerClass,

		ref: headerRef,
		style: headerStyle
		},
		timeLabels
		leftSidebarHeader,
		_react2.default.createElement(
		'div',
		{
		style: { width: width }
		},
		_react2.default.createElement(_TimelineElementsHeader2.default, this.props)
		),
		rightSidebarHeader
		);
		@@ -284,4 +91,2 @@ }
		lineHeight: _propTypes2.default.number.isRequired,
		visibleTimeStart: _propTypes2.default.number.isRequired,
		visibleTimeEnd: _propTypes2.default.number.isRequired,
		minUnit: _propTypes2.default.string.isRequired,
		@@ -292,27 +97,11 @@ timeSteps: _propTypes2.default.object.isRequired,
		subHeaderLabelFormats: _propTypes2.default.object.isRequired,
		fixedHeader: _propTypes2.default.oneOf(['fixed', 'sticky', 'none']),
		stickyOffset: _propTypes2.default.number.isRequired,
		headerPosition: _propTypes2.default.oneOf(['top', 'bottom', 'fixed']),
		stickyOffset: _propTypes2.default.number,
		stickyHeader: _propTypes2.default.bool.isRequired,
		headerLabelGroupHeight: _propTypes2.default.number.isRequired,
		headerLabelHeight: _propTypes2.default.number.isRequired
		headerLabelHeight: _propTypes2.default.number.isRequired,
		registerScroll: _propTypes2.default.func.isRequired,
		leftSidebarHeader: _propTypes2.default.node,
		rightSidebarHeader: _propTypes2.default.node,
		headerRef: _propTypes2.default.func.isRequired
		};
		Header.defaultProps = {
		fixedHeader: 'sticky',
		stickyOffset: 0,
		headerPosition: 'top'
		};
		var _default = Header;
		exports.default = _default;
		;

		var _temp = function () {
		if (typeof __REACT_HOT_LOADER__ === 'undefined') {
		return;
		}

		__REACT_HOT_LOADER__.register(Header, 'Header', 'src/lib/layout/Header.js');

		__REACT_HOT_LOADER__.register(_default, 'default', 'src/lib/layout/Header.js');
		}();

		;
		exports.default = Header;

16

lib/lib/layout/InfoLabel.js

		@@ -62,16 +62,2 @@ 'use strict';
		};
		var _default = InfoLabel;
		exports.default = _default;
		;

		var _temp = function () {
		if (typeof __REACT_HOT_LOADER__ === 'undefined') {
		return;
		}

		__REACT_HOT_LOADER__.register(InfoLabel, 'InfoLabel', 'src/lib/layout/InfoLabel.js');

		__REACT_HOT_LOADER__.register(_default, 'default', 'src/lib/layout/InfoLabel.js');
		}();

		;
		exports.default = InfoLabel;

70

lib/lib/layout/Sidebar.js

		@@ -39,3 +39,3 @@ 'use strict';
		value: function shouldComponentUpdate(nextProps) {
		return !((0, _generic.arraysEqual)(nextProps.groups, this.props.groups) && nextProps.keys === this.props.keys && nextProps.width === this.props.width && nextProps.lineHeight === this.props.lineHeight && nextProps.fixedHeader === this.props.fixedHeader && nextProps.stickyOffset === this.props.stickyOffset && nextProps.headerPosition === this.props.headerPosition && nextProps.groupHeights === this.props.groupHeights && nextProps.height === this.props.height);
		return !((0, _generic.arraysEqual)(nextProps.groups, this.props.groups) && nextProps.keys === this.props.keys && nextProps.width === this.props.width && nextProps.groupHeights === this.props.groupHeights && nextProps.height === this.props.height);
		}
		@@ -60,11 +60,6 @@ }, {
		var _props = this.props,
		fixedHeader = _props.fixedHeader,
		stickyOffset = _props.stickyOffset,
		width = _props.width,
		lineHeight = _props.lineHeight,
		groupHeights = _props.groupHeights,
		height = _props.height,
		headerHeight = _props.headerHeight,
		isRightSidebar = _props.isRightSidebar,
		headerPosition = _props.headerPosition;
		isRightSidebar = _props.isRightSidebar;
		var _props$keys = this.props.keys,
		@@ -81,8 +76,2 @@ groupIdKey = _props$keys.groupIdKey,

		var headerStyle = {
		height: headerHeight + 'px',
		lineHeight: lineHeight + 'px',
		width: width + 'px'
		};

		var groupsStyle = {
		@@ -92,25 +81,2 @@ width: width + 'px'

		if (fixedHeader === 'fixed') {
		headerStyle.position = 'fixed';
		groupsStyle.paddingTop = headerStyle.height;
		} else if (fixedHeader === 'sticky') {
		if (headerPosition === 'top') {
		// do nothing - keep at the top
		} else if (headerPosition === 'fixed') {
		headerStyle.position = 'fixed';
		headerStyle.top = stickyOffset;
		groupsStyle.paddingTop = headerStyle.height;
		} else if (headerPosition === 'bottom') {
		headerStyle.position = 'absolute';
		headerStyle.bottom = 0;
		groupsStyle.paddingTop = headerStyle.height;
		}
		}

		var header = _react2.default.createElement(
		'div',
		{ className: 'rct-sidebar-header', style: headerStyle },
		this.props.children
		);

		var groupLines = [];
		@@ -143,3 +109,2 @@ var i = 0;
		},
		header,
		_react2.default.createElement(
		@@ -161,34 +126,7 @@ 'div',
		height: _propTypes2.default.number.isRequired,
		lineHeight: _propTypes2.default.number.isRequired,
		groupHeights: _propTypes2.default.array.isRequired,
		fixedHeader: _propTypes2.default.oneOf(['fixed', 'sticky', 'none']),
		stickyOffset: _propTypes2.default.number.isRequired,
		headerPosition: _propTypes2.default.oneOf(['top', 'bottom', 'fixed']),
		keys: _propTypes2.default.object.isRequired,
		groupRenderer: _propTypes2.default.func,
		children: _propTypes2.default.node,
		isRightSidebar: _propTypes2.default.bool,
		headerHeight: _propTypes2.default.number.isRequired
		isRightSidebar: _propTypes2.default.bool
		};
		Sidebar.defaultProps = {
		fixedHeader: 'sticky',
		stickyOffset: 0,
		headerPosition: 'top',
		children: null,
		isRightSidebar: false
		};
		var _default = Sidebar;
		exports.default = _default;
		;

		var _temp = function () {
		if (typeof __REACT_HOT_LOADER__ === 'undefined') {
		return;
		}

		__REACT_HOT_LOADER__.register(Sidebar, 'Sidebar', 'src/lib/layout/Sidebar.js');

		__REACT_HOT_LOADER__.register(_default, 'default', 'src/lib/layout/Sidebar.js');
		}();

		;
		exports.default = Sidebar;

22

lib/lib/lines/CursorLine.js

		@@ -43,6 +43,5 @@ 'use strict';
		var left = Math.round((cursorTime - this.props.canvasTimeStart) * ratio);
		var top = this.props.headerHeight;
		var height = this.props.height - this.props.headerHeight;
		var height = this.props.height;
		var styles = {
		top: top + 'px',
		top: '0px',
		left: left + 'px',
		@@ -69,19 +68,4 @@ height: height + 'px'
		cursorTime: _propTypes2.default.number,
		headerHeight: _propTypes2.default.number.isRequired,
		height: _propTypes2.default.number.isRequired
		};
		var _default = CursorLine;
		exports.default = _default;
		;

		var _temp = function () {
		if (typeof __REACT_HOT_LOADER__ === 'undefined') {
		return;
		}

		__REACT_HOT_LOADER__.register(CursorLine, 'CursorLine', 'src/lib/lines/CursorLine.js');

		__REACT_HOT_LOADER__.register(_default, 'default', 'src/lib/lines/CursorLine.js');
		}();

		;
		exports.default = CursorLine;

22

lib/lib/lines/HorizontalLines.js

		@@ -37,3 +37,3 @@ 'use strict';
		value: function shouldComponentUpdate(nextProps) {
		return !(nextProps.canvasWidth === this.props.canvasWidth && nextProps.headerHeight === this.props.headerHeight && nextProps.lineCount === this.props.lineCount && nextProps.groupHeights === this.props.groupHeights);
		return !(nextProps.canvasWidth === this.props.canvasWidth && nextProps.lineCount === this.props.lineCount && nextProps.groupHeights === this.props.groupHeights);
		}
		@@ -45,3 +45,2 @@ }, {
		canvasWidth = _props.canvasWidth,
		headerHeight = _props.headerHeight,
		lineCount = _props.lineCount,
		@@ -52,3 +51,3 @@ groupHeights = _props.groupHeights;

		var totalHeight = headerHeight;
		var totalHeight = 0;
		for (var i = 0; i < lineCount; i++) {
		@@ -81,20 +80,5 @@ lines.push(_react2.default.createElement('div', {
		canvasWidth: _propTypes2.default.number.isRequired,
		headerHeight: _propTypes2.default.number.isRequired,
		lineCount: _propTypes2.default.number.isRequired,
		groupHeights: _propTypes2.default.array.isRequired
		};
		var _default = HorizontalLines;
		exports.default = _default;
		;

		var _temp = function () {
		if (typeof __REACT_HOT_LOADER__ === 'undefined') {
		return;
		}

		__REACT_HOT_LOADER__.register(HorizontalLines, 'HorizontalLines', 'src/lib/lines/HorizontalLines.js');

		__REACT_HOT_LOADER__.register(_default, 'default', 'src/lib/lines/HorizontalLines.js');
		}();

		;
		exports.default = HorizontalLines;

22

lib/lib/lines/TodayLine.js

		@@ -45,6 +45,5 @@ 'use strict';
		var left = Math.round((currentTime - this.props.canvasTimeStart) * ratio);
		var top = this.props.headerHeight;
		var height = this.props.height - this.props.headerHeight;
		var height = this.props.height;
		var styles = {
		top: top + 'px',
		top: '0px',
		left: left + 'px',
		@@ -70,20 +69,5 @@ height: height + 'px'
		lineCount: _propTypes2.default.number.isRequired,
		headerHeight: _propTypes2.default.number.isRequired,
		height: _propTypes2.default.number.isRequired
		};
		TodayLine.defaultProps = {};
		var _default = TodayLine;
		exports.default = _default;
		;

		var _temp = function () {
		if (typeof __REACT_HOT_LOADER__ === 'undefined') {
		return;
		}

		__REACT_HOT_LOADER__.register(TodayLine, 'TodayLine', 'src/lib/lines/TodayLine.js');

		__REACT_HOT_LOADER__.register(_default, 'default', 'src/lib/lines/TodayLine.js');
		}();

		;
		exports.default = TodayLine;

37

lib/lib/lines/VerticalLines.js

		@@ -39,3 +39,3 @@ 'use strict';
		value: function shouldComponentUpdate(nextProps) {
		return !(nextProps.canvasTimeStart === this.props.canvasTimeStart && nextProps.canvasTimeEnd === this.props.canvasTimeEnd && nextProps.canvasWidth === this.props.canvasWidth && nextProps.lineHeight === this.props.lineHeight && nextProps.lineCount === this.props.lineCount && nextProps.minUnit === this.props.minUnit && nextProps.timeSteps === this.props.timeSteps && nextProps.fixedHeader === this.props.fixedHeader && nextProps.height === this.props.height && nextProps.headerHeight === this.props.headerHeight);
		return !(nextProps.canvasTimeStart === this.props.canvasTimeStart && nextProps.canvasTimeEnd === this.props.canvasTimeEnd && nextProps.canvasWidth === this.props.canvasWidth && nextProps.lineHeight === this.props.lineHeight && nextProps.lineCount === this.props.lineCount && nextProps.minUnit === this.props.minUnit && nextProps.timeSteps === this.props.timeSteps && nextProps.height === this.props.height);
		}
		@@ -45,4 +45,2 @@ }, {
		value: function render() {
		var _this2 = this;

		var _props = this.props,
		@@ -54,4 +52,3 @@ canvasTimeStart = _props.canvasTimeStart,
		timeSteps = _props.timeSteps,
		height = _props.height,
		headerHeight = _props.headerHeight;
		height = _props.height;

		@@ -68,3 +65,3 @@ var ratio = canvasWidth / (canvasTimeEnd - canvasTimeStart);
		var labelWidth = Math.ceil((nextTime.valueOf() - time.valueOf()) * ratio) - lineWidth;
		var leftPush = _this2.props.fixedHeader !== 'none' && firstOfType ? -1 : 0;
		var leftPush = firstOfType ? -1 : 0;

		@@ -77,6 +74,6 @@ var classNames = 'rct-vl' + (firstOfType ? ' rct-vl-first' : '') + (minUnit === 'day' \|\| minUnit === 'hour' \|\| minUnit === 'minute' ? ' rct-day-' + time.day() : '');
		style: {
		top: headerHeight + 'px',
		top: '0px',
		left: left + leftPush + 'px',
		width: labelWidth + 'px',
		height: height - headerHeight + 'px'
		height: height + 'px'
		}
		@@ -105,24 +102,4 @@ }));
		timeSteps: _propTypes2.default.object.isRequired,
		fixedHeader: _propTypes2.default.string.isRequired,
		height: _propTypes2.default.number.isRequired,
		headerHeight: _propTypes2.default.number.isRequired
		height: _propTypes2.default.number.isRequired
		};
		VerticalLines.defaultProps = {
		fixedHeader: 'sticky',
		dayBackground: null
		};
		var _default = VerticalLines;
		exports.default = _default;
		;

		var _temp = function () {
		if (typeof __REACT_HOT_LOADER__ === 'undefined') {
		return;
		}

		__REACT_HOT_LOADER__.register(VerticalLines, 'VerticalLines', 'src/lib/lines/VerticalLines.js');

		__REACT_HOT_LOADER__.register(_default, 'default', 'src/lib/lines/VerticalLines.js');
		}();

		;
		exports.default = VerticalLines;

15

lib/lib/test-utility/index.js

		@@ -7,2 +7,4 @@ 'use strict';
		exports.buildDom = buildDom;
		exports.sel = sel;
		exports.noop = noop;

		@@ -14,12 +16,7 @@ var _jsdom = require('jsdom');
		}
		;

		var _temp = function () {
		if (typeof __REACT_HOT_LOADER__ === 'undefined') {
		return;
		}
		function sel(selectorString) {
		return '[data-test-id="' + selectorString + '"]';
		}

		__REACT_HOT_LOADER__.register(buildDom, 'buildDom', 'src/lib/test-utility/index.js');
		}();

		;
		function noop() {}

534

lib/lib/Timeline.js

		@@ -6,3 +6,2 @@ 'use strict';
		});
		exports.defaultSubHeaderLabelFormats = exports.defaultHeaderLabelFormats = exports.defaultTimeSteps = exports.defaultKeys = undefined;

		@@ -59,2 +58,6 @@ var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

		var _ScrollElement = require('./scroll/ScrollElement');

		var _ScrollElement2 = _interopRequireDefault(_ScrollElement);

		var _window = require('../resize-detector/window');
		@@ -70,2 +73,4 @@

		var _defaultConfig = require('./default-config');

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
		@@ -81,55 +86,2 @@

		var defaultKeys = exports.defaultKeys = {
		groupIdKey: 'id',
		groupTitleKey: 'title',
		groupRightTitleKey: 'rightTitle',
		itemIdKey: 'id',
		itemTitleKey: 'title',
		itemDivTitleKey: 'title',
		itemGroupKey: 'group',
		itemTimeStartKey: 'start_time',
		itemTimeEndKey: 'end_time'
		};

		var defaultTimeSteps = exports.defaultTimeSteps = {
		second: 1,
		minute: 1,
		hour: 1,
		day: 1,
		month: 1,
		year: 1
		};

		var defaultHeaderLabelFormats = exports.defaultHeaderLabelFormats = {
		yearShort: 'YY',
		yearLong: 'YYYY',
		monthShort: 'MM/YY',
		monthMedium: 'MM/YYYY',
		monthMediumLong: 'MMM YYYY',
		monthLong: 'MMMM YYYY',
		dayShort: 'L',
		dayLong: 'dddd, LL',
		hourShort: 'HH',
		hourMedium: 'HH:00',
		hourMediumLong: 'L, HH:00',
		hourLong: 'dddd, LL, HH:00',
		time: 'LLL'
		};

		var defaultSubHeaderLabelFormats = exports.defaultSubHeaderLabelFormats = {
		yearShort: 'YY',
		yearLong: 'YYYY',
		monthShort: 'MM',
		monthMedium: 'MMM',
		monthLong: 'MMMM',
		dayShort: 'D',
		dayMedium: 'dd D',
		dayMediumLong: 'ddd, Do',
		dayLong: 'dddd, Do',
		hourShort: 'HH',
		hourLong: 'HH:00',
		minuteShort: 'mm',
		minuteLong: 'HH:mm'
		};

		var ReactCalendarTimeline = function (_Component) {
		@@ -192,4 +144,2 @@ _inherits(ReactCalendarTimeline, _Component);

		headerPosition: 'top',

		selectedItem: null,
		@@ -199,3 +149,2 @@ dragTime: null,
		resizeTime: null,
		isDragging: false,
		topOffset: 0,
		@@ -236,8 +185,2 @@ resizingItem: null,
		this.lastTouchDistance = null;

		window.addEventListener('scroll', this.scrollEventListener);

		this.scrollComponent.addEventListener('touchstart', this.touchStart);
		this.scrollComponent.addEventListener('touchmove', this.touchMove);
		this.scrollComponent.addEventListener('touchend', this.touchEnd);
		}
		@@ -252,12 +195,3 @@ }, {
		_window2.default.removeListener(this);

		window.removeEventListener('scroll', this.scrollEventListener);

		this.scrollComponent.removeEventListener('touchstart', this.touchStart);
		this.scrollComponent.removeEventListener('touchmove', this.touchMove);
		this.scrollComponent.removeEventListener('touchend', this.touchEnd);
		}

		// called on window scroll. it's job is to figure out if we should fix or float the header

		}, {
		@@ -305,16 +239,2 @@ key: 'componentWillReceiveProps',
		}, {
		key: 'zoomIn',
		value: function zoomIn(e) {
		e.preventDefault();

		this.changeZoom(0.75);
		}
		}, {
		key: 'zoomOut',
		value: function zoomOut(e) {
		e.preventDefault();

		this.changeZoom(1.25);
		}
		}, {
		key: 'changeZoom',
		@@ -376,3 +296,2 @@ value: function changeZoom(scale) {
		timeSteps: timeSteps,
		fixedHeader: this.props.fixedHeader,
		height: height,
		@@ -444,2 +363,24 @@ headerHeight: headerHeight
		value: function header(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, timeSteps, headerLabelGroupHeight, headerLabelHeight) {
		var _props2 = this.props,
		sidebarWidth = _props2.sidebarWidth,
		rightSidebarWidth = _props2.rightSidebarWidth;

		var leftSidebar = sidebarWidth != null && sidebarWidth > 0 && _react2.default.createElement(
		'div',
		{
		className: 'rct-sidebar-header',
		style: { width: this.props.sidebarWidth }
		},
		this.props.sidebarContent
		);

		var rightSidebar = rightSidebarWidth != null && rightSidebarWidth > 0 && _react2.default.createElement(
		'div',
		{
		className: 'rct-sidebar-header rct-sidebar-right',
		style: { width: this.props.rightSidebarWidth }
		},
		this.props.rightSidebarContent
		);

		return _react2.default.createElement(_Header2.default, {
		@@ -459,51 +400,48 @@ canvasTimeStart: canvasTimeStart,
		visibleTimeEnd: this.state.visibleTimeEnd,
		headerPosition: this.state.headerPosition,
		fixedHeader: this.props.fixedHeader,
		stickyOffset: this.props.stickyOffset,
		stickyHeader: this.props.stickyHeader,
		showPeriod: this.showPeriod,
		headerLabelFormats: this.props.headerLabelFormats,
		subHeaderLabelFormats: this.props.subHeaderLabelFormats
		subHeaderLabelFormats: this.props.subHeaderLabelFormats,
		registerScroll: this.registerScrollListener,
		leftSidebarHeader: leftSidebar,
		rightSidebarHeader: rightSidebar,
		headerRef: this.props.headerRef
		});
		}
		}, {
		key: 'componentDidUpdate',
		value: function componentDidUpdate() {
		this.headerScrollListener(this.state.currentScrollLeft);
		}
		}, {
		key: 'sidebar',
		value: function sidebar(height, groupHeights, headerHeight) {
		return _react2.default.createElement(
		_Sidebar2.default,
		{
		groups: this.props.groups,
		groupRenderer: this.props.groupRenderer,
		keys: this.props.keys,
		width: this.props.sidebarWidth,
		lineHeight: this.props.lineHeight,
		groupHeights: groupHeights,
		height: height,
		headerHeight: headerHeight,
		headerPosition: this.state.headerPosition,
		stickyOffset: this.props.stickyOffset,
		fixedHeader: this.props.fixedHeader
		},
		this.props.sidebarContent
		);
		value: function sidebar(height, groupHeights) {
		var sidebarWidth = this.props.sidebarWidth;

		return sidebarWidth != null && sidebarWidth > 0 && _react2.default.createElement(_Sidebar2.default, {
		groups: this.props.groups,
		groupRenderer: this.props.groupRenderer,
		keys: this.props.keys,
		width: this.props.sidebarWidth,
		lineHeight: this.props.lineHeight,
		groupHeights: groupHeights,
		height: height
		});
		}
		}, {
		key: 'rightSidebar',
		value: function rightSidebar(height, groupHeights, headerHeight) {
		return _react2.default.createElement(
		_Sidebar2.default,
		{
		groups: this.props.groups,
		keys: this.props.keys,
		isRightSidebar: true,
		width: this.props.rightSidebarWidth,
		lineHeight: this.props.lineHeight,
		groupHeights: groupHeights,
		height: height,
		headerHeight: headerHeight,
		headerPosition: this.state.headerPosition,
		stickyOffset: this.props.stickyOffset,
		fixedHeader: this.props.fixedHeader
		},
		this.props.rightSidebarContent
		);
		value: function rightSidebar(height, groupHeights) {
		var rightSidebarWidth = this.props.rightSidebarWidth;


		return rightSidebarWidth != null && rightSidebarWidth > 0 && _react2.default.createElement(_Sidebar2.default, {
		groups: this.props.groups,
		keys: this.props.keys,
		isRightSidebar: true,
		width: this.props.rightSidebarWidth,
		lineHeight: this.props.lineHeight,
		groupHeights: groupHeights,
		height: height
		});
		}
		@@ -523,11 +461,10 @@ }, {

		var _props2 = this.props,
		keys = _props2.keys,
		dragSnap = _props2.dragSnap,
		lineHeight = _props2.lineHeight,
		headerLabelGroupHeight = _props2.headerLabelGroupHeight,
		headerLabelHeight = _props2.headerLabelHeight,
		stackItems = _props2.stackItems,
		fullUpdate = _props2.fullUpdate,
		itemHeightRatio = _props2.itemHeightRatio;
		var _props3 = this.props,
		keys = _props3.keys,
		dragSnap = _props3.dragSnap,
		lineHeight = _props3.lineHeight,
		headerLabelGroupHeight = _props3.headerLabelGroupHeight,
		headerLabelHeight = _props3.headerLabelHeight,
		stackItems = _props3.stackItems,
		itemHeightRatio = _props3.itemHeightRatio;
		var _state2 = this.state,
		@@ -565,6 +502,3 @@ draggingItem = _state2.draggingItem,
		resizingEdge: resizingEdge,
		resizeTime: resizeTime,
		fullUpdate: fullUpdate,
		visibleTimeStart: visibleTimeStart,
		visibleTimeEnd: visibleTimeEnd
		resizeTime: resizeTime
		});
		@@ -638,15 +572,16 @@

		var _props3 = this.props,
		items = _props3.items,
		groups = _props3.groups,
		headerLabelGroupHeight = _props3.headerLabelGroupHeight,
		headerLabelHeight = _props3.headerLabelHeight,
		sidebarWidth = _props3.sidebarWidth,
		rightSidebarWidth = _props3.rightSidebarWidth,
		timeSteps = _props3.timeSteps,
		showCursorLine = _props3.showCursorLine;
		var _props4 = this.props,
		items = _props4.items,
		groups = _props4.groups,
		headerLabelGroupHeight = _props4.headerLabelGroupHeight,
		headerLabelHeight = _props4.headerLabelHeight,
		sidebarWidth = _props4.sidebarWidth,
		rightSidebarWidth = _props4.rightSidebarWidth,
		timeSteps = _props4.timeSteps,
		showCursorLine = _props4.showCursorLine,
		clickTolerance = _props4.clickTolerance,
		traditionalZoom = _props4.traditionalZoom;
		var _state3 = this.state,
		draggingItem = _state3.draggingItem,
		resizingItem = _state3.resizingItem,
		isDragging = _state3.isDragging,
		width = _state3.width,
		@@ -671,3 +606,5 @@ visibleTimeStart = _state3.visibleTimeStart,

		if (draggingItem \|\| resizingItem) {
		var isInteractingWithItem = !!draggingItem \|\| !!resizingItem;

		if (isInteractingWithItem) {
		var stackResults = this.stackItems(items, groups, canvasTimeStart, visibleTimeStart, visibleTimeEnd, width);
		@@ -684,8 +621,2 @@ dimensionItems = stackResults.dimensionItems;

		var scrollComponentStyle = {
		width: width + 'px',
		height: height + 20 + 'px',
		cursor: isDragging ? 'move' : 'default'
		};

		var canvasComponentStyle = {
		@@ -705,20 +636,26 @@ width: canvasWidth + 'px',
		},
		this.header(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, timeSteps, headerLabelGroupHeight, headerLabelHeight),
		_react2.default.createElement(
		'div',
		{ style: outerComponentStyle, className: 'rct-outer' },
		sidebarWidth > 0 ? this.sidebar(height, groupHeights, headerHeight) : null,
		sidebarWidth > 0 ? this.sidebar(height, groupHeights) : null,
		_react2.default.createElement(
		'div',
		_ScrollElement2.default,
		{
		ref: function ref(el) {
		scrollRef: function scrollRef(el) {
		return _this3.scrollComponent = el;
		},
		className: 'rct-scroll',
		style: scrollComponentStyle,
		width: width,
		height: height,
		clickTolerance: clickTolerance,
		onWheelZoom: this.handleWheelZoom,
		traditionalZoom: traditionalZoom,
		onClick: this.scrollAreaClick,
		onScroll: this.onScroll,
		onWheel: this.onWheel,
		onMouseDown: this.handleMouseDown,
		onMouseMove: this.handleMouseMove,
		onMouseUp: this.handleMouseUp,
		onMouseLeave: this.handleMouseLeave
		isInteractingWithItem: isInteractingWithItem,
		onDoubleClick: this.handleScrollDoubleClick,
		onMouseEnter: this.handleScrollMouseEnter,
		onMouseLeave: this.handleScrollMouseLeave,
		onMouseMove: this.handleScrollMouseMove,
		onContextMenu: this.handleScrollContextMenu
		},
		@@ -732,8 +669,3 @@ _react2.default.createElement(
		className: 'rct-canvas',
		style: canvasComponentStyle,
		onDoubleClick: this.handleDoubleClick,
		onMouseEnter: this.handleCanvasMouseEnter,
		onMouseLeave: this.handleCanvasMouseLeave,
		onMouseMove: this.handleCanvasMouseMove,
		onContextMenu: this.handleCanvasContextMenu
		style: canvasComponentStyle
		},
		@@ -744,3 +676,2 @@ this.items(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, dimensionItems, groupHeights, groupTops),
		this.todayLine(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, height, headerHeight),
		this.header(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, timeSteps, headerLabelGroupHeight, headerLabelHeight),
		mouseOverCanvas && showCursorLine ? this.cursorLine(cursorTime, canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, height, headerHeight) : null,
		@@ -751,3 +682,3 @@ this.infoLabel(),
		),
		rightSidebarWidth > 0 ? this.rightSidebar(height, groupHeights, headerHeight) : null
		rightSidebarWidth > 0 ? this.rightSidebar(height, groupHeights) : null
		)
		@@ -770,5 +701,4 @@ );
		minResizeWidth: _propTypes2.default.number,
		fixedHeader: _propTypes2.default.oneOf(['fixed', 'sticky', 'none']),
		stickyOffset: _propTypes2.default.number,
		fullUpdate: _propTypes2.default.bool,
		stickyHeader: _propTypes2.default.bool,
		lineHeight: _propTypes2.default.number,
		@@ -832,2 +762,3 @@ headerLabelGroupHeight: _propTypes2.default.number,
		}),
		headerRef: _propTypes2.default.func,

		@@ -897,5 +828,4 @@ timeSteps: _propTypes2.default.shape({
		minResizeWidth: 20,
		fixedHeader: 'sticky', // fixed or sticky or none
		stickyOffset: 0,
		fullUpdate: true,
		stickyHeader: true,
		lineHeight: 30,
		@@ -945,4 +875,5 @@ headerLabelGroupHeight: 30,
		style: {},
		keys: defaultKeys,
		timeSteps: defaultTimeSteps,
		keys: _defaultConfig.defaultKeys,
		timeSteps: _defaultConfig.defaultTimeSteps,
		headerRef: function headerRef() {},

		@@ -962,4 +893,4 @@ // if you pass in visibleTimeStart and visibleTimeEnd, you must also pass onTimeChange(visibleTimeStart, visibleTimeEnd),

		headerLabelFormats: defaultHeaderLabelFormats,
		subHeaderLabelFormats: defaultSubHeaderLabelFormats,
		headerLabelFormats: _defaultConfig.defaultHeaderLabelFormats,
		subHeaderLabelFormats: _defaultConfig.defaultSubHeaderLabelFormats,

		@@ -992,96 +923,2 @@ selected: null

		this.scrollEventListener = function () {
		var _props4 = _this4.props,
		headerLabelGroupHeight = _props4.headerLabelGroupHeight,
		headerLabelHeight = _props4.headerLabelHeight;

		var headerHeight = headerLabelGroupHeight + headerLabelHeight;

		var rect = _this4.container.getBoundingClientRect();

		if (rect.top > _this4.props.stickyOffset) {
		_this4.setState({ headerPosition: 'top' });
		} else if (rect.bottom < headerHeight + _this4.props.stickyOffset) {
		_this4.setState({ headerPosition: 'bottom' });
		} else {
		_this4.setState({ headerPosition: 'fixed' });
		}
		};

		this.touchStart = function (e) {
		if (e.touches.length === 2) {
		e.preventDefault();

		_this4.lastTouchDistance = Math.abs(e.touches[0].screenX - e.touches[1].screenX);
		_this4.singleTouchStart = null;
		_this4.lastSingleTouch = null;
		} else if (e.touches.length === 1) {
		e.preventDefault();

		var x = e.touches[0].clientX;
		var y = e.touches[0].clientY;

		_this4.lastTouchDistance = null;
		_this4.singleTouchStart = { x: x, y: y, screenY: window.pageYOffset };
		_this4.lastSingleTouch = { x: x, y: y, screenY: window.pageYOffset };
		}
		};

		this.touchMove = function (e) {
		if (_this4.state.dragTime \|\| _this4.state.resizeTime) {
		e.preventDefault();
		return;
		}
		if (_this4.lastTouchDistance && e.touches.length === 2) {
		e.preventDefault();

		var touchDistance = Math.abs(e.touches[0].screenX - e.touches[1].screenX);

		var parentPosition = (0, _domHelpers.getParentPosition)(e.currentTarget);
		var xPosition = (e.touches[0].screenX + e.touches[1].screenX) / 2 - parentPosition.x;

		if (touchDistance !== 0 && _this4.lastTouchDistance !== 0) {
		_this4.changeZoom(_this4.lastTouchDistance / touchDistance, xPosition / _this4.state.width);
		_this4.lastTouchDistance = touchDistance;
		}
		} else if (_this4.lastSingleTouch && e.touches.length === 1) {
		e.preventDefault();

		var x = e.touches[0].clientX;
		var y = e.touches[0].clientY;

		var deltaX = x - _this4.lastSingleTouch.x;
		// let deltaY = y - this.lastSingleTouch.y

		var deltaX0 = x - _this4.singleTouchStart.x;
		var deltaY0 = y - _this4.singleTouchStart.y;

		_this4.lastSingleTouch = { x: x, y: y };

		var moveX = Math.abs(deltaX0) * 3 > Math.abs(deltaY0);
		var moveY = Math.abs(deltaY0) * 3 > Math.abs(deltaX0);

		if (deltaX !== 0 && moveX) {
		_this4.scrollComponent.scrollLeft -= deltaX;
		}
		if (moveY) {
		window.scrollTo(window.pageXOffset, _this4.singleTouchStart.screenY - deltaY0);
		}
		}
		};

		this.touchEnd = function (e) {
		if (_this4.lastTouchDistance) {
		e.preventDefault();

		_this4.lastTouchDistance = null;
		}
		if (_this4.lastSingleTouch) {
		e.preventDefault();

		_this4.lastSingleTouch = null;
		_this4.singleTouchStart = null;
		}
		};

		this.resize = function () {
		@@ -1113,6 +950,5 @@ var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this4.props;

		this.onScroll = function () {
		var scrollComponent = _this4.scrollComponent;
		this.onScroll = function (scrollX) {
		var canvasTimeStart = _this4.state.canvasTimeStart;
		var scrollX = scrollComponent.scrollLeft;

		var zoom = _this4.state.visibleTimeEnd - _this4.state.visibleTimeStart;
		@@ -1122,3 +958,2 @@ var width = _this4.state.width;

		// move the virtual canvas if needed
		if (scrollX < _this4.state.width * 0.5) {
		@@ -1128,3 +963,2 @@ _this4.setState({
		});
		scrollComponent.scrollLeft += _this4.state.width;
		}
		@@ -1135,3 +969,2 @@ if (scrollX > _this4.state.width * 1.5) {
		});
		scrollComponent.scrollLeft -= _this4.state.width;
		}
		@@ -1142,2 +975,6 @@
		}

		_this4.setState({
		currentScrollLeft: scrollX
		});
		};
		@@ -1151,5 +988,3 @@
		var groups = updatedGroups \|\| _this4.props.groups;
		var fullUpdate = _this4.props.fullUpdate;


		var newState = {
		@@ -1185,6 +1020,6 @@ visibleTimeStart: visibleTimeStart,

		if (resetCanvas \|\| forceUpdateDimensions \|\| fullUpdate) {
		if (resetCanvas \|\| forceUpdateDimensions) {
		var canvasTimeStart = newState.canvasTimeStart ? newState.canvasTimeStart : oldCanvasTimeStart;

		var _stackItems3 = _this4.stackItems(items, groups, canvasTimeStart, visibleTimeStart, visibleTimeEnd, _this4.state.width, fullUpdate),
		var _stackItems3 = _this4.stackItems(items, groups, canvasTimeStart, visibleTimeStart, visibleTimeEnd, _this4.state.width),
		dimensionItems = _stackItems3.dimensionItems,
		@@ -1211,45 +1046,6 @@ height = _stackItems3.height,

		this.zoomWithWheel = function (speed, xPosition, deltaY) {
		this.handleWheelZoom = function (speed, xPosition, deltaY) {
		_this4.changeZoom(1.0 + speed * deltaY / 500, xPosition / _this4.state.width);
		};

		this.onWheel = function (e) {
		var traditionalZoom = _this4.props.traditionalZoom;


		e.preventDefault();

		// zoom in the time dimension
		if (e.ctrlKey \|\| e.metaKey \|\| e.altKey) {
		var parentPosition = (0, _domHelpers.getParentPosition)(e.currentTarget);
		var xPosition = e.clientX - parentPosition.x;

		var speed = e.ctrlKey ? 10 : e.metaKey ? 3 : 1;

		_this4.zoomWithWheel(speed, xPosition, e.deltaY);

		// convert vertical zoom to horiziontal
		} else if (e.shiftKey) {
		var scrollComponent = _this4.scrollComponent;
		scrollComponent.scrollLeft += e.deltaY;

		// no modifier pressed? we prevented the default event, so scroll or zoom as needed
		} else {
		if (e.deltaX !== 0) {
		if (!traditionalZoom) {
		_this4.scrollComponent.scrollLeft += e.deltaX;
		}
		}
		if (e.deltaY !== 0) {
		window.scrollTo(window.pageXOffset, window.pageYOffset + e.deltaY);
		if (traditionalZoom) {
		var _parentPosition = (0, _domHelpers.getParentPosition)(e.currentTarget);
		var _xPosition = e.clientX - _parentPosition.x;

		_this4.zoomWithWheel(10, _xPosition, e.deltaY);
		}
		}
		}
		};

		this.showPeriod = function (from, unit) {
		@@ -1427,51 +1223,3 @@ var visibleTimeStart = from.valueOf();

		this.handleMouseDown = function (e) {
		var topOffset = _this4.state.topOffset;
		var pageY = e.pageY;
		var _props6 = _this4.props,
		headerLabelGroupHeight = _props6.headerLabelGroupHeight,
		headerLabelHeight = _props6.headerLabelHeight;

		var headerHeight = headerLabelGroupHeight + headerLabelHeight;

		if (pageY - topOffset > headerHeight && e.button === 0) {
		_this4.setState({
		isDragging: true,
		dragStartPosition: e.pageX,
		dragLastPosition: e.pageX
		});
		}
		};

		this.handleMouseMove = function (e) {
		if (_this4.state.isDragging && !_this4.state.draggingItem && !_this4.state.resizingItem) {
		_this4.scrollComponent.scrollLeft += _this4.state.dragLastPosition - e.pageX;
		_this4.setState({ dragLastPosition: e.pageX });
		}
		};

		this.handleMouseUp = function (e) {
		var dragStartPosition = _this4.state.dragStartPosition;


		if (Math.abs(dragStartPosition - e.pageX) <= _this4.props.clickTolerance) {
		_this4.scrollAreaClick(e);
		}

		_this4.setState({
		isDragging: false,
		dragStartPosition: null,
		dragLastPosition: null
		});
		};

		this.handleMouseLeave = function () {
		_this4.setState({
		isDragging: false,
		dragStartPosition: null,
		dragLastPosition: null
		});
		};

		this.handleCanvasMouseEnter = function (e) {
		this.handleScrollMouseEnter = function (e) {
		var showCursorLine = _this4.props.showCursorLine;
		@@ -1488,3 +1236,3 @@

		this.handleCanvasMouseLeave = function (e) {
		this.handleScrollMouseLeave = function (e) {
		var showCursorLine = _this4.props.showCursorLine;
		@@ -1501,3 +1249,3 @@

		this.handleCanvasMouseMove = function (e) {
		this.handleScrollMouseMove = function (e) {
		var showCursorLine = _this4.props.showCursorLine;
		@@ -1533,3 +1281,7 @@ var _state8 = _this4.state,

		this.handleDoubleClick = function (e) {
		this.registerScrollListener = function (listener) {
		_this4.headerScrollListener = listener;
		};

		this.handleScrollDoubleClick = function (e) {
		var _state9 = _this4.state,
		@@ -1599,3 +1351,3 @@ canvasTimeStart = _state9.canvasTimeStart,

		this.handleCanvasContextMenu = function (e) {
		this.handleScrollContextMenu = function (e) {
		var _state10 = _this4.state,
		@@ -1660,24 +1412,2 @@ canvasTimeStart = _state10.canvasTimeStart,

		var _default = ReactCalendarTimeline;
		exports.default = _default;
		;

		var _temp = function () {
		if (typeof __REACT_HOT_LOADER__ === 'undefined') {
		return;
		}

		__REACT_HOT_LOADER__.register(defaultKeys, 'defaultKeys', 'src/lib/Timeline.js');

		__REACT_HOT_LOADER__.register(defaultTimeSteps, 'defaultTimeSteps', 'src/lib/Timeline.js');

		__REACT_HOT_LOADER__.register(defaultHeaderLabelFormats, 'defaultHeaderLabelFormats', 'src/lib/Timeline.js');

		__REACT_HOT_LOADER__.register(defaultSubHeaderLabelFormats, 'defaultSubHeaderLabelFormats', 'src/lib/Timeline.js');

		__REACT_HOT_LOADER__.register(ReactCalendarTimeline, 'ReactCalendarTimeline', 'src/lib/Timeline.js');

		__REACT_HOT_LOADER__.register(_default, 'default', 'src/lib/Timeline.js');
		}();

		;
		exports.default = ReactCalendarTimeline;

79

lib/lib/utility/calendar.js

		@@ -143,6 +143,3 @@ 'use strict';
		resizingEdge = _ref.resizingEdge,
		resizeTime = _ref.resizeTime,
		fullUpdate = _ref.fullUpdate,
		visibleTimeStart = _ref.visibleTimeStart,
		visibleTimeEnd = _ref.visibleTimeEnd;
		resizeTime = _ref.resizeTime;

		@@ -168,25 +165,2 @@ var itemStart = isResizing && resizingEdge === 'left' ? resizeTime : itemTimeStart;

		var clippedLeft = false;
		var clippedRight = false;

		if (fullUpdate) {
		if (!isDragging && (visibleTimeStart > x + w \|\| visibleTimeEnd < x)) {
		return null;
		}

		if (visibleTimeStart > x) {
		w -= visibleTimeStart - x;
		x = visibleTimeStart;
		if (isDragging && w < 0) {
		x += w;
		w = 0;
		}
		clippedLeft = true;
		}
		if (x + w > visibleTimeEnd) {
		w -= x + w - visibleTimeEnd;
		clippedRight = true;
		}
		}

		var ratio = 1 / coordinateToTimeRatio(canvasTimeStart, canvasTimeEnd, canvasWidth);
		@@ -199,5 +173,3 @@
		originalLeft: itemTimeStart,
		collisionWidth: collisionW,
		clippedLeft: clippedLeft,
		clippedRight: clippedRight
		collisionWidth: collisionW
		};
		@@ -259,5 +231,5 @@

		function stack(items, groupOrders, lineHeight, headerHeight, force) {
		function stack(items, groupOrders, lineHeight, force) {
		var i, iMax;
		var totalHeight = headerHeight;
		var totalHeight = 0;

		@@ -320,6 +292,6 @@ var groupHeights = [];

		function nostack(items, groupOrders, lineHeight, headerHeight, force) {
		function nostack(items, groupOrders, lineHeight, force) {
		var i, iMax;

		var totalHeight = headerHeight;
		var totalHeight = 0;

		@@ -361,39 +333,2 @@ var groupHeights = [];
		};
		}
		;

		var _temp = function () {
		if (typeof __REACT_HOT_LOADER__ === 'undefined') {
		return;
		}

		__REACT_HOT_LOADER__.register(coordinateToTimeRatio, 'coordinateToTimeRatio', 'src/lib/utility/calendar.js');

		__REACT_HOT_LOADER__.register(calculateXPositionForTime, 'calculateXPositionForTime', 'src/lib/utility/calendar.js');

		__REACT_HOT_LOADER__.register(iterateTimes, 'iterateTimes', 'src/lib/utility/calendar.js');

		__REACT_HOT_LOADER__.register(minCellWidth, 'minCellWidth', 'src/lib/utility/calendar.js');

		__REACT_HOT_LOADER__.register(getMinUnit, 'getMinUnit', 'src/lib/utility/calendar.js');

		__REACT_HOT_LOADER__.register(getNextUnit, 'getNextUnit', 'src/lib/utility/calendar.js');

		__REACT_HOT_LOADER__.register(calculateDimensions, 'calculateDimensions', 'src/lib/utility/calendar.js');

		__REACT_HOT_LOADER__.register(getGroupOrders, 'getGroupOrders', 'src/lib/utility/calendar.js');

		__REACT_HOT_LOADER__.register(getGroupedItems, 'getGroupedItems', 'src/lib/utility/calendar.js');

		__REACT_HOT_LOADER__.register(getVisibleItems, 'getVisibleItems', 'src/lib/utility/calendar.js');

		__REACT_HOT_LOADER__.register(EPSILON, 'EPSILON', 'src/lib/utility/calendar.js');

		__REACT_HOT_LOADER__.register(collision, 'collision', 'src/lib/utility/calendar.js');

		__REACT_HOT_LOADER__.register(stack, 'stack', 'src/lib/utility/calendar.js');

		__REACT_HOT_LOADER__.register(nostack, 'nostack', 'src/lib/utility/calendar.js');
		}();

		;
		}

17

lib/lib/utility/dom-helpers.js

		@@ -35,17 +35,2 @@ 'use strict';
		return { x: xPosition, y: yPosition };
		}
		;

		var _temp = function () {
		if (typeof __REACT_HOT_LOADER__ === 'undefined') {
		return;
		}

		__REACT_HOT_LOADER__.register(ELEMENT_NODE, 'ELEMENT_NODE', 'src/lib/utility/dom-helpers.js');

		__REACT_HOT_LOADER__.register(hasSomeParentTheClass, 'hasSomeParentTheClass', 'src/lib/utility/dom-helpers.js');

		__REACT_HOT_LOADER__.register(getParentPosition, 'getParentPosition', 'src/lib/utility/dom-helpers.js');
		}();

		;
		}

21

lib/lib/utility/generic.js

		@@ -46,21 +46,2 @@ 'use strict';
		return obj;
		}
		;

		var _temp = function () {
		if (typeof __REACT_HOT_LOADER__ === 'undefined') {
		return;
		}

		__REACT_HOT_LOADER__.register(_get, '_get', 'src/lib/utility/generic.js');

		__REACT_HOT_LOADER__.register(_length, '_length', 'src/lib/utility/generic.js');

		__REACT_HOT_LOADER__.register(arraysEqual, 'arraysEqual', 'src/lib/utility/generic.js');

		__REACT_HOT_LOADER__.register(deepObjectCompare, 'deepObjectCompare', 'src/lib/utility/generic.js');

		__REACT_HOT_LOADER__.register(keyBy, 'keyBy', 'src/lib/utility/generic.js');
		}();

		;
		}

11

lib/mocks/styleMock.js

		"use strict";

		module.exports = {};
		;

		var _temp = function () {
		if (typeof __REACT_HOT_LOADER__ === 'undefined') {
		return;
		}
		}();

		;
		module.exports = {};

18

lib/resize-detector/container.js

		@@ -34,18 +34,2 @@ 'use strict';

		var _default = { addListener: addListener, removeListener: removeListener };
		exports.default = _default;
		;

		var _temp = function () {
		if (typeof __REACT_HOT_LOADER__ === 'undefined') {
		return;
		}

		__REACT_HOT_LOADER__.register(addListener, 'addListener', 'src/resize-detector/container.js');

		__REACT_HOT_LOADER__.register(removeListener, 'removeListener', 'src/resize-detector/container.js');

		__REACT_HOT_LOADER__.register(_default, 'default', 'src/resize-detector/container.js');
		}();

		;
		exports.default = { addListener: addListener, removeListener: removeListener };

18

lib/resize-detector/window.js

		@@ -20,18 +20,2 @@ 'use strict';

		var _default = { addListener: addListener, removeListener: removeListener };
		exports.default = _default;
		;

		var _temp = function () {
		if (typeof __REACT_HOT_LOADER__ === 'undefined') {
		return;
		}

		__REACT_HOT_LOADER__.register(addListener, 'addListener', 'src/resize-detector/window.js');

		__REACT_HOT_LOADER__.register(removeListener, 'removeListener', 'src/resize-detector/window.js');

		__REACT_HOT_LOADER__.register(_default, 'default', 'src/resize-detector/window.js');
		}();

		;
		exports.default = { addListener: addListener, removeListener: removeListener };

0

LICENSE.md

@@ -0,0 +0,0 @@ # The MIT License (MIT)

16

package.json

		{
		"name": "react-calendar-timeline",
		"version": "0.15.10",
		"version": "0.16.0",
		"description": "react calendar timeline",
		@@ -9,10 +9,10 @@ "main": "lib/index.js",
		"build": "npm run build:lib",
		"build:demo": "echo '!!! Building Demo' && BABEL_ENV=react node build.js production",
		"build:lib": "echo '!!! Building Library' && ./node_modules/.bin/babel src --out-dir lib && ./node_modules/.bin/node-sass src/lib/Timeline.scss lib/lib/Timeline.css && sed -i'.bak' 's/Timeline\\.scss/Timeline\\.css/g' lib/lib/Timeline.js && rm lib/lib/Timeline.js.bak",
		"jest": "node_modules/.bin/jest",
		"jest:update": "node_modules/.bin/jest -u",
		"build:demo": "echo '!!! Building Demo' && cross-env NODE_ENV=production webpack --progress",
		"build:lib": "echo '!!! Building Library' && cross-env NODE_ENV=production babel src --out-dir lib && node-sass src/lib/Timeline.scss lib/lib/Timeline.css && sed -i'.bak' 's/Timeline\\.scss/Timeline\\.css/g' lib/lib/Timeline.js && rm lib/lib/Timeline.js.bak",
		"jest": "jest",
		"jest:update": "jest -u",
		"lint": "eslint --ext .js --ext .jsx ./src",
		"lint:fix": "prettier-eslint --parser babylon --write \"src/*/.js\"",
		"prepublish": "npm run build:lib",
		"start": "./node_modules/.bin/webpack-dev-server --hot --host 0.0.0.0 --display-modules",
		"start": "webpack-dev-server --hot --host 0.0.0.0 --display-modules",
		"test": "npm run build:lib && npm run jest && npm run lint"
		@@ -76,2 +76,3 @@ },
		"babel-plugin-add-module-exports": "^0.2.1",
		"babel-plugin-react-remove-properties": "^0.2.5",
		"babel-plugin-transform-class-properties": "^6.24.1",
		@@ -81,2 +82,3 @@ "babel-plugin-transform-object-rest-spread": "^6.26.0",
		"babel-preset-react": "^6.5.0",
		"cross-env": "^5.1.4",
		"css-loader": "~0.26.0",
		@@ -116,2 +118,2 @@ "enzyme": "^3.3.0",
		}
		}
		}

250

README.md

		@@ -41,11 +41,26 @@ # React Calendar Timeline

		const groups = [
		{id: 1, title: 'group 1'},
		{id: 2, title: 'group 2'}
		]
		const groups = [{ id: 1, title: 'group 1' }, { id: 2, title: 'group 2' }]

		const items = [
		{id: 1, group: 1, title: 'item 1', start_time: moment(), end_time: moment().add(1, 'hour')},
		{id: 2, group: 2, title: 'item 2', start_time: moment().add(-0.5, 'hour'), end_time: moment().add(0.5, 'hour')},
		{id: 3, group: 1, title: 'item 3', start_time: moment().add(2, 'hour'), end_time: moment().add(3, 'hour')}
		{
		id: 1,
		group: 1,
		title: 'item 1',
		start_time: moment(),
		end_time: moment().add(1, 'hour')
		},
		{
		id: 2,
		group: 2,
		title: 'item 2',
		start_time: moment().add(-0.5, 'hour'),
		end_time: moment().add(0.5, 'hour')
		},
		{
		id: 3,
		group: 1,
		title: 'item 3',
		start_time: moment().add(2, 'hour'),
		end_time: moment().add(3, 'hour')
		}
		]
		@@ -56,19 +71,23 @@
		Rendered by react!
		<Timeline groups={groups}
		items={items}
		defaultTimeStart={moment().add(-12, 'hour')}
		defaultTimeEnd={moment().add(12, 'hour')}
		/>
		<Timeline
		groups={groups}
		items={items}
		defaultTimeStart={moment().add(-12, 'hour')}
		defaultTimeEnd={moment().add(12, 'hour')}
		/>
		</div>,
		document.getElementById('root')
		);
		)
		```

		## API
		NB! All props need to be immutable. For example, this means if you wish to change the title of one of your items, please pass in a whole new items array instead of changing the title in the old array. [Here's more info.](http://reactkungfu.com/2015/08/pros-and-cons-of-using-immutability-with-react-js/)

		_NB!_ All props need to be immutable. For example, this means if you wish to change the title of one of your items, please pass in a whole new items array instead of changing the title in the old array. [Here's more info.](http://reactkungfu.com/2015/08/pros-and-cons-of-using-immutability-with-react-js/)

		The component can take many props:

		### groups

		Expects either a vanilla JS array or an immutableJS array, consisting of objects with the following attributes:

		```js
		@@ -85,3 +104,5 @@ {
		### items

		Expects either a vanilla JS array or an immutableJS array, consisting of objects with the following attributes:

		```js
		@@ -110,6 +131,9 @@ {
		### selected

		An array with id's corresponding to id's in items (`item.id`). If this prop is set you have to manage the selected items yourself within the `onItemSelect` handler to update the property with new id's. This overwrites the default behaviour of selecting one item on click.

		### keys

		An array specifying keys in the `items` and `groups` objects. Defaults to

		```js
		@@ -130,89 +154,104 @@ {
		### sidebarWidth

		Width of the sidebar in pixels. If set to `0`, the sidebar is not rendered. Defaults to `150`.

		### sidebarContent

		Everything passed here will be displayed above the left sidebar. Use this to display small filters or so. Defaults to `null`.

		### rightSidebarWidth

		Width of the right sidebar in pixels. If set to `0`, the right sidebar is not rendered. Defaults to `0`.

		### rightSidebarContent

		Everything passed here will be displayed above the right sidebar. Use this to display small filters or so. Defaults to `null`.

		### dragSnap

		Snapping unit when dragging items. Defaults to `15 * 60 * 1000` or 15min. When so, the items will snap to 15min intervals when dragging.

		### minResizeWidth

		The minimum width, in pixels, of a timeline entry when it's possible to resize. If not reached, you must zoom in to resize more. Default to `20`.

		### fixedHeader
		How does the header (the scrolling part with dates) behave if not all of the groups fit on the page, resulting in a vertical scrollbar.
		### stickyOffset

		* `fixed` - the header is always fixed to its initial position
		* `sticky` (default) - the header follows the scroll of the page to be always visible
		* `none` - the header is always at the top of the component and doesn't stick with scrolling
		At what height from the top of the screen should we start "sticking" the header (i.e. position: sticky)? This is useful if for example you already have
		a sticky navbar and want to push the timeline header down further. Defaults `0`.

		### stickyOffset
		If fixedHeader is `sticky`, at what height from the top of the screen should we start floating it? This is useful if for example you already have
		a sticky navbar. Defaults `0`.
		### stickyHeader

		### fullUpdate
		If your calendar has large items compared to the zoom level (e.g. multi week events when viewing one day at a time), set this to `true` (default).
		Specify whether you want the timeline header to be "sticky". Pass `false` if you want the header to fix at top of element and not fix when you scroll down the page. Defaults to `true`

		If you have many small events compared to the zoom level (e.g. hundreds of 30min events and viewing one week at a time), set this to `false`.
		### headerRef

		When set to `true` we update the dimensions of the items on every scroll event. This looks nicer, as 1) item labels
		are always fully on the screen, even if the start or end of the items is off screen, 2) item stacking also reflects what's on the screen.
		Ref callback that gets a DOM reference to the header element. See [FAQ below](#the-timeline-header-doesnt-fix-to-the-top-of-the-container-when-i-scroll-down).

		When set to `false`, we update the dimensions of the items only when the [scrolling canvas](https://github.com/namespace-ee/react-calendar-timeline#behind-the-scenes) updates. This makes scrolling much faster, but labels can go off screen.
		### lineHeight

		### lineHeight
		Height of one line in the calendar in pixels. Default `30`

		### headerLabelGroupHeight

		Height of the top header line. Default `30`

		### headerLabelHeight

		Height of the bottom header line. Default `30`

		### itemHeightRatio

		What percentage of the height of the line is taken by the item? Default `0.65`

		### minZoom

		Smallest time the calendar can zoom to in milliseconds. Default `60 * 60 * 1000` (1 hour)

		### maxZoom

		Largest time the calendar can zoom to in milliseconds. Default `5 * 365.24 * 86400 * 1000` (5 years)

		### clickTolerance

		How many pixels we can drag the background for it to be counted as a click on the background. Defualt: `3`

		### canMove

		Can items be dragged around? Can be overridden in the `items` array. Defaults to `true`

		### canChangeGroup

		Can items be moved between groups? Can be overridden in the `items` array. Defaults to `true`

		### canResize

		Can items be resized? Can be overridden in the `items` array. Accepted values: `false`, `"left"`, `"right"`, `"both"`. Defaults to `"right"`. If you pass `true`, it will be treated as `"right"` to not break compatibility with versions 0.9 and below.

		### useResizeHandle

		Append a special `.rct-drag-right` handle to the elements and only resize if dragged from there. Defaults to `false`

		### showCursorLine

		Show a vertical line at the snap point when you mouse over the calendar

		### stackItems

		Stack items under each other, so there is no visual overlap when times collide. Defaults to `false`.

		### traditionalZoom

		Zoom in when scrolling the mouse up/down. Defaults to `false`

		### itemTouchSendsClick

		Normally tapping (touching) an item selects it. If this is set to true, a tap will have the same effect, as selecting with the first click and then clicking again to open and send the onItemClick event. Defaults to `false`.

		### timeSteps

		With what step to display different units. E.g. `15` for `minute` means only minutes 0, 15, 30 and 45 will be shown.

		Default:

		```js
		@@ -230,32 +269,43 @@ {
		### onItemMove(itemId, dragTime, newGroupOrder)

		Callback when an item is moved. Returns 1) the item's ID, 2) the new start time and 3) the index of the new group in the `groups` array.

		### onItemResize(itemId, time, edge)

		Callback when an item is resized. Returns 1) the item's ID, 2) the new start or end time of the item 3) The edge that was dragged (`left` or `right`)

		### onItemSelect(itemId, e, time)

		Called when an item is selected. This is sent on the first click on an item. `time` is the time that corresponds to where you click/select on the item in the timeline.

		### onItemClick(itemId, e, time)

		Called when an item is clicked. Note: the item must be selected before it's clicked... except if it's a touch event and `itemTouchSendsClick` is enabled. `time` is the time that corresponds to where you click on the item in the timeline.

		### onItemDoubleClick(itemId, e, time)

		Called when an item was double clicked. `time` is the time that corresponds to where you double click on the item in the timeline.

		### onItemContextMenu(itemId, e, time)

		Called when the item is clicked by the right button of the mouse. `time` is the time that corresponds to where you context click on the item in the timeline. Note: If this property is set the default context menu doesn't appear.

		### onCanvasClick(groupId, time, e)

		Called when an empty spot on the canvas was clicked. Get the group ID and the time as arguments. For example open a "new item" window after this.

		### onCanvasDoubleClick(group, time, e)

		Called when an empty spot on the canvas was double clicked. Get the group and the time as arguments.

		### onCanvasContextMenu(group, time, e)

		Called when the canvas is clicked by the right button of the mouse. Note: If this property is set the default context menu doesn't appear

		### onZoom(timelineContext)

		Called when the timeline is zoomed, either via mouse/pinch zoom or clicking header to change timeline units

		### moveResizeValidator(action, itemId, time, resizeEdge)

		This function is called when an item is being moved or resized. It's up to this function to return a new version of `change`, when the proposed move would violate business logic.
		@@ -285,44 +335,52 @@
		### defaultTimeStart and defaultTimeEnd

		Unless overridden by `visibleTimeStart` and `visibleTimeEnd`, specify where the calendar begins and where it ends. This parameter expects a Date or moment object.

		### visibleTimeStart and visibleTimeEnd
		The exact viewport of the calendar. When these are specified, scrolling in the calendar must be orchestrated by the `onTimeChange` function. This parameter expects a unix timestamp in milliseconds.

		The exact viewport of the calendar. When these are specified, scrolling in the calendar must be orchestrated by the `onTimeChange` function. This parameter expects a unix timestamp in milliseconds.

		### headerLabelFormats and subHeaderLabelFormats

		The formats passed to moment to render times in the header and subheader. Defaults to these:

		```js
		import { defaultHeaderLabelFormats, defaultSubHeaderLabelFormats } from 'react-calendar-timeline'
		import {
		defaultHeaderLabelFormats,
		defaultSubHeaderLabelFormats
		} from 'react-calendar-timeline'

		defaultHeaderLabelFormats == {
		yearShort: 'YY',
		yearLong: 'YYYY',
		monthShort: 'MM/YY',
		monthMedium: 'MM/YYYY',
		monthMediumLong: 'MMM YYYY',
		monthLong: 'MMMM YYYY',
		dayShort: 'L',
		dayLong: 'dddd, LL',
		hourShort: 'HH',
		hourMedium: 'HH:00',
		hourMediumLong: 'L, HH:00',
		hourLong: 'dddd, LL, HH:00',
		time: 'LLL'
		}
		defaultHeaderLabelFormats ==
		{
		yearShort: 'YY',
		yearLong: 'YYYY',
		monthShort: 'MM/YY',
		monthMedium: 'MM/YYYY',
		monthMediumLong: 'MMM YYYY',
		monthLong: 'MMMM YYYY',
		dayShort: 'L',
		dayLong: 'dddd, LL',
		hourShort: 'HH',
		hourMedium: 'HH:00',
		hourMediumLong: 'L, HH:00',
		hourLong: 'dddd, LL, HH:00',
		time: 'LLL'
		}

		defaultSubHeaderLabelFormats == {
		yearShort: 'YY',
		yearLong: 'YYYY',
		monthShort: 'MM',
		monthMedium: 'MMM',
		monthLong: 'MMMM',
		dayShort: 'D',
		dayMedium: 'dd D',
		dayMediumLong: 'ddd, Do',
		dayLong: 'dddd, Do',
		hourShort: 'HH',
		hourLong: 'HH:00',
		minuteShort: 'mm',
		minuteLong: 'HH:mm'
		}
		defaultSubHeaderLabelFormats ==
		{
		yearShort: 'YY',
		yearLong: 'YYYY',
		monthShort: 'MM',
		monthMedium: 'MMM',
		monthLong: 'MMMM',
		dayShort: 'D',
		dayMedium: 'dd D',
		dayMediumLong: 'ddd, Do',
		dayLong: 'dddd, Do',
		hourShort: 'HH',
		hourLong: 'HH:00',
		minuteShort: 'mm',
		minuteLong: 'HH:mm'
		}
		```
		@@ -333,3 +391,6 @@
		```js
		import { defaultHeaderLabelFormats, defaultSubHeaderLabelFormats } from 'react-calendar-timeline'
		import {
		defaultHeaderLabelFormats,
		defaultSubHeaderLabelFormats
		} from 'react-calendar-timeline'

		@@ -340,10 +401,14 @@ const usHeaderLabelFormats = Object.assign({}, defaultSubHeaderLabelFormats, {
		hourMediumLong: 'L, h A',
		hourLong: 'dddd, LL, h A',
		hourLong: 'dddd, LL, h A'
		})

		const usSubHeaderLabelFormats = Object.assign({}, defaultSubHeaderLabelFormats, {
		hourShort: 'h A',
		hourLong: 'h A',
		minuteLong: 'h:mm A'
		})
		const usSubHeaderLabelFormats = Object.assign(
		{},
		defaultSubHeaderLabelFormats,
		{
		hourShort: 'h A',
		hourLong: 'h A',
		minuteLong: 'h:mm A'
		}
		)
		```
		@@ -354,2 +419,3 @@
		### onTimeChange(visibleTimeStart, visibleTimeEnd, updateScrollCanvas)

		A function that's called when the user tries to scroll. Call the passed `updateScrollCanvas(start, end)` with the updated visibleTimeStart and visibleTimeEnd (as unix timestamps in milliseconds) to change the scroll behavior, for example to limit scrolling.
		@@ -378,9 +444,12 @@
		### onTimeInit(visibleTimeStart, visibleTimeEnd)

		Called when the calendar is first initialised. `visibleTimeStart` and `visibleTimeEnd` are unix timestamps in milliseconds.

		### onBoundsChange(canvasTimeStart, canvasTimeEnd)

		Called when the bounds in the calendar's canvas change. Use it for example to load new data to display. (see "Behind the scenes" below). `canvasTimeStart` and `canvasTimeEnd` are unix timestamps in milliseconds.

		### itemRenderer
		React component that will be used to render the item content. Will be

		React component that will be used to render the item content. Will be
		passed the `item` as a prop.
		@@ -442,2 +511,3 @@
		### groupRenderer

		React component that will be used to render the content of groups in the
		@@ -457,5 +527,5 @@ sidebar. Will be passed the `group` and `isRightSidebar` as props.
		return (
		<div className='custom-group'>
		<span className='title'>{group.title}</span>
		<p className='tip'>{group.tip}</p>
		<div className="custom-group">
		<span className="title">{group.title}</span>
		<p className="tip">{group.tip}</p>
		</div>
		@@ -467,2 +537,3 @@ )
		### resizeDetector

		The component automatically detects when the window has been resized. Optionally you can also detect when the component's DOM element has been resized.
		@@ -478,2 +549,3 @@ To do this, pass a `resizeDetector`. Since bundling it by default would add ~18kb of minimized JS, you need to opt in to this like so:
		### children (plugins)

		If you give the component any children, they will be passed some extra props. Use this to render anything on the timeline (custom backgrounds, arrows, etc).
		@@ -507,3 +579,3 @@
		.react-calendar-timeline .rct-items .rct-item.analysis {
		backgroundColor: #68efad;
		background-color: #68efad;
		}
		@@ -518,2 +590,3 @@ ```
		To use it, you need to add two props to the `<Timeline />` component:

		```jsx
		@@ -525,2 +598,3 @@ rightSidebarWidth={150}
		And add `right_sidebar` prop to the groups objects:

		```js
		@@ -534,2 +608,31 @@ {

		### The timeline header doesn't fix to the top of the container when I scroll down.

		There are two causes of this:

		* you are passing `stickyHeader={false}` to the timeline component. The header by default has sticky behavior unless you tell it not to using this prop.
		* the browser you are viewing the timeline in doesn't support `position: sticky`. In this scenario, you will need to polyfill this behavior using the `headerRef`.

		In this example, we use [stickyfill](https://github.com/wilddeer/stickyfill) as our sticky polyfill

		```jsx
		// add a handler in your parent component that accepts a DOM element
		// with this element, pass the element into a polyfill library

		handleHeaderRef = (el) => {
		// polyfill dom element with stickyfill
		Stickyfill.addOne(el)
		}

		// in render, pass this handler to the `headerRef` prop:

		render() {
		<Timeline
		//other props
		headerRef={this.handleHeaderRef}

		/>
		}
		```

		### I'm using Babel with Rollup or Webpack 2+ and I'm getting strange bugs with click events
		@@ -606,3 +709,2 @@


		<!--
		@@ -609,0 +711,0 @@

0

src/index.js

		import Timeline from './lib/Timeline'

		export default Timeline

0

src/lib/__tests__/index.js

@@ -0,0 +0,0 @@ import React from 'react'

46

src/lib/__tests__/utils/calendar/calculate-dimensions.js

		@@ -18,3 +18,2 @@ import { calculateDimensions } from '../../../utility/calendar'
		resizeTime: false, // we are not resizing right now
		fullUpdate: true,
		visibleTimeStart: 0,
		@@ -25,4 +24,2 @@ visibleTimeEnd: 500
		expect(dimension).toMatchObject({
		clippedLeft: false,
		clippedRight: false,
		collisionLeft: 200,
		@@ -50,3 +47,2 @@ collisionWidth: 100,
		resizeTime: false, // we are not resizing right now
		fullUpdate: true,
		visibleTimeStart: 0,
		@@ -57,4 +53,2 @@ visibleTimeEnd: 500
		expect(dimension).toMatchObject({
		clippedLeft: false,
		clippedRight: false,
		collisionLeft: 192,
		@@ -82,23 +76,9 @@ collisionWidth: 108,
		resizeTime: false, // we are not resizing right now
		fullUpdate: true,
		visibleTimeStart: 100,
		visibleTimeEnd: 500
		}

		expect(calculateDimensions(example)).toMatchObject({
		clippedLeft: true,
		clippedRight: false,
		collisionLeft: 0,
		collisionWidth: 300,
		left: 0,
		originalLeft: 0,
		width: 200
		})
		// if we don't do the fullUpdate we don't get correct
		// clipping informations
		example.fullUpdate = false
		expect(calculateDimensions(example)).toMatchObject({
		clippedLeft: false,
		clippedRight: false,
		collisionLeft: 0,
		collisionWidth: 300,
		left: -100,
		@@ -124,9 +104,7 @@ originalLeft: 0,
		resizeTime: false, // we are not resizing right now
		fullUpdate: true,
		visibleTimeStart: 500,
		visibleTimeEnd: 900
		}

		expect(calculateDimensions(example)).toMatchObject({
		clippedLeft: false,
		clippedRight: true,
		collisionLeft: 700,
		@@ -136,14 +114,2 @@ collisionWidth: 300,
		originalLeft: 700,
		width: 200
		})
		// if we don't do the fullUpdate we don't get correct
		// clipping informations
		example.fullUpdate = false
		expect(calculateDimensions(example)).toMatchObject({
		clippedLeft: false,
		clippedRight: false,
		collisionLeft: 700,
		collisionWidth: 300,
		left: 200,
		originalLeft: 700,
		width: 300
		@@ -167,3 +133,2 @@ })
		resizeTime: false, // we are not resizing right now
		fullUpdate: true,
		visibleTimeStart: 0,
		@@ -174,4 +139,2 @@ visibleTimeEnd: 500
		expect(dimension).toMatchObject({
		clippedLeft: false,
		clippedRight: false,
		collisionLeft: 200,
		@@ -202,4 +165,2 @@ collisionWidth: 200,
		expect(dimension).toMatchObject({
		clippedLeft: false,
		clippedRight: false,
		collisionLeft: 200,
		@@ -227,3 +188,2 @@ collisionWidth: 50,
		resizeTime: 210,
		fullUpdate: true,
		visibleTimeStart: 0,
		@@ -234,4 +194,2 @@ visibleTimeEnd: 500
		expect(dimension).toMatchObject({
		clippedLeft: false,
		clippedRight: false,
		collisionLeft: 210,
		@@ -238,0 +196,0 @@ collisionWidth: 90,

0

src/lib/__tests__/utils/calendar/calculate-x-position-for-time.js

@@ -0,0 +0,0 @@ import { calculateXPositionForTime } from '../../../utility/calendar'

0

src/lib/__tests__/utils/calendar/collision.js