react-native-ui-lib 7.40.1-snapshot.6825 → 7.40.1

package/package.json

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

package/scripts/release/prReleaseNotesCommon.js

@@ -196,7 +196,7 @@ async function generateReleaseNotes(latestVersion,
   newVersion,
   fileNamePrefix,
   repo,
-  getHeader = () => '',
+  header = '',
   tagPrefix = '',
   categories = []) {
   let latestVer, newVer;
@@ -214,7 +214,6 @@ async function generateReleaseNotes(latestVersion,
   });
 
   rl.on('close', () => {
-    const header = getHeader(newVer);
     console.info(`Current latest version is v${latestVer}`);
     console.info(`Generating release notes out or PRs for v${newVer}`);
     _generateReleaseNotes(latestVer, newVer, fileNamePrefix, repo, header, tagPrefix, categories);

package/src/incubator/calendar/Agenda.js

@@ -1,19 +1,21 @@
-import React, { useContext, useCallback, useRef, useState } from 'react';
+import React, { useContext, useCallback, useRef } 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;
@@ -26,27 +28,18 @@ 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 style={styles.eventContainer}>{renderEvent(eventItem)}</View>;
+      return <View height={itemHeight} style={styles.eventContainer}>
+          {renderEvent(eventItem)}
+        </View>;
     }
-    return <View marginV-1 marginH-10 paddingH-10 centerV style={styles.event}>
+    return <View marginV-1 marginH-10 paddingH-10 height={itemHeight} centerV style={styles.event}>
         <Text>
           Item for
           {new Date(eventItem.start).toLocaleString('en-GB', {
@@ -63,15 +56,15 @@ function Agenda(props) {
         })}
         </Text>
       </View>;
-  }, [renderEvent]);
+  }, [renderEvent, itemHeight]);
   const _renderHeader = useCallback(headerItem => {
     if (renderHeader) {
-      return <View>{renderHeader(headerItem)}</View>;
+      return <View height={itemHeight}>{renderHeader(headerItem)}</View>;
     }
-    return <View bg-$backgroundDefault bottom marginB-5 marginH-20>
+    return <View bottom marginB-5 marginH-20 height={itemHeight}>
         <Text>{headerItem.header}</Text>
       </View>;
-  }, [renderHeader]);
+  }, [renderHeader, itemHeight]);
   const renderItem = useCallback(({
     item
   }) => {
@@ -123,10 +116,6 @@ 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;
         }
       }
     }
@@ -159,7 +148,6 @@ 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]);
@@ -167,7 +155,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} stickyHeaderIndices={stickyHeaderIndices} onViewableItemsChanged={onViewableItemsChanged} onMomentumScrollBegin={onMomentumScrollBegin} onScrollBeginDrag={onScrollBeginDrag} initialScrollIndex={findClosestDateAfter(selectedDate.value)?.index ?? 0} onEndReached={_onEndReached} />
+    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)
     }}>

package/src/incubator/calendar/Header.js

@@ -9,16 +9,6 @@ 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");
@@ -41,10 +31,10 @@ const Header = props => {
   }, []);
   const onLeftArrowPress = useCallback(throttle(() => {
     setDate(getNewDate(-1), UpdateSource.MONTH_ARROW);
-  }, ARROWS_THROTTLE_TIME, ARROWS_THROTTLE_OPTIONS), [setDate, getNewDate]);
+  }, 300), [setDate, getNewDate]);
   const onRightArrowPress = useCallback(throttle(() => {
     setDate(getNewDate(1), UpdateSource.MONTH_ARROW);
-  }, ARROWS_THROTTLE_TIME, ARROWS_THROTTLE_OPTIONS), [setDate, getNewDate]);
+  }, 300), [setDate, getNewDate]);
   const getTitle = useCallback(date => {
     'worklet';
 

package/src/incubator/calendar/index.js

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