Merge pull request #1756 from wix/feat/TimelineScrollToNow

Support initial scroll to current time

Author: ethanshar

example/src/screens/timelineCalendar.tsx

@@ -10,94 +10,105 @@ import {
 } from 'react-native-calendars';
 import _ from 'lodash';
 
+const INITIAL_TIME = {hour: 9, minutes: 0};
+const today = new Date();
+const getDate = (offset = 0) => CalendarUtils.getCalendarDateString(new Date().setDate(today.getDate() + offset));
+
 const EVENTS: TimelineEventProps[] = [
   {
-    start: '2017-09-06 01:30:00',
-    end: '2017-09-06 02:30:00',
+    start: `${getDate(-1)} 09:20:00`,
+    end: `${getDate(-1)} 12:00:00`,
+    title: 'Merge Request to React Native Calendars',
+    summary: 'Merge Timeline Calendar to React Native Calendars'
+  },
+  {
+    start: `${getDate()} 01:30:00`,
+    end: `${getDate()} 02:30:00`,
     title: 'Dr. Mariana Joseph',
     summary: '3412 Piedmont Rd NE, GA 3032',
     color: '#e6add8'
   },
   {
-    start: '2017-09-07 00:30:00',
-    end: '2017-09-07 01:30:00',
+    start: `${getDate(1)} 00:30:00`,
+    end: `${getDate(1)} 01:30:00`,
     title: 'Visit Grand Mother',
     summary: 'Visit Grand Mother and bring some fruits.',
     color: '#ade6d8'
   },
   {
-    start: '2017-09-07 02:30:00',
-    end: '2017-09-07 03:20:00',
+    start: `${getDate(1)} 02:30:00`,
+    end: `${getDate(1)} 03:20:00`,
     title: 'Meeting with Prof. Behjet Zuhaira',
     summary: 'Meeting with Prof. Behjet at 130 in her office.',
     color: '#e6add8'
   },
   {
-    start: '2017-09-07 04:10:00',
-    end: '2017-09-07 04:40:00',
+    start: `${getDate(1)} 04:10:00`,
+    end: `${getDate(1)} 04:40:00`,
     title: 'Tea Time with Dr. Hasan',
     summary: 'Tea Time with Dr. Hasan, Talk about Project'
   },
   {
-    start: '2017-09-07 01:05:00',
-    end: '2017-09-07 01:35:00',
+    start: `${getDate(1)} 01:05:00`,
+    end: `${getDate(1)} 01:35:00`,
     title: 'Dr. Mariana Joseph',
     summary: '3412 Piedmont Rd NE, GA 3032'
   },
   {
-    start: '2017-09-07 14:30:00',
-    end: '2017-09-07 16:30:00',
+    start: `${getDate(1)} 14:30:00`,
+    end: `${getDate(1)} 16:30:00`,
     title: 'Meeting Some Friends in ARMED',
     summary: 'Arsalan, Hasnaat, Talha, Waleed, Bilal',
     color: '#d8ade6'
   },
   {
-    start: '2017-09-08 01:40:00',
-    end: '2017-09-08 02:25:00',
+    start: `${getDate(2)} 01:40:00`,
+    end: `${getDate(2)} 02:25:00`,
     title: 'Meet Sir Khurram Iqbal',
     summary: 'Computer Science Dept. Comsats Islamabad',
     color: '#e6bcad'
   },
   {
-    start: '2017-09-08 04:10:00',
-    end: '2017-09-08 04:40:00',
+    start: `${getDate(2)} 04:10:00`,
+    end: `${getDate(2)} 04:40:00`,
     title: 'Tea Time with Colleagues',
     summary: 'WeRplay'
   },
   {
-    start: '2017-09-08 00:45:00',
-    end: '2017-09-08 01:45:00',
+    start: `${getDate(2)} 00:45:00`,
+    end: `${getDate(2)} 01:45:00`,
     title: 'Lets Play Apex Legends',
     summary: 'with Boys at Work'
   },
   {
-    start: '2017-09-08 11:30:00',
-    end: '2017-09-08 12:30:00',
+    start: `${getDate(2)} 11:30:00`,
+    end: `${getDate(2)} 12:30:00`,
     title: 'Dr. Mariana Joseph',
     summary: '3412 Piedmont Rd NE, GA 3032'
   },
   {
-    start: '2017-09-10 12:10:00',
-    end: '2017-09-10 13:45:00',
+    start: `${getDate(4)} 12:10:00`,
+    end: `${getDate(4)} 13:45:00`,
     title: 'Merge Request to React Native Calendars',
     summary: 'Merge Timeline Calendar to React Native Calendars'
   }
 ];
 
 export default class TimelineCalendarScreen extends Component {
   state = {
-    currentDate: '2017-09-10',
+    currentDate: getDate(),
     events: EVENTS,
     eventsByDate: _.groupBy(EVENTS, e => CalendarUtils.getCalendarDateString(e.start)) as {
       [key: string]: TimelineEventProps[];
     }
   };
 
   marked = {
-    '2017-09-06': {marked: true},
-    '2017-09-07': {marked: true},
-    '2017-09-08': {marked: true},
-    '2017-09-10': {marked: true}
+    [`${getDate(-1)}`]: {marked: true},
+    [`${getDate()}`]: {marked: true},
+    [`${getDate(1)}`]: {marked: true},
+    [`${getDate(2)}`]: {marked: true},
+    [`${getDate(4)}`]: {marked: true}
   };
 
   onDateChanged = (date: string) => {
@@ -197,7 +208,14 @@ export default class TimelineCalendarScreen extends Component {
           rightArrowImageSource={require('../img/next.png')}
           markedDates={this.marked}
         />
-        <TimelineList events={eventsByDate} timelineProps={this.timelineProps} showNowIndicator />
+        <TimelineList
+          events={eventsByDate}
+          timelineProps={this.timelineProps}
+          showNowIndicator
+          scrollToNow
+          scrollToFirst
+          initialTime={INITIAL_TIME}
+        />
       </CalendarProvider>
     );
   }

src/timeline-list/index.tsx

@@ -11,13 +11,34 @@ import InfiniteList from '../infinite-list';
 import useTimelinePages, {INITIAL_PAGE, NEAR_EDGE_THRESHOLD} from './useTimelinePages';
 
 export interface TimelineListProps {
+  /**
+   * Map of all timeline events ({[date]: events})
+   */
   events: {[date: string]: TimelineProps['events']};
-  timelineProps?: Omit<TimelineProps, 'events' | 'showNowIndicator'>;
+  /**
+   * General timeline props to pass to each timeline item
+   */
+  timelineProps?: Omit<TimelineProps, 'events' | 'scrollToFirst' | 'showNowIndicator' | 'scrollToNow' | 'initialTime'>;
+  /**
+   * Should scroll to first event of the day
+   */
+  scrollToFirst?: boolean;
+  /**
+   * Should show now indicator (shown only on "today" timeline)
+   */
   showNowIndicator?: boolean;
+  /**
+   * Should initially scroll to current time (relevant only for "today" timeline)
+   */
+  scrollToNow?: boolean;
+  /**
+   * Should initially scroll to a specific time (relevant only for NOT "today" timelines)
+   */
+  initialTime?: TimelineProps['initialTime'];
 }
 
 const TimelineList = (props: TimelineListProps) => {
-  const {timelineProps, events, showNowIndicator} = props;
+  const {timelineProps, events, showNowIndicator, scrollToFirst, scrollToNow, initialTime} = props;
   const {date, updateSource, setDate} = useContext(Context);
   const listRef = useRef<any>();
   const prevDate = useRef(date);
@@ -73,20 +94,25 @@ const TimelineList = (props: TimelineListProps) => {
   }, []);
 
   const renderPage = useCallback(
-    (_type, item) => {
+    (_type, item, index) => {
       const timelineEvent = events[item];
       const isCurrent = prevDate.current === item;
+      const isInitialPage = index === INITIAL_PAGE;
+      const _isToday = isToday(new XDate(item));
+
       return (
         <>
           <Timeline
             {...timelineProps}
             key={item}
             date={item}
-            scrollToFirst={false}
             events={timelineEvent}
+            scrollToNow={_isToday && isInitialPage && scrollToNow}
+            initialTime={!_isToday && isInitialPage ? initialTime : undefined}
+            scrollToFirst={!_isToday && isInitialPage && scrollToFirst}
             scrollOffset={isCurrent ? undefined : timelineOffset}
             onChangeOffset={onTimelineOffsetChange}
-            showNowIndicator={showNowIndicator && isToday(new XDate(item))}
+            showNowIndicator={_isToday && showNowIndicator}
           />
           {/* NOTE: Keeping this for easy debugging */}
           {/* <Text style={{position: 'absolute'}}>{item}</Text> */}

src/timeline/NowIndicator.tsx

@@ -1,20 +1,16 @@
 import React from 'react';
 import {View, TextStyle, ViewStyle} from 'react-native';
 import {HOUR_BLOCK_HEIGHT} from './Packer';
-
-export {HOUR_BLOCK_HEIGHT} from './Packer';
+import {calcTimeOffset} from './helpers/presenter';
 
 export interface NowIndicatorProps {
   styles: {[key: string]: ViewStyle | TextStyle};
 }
 
 const NowIndicator = (props: NowIndicatorProps) => {
   const {styles} = props;
-  const now = new Date();
-  const hour = now.getHours();
-  const minutes = now.getMinutes();
 
-  const indicatorPosition = (hour + minutes / 60) * HOUR_BLOCK_HEIGHT;
+  const indicatorPosition = calcTimeOffset(HOUR_BLOCK_HEIGHT);
 
   return (
     <View style={[styles.nowIndicator, {top: indicatorPosition}]}>

src/timeline/Timeline.tsx

@@ -1,18 +1,18 @@
 import React, {useCallback, useEffect, useMemo, useRef} from 'react';
-import {View, Dimensions, ScrollView} from 'react-native';
+import {View, ScrollView} from 'react-native';
 import min from 'lodash/min';
 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 {calcTimeOffset} from './helpers/presenter';
 import TimelineHours, {TimelineHoursProps} from './TimelineHours';
 import EventBlock, {Event, PackedEvent} from './EventBlock';
 import NowIndicator from './NowIndicator';
 import useTimelineOffset from './useTimelineOffset';
 
-const {width: dimensionWidth} = Dimensions.get('window');
-
 export interface TimelineProps {
   /**
    * The date of this timeline instance in ISO format (e.g. 2011-10-25)
@@ -51,7 +51,18 @@ export interface TimelineProps {
   onBackgroundLongPressOut?: TimelineHoursProps['onBackgroundLongPressOut'];
   styles?: Theme; //TODO: deprecate (prop renamed 'theme', as in the other components).
   theme?: Theme;
+  /**
+   * Should scroll to first event when loaded
+   */
   scrollToFirst?: boolean;
+  /**
+   * Should scroll to current time when loaded
+   */
+  scrollToNow?: boolean;
+  /**
+   * Initial time to scroll to
+   */
+  initialTime?: {hour: number; minutes: number};
   /**
    * Whether to use 24 hours format for the timeline hours
    */
@@ -87,6 +98,8 @@ const Timeline = (props: TimelineProps) => {
     renderEvent,
     theme,
     scrollToFirst,
+    scrollToNow,
+    initialTime,
     showNowIndicator,
     scrollOffset,
     onChangeOffset,
@@ -100,24 +113,27 @@ const Timeline = (props: TimelineProps) => {
   const {scrollEvents} = useTimelineOffset({onChangeOffset, scrollOffset, scrollViewRef: scrollView});
 
   const packedEvents = useMemo(() => {
-    const width = dimensionWidth - HOURS_SIDEBAR_WIDTH;
+    const width = constants.screenWidth - HOURS_SIDEBAR_WIDTH;
     return populateEvents(events, width, start);
   }, [events, start]);
 
   useEffect(() => {
-    if (scrollToFirst) {
-      const firstTop = min(map(packedEvents, 'top')) ?? 0;
-      const initPosition = firstTop - calendarHeight.current / (end - start);
-      const verifiedInitPosition = initPosition < 0 ? 0 : initPosition;
+    let initialPosition = 0;
+    if (scrollToNow) {
+      initialPosition = calcTimeOffset(HOUR_BLOCK_HEIGHT);
+    } else if (scrollToFirst && packedEvents.length > 0) {
+      initialPosition = min(map(packedEvents, 'top')) ?? 0;
+    } else if (initialTime) {
+      initialPosition = calcTimeOffset(HOUR_BLOCK_HEIGHT, initialTime.hour, initialTime.minutes);
+    }
 
-      if (verifiedInitPosition) {
-        setTimeout(() => {
-          scrollView?.current?.scrollTo({
-            y: verifiedInitPosition,
-            animated: true
-          });
-        }, 0);
-      }
+    if (initialPosition) {
+      setTimeout(() => {
+        scrollView?.current?.scrollTo({
+          y: Math.max(0, initialPosition - HOUR_BLOCK_HEIGHT),
+          animated: true
+        });
+      }, 0);
     }
   }, []);
 
@@ -160,7 +176,7 @@ const Timeline = (props: TimelineProps) => {
     <ScrollView
       // @ts-expect-error
       ref={scrollView}
-      contentContainerStyle={[styles.current.contentStyle, {width: dimensionWidth}]}
+      contentContainerStyle={[styles.current.contentStyle, {width: constants.screenWidth}]}
       {...scrollEvents}
     >
       <TimelineHours

src/timeline/__tests__/presenter.spec.js

@@ -68,4 +68,20 @@ describe('timeline presenter', () => {
       expect(uut.buildTimeString(15, 0, '2017-03-05')).toBe('2017-03-05 15:00:00');
     });
   });
+
+  describe('calcTimeOffset', () => {
+    // NOTE: useFakeTimers API works only in jest 27, unfortunately, other tests fail in jest 27
+    it.skip('should give offset based on current time', () => {
+      jest.useFakeTimers().setSystemTime(new Date('2020-01-01 15:30').getTime());
+      expect(uut.calcTimeOffset(100)).toBe(1550);
+
+      jest.useFakeTimers().setSystemTime(new Date('2020-01-01 12:10').getTime());
+      expect(uut.calcTimeOffset(100)).toBeCloseTo(1216.66, 1);
+    });
+
+    it('should give offset based on given time', () => {
+      expect(uut.calcTimeOffset(100, 15, 30)).toBe(1550);
+      expect(uut.calcTimeOffset(100, 12, 10)).toBeCloseTo(1216.66, 1);
+    });
+  });
 });

src/timeline/helpers/presenter.ts

@@ -10,3 +10,10 @@ export function calcTimeByPosition(yPosition: number, hourBlockHeight: number) {
 export function buildTimeString(hour = 0, minutes = 0, date = '') {
   return `${date} ${hour.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`.trimStart();
 }
+
+export function calcTimeOffset(hourBlockHeight: number, hour?: number, minutes?: number) {
+  const now = new Date();
+  const h = hour ?? now.getHours();
+  const m = minutes ?? now.getMinutes();
+  return (h + m / 60) * hourBlockHeight;
+}