react-native-ui-lib 7.46.3-snapshot.7352 → 7.46.3-snapshot.7356

package/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilib-native",
-  "version": "5.0.0-snapshot.7352",
+  "version": "5.0.0-snapshot.7356",
   "homepage": "https://github.com/wix/react-native-ui-lib",
   "description": "uilib native components (separated from js components)",
   "main": "components/index",

package/package.json

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

package/src/components/tabController/TabBar.js

@@ -9,8 +9,7 @@ import { Constants, asBaseComponent, forwardRef } from "../../commons/new";
 import View from "../view";
 import { Colors, Spacings, Typography } from "../../style";
 import FadedScrollView from "../fadedScrollView";
-import useScrollToItem from "./useScrollToItem";
-import { useDidUpdate } from "../../hooks";
+import { useDidUpdate, useScrollToItem } from "../../hooks";
 const DEFAULT_HEIGHT = 48;
 const DEFAULT_LABEL_STYLE = {
   ...Typography.text80M,

package/src/hooks/useScrollToItem/index.d.ts

@@ -1,12 +1,14 @@
+import { RefObject } from 'react';
 import { LayoutChangeEvent } from 'react-native';
-import { ScrollToProps, ScrollToSupportedViews, ScrollToResultProps } from '../useScrollTo';
+import { ScrollToSupportedViews, ScrollToResultProps } from 'hooks';
 export declare enum OffsetType {
     CENTER = "CENTER",
     DYNAMIC = "DYNAMIC",
     LEFT = "LEFT",
     RIGHT = "RIGHT"
 }
-export type ScrollToItemProps<T extends ScrollToSupportedViews> = Pick<ScrollToProps<T>, 'scrollViewRef'> & {
+export type ScrollToItemProps<T extends ScrollToSupportedViews> = {
+    scrollViewRef?: RefObject<T>;
     /**
      * The number of items
      */
@@ -15,6 +17,10 @@ export type ScrollToItemProps<T extends ScrollToSupportedViews> = Pick<ScrollToP
      * The selected item's index
      */
     selectedIndex?: number;
+    /**
+     * The container width, should update on orientation change
+     */
+    containerWidth: number;
     /**
      * Where would the item be located (default to CENTER)
      */
@@ -40,13 +46,21 @@ export type ScrollToItemResultProps<T extends ScrollToSupportedViews> = Pick<Scr
      */
     onItemLayout: (event: LayoutChangeEvent, index: number) => void;
     /**
-     * The items' width
+     * The items' width as share animated value
+     */
+    itemsWidthsAnimated: any;
+    /**
+     * The items' offsets as share animated value
      */
-    itemsWidths: number[];
+    itemsOffsetsAnimated: any;
     /**
      * Use in order to focus the item with the specified index (use when the selectedIndex is not changed)
      */
     focusIndex: (index: number, animated?: boolean) => void;
+    /**
+     * Use in order to reset the data.
+     */
+    reset: () => void;
     /**
      * onContentSizeChange callback (should be set to your onContentSizeChange).
      * Needed for RTL support on Android.

package/src/hooks/useScrollToItem/index.js

@@ -3,8 +3,10 @@ import _includes from "lodash/includes";
 import _isEmpty from "lodash/isEmpty";
 import _times from "lodash/times";
 import { useState, useCallback, useEffect, useRef } from 'react';
-import useScrollTo from "../useScrollTo";
+import { useSharedValue } from 'react-native-reanimated';
+import { useScrollTo } from "./..";
 import { Constants } from "../../commons/new";
+const FIX_RTL = Constants.isRTL;
 export let OffsetType = /*#__PURE__*/function (OffsetType) {
   OffsetType["CENTER"] = "CENTER";
   OffsetType["DYNAMIC"] = "DYNAMIC";
@@ -20,12 +22,15 @@ const useScrollToItem = props => {
     scrollViewRef: propsScrollViewRef,
     itemsCount,
     selectedIndex,
+    containerWidth,
     offsetType = OffsetType.CENTER,
     addOffsetMargin = true,
     outerSpacing = 0,
     innerSpacing = 0
   } = props;
   const itemsWidths = useRef(_times(itemsCount, () => null));
+  const itemsWidthsAnimated = useSharedValue(_times(itemsCount, () => 0));
+  const itemsOffsetsAnimated = useSharedValue(_times(itemsCount, () => 0));
   const currentIndex = useRef(selectedIndex || 0);
   const [offsets, setOffsets] = useState({
     CENTER: [],
@@ -49,30 +54,31 @@ const useScrollToItem = props => {
   // const contentWidth = _.sum(itemsWidths);
   // TODO: const scrollEnabled = contentWidth.current > containerWidth;
 
-  const setSnapBreakpoints = useCallback(itemsWidths => {
-    if (_isEmpty(itemsWidths)) {
+  const setSnapBreakpoints = useCallback(widths => {
+    if (_isEmpty(widths)) {
       return;
     }
-    const screenCenter = Constants.screenWidth / 2; // TODO: change to something more dynamic?
+    const screenCenter = containerWidth / 2;
     let index = 0;
     const centeredOffsets = [];
     let currentCenterOffset = outerSpacing;
     const leftOffsets = [];
     leftOffsets.push(outerSpacing - innerSpacing);
     const rightOffsets = [];
-    rightOffsets.push(-Constants.screenWidth + itemsWidths[0] + outerSpacing + innerSpacing);
+    rightOffsets.push(-containerWidth + widths[0] + outerSpacing + innerSpacing);
     while (index < itemsCount) {
-      centeredOffsets[index] = currentCenterOffset - screenCenter + itemsWidths[index] / 2;
+      /* calc center, left and right offsets */
+      centeredOffsets[index] = currentCenterOffset - screenCenter + widths[index] / 2;
       ++index;
-      currentCenterOffset += itemsWidths[index - 1] + innerSpacing;
-      leftOffsets[index] = leftOffsets[index - 1] + itemsWidths[index - 1] + innerSpacing;
-      rightOffsets[index] = rightOffsets[index - 1] + itemsWidths[index] + innerSpacing;
+      currentCenterOffset += widths[index - 1] + innerSpacing;
+      leftOffsets[index] = leftOffsets[index - 1] + widths[index - 1] + innerSpacing;
+      rightOffsets[index] = rightOffsets[index - 1] + widths[index] + innerSpacing;
     }
     if (addOffsetMargin) {
       index = 1;
       while (index < itemsCount - 1) {
-        leftOffsets[index] -= itemsWidths[index - 1];
-        rightOffsets[index] += itemsWidths[index + 1] + innerSpacing;
+        leftOffsets[index] -= widths[index - 1];
+        rightOffsets[index] += widths[index + 1] + innerSpacing;
         ++index;
       }
     }
@@ -81,7 +87,25 @@ const useScrollToItem = props => {
       LEFT: leftOffsets,
       RIGHT: rightOffsets
     }); // default for DYNAMIC is CENTER
-  }, [itemsCount, outerSpacing, innerSpacing, addOffsetMargin]);
+
+    // Update shared values
+    // @ts-expect-error pretty sure this is a bug in reanimated since itemsWidthsAnimated is defined as SharedValue<number[]>
+    itemsWidthsAnimated.modify(value => {
+      'worklet';
+
+      return value.map((_, index) => widths[index]);
+    });
+    itemsOffsetsAnimated.modify(value => {
+      'worklet';
+
+      value.forEach((_, index) => {
+        if (index > 0) {
+          value[index] = value[index - 1] + widths[index - 1];
+        }
+      });
+      return value;
+    });
+  }, [itemsCount, outerSpacing, innerSpacing, addOffsetMargin, containerWidth]);
   const onItemLayout = useCallback((event, index) => {
     const {
       width
@@ -93,25 +117,40 @@ const useScrollToItem = props => {
   }, [setSnapBreakpoints]);
   const focusIndex = useCallback((index, animated = true) => {
     if (index >= 0 && offsets.CENTER.length > index) {
+      const rtlIndex = FIX_RTL ? itemsCount - index - 1 : index;
       if (offsetType !== OffsetType.DYNAMIC) {
-        scrollTo(offsets[offsetType][index], animated);
+        scrollTo(offsets[offsetType][rtlIndex], animated);
       } else {
         const movingLeft = index < currentIndex.current;
-        currentIndex.current = index;
-        scrollTo(movingLeft ? offsets[OffsetType.RIGHT][index] : offsets[OffsetType.LEFT][index], animated);
+        currentIndex.current = rtlIndex;
+        scrollTo(movingLeft ? offsets[OffsetType.RIGHT][rtlIndex] : offsets[OffsetType.LEFT][rtlIndex], animated);
       }
     }
   }, [offsets, offsetType, scrollTo]);
   useEffect(() => {
     if (!_isUndefined(selectedIndex)) {
-      focusIndex(selectedIndex);
+      focusIndex(selectedIndex, false);
     }
   }, [selectedIndex, focusIndex]);
+  const reset = useCallback(() => {
+    for (let i = 0; i < itemsCount; ++i) {
+      itemsWidths.current[i] = null;
+      itemsWidthsAnimated.value[i] = 0;
+      itemsOffsetsAnimated.value[i] = 0;
+    }
+    setOffsets({
+      CENTER: [],
+      LEFT: [],
+      RIGHT: []
+    });
+  }, [itemsCount]);
   return {
     scrollViewRef,
     onItemLayout,
-    itemsWidths: offsets.CENTER.length > 0 ? itemsWidths.current : [],
+    itemsWidthsAnimated,
+    itemsOffsetsAnimated,
     focusIndex,
+    reset,
     onContentSizeChange,
     onLayout
   };

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

@@ -1,79 +0,0 @@
-import { RefObject } from 'react';
-import { LayoutChangeEvent } from 'react-native';
-import { ScrollToSupportedViews, ScrollToResultProps } from 'hooks';
-export declare enum OffsetType {
-    CENTER = "CENTER",
-    DYNAMIC = "DYNAMIC",
-    LEFT = "LEFT",
-    RIGHT = "RIGHT"
-}
-export type ScrollToItemProps<T extends ScrollToSupportedViews> = {
-    scrollViewRef?: RefObject<T>;
-    /**
-     * The number of items
-     */
-    itemsCount: number;
-    /**
-     * The selected item's index
-     */
-    selectedIndex?: number;
-    /**
-     * The container width, should update on orientation change
-     */
-    containerWidth: number;
-    /**
-     * Where would the item be located (default to CENTER)
-     */
-    offsetType?: OffsetType | `${OffsetType}`;
-    /**
-     * Add a margin to the offset (default to true)
-     * This gives a better UX
-     * Not relevant to OffsetType.CENTER
-     */
-    addOffsetMargin?: boolean;
-    /**
-     * How much space (padding \ margin) is there on the left\right of the items
-     */
-    outerSpacing?: number;
-    /**
-     * How much space (padding \ margin) is there between each item
-     */
-    innerSpacing?: number;
-};
-export type ScrollToItemResultProps<T extends ScrollToSupportedViews> = Pick<ScrollToResultProps<T>, 'scrollViewRef'> & {
-    /**
-     * This should be called by each ot the items' onLayout
-     */
-    onItemLayout: (event: LayoutChangeEvent, index: number) => void;
-    /**
-     * The items' width as share animated value
-     */
-    itemsWidthsAnimated: any;
-    /**
-     * The items' offsets as share animated value
-     */
-    itemsOffsetsAnimated: any;
-    /**
-     * Use in order to focus the item with the specified index (use when the selectedIndex is not changed)
-     */
-    focusIndex: (index: number, animated?: boolean) => void;
-    /**
-     * Use in order to reset the data.
-     */
-    reset: () => void;
-    /**
-     * onContentSizeChange callback (should be set to your onContentSizeChange).
-     * Needed for RTL support on Android.
-     */
-    onContentSizeChange: (contentWidth: number, contentHeight: number) => void;
-    /**
-     * onLayout callback (should be set to your onLayout).
-     * Needed for RTL support on Android.
-     */
-    onLayout: (event: LayoutChangeEvent) => void;
-};
-declare const useScrollToItem: {
-    <T extends ScrollToSupportedViews>(props: ScrollToItemProps<T>): ScrollToItemResultProps<T>;
-    offsetType: typeof OffsetType;
-};
-export default useScrollToItem;

package/src/components/tabController/useScrollToItem.js

@@ -1,159 +0,0 @@
-import _isUndefined from "lodash/isUndefined";
-import _includes from "lodash/includes";
-import _isEmpty from "lodash/isEmpty";
-import _times from "lodash/times";
-import { useState, useCallback, useEffect, useRef } from 'react';
-import { useSharedValue } from 'react-native-reanimated';
-import { useScrollTo } from "../../hooks";
-import { Constants } from "../../commons/new";
-const FIX_RTL = Constants.isRTL;
-export let OffsetType = /*#__PURE__*/function (OffsetType) {
-  OffsetType["CENTER"] = "CENTER";
-  OffsetType["DYNAMIC"] = "DYNAMIC";
-  OffsetType["LEFT"] = "LEFT";
-  OffsetType["RIGHT"] = "RIGHT";
-  return OffsetType;
-}({});
-
-// TODO: this is what I want, is there a better way to do it?
-
-const useScrollToItem = props => {
-  const {
-    scrollViewRef: propsScrollViewRef,
-    itemsCount,
-    selectedIndex,
-    containerWidth,
-    offsetType = OffsetType.CENTER,
-    addOffsetMargin = true,
-    outerSpacing = 0,
-    innerSpacing = 0
-  } = props;
-  const itemsWidths = useRef(_times(itemsCount, () => null));
-  const itemsWidthsAnimated = useSharedValue(_times(itemsCount, () => 0));
-  const itemsOffsetsAnimated = useSharedValue(_times(itemsCount, () => 0));
-  const currentIndex = useRef(selectedIndex || 0);
-  const [offsets, setOffsets] = useState({
-    CENTER: [],
-    LEFT: [],
-    RIGHT: []
-  });
-  const {
-    scrollViewRef,
-    scrollTo,
-    onContentSizeChange,
-    onLayout
-  } = useScrollTo({
-    scrollViewRef: propsScrollViewRef
-  });
-
-  // TODO: reset?
-  //   useEffect(() => {
-  //     itemsWidths.current = _.times(itemsCount, () => null);
-  //   }, [itemsCount]);
-
-  // const contentWidth = _.sum(itemsWidths);
-  // TODO: const scrollEnabled = contentWidth.current > containerWidth;
-
-  const setSnapBreakpoints = useCallback(widths => {
-    if (_isEmpty(widths)) {
-      return;
-    }
-    const screenCenter = containerWidth / 2;
-    let index = 0;
-    const centeredOffsets = [];
-    let currentCenterOffset = outerSpacing;
-    const leftOffsets = [];
-    leftOffsets.push(outerSpacing - innerSpacing);
-    const rightOffsets = [];
-    rightOffsets.push(-containerWidth + widths[0] + outerSpacing + innerSpacing);
-    while (index < itemsCount) {
-      /* calc center, left and right offsets */
-      centeredOffsets[index] = currentCenterOffset - screenCenter + widths[index] / 2;
-      ++index;
-      currentCenterOffset += widths[index - 1] + innerSpacing;
-      leftOffsets[index] = leftOffsets[index - 1] + widths[index - 1] + innerSpacing;
-      rightOffsets[index] = rightOffsets[index - 1] + widths[index] + innerSpacing;
-    }
-    if (addOffsetMargin) {
-      index = 1;
-      while (index < itemsCount - 1) {
-        leftOffsets[index] -= widths[index - 1];
-        rightOffsets[index] += widths[index + 1] + innerSpacing;
-        ++index;
-      }
-    }
-    setOffsets({
-      CENTER: centeredOffsets,
-      LEFT: leftOffsets,
-      RIGHT: rightOffsets
-    }); // default for DYNAMIC is CENTER
-
-    // Update shared values
-    // @ts-expect-error pretty sure this is a bug in reanimated since itemsWidthsAnimated is defined as SharedValue<number[]>
-    itemsWidthsAnimated.modify(value => {
-      'worklet';
-
-      return value.map((_, index) => widths[index]);
-    });
-    itemsOffsetsAnimated.modify(value => {
-      'worklet';
-
-      value.forEach((_, index) => {
-        if (index > 0) {
-          value[index] = value[index - 1] + widths[index - 1];
-        }
-      });
-      return value;
-    });
-  }, [itemsCount, outerSpacing, innerSpacing, addOffsetMargin, containerWidth]);
-  const onItemLayout = useCallback((event, index) => {
-    const {
-      width
-    } = event.nativeEvent.layout;
-    itemsWidths.current[index] = width;
-    if (!_includes(itemsWidths.current, null)) {
-      setSnapBreakpoints(itemsWidths.current);
-    }
-  }, [setSnapBreakpoints]);
-  const focusIndex = useCallback((index, animated = true) => {
-    if (index >= 0 && offsets.CENTER.length > index) {
-      const rtlIndex = FIX_RTL ? itemsCount - index - 1 : index;
-      if (offsetType !== OffsetType.DYNAMIC) {
-        scrollTo(offsets[offsetType][rtlIndex], animated);
-      } else {
-        const movingLeft = index < currentIndex.current;
-        currentIndex.current = rtlIndex;
-        scrollTo(movingLeft ? offsets[OffsetType.RIGHT][rtlIndex] : offsets[OffsetType.LEFT][rtlIndex], animated);
-      }
-    }
-  }, [offsets, offsetType, scrollTo]);
-  useEffect(() => {
-    if (!_isUndefined(selectedIndex)) {
-      focusIndex(selectedIndex, false);
-    }
-  }, [selectedIndex, focusIndex]);
-  const reset = useCallback(() => {
-    for (let i = 0; i < itemsCount; ++i) {
-      itemsWidths.current[i] = null;
-      itemsWidthsAnimated.value[i] = 0;
-      itemsOffsetsAnimated.value[i] = 0;
-    }
-    setOffsets({
-      CENTER: [],
-      LEFT: [],
-      RIGHT: []
-    });
-  }, [itemsCount]);
-  return {
-    scrollViewRef,
-    onItemLayout,
-    itemsWidthsAnimated,
-    itemsOffsetsAnimated,
-    focusIndex,
-    reset,
-    onContentSizeChange,
-    onLayout
-  };
-};
-useScrollToItem.offsetType = OffsetType;
-export default useScrollToItem;