react-calendar-timeline - npm Package Compare versions

Comparing version 0.18.0-beta.2 to 0.18.0

CHANGELOG.md

@@ -10,8 +10,15 @@ # Change Log
 
+### 0.18.0
+
+### Fixed
+
+* Timeline now respects changes to `headerLabelFormats` and `subHeaderLabelFormats` - #362
+
 ### Added
 
-* timeline markers - user can have more control over markers that are rendered on the timeline. See `TimelineMarkers` section of README for documentation - #
+* timeline markers - user can have more control over markers that are rendered on the timeline. See `TimelineMarkers` section of README for documentation - #327
 
 ### Breaking
 
+* Removed support for React 15 and lower.  This is due to the fact that 16+ supports returning arrays from render, something that the TimelineMarker feature relies on.
 * removed `showCursorLine` prop in favor of using the `CursorMarker` component. See `TimelineMarkers` section of README for documentation.
@@ -37,2 +44,22 @@
 
+### 0.17.3
+
+### Added
+* fix issue with single row header - #359
+
+### 0.17.2
+
+### Added
+
+* support passing `style` prop from item - #347
+* `selected` is provided to `itemRenderer` - #348
+* simplify logic for calculate dimensions and prevent item width and left properties from being unbounded - (refactoring)
+
+### 0.17.1
+
+### Added
+
+* pass canvasTimeStart/End via timelineContext to the itemRenderer prop
+
+
 ### 0.17.0
@@ -39,0 +66,0 @@

lib/lib/items/Item.js

@@ -454,3 +454,7 @@ 'use strict';
       if (Comp) {
-        return _react2.default.createElement(Comp, { item: this.props.item, timelineContext: timelineContext });
+        return _react2.default.createElement(Comp, {
+          item: this.props.item,
+          selected: this.props.selected,
+          timelineContext: timelineContext
+        });
       } else {
@@ -472,3 +476,3 @@ return this.itemTitle;
 
-      var style = {
+      var style = _extends({}, this.props.item.style, {
         left: dimensions.left + 'px',
@@ -479,3 +483,3 @@ top: dimensions.top + 'px',
         lineHeight: dimensions.height + 'px'
-      };
+      });
 
@@ -482,0 +486,0 @@ var showInnerContents = dimensions.width > this.props.minimumWidthForItemContentVisibility;

lib/lib/layout/TimelineElementsHeader.js

@@ -105,3 +105,3 @@ 'use strict';
     value: function shouldComponentUpdate(nextProps) {
-      var willUpate = nextProps.canvasTimeStart != this.props.canvasTimeStart || nextProps.canvasTimeEnd != this.props.canvasTimeEnd || nextProps.width != this.props.width || nextProps.canvasWidth != this.props.canvasWidth;
+      var willUpate = nextProps.canvasTimeStart != this.props.canvasTimeStart || nextProps.canvasTimeEnd != this.props.canvasTimeEnd || nextProps.width != this.props.width || nextProps.canvasWidth != this.props.canvasWidth || nextProps.subHeaderLabelFormats != this.props.subHeaderLabelFormats || nextProps.headerLabelFormats != this.props.headerLabelFormats;
 
@@ -221,3 +221,3 @@ return willUpate;
             className: 'top-header',
-            style: { height: headerLabelGroupHeight, width: canvasWidth }
+            style: { height: twoHeaders ? headerLabelGroupHeight : 0, width: canvasWidth }
           },
@@ -230,3 +230,3 @@ topHeaderLabels
             className: 'bottom-header',
-            style: { height: headerLabelHeight, width: canvasWidth }
+            style: { height: twoHeaders ? headerLabelHeight : headerLabelHeight + headerLabelGroupHeight, width: canvasWidth }
           },
@@ -233,0 +233,0 @@ bottomHeaderLabels

lib/lib/markers/implementations/CursorMarker.js

@@ -7,6 +7,6 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 var _react = require('react');
@@ -20,2 +20,4 @@
 
+var _shared = require('./shared');
+
 var _MarkerCanvasContext = require('../MarkerCanvasContext');
@@ -31,27 +33,6 @@
 
