@fountain-ui/core 2.0.0-beta.2 → 2.0.0-beta.20

package/src/Tabs/TabIndicator.tsx

@@ -1,20 +1,28 @@
-import React from 'react';
-import Animated from 'react-native-reanimated';
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { useTheme } from '../styles';
 import type TabIndicatorProps from './TabIndicatorProps';
 import { defaultCoordinate } from './TabCoordinate';
+import InternalContext from './InternalContext';
 
 type TabIndicatorStyles = NamedStylesStringUnion<'root' | 'disabled'>;
 
+const INDICATOR_WIDTH = 10;
+const INDICATOR_HEIGHT = 4;
+
+const SCROLLABLE_TABS_INSET = 12 * 2;
+
 const useStyles: UseStyles<TabIndicatorStyles> = function (): TabIndicatorStyles {
     const theme = useTheme();
 
     return {
         root: {
             backgroundColor: theme.palette.secondary.main,
+            left: 0,
             bottom: 0,
-            height: 4,
+            width: INDICATOR_WIDTH,
+            height: INDICATOR_HEIGHT,
             position: 'absolute',
         },
         disabled: {
@@ -23,49 +31,65 @@ const useStyles: UseStyles<TabIndicatorStyles> = function (): TabIndicatorStyles
     };
 };
 
+const startAnimation = (value: Animated.Value, toValue: number) => {
+    Animated.timing(value, {
+        toValue: toValue,
+        duration: 300,
+        easing: Easing.bezier(0.25, 1, 0.5, 1),
+        useNativeDriver: true,
+    }).start();
+};
+
 export default function TabIndicator(props: TabIndicatorProps) {
     const {
         coordinates,
         disabled,
+        initialIndex,
         scrollable,
-        scrollValue,
         style,
         ...otherProps
     } = props;
 
     const styles = useStyles();
 
-    const layout = Animated.useDerivedValue(() => {
-        const rawScrollValue = scrollValue.value;
-        const index = Math.floor(rawScrollValue);
-        const offset = rawScrollValue % 1;
+    const computeAnimationValues = useCallback((currentIndex: number) => {
+        const { x1, x2 } = coordinates[currentIndex] ?? defaultCoordinate;
+
+        const tabWidth = x2 - x1;
 
-        const coordinate = coordinates[index] ?? defaultCoordinate;
-        const nextCoordinate = coordinates[index + 1] ?? defaultCoordinate;
+        const nextTranslateX = x1 + (tabWidth - INDICATOR_WIDTH) / 2;
+
+        const inset = scrollable ? SCROLLABLE_TABS_INSET : 0;
+        const nextScaleX = (tabWidth - inset) / INDICATOR_WIDTH;
+
+        return { tx: nextTranslateX, sx: nextScaleX };
+    }, [coordinates, scrollable]);
+
+    const {
+        tx: initialTx,
+        sx: initialSx,
+    } = computeAnimationValues(initialIndex);
 
-        const x1 = (offset * nextCoordinate.x1 + (1 - offset) * coordinate.x1);
-        const x2 = (offset * nextCoordinate.x2 + (1 - offset) * coordinate.x2);
+    const translateX = useRef(new Animated.Value(initialTx)).current;
+    const scaleX = useRef(new Animated.Value(initialSx)).current;
 
-        const leftInset = scrollable ? 12 : 0;
-        const rightInset = scrollable ? 24 : 0;
+    const { indexStore } = useContext(InternalContext);
 
-        return {
-            left: x1 + leftInset,
-            width: Math.max(x2 - x1 - rightInset, 0),
-        };
-    });
+    useEffect(() => {
+        return indexStore.subscribe(currentIndex => {
+            const { tx, sx } = computeAnimationValues(currentIndex);
 
-    const animatedStyle = Animated.useAnimatedStyle(() => ({
-        left: layout.value.left,
-        width: layout.value.width,
-    }));
+            startAnimation(translateX, tx);
+            startAnimation(scaleX, sx);
+        });
+    }, [indexStore, computeAnimationValues]);
 
     return (
         <Animated.View
             style={[
                 styles.root,
                 disabled ? styles.disabled : undefined,
-                animatedStyle,
+                { transform: [{ translateX }, { scaleX }] },
                 style,
             ]}
             {...otherProps}

package/src/Tabs/TabIndicatorProps.ts

@@ -1,5 +1,4 @@
 import type { ViewProps } from 'react-native';
-import Animated from 'react-native-reanimated';
 import type { OverridableComponentProps } from '../types';
 import type TabCoordinate from './TabCoordinate';
 
@@ -15,12 +14,12 @@ export default interface TabIndicatorProps extends OverridableComponentProps<Vie
     disabled: boolean;
 
     /**
-     * If `true`, the tab will be able to scroll.
+     * Initial index.
      */
-    scrollable: boolean;
+    initialIndex: number;
 
     /**
-     * Scrollable value for using animated interpolation.
+     * If `true`, the tab will be able to scroll.
      */
-    scrollValue: Animated.SharedValue<number>;
+    scrollable: boolean;
 }> {}

package/src/Tabs/Tabs.tsx

@@ -1,13 +1,18 @@
-import React from 'react';
-import { GestureResponderEvent, LayoutChangeEvent, ScrollView, View } from 'react-native';
-import Animated, { Easing } from 'react-native-reanimated';
+import React, { cloneElement, forwardRef, useEffect, useImperativeHandle } from 'react';
+import type { GestureResponderEvent, LayoutChangeEvent } from 'react-native';
+import { View } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import { isEveryDefined } from '@fountain-ui/utils';
 import { css, useTheme } from '../styles';
-import { useWidth } from '../internal/hooks';
+import { useSyncAnimatedValue } from '../hooks';
 import type TabsProps from './TabsProps';
-import TabCoordinate, { defaultCoordinate } from './TabCoordinate';
+import type { TabsInstance } from './types';
 import TabIndicator from './TabIndicator';
+import ScrollableTabsView from './ScrollableTabsView';
+import IndexAwareTab from './IndexAwareTab';
+import useTabCoordinates from './useTabCoordinates';
+import useIndexStore from './useIndexStore';
+import InternalContext from './InternalContext';
+import { isEveryTabCoordinatesDefined } from './utils';
 
 type TabsStyleKeys =
     | 'root'
@@ -34,73 +39,55 @@ const useStyles: UseStyles<TabsStyles> = function (): TabsStyles {
     };
 };
 
-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] = useWidth();
-
-    const scrollViewRef = React.useRef<ScrollView | null>(null);
+    const fallbackSharedIndex = useSyncAnimatedValue({ initialValue: initialIndex });
 
