Fix overlap event spacing logic

Author: ethanshar

example/src/screens/timelineCalendar.tsx

@@ -21,25 +21,46 @@ const EVENTS: TimelineEventProps[] = [
     title: 'Merge Request to React Native Calendars',
     summary: 'Merge Timeline Calendar to React Native Calendars'
   },
+  {
+    start: `${getDate()} 01:15:00`,
+    end: `${getDate()} 02:30:00`,
+    title: 'Meeting A',
+    summary: 'Summary for meeting A',
+    color: '#e6add8'
+  },
   {
     start: `${getDate()} 01:30:00`,
     end: `${getDate()} 02:30:00`,
-    title: 'Dr. Mariana Joseph',
-    summary: '3412 Piedmont Rd NE, GA 3032',
+    title: 'Meeting B',
+    summary: 'Summary for meeting B',
     color: '#e6add8'
   },
   {
     start: `${getDate()} 01:45:00`,
     end: `${getDate()} 02:45:00`,
-    title: 'Dr. Mariana Joseph',
-    summary: '3412 Piedmont Rd NE, GA 3032',
+    title: 'Meeting C',
+    summary: 'Summary for meeting C',
     color: '#e6add8'
   },
   {
     start: `${getDate()} 02:40:00`,
     end: `${getDate()} 03:10:00`,
-    title: 'Dr. Mariana Joseph',
-    summary: '3412 Piedmont Rd NE, GA 3032',
+    title: 'Meeting D',
+    summary: 'Summary for meeting D',
+    color: '#e6add8'
+  },
+  {
+    start: `${getDate()} 02:50:00`,
+    end: `${getDate()} 03:20:00`,
+    title: 'Meeting E',
+    summary: 'Summary for meeting E',
+    color: '#e6add8'
+  },
+  {
+    start: `${getDate()} 04:30:00`,
+    end: `${getDate()} 05:30:00`,
+    title: 'Meeting F',
+    summary: 'Summary for meeting F',
     color: '#e6add8'
   },
   {
@@ -203,7 +224,7 @@ export default class TimelineCalendarScreen extends Component {
     // scrollToFirst: true,
     // start: 0,
     // end: 24,
-    // eventRightSpacing: 4
+    eventRightSpacing: 4
   };
 
   render() {

src/timeline/Packer.ts

@@ -60,7 +60,11 @@ function packOverlappingEventGroup(
     column.forEach(event => {
       const columnSpan = calcColumnSpan(event, columnIndex, columns);
       const eventLeft = (columnIndex / columns.length) * screenWidth;
-      const eventWidth = screenWidth * (columnSpan / columns.length) - eventBlockRightMargin;
+      let eventWidth = screenWidth * (columnSpan / columns.length);
+
+      if (columnIndex + columnSpan <= columns.length -1) {
+        eventWidth -= eventBlockRightMargin;
+      }
 
       calculatedEvents.push(buildEvent(event, eventLeft, eventWidth, populateOptions));
     });

src/timeline/__tests__/Packer.spec.js

@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import uut from '../Packer';
 
 describe('Timeline Packer utils', () => {
@@ -40,18 +41,55 @@ describe('Timeline Packer utils', () => {
       const packedEvents = uut(events, {screenWidth: 300, dayStart: 0});
       expect(packedEvents[0].width).toBe(90); // event 1
       expect(packedEvents[1].width).toBe(90); // event 3
-      expect(packedEvents[2].width).toBe(90); // event 2
+      expect(packedEvents[2].width).toBe(100); // event 2
     });
 
     it('should set event block width based on overlaps of 2 events', () => {
       const packedEvents = uut([events[0], events[1]], {screenWidth: 300, dayStart: 0});
       expect(packedEvents[0].width).toBe(140); // event 1
-      expect(packedEvents[1].width).toBe(140); // event 2
+      expect(packedEvents[1].width).toBe(150); // event 2
     });
 
     it('should set event block width when there is not overlaps', () => {
       const packedEvents = uut([events[0]], {screenWidth: 300, dayStart: 0});
-      expect(packedEvents[0].width).toBe(290); // event 1
+      expect(packedEvents[0].width).toBe(300); // event 1
+    });
+
+    it('should handle a complex case of overlapping events', () => {
+      const overlappingEvents = [
+        {
+          start: `2017-09-06 01:15:00`,
+          end: `2017-09-06 02:30:00`
+        },
+        {
+          start: `2017-09-06 01:30:00`,
+          end: `2017-09-06 02:30:00`
+        },
+        {
+          start: `2017-09-06 01:45:00`,
+          end: `2017-09-06 02:45:00`
+        },
+        {
+          start: `2017-09-06 02:40:00`,
+          end: `2017-09-06 03:10:00`
+        },
+        {
+          start: `2017-09-06 02:50:00`,
+          end: `2017-09-06 03:20:00`
+        },
+        {
+          start: `2017-09-06 04:30:00`,
+          end: `2017-09-06 05:30:00`
+        }
+      ];
+      let packedEvents = uut(overlappingEvents, {screenWidth: 300, dayStart: 0, eventRightSpacing: 10});
+      packedEvents = _.sortBy(packedEvents, 'index');
+      expect(packedEvents[0].width).toBe(90);
+      expect(packedEvents[1].width).toBe(90);
+      expect(packedEvents[2].width).toBe(100);
+      expect(packedEvents[3].width).toBe(90);
+      expect(packedEvents[4].width).toBe(200);
+      expect(packedEvents[5].width).toBe(300);
     });
   });