feat: add prop to remove vertical margin between stacked items

__fixtures__/stateAndProps.js

@@ -8,6 +8,7 @@ export const props = {
   keys: defaultKeys,
   lineHeight: 30,
   stackItems: true,
+  verticalMarginBetweenStackedItems: true,
   itemHeightRatio: 0.75,
   visibleTimeEnd,
   visibleTimeStart,
@@ -57,4 +58,4 @@ export const stateResizeItemRight = {
   resizingEdge: 'right',
   resizeTime: items[0].end_time+timeOffset,
   newGroupOrder: 0,
-}
+}

__tests__/utils/calendar/stack-items.js

@@ -21,6 +21,7 @@ describe('stackItems', () => {
         props.lineHeight,
         props.itemHeightRatio,
         props.stackItems,
+        props.verticalMarginBetweenStackedItems,
         state.draggingItem,
         state.resizingItem,
         state.dragTime,
@@ -42,6 +43,7 @@ describe('stackItems', () => {
         propsNoStack.lineHeight,
         propsNoStack.itemHeightRatio,
         propsNoStack.stackItems,
+        propsNoStack.verticalMarginBetweenStackedItems,
         state.draggingItem,
         state.resizingItem,
         state.dragTime,
@@ -63,6 +65,7 @@ describe('stackItems', () => {
         props.lineHeight,
         props.itemHeightRatio,
         props.stackItems,
+        props.verticalMarginBetweenStackedItems,
         stateMoveItem.draggingItem,
         stateMoveItem.resizingItem,
         stateMoveItem.dragTime,
@@ -84,6 +87,7 @@ describe('stackItems', () => {
         props.lineHeight,
         props.itemHeightRatio,
         props.stackItems,
+        props.verticalMarginBetweenStackedItems,
         stateResizeItemLeft.draggingItem,
         stateResizeItemLeft.resizingItem,
         stateResizeItemLeft.dragTime,
@@ -105,6 +109,7 @@ describe('stackItems', () => {
         props.lineHeight,
         props.itemHeightRatio,
         props.stackItems,
+        props.verticalMarginBetweenStackedItems,
         stateResizeItemRight.draggingItem,
         stateResizeItemRight.resizingItem,
         stateResizeItemRight.dragTime,
@@ -126,6 +131,7 @@ describe('stackItems', () => {
         props.lineHeight,
         props.itemHeightRatio,
         props.stackItems,
+        props.verticalMarginBetweenStackedItems,
         state.draggingItem,
         state.resizingItem,
         state.dragTime,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-calendar-timeline",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "description": "react calendar timeline",
   "main": "lib/index.js",
   "scripts": {
@@ -135,7 +135,7 @@
     "jest-watch-typeahead": "^0.3.1",
     "jsdom": "^11.5.1",
     "moment": "^2.11.1",
-    "node-sass": "^7.0.1",
+    "node-sass": "^8.0.0",
     "prettier": "^1.10.2",
     "prettier-eslint-cli": "^4.7.0",
     "prop-types": "^15.6.2",
@@ -146,10 +146,10 @@
     "react-testing-library": "^6.0.3",
     "regenerator-runtime": "^0.13.2",
     "rimraf": "^2.6.2",
-    "sass-loader": "^13.0.0",
+    "sass-loader": "^14.0.0",
     "style-loader": "^3.3.1",
     "webpack": "^5.72.1",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.9.0"
   }
-}
+}

src/lib/Timeline.js

@@ -52,6 +52,7 @@ export default class ReactCalendarTimeline extends Component {
     canSelect: PropTypes.bool,
 
     stackItems: PropTypes.bool,
+    verticalMarginBetweenStackedItems: PropTypes.bool,
 
     traditionalZoom: PropTypes.bool,
 
@@ -145,6 +146,7 @@ export default class ReactCalendarTimeline extends Component {
     canSelect: true,
 
     stackItems: false,
+    verticalMarginBetweenStackedItems: true,
 
     traditionalZoom: false,
 
@@ -302,6 +304,7 @@ export default class ReactCalendarTimeline extends Component {
       props.lineHeight,
       props.itemHeightRatio,
       props.stackItems,
+      props.verticalMarginBetweenStackedItems,
       this.state.draggingItem,
       this.state.resizingItem,
       this.state.dragTime,
@@ -379,6 +382,7 @@ export default class ReactCalendarTimeline extends Component {
           nextProps.lineHeight,
           nextProps.itemHeightRatio,
           nextProps.stackItems,
+          nextProps.verticalMarginBetweenStackedItems,
           prevState.draggingItem,
           prevState.resizingItem,
           prevState.dragTime,
@@ -450,6 +454,7 @@ export default class ReactCalendarTimeline extends Component {
       props.lineHeight,
       props.itemHeightRatio,
       props.stackItems,
+      props.verticalMarginBetweenStackedItems,
       this.state.draggingItem,
       this.state.resizingItem,
       this.state.dragTime,
@@ -987,6 +992,7 @@ export default class ReactCalendarTimeline extends Component {
         this.props.lineHeight,
         this.props.itemHeightRatio,
         this.props.stackItems,
+        this.props.verticalMarginBetweenStackedItems,
         this.state.draggingItem,
         this.state.resizingItem,
         this.state.dragTime,

src/lib/utility/calendar.js

@@ -309,7 +309,8 @@ export function groupStack(
   group,
   groupHeight,
   groupTop,
-  itemIndex
+  itemIndex,
+  verticalMarginBetweenStackedItems
 ) {
   // calculate non-overlapping positions
   let curHeight = groupHeight
@@ -336,7 +337,11 @@ export function groupStack(
 
       if (collidingItem != null) {
         // There is a collision. Reposition the items above the colliding element
-        item.dimensions.top = collidingItem.dimensions.top + lineHeight
+        if (verticalMarginBetweenStackedItems) {
+          item.dimensions.top = collidingItem.dimensions.top + lineHeight
+        } else {
+          item.dimensions.top = collidingItem.dimensions.top + lineHeight - (lineHeight - collidingItem.dimensions.height)
+        }
         curHeight = Math.max(
           curHeight,
           item.dimensions.top + item.dimensions.height + verticalMargin - groupTop
@@ -372,8 +377,9 @@ function sum(arr = []) {
  * @param {*} groupOrders the groupOrders object
  * @param {*} lineHeight
  * @param {*} stackItems should items be stacked?
+ * @param {*} verticalMarginBetweenStackedItems should there be a margin between stacked items?
  */
-export function stackAll(itemsDimensions, groupOrders, lineHeight, stackItems) {
+export function stackAll(itemsDimensions, groupOrders, lineHeight, stackItems, verticalMarginBetweenStackedItems) {
   var groupHeights = []
   var groupTops = []
 
@@ -391,7 +397,8 @@ export function stackAll(itemsDimensions, groupOrders, lineHeight, stackItems) {
       itemsDimensions,
       isGroupStacked,
       lineHeight,
-      groupTop
+      groupTop,
+      verticalMarginBetweenStackedItems
     )
     // If group height is overridden, push new height
     // Do this late as item position still needs to be calculated
@@ -402,7 +409,7 @@ export function stackAll(itemsDimensions, groupOrders, lineHeight, stackItems) {
       groupHeights.push(Math.max(groupHeight, lineHeight))
     }
   }
-  
+
   return {
     height: sum(groupHeights),
     groupHeights,
@@ -411,13 +418,14 @@ export function stackAll(itemsDimensions, groupOrders, lineHeight, stackItems) {
 }
 
 /**
- * 
- * @param {*} itemsDimensions 
- * @param {*} isGroupStacked 
- * @param {*} lineHeight 
- * @param {*} groupTop 
+ *
+ * @param {*} itemsDimensions
+ * @param {*} isGroupStacked
+ * @param {*} lineHeight
+ * @param {*} groupTop
+ * @param {*} verticalMarginBetweenStackedItems
  */
-export function stackGroup(itemsDimensions, isGroupStacked, lineHeight, groupTop) {
+export function stackGroup(itemsDimensions, isGroupStacked, lineHeight, groupTop, verticalMarginBetweenStackedItems) {
   var groupHeight = 0
   var verticalMargin = 0
   // Find positions for each item in group
@@ -430,7 +438,8 @@ export function stackGroup(itemsDimensions, isGroupStacked, lineHeight, groupTop
         itemsDimensions,
         groupHeight,
         groupTop,
-        itemIndex
+        itemIndex,
+        verticalMarginBetweenStackedItems
       )
     } else {
       r = groupNoStack(lineHeight, itemsDimensions[itemIndex], groupHeight, groupTop)
@@ -453,6 +462,7 @@ export function stackGroup(itemsDimensions, isGroupStacked, lineHeight, groupTop
  * @param {number} lineHeight
  * @param {number} itemHeightRatio
  * @param {boolean} stackItems
+ * @param {boolean} verticalMarginBetweenStackedItems
  * @param {*} draggingItem
  * @param {*} resizingItem
  * @param {number} dragTime
@@ -470,6 +480,7 @@ export function stackTimelineItems(
   lineHeight,
   itemHeightRatio,
   stackItems,
+  verticalMarginBetweenStackedItems,
   draggingItem,
   resizingItem,
   dragTime,
@@ -528,7 +539,8 @@ export function stackTimelineItems(
     dimensionItems,
     groupOrders,
     lineHeight,
-    stackItems
+    stackItems,
+    verticalMarginBetweenStackedItems
   )
   return { dimensionItems, height, groupHeights, groupTops }
 }
@@ -712,6 +724,7 @@ export function calculateScrollCanvas(
         props.lineHeight,
         props.itemHeightRatio,
         props.stackItems,
+        props.verticalMarginBetweenStackedItems,
         mergedState.draggingItem,
         mergedState.resizingItem,
         mergedState.dragTime,