react-calendar-timeline - npm Package Compare versions

Comparing version 0.16.0 to 0.16.1

CHANGELOG.md

@@ -10,2 +10,4 @@ # Change Log
 
+### 0.16.1
+
 ### Added
@@ -17,2 +19,3 @@
 * 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.
+* `minimumWidthForItemContentVisibility` prop to control at what width inner item content is rendered.
 
@@ -22,3 +25,16 @@ ### Breaking
 * removed `fixedHeader` prop in favor of using `position: sticky` by default
+* removed import of stylesheets in library code, put onus on user to handle this stylesheet
 
+## 0.15.12
+
+### Fixed
+
+* Shift + Scroll via mouse wheel scrolls canvas horizontally - #281
+
+## 0.15.11
+
+### Fixed
+
+* removed `preventDefault` call in item double click handler - #277
+
 ## 0.15.10
@@ -25,0 +41,0 @@

lib/lib/items/Item.js

@@ -74,3 +74,2 @@ 'use strict';
     _this.handleDoubleClick = function (e) {
-      e.preventDefault();
       e.stopPropagation();
@@ -116,3 +115,3 @@ if (_this.props.onItemDoubleClick) {
     value: function shouldComponentUpdate(nextProps, nextState) {
-      var shouldUpdate = nextState.dragging !== this.state.dragging || nextState.dragTime !== this.state.dragTime || nextState.dragGroupDelta !== this.state.dragGroupDelta || nextState.resizing !== this.state.resizing || nextState.resizeTime !== this.state.resizeTime || nextProps.keys !== this.props.keys || !(0, _generic.deepObjectCompare)(nextProps.itemProps, this.props.itemProps) || nextProps.selected !== this.props.selected || nextProps.item !== this.props.item || nextProps.canvasTimeStart !== this.props.canvasTimeStart || nextProps.canvasTimeEnd !== this.props.canvasTimeEnd || nextProps.canvasWidth !== this.props.canvasWidth || nextProps.order !== this.props.order || nextProps.dragSnap !== this.props.dragSnap || nextProps.minResizeWidth !== this.props.minResizeWidth || nextProps.canChangeGroup !== this.props.canChangeGroup || nextProps.canSelect !== this.props.canSelect || nextProps.topOffset !== this.props.topOffset || nextProps.canMove !== this.props.canMove || nextProps.canResizeLeft !== this.props.canResizeLeft || nextProps.canResizeRight !== this.props.canResizeRight || nextProps.dimensions !== this.props.dimensions;
+      var shouldUpdate = nextState.dragging !== this.state.dragging || nextState.dragTime !== this.state.dragTime || nextState.dragGroupDelta !== this.state.dragGroupDelta || nextState.resizing !== this.state.resizing || nextState.resizeTime !== this.state.resizeTime || nextProps.keys !== this.props.keys || !(0, _generic.deepObjectCompare)(nextProps.itemProps, this.props.itemProps) || nextProps.selected !== this.props.selected || nextProps.item !== this.props.item || nextProps.canvasTimeStart !== this.props.canvasTimeStart || nextProps.canvasTimeEnd !== this.props.canvasTimeEnd || nextProps.canvasWidth !== this.props.canvasWidth || nextProps.order !== this.props.order || nextProps.dragSnap !== this.props.dragSnap || nextProps.minResizeWidth !== this.props.minResizeWidth || nextProps.canChangeGroup !== this.props.canChangeGroup || nextProps.canSelect !== this.props.canSelect || nextProps.topOffset !== this.props.topOffset || nextProps.canMove !== this.props.canMove || nextProps.canResizeLeft !== this.props.canResizeLeft || nextProps.canResizeRight !== this.props.canResizeRight || nextProps.dimensions !== this.props.dimensions || nextProps.minimumWidthForItemContentVisibility !== this.props.minimumWidthForItemContentVisibility;
       return shouldUpdate;
@@ -482,2 +481,5 @@ }
 
+      var showInnerContents = dimensions.width > this.props.minimumWidthForItemContentVisibility;
+      // TODO: conditionals are really ugly.  could use Fragment if supporting React 16+ but for now, it'll
+      // be ugly
       return _react2.default.createElement(
@@ -500,6 +502,6 @@ 'div',
         }),
-        this.props.useResizeHandle ? _react2.default.createElement('div', { ref: function ref(el) {
+        this.props.useResizeHandle && showInnerContents ? _react2.default.createElement('div', { ref: function ref(el) {
             return _this3.dragLeft = el;
           }, className: 'rct-drag-left' }) : '',
-        _react2.default.createElement(
+        showInnerContents ? _react2.default.createElement(
           'div',
@@ -513,4 +515,4 @@ {
           this.renderContent()
-        ),
-        this.props.useResizeHandle ? _react2.default.createElement('div', { ref: function ref(el) {
+        ) : '',
+        this.props.useResizeHandle && showInnerContents ? _react2.default.createElement('div', { ref: function ref(el) {
             return _this3.dragRight = el;
@@ -530,2 +532,3 @@ }, className: 'rct-drag-right' }) : ''
   order: _propTypes2.default.number,
+  minimumWidthForItemContentVisibility: _propTypes2.default.number.isRequired,
 
@@ -532,0 +535,0 @@ dragSnap: _propTypes2.default.number,

lib/lib/items/Items.js

@@ -54,3 +54,3 @@ 'use strict';
     value: function shouldComponentUpdate(nextProps) {
-      return !((0, _generic.arraysEqual)(nextProps.groups, this.props.groups) && (0, _generic.arraysEqual)(nextProps.items, this.props.items) && nextProps.keys === this.props.keys && nextProps.canvasTimeStart === this.props.canvasTimeStart && nextProps.canvasTimeEnd === this.props.canvasTimeEnd && nextProps.canvasWidth === this.props.canvasWidth && nextProps.selectedItem === this.props.selectedItem && nextProps.selected === this.props.selected && nextProps.dragSnap === this.props.dragSnap && nextProps.minResizeWidth === this.props.minResizeWidth && nextProps.canChangeGroup === this.props.canChangeGroup && nextProps.canMove === this.props.canMove && nextProps.canResize === this.props.canResize && nextProps.canSelect === this.props.canSelect && nextProps.dimensionItems === this.props.dimensionItems && nextProps.topOffset === this.props.topOffset);
+      return !((0, _generic.arraysEqual)(nextProps.groups, this.props.groups) && (0, _generic.arraysEqual)(nextProps.items, this.props.items) && nextProps.keys === this.props.keys && nextProps.canvasTimeStart === this.props.canvasTimeStart && nextProps.canvasTimeEnd === this.props.canvasTimeEnd && nextProps.canvasWidth === this.props.canvasWidth && nextProps.selectedItem === this.props.selectedItem && nextProps.selected === this.props.selected && nextProps.dragSnap === this.props.dragSnap && nextProps.minResizeWidth === this.props.minResizeWidth && nextProps.canChangeGroup === this.props.canChangeGroup && nextProps.canMove === this.props.canMove && nextProps.canResize === this.props.canResize && nextProps.canSelect === this.props.canSelect && nextProps.dimensionItems === this.props.dimensionItems && nextProps.topOffset === this.props.topOffset && nextProps.minimumWidthForItemContentVisibility === this.props.minimumWidthForItemContentVisibility);
     }
@@ -107,3 +107,4 @@
           canvasTimeEnd = _props.canvasTimeEnd,
-          dimensionItems = _props.dimensionItems;
+          dimensionItems = _props.dimensionItems,
+          minimumWidthForItemContentVisibility = _props.minimumWidthForItemContentVisibility;
       var _props$keys2 = this.props.keys,
@@ -152,3 +153,4 @@ itemIdKey = _props$keys2.itemIdKey,
             onSelect: _this2.props.itemSelect,
-            itemRenderer: _this2.props.itemRenderer
+            itemRenderer: _this2.props.itemRenderer,
+            minimumWidthForItemContentVisibility: minimumWidthForItemContentVisibility
           });
@@ -170,2 +172,3 @@ })
   canvasWidth: _propTypes2.default.number.isRequired,
+  minimumWidthForItemContentVisibility: _propTypes2.default.number.isRequired,
 
@@ -172,0 +175,0 @@ dragSnap: _propTypes2.default.number,

lib/lib/layout/TimelineElementsHeader.js

@@ -139,2 +139,7 @@ 'use strict';
           var labelWidth = right - left;
+          // this width applies to the content in the header
+          // it simulates stickyness where the content is fixed in the center
+          // of the label.  when the labelWidth is less than visible time range,
+          // have label content fill the entire width
+          var contentWidth = Math.min(labelWidth, canvasWidth / 3);
 
@@ -159,3 +164,3 @@ topHeaderLabels.push(_react2.default.createElement(
               'span',
-              null,
+              { style: { width: contentWidth, display: 'block' } },
               _this2.headerLabel(time, nextUnit, labelWidth)
@@ -162,0 +167,0 @@ )

lib/lib/scroll/ScrollElement.js

@@ -74,4 +74,4 @@ 'use strict';
       } else if (e.shiftKey) {
-        var scrollComponent = _this.scrollComponent;
-        scrollComponent.scrollLeft += e.deltaY;
+        // shift+scroll event from a touchpad has deltaY property populated; shift+scroll event from a mouse has deltaX
+        _this.scrollComponent.scrollLeft += e.deltaY || e.deltaX;
 
@@ -78,0 +78,0 @@ // no modifier pressed? we prevented the default event, so scroll or zoom as needed

lib/lib/Timeline.js

@@ -23,4 +23,2 @@ 'use strict';
 
-require('./Timeline.css');
-
 var _Items = require('./items/Items');
@@ -335,3 +333,4 @@
         itemRenderer: this.props.itemRenderer,
-        selected: this.props.selected
+        selected: this.props.selected,
+        minimumWidthForItemContentVisibility: this.props.minimumWidthForItemContentVisibility
       });
@@ -688,2 +687,3 @@ }
   itemHeightRatio: _propTypes2.default.number,
+  minimumWidthForItemContentVisibility: _propTypes2.default.number,
 
@@ -814,2 +814,3 @@ minZoom: _propTypes2.default.number,
   itemHeightRatio: 0.65,
+  minimumWidthForItemContentVisibility: 25,
 
@@ -909,3 +910,7 @@ minZoom: 60 * 60 * 1000, // 1 hour
     var width = containerWidth - props.sidebarWidth - props.rightSidebarWidth;
+    var headerLabelGroupHeight = props.headerLabelGroupHeight,
+        headerLabelHeight = props.headerLabelHeight;
 
+    var headerHeight = headerLabelGroupHeight + headerLabelHeight;
+
     var _stackItems2 = _this4.stackItems(props.items, props.groups, _this4.state.canvasTimeStart, _this4.state.visibleTimeStart, _this4.state.visibleTimeEnd, width),
@@ -917,5 +922,11 @@ dimensionItems = _stackItems2.dimensionItems,
 
+    // this is needed by dragItem since it uses pageY from the drag events
+    // if this was in the context of the scrollElement, this would not be necessary
+
+
+    var topOffset = containerTop + window.pageYOffset + headerHeight;
+
     _this4.setState({
       width: width,
-      topOffset: containerTop + window.pageYOffset,
+      topOffset: topOffset,
       dimensionItems: dimensionItems,
@@ -1076,6 +1087,3 @@ height: height,
   this.rowAndTimeFromScrollAreaEvent = function (e) {
-    var _props5 = _this4.props,
-        headerLabelGroupHeight = _props5.headerLabelGroupHeight,
-        headerLabelHeight = _props5.headerLabelHeight,
-        dragSnap = _props5.dragSnap;
+    var dragSnap = _this4.props.dragSnap;
     var _state6 = _this4.state,
@@ -1097,3 +1105,3 @@ width = _state6.width,
     var row = 0;
-    var remainingHeight = y - headerLabelGroupHeight - headerLabelHeight;
+    var remainingHeight = y;
 
@@ -1380,2 +1388,2 @@ while (row < lineCount && remainingHeight - groupHeights[row] > 0) {
 
-exports.default = ReactCalendarTimeline;
+exports.default = ReactCalendarTimeline;

lib/lib/utility/calendar.js

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

LICENSE.md

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

package.json

 {
   "name": "react-calendar-timeline",
-  "version": "0.16.0",
+  "version": "0.16.1",
   "description": "react calendar timeline",
@@ -10,5 +10,3 @@ "main": "lib/index.js",
     "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",
+    "build:lib": "echo '!!! Building Library' && rimraf lib && cross-env NODE_ENV=production babel src --out-dir lib && node-sass src/lib/Timeline.scss lib/Timeline.css && sed -i'.bak' 's/Timeline\\.scss/Timeline\\.css/g' lib/lib/Timeline.js && rm lib/lib/Timeline.js.bak",
     "lint": "eslint --ext .js --ext .jsx ./src",
@@ -18,3 +16,3 @@ "lint:fix": "prettier-eslint --parser babylon --write \"src/**/*.js\"",
     "start": "webpack-dev-server --hot --host 0.0.0.0 --display-modules",
-    "test": "npm run build:lib && npm run jest && npm run lint"
+    "test": "jest"
   },
@@ -32,5 +30,17 @@ "files": [
   "contributors": [
-    "Stanisław Chmiela <[e-mail]>",
-    "Mike Joyce <[e-mail]>",
-    "Samuel Rossetti"
+    {
+      "name": "Stanisław Chmiela",
+      "email": "[e-mail]"
+    },
+    {
+      "name": "Mike Joyce",
+      "url": "https://github.com/mcMickJuice"
+    },
+    {
+      "name": "Samuel Rossetti"
+    },
+    {
+      "name": "amakhrov",
+      "url": "https://github.com/amakhrov"
+    }
   ],
@@ -55,7 +65,12 @@ "license": "MIT",
     ],
-    "moduleNameMapper": {
-      "^.+\\.(css|scss)$": "<rootDir>/src/mocks/styleMock.js"
-    },
     "collectCoverageFrom": [
       "src/**/*.{js,jsx}"
+    ],
+    "modulePaths": [
+      "<rootDir>/src/",
+      "<rootDir>/__tests__"
+    ],
+    "testPathIgnorePatterns": [
+      "<rootDir>/node_modules",
+      "<rootDir>/__tests__/test-utility"
     ]
@@ -113,3 +128,3 @@ },
     "react-test-renderer": "^15.5.0",
-    "rimraf": "^2.5.0",
+    "rimraf": "^2.6.2",
     "sass-loader": "~4.0.2",
@@ -120,2 +135,2 @@ "style-loader": "~0.13.0",
   }
-}
+}

README.md

@@ -21,14 +21,2 @@ # React Calendar Timeline
 
-You need to install them separately:
-
-```bash
-# via yarn
-yarn add react react-dom # you probably already have these
-yarn add moment interact.js
-
-# via npm
-npm install --save react react-dom # you probably already have these
-npm install --save moment interact.js
-```
-
 ## Usage
@@ -40,2 +28,4 @@
 import Timeline from 'react-calendar-timeline'
+// make sure you include the timeline stylesheet or the timeline will not be styled
+import 'react-calender-timeline/lib/Timeline.css'
 import moment from 'moment'
@@ -129,2 +119,12 @@
 
+### 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.
+
+**Note that you need to provide either `defaultTimeStart/End` or `visibleTimeStart/End` for the timeline to function**
+
 ### selected
@@ -331,10 +331,2 @@
 
-### 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.
-
 ### headerLabelFormats and subHeaderLabelFormats
@@ -527,2 +519,6 @@
 
+### minimumWidthForItemContentVisibility
+
+Number of pixels to render inner content of an Item. To improve performance of the timeline, this prop dictates whether the inner contents of an Item are rendered based on the item width. This setting is useful if you have a dataset which results in a large number of small items to be rendered on the timeline. Default is 25.
+
 ### resizeDetector
@@ -539,24 +535,8 @@
 
-### children (plugins)
+## FAQ
 
-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).
+### My timeline is unstyled
 
-See [the plugins demo](https://github.com/namespace-ee/react-calendar-timeline/tree/master/examples#plugins-experimental)
+You need to include the `Timeline.css` file, either via static file reference or webpack stylesheet bundling. The file is located at `lib/Timeline.css`
 
-**NOTE!** This API is still experimental and will change in the next versions, as we move toward unifying the internal and external APIs. Keep an eye out for the [changelog](https://github.com/namespace-ee/react-calendar-timeline/blob/master/CHANGELOG.md)!
-
-The children gets passed the following props:
-
-* `canvasTimeStart`, `canvasTimeEnd` - start and end of the scrolling canvas in Unix timestamps
-* `canvasWidth` - width of the scrolling canvas in pixels
-* `visibleTimeStart`, `visibleTimeEnd` - start and end of the currently visible area
-* `groups`, `items`, `keys` - groups, items and keys as passed to the timeline
-* `height`, `headerHeight` - height of the entire calendar (includes `headerHeight`) or just the header
-* `groupHeights`, `groupTops` - arrays of heights and tops for the groups
-* `dimensionItems` - an array of objects `{ id, dimensions: {...} }` describing positions of all the items
-* `selected` - an array of selected items
-* `timeSteps` - steps for displaying time
-
-## FAQ
-
 ### How can I have items with different colors?
@@ -574,3 +554,3 @@
 
-### How can I add one more sidebar on the right?
+### How can I add a sidebar on the right?
 
@@ -689,7 +669,7 @@ The library supports right sidebar.
 $ cd react-calendar-timeline
-$ npm install
-$ npm start
+$ yarn
+$ yarn start
 ```
 
-Check http://0.0.0.0:8080/ in your browser and have fun!
+Check http://0.0.0.0:8888/ in your browser and have fun!
 
@@ -696,0 +676,0 @@ Please run `npm run lint` before you send a pull request. `npm run jest` runs the tests.

src/index.js

 import Timeline from './lib/Timeline'
 
 export default Timeline

src/lib/default-config.js

@@ -0,0 +0,0 @@ export const defaultKeys = {

src/lib/items/Item.js

@@ -17,2 +17,3 @@ import React, { Component } from 'react'
     order: PropTypes.number,
+    minimumWidthForItemContentVisibility: PropTypes.number.isRequired,
 
@@ -101,3 +102,5 @@ dragSnap: PropTypes.number,
       nextProps.canResizeRight !== this.props.canResizeRight ||
-      nextProps.dimensions !== this.props.dimensions
+      nextProps.dimensions !== this.props.dimensions ||
+      nextProps.minimumWidthForItemContentVisibility !==
+        this.props.minimumWidthForItemContentVisibility
     return shouldUpdate
@@ -469,3 +472,2 @@ }
   handleDoubleClick = e => {
-    e.preventDefault()
     e.stopPropagation()
@@ -526,2 +528,6 @@ if (this.props.onItemDoubleClick) {
 
+    const showInnerContents =
+      dimensions.width > this.props.minimumWidthForItemContentVisibility
+    // TODO: conditionals are really ugly.  could use Fragment if supporting React 16+ but for now, it'll
+    // be ugly
     return (
@@ -542,3 +548,3 @@ <div
       >
-        {this.props.useResizeHandle ? (
+        {this.props.useResizeHandle && showInnerContents ? (
           <div ref={el => (this.dragLeft = el)} className="rct-drag-left" />
@@ -549,12 +555,16 @@ ) : (
 
-        <div
-          className="rct-item-content"
-          style={{
-            maxWidth: `${dimensions.width}px`
-          }}
-        >
-          {this.renderContent()}
-        </div>
+        {showInnerContents ? (
+          <div
+            className="rct-item-content"
+            style={{
+              maxWidth: `${dimensions.width}px`
+            }}
+          >
+            {this.renderContent()}
+          </div>
+        ) : (
+          ''
+        )}
 
-        {this.props.useResizeHandle ? (
+        {this.props.useResizeHandle && showInnerContents ? (
           <div ref={el => (this.dragRight = el)} className="rct-drag-right" />
@@ -561,0 +571,0 @@ ) : (

src/lib/items/Items.js

@@ -28,2 +28,3 @@ import PropTypes from 'prop-types'
     canvasWidth: PropTypes.number.isRequired,
+    minimumWidthForItemContentVisibility: PropTypes.number.isRequired,
 
@@ -81,3 +82,5 @@ dragSnap: PropTypes.number,
       nextProps.dimensionItems === this.props.dimensionItems &&
-      nextProps.topOffset === this.props.topOffset
+      nextProps.topOffset === this.props.topOffset &&
+      nextProps.minimumWidthForItemContentVisibility ===
+        this.props.minimumWidthForItemContentVisibility
     )
@@ -121,3 +124,8 @@ }
   render() {
-    const { canvasTimeStart, canvasTimeEnd, dimensionItems } = this.props
+    const {
+      canvasTimeStart,
+      canvasTimeEnd,
+      dimensionItems,
+      minimumWidthForItemContentVisibility
+    } = this.props
     const { itemIdKey, itemGroupKey } = this.props.keys
@@ -181,2 +189,5 @@
               itemRenderer={this.props.itemRenderer}
+              minimumWidthForItemContentVisibility={
+                minimumWidthForItemContentVisibility
+              }
             />
@@ -183,0 +194,0 @@ ))}

src/lib/layout/Header.js

@@ -0,0 +0,0 @@ import React, { Component } from 'react'

src/lib/layout/InfoLabel.js

@@ -0,0 +0,0 @@ import PropTypes from 'prop-types'

src/lib/layout/Sidebar.js

@@ -0,0 +0,0 @@ import PropTypes from 'prop-types'

src/lib/layout/TimelineElementsHeader.js

@@ -102,3 +102,3 @@ import PropTypes from 'prop-types'
   }
-  
+
   shouldComponentUpdate(nextProps) {
@@ -147,2 +147,7 @@ const willUpate =
           const labelWidth = right - left
+          // this width applies to the content in the header
+          // it simulates stickyness where the content is fixed in the center
+          // of the label.  when the labelWidth is less than visible time range,
+          // have label content fill the entire width
+          const contentWidth = Math.min(labelWidth, canvasWidth / 3)
 
@@ -164,3 +169,5 @@ topHeaderLabels.push(
             >
-              <span>{this.headerLabel(time, nextUnit, labelWidth)}</span>
+              <span style={{ width: contentWidth, display: 'block' }}>
+                {this.headerLabel(time, nextUnit, labelWidth)}
+              </span>
             </div>
@@ -167,0 +174,0 @@ )

src/lib/lines/CursorLine.js

@@ -0,0 +0,0 @@ import PropTypes from 'prop-types'

src/lib/lines/HorizontalLines.js

@@ -0,0 +0,0 @@ import PropTypes from 'prop-types'

src/lib/lines/TodayLine.js

@@ -0,0 +0,0 @@ import PropTypes from 'prop-types'

src/lib/lines/VerticalLines.js

@@ -0,0 +0,0 @@ import PropTypes from 'prop-types'

src/lib/scroll/ScrollElement.js

@@ -69,4 +69,4 @@ import React, { Component } from 'react'
     } else if (e.shiftKey) {
-      const scrollComponent = this.scrollComponent
-      scrollComponent.scrollLeft += e.deltaY
+      // shift+scroll event from a touchpad has deltaY property populated; shift+scroll event from a mouse has deltaX
+      this.scrollComponent.scrollLeft += e.deltaY || e.deltaX
 
@@ -73,0 +73,0 @@ // no modifier pressed? we prevented the default event, so scroll or zoom as needed

src/lib/Timeline.js

 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import moment from 'moment'
-import './Timeline.scss'
 
@@ -52,2 +51,3 @@ import Items from './items/Items'
     itemHeightRatio: PropTypes.number,
+    minimumWidthForItemContentVisibility: PropTypes.number,
 
@@ -179,2 +179,3 @@ minZoom: PropTypes.number,
     itemHeightRatio: 0.65,
+    minimumWidthForItemContentVisibility: 25,
 
@@ -361,3 +362,6 @@ minZoom: 60 * 60 * 1000, // 1 hour
     } = this.container.getBoundingClientRect()
+
     let width = containerWidth - props.sidebarWidth - props.rightSidebarWidth
+    const { headerLabelGroupHeight, headerLabelHeight } = props
+    const headerHeight = headerLabelGroupHeight + headerLabelHeight
 
@@ -373,9 +377,13 @@ const { dimensionItems, height, groupHeights, groupTops } = this.stackItems(
 
+    // this is needed by dragItem since it uses pageY from the drag events
+    // if this was in the context of the scrollElement, this would not be necessary
+    const topOffset = containerTop + window.pageYOffset + headerHeight
+
     this.setState({
-      width: width,
-      topOffset: containerTop + window.pageYOffset,
-      dimensionItems: dimensionItems,
-      height: height,
-      groupHeights: groupHeights,
-      groupTops: groupTops
+      width,
+      topOffset,
+      dimensionItems,
+      height,
+      groupHeights,
+      groupTops
     })
@@ -643,3 +651,3 @@ this.scrollComponent.scrollLeft = width
   rowAndTimeFromScrollAreaEvent = e => {
-    const { headerLabelGroupHeight, headerLabelHeight, dragSnap } = this.props
+    const { dragSnap } = this.props
     const { width, groupHeights, visibleTimeStart, visibleTimeEnd } = this.state
@@ -656,3 +664,3 @@ const lineCount = _length(this.props.groups)
     let row = 0
-    let remainingHeight = y - headerLabelGroupHeight - headerLabelHeight
+    let remainingHeight = y
 
@@ -927,2 +935,5 @@ while (row < lineCount && remainingHeight - groupHeights[row] > 0) {
         selected={this.props.selected}
+        minimumWidthForItemContentVisibility={
+          this.props.minimumWidthForItemContentVisibility
+        }
       />
@@ -929,0 +940,0 @@ )

src/lib/utility/calendar.js

@@ -0,0 +0,0 @@ import moment from 'moment'

src/lib/utility/dom-helpers.js

@@ -0,0 +0,0 @@ const ELEMENT_NODE = 1

src/lib/utility/generic.js

@@ -0,0 +0,0 @@ import isEqual from 'lodash.isequal'

src/resize-detector/container.js

@@ -0,0 +0,0 @@ import elementResizeDetectorMaker from 'element-resize-detector'

src/resize-detector/window.js

@@ -0,0 +0,0 @@ function addListener(component) {

No alert changes

Worsened metrics

Total package byte prevSize

294350

decreased by-18.42%

Number of package files

44

decreased by-45.68%

Lines of code

6497

decreased by-21.37%

Number of lines in readme file

679

decreased by-2.86%

No dependency changes