Merge pull request #1731 from wix/feat/TimelineEventCreation

Support timeline background press for creating new events

Author: lidord-wix

example/src/screens/timelineCalendar.tsx

@@ -1,10 +1,9 @@
 import XDate from 'xdate';
 import React, {Component} from 'react';
-// @ts-expect-error
-import {ExpandableCalendar, Timeline, CalendarProvider} from 'react-native-calendars';
+import {Alert} from 'react-native';
+import {ExpandableCalendar, Timeline, CalendarProvider, TimelineProps} from 'react-native-calendars';
 import {sameDate} from '../../../src/dateutils';
 
-
 const EVENTS = [
   {
     start: '2017-09-06 01:30:00',
@@ -81,7 +80,9 @@ const EVENTS = [
 
 export default class TimelineCalendarScreen extends Component {
   state = {
-    currentDate: '2017-09-10'
+    currentDate: '2017-09-10',
+    events: EVENTS,
+    newEvent: undefined
   };
 
   marked = {
@@ -91,7 +92,7 @@ export default class TimelineCalendarScreen extends Component {
     '2017-09-10': {marked: true}
   };
 
-  onDateChanged = date => {
+  onDateChanged = (date: string) => {
     // console.warn('TimelineCalendarScreen onDateChanged: ', date, updateSource);
     // fetch and set data for date + week ahead
     this.setState({currentDate: date});
@@ -101,7 +102,47 @@ export default class TimelineCalendarScreen extends Component {
     // console.warn('TimelineCalendarScreen onMonthChange: ', month, updateSource);
   };
 
+  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`,
+      title: 'New Event',
+      color: '#ffffff'
+    };
+
+    this.setState({newEvent});
+  };
+
+  approveNewEvent = () => {
+    Alert.prompt('New Event', 'Enter event title', [
+      {
+        text: 'Cancel',
+        onPress: () => {
+          this.setState({
+            newEvent: undefined
+          });
+        }
+      },
+      {
+        text: 'Create',
+        onPress: eventTitle => {
+          const {newEvent = {}, events} = this.state;
+          this.setState({
+            newEvent: undefined,
+            events: [...events, {...newEvent, title: eventTitle ?? 'New Event', color: '#d8ade6'}]
+          });
+        }
+      }
+    ]);
+  };
+
   render() {
+    const {events, newEvent} = this.state;
+    const timelineEvents = newEvent ? [...events, newEvent] : events;
     return (
       <CalendarProvider
         date={this.state.currentDate}
@@ -119,8 +160,10 @@ export default class TimelineCalendarScreen extends Component {
         <Timeline
           format24h={true}
           eventTapped={e => e}
-          events={EVENTS.filter(event => sameDate(new XDate(event.start), new XDate(this.state.currentDate)))}
+          events={timelineEvents.filter(event => sameDate(new XDate(event.start), new XDate(this.state.currentDate)))}
           scrollToFirst
+          onBackgroundLongPress={this.createNewEvent}
+          onBackgroundLongPressOut={this.approveNewEvent}
           // start={0}
           // end={24}
         />

src/timeline/Timeline.tsx

@@ -6,22 +6,49 @@ import map from 'lodash/map';
 import {Theme} from '../types';
 import styleConstructor from './style';
 import populateEvents, {HOUR_BLOCK_HEIGHT} from './Packer';
-import TimelineHours from './TimelineHours';
+import TimelineHours, {TimelineHoursProps} from './TimelineHours';
 import EventBlock, {Event, PackedEvent} from './EventBlock';
 
 const LEFT_MARGIN = 60 - 1;
 const {width: dimensionWidth} = Dimensions.get('window');
 
 export interface TimelineProps {
   events: Event[];
+  /**
+   * The timeline day start time
+   */
   start?: number;
+  /**
+   * The timeline day end time
+   */
   end?: number;
-  eventTapped?: (event: Event) => void; //TODO: deprecate (prop renamed 'onEventPress', as in the other components).
+  /**
+   * @deprecated
+   * Use onEventPress instead
+   */
+  eventTapped?: (event: Event) => void;
+  /**
+   * Handle event press
+   */
   onEventPress?: (event: Event) => void;
+  /**
+   * Pass to handle creation of a new event by long press on the timeline background
+   */
+  onBackgroundLongPress?: TimelineHoursProps['onBackgroundLongPress'];
+  /**
+   * Pass to handle creation of a new event by long press out on the timeline background
+   */
+  onBackgroundLongPressOut?: TimelineHoursProps['onBackgroundLongPressOut'];
   styles?: Theme; //TODO: deprecate (prop renamed 'theme', as in the other components).
   theme?: Theme;
   scrollToFirst?: boolean;
+  /**
+   * Whether to use 24 hours format for the timeline hours
+   */
   format24h?: boolean;
+  /**
+   * Render a custom event block
+   */
   renderEvent?: (event: PackedEvent) => JSX.Element;
 }
 
@@ -32,6 +59,8 @@ const Timeline = (props: TimelineProps) => {
     end = 24,
     events = [],
     onEventPress,
+    onBackgroundLongPress,
+    onBackgroundLongPressOut,
     renderEvent,
     theme,
     scrollToFirst,
@@ -102,7 +131,14 @@ const Timeline = (props: TimelineProps) => {
   return (
     // @ts-expect-error
     <ScrollView ref={scrollView} contentContainerStyle={[styles.current.contentStyle, {width: dimensionWidth}]}>
-      <TimelineHours start={start} end={end} format24h={format24h} styles={styles.current} />
+      <TimelineHours
+        start={start}
+        end={end}
+        format24h={format24h}
+        styles={styles.current}
+        onBackgroundLongPress={onBackgroundLongPress}
+        onBackgroundLongPressOut={onBackgroundLongPressOut}
+      />
       {renderEvents()}
     </ScrollView>
   );

src/timeline/TimelineHours.tsx

@@ -1,19 +1,29 @@
-import React, {useMemo} from 'react';
-import {View, Text, ViewStyle, TextStyle, Dimensions} from 'react-native';
+import React, {useCallback, useMemo, useRef} from 'react';
+import {View, Text, TouchableWithoutFeedback, ViewStyle, TextStyle, Dimensions, StyleSheet} from 'react-native';
 import range from 'lodash/range';
 import {HOUR_BLOCK_HEIGHT} from './Packer';
+import {buildTimeString, calcTimeByPosition} from './helpers/presenter';
 
 const {width: dimensionWidth} = Dimensions.get('window');
 
-interface TimelineHoursProps {
+interface NewEventTime {
+  hour: number;
+  minutes: number;
+}
+
+export interface TimelineHoursProps {
   start?: number;
   end?: number;
   format24h?: boolean;
+  onBackgroundLongPress?: (timeString: string, time: {hour: number; minutes: number}) => void;
+  onBackgroundLongPressOut?: (timeString: string, time: {hour: number; minutes: number}) => void;
   styles: {[key: string]: ViewStyle | TextStyle};
 }
 
 const TimelineHours = (props: TimelineHoursProps) => {
-  const {format24h, start = 0, end = 24, styles} = props;
+  const {format24h, start = 0, end = 24, styles, onBackgroundLongPress, onBackgroundLongPressOut} = props;
+
+  const lastLongPressEventTime = useRef<NewEventTime>();
   // const offset = this.calendarHeight / (end - start);
   const offset = HOUR_BLOCK_HEIGHT;
   const EVENT_DIFF = 20;
@@ -37,8 +47,33 @@ const TimelineHours = (props: TimelineHoursProps) => {
     });
   }, [start, end, format24h]);
 
+  const handleBackgroundPress = useCallback(
+    event => {
+      const yPosition = event.nativeEvent.locationY;
+      const {hour, minutes} = calcTimeByPosition(yPosition, HOUR_BLOCK_HEIGHT);
+
+      lastLongPressEventTime.current = {hour, minutes};
+
+      const timeString = buildTimeString(hour, minutes);
+      onBackgroundLongPress?.(timeString, lastLongPressEventTime.current);
+    },
+    [onBackgroundLongPress]
+  );
+
+  const handlePressOut = useCallback(() => {
+    if (lastLongPressEventTime.current) {
+      const {hour, minutes} = lastLongPressEventTime.current;
+      const timeString = buildTimeString(hour, minutes);
+      onBackgroundLongPressOut?.(timeString, lastLongPressEventTime.current);
+      lastLongPressEventTime.current = undefined;
+    }
+  }, [onBackgroundLongPressOut]);
+
   return (
     <>
+      <TouchableWithoutFeedback onLongPress={handleBackgroundPress} onPressOut={handlePressOut}>
+        <View style={StyleSheet.absoluteFillObject} />
+      </TouchableWithoutFeedback>
       {hours.map(({timeText, time}, index) => {
         return (
           <React.Fragment key={time}>

src/timeline/__tests__/presenter.spec.js

@@ -0,0 +1,66 @@
+import * as uut from '../helpers/presenter';
+
+describe('timeline presenter', () => {
+  describe('calcTimeByPosition', () => {
+    it('should return hour/minutes by position - basic case 1', () => {
+      const {hour, minutes} = uut.calcTimeByPosition(300, 100);
+      expect(hour).toBe(3);
+      expect(minutes).toBe(0);
+    });
+
+    it('should return hour/minutes by position - basic case 2', () => {
+      const {hour, minutes} = uut.calcTimeByPosition(350, 100);
+      expect(hour).toBe(3);
+      expect(minutes).toBe(30);
+    });
+
+    it('should round down time to nearest 30 minutes block', () => {
+      const time1 = uut.calcTimeByPosition(310, 100);
+      expect(time1.hour).toBe(3);
+      expect(time1.minutes).toBe(0);
+
+      const time2 = uut.calcTimeByPosition(280, 100);
+      expect(time2.hour).toBe(2);
+      expect(time2.minutes).toBe(30);
+
+      const time3 = uut.calcTimeByPosition(440, 100);
+      expect(time3.hour).toBe(4);
+      expect(time3.minutes).toBe(0);
+
+      const time4 = uut.calcTimeByPosition(1488, 100);
+      expect(time4.hour).toBe(14);
+      expect(time4.minutes).toBe(30);
+    });
+
+    it('should handle different hour block heights', () => {
+      const time1 = uut.calcTimeByPosition(350, 85);
+      expect(time1.hour).toBe(4);
+      expect(time1.minutes).toBe(0);
+
+      const time2 = uut.calcTimeByPosition(350, 145);
+      expect(time2.hour).toBe(2);
+      expect(time2.minutes).toBe(0);
+
+      const time3 = uut.calcTimeByPosition(350, 135);
+      expect(time3.hour).toBe(2);
+      expect(time3.minutes).toBe(30);
+    });
+  });
+
+  describe('buildTimeString', () => {
+    it('should construct time string based on given hour/mins', () => {
+      expect(uut.buildTimeString(3, 12)).toBe('03:12:00');
+      expect(uut.buildTimeString(23, 55)).toBe('23:55:00');
+    });
+
+    it('should padding hour/minutes with zeroes', () => {
+      expect(uut.buildTimeString(3, 0)).toBe('03:00:00');
+      expect(uut.buildTimeString(9, 5)).toBe('09:05:00');
+    });
+
+    it('should default undefined hour/min to zeroes', () => {
+      expect(uut.buildTimeString(undefined, 30)).toBe('00:30:00');
+      expect(uut.buildTimeString(9, undefined)).toBe('09:00:00');
+    });
+  });
+});

src/timeline/helpers/presenter.ts

@@ -0,0 +1,12 @@
+export function calcTimeByPosition(yPosition: number, hourBlockHeight: number) {
+  let time = yPosition / hourBlockHeight;
+  time = Math.floor(time * 2) / 2;
+
+  const hour = Math.floor(time);
+  const minutes = (time - Math.floor(time)) * 60;
+  return {hour, minutes};
+}
+
+export function buildTimeString(hour = 0, minutes = 0) {
+  return `${hour.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`;
+}

tsconfig.json

@@ -19,10 +19,16 @@
     "declaration": true,
     "baseUrl": ".",
     "paths": {
-      "react-native-calendars": ["src/index.ts"],
+      "react-native-calendars": ["src/index.ts"]
     }
   },
   // "include": ["src/calendar/day/basic", "src/global.d.ts"],
-  "include": ["src/**/*", "example/src/screens/calendars.tsx", "example/src/screens/expandableCalendar.tsx", "example/src/screens/agenda.tsx"],
+  "include": [
+    "src/**/*",
+    "example/src/screens/calendars.tsx",
+    "example/src/screens/expandableCalendar.tsx",
+    "example/src/screens/agenda.tsx",
+    "example/src/screens/timelineCalendar.tsx"
+  ],
   "exclude": ["node_modules", "testUtils"]
 }