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

package/README.md

@@ -15,6 +15,13 @@
 [![NPM Downloads](https://img.shields.io/npm/dm/react-native-ui-lib.svg?style=flat)](https://www.npmjs.com/package/react-native-ui-lib)
 <a href="https://twitter.com/rnuilib"><img src="https://img.shields.io/twitter/follow/rnuilib.svg?style=flat&colorA=1DA1F2&colorB=20303C&label=Follow%20us%20on%20Twitter" alt="Follow on Twitter"></a>
 
+## Notes
+
+#### React Native New Arc
+
+We are working on upgrading our UI Library to support the new React Native Architecture.
+Currently, we support React Native 0.73, and we plan to support React Native 0.77 next.
+While we don’t have a timeline yet, this is part of our roadmap.
 
 ## Links
 - [Docs](https://wix.github.io/react-native-ui-lib/)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.36.0-snapshot.6091",
+  "version": "7.36.0-snapshot.6094",
   "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.4.1",
+    "@react-native-community/blur": "4.3.0",
     "@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,6 +138,7 @@ class FloatingButton extends PureComponent {
 }
 const styles = StyleSheet.create({
   container: {
+    ...StyleSheet.absoluteFillObject,
     top: undefined,
     zIndex: Constants.isAndroid ? 99 : undefined
   },

package/src/components/picker/helpers/usePickerSelection.d.ts

@@ -3,7 +3,6 @@ import { PickerProps, PickerValue, PickerSingleValue, PickerMultiValue } from '.
 interface UsePickerSelectionProps extends Pick<PickerProps, 'migrate' | 'value' | 'onChange' | 'getItemValue' | 'topBarProps' | 'mode'> {
     pickerExpandableRef: RefObject<any>;
     setSearchValue: (searchValue: string) => void;
-    pickerRef: React.RefObject<any>;
 }
 declare const usePickerSelection: (props: UsePickerSelectionProps) => {
     multiDraftValue: PickerMultiValue;

package/src/components/picker/helpers/usePickerSelection.js

@@ -2,7 +2,6 @@ import _xor from "lodash/xor";
 import _xorBy from "lodash/xorBy";
 import { useCallback, useState, useEffect } from 'react';
 import { PickerModes } from "../types";
-import { AccessibilityInfo } from 'react-native';
 const usePickerSelection = props => {
   const {
     migrate,
@@ -12,8 +11,7 @@ const usePickerSelection = props => {
     pickerExpandableRef,
     getItemValue,
     setSearchValue,
-    mode,
-    pickerRef
+    mode
   } = props;
   const [multiDraftValue, setMultiDraftValue] = useState(value);
   const [multiFinalValue, setMultiFinalValue] = useState(value);
@@ -28,10 +26,6 @@ const usePickerSelection = props => {
     setMultiFinalValue(item);
     pickerExpandableRef.current?.closeExpandable?.();
     onChange?.(item);
-    const reactTag = pickerRef.current.getNodeHandle();
-    if (reactTag) {
-      AccessibilityInfo.setAccessibilityFocus(reactTag);
-    }
   }, [onChange]);
   const toggleItemSelection = useCallback(item => {
     let newValue;

package/src/components/picker/index.js

@@ -110,8 +110,7 @@ const Picker = React.forwardRef((props, ref) => {
     getItemValue,
     topBarProps,
     setSearchValue,
-    mode,
-    pickerRef
+    mode
   });
   const {
     label,

package/src/components/textField/useImperativeInputHandle.js

@@ -1,5 +1,4 @@
 import { useContext, useImperativeHandle, useRef } from 'react';
-import { findNodeHandle } from 'react-native';
 import FieldContext from "./FieldContext";
 const useImperativeInputHandle = (ref, props) => {
   const inputRef = useRef();
@@ -20,11 +19,6 @@ const useImperativeInputHandle = (ref, props) => {
       // Note: This returns field validity without actually validating it
       isValid: () => {
         return context.checkValidity();
-      },
-      getNodeHandle: () => {
-        if (inputRef.current) {
-          return findNodeHandle(inputRef.current);
-        }
       }
     };
   });

package/src/incubator/calendar/Agenda.js

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