@fountain-ui/core 2.0.0-beta.7 → 2.0.0-beta.71

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,59 @@ 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,
+        indicatorColor = 'primary',
+        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 tabCount = React.Children.count(children);
-    const [coordinates, setCoordinates] = React.useState<TabCoordinate[]>(() => new Array(tabCount));
-
-    const internalScrollValue = Animated.useSharedValue(0);
-    const scrollValue = scrollValueProp || internalScrollValue;
+    const fallbackSharedIndex = useSyncAnimatedValue({ initialValue: initialIndex });
+    const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;
+    const realInitialIndex = sharedIndex.initialValue;
 
-    const isReadyToRenderIndicator = isEveryDefined(coordinates);
+    const setTab = (newIndex: number) => {
+        sharedIndex.animatedValue.setValue(newIndex);
+    };
 
-    React.useEffect(() => {
-        const animateTab = (index: number) => {
-            internalScrollValue.value = Animated.withTiming(index, {
-                duration: 200,
-                easing: Easing.out(Easing.exp),
-            });
-        };
+    useImperativeHandle(
+        ref,
+        () => ({
+            setTab,
+        }),
+        [sharedIndex],
+    );
 
-        if (scrollValueProp === undefined) {
-            animateTab(indexProp);
-        }
-    }, [indexProp, scrollValueProp, internalScrollValue]);
+    const styles = useStyles();
 
-    React.useEffect(() => {
-        const snapTab = (index: number) => {
-            const scrollView = scrollViewRef.current;
-            const coordinate: TabCoordinate = coordinates[index - 1] || defaultCoordinate;
+    const [coordinates, updateCoordinate] = useTabCoordinates(children);
 
-            if (scrollView) {
-                const tabWidth = coordinate.x2 - coordinate.x1;
-                const x = coordinate.x1 + tabWidth / 2;
+    const canRenderIndicator = isEveryTabCoordinatesDefined(coordinates, children);
 
-                scrollView.scrollTo({ x, y: 0, animated: true });
-            }
-        };
+    const indexStore = useIndexStore(sharedIndex);
 
-        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);
+
+            // @ts-ignore
+            child.props.onLayout?.(event);
         };
 
         const onMouseDown = (e: GestureResponderEvent) => {
@@ -110,70 +101,78 @@ 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,
+            indicatorColor,
             onLayout,
             onPress,
             onMouseDown,
             variant,
-            selected,
             style: scrollable ? undefined : styles.fixedTab,
         });
+
+        return (
+            <IndexAwareTab
+                children={tabElement}
+                index={index}
+                initialIndex={realInitialIndex}
+            />
+        );
     });
 
