Typescript/tab controller move to function component (#1098)

* Move TabBar to functional component

* Fix Fader in RTL

* Fader - add START and END (deprecate LEFT and RIGHT)

* Update src/components/tabController/TabBar.tsx

Simplify the ignore

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

* Rename getSnapBreakpoints to snapBreakpoints

* Remove _.memoize

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

Author: M-i-k-e-l

demo/src/screens/componentScreens/FaderScreen.tsx

@@ -1,14 +1,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';
+import {Colors, Text, View, Fader, withScrollReached, WithScrollReachedProps} from 'react-native-ui-lib';
 import {renderHeader} from '../ExampleScreenPresenter';
 
 const numberOfItems = 3;
@@ -17,9 +10,7 @@ const itemWidth = 100;
 const itemHeight = 100;
 const tintColor = undefined;
 
-const horizontal =
-  faderPosition === Fader.position.LEFT ||
-  faderPosition === Fader.position.RIGHT;
+const horizontal = faderPosition === Fader.position.START || faderPosition === Fader.position.END;
 
 class FaderScreen extends Component<WithScrollReachedProps> {
   renderItem = (index: number) => {
@@ -33,8 +24,7 @@ class FaderScreen extends Component<WithScrollReachedProps> {
   render() {
     const {scrollReachedProps} = this.props;
     const visible =
-      faderPosition === Fader.position.BOTTOM ||
-      faderPosition === Fader.position.RIGHT
+      faderPosition === Fader.position.BOTTOM || faderPosition === Fader.position.END
         ? !scrollReachedProps.isScrollAtEnd
         : !scrollReachedProps.isScrollAtStart;
 
@@ -53,11 +43,7 @@ class FaderScreen extends Component<WithScrollReachedProps> {
             >
               {_.times(numberOfItems, this.renderItem)}
             </ScrollView>
-            <Fader
-              visible={visible}
-              position={faderPosition}
-              tintColor={tintColor}
-            />
+            <Fader visible={visible} position={faderPosition} tintColor={tintColor}/>
           </View>
         </View>
       </View>

generatedTypes/components/fader/index.d.ts

@@ -1,7 +1,15 @@
 /// <reference types="react" />
 export declare enum FaderPosition {
+    /**
+     * @deprecated please use START instead
+     */
     LEFT = "LEFT",
+    START = "START",
+    /**
+     * @deprecated please use END instead
+     */
     RIGHT = "RIGHT",
+    END = "END",
     TOP = "TOP",
     BOTTOM = "BOTTOM"
 }
@@ -11,7 +19,7 @@ export declare type FaderProps = {
      */
     visible?: boolean;
     /**
-     * The position of the fader (the image is different), defaults to Fader.position.RIGHT
+     * The position of the fader (the image is different), defaults to Fader.position.END
      */
     position?: FaderPosition;
     /**

generatedTypes/components/tabController/FadedScrollView.d.ts

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

src/components/fader/index.tsx

@@ -5,8 +5,16 @@ import View from '../view';
 import Image from '../image';
 
 export enum FaderPosition {
+  /**
+   * @deprecated please use START instead
+   */
   LEFT = 'LEFT',
+  START = 'START',
+  /**
+   * @deprecated please use END instead
+   */
   RIGHT = 'RIGHT',
+  END = 'END',
   TOP = 'TOP',
   BOTTOM = 'BOTTOM'
 }
@@ -17,7 +25,7 @@ export type FaderProps = {
    */
   visible?: boolean;
   /**
-   * The position of the fader (the image is different), defaults to Fader.position.RIGHT
+   * The position of the fader (the image is different), defaults to Fader.position.END
    */
   position?: FaderPosition;
   /**
@@ -39,15 +47,17 @@ function Fader(props: FaderProps) {
 
   const fadeSize = getFadeSize();
   const getStyles = useCallback(() => {
-    const position = props.position || FaderPosition.RIGHT;
+    const position = props.position || FaderPosition.END;
     let containerStyle, imageStyle, imageSource;
     switch (position) {
       case FaderPosition.LEFT:
+      case FaderPosition.START:
         containerStyle = {...staticStyles.containerLeft, width: fadeSize};
         imageStyle = {height: '100%', width: fadeSize};
         imageSource = require('./gradientLeft.png');
         break;
       case FaderPosition.RIGHT:
+      case FaderPosition.END:
         containerStyle = {...staticStyles.containerRight, width: fadeSize};
         imageStyle = {height: '100%', width: fadeSize};
         imageSource = require('./gradientRight.png');
@@ -80,6 +90,7 @@ function Fader(props: FaderProps) {
     <View pointerEvents={'none'} style={styles.containerStyle}>
       {(props.visible || _.isUndefined(props.visible)) && (
         <Image
+          supportRTL
           source={styles.imageSource}
           tintColor={props.tintColor}
           style={styles.imageStyle}

src/components/tabController/FadedScrollView.tsx

@@ -0,0 +1,60 @@
+import React, {useCallback} from 'react';
+import {ViewProps, ScrollView, ScrollViewProps, NativeSyntheticEvent, NativeScrollEvent} from 'react-native';
+import Fader from '../fader';
+import withScrollEnabler, {WithScrollEnablerProps} from '../../commons/withScrollEnabler';
+import withScrollReached, {WithScrollReachedProps} from '../../commons/withScrollReached';
+import forwardRef, {ForwardRefInjectedProps} from '../../commons/forwardRef';
+
+export type FadedScrollViewProps = ViewProps &
+  ScrollViewProps & {
+    children?: React.ReactNode | React.ReactNode[];
+  };
+
+type ScrollReachedProps = FadedScrollViewProps & WithScrollReachedProps;
+type ScrollEnabledProps = ScrollReachedProps & WithScrollEnablerProps;
+type Props = ScrollEnabledProps & ForwardRefInjectedProps;
+
+const FADER_SIZE = 76;
+
+const FadedScrollView = (props: Props) => {
+  const {scrollEnablerProps, scrollReachedProps, children, onScroll: propsOnScroll, ...other} = props;
+  const showStart = scrollEnablerProps.scrollEnabled && !scrollReachedProps.isScrollAtStart;
+  const showEnd = scrollEnablerProps.scrollEnabled && !scrollReachedProps.isScrollAtEnd;
+
+  const onScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    scrollReachedProps.onScroll(event);
+      propsOnScroll?.(event);
+  },
+  [scrollReachedProps.onScroll, propsOnScroll]);
+
+  if (children) {
+    return (
+      <>
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          scrollEventThrottle={16}
+          decelerationRate={'fast'}
+          {...other}
+          scrollEnabled={scrollEnablerProps.scrollEnabled}
+          onContentSizeChange={scrollEnablerProps.onContentSizeChange}
+          onLayout={scrollEnablerProps.onLayout}
+          onScroll={onScroll}
+          ref={props.forwardedRef}
+        >
+          {children}
+        </ScrollView>
+        <Fader visible={showStart} position={Fader.position.START} size={FADER_SIZE}/>
+        <Fader visible={showEnd} position={Fader.position.END} size={FADER_SIZE}/>
+      </>
+    );
+  }
+
+  return null;
+};
+
+// TODO: fix withScrollEnabler props (add <>)
+export default withScrollReached<FadedScrollViewProps>(withScrollEnabler(forwardRef<Props>(FadedScrollView)), {
+  horizontal: true,
+  threshold: 50
+});