Timeline : Display a placeholder on backgroundLongPress to know where…

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-native-calendars",
+  "name": "react-native-calendars-with-new-event-placeholder",
   "version": "1.22.0",
   "main": "src/index.ts",
   "types": "src/index.d.ts",
@@ -25,12 +25,12 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/wix/react-native-calendars"
+    "url": "git+https://github.com/ctruchi/react-native-calendars-with-new-event-placeholder"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "author": "Wix.com",
+  "author": "ctruchi",
   "license": "MIT",
   "dependencies": {
     "hoist-non-react-statics": "^3.3.1",

src/timeline/Timeline.tsx

@@ -3,20 +3,21 @@ import map from 'lodash/map';
 import times from 'lodash/times';
 import groupBy from 'lodash/groupBy';
 
-import React, {useCallback, useEffect, useMemo, useRef} from 'react';
-import {View, ScrollView} from 'react-native';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {GestureResponderEvent, ScrollView, View} from 'react-native';
 
 import constants from '../commons/constants';
 import {generateDay} from '../dateutils';
 import {getCalendarDateString} from '../services';
 import {Theme} from '../types';
 import styleConstructor from './style';
-import {populateEvents, HOUR_BLOCK_HEIGHT, UnavailableHours} from './Packer';
-import {calcTimeOffset} from './helpers/presenter';
-import TimelineHours, {TimelineHoursProps} from './TimelineHours';
+import {HOUR_BLOCK_HEIGHT, populateEvents, UnavailableHours} from './Packer';
+import {buildTimeString, calcDateByPosition, calcTimeByPosition, calcTimeOffset} from './helpers/presenter';
+import TimelineHours, {NewEventTime, TimelineHoursProps} from './TimelineHours';
 import EventBlock, {Event, PackedEvent} from './EventBlock';
 import NowIndicator from './NowIndicator';
 import useTimelineOffset from './useTimelineOffset';
+import TimelineEventPlaceholder, {TimelineEventPlaceholderProps} from "./TimelineEventPlaceholder";
 
 export interface TimelineProps {
   /**
@@ -113,6 +114,12 @@ export interface TimelineProps {
    * The left inset of the timeline calendar (sidebar width), default is 72
    */
   timelineLeftInset?: number;
+  /**
+   * Display a placeholder on backgroundLongPress and remove it on backgroundLongPressOut, default is false.
+   */
+  displayEventPlaceholder?: boolean;
+  renderPlaceholder?: TimelineEventPlaceholderProps["renderPlaceholder"];
+  onPlaceholderMoveStop?: (timeString: string, time: NewEventTime) => void;
   /** Identifier for testing */
   testID?: string;
 }
@@ -142,6 +149,9 @@ const Timeline = (props: TimelineProps) => {
     eventTapped,
     numberOfDays = 1,
     timelineLeftInset = 0,
+    displayEventPlaceholder = false,
+    renderPlaceholder,
+    onPlaceholderMoveStop,
     testID,
   } = props;
 
@@ -156,6 +166,8 @@ const Timeline = (props: TimelineProps) => {
   }, [pageDates, groupedEvents]);
   const scrollView = useRef<ScrollView>();
   const calendarHeight = useRef((end - start) * HOUR_BLOCK_HEIGHT);
+  const [scrollEnabled, setScrollEnabled] = useState(true);
+  const [placeholderTime, setPlaceholderTime] = useState<{start: TimelineEventPlaceholderProps['startTime'], end: TimelineEventPlaceholderProps['endTime']} | undefined>(undefined);
   const styles = useRef(styleConstructor(theme || props.styles, calendarHeight.current));
 
   const {scrollEvents} = useTimelineOffset({onChangeOffset, scrollOffset, scrollViewRef: scrollView});
@@ -208,6 +220,34 @@ const Timeline = (props: TimelineProps) => {
     [onEventPress, eventTapped]
   );
 
