@fountain-ui/core 2.0.0-beta.13 → 2.0.0-beta.16

package/src/Tabs/Tabs.tsx

@@ -1,13 +1,15 @@
-import React, { cloneElement, useEffect, useMemo, useRef } from 'react';
-import { GestureResponderEvent, LayoutChangeEvent, ScrollView, View } from 'react-native';
-import type { WithTimingConfig } from 'react-native-reanimated';
-import { Easing, useSharedValue, withTiming } from 'react-native-reanimated';
+import React, { cloneElement, forwardRef, useImperativeHandle } from 'react';
+import type { GestureResponderEvent, LayoutChangeEvent } from 'react-native';
+import { ScrollView, View } from 'react-native';
+import { useSharedValue } from 'react-native-reanimated';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { css, useTheme } from '../styles';
 import type TabsProps from './TabsProps';
+import type { TabsInstance } from './TabsProps';
 import TabIndicator from './TabIndicator';
-import useTabsWidth from './useTabsWidth';
+import IndexAwareTab from './IndexAwareTab';
 import useTabCoordinates from './useTabCoordinates';
+import useScrollViewReaction from './useScrollViewReaction';
 
 type TabsStyleKeys =
     | 'root'
@@ -34,65 +36,46 @@ const useStyles: UseStyles<TabsStyles> = function (): TabsStyles {
     };
 };
 