-    const tabCount = React.Children.count(children);
-    const [coordinates, setCoordinates] = React.useState<TabCoordinate[]>(() => new Array(tabCount));
+    const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;
 
-    const internalScrollValue = Animated.useSharedValue(0);
-    const scrollValue = scrollValueProp || internalScrollValue;
+    const setTab = (newIndex: number) => {
+        sharedIndex.animatedValue.setValue(newIndex);
+    };
 
-    const isReadyToRenderIndicator = isEveryDefined(coordinates);
+    useImperativeHandle(
+        ref,
+        () => ({
+            setTab,
+        }),
+        [sharedIndex],
+    );
 
-    React.useEffect(() => {
-        const animateTab = (index: number) => {
-            internalScrollValue.value = Animated.withTiming(index, {
-                duration: 200,
-                easing: Easing.out(Easing.exp),
-            });
-        };
+    const styles = useStyles();
 
-        if (scrollValueProp === undefined) {
-            animateTab(indexProp);
-        }
-    }, [indexProp, scrollValueProp, internalScrollValue]);
+    const [coordinates, updateCoordinate] = useTabCoordinates(children);
 
-    React.useEffect(() => {
-        const snapTab = (index: number) => {
-            const scrollView = scrollViewRef.current;
-            const coordinate: TabCoordinate = coordinates[index - 1] || defaultCoordinate;
+    const canRenderIndicator = isEveryTabCoordinatesDefined(coordinates, children);
 
-            if (scrollView) {
-                const tabWidth = coordinate.x2 - coordinate.x1;
-                const x = coordinate.x1 + tabWidth / 2;
+    const indexStore = useIndexStore(sharedIndex);
 
-                scrollView.scrollTo({ x, y: 0, animated: true });
-            }
-        };
-
-        snapTab(indexProp);
-    }, [indexProp, containerWidth, coordinates]);
+    useEffect(() => {
+        return indexStore.subscribe(newIndex => {
+            onChange?.(newIndex);
+        });
+    }, [indexStore, onChange]);
 
     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) => {
@@ -110,70 +97,75 @@ export default function Tabs(props: TabsProps) {
         };
 
         const onPress = () => {
-            onChange?.(index);
+            setTab(index);
+
             // @ts-ignore
             child.props.onPress?.();
         };
 
-        const selected = index === indexProp;
-        const enableIndicatorPlaceholder = disableIndicator
-            ? false
-            : (isReadyToRenderIndicator ? false : selected);
-
-        //@ts-ignore
-        return React.cloneElement(child, {
-            enableIndicator: enableIndicatorPlaceholder,
+        // @ts-ignore
+        const tabElement = cloneElement(child, {
+            enableIndicator: !disableIndicator && !canRenderIndicator,
             onLayout,
             onPress,
             onMouseDown,
             variant,
-            selected,
             style: scrollable ? undefined : styles.fixedTab,
         });
+
+        return (
+            <IndexAwareTab
+                children={tabElement}
+                index={index}
+                initialIndex={initialIndex}
+            />
+        );
     });
 
-    const indicator = (
+    const tabIndicator = canRenderIndicator ? (
         <TabIndicator
             coordinates={coordinates}
             disabled={disableIndicator}
+            initialIndex={sharedIndex.initialValue}
             scrollable={scrollable}
-            scrollValue={scrollValue}
         />
-    );
+    ) : null;
 
     return (
-        <View
-            onLayout={handleLayout}
-            style={css([
-                styles.root,
-                scrollable ? undefined : styles.fixedRoot,
-                style,
-            ])}
-            {...otherProps}
-        >
-            {scrollable ? (
-                <ScrollView
-                    automaticallyAdjustContentInsets={false}
-                    bounces={false}
-                    contentContainerStyle={styles.scrollableContainer}
-                    directionalLockEnabled={true}
-                    horizontal={true}
-                    ref={scrollViewRef}
-                    scrollsToTop={false}
-                    showsHorizontalScrollIndicator={false}
-                    showsVerticalScrollIndicator={false}
-                    keyboardDismissMode={keyboardDismissMode}
-                    keyboardShouldPersistTaps={keyboardShouldPersistTaps}
-                >
-                    {tabElements}
-                    {indicator}
-                </ScrollView>
-            ) : (
-                <>
-                    {tabElements}
-                    {indicator}
-                </>
-            )}
-        </View>
+        <InternalContext.Provider value={{ indexStore }}>
+            <View
+                style={css([
+                    styles.root,
+                    scrollable ? undefined : styles.fixedRoot,
+                    style,
+                ])}
+            >
+                {scrollable ? (
+                    <ScrollableTabsView
+                        automaticallyAdjustContentInsets={false}
+                        bounces={false}
+                        contentContainerStyle={styles.scrollableContainer}
+                        coordinates={coordinates}
+                        directionalLockEnabled={true}
+                        horizontal={true}
+                        scrollsToTop={false}
+                        showsHorizontalScrollIndicator={false}
+                        showsVerticalScrollIndicator={false}
+                        keyboardDismissMode={keyboardDismissMode}
+                        keyboardShouldPersistTaps={keyboardShouldPersistTaps}
+                    >
+                        {tabElements}
+                        {tabIndicator}
+                    </ScrollableTabsView>
+                ) : (
+                    <React.Fragment>
+                        {tabElements}
+                        {tabIndicator}
+                    </React.Fragment>
+                )}
+            </View>
+        </InternalContext.Provider>
     );
-};
+});
+
+export default Tabs;

