Merge pull request #1747 from wix/feat/TimelineList

Feat/timeline list

Author: ethanshar

example/src/screens/timelineCalendar.tsx

@@ -1,10 +1,16 @@
-import XDate from 'xdate';
 import React, {Component} from 'react';
 import {Alert} from 'react-native';
-import {ExpandableCalendar, Timeline, CalendarProvider, TimelineProps} from 'react-native-calendars';
-import {sameDate} from '../../../src/dateutils';
+import {
+  ExpandableCalendar,
+  TimelineEventProps,
+  TimelineList,
+  CalendarProvider,
+  TimelineProps,
+  CalendarUtils
+} from 'react-native-calendars';
+import _ from 'lodash';
 
-const EVENTS = [
+const EVENTS: TimelineEventProps[] = [
   {
     start: '2017-09-06 01:30:00',
     end: '2017-09-06 02:30:00',
@@ -82,7 +88,9 @@ export default class TimelineCalendarScreen extends Component {
   state = {
     currentDate: '2017-09-10',
     events: EVENTS,
-    newEvent: undefined
+    eventsByDate: _.groupBy(EVENTS, e => CalendarUtils.getCalendarDateString(e.start)) as {
+      [key: string]: TimelineEventProps[];
+    }
   };
 
   marked = {
@@ -103,45 +111,78 @@ export default class TimelineCalendarScreen extends Component {
   };
 
   createNewEvent: TimelineProps['onBackgroundLongPress'] = (timeString, timeObject) => {
+    const {eventsByDate} = this.state;
     const hourString = `${(timeObject.hour + 1).toString().padStart(2, '0')}`;
     const minutesString = `${timeObject.minutes.toString().padStart(2, '0')}`;
 
     const newEvent = {
+      id: 'draft',
       start: `${timeString}`,
       end: `${timeObject.date} ${hourString}:${minutesString}:00`,
       title: 'New Event',
       color: '#ffffff'
     };
 
-    this.setState({newEvent});
+    if (timeObject.date) {
+      if (eventsByDate[timeObject.date]) {
+        eventsByDate[timeObject.date] = [...eventsByDate[timeObject.date], newEvent];
+        this.setState({eventsByDate});
+      } else {
+        eventsByDate[timeObject.date] = [newEvent];
+        this.setState({eventsByDate: {...eventsByDate}});
+      }
+    }
   };
 
-  approveNewEvent = () => {
+  approveNewEvent: TimelineProps['onBackgroundLongPressOut'] = (_timeString, timeObject) => {
+    const {eventsByDate} = this.state;
+
     Alert.prompt('New Event', 'Enter event title', [
       {
         text: 'Cancel',
         onPress: () => {
-          this.setState({
-            newEvent: undefined
-          });
+          if (timeObject.date) {
+            eventsByDate[timeObject.date] = _.filter(eventsByDate[timeObject.date], e => e.id !== 'draft');
+
+            this.setState({
+              eventsByDate
+            });
+          }
         }
       },
       {
         text: 'Create',
         onPress: eventTitle => {
-          const {newEvent = {}, events} = this.state;
-          this.setState({
-            newEvent: undefined,
-            events: [...events, {...newEvent, title: eventTitle ?? 'New Event', color: '#d8ade6'}]
-          });
+          if (timeObject.date) {
+            const draftEvent = _.find(eventsByDate[timeObject.date], {id: 'draft'});
+            if (draftEvent) {
+              draftEvent.id = undefined;
+              draftEvent.title = eventTitle ?? 'New Event';
+              draftEvent.color = '#d8ade6';
+              eventsByDate[timeObject.date] = [...eventsByDate[timeObject.date]];
+
+              this.setState({
+                eventsByDate
+              });
+            }
+          }
         }
       }
     ]);
   };
 
+  private timelineProps = {
+    format24h: true,
+    onBackgroundLongPress: this.createNewEvent,
+    onBackgroundLongPressOut: this.approveNewEvent
+    // scrollToFirst: true,
+    // start: 0,
+    // end: 24
+  };
+
   render() {
-    const {currentDate, events, newEvent} = this.state;
-    const timelineEvents = newEvent ? [...events, newEvent] : events;
+    const {currentDate, eventsByDate} = this.state;
+
     return (
       <CalendarProvider
         date={currentDate}
@@ -156,18 +197,7 @@ export default class TimelineCalendarScreen extends Component {
           rightArrowImageSource={require('../img/next.png')}
           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)))}
-          scrollToFirst
-          onBackgroundLongPress={this.createNewEvent}
-          onBackgroundLongPressOut={this.approveNewEvent}
-          showNowIndicator
-          // start={0}
-          // end={24}
-        />
+        <TimelineList events={eventsByDate} timelineProps={this.timelineProps} />
       </CalendarProvider>
     );
   }

package.json

@@ -36,6 +36,7 @@
     "memoize-one": "^5.2.1",
     "prop-types": "^15.5.10",
     "react-native-swipe-gestures": "^1.0.5",
+    "recyclerlistview": "^3.0.5",
     "xdate": "^0.8.0"
   },
   "devDependencies": {

src/commons/constants.ts

@@ -0,0 +1,8 @@
+import {Dimensions} from 'react-native';
+
+const {width: screenWidth, height: screenHeight} = Dimensions.get('screen');
+
+export default {
+  screenWidth,
+  screenHeight
+};

src/dateutils.spec.js

@@ -1,5 +1,5 @@
 import XDate from 'xdate';
-import {sameMonth, sameWeek, isLTE, isGTE, month, page} from './dateutils';
+import {sameMonth, sameWeek, isLTE, isGTE, month, page, generateDay} from './dateutils';
 
 describe('dateutils', function () {
   describe('sameMonth()', function () {
@@ -162,4 +162,21 @@ describe('dateutils', function () {
       }
     });
   });
+
+  describe('generateDay', () => {
+    it('should generate a day in string format with an offset', () => {
+      expect(generateDay('2017-09-22', 2)).toBe('2017-09-24');
+      expect(generateDay('2017-09-22', -2)).toBe('2017-09-20');
+    });
+
+    it('should generate the same day when offset was not sent', () => {
+      expect(generateDay('2017-09-22')).toBe('2017-09-22');
+    });
+
+    it('should handle month and year changes', () => {
+      expect(generateDay('2017-10-22', 10)).toBe('2017-11-01');
+      expect(generateDay('2017-12-26', 10)).toBe('2018-01-05');
+      expect(generateDay('2018-01-01', -3)).toBe('2017-12-29');
+    });
+  });
 });

src/dateutils.ts

@@ -1,17 +1,14 @@
 const XDate = require('xdate');
-const {parseDate} = require('./interface');
+const {parseDate, toMarkingFormat} = require('./interface');
 
 const latinNumbersPattern = /[0-9]/g;
 
 export function sameMonth(a: XDate, b: XDate) {
-  return a.getFullYear() === b.getFullYear() && 
-    a.getMonth() === b.getMonth();
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
 }
 
 export function sameDate(a: XDate, b: XDate) {
-  return a.getFullYear() === b.getFullYear() &&
-    a.getMonth() === b.getMonth() &&
-    a.getDate() === b.getDate();
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
 }
 
 export function sameWeek(a: XDate, b: XDate, firstDayOfWeek: number) {
@@ -144,3 +141,8 @@ export function getWeekDates(date: XDate, firstDay = 0, format?: string) {
     return daysArray;
   }
 }
+
+export function generateDay(originDate: string, daysOffset = 0) {
+  const baseDate = new XDate(originDate);
+  return toMarkingFormat(baseDate.clone().addDays(daysOffset));
+}

src/index.ts

@@ -16,6 +16,7 @@ export type {CalendarContextProviderProps} from './expandableCalendar/Context/Pr
 export {default as asCalendarConsumer} from './expandableCalendar/asCalendarConsumer';
 export {default as Timeline} from './timeline/Timeline';
 export type {TimelineProps, TimelineEventProps, TimelinePackedEventProps} from './timeline/Timeline';
+export {default as TimelineList} from './timeline-list';
 export {default as CalendarUtils} from './services';
 export {DateData, AgendaEntry, AgendaSchedule} from './types';
 export {default as LocaleConfig} from 'xdate';

src/timeline-list/HorizontalList.tsx

@@ -0,0 +1,78 @@
+// TODO: Make this a common component for all horizontal lists in this lib
+import React, {forwardRef, useCallback, useMemo, useRef} from 'react';
+import {DataProvider, LayoutProvider, RecyclerListView, RecyclerListViewProps} from 'recyclerlistview';
+import constants from '../commons/constants';
+
+const layoutProvider = new LayoutProvider(
+  () => 'page',
+  (_type, dim) => {
+    dim.width = constants.screenWidth;
+    dim.height = constants.screenHeight;
+  }
+);
+
+const dataProviderMaker = (items: string[]) =>
+  new DataProvider((item1, item2) => item1.value !== item2.value || item1.label !== item2.label).cloneWithRows(items);
+
+export interface HorizontalListProps
+  extends Omit<RecyclerListViewProps, 'dataProvider' | 'layoutProvider' | 'rowRenderer'> {
+  data: any[];
+  renderItem: RecyclerListViewProps['rowRenderer'];
+  pageWidth?: number;
+  onPageChange?: (pageIndex: number, prevPageIndex: number) => void;
+  initialPageIndex?: number;
+}
+
+const HorizontalList = (props: HorizontalListProps, ref: any) => {
+  const {
+    renderItem,
+    data,
+    pageWidth = constants.screenWidth,
+    onPageChange,
+    initialPageIndex = 0,
+    extendedState,
+    scrollViewProps
+  } = props;
+  const dataProvider = useMemo(() => {
+    return dataProviderMaker(data);
+  }, [data]);
+
+  const pageIndex = useRef<number>();
+
+  const onScroll = useCallback(
+    (event, offsetX, offsetY) => {
+      const currPageIndex = Math.round(event.nativeEvent.contentOffset.x / pageWidth);
+
+      if (pageIndex.current !== currPageIndex) {
+        if (pageIndex.current !== undefined) {
+          onPageChange?.(currPageIndex, pageIndex.current);
+        }
+        pageIndex.current = currPageIndex;
+      }
+
+      props.onScroll?.(event, offsetX, offsetY);
+    },
+    [props.onScroll]
+  );
+
+  return (
+    <RecyclerListView
+      ref={ref}
+      isHorizontal
+      rowRenderer={renderItem}
+      dataProvider={dataProvider}
+      layoutProvider={layoutProvider}
+      extendedState={extendedState}
+      initialRenderIndex={initialPageIndex}
+      renderAheadOffset={5 * pageWidth}
+      onScroll={onScroll}
+      scrollViewProps={{
+        pagingEnabled: true,
+        bounces: false,
+        ...scrollViewProps
+      }}
+    />
+  );
+};
+
+export default forwardRef(HorizontalList);