Feat/calendar

demo/src/screens/PlaygroundScreen.tsx

@@ -1,5 +1,4 @@
 import React, {Component} from 'react';
-import {StyleSheet} from 'react-native';
 import {View, Text, Card, TextField, Button} from 'react-native-ui-lib'; //eslint-disable-line
 
 export default class PlaygroundScreen extends Component {
@@ -19,7 +18,3 @@ export default class PlaygroundScreen extends Component {
     );
   }
 }
-
-const styles = StyleSheet.create({
-  container: {}
-});

demo/src/screens/incubatorScreens/IncubatorCalendarScreen/MockServer.ts

@@ -0,0 +1,22 @@
+import _ from 'lodash';
+import {data} from './MockData';
+
+const PAGE_SIZE = 100;
+const FAKE_FETCH_TIME = 1500;
+
+class MockServer {
+  async getEvents(date: number): Promise<any[]> {
+    return new Promise(resolve => {
+      const eventIndexByDate = _.findIndex(data, event => {
+        return event.start > date;
+      });
+
+      setTimeout(() => {
+        const newEvents = _.slice(data, eventIndexByDate - PAGE_SIZE / 2, eventIndexByDate + PAGE_SIZE / 2);
+        resolve(newEvents);
+      }, FAKE_FETCH_TIME);
+    });
+  }
+}
+
+export default new MockServer();

demo/src/screens/incubatorScreens/IncubatorCalendarScreen/index.tsx

@@ -1,27 +1,50 @@
+import _ from 'lodash';
 import React, {Component} from 'react';
-import {View, Incubator} from 'react-native-ui-lib';
-import {data} from './MockData';
+import {Incubator} from 'react-native-ui-lib';
+import MockServer from './MockServer';
 
 export default class CalendarScreen extends Component {
-  // constructor(props) {
-  //   super(props);
-
-  //   setTimeout(() => {
-  //     this.setState({date: 1676026748000});
-  //   }, 2000);
-  // }
+  pageIndex = 0;
 
   state = {
-    date: undefined
+    date: new Date().getTime(),
+    events: [] as any[],
+    showLoader: false
   };
-
+
+  constructor(props: any) {
+    super(props);
+    this.loadEvents(this.state.date);
+  }
+
+  loadEvents = async (date: number) => {
+    this.setState({showLoader: true});
+    const {events} = this.state;
+    const newEvents = await MockServer.getEvents(date);
+    this.pageIndex++;
+    this.setState({events: _.uniqBy([...events, ...newEvents], e => e.id), showLoader: false});
+  };
+
+  onChangeDate = (date: number) => {
+    console.log('Date change: ', date);
+    const {events} = this.state;
+    if (date < events[0]?.start || date > _.last(events)?.start) {
+      console.log('Load new events');
+      this.loadEvents(date);
+    }
+  };
+
+  onEndReached = (date: number) => {
+    console.log('Reached End: ', date);
+    this.loadEvents(date);
+  };
+
   render() {
+    const {date, events, showLoader} = this.state;
     return (
-      <View flex>
-        <Incubator.Calendar data={data} staticHeader initialDate={this.state.date}>
-          <Incubator.Calendar.Agenda/>
-        </Incubator.Calendar>
-      </View>
+      <Incubator.Calendar data={events} initialDate={date} onChangeDate={this.onChangeDate} staticHeader>
+        <Incubator.Calendar.Agenda onEndReached={this.onEndReached} showLoader={showLoader}/>
+      </Incubator.Calendar>
     );
   }
 }

src/incubator/Calendar/Agenda.tsx

@@ -1,18 +1,20 @@
 import React, {useContext, useCallback, useRef} from 'react';
+import {ActivityIndicator} from 'react-native';
 import {runOnJS, useAnimatedReaction, useSharedValue} from 'react-native-reanimated';
 import {FlashListPackage} from 'optionalDeps';
 import type {FlashList as FlashListType, ViewToken} from '@shopify/flash-list';
