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

package/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilib-native",
-  "version": "5.0.0-snapshot.7356",
+  "version": "5.0.0-snapshot.7360",
   "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.7356",
+  "version": "7.46.3-snapshot.7360",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
@@ -56,7 +56,7 @@
     "react-native-redash": "^12.0.3",
     "semver": "^5.5.0",
     "tinycolor2": "^1.4.2",
-    "uilib-native": "5.0.0-snapshot.7266",
+    "uilib-native": "5.0.0-snapshot.7358",
     "url-parse": "^1.2.0",
     "wix-react-native-text-size": "1.0.9"
   },

package/src/components/tabController/TabBar.js

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

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

@@ -0,0 +1,79 @@
+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

@@ -0,0 +1,159 @@
+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;

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

@@ -1,14 +1,12 @@
-import { RefObject } from 'react';
 import { LayoutChangeEvent } from 'react-native';
-import { ScrollToSupportedViews, ScrollToResultProps } from 'hooks';
+import { ScrollToProps, ScrollToSupportedViews, ScrollToResultProps } from '../useScrollTo';
 export declare enum OffsetType {
     CENTER = "CENTER",
     DYNAMIC = "DYNAMIC",
     LEFT = "LEFT",
     RIGHT = "RIGHT"
 }
-export type ScrollToItemProps<T extends ScrollToSupportedViews> = {
-    scrollViewRef?: RefObject<T>;
+export type ScrollToItemProps<T extends ScrollToSupportedViews> = Pick<ScrollToProps<T>, 'scrollViewRef'> & {
     /**
      * The number of items
      */
@@ -17,10 +15,6 @@ export type ScrollToItemProps<T extends ScrollToSupportedViews> = {
      * 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)
      */
@@ -46,21 +40,13 @@ export type ScrollToItemResultProps<T extends ScrollToSupportedViews> = Pick<Scr
      */
     onItemLayout: (event: LayoutChangeEvent, index: number) => void;
     /**
-     * The items' width as share animated value
-     */
-    itemsWidthsAnimated: any;
-    /**
-     * The items' offsets as share animated value
+     * The items' width
      */
-    itemsOffsetsAnimated: any;
+    itemsWidths: number[];
     /**
      * 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,10 +3,8 @@ 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 "./..";
+import useScrollTo from "../useScrollTo";
 import { Constants } from "../../commons/new";
-const FIX_RTL = Constants.isRTL;
 export let OffsetType = /*#__PURE__*/function (OffsetType) {
   OffsetType["CENTER"] = "CENTER";
   OffsetType["DYNAMIC"] = "DYNAMIC";
@@ -22,15 +20,12 @@ 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: [],
@@ -54,31 +49,30 @@ const useScrollToItem = props => {
   // const contentWidth = _.sum(itemsWidths);
   // TODO: const scrollEnabled = contentWidth.current > containerWidth;
 
-  const setSnapBreakpoints = useCallback(widths => {
-    if (_isEmpty(widths)) {
+  const setSnapBreakpoints = useCallback(itemsWidths => {
+    if (_isEmpty(itemsWidths)) {
       return;
     }
-    const screenCenter = containerWidth / 2;
+    const screenCenter = Constants.screenWidth / 2; // TODO: change to something more dynamic?
     let index = 0;
     const centeredOffsets = [];
     let currentCenterOffset = outerSpacing;
     const leftOffsets = [];
     leftOffsets.push(outerSpacing - innerSpacing);
     const rightOffsets = [];
-    rightOffsets.push(-containerWidth + widths[0] + outerSpacing + innerSpacing);
+    rightOffsets.push(-Constants.screenWidth + itemsWidths[0] + outerSpacing + innerSpacing);
     while (index < itemsCount) {
-      /* calc center, left and right offsets */
-      centeredOffsets[index] = currentCenterOffset - screenCenter + widths[index] / 2;
+      centeredOffsets[index] = currentCenterOffset - screenCenter + itemsWidths[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;
+      currentCenterOffset += itemsWidths[index - 1] + innerSpacing;
+      leftOffsets[index] = leftOffsets[index - 1] + itemsWidths[index - 1] + innerSpacing;
+      rightOffsets[index] = rightOffsets[index - 1] + itemsWidths[index] + innerSpacing;
     }
     if (addOffsetMargin) {
       index = 1;
       while (index < itemsCount - 1) {
-        leftOffsets[index] -= widths[index - 1];
-        rightOffsets[index] += widths[index + 1] + innerSpacing;
+        leftOffsets[index] -= itemsWidths[index - 1];
+        rightOffsets[index] += itemsWidths[index + 1] + innerSpacing;
         ++index;
       }
     }
@@ -87,25 +81,7 @@ const useScrollToItem = props => {
       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]);
+  }, [itemsCount, outerSpacing, innerSpacing, addOffsetMargin]);
   const onItemLayout = useCallback((event, index) => {
     const {
       width
@@ -117,40 +93,25 @@ 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][rtlIndex], animated);
+        scrollTo(offsets[offsetType][index], animated);
       } else {
         const movingLeft = index < currentIndex.current;
-        currentIndex.current = rtlIndex;
-        scrollTo(movingLeft ? offsets[OffsetType.RIGHT][rtlIndex] : offsets[OffsetType.LEFT][rtlIndex], animated);
+        currentIndex.current = index;
+        scrollTo(movingLeft ? offsets[OffsetType.RIGHT][index] : offsets[OffsetType.LEFT][index], animated);
       }
     }
   }, [offsets, offsetType, scrollTo]);
   useEffect(() => {
     if (!_isUndefined(selectedIndex)) {
-      focusIndex(selectedIndex, false);
+      focusIndex(selectedIndex);
     }
   }, [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,
+    itemsWidths: offsets.CENTER.length > 0 ? itemsWidths.current : [],
     focusIndex,
-    reset,
     onContentSizeChange,
     onLayout
   };