Merge pull request #1721 from wix/infra/Agenda_types_fix

Agenda - types fix

Author: lidord-wix

example/src/screens/agenda.tsx

@@ -1,24 +1,27 @@
 import React, {Component} from 'react';
 import {Alert, StyleSheet, Text, View, TouchableOpacity} from 'react-native';
-// @ts-expect-error
-import {Agenda} from 'react-native-calendars';
+import {Agenda, DateData, AgendaEntry, AgendaSchedule} from 'react-native-calendars';
 import testIDs from '../testIDs';
 
-export default class AgendaScreen extends Component {
-  state = {
-    items: {}
+interface State {
+  items?: AgendaSchedule;
+}
+
+export default class AgendaScreen extends Component<State> {
+  state: State = {
+    items: undefined
   };
 
   render() {
     return (
       <Agenda
         testID={testIDs.agenda.CONTAINER}
         items={this.state.items}
-        loadItemsForMonth={this.loadItems.bind(this)}
+        loadItemsForMonth={this.loadItems}
         selected={'2017-05-16'}
-        renderItem={this.renderItem.bind(this)}
-        renderEmptyDate={this.renderEmptyDate.bind(this)}
-        rowHasChanged={this.rowHasChanged.bind(this)}
+        renderItem={this.renderItem}
+        renderEmptyDate={this.renderEmptyDate}
+        rowHasChanged={this.rowHasChanged}
         showClosingKnob={true}
         // markingType={'period'}
         // markedDates={{
@@ -38,57 +41,66 @@ export default class AgendaScreen extends Component {
     );
   }
 
-  loadItems(day) {
+  loadItems = (day: DateData) => {
+    const items = this.state.items || {};
+
     setTimeout(() => {
       for (let i = -15; i < 85; i++) {
         const time = day.timestamp + i * 24 * 60 * 60 * 1000;
         const strTime = this.timeToString(time);
-        if (!this.state.items[strTime]) {
-          this.state.items[strTime] = [];
+
+        if (!items[strTime]) {
+          items[strTime] = [];
+          
           const numItems = Math.floor(Math.random() * 3 + 1);
           for (let j = 0; j < numItems; j++) {
-            this.state.items[strTime].push({
+            items[strTime].push({
               name: 'Item for ' + strTime + ' #' + j,
-              height: Math.max(50, Math.floor(Math.random() * 150))
+              height: Math.max(50, Math.floor(Math.random() * 150)),
+              day: strTime
             });
           }
         }
       }
-      const newItems = {};
-      Object.keys(this.state.items).forEach(key => {
-        newItems[key] = this.state.items[key];
+      
+      const newItems: AgendaSchedule = {};
+      Object.keys(items).forEach(key => {
+        newItems[key] = items[key];
       });
       this.setState({
         items: newItems
       });
     }, 1000);
   }
 
-  renderItem(item) {
+  renderItem = (reservation: AgendaEntry, isFirst: boolean) => {
+    const fontSize = isFirst ? 16 : 14;
+    const color = isFirst ? 'black' : '#43515c';
+
     return (
       <TouchableOpacity
         testID={testIDs.agenda.ITEM}
-        style={[styles.item, {height: item.height}]}
-        onPress={() => Alert.alert(item.name)}
+        style={[styles.item, {height: reservation.height}]}
+        onPress={() => Alert.alert(reservation.name)}
       >
-        <Text>{item.name}</Text>
+        <Text style={{fontSize, color}}>{reservation.name}</Text>
       </TouchableOpacity>
     );
   }
 
-  renderEmptyDate() {
+  renderEmptyDate = () => {
     return (
       <View style={styles.emptyDate}>
         <Text>This is empty date!</Text>
       </View>
     );
   }
 
-  rowHasChanged(r1, r2) {
+  rowHasChanged = (r1: AgendaEntry, r2: AgendaEntry) => {
     return r1.name !== r2.name;
   }
 
-  timeToString(time) {
+  timeToString(time: number) {
     const date = new Date(time);
     return date.toISOString().split('T')[0];
   }

src/agenda/index.tsx

@@ -21,45 +21,35 @@ import {weekDayNames, sameDate, sameMonth} from '../dateutils';
 import {AGENDA_CALENDAR_KNOB} from '../testIDs';
 import {VelocityTracker} from '../velocityTracker';
 import {DateData} from '../types';
+import {getCalendarDateString} from '../services';
 import styleConstructor from './style';
+import {AgendaSchedule} from '../types';
 import CalendarList, {CalendarListProps} from '../calendar-list';
 import ReservationList, {ReservationListProps}  from './reservation-list';
 
 
 const HEADER_HEIGHT = 104;
 const KNOB_HEIGHT = 24;
 
-export type ReservationItemType = {
-  name: string;
-  height: number;
-  day: XDate;
-};
-
-export type ReservationsType = {
-  [date: string]: ReservationItemType[];
-};
-
 export type AgendaProps = CalendarListProps & ReservationListProps & {
   /** the list of items that have to be displayed in agenda. If you want to render item as empty date
    the value of date key has to be an empty array []. If there exists no value for date key it is
    considered that the date in question is not yet loaded */
-  items: ReservationsType;
+  items?: AgendaSchedule;
   /** callback that gets called when items for a certain month should be loaded (month became visible) */
-  loadItemsForMonth?: (data: any) => DateData;
+  loadItemsForMonth?: (data: DateData) => void;
   /** callback that fires when the calendar is opened or closed */
   onCalendarToggled?: (enabled: boolean) => void;
-  /** callback that gets called on day press */
-  onDayPress?: (data: DateData) => void;
   /** callback that gets called when day changes while scrolling agenda list */
-  onDayChange?: (data: any) => void;
+  onDayChange?: (data: DateData) => void;
   /** specify how agenda knob should look like */
   renderKnob?: () => JSX.Element;
   /** initially selected day */
-  selected: boolean; //TODO: Should be renamed 'selectedDay'
+  selected?: string; //TODO: Should be renamed 'selectedDay'
   /** Hide knob button. Default = false */
-  hideKnob: boolean;
+  hideKnob?: boolean;
   /** When `true` and `hideKnob` prop is `false`, the knob will always be visible and the user will be able to drag the knob up and close the calendar. Default = false */
-  showClosingKnob: boolean;
+  showClosingKnob?: boolean;
 }
 
 type State = {
@@ -94,8 +84,6 @@ export default class Agenda extends Component<AgendaProps, State> {
     loadItemsForMonth: PropTypes.func,
     /** callback that fires when the calendar is opened or closed */
     onCalendarToggled: PropTypes.func,
-    /** callback that gets called on day press */
-    onDayPress: PropTypes.func,
     /** callback that gets called when day changes while scrolling agenda list */
     onDayChange: PropTypes.func,
     /** specify how agenda knob should look like */
@@ -111,14 +99,14 @@ export default class Agenda extends Component<AgendaProps, State> {
   private style: {[key: string]: ViewStyle};
   private viewHeight: number;
   private viewWidth: number;
-  private scrollTimeout: any;
+  private scrollTimeout?: ReturnType<typeof setTimeout>;
   private headerState: string;
   private currentMonth: XDate;
-  private knobTracker: any;
+  private knobTracker: VelocityTracker;
   private _isMounted: boolean | undefined;
   private scrollPad: React.RefObject<any> = React.createRef();
   private calendar: React.RefObject<CalendarList> = React.createRef();
-  private knob: React.RefObject<any> = React.createRef();
+  private knob: React.RefObject<View> = React.createRef();
   public list: React.RefObject<ReservationList> = React.createRef();
 
   constructor(props: AgendaProps) {
@@ -170,7 +158,6 @@ export default class Agenda extends Component<AgendaProps, State> {
     if (nextProps.items) {
       return {firstReservationLoad: false};
     }
-
     return null;
   }
 
@@ -198,10 +185,8 @@ export default class Agenda extends Component<AgendaProps, State> {
   };
 
   enableCalendarScrolling(enable = true) {
-    this.setState({
-      calendarScrollable: enable
-    });
-
+    this.setState({calendarScrollable: enable});
+    
     this.props.onCalendarToggled?.(enable);
 
     // Enlarge calendarOffset here as a workaround on iOS to force repaint.
@@ -217,22 +202,19 @@ export default class Agenda extends Component<AgendaProps, State> {
 
   loadReservations(props: AgendaProps) {
     if ((!props.items || !Object.keys(props.items).length) && !this.state.firstReservationLoad) {
-      this.setState(
-        {
-          firstReservationLoad: true
-        },
+      this.setState({firstReservationLoad: true},
         () => {
           this.props.loadItemsForMonth?.(xdateToData(this.state.selectedDay));
         }
       );
     }
   }
 
-  chooseDayFromCalendar = (d: any) => {
+  onDayPress = (d: DateData) => {
     this.chooseDay(d, !this.state.calendarScrollable);
   };
 
-  chooseDay(d: any, optimisticScroll: boolean) {
+  chooseDay(d: DateData, optimisticScroll: boolean) {
     const day = parseDate(d);
 
     this.setState({
@@ -243,9 +225,7 @@ export default class Agenda extends Component<AgendaProps, State> {
     this.props.onCalendarToggled?.(false);
 
     if (!optimisticScroll) {
-      this.setState({
-        topDay: day.clone()
-      });
+      this.setState({topDay: day.clone()});
     }
 
     this.setScrollPadPosition(this.initialScrollPadPosition(), true);
@@ -255,14 +235,16 @@ export default class Agenda extends Component<AgendaProps, State> {
     this.props.onDayPress?.(xdateToData(day));
   }
 
-  generateMarkings = memoize((selectedDay, markedDates, items = {}) => {
+  generateMarkings = memoize((selectedDay, markedDates, items) => {
     if (!markedDates) {
       markedDates = {};
-      Object.keys(items).forEach(key => {
-        if (items[key] && items[key].length) {
-          markedDates[key] = {marked: true};
-        }
-      });
+      if (items) {
+        Object.keys(items).forEach(key => {
+          if (items[key] && items[key].length) {
+            markedDates[key] = {marked: true};
+          }
+        });
+      }
     }
 
     const key = toMarkingFormat(selectedDay);
@@ -326,7 +308,9 @@ export default class Agenda extends Component<AgendaProps, State> {
     this.props.onVisibleMonthsChange?.(months);
 
     if (this.props.items && !this.state.firstReservationLoad) {
-      clearTimeout(this.scrollTimeout);
+      if (this.scrollTimeout) {
+        clearTimeout(this.scrollTimeout);
+      }
 
       this.scrollTimeout = setTimeout(() => {
         if (this._isMounted) {
@@ -336,16 +320,13 @@ export default class Agenda extends Component<AgendaProps, State> {
     }
   };
 
-  onDayChange = (day: any) => {
-    const newDate = parseDate(day);
-    const withAnimation = sameMonth(newDate, this.state.selectedDay);
-
+  onDayChange = (day: XDate) => {
+    const withAnimation = sameMonth(day, this.state.selectedDay);
     this.calendar?.current?.scrollToDay(day, this.calendarOffset(), withAnimation);
-    this.setState({
-      selectedDay: newDate
-    });
+    
+    this.setState({selectedDay: day});
 
-    this.props.onDayChange?.(xdateToData(newDate));
+    this.props.onDayChange?.(xdateToData(day));
   };
 
   renderReservations() {
@@ -355,7 +336,6 @@ export default class Agenda extends Component<AgendaProps, State> {
       <ReservationList
         {...reservationListProps}
         ref={this.list}
-        reservations={this.props.items}
         selectedDay={this.state.selectedDay}
         topDay={this.state.topDay}
         onDayChange={this.onDayChange}
@@ -372,13 +352,13 @@ export default class Agenda extends Component<AgendaProps, State> {
       <CalendarList
         {...calendarListProps}
         ref={this.calendar}
-        current={this.currentMonth}
+        current={getCalendarDateString(this.currentMonth.toString())}
         markedDates={this.generateMarkings(this.state.selectedDay, markedDates, items)}
         calendarWidth={this.viewWidth}
         scrollEnabled={this.state.calendarScrollable}
         hideExtraDays={shouldHideExtraDays}
         onLayout={this.onCalendarListLayout}
-        onDayPress={this.chooseDayFromCalendar}
+        onDayPress={this.onDayPress}
         onVisibleMonthsChange={this.onVisibleMonthsChange}
       />
     );
@@ -401,7 +381,12 @@ export default class Agenda extends Component<AgendaProps, State> {
 
   renderWeekDaysNames = memoize((weekDaysNames: string[]) => {
     return weekDaysNames.map((day, index) => (
-      <Text allowFontScaling={false} key={day + index} style={this.style.weekday} numberOfLines={1}>
+      <Text 
+        key={day + index} 
+        style={this.style.weekday} 
+        allowFontScaling={false} 
+        numberOfLines={1}
+      >
         {day}
       </Text>
     ));