-import {BorderRadiuses} from 'style';
+import {BorderRadiuses, Colors} from 'style';
 import View from '../../components/view';
 import Text from '../../components/text';
 import {isSameDay, isSameMonth} from './helpers/DateUtils';
-import {InternalEvent, Event, DateSectionHeader, UpdateSource} from './types';
+import {AgendaProps, InternalEvent, Event, DateSectionHeader, UpdateSource} from './types';
 import CalendarContext from './CalendarContext';
 
 const FlashList = FlashListPackage?.FlashList;
 
 // TODO: Fix initial scrolling
-function Agenda() {
+function Agenda(props: AgendaProps) {
+  const {onEndReached, showLoader} = props;
   const {data, selectedDate, setDate, updateSource} = useContext(CalendarContext);
   const flashList = useRef<FlashListType<InternalEvent>>(null);
   const closestSectionHeader = useSharedValue<DateSectionHeader | null>(null);
@@ -48,14 +50,7 @@ function Agenda() {
 
   const renderHeader = useCallback((item: DateSectionHeader) => {
     return (
-      <View
-        marginB-1
-        paddingB-4
-        marginH-10
-        paddingH-10
-        height={50}
-        bottom
-      >
+      <View marginB-1 paddingB-4 marginH-10 paddingH-10 height={50} bottom>
         <Text>{item.header}</Text>
       </View>
     );
@@ -96,7 +91,7 @@ function Agenda() {
     return selectedDate.value;
   },
   (selected, previous) => {
-    if (updateSource?.value !== UpdateSource.AGENDA_SCROLL) {
+    if (updateSource.value !== UpdateSource.AGENDA_SCROLL) {
       if (
         selected !== previous &&
           (closestSectionHeader.value?.date === undefined || !isSameDay(selected, closestSectionHeader.value?.date))
@@ -142,19 +137,32 @@ function Agenda() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const _onEndReached = useCallback(() => {
+    onEndReached?.(selectedDate.value);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [onEndReached]);
+
   return (
-    <FlashList
-      ref={flashList}
-      estimatedItemSize={52}
-      data={data}
-      keyExtractor={keyExtractor}
-      renderItem={renderItem}
-      getItemType={getItemType}
-      onViewableItemsChanged={onViewableItemsChanged}
-      onMomentumScrollBegin={onMomentumScrollBegin}
-      onScrollBeginDrag={onScrollBeginDrag}
-      initialScrollIndex={findClosestDateAfter(selectedDate.value)?.index ?? 0}
-    />
+    <View flex>
+      <FlashList
+        ref={flashList}
+        estimatedItemSize={52}
+        data={data}
+        keyExtractor={keyExtractor}
+        renderItem={renderItem}
+        getItemType={getItemType}
+        onViewableItemsChanged={onViewableItemsChanged}
+        onMomentumScrollBegin={onMomentumScrollBegin}
+        onScrollBeginDrag={onScrollBeginDrag}
+        initialScrollIndex={findClosestDateAfter(selectedDate.value)?.index ?? 0}
+        onEndReached={_onEndReached}
+      />
+      {showLoader && (
+        <View absF center style={{backgroundColor: Colors.rgba(Colors.grey10, 0.2)}}>
+          <ActivityIndicator/>
+        </View>
+      )}
+    </View>
   );
 }
 

src/incubator/Calendar/CalendarItem.tsx

@@ -7,7 +7,8 @@ import CalendarContext from './CalendarContext';
 import Month from './Month';
 import Header from './Header';
 
-const CALENDAR_HEIGHT = 250;
+
+const CALENDAR_HEIGHT = 270;
 
 function CalendarItem(props: CalendarItemProps) {
   const {year, month} = props;
@@ -21,6 +22,7 @@ function CalendarItem(props: CalendarItemProps) {
         height: CALENDAR_HEIGHT - (staticHeader ? headerHeight.value : 0)
       }
     ];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [staticHeader]);
 
   if (month !== undefined) {
@@ -34,7 +36,7 @@ function CalendarItem(props: CalendarItemProps) {
   return null;
 }
 
-export default CalendarItem;
+export default React.memo(CalendarItem);
 
 const styles = StyleSheet.create({
   container: {

src/incubator/Calendar/Day.tsx

@@ -1,7 +1,7 @@
 import isNull from 'lodash/isNull';
 import React, {useContext, useCallback} from 'react';
 import {StyleSheet} from 'react-native';
-import Reanimated, {useSharedValue, useAnimatedStyle, useAnimatedReaction} from 'react-native-reanimated';
+import Reanimated, {useSharedValue, useAnimatedStyle, useAnimatedReaction, withTiming} from 'react-native-reanimated';
 import {Colors} from 'style';
 import View from '../../components/view';
 import TouchableOpacity from '../../components/touchableOpacity';
@@ -11,50 +11,61 @@ import {DayProps, UpdateSource} from './types';
 import CalendarContext from './CalendarContext';
 
 
+const DAY_SIZE = 32;
+const SELECTION_SIZE = 24;
+const NO_COLOR = Colors.transparent;
+const TEXT_COLOR = Colors.$textPrimary;
+const TODAY_BACKGROUND_COLOR = Colors.$backgroundPrimaryLight;
+const INACTIVE_TODAY_BACKGROUND_COLOR = Colors.$backgroundNeutral;
+const SELECTED_BACKGROUND_COLOR = Colors.$backgroundPrimaryHeavy;
+const SELECTED_TEXT_COLOR = Colors.$textDefaultLight;
+const INACTIVE_TEXT_COLOR = Colors.$textNeutralLight;
+
 const AnimatedText = Reanimated.createAnimatedComponent(Text);
 
 const Day = (props: DayProps) => {
-  const {date, onPress} = props;
-  const {selectedDate, setDate} = useContext(CalendarContext);
+  const {date, onPress, inactive} = props;
+  const {selectedDate, setDate, showExtraDays} = useContext(CalendarContext);
 
-  const shouldMarkSelected = !isNull(date) ? isSameDay(selectedDate.value, date) : false;
-  const isSelected = useSharedValue(shouldMarkSelected);
+  const isSelected = useSharedValue(!isNull(date) ? isSameDay(selectedDate.value, date) : false);
+  const backgroundColor = !isToday(date) ? NO_COLOR :
+    inactive ? INACTIVE_TODAY_BACKGROUND_COLOR : TODAY_BACKGROUND_COLOR;
+  const isHidden = !showExtraDays && inactive;
 
-  const backgroundColor = isToday(date) ? Colors.$backgroundSuccessHeavy : Colors.transparent;
-  const textColor = isToday(date) ? Colors.$textDefaultLight : Colors.$backgroundPrimaryHeavy;
-
-  const animatedStyles = useAnimatedStyle(() => {
+  useAnimatedReaction(() => {
+    return selectedDate.value;
+  }, (selected) => {
+    isSelected.value = !inactive && isSameDay(selected, date!);
+  }, []);
+
+  const animatedSelectionStyles = useAnimatedStyle(() => {
     return {
-      backgroundColor: isSelected.value ? Colors.$backgroundPrimaryHeavy : backgroundColor,
-      color: isSelected.value ? Colors.$textDefaultLight : textColor
+      backgroundColor: withTiming(isSelected.value ? SELECTED_BACKGROUND_COLOR : backgroundColor, {duration: 100})
     };
   });
 
   const animatedTextStyles = useAnimatedStyle(() => {
     return {
-      color: isSelected.value ? Colors.$textDefaultLight : textColor
+      color: withTiming(isSelected.value ? 
+        SELECTED_TEXT_COLOR : inactive ? 
+          showExtraDays ? INACTIVE_TEXT_COLOR : NO_COLOR : TEXT_COLOR, {duration: 100})
     };
   });
 
-  useAnimatedReaction(() => {
-    return selectedDate.value;
-  }, (selected) => {
-    isSelected.value = isSameDay(selected, date!);
-  }, []);
-
   const _onPress = useCallback(() => {
-    if (date !== null) {
+    if (date !== null && !isHidden) {
       isSelected.value = true;
       setDate(date, UpdateSource.DAY_SELECT);
       onPress?.(date);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [date, setDate, onPress]);
 
   const renderDay = () => {
     const day = !isNull(date) ? getDayOfDate(date) : '';
     return (
       <View center>
-        <View reanimated style={[styles.selection, animatedStyles]}/>
+        <View reanimated style={[styles.selection, animatedSelectionStyles]}/>
         <AnimatedText style={animatedTextStyles}>{day}</AnimatedText>
       </View>
     );
@@ -71,13 +82,13 @@ export default Day;
 
 const styles = StyleSheet.create({
   dayContainer: {
-    width: 32,
-    height: 32
+    width: DAY_SIZE,
+    height: DAY_SIZE
   },
   selection: {
     position: 'absolute',
-    width: 24,
-    height: 24,
-    borderRadius: 12
+    width: SELECTION_SIZE,
+    height: SELECTION_SIZE,
+    borderRadius: SELECTION_SIZE / 2
   }
 });

src/incubator/Calendar/Header.tsx

@@ -4,28 +4,36 @@ import Reanimated, {useAnimatedProps} from 'react-native-reanimated';
 import {Colors, Typography} from 'style';
 import View from '../../components/view';
 import Button from '../../components/button';
-import {getDateObject, addMonths, getMonthForIndex} from './helpers/DateUtils';
+import {getDateObject, getMonthForIndex, addMonths, getTimestamp} from './helpers/DateUtils';
 import {HeaderProps, DayNamesFormat, UpdateSource} from './types';
 import CalendarContext from './CalendarContext';
 import WeekDaysNames from './WeekDaysNames';
 
-const AnimatedTextInput = Reanimated.createAnimatedComponent(TextInput);
-const WEEK_NUMBER_WIDTH = 30;
 
+const WEEK_NUMBER_WIDTH = 32;
 const ARROW_NEXT = require('./assets/arrowNext.png');
 const ARROW_BACK = require('./assets/arrowBack.png');
 
+const AnimatedTextInput = Reanimated.createAnimatedComponent(TextInput);
+
 const Header = (props: HeaderProps) => {
   const {month, year} = props;
   const {selectedDate, setDate, showWeeksNumbers, staticHeader, setHeaderHeight} = useContext(CalendarContext);
 
+  const getNewDate = useCallback((count: number) => {
+    const newDate = addMonths(selectedDate.value, count);
+    const dateObject = getDateObject(newDate);
+    return getTimestamp({year: dateObject.year, month: dateObject.month, day: 1});
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const onLeftArrowPress = useCallback(() => {
-    setDate(addMonths(selectedDate.value, -1), UpdateSource.MONTH_ARROW);
-  }, [selectedDate.value, setDate]);
+    setDate(getNewDate(-1), UpdateSource.MONTH_ARROW);
+  }, [setDate, getNewDate]);
 
   const onRightArrowPress = useCallback(() => {
-    setDate(addMonths(selectedDate.value, 1), UpdateSource.MONTH_ARROW);
-  }, [selectedDate.value, setDate]);
+    setDate(getNewDate(1), UpdateSource.MONTH_ARROW);
+  }, [setDate, getNewDate]);
 
   const animatedProps = useAnimatedProps(() => {
     const dateObject = getDateObject(selectedDate.value);
@@ -38,7 +46,7 @@ const Header = (props: HeaderProps) => {
 
   const onLayout = useCallback((event: LayoutChangeEvent) => {
     setHeaderHeight?.(event.nativeEvent.layout.height);
-  }, []);
+  }, [setHeaderHeight]);
 
   const renderTitle = () => {
     // @ts-expect-error