Merge pull request wix#1595 from wix/fix_types

Types fix
WemasteLLC · Aug 10, 2021 · f7eef22 · f7eef22
2 parents 74be726 + 94fd761
commit f7eef22
Show file tree

Hide file tree

Showing 26 changed files with 148 additions and 129 deletions.
diff --git a/example/src/screens/timelineCalendar.js b/example/src/screens/timelineCalendar.js
@@ -85,13 +85,13 @@ export default class TimelineCalendarScreen extends Component {
   };
 
   onDateChanged = date => {
-    // console.warn('ExpandableCalendarScreen onDateChanged: ', date, updateSource);
+    // console.warn('TimelineCalendarScreen onDateChanged: ', date, updateSource);
     // fetch and set data for date + week ahead
     this.setState({currentDate: date});
   };
 
   onMonthChange = (/* month, updateSource */) => {
-    // console.warn('ExpandableCalendarScreen onMonthChange: ', month, updateSource);
+    // console.warn('TimelineCalendarScreen onMonthChange: ', month, updateSource);
   };
 
   renderEmptyItem() {

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -377,10 +377,10 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
-  DoubleConversion: cde416483dac037923206447da6e1454df403714
+  DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
   FBLazyVector: e686045572151edef46010a6f819ade377dfeb4b
   FBReactNativeSpec: 92869e54fbef651850edc0f8ad2e5e53421f5fbe
-  glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3
+  glog: 73c2498ac6884b13ede40eda8228cb1eee9d9d62
   RCT-Folly: ec7a233ccc97cc556cf7237f0db1ff65b986f27c
   RCTRequired: 6d3e854f0e7260a648badd0d44fc364bc9da9728
   RCTTypeSafety: c1f31d19349c6b53085766359caac425926fafaa

diff --git a/src/agenda/index.tsx b/src/agenda/index.tsx
@@ -19,13 +19,17 @@ import {
 import {extractComponentProps} from '../component-updater.js';
 // @ts-expect-error
 import {parseDate, xdateToData, toMarkingFormat} from '../interface';
+// @ts-expect-error
 import {weekDayNames, sameDate, sameMonth} from '../dateutils';
+// @ts-expect-error
 import {AGENDA_CALENDAR_KNOB} from '../testIDs';
 // @ts-expect-error
 import {VelocityTracker} from '../input';
-import CalendarList, {CalendarListProps} from '../calendar-list';
+import {DateData} from '../types';
 import styleConstructor from './style';
-import ReservationList, {ReservationListProps} from './reservation-list';
+import CalendarList, {CalendarListProps} from '../calendar-list';
+import ReservationList, {ReservationListProps}  from './reservation-list';
+
 
 const HEADER_HEIGHT = 104;
 const KNOB_HEIGHT = 24;
@@ -40,31 +44,28 @@ export type ReservationsType = {
   [date: string]: ReservationItemType[];
 };
 
-export type AgendaProps = CalendarListProps &
-  ReservationListProps & {
-    /** agenda container style */
-    style?: ViewStyle;
-    /** the list of items that have to be displayed in agenda. If you want to render item as empty date
+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;
-    /** callback that gets called when items for a certain month should be loaded (month became visible) */
-    loadItemsForMonth?: (data: any) => void;
-    /** callback that fires when the calendar is opened or closed */
-    onCalendarToggled?: (enabled: boolean) => void;
-    /** callback that gets called on day press */
-    onDayPress?: (data: any) => void;
-    /** callback that gets called when day changes while scrolling agenda list */
-    onDaychange?: (data: any) => void; //TODO: Should be renamed 'onDayChange'
-    /** specify how agenda knob should look like */
-    renderKnob?: () => JSX.Element;
-    /** initially selected day */
-    selected: boolean; //TODO: Should be renamed 'selectedDay'
-    /** Hide knob button. Default = false */
-    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;
-  };
+  items: ReservationsType;
+  /** callback that gets called when items for a certain month should be loaded (month became visible) */
+  loadItemsForMonth?: (data: any) => DateData;
+  /** 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;
+  /** specify how agenda knob should look like */
+  renderKnob?: () => JSX.Element;
+  /** initially selected day */
+  selected: boolean, //TODO: Should be renamed 'selectedDay'
+  /** Hide knob button. Default = false */
+  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
+}
 
 type AgendaState = {
   scrollY: Animated.Value;
@@ -101,7 +102,7 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
     /** callback that gets called on day press */
     onDayPress: PropTypes.func,
     /** callback that gets called when day changes while scrolling agenda list */
-    onDaychange: PropTypes.func, //TODO: Should be renamed 'onDayChange'
+    onDayChange: PropTypes.func,
     /** specify how agenda knob should look like */
     renderKnob: PropTypes.func,
     /** initially selected day */
@@ -120,10 +121,10 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
   private currentMonth: XDate;
   private knobTracker: any;
   private _isMounted: boolean | undefined;
-  private scrollPad: any;
-  private calendar: any;
-  private knob: any;
-  public list: any;
+  private scrollPad: React.RefObject<any> = React.createRef();
+  private calendar: React.RefObject<CalendarList> = React.createRef();
+  private knob: React.RefObject<any> = React.createRef();
+  public list: React.RefObject<ReservationList> = React.createRef();
 
   constructor(props: AgendaProps) {
     super(props);
@@ -187,11 +188,11 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
   };
 
   setScrollPadPosition = (y: number, animated: boolean) => {
-    if (this.scrollPad?.scrollTo) {
-      this.scrollPad.scrollTo({x: 0, y, animated});
+    if (this.scrollPad?.current?.scrollTo) {
+      this.scrollPad.current.scrollTo({x: 0, y, animated});
     } else {
       // Support for RN O.61 (Expo 37)
-      this.scrollPad.getNode().scrollTo({x: 0, y, animated});
+      this.scrollPad?.current?.getNode().scrollTo({x: 0, y, animated});
     }
   };
 
@@ -216,7 +217,7 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
     // in CalendarList listView, but that might impact performance when scrolling
     // month list in expanded CalendarList.
     // Further info https://github.com/facebook/react-native/issues/1831
-    this.calendar.scrollToDay(this.state.selectedDay, this.calendarOffset() + 1, true);
+    this.calendar?.current?.scrollToDay(this.state.selectedDay, this.calendarOffset() + 1, true);
   }
 
   loadReservations(props: AgendaProps) {
@@ -253,7 +254,7 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
     }
 
     this.setScrollPadPosition(this.initialScrollPadPosition(), true);
-    this.calendar.scrollToDay(day, this.calendarOffset(), true);
+    this.calendar?.current?.scrollToDay(day, this.calendarOffset(), true);
 
     _.invoke(this.props, 'loadItemsForMonth', xdateToData(day));
     _.invoke(this.props, 'onDayPress', xdateToData(day));
@@ -283,7 +284,7 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
   };
 
   onCalendarListLayout = () => {
-    this.calendar.scrollToDay(this.state.selectedDay.clone(), this.calendarOffset(), false);
+    this.calendar?.current?.scrollToDay(this.state.selectedDay.clone(), this.calendarOffset(), false);
   };
 
   onLayout = (event: LayoutChangeEvent) => {
@@ -294,15 +295,11 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
 
   onTouchStart = () => {
     this.headerState = 'touched';
-    if (this.knob) {
-      this.knob.setNativeProps({style: {opacity: 0.5}});
-    }
+    this.knob?.current?.setNativeProps({style: {opacity: 0.5}});
   };
 
   onTouchEnd = () => {
-    if (this.knob) {
-      this.knob.setNativeProps({style: {opacity: 1}});
-    }
+    this.knob?.current?.setNativeProps({style: {opacity: 1}});
 
     if (this.headerState === 'touched') {
       const isOpen = this.state.calendarScrollable;
@@ -330,7 +327,7 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
     this.enableCalendarScrolling(snapY === 0);
   };
 
-  onVisibleMonthsChange = (months: string[]) => {
+  onVisibleMonthsChange = (months: DateData[]) => {
     _.invoke(this.props, 'onVisibleMonthsChange', months);
 
     if (this.props.items && !this.state.firstReservationLoad) {
@@ -348,7 +345,7 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
     const newDate = parseDate(day);
     const withAnimation = sameMonth(newDate, this.state.selectedDay);
 
-    this.calendar.scrollToDay(day, this.calendarOffset(), withAnimation);
+    this.calendar?.current?.scrollToDay(day, this.calendarOffset(), withAnimation);
     this.setState({
       selectedDay: newDate
     });
@@ -362,7 +359,7 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
     return (
       <ReservationList
         {...reservationListProps}
-        ref={c => (this.list = c)}
+        ref={this.list}
         reservations={this.props.items}
         selectedDay={this.state.selectedDay}
         topDay={this.state.topDay}
@@ -380,7 +377,7 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
     return (
       <CalendarList
         {...calendarListProps}
-        ref={c => (this.calendar = c)}
+        ref={this.calendar}
         current={this.currentMonth}
         markedDates={this.generateMarkings(this.state.selectedDay, markedDates, items)}
         calendarWidth={this.viewWidth}
@@ -398,13 +395,12 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
     let knob: JSX.Element | null = <View style={this.style.knobContainer} />;
 
     if (!hideKnob) {
-      const knobView = renderKnob ? renderKnob() : <View style={this.style.knob} />;
-      knob =
-        !this.state.calendarScrollable || showClosingKnob ? (
-          <View style={this.style.knobContainer}>
-            <View ref={c => (this.knob = c)}>{knobView}</View>
-          </View>
-        ) : null;
+      const knobView = renderKnob ? renderKnob() : <View style={this.style.knob}/>;
+      knob = !this.state.calendarScrollable || showClosingKnob ? (
+        <View style={this.style.knobContainer}>
+          <View ref={this.knob}>{knobView}</View>
+        </View>
+      ) : null;
     }
     return knob;
   }
@@ -493,7 +489,7 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
           {this.renderWeekDaysNames(weekDaysNames)}
         </Animated.View>
         <Animated.ScrollView
-          ref={(ref: any) => (this.scrollPad = ref)}
+          ref={this.scrollPad}
           style={[this.style.scrollPadStyle, scrollPadStyle]}
           overScrollMode="never"
           showsHorizontalScrollIndicator={false}

diff --git a/src/agenda/platform-style.ios.ts b/src/agenda/platform-style.ios.ts
@@ -1,4 +1,4 @@
-import {Theme} from '../commons/types';
+import {Theme} from '../types';
 
 export default function platformStyles(appStyle: Theme) {
   return {

diff --git a/src/agenda/platform-style.ts b/src/agenda/platform-style.ts
@@ -1,5 +1,5 @@
 import {ViewStyle} from 'react-native';
-import {Theme} from '../commons/types';
+import {Theme} from '../types';
 
 export default function platformStyles(appStyle: Theme) {
   return {

diff --git a/src/agenda/reservation-list/index.tsx b/src/agenda/reservation-list/index.tsx
@@ -3,25 +3,19 @@ import PropTypes from 'prop-types';
 import XDate from 'xdate';
 
 import React, {Component} from 'react';
-import {
-  ActivityIndicator,
-  View,
-  FlatList,
-  ViewStyle,
-  TextStyle,
-  NativeSyntheticEvent,
-  NativeScrollEvent,
-  LayoutChangeEvent
-} from 'react-native';
+import {ActivityIndicator, View, FlatList, StyleProp, ViewStyle, TextStyle, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent} from 'react-native';
 
 // @ts-expect-error
 import {extractComponentProps} from '../../component-updater';
+// @ts-expect-error
 import {sameDate} from '../../dateutils';
+// @ts-expect-error
 import {toMarkingFormat} from '../../interface';
 import styleConstructor from './style';
 import Reservation, {ReservationProps} from './reservation';
 import {ReservationItemType, ReservationsType} from 'agenda';
 
+
 export interface DayReservations {
   reservation?: ReservationItemType;
   date?: XDate;
@@ -41,7 +35,7 @@ export type ReservationListProps = ReservationProps & {
   onDayChange?: (day: Date) => void;
   /** specify what should be rendered instead of ActivityIndicator */
   renderEmptyData: () => JSX.Element;
-  style?: ViewStyle;
+  style?: StyleProp<ViewStyle>;
 
   /** onScroll ListView event */
   onScroll?: (yOffset: number) => void;
@@ -109,7 +103,8 @@ class ReservationList extends Component<ReservationListProps, ReservationsListSt
   private heights: number[];
   private selectedDay: XDate;
   private scrollOver: boolean;
-  private list?: FlatList<DayReservations> | null;
+  private list: React.RefObject<FlatList> = React.createRef();
+
 
   constructor(props: ReservationListProps) {
     super(props);
@@ -159,7 +154,7 @@ class ReservationList extends Component<ReservationListProps, ReservationsListSt
         scrollPosition += this.heights[i] || 0;
       }
       this.scrollOver = false;
-      this.list.scrollToOffset({offset: scrollPosition, animated: true});
+      this.list?.current?.scrollToOffset({offset: scrollPosition, animated: true});
     }
     this.selectedDay = selectedDay;
     this.updateDataSource(reservations.reservations);
@@ -294,7 +289,7 @@ class ReservationList extends Component<ReservationListProps, ReservationsListSt
 
     return (
       <FlatList
-        ref={c => (this.list = c)}
+        ref={this.list}
         style={style}
         contentContainerStyle={this.style.content}
         data={this.state.reservations}

diff --git a/src/agenda/reservation-list/reservation.tsx b/src/agenda/reservation-list/reservation.tsx
@@ -7,12 +7,15 @@ import {View, Text} from 'react-native';
 
 // @ts-expect-error
 import {xdateToData} from '../../interface';
+// @ts-expect-error
 import {isToday} from '../../dateutils';
+// @ts-expect-error
 import {RESERVATION_DATE} from '../../testIDs';
 import styleConstructor from './style';
-import {Theme} from '../../commons/types';
+import {Theme} from '../../types';
 import {DayReservations} from './index';
 
+
 export interface ReservationProps {
   item: DayReservations;
   /** Specify theme properties to override specific styles for reservation parts. Default = {} */

diff --git a/src/agenda/reservation-list/style.ts b/src/agenda/reservation-list/style.ts
@@ -1,6 +1,6 @@
 import {StyleSheet} from 'react-native';
 import * as defaultStyle from '../../style';
-import {Theme} from '../../commons/types';
+import {Theme} from '../../types';
 
 
 export default function styleConstructor(theme: Theme = {}) {

diff --git a/src/agenda/style.ts b/src/agenda/style.ts
@@ -1,7 +1,7 @@
 import {StyleSheet} from 'react-native';
 import * as defaultStyle from '../style';
 import platformStyles from './platform-style';
-import {Theme} from '../commons/types';
+import {Theme} from '../types';
 
 
 export default function styleConstructor(theme: Theme = {}) {