react-native-ui-lib 7.40.1-snapshot.6844 → 7.40.1-snapshot.6845

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.40.1-snapshot.6844",
+  "version": "7.40.1-snapshot.6845",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",

package/src/incubator/calendar/Agenda.js

@@ -1,21 +1,19 @@
-import React, { useContext, useCallback, useRef } from 'react';
+import React, { useContext, useCallback, useRef, useState } from 'react';
 import { ActivityIndicator, StyleSheet } from 'react-native';
 import { runOnJS, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
 import { FlashListPackage } from "../../optionalDependencies";
 import { BorderRadiuses, Colors } from "../../style";
+import { useDidUpdate } from "../../hooks";
 import View from "../../components/view";
 import Text from "../../components/text";
 import { isSameDay, isSameMonth } from "./helpers/DateUtils";
 import { UpdateSource } from "./types";
 import CalendarContext from "./CalendarContext";
 const FlashList = FlashListPackage?.FlashList;
-
-// TODO: Fix initial scrolling
 function Agenda(props) {
   const {
     renderEvent,
     renderHeader,
-    itemHeight = 50,
     onEndReached,
     showLoader
   } = props;
@@ -28,18 +26,27 @@ function Agenda(props) {
   const flashList = useRef(null);
   const closestSectionHeader = useSharedValue(null);
   const scrolledByUser = useSharedValue(false);
+  const [stickyHeaderIndices, setStickyHeaderIndices] = useState([]);
+  const lastDateBeforeLoadingNewEvents = useSharedValue(selectedDate.value);
 
   /* const keyExtractor = useCallback((item: InternalEvent) => {
     return item.type === 'Event' ? item.id : item.header;
   }, []); */
 
+  useDidUpdate(() => {
+    const result = findClosestDateAfter(lastDateBeforeLoadingNewEvents.value);
+    if (result?.index) {
+      setTimeout(() => scrollToIndex(result?.index, false), 200);
+    }
+    const headerIndices = data.map((e, index) => e.type === 'Header' ? index : undefined).filter(i => i !== undefined);
+    // @ts-expect-error
+    setStickyHeaderIndices(headerIndices);
+  }, [data]);
   const _renderEvent = useCallback(eventItem => {
     if (renderEvent) {
-      return <View height={itemHeight} style={styles.eventContainer}>
-          {renderEvent(eventItem)}
-        </View>;
+      return <View style={styles.eventContainer}>{renderEvent(eventItem)}</View>;
     }
-    return <View marginV-1 marginH-10 paddingH-10 height={itemHeight} centerV style={styles.event}>
+    return <View marginV-1 marginH-10 paddingH-10 centerV style={styles.event}>
         <Text>
           Item for
           {new Date(eventItem.start).toLocaleString('en-GB', {
@@ -56,15 +63,15 @@ function Agenda(props) {
         })}
         </Text>
       </View>;
-  }, [renderEvent, itemHeight]);
+  }, [renderEvent]);
   const _renderHeader = useCallback(headerItem => {
     if (renderHeader) {
-      return <View height={itemHeight}>{renderHeader(headerItem)}</View>;
+      return <View>{renderHeader(headerItem)}</View>;
     }
-    return <View bottom marginB-5 marginH-20 height={itemHeight}>
+    return <View bg-$backgroundDefault bottom marginB-5 marginH-20>
         <Text>{headerItem.header}</Text>
       </View>;
-  }, [renderHeader, itemHeight]);
+  }, [renderHeader]);
   const renderItem = useCallback(({
     item
   }) => {
@@ -116,6 +123,10 @@ function Agenda(props) {
             const _isSameMonth = isSameMonth(selected, previous);
             runOnJS(scrollToIndex)(index, _isSameMonth);
           }
+        } else {
+          // Note: We got here because we are missing future agenda events to scroll to.
+          // therefor we should expect and new events data load
+          lastDateBeforeLoadingNewEvents.value = selectedDate.value;
         }
       }
     }
@@ -148,6 +159,7 @@ function Agenda(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const _onEndReached = useCallback(() => {
+    lastDateBeforeLoadingNewEvents.value = selectedDate.value;
     onEndReached?.(selectedDate.value);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [onEndReached]);
@@ -155,7 +167,7 @@ function Agenda(props) {
       <FlashList ref={flashList} estimatedItemSize={52} data={data}
     // TODO: Not sure we need key extractor in flash list
     // keyExtractor={keyExtractor}
-    renderItem={renderItem} getItemType={getItemType} onViewableItemsChanged={onViewableItemsChanged} onMomentumScrollBegin={onMomentumScrollBegin} onScrollBeginDrag={onScrollBeginDrag} initialScrollIndex={findClosestDateAfter(selectedDate.value)?.index ?? 0} onEndReached={_onEndReached} />
+    renderItem={renderItem} getItemType={getItemType} stickyHeaderIndices={stickyHeaderIndices} 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)
     }}>

package/src/incubator/calendar/Header.js

@@ -9,6 +9,16 @@ import { getDateObject, getMonthForIndex, addMonths } from "./helpers/DateUtils"
 import { DayNamesFormat, UpdateSource } from "./types";
 import CalendarContext from "./CalendarContext";
 import WeekDaysNames from "./WeekDaysNames";
+
+// Note: this fixes the updates on the header month title
+Reanimated.addWhitelistedNativeProps({
+  text: true
+});
+const ARROWS_THROTTLE_TIME = 300;
+const ARROWS_THROTTLE_OPTIONS = {
+  leading: true,
+  trailing: false
+};
 const WEEK_NUMBER_WIDTH = 32;
 const ARROW_NEXT = require("./assets/arrowNext.png");
 const ARROW_BACK = require("./assets/arrowBack.png");
