react-native-ui-lib 7.36.0-snapshot.6094 → 7.36.0-snapshot.6098

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.36.0-snapshot.6094",
+  "version": "7.36.0-snapshot.6098",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
@@ -70,7 +70,7 @@
     "@formatjs/intl-locale": "^3.0.3",
     "@formatjs/intl-numberformat": "^8.0.4",
     "@formatjs/intl-pluralrules": "^5.0.3",
-    "@react-native-community/blur": "4.3.0",
+    "@react-native-community/blur": "4.4.1",
     "@react-native-community/datetimepicker": "^3.4.6",
     "@react-native-community/netinfo": "^5.6.2",
     "@react-native/babel-preset": "0.73.21",

package/src/components/floatingButton/index.js

@@ -138,7 +138,6 @@ class FloatingButton extends PureComponent {
 }
 const styles = StyleSheet.create({
   container: {
-    ...StyleSheet.absoluteFillObject,
     top: undefined,
     zIndex: Constants.isAndroid ? 99 : undefined
   },

package/src/components/tabController/TabBar.js

@@ -149,7 +149,8 @@ const TabBar = props => {
   }, [labelColor, selectedLabelColor]);
   return <View style={_containerStyle} key={key} bg-$backgroundElevated>
       <FadedScrollView ref={tabBar} horizontal showsHorizontalScrollIndicator={false} showStartFader startFaderProps={faderProps} showEndFader endFaderProps={faderProps} contentContainerStyle={scrollViewContainerStyle} testID={testID} onContentSizeChange={onContentSizeChange} onLayout={onLayout}>
-        <View style={tabBarContainerStyle}>{tabBarItems}</View>
+        {/* TODO: Might need to change role to tablist, when upgrading rn77. It didn't work now (rn73) */}
+        <View style={tabBarContainerStyle} accessibilityRole="tabbar">{tabBarItems}</View>
         {itemsCount > 1 && <Reanimated.View style={[styles.selectedIndicator, indicatorStyle, _indicatorTransitionStyle]} />}
       </FadedScrollView>
     </View>;

package/src/components/tabController/TabBarContext.d.ts

@@ -13,6 +13,7 @@ interface TabControllerContext {
     /** transition page index (can be a fraction when transitioning between pages) */
     targetPage: Reanimated.SharedValue<number>;
     setCurrentIndex: (index: number) => void;
+    selectedIndex: number;
 }
 declare const TabBarContext: React.Context<TabControllerContext>;
 export default TabBarContext;

package/src/components/tabController/TabBarItem.js

@@ -44,7 +44,8 @@ export default function TabBarItem({
 }) {
   const {
     currentPage,
-    setCurrentIndex
+    setCurrentIndex,
+    selectedIndex
   } = useContext(TabBarContext);
   const itemRef = useRef();
   const itemWidth = useRef(props.width);
@@ -133,7 +134,9 @@ export default function TabBarItem({
   return <GestureDetector gesture={gesture}>
       <View reanimated
     // @ts-expect-error
-    ref={itemRef} style={_style} onLayout={onLayout} testID={testID}>
+    ref={itemRef} style={_style} onLayout={onLayout} testID={testID} accessible accessibilityRole="tab" accessibilityState={{
+      selected: selectedIndex === index
+    }}>
         {leadingAccessory}
         {icon && <Reanimated.Image source={icon} style={[!_isUndefined(label) && styles.tabItemIconWithLabel, animatedIconStyle]} />}
         {!_isEmpty(label) && <Reanimated.Text {...labelProps} fsTagName={'unmask'} style={[styles.tabItemLabel, labelStyle, animatedLabelStyle, animatedLabelColorStyle]}>

package/src/components/tabController/index.js

@@ -38,6 +38,7 @@ const TabController = React.forwardRef((props, ref) => {
     children
   } = themeProps;
   const [screenWidth, setScreenWidth] = useState(getScreenWidth(useSafeArea));
+  const [selectedIndex, setSelectedIndex] = useState(initialIndex);
   if (items?.length < 2) {
     console.warn('TabController component expect a minimum of 2 items');
   }
@@ -61,6 +62,7 @@ const TabController = React.forwardRef((props, ref) => {
     'worklet';
 
     currentPage.value = index;
+    runOnJS(setSelectedIndex)(index);
   }, []);
   useEffect(() => {
     setCurrentIndex(initialIndex);
@@ -88,12 +90,13 @@ const TabController = React.forwardRef((props, ref) => {
       /* Animated Values */
       targetPage,
       currentPage,
+      selectedIndex,
       containerWidth: screenWidth,
       /* Callbacks */
       onChangeIndex,
       setCurrentIndex
     };
-  }, [initialIndex, asCarousel, items, onChangeIndex, screenWidth, nestedInScrollView]);
+  }, [initialIndex, asCarousel, items, onChangeIndex, screenWidth, nestedInScrollView, selectedIndex]);
   return <TabBarContext.Provider value={context}>{children}</TabBarContext.Provider>;
 });
 

package/src/incubator/calendar/Agenda.js

@@ -1,21 +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) {
-  // TODO: Consider removing itemHeight if it's not needed
   const {
     renderEvent,
     renderHeader,
-    itemHeight,
+    itemHeight = 50,
     onEndReached,
     showLoader
   } = props;
@@ -28,22 +28,11 @@ 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}>
@@ -72,7 +61,7 @@ function Agenda(props) {
     if (renderHeader) {
       return <View height={itemHeight}>{renderHeader(headerItem)}</View>;
     }
-    return <View bg-$backgroundDefault bottom marginB-5 marginH-20 height={itemHeight}>
+    return <View bottom marginB-5 marginH-20 height={itemHeight}>
         <Text>{headerItem.header}</Text>
       </View>;
   }, [renderHeader, itemHeight]);
@@ -127,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;
         }
       }
     }
@@ -163,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]);
@@ -171,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,12 +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 WEEK_NUMBER_WIDTH = 32;
 const ARROW_NEXT = require("./assets/arrowNext.png");
 const ARROW_BACK = require("./assets/arrowBack.png");
@@ -37,16 +31,10 @@ const Header = props => {
   }, []);
   const onLeftArrowPress = useCallback(throttle(() => {
     setDate(getNewDate(-1), UpdateSource.MONTH_ARROW);
-  }, ARROWS_THROTTLE_TIME, {
-    leading: true,
-    trailing: false
-  }), [setDate, getNewDate]);
+  }, 300), [setDate, getNewDate]);
   const onRightArrowPress = useCallback(throttle(() => {
     setDate(getNewDate(1), UpdateSource.MONTH_ARROW);
-  }, ARROWS_THROTTLE_TIME, {
-    leading: true,
-    trailing: false
-  }), [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,7 +113,7 @@ export interface CalendarProps {
 export interface AgendaProps {
     renderEvent?: (event: Event) => React.ReactElement | null;
     renderHeader?: (header: DateSectionHeader) => React.ReactElement | null;
-    itemHeight?: number | null;
+    itemHeight?: number;
     showLoader?: boolean;
     onEndReached?: (date: number) => void;
 }