Merge pull request #1740 from wix/feat/TimelineDateProp

Support passing date to Timeline

Author: Inbal-Tish

example/src/screens/timelineCalendar.tsx

@@ -103,13 +103,12 @@ export default class TimelineCalendarScreen extends Component {
   };
 
   createNewEvent: TimelineProps['onBackgroundLongPress'] = (timeString, timeObject) => {
-    const {currentDate} = this.state;
     const hourString = `${(timeObject.hour + 1).toString().padStart(2, '0')}`;
     const minutesString = `${timeObject.minutes.toString().padStart(2, '0')}`;
 
     const newEvent = {
-      start: `${currentDate} ${timeString}`,
-      end: `${currentDate} ${hourString}:${minutesString}:00`,
+      start: `${timeString}`,
+      end: `${timeObject.date} ${hourString}:${minutesString}:00`,
       title: 'New Event',
       color: '#ffffff'
     };
@@ -141,11 +140,11 @@ export default class TimelineCalendarScreen extends Component {
   };
 
   render() {
-    const {events, newEvent} = this.state;
+    const {currentDate, events, newEvent} = this.state;
     const timelineEvents = newEvent ? [...events, newEvent] : events;
     return (
       <CalendarProvider
-        date={this.state.currentDate}
+        date={currentDate}
         onDateChanged={this.onDateChanged}
         onMonthChange={this.onMonthChange}
         showTodayButton
@@ -158,6 +157,7 @@ export default class TimelineCalendarScreen extends Component {
           markedDates={this.marked}
         />
         <Timeline
+          date={currentDate}
           format24h={true}
           eventTapped={e => e}
           events={timelineEvents.filter(event => sameDate(new XDate(event.start), new XDate(this.state.currentDate)))}

src/timeline/Timeline.tsx

@@ -13,6 +13,13 @@ import NowIndicator from './NowIndicator';
 const {width: dimensionWidth} = Dimensions.get('window');
 
 export interface TimelineProps {
+  /**
+   * The date of this timeline instance in ISO format (e.g. 2011-10-25)
+   */
+  date?: string;
+  /**
+   * List of events to display in this timeline
+   */
   events: Event[];
   /**
    * The timeline day start time
@@ -33,10 +40,12 @@ export interface TimelineProps {
   onEventPress?: (event: Event) => void;
   /**
    * Pass to handle creation of a new event by long press on the timeline background
+   * NOTE: If passed, the date prop will be included in the returned time string (e.g. 2017-09-06 01:30:00)
    */
   onBackgroundLongPress?: TimelineHoursProps['onBackgroundLongPress'];
   /**
    * Pass to handle creation of a new event by long press out on the timeline background
+   * NOTE: If passed, the date prop will be included in the returned time string (e.g. 2017-09-06 01:30:00)
    */
   onBackgroundLongPressOut?: TimelineHoursProps['onBackgroundLongPressOut'];
   styles?: Theme; //TODO: deprecate (prop renamed 'theme', as in the other components).
@@ -61,6 +70,7 @@ const Timeline = (props: TimelineProps) => {
     format24h = true,
     start = 0,
     end = 24,
+    date,
     events = [],
     onEventPress,
     onBackgroundLongPress,
@@ -139,6 +149,7 @@ const Timeline = (props: TimelineProps) => {
       <TimelineHours
         start={start}
         end={end}
+        date={date}
         format24h={format24h}
         styles={styles.current}
         onBackgroundLongPress={onBackgroundLongPress}

src/timeline/TimelineHours.tsx

@@ -9,19 +9,21 @@ const {width: dimensionWidth} = Dimensions.get('window');
 interface NewEventTime {
   hour: number;
   minutes: number;
+  date?: string;
 }
 
 export interface TimelineHoursProps {
   start?: number;
   end?: number;
+  date?: string;
   format24h?: boolean;
-  onBackgroundLongPress?: (timeString: string, time: {hour: number; minutes: number}) => void;
-  onBackgroundLongPressOut?: (timeString: string, time: {hour: number; minutes: number}) => void;
+  onBackgroundLongPress?: (timeString: string, time: NewEventTime) => void;
+  onBackgroundLongPressOut?: (timeString: string, time: NewEventTime) => void;
   styles: {[key: string]: ViewStyle | TextStyle};
 }
 
 const TimelineHours = (props: TimelineHoursProps) => {
-  const {format24h, start = 0, end = 24, styles, onBackgroundLongPress, onBackgroundLongPressOut} = props;
+  const {format24h, start = 0, end = 24, date, styles, onBackgroundLongPress, onBackgroundLongPressOut} = props;
 
   const lastLongPressEventTime = useRef<NewEventTime>();
   // const offset = this.calendarHeight / (end - start);
@@ -52,22 +54,22 @@ const TimelineHours = (props: TimelineHoursProps) => {
       const yPosition = event.nativeEvent.locationY;
       const {hour, minutes} = calcTimeByPosition(yPosition, HOUR_BLOCK_HEIGHT);
 
-      lastLongPressEventTime.current = {hour, minutes};
+      lastLongPressEventTime.current = {hour, minutes, date};
 
-      const timeString = buildTimeString(hour, minutes);
+      const timeString = buildTimeString(hour, minutes, date);
       onBackgroundLongPress?.(timeString, lastLongPressEventTime.current);
     },
-    [onBackgroundLongPress]
+    [onBackgroundLongPress, date]
   );
 
   const handlePressOut = useCallback(() => {
     if (lastLongPressEventTime.current) {
-      const {hour, minutes} = lastLongPressEventTime.current;
-      const timeString = buildTimeString(hour, minutes);
+      const {hour, minutes, date} = lastLongPressEventTime.current;
+      const timeString = buildTimeString(hour, minutes, date);
       onBackgroundLongPressOut?.(timeString, lastLongPressEventTime.current);
       lastLongPressEventTime.current = undefined;
     }
-  }, [onBackgroundLongPressOut]);
+  }, [onBackgroundLongPressOut, date]);
 
   return (
     <>

src/timeline/__tests__/presenter.spec.js

@@ -62,5 +62,10 @@ describe('timeline presenter', () => {
       expect(uut.buildTimeString(undefined, 30)).toBe('00:30:00');
       expect(uut.buildTimeString(9, undefined)).toBe('09:00:00');
     });
+
+    it('should concatenate date when passed', () => {
+      expect(uut.buildTimeString(10, 30, '2022-12-23')).toBe('2022-12-23 10:30:00');
+      expect(uut.buildTimeString(15, 0, '2017-03-05')).toBe('2017-03-05 15:00:00');
+    });
   });
 });

src/timeline/helpers/presenter.ts

@@ -7,6 +7,6 @@ export function calcTimeByPosition(yPosition: number, hourBlockHeight: number) {
   return {hour, minutes};
 }
 
-export function buildTimeString(hour = 0, minutes = 0) {
-  return `${hour.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`;
+export function buildTimeString(hour = 0, minutes = 0, date = '') {
+  return `${date} ${hour.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`.trimStart();
 }