+  const _onTouchMove = (event: GestureResponderEvent) => {
+    if (displayEventPlaceholder && placeholderTime) {
+      const {hour, minutes} = calcTimeByPosition(event.nativeEvent.locationY, HOUR_BLOCK_HEIGHT)
+      const dateByPosition = calcDateByPosition(event.nativeEvent.locationX, timelineLeftInset, numberOfDays, pageDates[0]);
+      const end = minutes === 0 ? {hour: hour, minutes: minutes + 30} : {hour: hour + 1, minutes: 0, date: dateByPosition};
+      setPlaceholderTime({start: {hour, minutes, date: dateByPosition}, end});
+    }
+  };
+
+  const _onBackgroundLongPress = (timeString: string, time: NewEventTime) => {
+    if (displayEventPlaceholder) {
+      const end = time.minutes === 0 ? {...time, minutes: time.minutes + 30} : {...time, hour: time.hour + 1, minutes: 0};
+      setPlaceholderTime({start: time, end});
+      setScrollEnabled(false);
+    }
+    onBackgroundLongPress?.(timeString, time);
+  };
+
+  const _onBackgroundLongPressOut = (timeString: string, time: NewEventTime) => {
+    if (displayEventPlaceholder) {
+      const time = placeholderTime!;
+      setPlaceholderTime(undefined);
+      setScrollEnabled(true);
+      onPlaceholderMoveStop?.(buildTimeString(time.start.hour, time.start.minutes, time.start.date), time.start);
+    }
+    onBackgroundLongPressOut?.(timeString, time);
+  };
+
   const renderEvents = (dayIndex: number) => {
     const events = packedEvents[dayIndex].map((event: PackedEvent, eventIndex: number) => {
       const onEventPress = () => _onEventPress(dayIndex, eventIndex);
@@ -235,10 +275,14 @@ const Timeline = (props: TimelineProps) => {
   const renderTimelineDay = (dayIndex: number) => {
     const indexOfToday = pageDates.indexOf(generateDay(new Date().toString()));
     const left = timelineLeftInset + indexOfToday * width / numberOfDays;
+
+    const indexOfPlaceholderDay = placeholderTime ? (placeholderTime.start.date ? pageDates.indexOf(generateDay(placeholderTime.start.date)) : 0) : undefined
+    const placeholderTimeLeft = indexOfPlaceholderDay !== undefined ? timelineLeftInset + indexOfPlaceholderDay * width / numberOfDays : undefined;
     return (
       <React.Fragment key={dayIndex}>
         {renderEvents(dayIndex)}
         {indexOfToday !== -1 && showNowIndicator && <NowIndicator width={width / numberOfDays} left={left} styles={styles.current} />}
+        {placeholderTime && placeholderTimeLeft &&  <TimelineEventPlaceholder startTime={placeholderTime.start} endTime={placeholderTime.end} width={width / numberOfDays} left={placeholderTimeLeft} styles={styles.current} renderPlaceholder={renderPlaceholder} />}
       </React.Fragment>
     );
   };
@@ -251,6 +295,8 @@ const Timeline = (props: TimelineProps) => {
       contentContainerStyle={[styles.current.contentStyle, {width: constants.screenWidth}]}
       showsVerticalScrollIndicator={false}
       {...scrollEvents}
+      scrollEnabled={scrollEnabled}
+      onTouchMove={_onTouchMove}
       testID={testID}
     >
       <TimelineHours
@@ -261,8 +307,8 @@ const Timeline = (props: TimelineProps) => {
         styles={styles.current}
         unavailableHours={unavailableHours}
         unavailableHoursColor={unavailableHoursColor}
-        onBackgroundLongPress={onBackgroundLongPress}
-        onBackgroundLongPressOut={onBackgroundLongPressOut}
+        onBackgroundLongPress={_onBackgroundLongPress}
+        onBackgroundLongPressOut={_onBackgroundLongPressOut}
         width={width}
         numberOfDays={numberOfDays}
         timelineLeftInset={timelineLeftInset}

src/timeline/TimelineEventPlaceholder.tsx

@@ -0,0 +1,31 @@
+import {TextStyle, View, ViewStyle} from "react-native";
+import {useMemo} from "react";
+import {calcTimeOffset} from "./helpers/presenter";
+import {HOUR_BLOCK_HEIGHT} from "./Packer";
+import {NewEventTime} from "./TimelineHours";
+
+export interface TimelineEventPlaceholderProps {
+    styles: {[key: string]: ViewStyle | TextStyle};
+    startTime: NewEventTime;
+    endTime: NewEventTime;
+    width: number;
+    left: number;
+    renderPlaceholder?: ()=> JSX.Element;
+}
+
+const TimelineEventPlaceholder = (props: TimelineEventPlaceholderProps) => {
+    const {styles, startTime, endTime, width, left, renderPlaceholder} = props;
+
+    const placeholderStart = calcTimeOffset(HOUR_BLOCK_HEIGHT, startTime.hour, startTime.minutes);
+    const placeholderEnd = calcTimeOffset(HOUR_BLOCK_HEIGHT, endTime.hour, endTime.minutes);
+
+    const timelineEventPlaceholderStyle = useMemo(() => {
+        return [styles.eventPlaceholderStyle, {top: placeholderStart, height: placeholderEnd - placeholderStart, width, left}]
+    }, [placeholderStart, placeholderEnd]);
+
+    return <View style={timelineEventPlaceholderStyle} pointerEvents={"none"}>
+        {renderPlaceholder?.()}
+    </View>
+};
+
+export default TimelineEventPlaceholder;

src/timeline/TimelineHours.tsx

@@ -8,7 +8,7 @@ import constants from '../commons/constants';
 import {buildTimeString, calcTimeByPosition, calcDateByPosition} from './helpers/presenter';
 import {buildUnavailableHoursBlocks, HOUR_BLOCK_HEIGHT, UnavailableHours} from './Packer';
 
-interface NewEventTime {
+export interface NewEventTime {
   hour: number;
   minutes: number;
   date?: string;

src/timeline/style.ts

@@ -111,6 +111,22 @@ export default function styleConstructor(theme: Theme = {}, calendarHeight: numb
     },
     eventsContainer: {
       flex: 1
+    },
+    eventPlaceholderStyle: {
+      opacity: 1,
+      paddingLeft: 4,
+      paddingTop: 5,
+      paddingBottom: 0,
+      backgroundColor: '#F0F4FF',
+      borderColor: '#DDE5FD',
+      borderWidth: 1,
+      ...appStyle.eventPlaceholderStyle,
+      position: 'absolute',
+      flex: 1,
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      overflow: 'hidden',
+      minHeight: 25,
     }
   });
 }

src/types.ts

@@ -75,6 +75,7 @@ export interface Theme {
   arrowWidth?: number;
   weekVerticalMargin?: number;
   reservationsBackgroundColor?: string;
+  eventPlaceholderStyle?: object;
   stylesheet?: {
     calendar?: {
       main?: object;