-var criticalStyles = {
-  position: 'absolute',
-  top: 0,
-  bottom: 0,
-  // FIXME: are these critical styles?
-  width: '2px',
-  backgroundColor: 'pink'
+var defaultRenderer = (0, _shared.createDefaultRenderer)('default-cursor-marker');
 
-  // FIXME: this is used in all marker implementations
-  // REVIEW: might want to memoize this as it creates a new object
-  // in each render which is passed to React component
-};var createMarkerStylesWithLeftOffset = function createMarkerStylesWithLeftOffset(leftOffset) {
-  return _extends({}, criticalStyles, {
-    left: leftOffset
-  });
-};
-
-// eslint-disable-next-line
-var defaultRenderer = function defaultRenderer(_ref) {
-  var styles = _ref.styles;
-  return _react2.default.createElement('div', { style: styles });
-};
-
 /**
- * CursorMarker implementation subscribe to 'subscribeToCanvasMouseOver' on mount.
+ * CursorMarker implementation subscribes to 'subscribeToCanvasMouseOver' on mount.
  * This subscription is passed in via MarkerCanvasConsumer, which is wired up to
@@ -74,6 +55,6 @@ * MarkerCanvasProvider in the MarkerCanvas component. When the user mouses over MarkerCanvas,
 
-    _this.handleCanvasMouseOver = function (_ref2) {
-      var leftOffset = _ref2.leftOffset,
-          date = _ref2.date,
-          isCursorOverCanvas = _ref2.isCursorOverCanvas;
+    _this.handleCanvasMouseOver = function (_ref) {
+      var leftOffset = _ref.leftOffset,
+          date = _ref.date,
+          isCursorOverCanvas = _ref.isCursorOverCanvas;
 
@@ -119,3 +100,3 @@ _this.setState({
 
-      var styles = createMarkerStylesWithLeftOffset(leftOffset);
+      var styles = (0, _shared.createMarkerStylesWithLeftOffset)(leftOffset);
 
@@ -143,4 +124,4 @@ return this.props.renderer({ styles: styles, date: date });
     null,
-    function (_ref3) {
-      var subscribeToMouseOver = _ref3.subscribeToMouseOver;
+    function (_ref2) {
+      var subscribeToMouseOver = _ref2.subscribeToMouseOver;
 
@@ -147,0 +128,0 @@ return _react2.default.createElement(CursorMarker, _extends({

lib/lib/markers/implementations/CustomMarker.js

@@ -9,4 +9,2 @@ 'use strict';
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 var _react = require('react');
@@ -20,2 +18,4 @@
 
+var _shared = require('./shared');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,25 +29,3 @@
 
-var criticalStyles = {
-  position: 'absolute',
-  top: 0,
-  bottom: 0,
-  // FIXME: are these critical styles?
-  width: '2px',
-  backgroundColor: 'green'
-
-  // FIXME: this is used in all marker implementations
-  // REVIEW: might want to memoize this as it creates a new object
-  // in each render which is passed to React component
-};var createMarkerStylesWithLeftOffset = function createMarkerStylesWithLeftOffset(leftOffset) {
-  return _extends({}, criticalStyles, {
-    left: leftOffset
-  });
-};
-
-// eslint-disable-next-line
-var defaultCustomMarkerRenderer = function defaultCustomMarkerRenderer(_ref) {
-  var styles = _ref.styles;
-  return _react2.default.createElement('div', { style: styles });
-};
-
+var defaultCustomMarkerRenderer = (0, _shared.createDefaultRenderer)('default-customer-marker-id');
 /**
@@ -73,3 +51,3 @@ * CustomMarker that is placed based on passed in date prop
 
-      var styles = createMarkerStylesWithLeftOffset(leftOffset);
+      var styles = (0, _shared.createMarkerStylesWithLeftOffset)(leftOffset);
       return this.props.renderer({ styles: styles, date: date });
@@ -76,0 +54,0 @@ }

lib/lib/markers/implementations/TodayMarker.js

@@ -9,4 +9,2 @@ 'use strict';
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 var _react = require('react');
@@ -20,2 +18,4 @@
 
+var _shared = require('./shared');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,25 +29,4 @@
 
-var criticalStyles = {
-  position: 'absolute',
-  top: 0,
-  bottom: 0,
-  // FIXME: are these critical styles?
-  width: '2px',
-  backgroundColor: 'red'
+var defaultRenderer = (0, _shared.createDefaultRenderer)('default-today-line');
 
-  // FIXME: this is used in all marker implementations
-  // REVIEW: might want to memoize this as it creates a new object
-  // in each render which is passed to React component
-};var createMarkerStylesWithLeftOffset = function createMarkerStylesWithLeftOffset(leftOffset) {
-  return _extends({}, criticalStyles, {
-    left: leftOffset
-  });
-};
-
-// eslint-disable-next-line
-var defaultRenderer = function defaultRenderer(_ref) {
-  var styles = _ref.styles;
-  return _react2.default.createElement('div', { style: styles });
-};
-
 /** Marker that is placed based on current date.  This component updates itself on
@@ -61,3 +40,3 @@ * a set interval, dictated by the 'interval' prop.
   function TodayMarker() {
-    var _ref2;
+    var _ref;
 
@@ -72,3 +51,3 @@ var _temp, _this, _ret;
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref2 = TodayMarker.__proto__ || Object.getPrototypeOf(TodayMarker)).call.apply(_ref2, [this].concat(args))), _this), _this.state = {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TodayMarker.__proto__ || Object.getPrototypeOf(TodayMarker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
       date: Date.now()
@@ -100,3 +79,3 @@ }, _temp), _possibleConstructorReturn(_this, _ret);
       var leftOffset = this.props.getLeftOffsetFromDate(date);
-      var styles = createMarkerStylesWithLeftOffset(leftOffset);
+      var styles = (0, _shared.createMarkerStylesWithLeftOffset)(leftOffset);
       return this.props.renderer({ styles: styles, date: date });
@@ -103,0 +82,0 @@ }

lib/lib/Timeline.js

@@ -170,2 +170,5 @@ 'use strict';
     }
+
+    // FIXME: this function calls set state EVERY TIME YOU SCROLL
+
   }, {
@@ -390,6 +393,3 @@ key: 'componentWillReceiveProps',
           keys = _props2.keys,
-          dragSnap = _props2.dragSnap,
           lineHeight = _props2.lineHeight,
-          headerLabelGroupHeight = _props2.headerLabelGroupHeight,
-          headerLabelHeight = _props2.headerLabelHeight,
           stackItems = _props2.stackItems,
@@ -408,3 +408,2 @@ itemHeightRatio = _props2.itemHeightRatio;
       var canvasWidth = width * 3;
-      var headerHeight = headerLabelGroupHeight + headerLabelHeight;
 
@@ -427,3 +426,2 @@ var visibleItems = (0, _calendar.getVisibleItems)(items, canvasTimeStart, canvasTimeEnd, keys);
           canvasWidth: canvasWidth,
-          dragSnap: dragSnap,
           dragTime: dragTime,
@@ -452,3 +450,3 @@ resizingEdge: resizingEdge,
 
-      var _stackingMethod = stackingMethod(dimensionItems, groupOrders, lineHeight, headerHeight),
+      var _stackingMethod = stackingMethod(dimensionItems, groupOrders, lineHeight),
           height = _stackingMethod.height,
@@ -600,3 +598,2 @@ groupHeights = _stackingMethod.groupHeights,
                     },
-                    className: 'rct-canvas',
                     style: canvasComponentStyle
@@ -825,12 +822,17 @@ },
         visibleTimeStart = _state5.visibleTimeStart,
-        visibleTimeEnd = _state5.visibleTimeEnd;
+        visibleTimeEnd = _state5.visibleTimeEnd,
+        canvasTimeStart = _state5.canvasTimeStart;
 
+    var zoom = visibleTimeEnd - visibleTimeStart;
+    var canvasTimeEnd = canvasTimeStart + zoom * 3;
+
     //TODO: Performance
     //prob wanna memoize this so we ensure that if no items changed,
     //we return same context reference
-
     return {
       timelineWidth: width,
       visibleTimeStart: visibleTimeStart,
-      visibleTimeEnd: visibleTimeEnd
+      visibleTimeEnd: visibleTimeEnd,
+      canvasTimeStart: canvasTimeStart,
+      canvasTimeEnd: canvasTimeEnd
     };
@@ -837,0 +839,0 @@ };

lib/lib/utility/calendar.js

@@ -82,3 +82,3 @@ 'use strict';
   // for supporting weeks, its important to remember that each of these
-  // units has a national progression to the other. i.e. a year is 12 months
+  // units has a natural progression to the other. i.e. a year is 12 months
   // a month is 24 days, a day is 24 hours.
@@ -150,3 +150,2 @@ // with weeks this isnt the case so weeks needs to be handled specially
       canvasWidth = _ref.canvasWidth,
-      dragSnap = _ref.dragSnap,
       dragTime = _ref.dragTime,
@@ -159,26 +158,18 @@ resizingEdge = _ref.resizingEdge,
 
-  var x = isDragging ? dragTime : itemStart;
+  var itemTimeRange = itemEnd - itemStart;
 
-  var w = Math.max(itemEnd - itemStart, dragSnap);
+  var newItemStart = isDragging ? dragTime : itemStart;
 
-  var collisionX = itemStart;
-  var collisionW = w;
+  var ratio = 1 / coordinateToTimeRatio(canvasTimeStart, canvasTimeEnd, canvasWidth);
 
-  if (isDragging) {
-    if (itemTimeStart >= dragTime) {
-      collisionX = dragTime;
-      collisionW = Math.max(itemTimeEnd - dragTime, dragSnap);
-    } else {
-      collisionW = Math.max(dragTime - itemTimeStart + w, dragSnap);
-    }
-  }
+  // restrict startTime and endTime to be bounded by canvasTimeStart and canasTimeEnd
+  var effectiveStartTime = Math.max(itemStart, canvasTimeStart);
+  var effectiveEndTime = Math.min(itemEnd, canvasTimeEnd);
+  var itemWidth = (effectiveEndTime - effectiveStartTime) * ratio;
 
-  var ratio = 1 / coordinateToTimeRatio(canvasTimeStart, canvasTimeEnd, canvasWidth);
-
   var dimensions = {
-    left: (x - canvasTimeStart) * ratio,
-    width: Math.max(w * ratio, 3),
-    collisionLeft: collisionX,
-    originalLeft: itemTimeStart,
-    collisionWidth: collisionW
+    left: Math.max(newItemStart - canvasTimeStart, 0) * ratio,
+    width: Math.max(itemWidth, 3),
+    collisionLeft: newItemStart,
+    collisionWidth: itemTimeRange
   };
@@ -240,3 +231,3 @@
 
-function stack(items, groupOrders, lineHeight, force) {
+function stack(items, groupOrders, lineHeight) {
   var i, iMax;
@@ -250,9 +241,2 @@ var totalHeight = 0;
 
-  if (force) {
-    // reset top position of all items
-    for (i = 0, iMax = items.length; i < iMax; i++) {
-      items[i].dimensions.top = null;
-    }
-  }
-
   groupedItems.forEach(function (group) {
@@ -302,3 +286,3 @@ // calculate new, non-overlapping positions
 
-function nostack(items, groupOrders, lineHeight, force) {
+function nostack(items, groupOrders, lineHeight) {
   var i, iMax;
@@ -313,9 +297,2 @@
 
-  if (force) {
-    // reset top position of all items
-    for (i = 0, iMax = items.length; i < iMax; i++) {
-      items[i].dimensions.top = null;
-    }
-  }
-
   groupedItems.forEach(function (group) {
@@ -322,0 +299,0 @@ // calculate new, non-overlapping positions

package.json

 {
   "name": "react-calendar-timeline",
-  "version": "0.18.0-beta.2",
+  "version": "0.18.0",
   "description": "react calendar timeline",
@@ -41,2 +41,6 @@ "main": "lib/index.js",
       "url": "https://github.com/amakhrov"
+    },
+    {
+      "name": "Ahmad Ilaiwi",
+      "url": "https://github.com/Ilaiwi"
     }
@@ -84,3 +88,3 @@ ],
     "moment": "*",
-    "react": ">=16.3.0",
+    "react": ">=16",
     "prop-types": "^15.6.2"
@@ -124,5 +128,6 @@ },
     "prettier-eslint-cli": "^4.7.0",
+    "prop-types": "^15.6.2",
     "randomcolor": "^0.5.3",
-    "react": "^16.3.0",
-    "react-dom": "^16.3.0",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
     "react-hot-loader": "^3.0.0-beta.6",
@@ -129,0 +134,0 @@ "react-router-dom": "^4.1.1",

README.md

@@ -106,2 +106,5 @@ # React Calendar Timeline
   className: 'weekend',
+  style: {
+    backgroundColor: 'fuchsia'
+  },
   itemProps: {
@@ -429,3 +432,3 @@ // these optional attributes are passed to the root <div /> of each item as <div {...itemProps} />
 React component that will be used to render the item content. Will be
-passed the `item` as a prop.
+passed the `item` and the `selected` as a props.
 
@@ -445,7 +448,7 @@ Using complex components may result in performance problems.
 
-itemRenderer = ({ item }) => {
+itemRenderer = ({ item, selected }) => {
   return (
     <div className='custom-item'>
       <span className='title'>{item.title}</span>
-      <p className='tip'>{item.tip}</p>
+      {selected && <p className='tip'>{item.tip}</p>}
     </div>
@@ -460,4 +463,6 @@ )
 {
-  visibleTimeStart: number, // denotes the start time in ms of the timeline
-  visibleTimeEnd: number, // denotes the end time in ms of the timeline
+  visibleTimeStart: number, // denotes the start time in ms of the visible timeline
+  visibleTimeEnd: number, // denotes the end time in ms of the visible timeline
+  canvasTimeStart: number, // denotes the start time in ms of the canvas timeline
+  canvasTimeEnd: number, // denotes the end time in ms of the canvas timeline
   timelineWidth: number, // denotes the width in pixels of the timeline
@@ -464,0 +469,0 @@ }

src/lib/items/Item.js

@@ -494,3 +494,7 @@ import React, { Component } from 'react'
     if (Comp) {
-      return <Comp item={this.props.item} timelineContext={timelineContext} />
+      return <Comp
+        item={this.props.item}
+        selected={this.props.selected}
+        timelineContext={timelineContext}
+      />
     } else {
@@ -519,2 +523,3 @@ return this.itemTitle
     const style = {
+      ...this.props.item.style,
       left: `${dimensions.left}px`,
@@ -521,0 +526,0 @@ top: `${dimensions.top}px`,

src/lib/layout/TimelineElementsHeader.js

@@ -107,3 +107,5 @@ import PropTypes from 'prop-types'
       nextProps.width != this.props.width ||
-      nextProps.canvasWidth != this.props.canvasWidth
+      nextProps.canvasWidth != this.props.canvasWidth ||
+      nextProps.subHeaderLabelFormats != this.props.subHeaderLabelFormats ||
+      nextProps.headerLabelFormats != this.props.headerLabelFormats
 
@@ -239,3 +241,3 @@ return willUpate
           className="top-header"
-          style={{ height: headerLabelGroupHeight, width: canvasWidth }}
+          style={{ height: twoHeaders ? headerLabelGroupHeight : 0, width: canvasWidth }}
         >
@@ -246,3 +248,3 @@ {topHeaderLabels}
           className="bottom-header"
-          style={{ height: headerLabelHeight, width: canvasWidth }}
+          style={{ height: twoHeaders ? headerLabelHeight : headerLabelHeight + headerLabelGroupHeight, width: canvasWidth }}
         >
@@ -249,0 +251,0 @@ {bottomHeaderLabels}

src/lib/markers/implementations/CursorMarker.js

 import React from 'react'
 import PropTypes from 'prop-types'
+import {
+  createMarkerStylesWithLeftOffset,
+  createDefaultRenderer
+} from './shared'
 import { MarkerCanvasConsumer } from '../MarkerCanvasContext'
 
-const criticalStyles = {
-  position: 'absolute',
-  top: 0,
-  bottom: 0,
-  // FIXME: are these critical styles?
-  width: '2px',
-  backgroundColor: 'pink'
-}
+const defaultRenderer = createDefaultRenderer('default-cursor-marker')
 
-// FIXME: this is used in all marker implementations
-// REVIEW: might want to memoize this as it creates a new object
-// in each render which is passed to React component
-const createMarkerStylesWithLeftOffset = leftOffset => ({
-  ...criticalStyles,
-  left: leftOffset
-})
-
-// eslint-disable-next-line
-const defaultRenderer = ({ styles }) => (
-  <div style={styles} data-testid="default-cursor-marker" />
-)
-
 /**
- * CursorMarker implementation subscribe to 'subscribeToCanvasMouseOver' on mount.
+ * CursorMarker implementation subscribes to 'subscribeToCanvasMouseOver' on mount.
  * This subscription is passed in via MarkerCanvasConsumer, which is wired up to
@@ -30,0 +14,0 @@ * MarkerCanvasProvider in the MarkerCanvas component. When the user mouses over MarkerCanvas,

src/lib/markers/implementations/CustomMarker.js

 import React from 'react'
 import PropTypes from 'prop-types'
+import {
+  createMarkerStylesWithLeftOffset,
+  createDefaultRenderer
+} from './shared'
 
-const criticalStyles = {
-  position: 'absolute',
-  top: 0,
-  bottom: 0,
-  // FIXME: are these critical styles?
-  width: '2px',
-  backgroundColor: 'green'
-}
-
-// FIXME: this is used in all marker implementations
-// REVIEW: might want to memoize this as it creates a new object
-// in each render which is passed to React component
-const createMarkerStylesWithLeftOffset = leftOffset => ({
-  ...criticalStyles,
-  left: leftOffset
-})
-
-// eslint-disable-next-line
-const defaultCustomMarkerRenderer = ({ styles }) => (
-  <div style={styles} data-testid="default-customer-marker-id" />
+const defaultCustomMarkerRenderer = createDefaultRenderer(
+  'default-customer-marker-id'
 )
-
 /**
@@ -27,0 +12,0 @@ * CustomMarker that is placed based on passed in date prop

src/lib/markers/implementations/TodayMarker.js

 import React from 'react'
 import PropTypes from 'prop-types'
+import {
+  createMarkerStylesWithLeftOffset,
+  createDefaultRenderer
+} from './shared'
 
-const criticalStyles = {
-  position: 'absolute',
-  top: 0,
-  bottom: 0,
-  // FIXME: are these critical styles?
-  width: '2px',
-  backgroundColor: 'red'
-}
+const defaultRenderer = createDefaultRenderer('default-today-line')
 
-// FIXME: this is used in all marker implementations
-// REVIEW: might want to memoize this as it creates a new object
-// in each render which is passed to React component
-const createMarkerStylesWithLeftOffset = leftOffset => ({
-  ...criticalStyles,
-  left: leftOffset
-})
-
-// eslint-disable-next-line
-const defaultRenderer = ({ styles }) => (
-  <div style={styles} data-testid="default-today-line" />
-)
-
 /** Marker that is placed based on current date.  This component updates itself on
@@ -27,0 +11,0 @@ * a set interval, dictated by the 'interval' prop.

src/lib/Timeline.js

@@ -247,3 +247,10 @@ import PropTypes from 'prop-types'
   getTimelineContext = () => {
-    const { width, visibleTimeStart, visibleTimeEnd } = this.state
+    const {
+      width,
+      visibleTimeStart,
+      visibleTimeEnd,
+      canvasTimeStart
+    } = this.state
+    const zoom = visibleTimeEnd - visibleTimeStart
+    const canvasTimeEnd = canvasTimeStart + zoom * 3
 
@@ -256,3 +263,5 @@ //TODO: Performance
       visibleTimeStart,
-      visibleTimeEnd
+      visibleTimeEnd,
+      canvasTimeStart,
+      canvasTimeEnd
     }
@@ -368,2 +377,3 @@ }
 
+  // FIXME: this function calls set state EVERY TIME YOU SCROLL
   onScroll = scrollX => {
@@ -940,12 +950,4 @@ const canvasTimeStart = this.state.canvasTimeStart
 
+    const { keys, lineHeight, stackItems, itemHeightRatio } = this.props
     const {
-      keys,
-      dragSnap,
-      lineHeight,
-      headerLabelGroupHeight,
-      headerLabelHeight,
-      stackItems,
-      itemHeightRatio
-    } = this.props
-    const {
       draggingItem,
@@ -961,3 +963,2 @@ dragTime,
     const canvasWidth = width * 3
-    const headerHeight = headerLabelGroupHeight + headerLabelHeight
 
@@ -985,3 +986,2 @@ const visibleItems = getVisibleItems(
         canvasWidth,
-        dragSnap,
         dragTime,
@@ -1015,4 +1015,3 @@ resizingEdge,
       groupOrders,
-      lineHeight,
-      headerHeight
+      lineHeight
     )
@@ -1211,3 +1210,2 @@
                   ref={el => (this.canvasComponent = el)}
-                  className="rct-canvas"
                   style={canvasComponentStyle}
@@ -1214,0 +1212,0 @@ >

src/lib/utility/calendar.js

@@ -71,3 +71,3 @@ import moment from 'moment'
   // for supporting weeks, its important to remember that each of these
-  // units has a national progression to the other. i.e. a year is 12 months
+  // units has a natural progression to the other. i.e. a year is 12 months
   // a month is 24 days, a day is 24 hours.
@@ -141,3 +141,2 @@ // with weeks this isnt the case so weeks needs to be handled specially
   canvasWidth,
-  dragSnap,
   dragTime,
@@ -152,27 +151,19 @@ resizingEdge,
 
-  let x = isDragging ? dragTime : itemStart
+  const itemTimeRange = itemEnd - itemStart
 
-  let w = Math.max(itemEnd - itemStart, dragSnap)
+  let newItemStart = isDragging ? dragTime : itemStart
 
-  let collisionX = itemStart
-  let collisionW = w
-
-  if (isDragging) {
-    if (itemTimeStart >= dragTime) {
-      collisionX = dragTime
-      collisionW = Math.max(itemTimeEnd - dragTime, dragSnap)
-    } else {
-      collisionW = Math.max(dragTime - itemTimeStart + w, dragSnap)
-    }
-  }
-
   const ratio =
     1 / coordinateToTimeRatio(canvasTimeStart, canvasTimeEnd, canvasWidth)
 
+  // restrict startTime and endTime to be bounded by canvasTimeStart and canasTimeEnd
+  const effectiveStartTime = Math.max(itemStart, canvasTimeStart)
+  const effectiveEndTime = Math.min(itemEnd, canvasTimeEnd)
+  const itemWidth = (effectiveEndTime - effectiveStartTime) * ratio
+
   const dimensions = {
-    left: (x - canvasTimeStart) * ratio,
-    width: Math.max(w * ratio, 3),
-    collisionLeft: collisionX,
-    originalLeft: itemTimeStart,
-    collisionWidth: collisionW
+    left: Math.max(newItemStart - canvasTimeStart, 0) * ratio,
+    width: Math.max(itemWidth, 3),
+    collisionLeft: newItemStart,
+    collisionWidth: itemTimeRange
   }
@@ -237,3 +228,3 @@
 
-export function stack(items, groupOrders, lineHeight, force) {
+export function stack(items, groupOrders, lineHeight) {
   var i, iMax
@@ -247,9 +238,2 @@ var totalHeight = 0
 
-  if (force) {
-    // reset top position of all items
-    for (i = 0, iMax = items.length; i < iMax; i++) {
-      items[i].dimensions.top = null
-    }
-  }
-
   groupedItems.forEach(function(group) {
@@ -307,3 +291,3 @@ // calculate new, non-overlapping positions
 
-export function nostack(items, groupOrders, lineHeight, force) {
+export function nostack(items, groupOrders, lineHeight) {
   var i, iMax
@@ -318,9 +302,2 @@
 
-  if (force) {
-    // reset top position of all items
-    for (i = 0, iMax = items.length; i < iMax; i++) {
-      items[i].dimensions.top = null
-    }
-  }
-
   groupedItems.forEach(function(group) {
@@ -327,0 +304,0 @@ // calculate new, non-overlapping positions

No alert changes

Improved metrics

Number of package files

72

increased by2.86%

Number of lines in readme file

812

increased by0.62%

Worsened metrics

Total package byte prevSize

351311

decreased by-0.12%

Dev dependency count

47

increased by2.17%

Lines of code

7557

decreased by-0.94%

Published versions last two months

1

decreased by-50%

No dependency changes