Merge pull request #1811 from wix/infra/more_functional_components

Migrate to functional components - 2

Author: ethanshar

example/src/screens/calendars.tsx

@@ -43,7 +43,7 @@ const CalendarsScreen = () => {
     return (
       <Fragment>
         <Text style={styles.text}>Calendar with week numbers</Text>
-        <Calendar style={styles.calendar} hideExtraDays showWeekNumbers />
+        <Calendar style={styles.calendar} hideExtraDays showWeekNumbers/>
       </Fragment>
     );
   };
@@ -183,7 +183,7 @@ const CalendarsScreen = () => {
               }
             },
             '2012-05-23': {color: '#70d7c7', textColor: 'white', marked: true, dotColor: 'white'},
-            '2012-05-24': {color: '#70d7c7', textColor: 'white'},
+            '2012-05-24': {color: '#70d7c7', inactive: true},
             '2012-05-25': {
               endingDay: true,
               color: '#50cebb',
@@ -193,13 +193,16 @@ const CalendarsScreen = () => {
                 borderBottomRightRadius: 5
               }
             },
-            '2012-05-30': {disabled: true, disableTouchEvent: true}
+            '2012-05-30': {inactive: true, disableTouchEvent: true}
           }}
           disabledDaysIndexes={[0, 6]}
           theme={{
+            textInactiveColor: '#a68a9f',
             textSectionTitleDisabledColor: 'grey',
-            textSectionTitleColor: '#00BBF2'
+            textSectionTitleColor: '#319e8e',
+            arrowColor: '#319e8e'
           }}
+          onDayPress={(day) => console.warn(`${day.dateString} pressed`)}
         />
       </Fragment>
     );

example/src/screens/expandableCalendar.tsx

@@ -181,7 +181,7 @@ export default class ExpandableCalendarScreen extends Component<Props> {
   render() {
     return (
       <CalendarProvider
-        date={ITEMS[0].title}
+        date={ITEMS[1].title}
         onDateChanged={this.onDateChanged}
         onMonthChange={this.onMonthChange}
         showTodayButton

example/src/screens/horizontalCalendarList.tsx

@@ -1,33 +1,36 @@
-import React, {useState} from 'react';
+import React, {useState, useMemo, useCallback} from 'react';
 // @ts-expect-error
 import {CalendarList} from 'react-native-calendars';
 import testIDs from '../testIDs';
 
-const initialDate = '2020-05-16';
+const INITIAL_DATE = '2020-05-16';
 
 const HorizontalCalendarList = () => {
-  const [selected, setSelected] = useState(initialDate);
-  const markedDates = {
-    [selected]: {
-      selected: true,
-      selectedColor: '#DFA460'
-    }
-  };
+  const [selected, setSelected] = useState(INITIAL_DATE);
+  const markedDates = useMemo(() => {
+    return {
+      [selected]: {
+        selected: true,
+        selectedColor: '#DFA460'
+      }
+    };
+  }, [selected]);
 
-  const onDayPress = day => {
+  const onDayPress = useCallback((day) => {
     setSelected(day.dateString);
-  };
+  }, []);
 
   return (
     <CalendarList
-      testID={testIDs.horizontalList.CONTAINER}
+      current={INITIAL_DATE}
       markedDates={markedDates}
-      current={initialDate}
       pastScrollRange={24}
       futureScrollRange={24}
       horizontal
       pagingEnabled
       onDayPress={onDayPress}
+      testID={testIDs.horizontalList.CONTAINER}
+      staticHeader
     />
   );
 };