Rename prop to overlapEventsSpacing

Author: ethanshar

example/src/screens/timelineCalendar.tsx

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

src/timeline/Packer.ts

@@ -8,11 +8,11 @@ interface PopulateOptions {
   screenWidth?: number;
   dayStart?: number;
   hourBlockHeight?: number;
-  eventBlockRightMargin?: number;
+  overlapEventsSpacing?: number;
 }
 
 export const HOUR_BLOCK_HEIGHT = 100;
-const EVENT_BLOCK_RIGHT_MARGIN = 10;
+const OVERLAP_EVENTS_SPACINGS = 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,15 +55,15 @@ function packOverlappingEventGroup(
   calculatedEvents: PackedEvent[],
   populateOptions: PopulateOptions
 ) {
-  const {screenWidth = constants.screenWidth, eventBlockRightMargin = EVENT_BLOCK_RIGHT_MARGIN} = populateOptions;
+  const {screenWidth = constants.screenWidth, overlapEventsSpacing = OVERLAP_EVENTS_SPACINGS} = populateOptions;
   columns.forEach((column, columnIndex) => {
     column.forEach(event => {
       const columnSpan = calcColumnSpan(event, columnIndex, columns);
       const eventLeft = (columnIndex / columns.length) * screenWidth;
       let eventWidth = screenWidth * (columnSpan / columns.length);
 
       if (columnIndex + columnSpan <= columns.length -1) {
-        eventWidth -= eventBlockRightMargin;
+        eventWidth -= overlapEventsSpacing;
       }
 
       calculatedEvents.push(buildEvent(event, eventLeft, eventWidth, populateOptions));

src/timeline/Timeline.tsx

@@ -84,9 +84,9 @@ export interface TimelineProps {
    */
   onChangeOffset?: (offset: number) => void;
   /**
-   * Right spacing between overlapping events
+   * Spacing between overlapping events
    */
-  eventRightSpacing?: number;
+  overlapEventsSpacing?: number;
 }
 
 const Timeline = (props: TimelineProps) => {
@@ -107,7 +107,7 @@ const Timeline = (props: TimelineProps) => {
     showNowIndicator,
     scrollOffset,
     onChangeOffset,
-    eventRightSpacing,
+    overlapEventsSpacing,
     eventTapped
   } = props;
 
@@ -119,7 +119,7 @@ const Timeline = (props: TimelineProps) => {
 
   const packedEvents = useMemo(() => {
     const width = constants.screenWidth - HOURS_SIDEBAR_WIDTH;
-    return populateEvents(events, {screenWidth: width, dayStart: start, eventBlockRightMargin: eventRightSpacing});
+    return populateEvents(events, {screenWidth: width, dayStart: start, overlapEventsSpacing});
   }, [events, start]);
 
   useEffect(() => {

src/timeline/__tests__/Packer.spec.js

@@ -82,12 +82,12 @@ describe('Timeline Packer utils', () => {
           end: `2017-09-06 05:30:00`
         }
       ];
-      let packedEvents = uut(overlappingEvents, {screenWidth: 300, dayStart: 0, eventRightSpacing: 10});
+      let packedEvents = uut(overlappingEvents, {screenWidth: 300, dayStart: 0, overlapEventsSpacing: 4});
       packedEvents = _.sortBy(packedEvents, 'index');
-      expect(packedEvents[0].width).toBe(90);
-      expect(packedEvents[1].width).toBe(90);
+      expect(packedEvents[0].width).toBe(96);
+      expect(packedEvents[1].width).toBe(96);
       expect(packedEvents[2].width).toBe(100);
-      expect(packedEvents[3].width).toBe(90);
+      expect(packedEvents[3].width).toBe(96);
       expect(packedEvents[4].width).toBe(200);
       expect(packedEvents[5].width).toBe(300);
     });