-    const indicator = (
+    const tabIndicator = canRenderIndicator ? (
         <TabIndicator
+            color={indicatorColor}
             coordinates={coordinates}
             disabled={disableIndicator}
+            initialIndex={realInitialIndex}
             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}
+                        initialIndex={realInitialIndex}
+                        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,17 @@
-import React from 'react';
+import type { ReactNode, Ref } from 'react';
 import type { ViewProps } from 'react-native';
-import Animated from 'react-native-reanimated';
+import type { TabIndicatorColor } from './TabIndicatorProps';
 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 +19,18 @@ export default interface TabsProps extends OverridableComponentProps<ViewProps,
      */
     disableIndicator?: boolean;
 
+    /**
+     * The color of tab indicator
+     * @default 'primary'
+     */
+    indicatorColor?: TabIndicatorColor;
+
+    /**
+     * Index of initial tab that should be selected.
+     * @default 0
+     */
+    initialIndex?: number;
+
     /**
      * keyboard dismissing condition of dragging.
      * @default 'none'
@@ -56,9 +55,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,62 @@
+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(
+    initialIndex: number,
+    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);
+    }, []);
+
+    const computeNextScrollX = useCallback((index: number): 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;
+    }, [coordinates]);
+
+    useEffect(() => {
+        if (Number.isNaN(lastScrolledXRef.current)) {
+            const x = computeNextScrollX(initialIndex);
+            if (x > 0) {
+                scrollToX(x);
+            }
+        }
+    }, [initialIndex, computeNextScrollX]);
+
+    useEffect(() => {
+        return indexStore.subscribe(currentIndex => {
+            scrollToX(computeNextScrollX(currentIndex));
+        });
+    }, [indexStore, computeNextScrollX]);
+
+    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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Animated, LayoutChangeEvent, StyleSheet } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import { useTheme } from '../styles';
+import { createFontStyle, useTheme } from '../styles';
 import usePaperStyles from '../Paper/usePaperStyles';
 import { inputPaddingHorizontal } from './utils';
 
@@ -105,6 +105,8 @@ const InputLabel = (props: LabelProps) => {
         ],
     };
 
+    const labelTextFontStyle = createFontStyle(theme, { selector: (typo) => typo.caption2 });
+
     const labelStyle = {
         fontSize,
         transform: [
@@ -163,6 +165,7 @@ const InputLabel = (props: LabelProps) => {
                 <Animated.Text
                     key={'labelBackground-text'}
                     style={[
+                        labelTextFontStyle,
                         styles.placeholder,
                         styles.backgroundText,
                         backgroundStyle,
@@ -190,6 +193,7 @@ const InputLabel = (props: LabelProps) => {
                 onLayout={onLayoutAnimatedText}
                 style={[
                     styles.placeholder,
+                    labelTextFontStyle,
                     labelStyle,
                     paddingOffset,
                     {
@@ -209,6 +213,7 @@ const InputLabel = (props: LabelProps) => {
             <Animated.Text
                 style={[
                     styles.placeholder,
+                    labelTextFontStyle,
                     labelStyle,
                     paddingOffset,
                     {

package/src/TextField/OutlinedTextField.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Animated, LayoutChangeEvent, Platform, TextInput, View } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import { css, useTheme } from '../styles';
+import { createFontStyle, css, useTheme } from '../styles';
 import IconButton from '../IconButton';
 import TextFieldProps from './TextFieldProps';
 import InputLabel from './InputLabel';
@@ -132,6 +132,11 @@ const OutlinedTextField = React.forwardRef<TextInput, OutlinedTextFieldProps>(fu
         topPosition,
     };
 
+    const inputTextFontStyle = createFontStyle(theme, {
+        selector: (typo) => typo.caption2,
+        color: inputTextColor,
+    });
+
     const outlineStyle = css([
         styles.outline,
         {
@@ -142,6 +147,7 @@ const OutlinedTextField = React.forwardRef<TextInput, OutlinedTextFieldProps>(fu
     ]);
 
     const textInputStyle = css([
+        inputTextFontStyle,
         styles.input,
         {
             fontSize,

package/src/TextField/TextField.tsx

@@ -1,9 +1,10 @@
 import React, { useImperativeHandle, useRef } from 'react';
 import { Animated, LayoutChangeEvent, NativeSyntheticEvent, TargetedEvent, TextInput } from 'react-native';
+import { css } from '../styles';
+import { useAnimatedValue } from '../hooks';
 import OutlinedTextField from './OutlinedTextField';
-import TextFieldProps from './TextFieldProps';
+import TextFieldProps, { setStyleProp } from './TextFieldProps';
 import { blurAnimationDuration, focusAnimationDuration } from './utils';
-import { css } from '../styles';
 
 const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField(props, ref) {
     const {
@@ -39,10 +40,15 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
         blur: () => {
             innerRef.current?.blur();
         },
+        setStyle: (style: setStyleProp) => {
+            innerRef.current?.setNativeProps({
+                style,
+            });
+        },
     }));
 
-    const [animatedLabel] = React.useState(() => new Animated.Value(value ? 0 : 1));
-    const [animatedError] = React.useState(() => new Animated.Value(error ? 1 : 0));
+    const animatedLabel = useAnimatedValue(value ? 0 : 1);
+    const animatedError = useAnimatedValue(error ? 1 : 0);
     const [focused, setFocused] = React.useState(false);
     const [placeholder, setPlaceholder] = React.useState('');
     const [labelLayout, setLabelLayout] = React.useState({

package/src/TextField/TextFieldProps.ts

@@ -4,6 +4,10 @@ import { ComponentProps } from '../types';
 
 type TextFieldKeyboardType = 'default' | 'numeric' | 'email-address';
 
+export interface setStyleProp {
+    fontFamily: string;
+}
+
 export default interface TextFieldProps extends ComponentProps<{
     /**
      * If true, user won't be able to interact with the component.