stackItems attempt 2 (#424)

**Issue Number**

#397 replacement because I'm terrible at using git

**Overview of PR**

Removing the API updates that were accidentally merged in to #397 turned out to be an ordeal. This PR should be cleaner.

_Don't forget to update the CHANGELOG.md file with any changes that are in this PR_

Author: acemac

README.md

@@ -83,6 +83,8 @@ Expects either a vanilla JS array or an immutableJS array, consisting of objects
   id: 1,
   title: 'group 1',
   rightTitle: 'title in the right sidebar',
+  stackItems?: true,
+  height?: 30
 }
 ```
 
@@ -234,7 +236,7 @@ Append a special `.rct-drag-right` handle to the elements and only resize if dra
 
 ### stackItems
 
-Stack items under each other, so there is no visual overlap when times collide. Defaults to `false`.
+Stack items under each other, so there is no visual overlap when times collide.  Can be overridden in the `groups` array. Defaults to `false`.
 
 ## traditionalZoom
 

demo/app/demo-performance/index.js

@@ -37,6 +37,8 @@ export default class App extends Component {
       .endOf('month')
       .toDate()
 
+    groups[0].stackItems = false;
+    groups[0].height = 300;
     this.state = {
       groups,
       items,

src/lib/Timeline.js

@@ -17,8 +17,8 @@ import {
   getMinUnit,
   getNextUnit,
   stackItems,
-  calculateScrollCanvas,
-  calculateTimeForXPosition
+  calculateTimeForXPosition,
+  calculateScrollCanvas
 } from './utility/calendar'
 import { _get, _length } from './utility/generic'
 import {

src/lib/items/Item.js

@@ -27,7 +27,7 @@ export default class Item extends Component {
     canvasTimeStart: PropTypes.number.isRequired,
     canvasTimeEnd: PropTypes.number.isRequired,
     canvasWidth: PropTypes.number.isRequired,
-    order: PropTypes.number,
+    order: PropTypes.object,
 
     dragSnap: PropTypes.number,
     minResizeWidth: PropTypes.number,
@@ -104,7 +104,8 @@ export default class Item extends Component {
       nextProps.canvasTimeStart !== this.props.canvasTimeStart ||
       nextProps.canvasTimeEnd !== this.props.canvasTimeEnd ||
       nextProps.canvasWidth !== this.props.canvasWidth ||
-      nextProps.order !== this.props.order ||
+      (nextProps.order ? nextProps.order.index : undefined) !== 
+        (this.props.order ? this.props.order.index : undefined) ||
       nextProps.dragSnap !== this.props.dragSnap ||
       nextProps.minResizeWidth !== this.props.minResizeWidth ||
       nextProps.canChangeGroup !== this.props.canChangeGroup ||
@@ -184,14 +185,14 @@ export default class Item extends Component {
       for (var key of Object.keys(groupTops)) {
         var groupTop = groupTops[key]
         if (e.pageY - offset + scrolls.scrollTop > groupTop) {
-          groupDelta = parseInt(key, 10) - order
+          groupDelta = parseInt(key, 10) - order.index
         } else {
           break
         }
       }
 
-      if (this.props.order + groupDelta < 0) {
-        return 0 - this.props.order
+      if (this.props.order.index + groupDelta < 0) {
+        return 0 - this.props.order.index
       } else {
         return groupDelta
       }
@@ -273,7 +274,7 @@ export default class Item extends Component {
             this.props.onDrag(
               this.itemId,
               dragTime,
-              this.props.order + dragGroupDelta
+              this.props.order.index + dragGroupDelta
             )
           }
 
@@ -299,7 +300,7 @@ export default class Item extends Component {
             this.props.onDrop(
               this.itemId,
               dragTime,
-              this.props.order + this.dragGroupDelta(e)
+              this.props.order.index + this.dragGroupDelta(e)
             )
           }
 

src/lib/items/Items.js

@@ -81,12 +81,6 @@ export default class Items extends Component {
     )
   }
 
-  getGroupOrders() {
-    const { keys, groups } = this.props
-
-    return getGroupOrders(groups, keys)
-  }
-
   isSelected(item, itemIdKey) {
     if (!this.props.selected) {
       return this.props.selectedItem === _get(item, itemIdKey)
@@ -107,10 +101,12 @@ export default class Items extends Component {
       canvasTimeStart,
       canvasTimeEnd,
       dimensionItems,
+      keys,
+      groups
     } = this.props
-    const { itemIdKey, itemGroupKey } = this.props.keys
+    const { itemIdKey, itemGroupKey } = keys
 
-    const groupOrders = this.getGroupOrders()
+    const groupOrders = getGroupOrders(groups, keys)
     const visibleItems = this.getVisibleItems(
       canvasTimeStart,
       canvasTimeEnd,