@@ -31,10 +41,10 @@ const Header = props => {
   }, []);
   const onLeftArrowPress = useCallback(throttle(() => {
     setDate(getNewDate(-1), UpdateSource.MONTH_ARROW);
-  }, 300), [setDate, getNewDate]);
+  }, ARROWS_THROTTLE_TIME, ARROWS_THROTTLE_OPTIONS), [setDate, getNewDate]);
   const onRightArrowPress = useCallback(throttle(() => {
     setDate(getNewDate(1), UpdateSource.MONTH_ARROW);
-  }, 300), [setDate, getNewDate]);
+  }, ARROWS_THROTTLE_TIME, ARROWS_THROTTLE_OPTIONS), [setDate, getNewDate]);
   const getTitle = useCallback(date => {
     'worklet';
 

package/src/incubator/calendar/index.js

@@ -15,12 +15,11 @@ import { useDidUpdate } from "../../hooks";
 const FlashList = FlashListPackage?.FlashList;
 const VIEWABILITY_CONFIG = {
   itemVisiblePercentThreshold: 95,
-  minimumViewTime: 200
+  minimumViewTime: 1000
 };
-const YEARS_RANGE = 1;
+const YEARS_RANGE = 5;
 const PAGE_RELOAD_THRESHOLD = 3;
-const NOW = Date.now(); // so the 'initialDate' effect won't get called since the now different on every rerender
-
+const NOW = new Date().setHours(0, 0, 0, 0);
 function Calendar(props) {
   const {
     data,
@@ -31,20 +30,20 @@ function Calendar(props) {
     staticHeader = false,
     showExtraDays = true
   } = props;
-  const [items] = useState(() => generateMonthItems(initialDate, YEARS_RANGE, YEARS_RANGE));
+  const [monthItems] = useState(() => generateMonthItems(initialDate, YEARS_RANGE, YEARS_RANGE));
   const getItemIndex = useCallback(date => {
     'worklet';
 
     const dateObject = getDateObject(date);
-    for (let i = 0; i < items.length; i++) {
-      if (items[i].month === dateObject.month && items[i].year === dateObject.year) {
+    for (let i = 0; i < monthItems.length; i++) {
+      if (monthItems[i].month === dateObject.month && monthItems[i].year === dateObject.year) {
         return i;
       }
     }
     return -1;
-  }, [items]);
+  }, [monthItems]);
   const flashListRef = useRef();
-  const current = useSharedValue(initialDate);
+  const current = useSharedValue(new Date(initialDate).setHours(0, 0, 0, 0));
   const initialMonthIndex = useRef(getItemIndex(current.value));
   const lastUpdateSource = useSharedValue(UpdateSource.INIT);
   const processedData = useMemo(() => addHeaders(data), [data]);
@@ -74,7 +73,7 @@ function Calendar(props) {
     console.log('Update items');
     const index = getItemIndex(current.value);
     scrollToIndex(index);
-  }, [items, getItemIndex]);
+  }, [monthItems, getItemIndex]);
   const setHeaderHeight = useCallback(height => {
     headerHeight.value = height;
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -116,21 +115,21 @@ function Calendar(props) {
     // const newDate = addYears(current.value, prepend ? -1 : 1);
     // const newItems = generateMonthItems(newDate, pastRange, futureRange);
     // const newArray = mergeArrays(prepend, items, newItems);
-    // setItems(newArray);
+    // setMonthItems(newArray);
     // // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [items]);
+  }, [monthItems]);
   const shouldAddPages = useCallback(index => {
     'worklet';
 
-    return index !== -1 && (index < PAGE_RELOAD_THRESHOLD || index > items.length - PAGE_RELOAD_THRESHOLD);
+    return index !== -1 && (index < PAGE_RELOAD_THRESHOLD || index > monthItems.length - PAGE_RELOAD_THRESHOLD);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [items]);
+  }, [monthItems]);
   useAnimatedReaction(() => {
     return current.value;
   }, (selected, previous) => {
     const index = getItemIndex(selected);
     if (shouldAddPages(index)) {
-      console.log('Add new pages: ', index, items.length);
+      console.log('Add new pages: ', index, monthItems.length);
       runOnJS(addPages)(/* index */);
     } else if (lastUpdateSource.value !== UpdateSource.MONTH_SCROLL) {
       if (previous && !isSameMonth(selected, previous)) {
@@ -176,7 +175,7 @@ function Calendar(props) {
   }, []);
   return <CalendarContext.Provider value={contextValue}>
       {staticHeader && <Header />}
-      <FlashList ref={flashListRef} estimatedItemSize={Constants.screenWidth} data={items} initialScrollIndex={initialMonthIndex.current} estimatedFirstItemOffset={0} renderItem={renderCalendarItem} horizontal pagingEnabled showsHorizontalScrollIndicator={false}
+      <FlashList ref={flashListRef} estimatedItemSize={Constants.screenWidth} data={monthItems} initialScrollIndex={initialMonthIndex.current} estimatedFirstItemOffset={0} renderItem={renderCalendarItem} horizontal pagingEnabled showsHorizontalScrollIndicator={false}
     // TODO: Consider moving this shared logic with Agenda to a hook
     onViewableItemsChanged={onViewableItemsChanged} viewabilityConfig={VIEWABILITY_CONFIG} onMomentumScrollBegin={onMomentumScrollBegin} onScrollBeginDrag={onScrollBeginDrag} />
       {children}

package/src/incubator/calendar/types.d.ts

@@ -113,7 +113,6 @@ export interface CalendarProps {
 export interface AgendaProps {
     renderEvent?: (event: Event) => React.ReactElement | null;
     renderHeader?: (header: DateSectionHeader) => React.ReactElement | null;
-    itemHeight?: number;
     showLoader?: boolean;
     onEndReached?: (date: number) => void;
 }