package/src/Tabs/TabsProps.ts

@@ -1,30 +1,16 @@
-import React from 'react';
-import type { ViewProps } from 'react-native';
-import Animated from 'react-native-reanimated';
+import type { ReactNode, Ref } from 'react';
+import type { Animated, ViewProps } from 'react-native';
 import type { TabVariant } from '../Tab';
-import type { OverridableComponentProps } from '../types';
-
-export type KeyboardDismissMode =
-    'none'
-    | 'on-drag'
-    | 'interactive'; // ios only
-
-export type KeyboardShouldPersistTaps =
-    'never'
-    | boolean
-    | 'always'
-    | 'handled'; // app only
+import type { OverridableComponentProps, SyncAnimatedValue } from '../types';
+import type { KeyboardDismissMode, KeyboardShouldPersistTaps, TabsInstance } from './types';
 
 export default interface TabsProps extends OverridableComponentProps<ViewProps, {
-    /**
-     * Collection of Tab components.
-     */
-    children: React.ReactNode;
+    ref?: Ref<TabsInstance>;
 
     /**
-     * Selected index.
+     * Collection of Tab components.
      */
-    index: number;
+    children: ReactNode;
 
     /**
      * If `true`, the indicator is disabled.
@@ -32,6 +18,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 +48,9 @@ export default interface TabsProps extends OverridableComponentProps<ViewProps,
     scrollable?: boolean;
 
     /**
-     * Scrollable value for using animated interpolation.
+     * Unstable API.
      */
-    scrollValue?: Animated.SharedValue<number>;
+    UNSTABLE_sharedIndex?: SyncAnimatedValue;
 
     /**
      * The variant to use.

package/src/Tabs/index.ts

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

package/src/Tabs/types.ts

@@ -0,0 +1,18 @@
+export type KeyboardDismissMode =
+    'none'
+    | 'on-drag'
+    | 'interactive'; // ios only
+
+export type KeyboardShouldPersistTaps =
+    'never'
+    | boolean
+    | 'always'
+    | 'handled'; // app only
+
+export interface TabsInstance {
+    /**
+     * Function to scroll to a specific tab. Invalid index is ignored.
+     * @param index
+     */
+    setTab: (index: number) => void;
+}

