Merge pull request #1704 from wix/fix/TSConfiguration

Fix/ts configuration

Author: Inbal-Tish

example/src/screens/calendars.tsx

@@ -1,7 +1,6 @@
 import React, {useState, Fragment} from 'react';
 import {StyleSheet, View, ScrollView, Text, TouchableOpacity, Switch} from 'react-native';
-// @ts-expect-error
-import {Calendar} from 'react-native-calendars';
+import {Calendar, CalendarProps} from 'react-native-calendars';
 import testIDs from '../testIDs';
 
 const INITIAL_DATE = '2020-02-02';
@@ -14,7 +13,7 @@ const CalendarsScreen = () => {
     setShowMarkedDatesExamples(!showMarkedDatesExamples);
   };
 
-  const onDayPress = day => {
+  const onDayPress: CalendarProps['onDayPress'] = day => {
     setSelected(day.dateString);
   };
 
@@ -349,7 +348,7 @@ const CalendarsScreen = () => {
             return (
               <View>
                 <Text style={[styles.customDay, state === 'disabled' ? styles.disabledText : styles.defaultText]}>
-                  {date.day}
+                  {date?.day}
                 </Text>
               </View>
             );
@@ -362,6 +361,7 @@ const CalendarsScreen = () => {
   const renderCalendarWithCustomHeader = () => {
     const CustomHeader = React.forwardRef((props, ref) => {
       return (
+        // @ts-expect-error
         <View ref={ref} {...props} style={styles.customHeader}>
           <Text>This is a custom header!</Text>
           <TouchableOpacity onPress={() => console.warn('Tapped!')}>

package.json

@@ -43,7 +43,7 @@
     "@babel/eslint-parser": "^7.13.4",
     "@babel/runtime": "^7.12.5",
     "@types/lodash": "^4.14.170",
-    "@types/react-native": "^0.63.52",
+    "@types/react-native": "^0.64.19",
     "@types/xdate": "^0.8.32",
     "@typescript-eslint/eslint-plugin": "^2.13.0",
     "@typescript-eslint/parser": "^2.13.0",

src/agenda/reservation-list/index.tsx

@@ -10,7 +10,7 @@ import {sameDate} from '../../dateutils';
 import {toMarkingFormat} from '../../interface';
 import styleConstructor from './style';
 import Reservation, {ReservationProps} from './reservation';
-import {ReservationItemType, ReservationsType} from 'agenda';
+import {ReservationItemType, ReservationsType} from '../../agenda';
 
 
 export interface DayReservations {

src/calendar/day/index.tsx

@@ -13,14 +13,15 @@ import {SELECT_DATE_SLOT} from '../../testIDs';
 import BasicDay, {BasicDayProps} from './basic';
 import PeriodDay from './period';
 import {MarkingProps} from './marking';
+import {DateData} from '../../types';
 
 const basicDayPropsTypes = omit(BasicDay.propTypes, 'date');
 
 export interface DayProps extends Omit<BasicDayProps, 'date'> {
   /** The day to render */
   day?: XDate;
   /** Provide custom day rendering component */
-  dayComponent?: any;
+  dayComponent?: React.ComponentType<DayProps & {date?: DateData}>;
 }
 
 export default class Day extends Component<DayProps> {

src/calendar/day/marking/index.tsx

@@ -1,7 +1,7 @@
 import filter from 'lodash/filter';
 
 import React, {Component} from 'react';
-import {View, ViewStyle, TextStyle} from 'react-native';
+import {View, ViewStyle, TextStyle, StyleProp} from 'react-native';
 
 import {Theme, MarkingTypes} from '../../../types';
 import {shouldUpdate, extractComponentProps} from '../../../componentUpdater';
@@ -44,8 +44,11 @@ export interface MarkingProps extends DotProps {
   inactive?: boolean;
   disableTouchEvent?: boolean;
   activeOpacity?: number;
+  textColor?: string;
   selectedColor?: string;
   selectedTextColor?: string;
+  customTextStyle?: StyleProp<TextStyle>;
+  customContainerStyle?: StyleProp<ViewStyle>;
   dotColor?: string;
   //multi-dot
   dots?: DOT[];

src/calendar/header/style.ts

@@ -39,6 +39,7 @@ export default function (theme: Theme = {}) {
     disabledArrowImage: {
       tintColor: appStyle.disabledArrowColor
     },
+    // @ts-expect-error
     week: {
       marginTop: 7,
       flexDirection: 'row',
@@ -57,7 +58,6 @@ export default function (theme: Theme = {}) {
     disabledDayHeader: {
       color: appStyle.textSectionTitleDisabledColor
     },
-    // @ts-expect-error
     ...(theme['stylesheet.calendar.header'] || {})
   });
 }

src/calendar/index.tsx

@@ -31,11 +31,11 @@ export interface CalendarProps extends CalendarHeaderProps, DayProps {
   /** Specify style for calendar container element */
   style?: StyleProp<ViewStyle>;
   /** Initially visible month */
-  current?: XDate;
+  current?: string;
   /** Minimum date that can be selected, dates before minDate will be grayed out */
-  minDate?: XDate;
+  minDate?: string;
   /** Maximum date that can be selected, dates after maxDate will be grayed out */
-  maxDate?: XDate;
+  maxDate?: string;
   /** If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday */
   firstDay?: number;
   /** Collection of dates that have to be marked */

src/expandableCalendar/index.tsx

@@ -13,7 +13,7 @@ import {AccessibilityInfo, PanResponder, Animated, View, ViewStyle, Text, Image,
 import {CALENDAR_KNOB} from '../testIDs';
 import {page, weekDayNames} from '../dateutils';
 import {parseDate, toMarkingFormat} from '../interface';
-import {Theme, DateData, Direction} from 'types';
+import {Theme, DateData, Direction} from '../types';
 import styleConstructor, {HEADER_HEIGHT} from './style';
 import CalendarList, {CalendarListProps} from '../calendar-list';
 import Calendar from '../calendar';
@@ -139,7 +139,7 @@ class ExpandableCalendar extends Component<Props, State> {
     style: ViewStyle;
   };
   visibleMonth: number;
-  visibleYear: number;
+  visibleYear: number | undefined;
   initialDate: XDate;
   headerStyleOverride: Theme;
   header: React.RefObject<any> = React.createRef();
@@ -436,7 +436,6 @@ class ExpandableCalendar extends Component<Props, State> {
     if (month && this.visibleMonth !== month) {
       this.visibleMonth = month; 
       if (first(value)?.year) {
-        // @ts-expect-error
         this.visibleYear = first(value)?.year;
       }
 
@@ -580,6 +579,7 @@ class ExpandableCalendar extends Component<Props, State> {
               {...others}
               theme={themeObject}
               ref={this.calendar}
+              // @ts-expect-error should be converted to string
               current={this.initialDate}
               onDayPress={this.onDayPress}
               onVisibleMonthsChange={this.onVisibleMonthsChange}

src/expandableCalendar/week.tsx

@@ -12,7 +12,8 @@ import Day from '../calendar/day/index';
 // import BasicDay from '../calendar/day/basic';
 
 
-interface Props extends CalendarProps {
+// TODO: current type should be a string
+interface Props extends Omit<CalendarProps, 'current'> {
   current: XDate;
 }
 export type WeekProps = Props;

src/types.ts

@@ -1,7 +1,6 @@
-import {ViewStyle, TextStyle} from 'react-native';
+import {ViewStyle, TextStyle, StyleProp} from 'react-native';
 import {UpdateSources} from './expandableCalendar/commons';
 
-
 export type MarkingTypes = 'dot' | 'multi-dot' | 'period' | 'multi-period' | 'custom';
 export type DayState = 'selected' | 'disabled' | 'inactive' | 'today' | '';
 export type Direction = 'left' | 'right';
@@ -12,7 +11,7 @@ export type DateData = {
   day: number;
   timestamp: number;
   dateString: string;
-}
+};
 export interface Theme {
   container?: object;
   contentStyle?: ViewStyle;
@@ -88,4 +87,7 @@ export interface Theme {
   arrowHeight?: number;
   arrowWidth?: number;
   weekVerticalMargin?: number;
+  'stylesheet.calendar.header'?: {
+    week: StyleProp<ViewStyle>;
+  };
 }