Support Timeline unavailableHours

Author: ethanshar

example/src/screens/timelineCalendar.tsx

@@ -217,13 +217,14 @@ export default class TimelineCalendarScreen extends Component {
     ]);
   };
 
-  private timelineProps = {
+  private timelineProps: Partial<TimelineProps> = {
     format24h: true,
     onBackgroundLongPress: this.createNewEvent,
     onBackgroundLongPressOut: this.approveNewEvent,
     // scrollToFirst: true,
     // start: 0,
     // end: 24,
+    unavailableHours: [{start: 0, end: 6}, {start: 22, end: 24}],
     overlapEventsSpacing: 8,
     rightEdgeSpacing: 24,
   };

src/timeline/Packer.ts

@@ -2,6 +2,7 @@
 import XDate from 'xdate';
 import constants from '../commons/constants';
 import {Event, PackedEvent} from './EventBlock';
+import inRange from 'lodash/inRange';
 
 type PartialPackedEvent = Event & {index: number};
 interface PopulateOptions {
@@ -12,11 +13,27 @@ interface PopulateOptions {
   rightEdgeSpacing?: number;
 }
 
+export interface UnavailableHours {
+  start: number;
+  end: number;
+}
+
+interface UnavailableHoursOptions {
+  hourBlockHeight?: number;
+  dayStart: number;
+  dayEnd: 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 {
+function buildEvent(
+  event: Event & {index: number},
+  left: number,
+  width: number,
+  {dayStart = 0, hourBlockHeight = HOUR_BLOCK_HEIGHT}: PopulateOptions
+): PackedEvent {
   const startTime = new XDate(event.start);
   const endTime = event.end ? new XDate(event.end) : new XDate(startTime).addHours(1);
 
@@ -57,15 +74,19 @@ function packOverlappingEventGroup(
   calculatedEvents: PackedEvent[],
   populateOptions: PopulateOptions
 ) {
-  const {screenWidth = constants.screenWidth, rightEdgeSpacing = RIGHT_EDGE_SPACING, 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) * totalWidth;
       let eventWidth = totalWidth * (columnSpan / columns.length);
 
-      if (columnIndex + columnSpan <= columns.length -1) {
+      if (columnIndex + columnSpan <= columns.length - 1) {
         eventWidth -= overlapEventsSpacing;
       }
 
@@ -74,7 +95,7 @@ function packOverlappingEventGroup(
   });
 }
 
-function populateEvents(_events: Event[], populateOptions: PopulateOptions) {
+export function populateEvents(_events: Event[], populateOptions: PopulateOptions) {
   let lastEnd: string | null = null;
   let columns: PartialPackedEvent[][] = [];
   const calculatedEvents: PackedEvent[] = [];
@@ -125,4 +146,35 @@ function populateEvents(_events: Event[], populateOptions: PopulateOptions) {
   return calculatedEvents;
 }
 
-export default populateEvents;
+export function buildUnavailableHoursBlocks(
+  unavailableHours: UnavailableHours[] = [],
+  options: UnavailableHoursOptions
+) {
+  const {hourBlockHeight = HOUR_BLOCK_HEIGHT, dayStart = 0, dayEnd = 24} = options || {};
+  const totalDayHours = dayEnd - dayStart;
+  const totalDayHeight = (dayEnd - dayStart) * hourBlockHeight;
+  return (
+    unavailableHours
+      .map(hours => {
+        if (!inRange(hours.start, 0, 25) || !inRange(hours.end, 0, 25)) {
+          console.error('Calendar Timeline unavailableHours is invalid. Hours should be between 0 and 24');
+          return undefined;
+        }
+
+        if (hours.start >= hours.end) {
+          console.error('Calendar Timeline availableHours is invalid. start hour should be earlier than end hour');
+          return undefined;
+        }
+
+        const startFixed = Math.max(hours.start, dayStart);
+        const endFixed = Math.min(hours.end, dayEnd);
+
+        return {
+          top: ((startFixed - dayStart) / totalDayHours) * totalDayHeight,
+          height: (endFixed - startFixed) * hourBlockHeight
+        };
+      })
+      // Note: this filter falsy values (undefined blocks)
+      .filter(Boolean)
+  );
+}

src/timeline/Timeline.tsx

@@ -6,7 +6,7 @@ import map from 'lodash/map';
 import constants from '../commons/constants';
 import {Theme} from '../types';
 import styleConstructor, {HOURS_SIDEBAR_WIDTH} from './style';
-import populateEvents, {HOUR_BLOCK_HEIGHT} from './Packer';
+import {populateEvents, HOUR_BLOCK_HEIGHT, UnavailableHours} from './Packer';
 import {calcTimeOffset} from './helpers/presenter';
 import TimelineHours, {TimelineHoursProps} from './TimelineHours';
 import EventBlock, {Event, PackedEvent} from './EventBlock';
@@ -91,6 +91,14 @@ export interface TimelineProps {
    * Spacing to keep at the right edge (for background press)
    */
   rightEdgeSpacing?: number;
+  /**
+   * Range of available hours
+   */
+  unavailableHours?: UnavailableHours[];
+  /**
+   * Background color for unavailable hours
+   */
+  unavailableHoursColor?: string;
 }
 
 const Timeline = (props: TimelineProps) => {
@@ -113,6 +121,8 @@ const Timeline = (props: TimelineProps) => {
     onChangeOffset,
     overlapEventsSpacing,
     rightEdgeSpacing,
+    unavailableHours,
+    unavailableHoursColor,
     eventTapped
   } = props;
 
@@ -195,6 +205,8 @@ const Timeline = (props: TimelineProps) => {
         date={date}
         format24h={format24h}
         styles={styles.current}
+        unavailableHours={unavailableHours}
+        unavailableHoursColor={unavailableHoursColor}
         onBackgroundLongPress={onBackgroundLongPress}
         onBackgroundLongPressOut={onBackgroundLongPressOut}
       />

src/timeline/TimelineHours.tsx

@@ -1,12 +1,10 @@
 import React, {useCallback, useMemo, useRef} from 'react';
 import {View, Text, TouchableWithoutFeedback, ViewStyle, TextStyle, StyleSheet} from 'react-native';
 import range from 'lodash/range';
-import {HOUR_BLOCK_HEIGHT} from './Packer';
+import {buildUnavailableHoursBlocks, HOUR_BLOCK_HEIGHT, UnavailableHours} from './Packer';
 import {buildTimeString, calcTimeByPosition} from './helpers/presenter';
 import constants from '../commons/constants';
 
-const dimensionWidth = constants.screenWidth;
-
 interface NewEventTime {
   hour: number;
   minutes: number;
@@ -20,16 +18,31 @@ export interface TimelineHoursProps {
   format24h?: boolean;
   onBackgroundLongPress?: (timeString: string, time: NewEventTime) => void;
   onBackgroundLongPressOut?: (timeString: string, time: NewEventTime) => void;
+  unavailableHours?: UnavailableHours[];
+  unavailableHoursColor?: string;
   styles: {[key: string]: ViewStyle | TextStyle};
 }
 
+const dimensionWidth = constants.screenWidth;
+const EVENT_DIFF = 20;
+
 const TimelineHours = (props: TimelineHoursProps) => {
-  const {format24h, start = 0, end = 24, date, styles, onBackgroundLongPress, onBackgroundLongPressOut} = props;
+  const {
+    format24h,
+    start = 0,
+    end = 24,
+    date,
+    unavailableHours,
+    unavailableHoursColor,
+    styles,
+    onBackgroundLongPress,
+    onBackgroundLongPressOut
+  } = props;
 
   const lastLongPressEventTime = useRef<NewEventTime>();
   // const offset = this.calendarHeight / (end - start);
   const offset = HOUR_BLOCK_HEIGHT;
-  const EVENT_DIFF = 20;
+  const unavailableHoursBlocks = buildUnavailableHoursBlocks(unavailableHours, {dayStart: start, dayEnd: end});
 
   const hours = useMemo(() => {
     return range(start, end + 1).map(i => {
@@ -77,6 +90,16 @@ const TimelineHours = (props: TimelineHoursProps) => {
       <TouchableWithoutFeedback onLongPress={handleBackgroundPress} onPressOut={handlePressOut}>
         <View style={StyleSheet.absoluteFillObject} />
       </TouchableWithoutFeedback>
+      {unavailableHoursBlocks.map(block => (
+        <View
+          style={[
+            styles.unavailableHoursBlock,
+            block,
+            unavailableHoursColor ? {backgroundColor: unavailableHoursColor} : undefined
+          ]}
+        ></View>
+      ))}
+
       {hours.map(({timeText, time}, index) => {
         return (
           <React.Fragment key={time}>
@@ -98,7 +121,7 @@ const TimelineHours = (props: TimelineHoursProps) => {
           </React.Fragment>
         );
       })}
-      <View style={styles.verticalLine}/>
+      <View style={styles.verticalLine} />
     </>
   );
 };

src/timeline/__tests__/Packer.spec.js

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import uut from '../Packer';
+import * as uut from '../Packer';
 
 describe('Timeline Packer utils', () => {
   const events = [
@@ -23,29 +23,34 @@ describe('Timeline Packer utils', () => {
     }
   ];
   it('should sort events by start and end times', () => {
-    const packedEvents = uut(events, {screenWidth: 300, dayStart: 0});
+    const packedEvents = uut.populateEvents(events, {screenWidth: 300, dayStart: 0});
     expect(packedEvents[0].id).toBe('event_1');
     expect(packedEvents[1].id).toBe('event_3');
     expect(packedEvents[2].id).toBe('event_2');
   });
 
   describe('should set events block size', () => {
     it('should set event block height based on their duration', () => {
-      const packedEvents = uut(events, {screenWidth: 300, dayStart: 0});
+      const packedEvents = uut.populateEvents(events, {screenWidth: 300, dayStart: 0});
       expect(packedEvents[0].height).toBe(100); // event 1
       expect(packedEvents[1].height).toBeCloseTo(108.333); // event 3
       expect(packedEvents[2].height).toBe(50); // event 2
     });
 
     it('should set event block width based on overlaps of 3 events', () => {
-      const packedEvents = uut(events, {screenWidth: 310, dayStart: 0, rightEdgeSpacing: 10, overlapEventsSpacing: 10});
+      const packedEvents = uut.populateEvents(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]], {
+      const packedEvents = uut.populateEvents([events[0], events[1]], {
         screenWidth: 300,
         dayStart: 0,
         overlapEventsSpacing: 10,
@@ -56,7 +61,7 @@ describe('Timeline Packer utils', () => {
     });
 
     it('should set event block width when there is not overlaps', () => {
-      const packedEvents = uut([events[0]], {screenWidth: 300, dayStart: 0});
+      const packedEvents = uut.populateEvents([events[0]], {screenWidth: 300, dayStart: 0});
       expect(packedEvents[0].width).toBe(290); // event 1
     });
 
@@ -87,7 +92,11 @@ describe('Timeline Packer utils', () => {
           end: `2017-09-06 05:30:00`
         }
       ];
-      let packedEvents = uut(overlappingEvents, {screenWidth: 310, dayStart: 0, overlapEventsSpacing: 4});
+      let packedEvents = uut.populateEvents(overlappingEvents, {
+        screenWidth: 310,
+        dayStart: 0,
+        overlapEventsSpacing: 4
+      });
       packedEvents = _.sortBy(packedEvents, 'index');
       expect(packedEvents[0].width).toBe(96);
       expect(packedEvents[1].width).toBe(96);
@@ -100,21 +109,26 @@ describe('Timeline Packer utils', () => {
 
   describe('should set events block position', () => {
     it('should set top position base on the event start time', () => {
-      const packedEvents = uut(events, {screenWidth: 300, dayStart: 0});
+      const packedEvents = uut.populateEvents(events, {screenWidth: 300, dayStart: 0});
       expect(packedEvents[0].top).toBe(150); // event 1
       expect(packedEvents[1].top).toBeCloseTo(191.666); // event 3
       expect(packedEvents[2].top).toBe(225); // event 2
     });
 
     it('should set left position base when the 3 events overlap', () => {
-      const packedEvents = uut(events, {screenWidth: 300, dayStart: 0, overlapEventsSpacing: 10, rightEdgeSpacing: 10});
+      const packedEvents = uut.populateEvents(events, {
+        screenWidth: 300,
+        dayStart: 0,
+        overlapEventsSpacing: 10,
+        rightEdgeSpacing: 10
+      });
       expect(packedEvents[0].left).toBe(0); // event 1
       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]], {
+      const packedEvents = uut.populateEvents([events[0], events[1]], {
         screenWidth: 300,
         dayStart: 0,
         overlapEventsSpacing: 10,
@@ -124,4 +138,54 @@ describe('Timeline Packer utils', () => {
       expect(packedEvents[1].left).toBe(145); // event 3
     });
   });
+
+  describe('buildUnavailableHoursBlocks', () => {
+    it('should build unavailable blocks with default options', () => {
+      const blocks = uut.buildUnavailableHoursBlocks([
+        {start: 0, end: 9},
+        {start: 19, end: 24}
+      ]);
+      expect(blocks[0]).toEqual({
+        top: 0,
+        height: 900
+      });
+      expect(blocks[1]).toEqual({
+        top: 1900,
+        height: 500
+      });
+    });
+
+    it('should not return blocks for invalid hours', () => {
+      const blocks = uut.buildUnavailableHoursBlocks([
+        {start: -2, end: 7},
+        {start: 3, end: 7},
+        {start: 22, end: 25}
+      ]);
+
+      expect(blocks.length).toBe(1);
+      expect(blocks[0]).toEqual({
+        top: 300,
+        height: 400
+      });
+    });
+
+    it('should handle different start/end day hours', () => {
+      const blocks = uut.buildUnavailableHoursBlocks(
+        [
+          {start: 0, end: 9},
+          {start: 19, end: 24}
+        ],
+        {dayStart: 8, dayEnd: 20}
+      );
+
+      expect(blocks[0]).toEqual({
+        top: 0,
+        height: 100
+      });
+      expect(blocks[1]).toEqual({
+        top: 1100,
+        height: 100
+      });
+    });
+  });
 });