Support timeline background press for creating new events

Author: ethanshar

example/src/screens/timelineCalendar.tsx

@@ -1,10 +1,8 @@
 import XDate from 'xdate';
 import React, {Component} from 'react';
-// @ts-expect-error
-import {ExpandableCalendar, Timeline, CalendarProvider} from 'react-native-calendars';
+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 +79,8 @@ const EVENTS = [
 
 export default class TimelineCalendarScreen extends Component {
   state = {
-    currentDate: '2017-09-10'
+    currentDate: '2017-09-10',
+    newEvents: []
   };
 
   marked = {
@@ -91,7 +90,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 +100,24 @@ export default class TimelineCalendarScreen extends Component {
     // console.warn('TimelineCalendarScreen onMonthChange: ', month, updateSource);
   };
 
+  createNewEvent: TimelineProps['onEventCreate'] = (timeString, timeObject) => {
+    const {currentDate, newEvents} = this.state;
+
+    const newEvent = {
+      start: `${currentDate} ${timeString}`,
+      end: `${currentDate} ${(timeObject.hour + 1).toString().padStart(2, '0')}:${timeObject.minutes
+        .toString()
+        .padStart(2, '0')}:00`,
+      title: 'New Event',
+      color: '#ffffff'
+    };
+
+    this.setState({newEvents: [...newEvents, newEvent]});
+  };
+
   render() {
+    const {newEvents} = this.state;
+    const events = [...EVENTS, ...newEvents];
     return (
       <CalendarProvider
         date={this.state.currentDate}
@@ -119,8 +135,9 @@ 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={events.filter(event => sameDate(new XDate(event.start), new XDate(this.state.currentDate)))}
           scrollToFirst
+          onEventCreate={this.createNewEvent}
           // start={0}
           // end={24}
         />

src/timeline/Timeline.tsx

@@ -6,22 +6,45 @@ 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
+   */
+  onEventCreate?: TimelineHoursProps['onBackgroundLongPress'];
   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 +55,7 @@ const Timeline = (props: TimelineProps) => {
     end = 24,
     events = [],
     onEventPress,
+    onEventCreate,
     renderEvent,
     theme,
     scrollToFirst,
@@ -102,7 +126,13 @@ 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={onEventCreate}
+      />
       {renderEvents()}
     </ScrollView>
   );

src/timeline/TimelineHours.tsx

@@ -1,19 +1,20 @@
-import React, {useMemo} from 'react';
-import {View, Text, ViewStyle, TextStyle, Dimensions} from 'react-native';
+import React, {useCallback, useMemo} from 'react';
+import {View, Text, TouchableWithoutFeedback, ViewStyle, TextStyle, Dimensions, StyleSheet} from 'react-native';
 import range from 'lodash/range';
 import {HOUR_BLOCK_HEIGHT} from './Packer';
 
 const {width: dimensionWidth} = Dimensions.get('window');
 
-interface TimelineHoursProps {
+export interface TimelineHoursProps {
   start?: number;
   end?: number;
   format24h?: boolean;
+  onBackgroundLongPress?: (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} = props;
   // const offset = this.calendarHeight / (end - start);
   const offset = HOUR_BLOCK_HEIGHT;
   const EVENT_DIFF = 20;
@@ -37,8 +38,23 @@ const TimelineHours = (props: TimelineHoursProps) => {
     });
   }, [start, end, format24h]);
 
+  const handleBackgroundPress = useCallback(event => {
+    const yPosition = event.nativeEvent.locationY;
+    const halfHourBlockHeight = HOUR_BLOCK_HEIGHT / 2;
+    let time = yPosition / halfHourBlockHeight / 2;
+    time = Math.round(time * 2) / 2;
+
+    const hour = Math.floor(time);
+    const minutes = (time - Math.floor(time)) * 60;
+    const timeString = `${hour.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`;
+    onBackgroundLongPress?.(timeString, {hour, minutes});
+  }, []);
+
   return (
     <>
+      <TouchableWithoutFeedback onLongPress={handleBackgroundPress}>
+        <View style={StyleSheet.absoluteFillObject} />
+      </TouchableWithoutFeedback>
       {hours.map(({timeText, time}, index) => {
         return (
           <React.Fragment key={time}>

tsconfig.json

@@ -19,10 +19,15 @@
     "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"],
+  "include": [
+    "src/**/*",
+    "example/src/screens/calendars.tsx",
+    "example/src/screens/expandableCalendar.tsx",
+    "example/src/screens/timelineCalendar.tsx"
+  ],
   "exclude": ["node_modules", "testUtils"]
 }