package/src/Tabs/useIndexStore.ts

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from 'react';
+import type { MonoStore } from '../store';
+import { SimpleStore } from '../store';
+import type { SyncAnimatedValue } from '../types';
+
+export default function useIndexStore(value: SyncAnimatedValue): MonoStore<number> {
+    const {
+        animatedValue,
+        initialValue,
+    } = value;
+
+    const store = useRef(new SimpleStore(initialValue)).current;
+
+    useEffect(() => {
+        const id = animatedValue.addListener((newIndex) => {
+            store.dispatch(newIndex.value);
+        });
+
+        return () => {
+            animatedValue.removeListener(id);
+        };
+    }, [animatedValue]);
+
+    useEffect(() => {
+        return () => {
+            store.removeAllListeners();
+        };
+    }, [store]);
+
+    return store;
+};

package/src/Tabs/useScrollViewReaction.ts

@@ -0,0 +1,52 @@
+import type { MutableRefObject } from 'react';
+import { useCallback, useContext, useEffect, useRef } from 'react';
+import type { ScrollView, ViewProps } from 'react-native';
+import type TabCoordinate from './TabCoordinate';
+import InternalContext from './InternalContext';
+
+export interface UseScrollViewReaction {
+    scrollViewRef: MutableRefObject<ScrollView | null>;
+    onLayout: ViewProps['onLayout'];
+}
+
+export default function useScrollViewReaction(
+    coordinates: TabCoordinate[],
+): UseScrollViewReaction {
+    const scrollViewRef = useRef<ScrollView | null>(null);
+
+    const lastScrolledXRef = useRef<number>(NaN);
+
+    const { indexStore } = useContext(InternalContext);
+
+    const scrollToX = (x: number) => {
+        if (Number.isFinite(x)) {
+            scrollViewRef.current?.scrollTo({ x, y: 0, animated: true });
+
+            lastScrolledXRef.current = x;
+        }
+    };
+
+    const onLayout = useCallback(() => {
+        scrollToX(lastScrolledXRef.current);
+    }, []);
+
+    useEffect(() => {
+        const computeNextScrollX = (index: number) => {
+            const prevIndex = index - 1;
+            const prevCoordinate = coordinates[prevIndex];
+
+            if (prevCoordinate) {
+                const prevTabWidth = prevCoordinate.x2 - prevCoordinate.x1;
+                return Math.floor(prevCoordinate.x1 + prevTabWidth / 2);
+            }
+
+            return 0;
+        };
+
+        return indexStore.subscribe(currentIndex => {
+            scrollToX(computeNextScrollX(currentIndex));
+        });
+    }, [indexStore, coordinates]);
+
+    return { scrollViewRef, onLayout };
+};

