@fountain-ui/core 2.0.0-beta.10 → 2.0.0-beta.11

package/src/Tabs/Tabs.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
+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 { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import { isEveryDefined } from '@fountain-ui/utils';
 import { css, useTheme } from '../styles';
-import { useWidth } from '../internal/hooks';
 import type TabsProps from './TabsProps';
-import TabCoordinate, { defaultCoordinate } from './TabCoordinate';
 import TabIndicator from './TabIndicator';
+import useTabsWidth from './useTabsWidth';
+import useTabCoordinates from './useTabCoordinates';
 
 type TabsStyleKeys =
     | 'root'
@@ -34,6 +34,11 @@ 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 {
         children,
@@ -51,56 +56,49 @@ export default function Tabs(props: TabsProps) {
 
     const styles = useStyles();
 
-    const [containerWidth, handleLayout] = useWidth();
+    const [containerWidth, handleLayout] = useTabsWidth();
 
-    const scrollViewRef = React.useRef<ScrollView | null>(null);
+    const scrollViewRef = useRef<ScrollView | null>(null);
 
-    const tabCount = React.Children.count(children);
-    const [coordinates, setCoordinates] = React.useState<TabCoordinate[]>(() => new Array(tabCount));
+    const { coordinates, updateCoordinate } = useTabCoordinates(children);
 
     const internalScrollValue = useSharedValue(0);
-    const scrollValue = scrollValueProp || internalScrollValue;
+    const scrollValue = scrollValueProp ?? internalScrollValue;
 
-    const isReadyToRenderIndicator = isEveryDefined(coordinates);
+    const isReadyToRenderIndicator = coordinates.length > 0;
 
-    React.useEffect(() => {
+    useEffect(() => {
         const animateTab = (index: number) => {
-            internalScrollValue.value = withTiming(index, {
-                duration: 200,
-                easing: Easing.out(Easing.exp),
-            });
+            scrollValue.value = withTiming(index, ANIMATION_CONFIG);
         };
 
-        if (scrollValueProp === undefined) {
-            animateTab(indexProp);
-        }
-    }, [indexProp, scrollValueProp, internalScrollValue]);
+        animateTab(indexProp);
+    }, [indexProp, scrollValue]);
+
+    const scrollPosition = useMemo<number>(() => {
+        const coordinate = coordinates[indexProp - 1];
 
-    React.useEffect(() => {
-        const snapTab = (index: number) => {
-            const scrollView = scrollViewRef.current;
-            const coordinate: TabCoordinate = coordinates[index - 1] || defaultCoordinate;
+        if (coordinate) {
+            const tabWidth = coordinate.x2 - coordinate.x1;
+            return Math.floor(coordinate.x1 + tabWidth / 2);
+        }
 
-            if (scrollView) {
-                const tabWidth = coordinate.x2 - coordinate.x1;
-                const x = coordinate.x1 + tabWidth / 2;
+        return 0;
+    }, [indexProp, coordinates]);
 
-                scrollView.scrollTo({ x, y: 0, animated: true });
-            }
-        };
+    useEffect(() => {
+        const scrollView = scrollViewRef.current;
 
-        snapTab(indexProp);
-    }, [indexProp, containerWidth, coordinates]);
+        if (scrollView && scrollPosition > 0) {
+            scrollView.scrollTo({ x: scrollPosition, y: 0, animated: true });
+        }
+    }, [scrollPosition, containerWidth]);
 
     const tabElements = React.Children.map(children, (child, index) => {
         const onLayout = (event: LayoutChangeEvent) => {
             const { x, width } = event.nativeEvent.layout;
 
-            setCoordinates(prev => ([
-                ...prev.slice(0, index),
-                { x1: x, x2: x + width },
-                ...prev.slice(index + 1),
-            ]));
+            updateCoordinate(index, x, width);
         };
 
         const onMouseDown = (e: GestureResponderEvent) => {
@@ -121,7 +119,7 @@ export default function Tabs(props: TabsProps) {
             : (isReadyToRenderIndicator ? false : selected);
 
         //@ts-ignore
-        return React.cloneElement(child, {
+        return cloneElement(child, {
             enableIndicator: enableIndicatorPlaceholder,
             onLayout,
             onPress,
@@ -169,10 +167,10 @@ export default function Tabs(props: TabsProps) {
                     {indicator}
                 </ScrollView>
             ) : (
-                <>
+                <React.Fragment>
                     {tabElements}
                     {indicator}
-                </>
+                </React.Fragment>
             )}
         </View>
     );

package/src/Tabs/useTabCoordinates.ts

@@ -0,0 +1,36 @@
+import React, { useRef, useState } from 'react';
+import { isEveryDefined } from '@fountain-ui/utils';
+import TabCoordinate from './TabCoordinate';
+
+export interface UseTabCoordinates {
+    coordinates: TabCoordinate[];
+    updateCoordinate: (index: number, x: number, width: number) => void;
+}
+
+export default function useTabCoordinates(tabElements: React.ReactNode): UseTabCoordinates {
+    const incompleteCoordinatesRef = useRef<TabCoordinate[]>([]);
+
+    const [completeCoordinates, setCompleteCoordinates] = useState<TabCoordinate[]>([]);
+
+    const isAllCoordinatesDefined = (coordinates: TabCoordinate[]): boolean => {
+        const numberOfTab = React.Children.count(tabElements);
+        const numberOfCoordinates = coordinates.length;
+
+        const everyCoordinatesDefined = isEveryDefined(coordinates);
+
+        return numberOfTab === numberOfCoordinates && everyCoordinatesDefined;
+    };
+
+    const updateCoordinate = (index: number, x: number, width: number) => {
+        incompleteCoordinatesRef.current[index] = { x1: x, x2: x + width };
+
+        if (isAllCoordinatesDefined(incompleteCoordinatesRef.current)) {
+            setCompleteCoordinates(incompleteCoordinatesRef.current);
+        }
+    };
+
+    return {
+        coordinates: completeCoordinates,
+        updateCoordinate,
+    };
+}

package/src/Tabs/useTabsWidth.ts

@@ -0,0 +1,20 @@
+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];
+}

package/src/hooks/useCollapsibleAppBar.ts

@@ -71,17 +71,28 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
 
     const elevationStyle = useElevationStyle(4);
     const animatedStyle = useAnimatedStyle(() => {
-        return Platform.OS === 'web' ? ({
-            transform: [{ translateY: translateY.value }],
-            boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,
-        }) : ({
-            transform: [{ translateY: translateY.value }],
-            elevation: overlapped.value ? elevationStyle?.elevation : 0,
-            shadowColor: elevationStyle?.shadowColor,
-            shadowOffset: elevationStyle?.shadowOffset,
-            shadowRadius: elevationStyle?.shadowRadius,
-            shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,
-        });
+        if (Platform.OS === 'web') {
+            return {
+                transform: [{ translateY: translateY.value }],
+                boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,
+            };
+        }
+        if (Platform.OS === 'android') {
+            return {
+                transform: [{ translateY: translateY.value }],
+                elevation: overlapped.value ? elevationStyle?.elevation : 0,
+            };
+        }
+        if (Platform.OS === 'ios') {
+            return {
+                transform: [{ translateY: translateY.value }],
+                shadowColor: elevationStyle?.shadowColor,
+                shadowOffset: elevationStyle?.shadowOffset,
+                shadowRadius: elevationStyle?.shadowRadius,
+                shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,
+            };
+        }
+        return {};
     });
 
     const indexRef = React.useRef<number>(0);

package/src/hooks/useFadeInAppBar.ts

@@ -77,14 +77,29 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
     const backgroundColor = theme.palette.background.default;
     const [r, g, b] = React.useMemo(() => rgb(backgroundColor), [backgroundColor]);
 
-    const animatedAppBarStyle = useAnimatedStyle(() => ({
-        backgroundColor: `rgba(${r}, ${g}, ${b}, ${normalized.value})`,
-        elevation: normalized.value >= 1 ? 6 : 0,
-        shadowColor: '#000',
-        shadowOffset,
-        shadowRadius: 4.65,
-        shadowOpacity: normalized.value >= 1 ? 0.25 : 0,
-    }));
+    const animatedAppBarStyle = useAnimatedStyle(() => {
+        if (Platform.OS === 'web') {
+            return {
+                backgroundColor: `rgba(${r}, ${g}, ${b}, ${normalized.value})`,
+            };
+        }
+        if (Platform.OS === 'android') {
+            return {
+                backgroundColor: `rgba(${r}, ${g}, ${b}, ${normalized.value})`,
+                elevation: normalized.value >= 1 ? 6 : 0,
+            };
+        }
+        if (Platform.OS === 'ios') {
+            return {
+                backgroundColor: `rgba(${r}, ${g}, ${b}, ${normalized.value})`,
+                shadowColor: '#000',
+                shadowOffset,
+                shadowRadius: 4.65,
+                shadowOpacity: normalized.value >= 1 ? 0.25 : 0,
+            };
+        }
+        return {};
+    });
 
     const animatedTitleStyle = useAnimatedStyle(() => ({
         opacity: normalized.value,

package/src/internal/hooks/index.ts

@@ -1,2 +1 @@
 export { default as useHeight } from './useHeight';
-export { default as useWidth } from './useWidth';

package/build/commonjs/internal/hooks/useWidth.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useWidth;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _reactNative = require("react-native");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function useWidth() {
-  const window = (0, _reactNative.useWindowDimensions)();
-
-  const [width, setWidth] = _react.default.useState(window.width);
-
-  const onLayout = _react.default.useCallback(e => {
-    const newWidth = e.nativeEvent.layout.width;
-
-    if (newWidth > 0 && Math.round(newWidth) !== Math.round(width)) {
-      setWidth(newWidth);
-    }
-  }, []);
-
-  return [width, onLayout];
-}
-//# sourceMappingURL=useWidth.js.map

package/build/commonjs/internal/hooks/useWidth.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useWidth","window","useWindowDimensions","width","setWidth","React","useState","onLayout","useCallback","e","newWidth","nativeEvent","layout","Math","round"],"sources":["useWidth.ts"],"sourcesContent":["import React from 'react';\nimport { LayoutChangeEvent, useWindowDimensions, ViewProps } from 'react-native';\n\nexport default function useWidth(): [number, ViewProps['onLayout']] {\n    const window = useWindowDimensions();\n    const [width, setWidth] = React.useState(window.width);\n\n    const onLayout = React.useCallback((e: LayoutChangeEvent) => {\n        const newWidth = e.nativeEvent.layout.width;\n\n        if (newWidth > 0 && Math.round(newWidth) !== Math.round(width)) {\n            setWidth(newWidth);\n        }\n    }, []);\n\n    return [width, onLayout];\n}"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEe,SAASA,QAAT,GAAqD;EAChE,MAAMC,MAAM,GAAG,IAAAC,gCAAA,GAAf;;EACA,MAAM,CAACC,KAAD,EAAQC,QAAR,IAAoBC,cAAA,CAAMC,QAAN,CAAeL,MAAM,CAACE,KAAtB,CAA1B;;EAEA,MAAMI,QAAQ,GAAGF,cAAA,CAAMG,WAAN,CAAmBC,CAAD,IAA0B;IACzD,MAAMC,QAAQ,GAAGD,CAAC,CAACE,WAAF,CAAcC,MAAd,CAAqBT,KAAtC;;IAEA,IAAIO,QAAQ,GAAG,CAAX,IAAgBG,IAAI,CAACC,KAAL,CAAWJ,QAAX,MAAyBG,IAAI,CAACC,KAAL,CAAWX,KAAX,CAA7C,EAAgE;MAC5DC,QAAQ,CAACM,QAAD,CAAR;IACH;EACJ,CANgB,EAMd,EANc,CAAjB;;EAQA,OAAO,CAACP,KAAD,EAAQI,QAAR,CAAP;AACH"}

package/build/module/internal/hooks/useWidth.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import { useWindowDimensions } from 'react-native';
-export default function useWidth() {
-  const window = useWindowDimensions();
-  const [width, setWidth] = React.useState(window.width);
-  const onLayout = React.useCallback(e => {
-    const newWidth = e.nativeEvent.layout.width;
-
-    if (newWidth > 0 && Math.round(newWidth) !== Math.round(width)) {
-      setWidth(newWidth);
-    }
-  }, []);
-  return [width, onLayout];
-}
-//# sourceMappingURL=useWidth.js.map

package/build/module/internal/hooks/useWidth.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","useWindowDimensions","useWidth","window","width","setWidth","useState","onLayout","useCallback","e","newWidth","nativeEvent","layout","Math","round"],"sources":["useWidth.ts"],"sourcesContent":["import React from 'react';\nimport { LayoutChangeEvent, useWindowDimensions, ViewProps } from 'react-native';\n\nexport default function useWidth(): [number, ViewProps['onLayout']] {\n    const window = useWindowDimensions();\n    const [width, setWidth] = React.useState(window.width);\n\n    const onLayout = React.useCallback((e: LayoutChangeEvent) => {\n        const newWidth = e.nativeEvent.layout.width;\n\n        if (newWidth > 0 && Math.round(newWidth) !== Math.round(width)) {\n            setWidth(newWidth);\n        }\n    }, []);\n\n    return [width, onLayout];\n}"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAA4BC,mBAA5B,QAAkE,cAAlE;AAEA,eAAe,SAASC,QAAT,GAAqD;EAChE,MAAMC,MAAM,GAAGF,mBAAmB,EAAlC;EACA,MAAM,CAACG,KAAD,EAAQC,QAAR,IAAoBL,KAAK,CAACM,QAAN,CAAeH,MAAM,CAACC,KAAtB,CAA1B;EAEA,MAAMG,QAAQ,GAAGP,KAAK,CAACQ,WAAN,CAAmBC,CAAD,IAA0B;IACzD,MAAMC,QAAQ,GAAGD,CAAC,CAACE,WAAF,CAAcC,MAAd,CAAqBR,KAAtC;;IAEA,IAAIM,QAAQ,GAAG,CAAX,IAAgBG,IAAI,CAACC,KAAL,CAAWJ,QAAX,MAAyBG,IAAI,CAACC,KAAL,CAAWV,KAAX,CAA7C,EAAgE;MAC5DC,QAAQ,CAACK,QAAD,CAAR;IACH;EACJ,CANgB,EAMd,EANc,CAAjB;EAQA,OAAO,CAACN,KAAD,EAAQG,QAAR,CAAP;AACH"}

package/build/typescript/internal/hooks/useWidth.d.ts

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

package/src/internal/hooks/useWidth.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-import { LayoutChangeEvent, useWindowDimensions, ViewProps } from 'react-native';
-
-export default function useWidth(): [number, ViewProps['onLayout']] {
-    const window = useWindowDimensions();
-    const [width, setWidth] = React.useState(window.width);
-
-    const onLayout = React.useCallback((e: LayoutChangeEvent) => {
-        const newWidth = e.nativeEvent.layout.width;
-
-        if (newWidth > 0 && Math.round(newWidth) !== Math.round(width)) {
-            setWidth(newWidth);
-        }
-    }, []);
-
-    return [width, onLayout];
-}