Add minHeight Props to Timeline to set the minimum height of the timeline scroll body

CHANGELOG.md

@@ -9,6 +9,10 @@ and this project adheres (more or less) to [Semantic Versioning](http://semver.o
 
 * Add `className` prop to Timeline component to override `react-calendar-timeline` class #682
 
+## 0.26.8
+
+* add minHeight props for Component Timeline @markstock7
+
 ## 0.26.7
 
 * fix scrolling with trackpad @ilaiwi #679

README.md

@@ -186,6 +186,9 @@ Everything passed here will be displayed above the right sidebar. Use this to di
 
 Snapping unit when dragging items. Defaults to `15 * 60 * 1000` or 15min. When so, the items will snap to 15min intervals when dragging.
 
+# minHeight
+The minimum height, in pixels, of a timeline body. Default to `20`.
+
 ## 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`.

__fixtures__/stateAndProps.js

@@ -7,6 +7,7 @@ export const visibleTimeEnd = 1540587600000
 export const props = {
   keys: defaultKeys,
   lineHeight: 30,
+  minHeight: 0,
   stackItems: true,
   itemHeightRatio: 0.75,
   visibleTimeEnd,

__tests__/utils/calendar/__snapshots__/stack-items.js.snap

@@ -5,18 +5,18 @@ Object {
   "dimensionItems": Array [
     Object {
       "dimensions": Object {
-        "collisionLeft": 1540543600000,
+        "collisionLeft": 1540540000000,
         "collisionWidth": 6803877,
-        "height": 22.5,
-        "left": 4472.222222222223,
+        "height": 0,
+        "left": 4347.222222222223,
         "order": Object {
           "group": Object {
             "id": "1",
           },
           "index": 0,
         },
         "stack": true,
-        "top": 3.75,
+        "top": 15,
         "width": 236.24572916666602,
       },
       "id": "0",
@@ -25,7 +25,7 @@ Object {
       "dimensions": Object {
         "collisionLeft": 1540532800000,
         "collisionWidth": 21203877,
-        "height": 22.5,
+        "height": 0,
         "left": 4097.222222222223,
         "order": Object {
           "group": Object {
@@ -34,7 +34,7 @@ Object {
           "index": 0,
         },
         "stack": true,
-        "top": 33.75,
+        "top": 15,
         "width": 736.245729166666,
       },
       "id": "5",
@@ -43,7 +43,7 @@ Object {
       "dimensions": Object {
         "collisionLeft": 1540550800000,
         "collisionWidth": 24803877,
-        "height": 22.5,
+        "height": 0,
         "left": 4722.222222222223,
         "order": Object {
           "group": Object {
@@ -52,7 +52,7 @@ Object {
           "index": 0,
         },
         "stack": true,
-        "top": 3.75,
+        "top": 15,
         "width": 861.245729166666,
       },
       "id": "6",
@@ -61,7 +61,7 @@ Object {
       "dimensions": Object {
         "collisionLeft": 1540570000000,
         "collisionWidth": 14875919,
-        "height": 22.5,
+        "height": 0,
         "left": 5388.888888888889,
         "order": Object {
           "group": Object {
@@ -70,7 +70,7 @@ Object {
           "index": 0,
         },
         "stack": true,
-        "top": 33.75,
+        "top": 15,
         "width": 516.5249652777784,
       },
       "id": "1",
@@ -79,7 +79,7 @@ Object {
       "dimensions": Object {
         "collisionLeft": 1540620000000,
         "collisionWidth": 20397548,
-        "height": 22.5,
+        "height": 0,
         "left": 7125,
         "order": Object {
           "group": Object {
@@ -88,7 +88,7 @@ Object {
           "index": 0,
         },
         "stack": true,
-        "top": 3.75,
+        "top": 15,
         "width": 708.2481944444444,
       },
       "id": "2",
@@ -97,7 +97,7 @@ Object {
       "dimensions": Object {
         "collisionLeft": 1540656000000,
         "collisionWidth": 20397548,
-        "height": 22.5,
+        "height": 0,
         "left": 8375,
         "order": Object {
           "group": Object {
@@ -106,23 +106,23 @@ Object {
           "index": 2,
         },
         "stack": true,
-        "top": 93.75,
+        "top": 75,
         "width": 625,
       },
       "id": "3",
     },
   ],
   "groupHeights": Array [
-    60,
+    30,
     30,
     30,
   ],
   "groupTops": Array [
     0,
+    30,
     60,
-    90,
   ],
-  "height": 120,
+  "height": 90,
 }
 `;
 

__tests__/utils/calendar/stack-items.js

@@ -18,6 +18,7 @@ describe('stackItems', () => {
         state.canvasTimeStart,
         state.canvasTimeEnd,
         props.keys,
+        props.minHeight,
         props.lineHeight,
         props.itemHeightRatio,
         props.stackItems,
@@ -39,6 +40,7 @@ describe('stackItems', () => {
         state.canvasTimeStart,
         state.canvasTimeEnd,
         propsNoStack.keys,
+        propsNoStack.minHeight,
         propsNoStack.lineHeight,
         propsNoStack.itemHeightRatio,
         propsNoStack.stackItems,
@@ -60,7 +62,9 @@ describe('stackItems', () => {
         stateMoveItem.canvasTimeStart,
         stateMoveItem.canvasTimeEnd,
         props.keys,
+        props.minHeight,
         props.lineHeight,
+        props.minHeight,
         props.itemHeightRatio,
         props.stackItems,
         stateMoveItem.draggingItem,
@@ -81,6 +85,7 @@ describe('stackItems', () => {
         stateResizeItemLeft.canvasTimeStart,
         stateResizeItemLeft.canvasTimeEnd,
         props.keys,
+        props.minHeight,
         props.lineHeight,
         props.itemHeightRatio,
         props.stackItems,
@@ -102,6 +107,7 @@ describe('stackItems', () => {
         stateResizeItemRight.canvasTimeStart,
         stateResizeItemRight.canvasTimeEnd,
         props.keys,
+        props.minHeight,
         props.lineHeight,
         props.itemHeightRatio,
         props.stackItems,
@@ -123,6 +129,7 @@ describe('stackItems', () => {
         state.canvasTimeStart,
         state.canvasTimeEnd,
         props.keys,
+        props.minHeight,
         props.lineHeight,
         props.itemHeightRatio,
         props.stackItems,

demo/app/demo-main/index.js

@@ -152,6 +152,7 @@ export default class App extends Component {
       <Timeline
         groups={groups}
         items={items}
+        minHeight={1500}
         keys={keys}
         sidebarWidth={150}
         sidebarContent={<div>Above The Left</div>}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-calendar-timeline",
-  "version": "0.26.7",
+  "version": "0.26.8",
   "description": "react calendar timeline",
   "main": "lib/index.js",
   "scripts": {

src/lib/Timeline.js

@@ -45,6 +45,7 @@ export default class ReactCalendarTimeline extends Component {
     lineHeight: PropTypes.number,
     itemHeightRatio: PropTypes.number,
 
+    minHeight: PropTypes.number,
     minZoom: PropTypes.number,
     maxZoom: PropTypes.number,
 
@@ -169,6 +170,8 @@ export default class ReactCalendarTimeline extends Component {
     lineHeight: 30,
     itemHeightRatio: 0.65,
 
+    minHeight: 0,
+
     minZoom: 60 * 60 * 1000, // 1 hour
     maxZoom: 5 * 365.24 * 86400 * 1000, // 5 years
 
@@ -322,6 +325,7 @@ export default class ReactCalendarTimeline extends Component {
       this.state.canvasTimeStart,
       this.state.canvasTimeEnd,
       props.keys,
+      props.minHeight,
       props.lineHeight,
       props.itemHeightRatio,
       props.stackItems,
@@ -399,6 +403,7 @@ export default class ReactCalendarTimeline extends Component {
           prevState.canvasTimeStart,
           prevState.canvasTimeEnd,
           nextProps.keys,
+          nextProps.minHeight,
           nextProps.lineHeight,
           nextProps.itemHeightRatio,
           nextProps.stackItems,
@@ -469,6 +474,7 @@ export default class ReactCalendarTimeline extends Component {
       this.state.canvasTimeStart,
       this.state.canvasTimeEnd,
       props.keys,
+      props.minHeight,
       props.lineHeight,
       props.itemHeightRatio,
       props.stackItems,
@@ -1001,6 +1007,7 @@ export default class ReactCalendarTimeline extends Component {
         this.state.canvasTimeStart,
         this.state.canvasTimeEnd,
         this.props.keys,
+        this.props.minHeight,
         this.props.lineHeight,
         this.props.itemHeightRatio,
         this.props.stackItems,

src/lib/utility/calendar.js

@@ -467,6 +467,7 @@ export function stackTimelineItems(
   canvasTimeStart,
   canvasTimeEnd,
   keys,
+  minHeight,
   lineHeight,
   itemHeightRatio,
   stackItems,
@@ -501,7 +502,7 @@ export function stackTimelineItems(
   if (groups.length === 0) {
     return {
       dimensionItems: [],
-      height: 0,
+      height: minHeight,
       groupHeights: [],
       groupTops: []
     }
@@ -530,7 +531,7 @@ export function stackTimelineItems(
     lineHeight,
     stackItems
   )
-  return { dimensionItems, height, groupHeights, groupTops }
+  return { dimensionItems, height: height > minHeight ? height : minHeight, groupHeights, groupTops }
 }
 
 /**
@@ -704,6 +705,7 @@ export function calculateScrollCanvas(
         mergedState.canvasTimeStart,
         mergedState.canvasTimeEnd,
         props.keys,
+        props.minHeight,
         props.lineHeight,
         props.itemHeightRatio,
         props.stackItems,