package/src/Tabs/useTabCoordinates.ts

@@ -0,0 +1,25 @@
+import React, { useRef, useState } from 'react';
+import TabCoordinate from './TabCoordinate';
+import { isEveryTabCoordinatesDefined } from './utils';
+
+export interface UpdateCoordinate {
+    (index: number, x: number, width: number): void;
+}
+
+export default function useTabCoordinates(tabElements: React.ReactNode): [TabCoordinate[], UpdateCoordinate] {
+    const [coordinates, setCoordinates] = useState<TabCoordinate[]>([]);
+
+    const cacheRef = useRef<TabCoordinate[]>([]);
+
+    const updateCoordinate: UpdateCoordinate = (index, x, width) => {
+        cacheRef.current[index] = { x1: x, x2: x + width };
+
+        if (isEveryTabCoordinatesDefined(cacheRef.current, tabElements)) {
+            setCoordinates([...cacheRef.current]);
+
+            cacheRef.current = [];
+        }
+    };
+
+    return [coordinates, updateCoordinate];
+}

package/src/Tabs/utils.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import { Children } from 'react';
+import { isEveryDefined } from '@fountain-ui/utils';
+import type TabCoordinate from './TabCoordinate';
+
+
+export function isEveryTabCoordinatesDefined(coordinates: TabCoordinate[], tabElements: ReactNode): boolean {
+    const numberOfTabs = Children.count(tabElements);
+    const numberOfCoordinates = coordinates.length;
+
+    const everyCoordinatesDefined = isEveryDefined(coordinates);
+
+    return numberOfTabs === numberOfCoordinates && everyCoordinatesDefined;
+}

package/src/TextField/InputLabel.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Animated, LayoutChangeEvent, StyleSheet } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { useTheme } from '../styles';
+import usePaperStyles from '../Paper/usePaperStyles';
 import { inputPaddingHorizontal } from './utils';
 
 interface LabelProps {
@@ -30,8 +31,6 @@ interface LabelProps {
 type InputLabelStyles = NamedStylesStringUnion<'background' | 'backgroundText' | 'placeholder'>;
 
 const useStyles: UseStyles<InputLabelStyles> = function (): InputLabelStyles {
-    const theme = useTheme();
-
     return {
         background: {
             position: 'absolute',
@@ -40,15 +39,13 @@ const useStyles: UseStyles<InputLabelStyles> = function (): InputLabelStyles {
             bottom: 0,
             right: 0,
             width: 8,
-            height: 2,
-            backgroundColor: theme.palette.background.default,
+            height: 4,
         },
         backgroundText: {
             position: 'absolute',
             left: 18,
             paddingHorizontal: 0,
             color: 'transparent',
-            backgroundColor: theme.palette.background.default,
         },
         placeholder: {
             position: 'absolute',
@@ -81,8 +78,16 @@ const InputLabel = (props: LabelProps) => {
         value,
     } = props;
 
+    const theme = useTheme();
+
     const styles = useStyles();
 
+    const paperStyles = usePaperStyles();
+
+    const backgroundStyle = {
+        backgroundColor: paperStyles?.backgroundColor ?? theme.palette.background.default,
+    };
+
     const hasFocus = hasActiveOutline || value;
     const opacity = animatedLabel.interpolate({
         inputRange: [0, 1],
@@ -141,6 +146,7 @@ const InputLabel = (props: LabelProps) => {
                     pointerEvents={'none'}
                     style={[
                         styles.background,
+                        backgroundStyle,
                         {
                             opacity,
                             transform: [
@@ -159,6 +165,7 @@ const InputLabel = (props: LabelProps) => {
                     style={[
                         styles.placeholder,
                         styles.backgroundText,
+                        backgroundStyle,
                         labelStyle,
                         {
                             top: topPosition + 1,