-const ANIMATION_CONFIG: Readonly<WithTimingConfig> = {
-    duration: 200,
-    easing: Easing.out(Easing.exp),
-};
-
-export default function Tabs(props: TabsProps) {
+const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
     const {
         children,
-        index: indexProp,
+        initialIndex = 0,
         disableIndicator = false,
         keyboardDismissMode = 'none',
         keyboardShouldPersistTaps = 'never',
         onChange,
         scrollable = false,
-        scrollValue: scrollValueProp,
         style,
         variant = 'primary',
-        ...otherProps
+        UNSTABLE_sharedIndex,
     } = props;
 
-    const styles = useStyles();
-
-    const [containerWidth, handleLayout] = useTabsWidth();
-
-    const scrollViewRef = useRef<ScrollView | null>(null);
+    const fallbackSharedIndex = useSharedValue<number>(initialIndex);
 
-    const { coordinates, updateCoordinate } = useTabCoordinates(children);
+    const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;
 
-    const internalScrollValue = useSharedValue(0);
-    const scrollValue = scrollValueProp ?? internalScrollValue;
+    const getCurrentIndex = (): number => sharedIndex.value;
 
-    const isReadyToRenderIndicator = coordinates.length > 0;
-
-    useEffect(() => {
-        const animateTab = (index: number) => {
-            scrollValue.value = withTiming(index, ANIMATION_CONFIG);
-        };
-
-        animateTab(indexProp);
-    }, [indexProp, scrollValue]);
+    const setTab = (newIndex: number) => {
+        sharedIndex.value = newIndex;
+    };
 
-    const scrollPosition = useMemo<number>(() => {
-        const coordinate = coordinates[indexProp - 1];
+    useImperativeHandle(
+        ref,
+        () => ({
+            getCurrentIndex,
+            setTab,
+        }),
+        [sharedIndex],
+    );
 
-        if (coordinate) {
-            const tabWidth = coordinate.x2 - coordinate.x1;
-            return Math.floor(coordinate.x1 + tabWidth / 2);
-        }
+    const styles = useStyles();
 
-        return 0;
-    }, [indexProp, coordinates]);
+    const { coordinates, updateCoordinate } = useTabCoordinates(children);
 
-    useEffect(() => {
-        const scrollView = scrollViewRef.current;
+    const { scrollViewRef, onLayout } = useScrollViewReaction(sharedIndex, coordinates);
 
-        if (scrollView) {
-            scrollView.scrollTo({ x: scrollPosition, y: 0, animated: true });
-        }
-    }, [scrollPosition, containerWidth]);
+    const isReadyToRenderIndicator = coordinates.length > 0;
 
     const tabElements = React.Children.map(children, (child, index) => {
         const onLayout = (event: LayoutChangeEvent) => {
@@ -108,46 +91,49 @@ export default function Tabs(props: TabsProps) {
         };
 
         const onPress = () => {
+            setTab(index);
+
             onChange?.(index);
             // @ts-ignore
             child.props.onPress?.();
         };
 
-        const selected = index === indexProp;
-        const enableIndicatorPlaceholder = disableIndicator
-            ? false
-            : (isReadyToRenderIndicator ? false : selected);
-
-        //@ts-ignore
-        return cloneElement(child, {
-            enableIndicator: enableIndicatorPlaceholder,
+        // @ts-ignore
+        const tabElement = cloneElement(child, {
+            enableIndicator: !disableIndicator && !isReadyToRenderIndicator,
             onLayout,
             onPress,
             onMouseDown,
             variant,
-            selected,
             style: scrollable ? undefined : styles.fixedTab,
         });
+
+        return (
+            <IndexAwareTab
+                children={tabElement}
+                index={index}
+                sharedIndex={sharedIndex}
+            />
+        );
     });
 
-    const indicator = (
+    const tabIndicator = isReadyToRenderIndicator ? (
         <TabIndicator
             coordinates={coordinates}
             disabled={disableIndicator}
             scrollable={scrollable}
-            scrollValue={scrollValue}
+            sharedIndex={sharedIndex}
         />
-    );
+    ) : null;
 
     return (
         <View
-            onLayout={handleLayout}
+            onLayout={onLayout}
             style={css([
                 styles.root,
                 scrollable ? undefined : styles.fixedRoot,
                 style,
             ])}
-            {...otherProps}
         >
             {scrollable ? (
                 <ScrollView
@@ -164,14 +150,16 @@ export default function Tabs(props: TabsProps) {
                     keyboardShouldPersistTaps={keyboardShouldPersistTaps}
                 >
                     {tabElements}
-                    {indicator}
+                    {tabIndicator}
                 </ScrollView>
             ) : (
                 <React.Fragment>
                     {tabElements}
-                    {indicator}
+                    {tabIndicator}
                 </React.Fragment>
             )}
         </View>
     );
-};
+});
+
+export default Tabs;

package/src/Tabs/TabsProps.ts

@@ -1,6 +1,6 @@
-import React from 'react';
+import type { ReactNode, Ref } from 'react';
 import type { ViewProps } from 'react-native';
-import Animated from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
 import type { TabVariant } from '../Tab';
 import type { OverridableComponentProps } from '../types';
 
@@ -15,16 +15,26 @@ export type KeyboardShouldPersistTaps =
     | 'always'
     | 'handled'; // app only
 
-export default interface TabsProps extends OverridableComponentProps<ViewProps, {
+export interface TabsInstance {
     /**
-     * Collection of Tab components.
+     * Get current tab index.
      */
-    children: React.ReactNode;
+    getCurrentIndex: () => number;
 
     /**
-     * Selected index.
+     * Function to scroll to a specific tab. Invalid index is ignored.
+     * @param index
      */
-    index: number;
+    setTab: (index: number) => void;
+}
+
+export default interface TabsProps extends OverridableComponentProps<ViewProps, {
+    ref?: Ref<TabsInstance>;
+
+    /**
+     * Collection of Tab components.
+     */
+    children: ReactNode;
 
     /**
      * If `true`, the indicator is disabled.
@@ -32,6 +42,12 @@ export default interface TabsProps extends OverridableComponentProps<ViewProps,
      */
     disableIndicator?: boolean;
 
+    /**
+     * Index of initial tab that should be selected.
+     * @default 0
+     */
+    initialIndex?: number;
+
     /**
      * keyboard dismissing condition of dragging.
      * @default 'none'
@@ -56,9 +72,9 @@ export default interface TabsProps extends OverridableComponentProps<ViewProps,
     scrollable?: boolean;
 
     /**
-     * Scrollable value for using animated interpolation.
+     * Unstable API.
      */
-    scrollValue?: Animated.SharedValue<number>;
+    UNSTABLE_sharedIndex?: SharedValue<number>;
 
     /**
      * The variant to use.

package/src/Tabs/index.ts

@@ -1,2 +1,2 @@
 export { default } from './Tabs';
-export type { default as TabsProps } from './TabsProps';
+export type { default as TabsProps, TabsInstance } from './TabsProps';

package/src/Tabs/useScrollViewReaction.ts

@@ -0,0 +1,63 @@
+import type { MutableRefObject } from 'react';
+import { useCallback, useRef } from 'react';
+import type { ScrollView, ViewProps } from 'react-native';
+import { Platform } from 'react-native';
+import { runOnJS, scrollTo, SharedValue, useAnimatedReaction, useAnimatedRef } from 'react-native-reanimated';
+import type TabCoordinate from './TabCoordinate';
+
+export interface UseScrollViewReaction {
+    scrollViewRef: MutableRefObject<ScrollView | null>;
+    onLayout: ViewProps['onLayout'];
+}
+
+export default function useScrollViewReaction(
+    sharedIndex: SharedValue<number>,
+    coordinates: TabCoordinate[],
+): UseScrollViewReaction {
+    const scrollViewRef = useAnimatedRef<ScrollView>();
+
+    const lastScrolledXRef = useRef<number>(NaN);
+
+    const scrollToX = (x: number) => {
+        if (Number.isFinite(x)) {
+            scrollViewRef.current?.scrollTo({ x, y: 0, animated: true });
+
+            didScrollToX(x);
+        }
+    };
+
+    const didScrollToX = (x: number) => {
+        lastScrolledXRef.current = x;
+    };
+
+    const onLayout = useCallback(() => {
+        scrollToX(lastScrolledXRef.current);
+    }, []);
+
+    useAnimatedReaction(
+        () => {
+            const prevIndex = sharedIndex.value - 1;
+            const prevCoordinate = coordinates[prevIndex];
+
+            if (prevCoordinate) {
+                const prevTabWidth = prevCoordinate.x2 - prevCoordinate.x1;
+                return Math.floor(prevCoordinate.x1 + prevTabWidth / 2);
+            }
+
+            return 0;
+        },
+        (x, prevX) => {
+            if (x !== prevX) {
+                if (Platform.OS === 'web') {
+                    runOnJS(scrollToX)(x);
+                } else {
+                    scrollTo(scrollViewRef, x, 0, true);
+                    runOnJS(didScrollToX)(x);
+                }
+            }
+        },
+        [coordinates],
+    );
+
+    return { scrollViewRef, onLayout };
+};

package/src/hooks/useValidWindowDimensions/index.ios.ts

@@ -1,15 +1,21 @@
-import { useState, useEffect } from 'react';
-import { useWindowDimensions } from 'react-native';
+import { useEffect, useState } from 'react';
+import type { ScaledSize } from 'react-native';
+import { Dimensions } from 'react-native';
 
-export default function useValidWindowDimensions() {
-    const window = useWindowDimensions();
-    const [validWindow, setValidWindow] = useState(window);
+export default function useValidWindowDimensions(): ScaledSize {
+    const [window, setWindow] = useState<ScaledSize>(() => Dimensions.get('window'));
 
     useEffect(() => {
-        if (window.width !== 0 && window.height !== 0) {
-            setValidWindow(window);
-        }
-    }, [window]);
+        const subscription = Dimensions.addEventListener('change', (newDimension) => {
+            const { window: newWindow } = newDimension;
 
-    return validWindow;
+            if (newWindow.width !== 0 && newWindow.height !== 0) {
+                setWindow(newWindow);
+            }
+        });
+
+        return subscription.remove;
+    }, []);
+
+    return window;
 }

package/build/commonjs/Tabs/useTabsWidth.js

@@ -1,26 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useTabsWidth;
-
-var _react = require("react");
-
-var _reactNative = require("react-native");
-
-const assumeInitialWidth = () => _reactNative.Dimensions.get('window').width;
-
-const isIntegerPartEquals = (a, b) => Math.round(a) === Math.round(b);
-
-const isIntegerPartDifferent = (a, b) => !isIntegerPartEquals(a, b);
-
-function useTabsWidth() {
-  const [width, setWidth] = (0, _react.useState)(assumeInitialWidth);
-  const onLayout = (0, _react.useCallback)(e => {
-    const newWidth = e.nativeEvent.layout.width;
-    setWidth(prevWidth => isIntegerPartDifferent(prevWidth, newWidth) ? newWidth : prevWidth);
-  }, []);
-  return [width, onLayout];
-}
-//# sourceMappingURL=useTabsWidth.js.map

package/build/commonjs/Tabs/useTabsWidth.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["assumeInitialWidth","Dimensions","get","width","isIntegerPartEquals","a","b","Math","round","isIntegerPartDifferent","useTabsWidth","setWidth","useState","onLayout","useCallback","e","newWidth","nativeEvent","layout","prevWidth"],"sources":["useTabsWidth.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { Dimensions, LayoutChangeEvent, ViewProps } from 'react-native';\n\nconst assumeInitialWidth = (): number => Dimensions.get('window').width;\n\nconst isIntegerPartEquals = (a: number, b: number) => Math.round(a) === Math.round(b);\n\nconst isIntegerPartDifferent = (a: number, b: number) => !isIntegerPartEquals(a, b);\n\nexport default function useTabsWidth(): [number, ViewProps['onLayout']] {\n    const [width, setWidth] = useState(assumeInitialWidth);\n\n    const onLayout = useCallback((e: LayoutChangeEvent) => {\n        const newWidth = e.nativeEvent.layout.width;\n\n        setWidth((prevWidth) => isIntegerPartDifferent(prevWidth, newWidth) ? newWidth : prevWidth);\n    }, []);\n\n    return [width, onLayout];\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA,MAAMA,kBAAkB,GAAG,MAAcC,uBAAA,CAAWC,GAAX,CAAe,QAAf,EAAyBC,KAAlE;;AAEA,MAAMC,mBAAmB,GAAG,CAACC,CAAD,EAAYC,CAAZ,KAA0BC,IAAI,CAACC,KAAL,CAAWH,CAAX,MAAkBE,IAAI,CAACC,KAAL,CAAWF,CAAX,CAAxE;;AAEA,MAAMG,sBAAsB,GAAG,CAACJ,CAAD,EAAYC,CAAZ,KAA0B,CAACF,mBAAmB,CAACC,CAAD,EAAIC,CAAJ,CAA7E;;AAEe,SAASI,YAAT,GAAyD;EACpE,MAAM,CAACP,KAAD,EAAQQ,QAAR,IAAoB,IAAAC,eAAA,EAASZ,kBAAT,CAA1B;EAEA,MAAMa,QAAQ,GAAG,IAAAC,kBAAA,EAAaC,CAAD,IAA0B;IACnD,MAAMC,QAAQ,GAAGD,CAAC,CAACE,WAAF,CAAcC,MAAd,CAAqBf,KAAtC;IAEAQ,QAAQ,CAAEQ,SAAD,IAAeV,sBAAsB,CAACU,SAAD,EAAYH,QAAZ,CAAtB,GAA8CA,QAA9C,GAAyDG,SAAzE,CAAR;EACH,CAJgB,EAId,EAJc,CAAjB;EAMA,OAAO,CAAChB,KAAD,EAAQU,QAAR,CAAP;AACH"}

package/build/module/Tabs/useTabsWidth.js

@@ -1,18 +0,0 @@
-import { useCallback, useState } from 'react';
-import { Dimensions } from 'react-native';
-
-const assumeInitialWidth = () => Dimensions.get('window').width;
-
-const isIntegerPartEquals = (a, b) => Math.round(a) === Math.round(b);
-
-const isIntegerPartDifferent = (a, b) => !isIntegerPartEquals(a, b);
-
-export default function useTabsWidth() {
-  const [width, setWidth] = useState(assumeInitialWidth);
-  const onLayout = useCallback(e => {
-    const newWidth = e.nativeEvent.layout.width;
-    setWidth(prevWidth => isIntegerPartDifferent(prevWidth, newWidth) ? newWidth : prevWidth);
-  }, []);
-  return [width, onLayout];
-}
-//# sourceMappingURL=useTabsWidth.js.map

package/build/module/Tabs/useTabsWidth.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useCallback","useState","Dimensions","assumeInitialWidth","get","width","isIntegerPartEquals","a","b","Math","round","isIntegerPartDifferent","useTabsWidth","setWidth","onLayout","e","newWidth","nativeEvent","layout","prevWidth"],"sources":["useTabsWidth.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { Dimensions, LayoutChangeEvent, ViewProps } from 'react-native';\n\nconst assumeInitialWidth = (): number => Dimensions.get('window').width;\n\nconst isIntegerPartEquals = (a: number, b: number) => Math.round(a) === Math.round(b);\n\nconst isIntegerPartDifferent = (a: number, b: number) => !isIntegerPartEquals(a, b);\n\nexport default function useTabsWidth(): [number, ViewProps['onLayout']] {\n    const [width, setWidth] = useState(assumeInitialWidth);\n\n    const onLayout = useCallback((e: LayoutChangeEvent) => {\n        const newWidth = e.nativeEvent.layout.width;\n\n        setWidth((prevWidth) => isIntegerPartDifferent(prevWidth, newWidth) ? newWidth : prevWidth);\n    }, []);\n\n    return [width, onLayout];\n}\n"],"mappings":"AAAA,SAASA,WAAT,EAAsBC,QAAtB,QAAsC,OAAtC;AACA,SAASC,UAAT,QAAyD,cAAzD;;AAEA,MAAMC,kBAAkB,GAAG,MAAcD,UAAU,CAACE,GAAX,CAAe,QAAf,EAAyBC,KAAlE;;AAEA,MAAMC,mBAAmB,GAAG,CAACC,CAAD,EAAYC,CAAZ,KAA0BC,IAAI,CAACC,KAAL,CAAWH,CAAX,MAAkBE,IAAI,CAACC,KAAL,CAAWF,CAAX,CAAxE;;AAEA,MAAMG,sBAAsB,GAAG,CAACJ,CAAD,EAAYC,CAAZ,KAA0B,CAACF,mBAAmB,CAACC,CAAD,EAAIC,CAAJ,CAA7E;;AAEA,eAAe,SAASI,YAAT,GAAyD;EACpE,MAAM,CAACP,KAAD,EAAQQ,QAAR,IAAoBZ,QAAQ,CAACE,kBAAD,CAAlC;EAEA,MAAMW,QAAQ,GAAGd,WAAW,CAAEe,CAAD,IAA0B;IACnD,MAAMC,QAAQ,GAAGD,CAAC,CAACE,WAAF,CAAcC,MAAd,CAAqBb,KAAtC;IAEAQ,QAAQ,CAAEM,SAAD,IAAeR,sBAAsB,CAACQ,SAAD,EAAYH,QAAZ,CAAtB,GAA8CA,QAA9C,GAAyDG,SAAzE,CAAR;EACH,CAJ2B,EAIzB,EAJyB,CAA5B;EAMA,OAAO,CAACd,KAAD,EAAQS,QAAR,CAAP;AACH"}

package/build/typescript/Tabs/useTabsWidth.d.ts

@@ -1,2 +0,0 @@
-import { ViewProps } from 'react-native';
-export default function useTabsWidth(): [number, ViewProps['onLayout']];

package/src/Tabs/useTabsWidth.ts

@@ -1,20 +0,0 @@
-import { useCallback, useState } from 'react';
-import { Dimensions, LayoutChangeEvent, ViewProps } from 'react-native';
-
-const assumeInitialWidth = (): number => Dimensions.get('window').width;
-
-const isIntegerPartEquals = (a: number, b: number) => Math.round(a) === Math.round(b);
-
-const isIntegerPartDifferent = (a: number, b: number) => !isIntegerPartEquals(a, b);
-
-export default function useTabsWidth(): [number, ViewProps['onLayout']] {
-    const [width, setWidth] = useState(assumeInitialWidth);
-
-    const onLayout = useCallback((e: LayoutChangeEvent) => {
-        const newWidth = e.nativeEvent.layout.width;
-
-        setWidth((prevWidth) => isIntegerPartDifferent(prevWidth, newWidth) ? newWidth : prevWidth);
-    }, []);
-
-    return [width, onLayout];
-}