renaming types

Author: Inbal-Tish

example/src/screens/agenda.tsx

@@ -1,10 +1,10 @@
 import React, {Component} from 'react';
 import {Alert, StyleSheet, Text, View, TouchableOpacity} from 'react-native';
-import {Agenda, DateData, ReservationItemType, ReservationsType} from 'react-native-calendars';
+import {Agenda, DateData, AgendaEntry, AgendaSchedule} from 'react-native-calendars';
 import testIDs from '../testIDs';
 
 interface State {
-  items?: ReservationsType;
+  items?: AgendaSchedule;
 }
 
 export default class AgendaScreen extends Component<State> {
@@ -63,7 +63,7 @@ export default class AgendaScreen extends Component<State> {
         }
       }
 
-      const newItems: ReservationsType = {};
+      const newItems: AgendaSchedule = {};
       Object.keys(items).forEach(key => {
         newItems[key] = items[key];
       });
@@ -73,7 +73,7 @@ export default class AgendaScreen extends Component<State> {
     }, 1000);
   }
 
-  renderItem = (reservation: ReservationItemType, isFirst: boolean) => {
+  renderItem = (reservation: AgendaEntry, isFirst: boolean) => {
     const fontSize = isFirst ? 16 : 14;
     const color = isFirst ? 'black' : '#43515c';
 
@@ -96,7 +96,7 @@ export default class AgendaScreen extends Component<State> {
     );
   }
 
-  rowHasChanged = (r1: ReservationItemType, r2: ReservationItemType) => {
+  rowHasChanged = (r1: AgendaEntry, r2: AgendaEntry) => {
     return r1.name !== r2.name;
   }
 

src/agenda/index.tsx

@@ -23,7 +23,7 @@ import {VelocityTracker} from '../velocityTracker';
 import {DateData} from '../types';
 import {getCalendarDateString} from '../services';
 import styleConstructor from './style';
-import {ReservationsType} from '../types';
+import {AgendaSchedule} from '../types';
 import CalendarList, {CalendarListProps} from '../calendar-list';
 import ReservationList, {ReservationListProps}  from './reservation-list';
 
@@ -35,7 +35,7 @@ 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: DateData) => void;
   /** callback that fires when the calendar is opened or closed */
@@ -344,7 +344,6 @@ export default class Agenda extends Component<AgendaProps, State> {
       <ReservationList
         {...reservationListProps}
         ref={this.list}
-        items={this.props.items}
         selectedDay={this.state.selectedDay}
         topDay={this.state.topDay}
         onDayChange={this.onDayChange}

src/agenda/reservation-list/index.tsx

@@ -10,17 +10,17 @@ import {sameDate} from '../../dateutils';
 import {toMarkingFormat} from '../../interface';
 import styleConstructor from './style';
 import Reservation, {ReservationProps} from './reservation';
-import {ReservationItemType, ReservationsType, DayReservations} from '../../types';
+import {AgendaEntry, AgendaSchedule} from '../../types';
 
 
 export type ReservationListProps = ReservationProps & {
   /** 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 kas 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;
   selectedDay?: XDate;
   topDay?: XDate;
-  /** Show items only for the selected day. Default = false */
+  /** Show items only for the selected date. Default = false */
   showOnlySelectedDayItems?: boolean;
   /** callback that gets called when day changes while scrolling agenda list */
   onDayChange?: (day: XDate) => void;
@@ -46,8 +46,13 @@ export type ReservationListProps = ReservationProps & {
   onRefresh?: () => void;
 };
 
+interface DayAgenda {
+  reservation?: AgendaEntry;
+  date?: XDate;
+}
+
 interface State {
-  reservations: DayReservations[];
+  reservations: DayAgenda[];
 }
 
 class ReservationList extends Component<ReservationListProps, State> {
@@ -61,7 +66,7 @@ class ReservationList extends Component<ReservationListProps, State> {
     items: PropTypes.object,
     selectedDay: PropTypes.instanceOf(XDate),
     topDay: PropTypes.instanceOf(XDate),
-    /** Show items only for the selected day. Default = false */
+    /** Show items only for the selected date. Default = false */
     showOnlySelectedDayItems: PropTypes.bool,
     /** callback that gets called when day changes while scrolling agenda list */
     onDayChange: PropTypes.func,
@@ -130,7 +135,7 @@ class ReservationList extends Component<ReservationListProps, State> {
     }
   }
 
-  updateDataSource(reservations: DayReservations[]) {
+  updateDataSource(reservations: DayAgenda[]) {
     this.setState({
       reservations
     });
@@ -156,18 +161,16 @@ class ReservationList extends Component<ReservationListProps, State> {
     const day = iterator.clone();
     const res = props.items?.[toMarkingFormat(day)];
     if (res && res.length) {
-      return res.map((reservation: ReservationItemType, i: number) => {
+      return res.map((reservation: AgendaEntry, i: number) => {
         return {
           reservation,
-          date: i ? undefined : day,
-          day
+          date: i ? undefined : day
         };
       });
     } else if (res) {
       return [
         {
-          date: iterator.clone(),
-          day
+          date: iterator.clone()
         }
       ];
     } else {
@@ -181,9 +184,10 @@ class ReservationList extends Component<ReservationListProps, State> {
       return {reservations: [], scrollPosition: 0};
     }
 
-    let reservations: DayReservations[] = [];
+    let reservations: DayAgenda[] = [];
     if (this.state.reservations && this.state.reservations.length) {
-      const iterator = this.state.reservations[0].day.clone();
+      const iterator = this.state.reservations[0].date?.clone();
+      if (iterator)
       while (iterator.getTime() < selectedDay.getTime()) {
         const res = this.getReservationsForDay(iterator, props);
         if (!res) {
@@ -235,11 +239,13 @@ class ReservationList extends Component<ReservationListProps, State> {
     const row = this.state.reservations[topRow];
     if (!row) return;
 
-    const day = row.day;
-    const dateIsSame = this.selectedDay && sameDate(day, this.selectedDay);
-    if (!dateIsSame && this.scrollOver) {
-      this.selectedDay = day.clone();
-      this.props.onDayChange?.(day.clone());
+    const day = row.date;
+    if (day) {
+      const dateIsSame = this.selectedDay && sameDate(day, this.selectedDay);
+      if (!dateIsSame && this.scrollOver) {
+        this.selectedDay = day.clone();
+        this.props.onDayChange?.(day.clone());
+      }
     }
   };
 
@@ -256,17 +262,17 @@ class ReservationList extends Component<ReservationListProps, State> {
     return false;
   };
 
-  renderRow = ({item, index}: {item: DayReservations; index: number}) => {
+  renderRow = ({item, index}: {item: DayAgenda; index: number}) => {
     const reservationProps = extractComponentProps(Reservation, this.props);
 
     return (
       <View onLayout={this.onRowLayoutChange.bind(this, index)}>
-        <Reservation {...reservationProps} item={item} />
+        <Reservation {...reservationProps} item={item.reservation} date={item.date}/>
       </View>
     );
   };
 
-  keyExtractor = (_item: DayReservations, index: number) => String(index);
+  keyExtractor = (_item: DayAgenda, index: number) => String(index);
 
   render() {
     const {items, selectedDay, theme, style} = this.props;

src/agenda/reservation-list/reservation.tsx

@@ -9,19 +9,20 @@ import {isToday} from '../../dateutils';
 // @ts-expect-error
 import {RESERVATION_DATE} from '../../testIDs';
 import styleConstructor from './style';
-import {Theme, DayReservations, ReservationItemType} from '../../types';
+import {Theme, AgendaEntry} from '../../types';
 
 
 export interface ReservationProps {
-  item?: DayReservations;
+  date?: XDate;
+  item?: AgendaEntry;
   /** Specify theme properties to override specific styles for reservation parts. Default = {} */
   theme?: Theme;
   /** specify your item comparison function for increased performance */
-  rowHasChanged?: (a: ReservationItemType, b: ReservationItemType) => boolean;
+  rowHasChanged?: (a: AgendaEntry, b: AgendaEntry) => boolean;
   /** specify how each date should be rendered. date can be undefined if the item is not first in that day */
-  renderDay?: (date?: XDate, item?: ReservationItemType) => React.Component | JSX.Element;
+  renderDay?: (date?: XDate, item?: AgendaEntry) => React.Component | JSX.Element;
   /** specify how each item should be rendered in agenda */
-  renderItem?: (reservation: ReservationItemType, isFirst: boolean) => React.Component | JSX.Element;
+  renderItem?: (reservation: AgendaEntry, isFirst: boolean) => React.Component | JSX.Element;
   /** specify how empty date content with no items should be rendered */
   renderEmptyDate?: (date?: XDate) => React.Component | JSX.Element;
 }
@@ -30,6 +31,7 @@ class Reservation extends Component<ReservationProps> {
   static displayName = 'Reservation';
 
   static propTypes = {
+    date: PropTypes.any,
     item: PropTypes.any,
     /** Specify theme properties to override specific styles for reservation parts. Default = {} */
     theme: PropTypes.object,
@@ -51,29 +53,31 @@ class Reservation extends Component<ReservationProps> {
   }
 
   shouldComponentUpdate(nextProps: ReservationProps) {
+    const d1 = this.props.date;
+    const d2 = nextProps.date;
     const r1 = this.props.item;
     const r2 = nextProps.item;
     let changed = true;
 
-    if (!r1 && !r2) {
+    if (!d1 && !d2) {
       changed = false;
-    } else if (r1 && r2) {
-      if (r1.day.getTime() !== r2.day.getTime()) {
+    } else if (d1 && d2) {
+      if (d1.getTime() !== d2.getTime()) {
         changed = true;
-      } else if (!r1.reservation && !r2.reservation) {
+      } else if (!r1 && !r2) {
         changed = false;
-      } else if (r1.reservation && r2.reservation) {
-        if ((!r1.date && !r2.date) || (r1.date && r2.date)) {
+      } else if (r1 && r2) {
+        if ((!d1 && !d2) || (d1 && d2)) {
           if (isFunction(this.props.rowHasChanged)) {
-            changed = this.props.rowHasChanged(r1.reservation, r2.reservation);
+            changed = this.props.rowHasChanged(r1, r2);
           }
         }
       }
     }
     return changed;
   }
 
-  renderDate(date?: XDate, item?: ReservationItemType) {
+  renderDate(date?: XDate, item?: AgendaEntry) {
     if (isFunction(this.props.renderDay)) {
       return this.props.renderDay(date, item);
     }
@@ -98,23 +102,21 @@ class Reservation extends Component<ReservationProps> {
   }
 
   render() {
-    const {item} = this.props;
-    const reservation = item?.reservation;
-    const date = item?.date;
+    const {item, date} = this.props;
     let content;
 
-    if (reservation) {
+    if (item) {
       const firstItem = date ? true : false;
       if (isFunction(this.props.renderItem)) {
-        content = this.props.renderItem(reservation, firstItem);
+        content = this.props.renderItem(item, firstItem);
       }
     } else if (isFunction(this.props.renderEmptyDate)) {
       content = this.props.renderEmptyDate(date);
     }
 
     return (
       <View style={this.style.container}>
-        {this.renderDate(date, reservation)}
+        {this.renderDate(date, item)}
         <View style={this.style.innerContainer}>{content}</View>
       </View>
     );

src/index.ts

@@ -9,5 +9,5 @@ export {default as CalendarProvider, CalendarContextProviderProps} from './expan
 export {default as asCalendarConsumer} from './expandableCalendar/asCalendarConsumer';
 export {default as Timeline, TimelineProps} from './timeline/Timeline';
 export {default as CalendarUtils} from './services';
-export {DateData, ReservationItemType, ReservationsType} from './types';
+export {DateData, AgendaEntry, AgendaSchedule} from './types';
 export {default as LocaleConfig} from 'xdate';

src/types.ts

@@ -92,18 +92,12 @@ export interface Theme {
   };
 }
 
-export type ReservationItemType = {
+export type AgendaEntry = {
   name: string;
   height: number;
   day: string;
 }
 
-export type ReservationsType = {
-  [date: string]: ReservationItemType[];
-}
-
-export interface DayReservations {
-  reservation?: ReservationItemType;
-  date?: XDate;
-  day: XDate;
+export type AgendaSchedule = {
+  [date: string]: AgendaEntry[];
 }