Feat/change tab controller center selected logic (#1103)

* Move TabBar to functional component

* Fix Fader in RTL

* change tab controller center selected logic  (and move it to a helper hook)

* Fix import (cycle) + generate types

* Change the DYNAMIC logic (did not look good when scrolling pages)

* Revert merging wrong commit

* FocusItemsHelper --> useFocusItemsHelper

* Add (and use) useScrollEnabler and useScrollReached hooks

* Move hooks to the hooks folder

* sideSpacing --> outerSpacing

* Fix typo

Co-authored-by: Ethan Sharabi <[email protected]>

* renderSelectedIndicator --> selectedIndicator

* Move useFocusItemsHelper

* Rename useFocusItemsHelper --> useScrollIToItem

* Fix typo

* Create useScrollTo hook

* Refactor Props and ResultProps --> better names

Co-authored-by: Ethan Sharabi <[email protected]>

Author: M-i-k-e-l

demo/src/screens/componentScreens/FaderScreen.tsx

@@ -2,6 +2,7 @@ import _ from 'lodash';
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
 import {Colors, Text, View, Fader, withScrollReached, WithScrollReachedProps} from 'react-native-ui-lib';
+// @ts-ignore
 import {renderHeader} from '../ExampleScreenPresenter';
 
 const numberOfItems = 3;
@@ -10,6 +11,7 @@ const itemWidth = 100;
 const itemHeight = 100;
 const tintColor = undefined;
 
+// @ts-ignore
 const horizontal = faderPosition === Fader.position.START || faderPosition === Fader.position.END;
 
 class FaderScreen extends Component<WithScrollReachedProps> {

demo/src/screens/componentScreens/TabControllerScreen/index.tsx

@@ -35,18 +35,15 @@ class TabControllerScreen extends Component<{}, State> {
     this.state.items = this.generateTabItems();
   }
 
-  generateTabItems = (fewItems = this.state.fewItems, centerSelected = this.state.centerSelected): TabControllerItemProps[] => {
+  generateTabItems = (fewItems = this.state.fewItems): TabControllerItemProps[] => {
     let items: TabControllerItemProps[] = _.chain(TABS)
       .take(fewItems ? 3 : TABS.length)
       .map<TabControllerItemProps>(tab => ({label: tab, key: tab}))
       .value();
 
     const addItem: TabControllerItemProps = {icon: Assets.icons.demo.add, key: 'add', ignore: true, width: 60, onPress: this.onAddItem};
 
-    if (!centerSelected) {
-      items = [...items, addItem];
-    }
-    return items;
+    return [...items, addItem];
   };
 
   componentDidMount() {
@@ -83,7 +80,7 @@ class TabControllerScreen extends Component<{}, State> {
   toggleCenterSelected = () => {
     const {fewItems, centerSelected} = this.state;
     this.setState({
-      items: this.generateTabItems(fewItems, !centerSelected),
+      items: this.generateTabItems(fewItems),
       centerSelected: !centerSelected,
       key: Date.now()
     });

generatedTypes/components/fader/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { ImageProps } from '../image';
 export declare enum FaderPosition {
     /**
      * @deprecated please use START instead
@@ -13,7 +14,7 @@ export declare enum FaderPosition {
     TOP = "TOP",
     BOTTOM = "BOTTOM"
 }
-export declare type FaderProps = {
+export declare type FaderProps = Pick<ImageProps, 'supportRTL'> & {
     /**
      * Whether the fader is visible (default is true)
      */

generatedTypes/components/tabController/FadedScrollView.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import { ViewProps, ScrollViewProps } from 'react-native';
+import { ForwardRefInjectedProps } from '../../commons/forwardRef';
 export declare type FadedScrollViewProps = ViewProps & ScrollViewProps & {
     children?: React.ReactNode | React.ReactNode[];
 };
-declare const _default: React.ComponentClass<FadedScrollViewProps, any> | React.FunctionComponent<FadedScrollViewProps>;
+declare type Props = FadedScrollViewProps & ForwardRefInjectedProps;
+declare const _default: React.ComponentType<Props>;
 export default _default;

generatedTypes/components/tabController/TabBarItem.d.ts

@@ -1,5 +1,5 @@
 import { PureComponent } from 'react';
-import { TextStyle, LayoutRectangle, LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
+import { /* processColor, */ TextStyle, LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
 import _ from 'lodash';
 import Reanimated from 'react-native-reanimated';
 import { State } from 'react-native-gesture-handler';
@@ -86,7 +86,7 @@ interface Props extends TabControllerItemProps {
     targetPage: any;
     state: State;
     currentPage: Reanimated.Adaptable<number>;
-    onLayout: (layout: Partial<LayoutRectangle>, index: number) => void;
+    onLayout?: (event: LayoutChangeEvent, index: number) => void;
 }
 /**
  * @description: TabController's TabBarItem
@@ -102,8 +102,7 @@ export default class TabBarItem extends PureComponent<Props> {
     private itemWidth?;
     private itemRef;
     constructor(props: Props);
-    onStateChange: (...args: any[]) => void;
-    onLayout: ({ nativeEvent: { layout: { width } } }: LayoutChangeEvent) => void;
+    onLayout: (event: LayoutChangeEvent) => void;
     onPress: () => void;
     getItemStyle(): any[];
     getLabelStyle(): (TextStyle | _.Dictionary<Reanimated.Node<number> | Reanimated.Node<string | number | boolean> | Reanimated.Node<"normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900"> | undefined> | undefined)[];

generatedTypes/hooks/index.d.ts

@@ -1,2 +1,6 @@
 export { default as useToggleValue } from './useToggleValue';
 export { default as useDidUpdate } from './useDidUpdate';
+export { default as useScrollEnabler } from './useScrollEnabler';
+export { default as useScrollReached } from './useScrollReached';
+export { default as useScrollToItem } from './useScrollToItem';
+export { default as useScrollTo } from './useScrollTo';

generatedTypes/hooks/useScrollEnabler/index.d.ts

@@ -0,0 +1,23 @@
+import { LayoutChangeEvent } from 'react-native';
+export declare type ScrollEnablerProps = {
+    /**
+     * Whether the scroll is horizontal (default is false).
+     */
+    horizontal?: boolean;
+};
+export declare type ScrollEnablerResultProps = {
+    /**
+     * onContentSizeChange callback (should be set to your onContentSizeChange).
+     */
+    onContentSizeChange: (contentWidth: number, contentHeight: number) => void;
+    /**
+     * onLayout callback (should be set to your onLayout).
+     */
+    onLayout: (event: LayoutChangeEvent) => void;
+    /**
+     * Whether the scroll should be enabled (should be set to your scrollEnabled).
+     */
+    scrollEnabled: boolean;
+};
+declare const useScrollEnabler: (props?: ScrollEnablerProps) => ScrollEnablerResultProps;
+export default useScrollEnabler;

generatedTypes/hooks/useScrollReached/index.d.ts

@@ -0,0 +1,28 @@
+import { NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
+export declare type ScrollEnablerProps = {
+    /**
+     * Whether the scroll is horizontal (default is false).
+     */
+    horizontal?: boolean;
+    /**
+     * Allows to be notified prior to actually reaching the start \ end of the scroll (by the threshold).
+     * Should be a positive value.
+     */
+    threshold?: number;
+};
+export declare type ScrollEnablerResultProps = {
+    /**
+     * onScroll callback (should be set to your onScroll).
+     */
+    onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    /**
+     * Is the scroll at the start (or equal\smaller than the threshold if one was given)
+     */
+    isScrollAtStart?: boolean;
+    /**
+     * Is the scroll at the end (or equal\greater than the threshold if one was given)
+     */
+    isScrollAtEnd?: boolean;
+};
+declare const useScrollReached: (props?: ScrollEnablerProps) => ScrollEnablerResultProps;
+export default useScrollReached;

generatedTypes/hooks/useScrollTo/index.d.ts

@@ -0,0 +1,27 @@
+import { RefObject } from 'react';
+import { ScrollView, FlatList } from 'react-native';
+export declare type ScrollToSupportedViews = ScrollView | FlatList;
+export declare type ScrollToProps<T extends ScrollToSupportedViews> = {
+    /**
+     * A reference to the ScrollView (or FlatList) which the items are in
+     */
+    scrollViewRef?: RefObject<T>;
+    /**
+     * Is the scroll view horizontal (default is true)
+     */
+    horizontal?: boolean;
+};
+export declare type ScrollToResultProps<T extends ScrollToSupportedViews> = {
+    /**
+     * A reference to the ScrollView (or FlatList) which the items are in (from the props or a created one)
+     */
+    scrollViewRef: RefObject<T>;
+    /**
+     * scrollTo callback.
+     * scrollToOffset - the x or y to scroll to.
+     * animated - should the scroll be animated (default is true)
+     */
+    scrollTo: (scrollToOffset: number, animated?: boolean) => void;
+};
+declare const useScrollTo: <T extends ScrollToSupportedViews>(props: ScrollToProps<T>) => ScrollToResultProps<T>;
+export default useScrollTo;

generatedTypes/hooks/useScrollToItem/index.d.ts

@@ -0,0 +1,52 @@
+import { LayoutChangeEvent } from 'react-native';
+import { ScrollToProps, ScrollToSupportedViews, ScrollToResultProps } from '../useScrollTo';
+export declare enum OffsetType {
+    CENTER = "CENTER",
+    DYNAMIC = "DYNAMIC",
+    LEFT = "LEFT",
+    RIGHT = "RIGHT"
+}
+export declare type ScrollToItemProps<T extends ScrollToSupportedViews> = Pick<ScrollToProps<T>, 'scrollViewRef'> & {
+    /**
+     * The number of items
+     */
+    itemsCount: number;
+    /**
+     * The selected item's index
+     */
+    selectedIndex?: number;
+    /**
+     * Where would the item be located (default to CENTER)
+     */
+    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 declare 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
+     */
+    itemsWidths: number[];
+    /**
+     * Use in order to focus the item with the specified index
+     */
+    focusIndex: (index: number, animated?: boolean) => void;
+};
+declare const useScrollToItem: <T extends ScrollToSupportedViews>(props: ScrollToItemProps<T>) => ScrollToItemResultProps<T>;
+export default useScrollToItem;

src/commons/withScrollEnabler.tsx

@@ -1,7 +1,5 @@
 import React, {useState, useCallback, useRef} from 'react';
-// eslint-disable-next-line no-unused-vars
 import {FlatListProps, ScrollViewProps, LayoutChangeEvent} from 'react-native';
-// eslint-disable-next-line no-unused-vars
 import forwardRef, {ForwardRefInjectedProps} from './forwardRef';
 //@ts-ignore
 import hoistStatics from 'hoist-non-react-statics';
@@ -21,9 +19,7 @@ export type WithScrollEnablerProps = {
 
 type PropTypes = ForwardRefInjectedProps & SupportedViewsProps;
 
-function withScrollEnabler<PROPS, STATICS = {}>(
-  WrappedComponent: React.ComponentType<PROPS & WithScrollEnablerProps>
-): React.ComponentType<PROPS> & STATICS {
+function withScrollEnabler<PROPS, STATICS = {}>(WrappedComponent: React.ComponentType<PROPS & WithScrollEnablerProps>): React.ComponentType<PROPS> & STATICS {
   const ScrollEnabler: React.FunctionComponent<PROPS & PropTypes> = (props: PROPS & PropTypes) => {
     const [scrollEnabled, setScrollEnabled] = useState(true);
     const contentSize = useRef(0);
@@ -36,36 +32,32 @@ function withScrollEnabler<PROPS, STATICS = {}>(
       }
     }, [scrollEnabled]);
 
-    const onContentSizeChange = useCallback(
-      (contentWidth: number, contentHeight: number) => {
-        const size = props.horizontal ? contentWidth : contentHeight;
-        if (size !== contentSize.current) {
-          contentSize.current = size;
-          if (layoutSize.current > 0) {
-            checkScroll();
-          }
+    const onContentSizeChange = useCallback((contentWidth: number, contentHeight: number) => {
+      const size = props.horizontal ? contentWidth : contentHeight;
+      if (size !== contentSize.current) {
+        contentSize.current = size;
+        if (layoutSize.current > 0) {
+          checkScroll();
         }
-      },
-      [props.horizontal, checkScroll]
-    );
+      }
+    },
+    [props.horizontal, checkScroll]);
 
-    const onLayout = useCallback(
-      (event: LayoutChangeEvent) => {
-        const {
-          nativeEvent: {
-            layout: {width, height}
-          }
-        } = event;
-        const size = props.horizontal ? width : height;
-        if (size !== layoutSize.current) {
-          layoutSize.current = size;
-          if (contentSize.current > 0) {
-            checkScroll();
-          }
+    const onLayout = useCallback((event: LayoutChangeEvent) => {
+      const {
+        nativeEvent: {
+          layout: {width, height}
         }
-      },
-      [props.horizontal, checkScroll]
-    );
+      } = event;
+      const size = props.horizontal ? width : height;
+      if (size !== layoutSize.current) {
+        layoutSize.current = size;
+        if (contentSize.current > 0) {
+          checkScroll();
+        }
+      }
+    },
+    [props.horizontal, checkScroll]);
 
     return (
       <WrappedComponent