Support passing Timeline rightEdgeSpacing

Author: ethanshar

example/src/screens/timelineCalendar.tsx

@@ -224,7 +224,8 @@ export default class TimelineCalendarScreen extends Component {
     // scrollToFirst: true,
     // start: 0,
     // end: 24,
-    overlapEventsSpacing: 8
+    overlapEventsSpacing: 8,
+    rightEdgeSpacing: 24,
   };
 
   render() {

src/timeline/Packer.ts

@@ -9,10 +9,12 @@ interface PopulateOptions {
   dayStart?: number;
   hourBlockHeight?: number;
   overlapEventsSpacing?: number;
+  rightEdgeSpacing?: number;
 }
 
 export const HOUR_BLOCK_HEIGHT = 100;
 const OVERLAP_EVENTS_SPACINGS = 10;
+const RIGHT_EDGE_SPACING = 10;
 
 function buildEvent(event: Event & {index: number}, left: number, width: number, {dayStart = 0, hourBlockHeight = HOUR_BLOCK_HEIGHT}: PopulateOptions): PackedEvent {
   const startTime = new XDate(event.start);
@@ -55,12 +57,13 @@ function packOverlappingEventGroup(
   calculatedEvents: PackedEvent[],
   populateOptions: PopulateOptions
 ) {
-  const {screenWidth = constants.screenWidth, overlapEventsSpacing = OVERLAP_EVENTS_SPACINGS} = populateOptions;
+  const {screenWidth = constants.screenWidth, rightEdgeSpacing = RIGHT_EDGE_SPACING, overlapEventsSpacing = OVERLAP_EVENTS_SPACINGS} = populateOptions;
   columns.forEach((column, columnIndex) => {
     column.forEach(event => {
+      const totalWidth = screenWidth - rightEdgeSpacing;
       const columnSpan = calcColumnSpan(event, columnIndex, columns);
-      const eventLeft = (columnIndex / columns.length) * screenWidth;
-      let eventWidth = screenWidth * (columnSpan / columns.length);
+      const eventLeft = (columnIndex / columns.length) * totalWidth;
+      let eventWidth = totalWidth * (columnSpan / columns.length);
 
       if (columnIndex + columnSpan <= columns.length -1) {
         eventWidth -= overlapEventsSpacing;

src/timeline/Timeline.tsx

@@ -87,6 +87,10 @@ export interface TimelineProps {
    * Spacing between overlapping events
    */
   overlapEventsSpacing?: number;
+  /**
+   * Spacing to keep at the right edge (for background press)
+   */
+  rightEdgeSpacing?: number;
 }
 
 const Timeline = (props: TimelineProps) => {
@@ -108,6 +112,7 @@ const Timeline = (props: TimelineProps) => {
     scrollOffset,
     onChangeOffset,
     overlapEventsSpacing,
+    rightEdgeSpacing,
     eventTapped
   } = props;
 
@@ -119,7 +124,7 @@ const Timeline = (props: TimelineProps) => {
 
   const packedEvents = useMemo(() => {
     const width = constants.screenWidth - HOURS_SIDEBAR_WIDTH;
-    return populateEvents(events, {screenWidth: width, dayStart: start, overlapEventsSpacing});
+    return populateEvents(events, {screenWidth: width, dayStart: start, overlapEventsSpacing, rightEdgeSpacing});
   }, [events, start]);
 
   useEffect(() => {

src/timeline/__tests__/Packer.spec.js

@@ -38,21 +38,26 @@ describe('Timeline Packer utils', () => {
     });
 
     it('should set event block width based on overlaps of 3 events', () => {
-      const packedEvents = uut(events, {screenWidth: 300, dayStart: 0});
+      const packedEvents = uut(events, {screenWidth: 310, dayStart: 0, rightEdgeSpacing: 10, overlapEventsSpacing: 10});
       expect(packedEvents[0].width).toBe(90); // event 1
       expect(packedEvents[1].width).toBe(90); // event 3
       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(150); // event 2
+      const packedEvents = uut([events[0], events[1]], {
+        screenWidth: 300,
+        dayStart: 0,
+        overlapEventsSpacing: 10,
+        rightEdgeSpacing: 10
+      });
+      expect(packedEvents[0].width).toBe(135); // event 1
+      expect(packedEvents[1].width).toBe(145); // 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(300); // event 1
+      expect(packedEvents[0].width).toBe(290); // event 1
     });
 
     it('should handle a complex case of overlapping events', () => {
@@ -82,7 +87,7 @@ describe('Timeline Packer utils', () => {
           end: `2017-09-06 05:30:00`
         }
       ];
-      let packedEvents = uut(overlappingEvents, {screenWidth: 300, dayStart: 0, overlapEventsSpacing: 4});
+      let packedEvents = uut(overlappingEvents, {screenWidth: 310, dayStart: 0, overlapEventsSpacing: 4});
       packedEvents = _.sortBy(packedEvents, 'index');
       expect(packedEvents[0].width).toBe(96);
       expect(packedEvents[1].width).toBe(96);
@@ -102,16 +107,21 @@ describe('Timeline Packer utils', () => {
     });
 
     it('should set left position base when the 3 events overlap', () => {
-      const packedEvents = uut(events, {screenWidth: 300, dayStart: 0});
+      const packedEvents = uut(events, {screenWidth: 300, dayStart: 0, overlapEventsSpacing: 10, rightEdgeSpacing: 10});
       expect(packedEvents[0].left).toBe(0); // event 1
-      expect(packedEvents[1].left).toBe(100); // event 3
-      expect(packedEvents[2].left).toBe(200); // event 2
+      expect(packedEvents[1].left).toBeCloseTo(96.666); // event 3
+      expect(packedEvents[2].left).toBeCloseTo(193.333); // event 2
     });
 
     it('should set left position base when the 2 events overlap', () => {
-      const packedEvents = uut([events[0], events[1]], {screenWidth: 300, dayStart: 0});
+      const packedEvents = uut([events[0], events[1]], {
+        screenWidth: 300,
+        dayStart: 0,
+        overlapEventsSpacing: 10,
+        rightEdgeSpacing: 10
+      });
       expect(packedEvents[0].left).toBe(0); // event 1
-      expect(packedEvents[1].left).toBe(150); // event 3
+      expect(packedEvents[1].left).toBe(145); // event 3
     });
   });
 });

src/timeline/timeline.api.json

@@ -1,12 +1,9 @@
 {
   "name": "Timeline",
   "description": "Timeline component",
-  "images": [
-  ],
+  "images": [],
   "extends": ["ScrollView"],
-  "extendsLink": [
-    "https://reactnative.dev/docs/scrollview"
-  ],
+  "extendsLink": ["https://reactnative.dev/docs/scrollview"],
   "example": "https://github.com/wix/react-native-calendars/blob/master/example/src/screens/timelineCalendar.tsx",
   "props": [
     {
@@ -66,6 +63,18 @@
       "type": "boolean",
       "description": "Whether to use 24 hours format for the timeline hours",
       "default": "true"
+    },
+    {
+      "name": "overlapEventsSpacing",
+      "type": "number",
+      "description": "Spacing between overlapping events",
+      "default": "10"
+    },
+    {
+      "name": "rightEdgeSpacing",
+      "type": "number",
+      "description": "Spacing to keep at the right edge (for background press)",
+      "default": "10"
     }
   ]
 }