@fountain-ui/core 2.0.0-beta.98 → 3.0.0-alpha.10

package/src/Tabs/LegacyTabs.tsx

@@ -1,227 +0,0 @@
-import React, { cloneElement, forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import type { GestureResponderEvent, LayoutChangeEvent } from 'react-native';
-import { View } from 'react-native';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import { css, useTheme } from '../styles';
-import { useSyncAnimatedValue } from '../hooks';
-import type TabsProps from './LegacyTabsProps';
-import type { TabsInstance } from './types';
-import TabIndicator from './LegacyTabIndicator';
-import ScrollableTabsView from './ScrollableTabsView';
-import IndexAwareTab from './IndexAwareTab';
-import useTabCoordinates from './useTabCoordinates';
-import useTabInnerContentsWidth from './useTabInnerContentsWidth';
-import useIndexStore from './useIndexStore';
-import InternalContext from './InternalContext';
-import { isEveryTabCoordinatesDefined } from './utils';
-
-type TabsStyleKeys =
-    | 'root'
-    | 'fixedRoot'
-    | 'fixedTab'
-    | 'scrollableContainer';
-
-type TabsStyles = NamedStylesStringUnion<TabsStyleKeys>;
-
-const useStyles: UseStyles<TabsStyles> = function (): TabsStyles {
-    const theme = useTheme();
-
-    return {
-        root: {},
-        fixedRoot: {
-            flexDirection: 'row',
-        },
-        fixedTab: {
-            flex: 1,
-        },
-        scrollableContainer: {
-            paddingHorizontal: theme.spacing(1),
-        },
-    };
-};
-
-const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
-    const {
-        children,
-        indicatorColor = 'primary',
-        initialIndex = 0,
-        disableIndicator = false,
-        indicatorAnimationDisabled = false,
-        indicatorSize = 'full',
-        keyboardDismissMode = 'none',
-        keyboardShouldPersistTaps = 'never',
-        onChange,
-        scrollable = false,
-        scrollViewContentContainerStyle,
-        style,
-        variant = 'primary',
-        UNSTABLE_sharedIndex,
-        onTabSelected,
-    } = props;
-
-    const fallbackSharedIndex = useSyncAnimatedValue({ initialValue: initialIndex });
-    const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;
-    const realInitialIndex = sharedIndex.initialValue;
-
-    const currentIndexRef = useRef(initialIndex);
-
-    const setTab = (newIndex: number) => {
-        const currentIndex = currentIndexRef.current;
-        onTabSelected?.(newIndex, currentIndex);
-
-        sharedIndex.animatedValue.setValue(newIndex);
-    };
-
-    useImperativeHandle(
-        ref,
-        () => ({
-            setTab,
-        }),
-        [sharedIndex],
-    );
-
-    const styles = useStyles();
-
-    const [outerCoordinates, updateCoordinate] = useTabCoordinates(children);
-    const [innerContentsWidthList, updateInnerContentsWidth] = useTabInnerContentsWidth(children);
-
-    const canRenderIndicator = indicatorSize === 'fit-content'
-        ? isEveryTabCoordinatesDefined(innerContentsWidthList, children)
-        : isEveryTabCoordinatesDefined(outerCoordinates, children);
-
-    const indexStore = useIndexStore(sharedIndex);
-
-    const coordinates = useMemo(() => {
-        if (indicatorSize !== 'fit-content') {
-            return outerCoordinates;
-        }
-
-        return innerContentsWidthList.map((innerContentWidth, idx) => {
-            const { x1: outerX1, x2: outerX2 } = outerCoordinates[idx];
-
-            const tabWidth = outerX2 - outerX1;
-            const distanceFromParent = (tabWidth - innerContentWidth) / 2;
-            const indicatorStartCoordinate = outerX1 + distanceFromParent;
-
-            return {
-                x1: indicatorStartCoordinate,
-                x2: indicatorStartCoordinate + innerContentWidth,
-            };
-        });
-    }, [outerCoordinates, innerContentsWidthList, variant]);
-
-    useEffect(() => {
-        return indexStore.subscribe(newIndex => {
-            onChange?.(newIndex);
-            currentIndexRef.current = newIndex;
-        });
-    }, [indexStore, onChange]);
-
-    const tabElements = React.Children.map(children, (child, index) => {
-        if (!child) {
-            return null;
-        }
-
-        const onTabInnerLayout = (event: LayoutChangeEvent) => {
-            const { width } = event.nativeEvent.layout;
-
-            updateInnerContentsWidth(index, width);
-        };
-
-        const onLayout = (event: LayoutChangeEvent) => {
-            const { x, width } = event.nativeEvent.layout;
-
-            updateCoordinate(index, x, width);
-
-            // @ts-ignore
-            child.props.onLayout?.(event);
-        };
-
-        const onMouseDown = (e: GestureResponderEvent) => {
-            if (keyboardShouldPersistTaps === 'always') {
-                e.preventDefault();
-            }
-        };
-
-        const onPress = () => {
-            setTab(index);
-
-            // @ts-ignore
-            child.props.onPress?.();
-        };
-
-        // @ts-ignore
-        const tabElement = cloneElement(child, {
-            enableIndicator: !disableIndicator && !canRenderIndicator,
-            indicatorColor,
-            onTabInnerLayout,
-            onLayout,
-            onPress,
-            onMouseDown,
-            variant,
-            indicatorSize,
-            style: scrollable ? undefined : styles.fixedTab,
-        });
-
-        return (
-            <IndexAwareTab
-                children={tabElement}
-                index={index}
-                initialIndex={realInitialIndex}
-            />
-        );
-    })?.filter(Boolean);
-
-    const tabIndicator = canRenderIndicator ? (
-        <TabIndicator
-            animationDisabled={indicatorAnimationDisabled}
-            color={indicatorColor}
-            coordinates={coordinates}
-            disabled={disableIndicator}
-            initialIndex={realInitialIndex}
-            scrollable={scrollable}
-        />
-    ) : null;
-
-    return (
-        <InternalContext.Provider value={{ indexStore }}>
-            <View
-                style={css([
-                    styles.root,
-                    scrollable ? undefined : styles.fixedRoot,
-                    style,
-                ])}
-            >
-                {scrollable ? (
-                    <ScrollableTabsView
-                        automaticallyAdjustContentInsets={false}
-                        bounces={false}
-                        contentContainerStyle={css([
-                            styles.scrollableContainer,
-                            scrollViewContentContainerStyle,
-                        ])}
-                        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/LegacyTabsProps.ts

@@ -1,93 +0,0 @@
-import type { ReactNode, Ref } from 'react';
-import type { ViewProps } from 'react-native';
-import type { TabVariant, TabIndicatorSize } from '../Tab';
-import type { ExtendedStyle, OverridableComponentProps, SyncAnimatedValue } from '../types';
-import type { TabIndicatorColor } from './LegacyTabIndicatorProps';
-import type { KeyboardDismissMode, KeyboardShouldPersistTaps, TabsInstance } from './types';
-
-export default interface TabsProps extends OverridableComponentProps<ViewProps, {
-    ref?: Ref<TabsInstance>;
-
-    /**
-     * Collection of Tab components.
-     */
-    children: ReactNode;
-
-    /**
-     * If `true`, the indicator is disabled.
-     * @default false
-     */
-    disableIndicator?: boolean;
-
-    /**
-     * The color of tab indicator
-     * @default 'primary'
-     */
-    indicatorColor?: TabIndicatorColor;
-
-    /**
-     * The size of tab indicator.
-     * 'full' adjusts the indicator to the size of the Tab,
-     * while 'fit-content' adjusts the indicator to the size of the content inside the Tab.
-     * @default 'full'
-     */
-    indicatorSize?: TabIndicatorSize;
-
-    /**
-     * If `true`, tab indicator selection animation disabled.
-     * @default 'false'
-     */
-    indicatorAnimationDisabled?: boolean;
-
-    /**
-     * Index of initial tab that should be selected.
-     * @default 0
-     */
-    initialIndex?: number;
-
-    /**
-     * keyboard dismissing condition of dragging.
-     * @default 'none'
-     */
-    keyboardDismissMode?: KeyboardDismissMode,
-
-    /**
-     * keyboard persisting condition of tapping.
-     * @default 'never'
-     */
-    keyboardShouldPersistTaps?: KeyboardShouldPersistTaps,
-
-    /**
-     * Callback fired when a tab is selected.
-     */
-    onChange?: (newIndex: number) => void;
-
-    /**
-     * If `true`, the component will be able to scroll.
-     * @default false
-     */
-    scrollable?: boolean;
-
-    /**
-     * These styles will be applied to the scroll view content container which wraps all of the child views.
-     */
-    scrollViewContentContainerStyle?: ExtendedStyle | ExtendedStyle[];
-
-    /**
-     * Unstable API.
-     */
-    UNSTABLE_sharedIndex?: SyncAnimatedValue;
-
-    /**
-     * The variant to use.
-     * @default 'primary'
-     */
-    variant?: TabVariant;
-
-    /**
-     * Callback function executed when a Tab is selected.
-     * Executed even if the index does not change when a Tab is pressed.
-     * Receives the next tab index and the current tab index as parameters.
-     */
-    onTabSelected?: (newIndex: number, currentIndex: number) => void;
-}> {}

package/src/TextField/InputLabel.tsx

@@ -1,234 +0,0 @@
-import React from 'react';
-import { Animated, LayoutChangeEvent, StyleSheet } from 'react-native';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import { createFontStyle, useTheme } from '../styles';
-import usePaperStyles from '../Paper/usePaperStyles';
-import { inputPaddingHorizontal } from './utils';
-
-interface LabelProps {
-    activeColor: string;
-    animatedError: Animated.Value;
-    animatedLabel: Animated.Value;
-    error?: boolean;
-    errorColor?: string;
-    focused?: boolean;
-    fontSize?: number;
-    hasActiveOutline?: boolean;
-    label?: string;
-    labelLayout: { measured: boolean; width: number; height: number };
-    labelScale: number;
-    labelTranslateX: number;
-    labelTranslateY: number;
-    onLayoutAnimatedText: (event: LayoutChangeEvent) => void;
-    paddingOffset?: { paddingLeft: number; paddingRight: number };
-    placeholder?: string;
-    placeholderColor?: string;
-    placeholderOpacity: number | Animated.AnimatedInterpolation;
-    topPosition: number;
-    value?: string;
-}
-
-type InputLabelStyles = NamedStylesStringUnion<'background' | 'backgroundText' | 'placeholder'>;
-
-const useStyles: UseStyles<InputLabelStyles> = function (): InputLabelStyles {
-    return {
-        background: {
-            position: 'absolute',
-            top: 6,
-            left: 10,
-            bottom: 0,
-            right: 0,
-            width: 8,
-            height: 4,
-        },
-        backgroundText: {
-            position: 'absolute',
-            left: 18,
-            paddingHorizontal: 0,
-            color: 'transparent',
-        },
-        placeholder: {
-            position: 'absolute',
-            left: 0,
-            paddingHorizontal: inputPaddingHorizontal,
-        },
-    };
-};
-
-const InputLabel = (props: LabelProps) => {
-    const {
-        activeColor,
-        animatedError,
-        animatedLabel,
-        error = false,
-        errorColor,
-        focused,
-        fontSize,
-        hasActiveOutline,
-        label,
-        labelLayout,
-        labelScale,
-        labelTranslateX,
-        labelTranslateY,
-        onLayoutAnimatedText,
-        paddingOffset,
-        placeholderColor,
-        placeholderOpacity,
-        topPosition,
-        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],
-        outputRange: [hasFocus ? 1 : 0, 0],
-    });
-
-    const labelTranslationX = {
-        transform: [
-            {
-                translateX: animatedLabel.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [labelTranslateX, 0 || 0],
-                }),
-            },
-        ],
-    };
-
-    const labelTextFontStyle = createFontStyle(theme, { selector: (typo) => typo.caption2 });
-
-    const labelStyle = {
-        fontSize,
-        transform: [
-            {
-                translateX: animatedError.interpolate({
-                    inputRange: [0, 0.5, 1],
-                    outputRange: [0, value && error ? 4 : 0, 0],
-                }),
-            },
-            {
-                translateY: animatedLabel.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [labelTranslateY, 0],
-                }),
-            },
-            {
-                scale: animatedLabel.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [labelScale, 1],
-                }),
-            },
-        ],
-    };
-
-    return (label ? (
-        <Animated.View
-            pointerEvents={'none'}
-            style={[
-                StyleSheet.absoluteFill,
-                {
-                    opacity: value || focused ? (labelLayout.measured ? 1 : 0) : 1,
-                },
-                labelTranslationX,
-            ]}
-        >
-            {[
-                <Animated.View
-                    key={'labelBackground-view'}
-                    pointerEvents={'none'}
-                    style={[
-                        styles.background,
-                        backgroundStyle,
-                        {
-                            opacity,
-                            transform: [
-                                {
-                                    translateX: animatedLabel.interpolate({
-                                        inputRange: [0, 1],
-                                        outputRange: [-labelTranslateX, 0],
-                                    }),
-                                },
-                            ],
-                        },
-                    ]}
-                />,
-                <Animated.Text
-                    key={'labelBackground-text'}
-                    style={[
-                        labelTextFontStyle,
-                        styles.placeholder,
-                        styles.backgroundText,
-                        backgroundStyle,
-                        labelStyle,
-                        {
-                            top: topPosition + 1,
-                            opacity,
-                            transform: [
-                                ...labelStyle.transform,
-                                {
-                                    scaleY: animatedLabel.interpolate({
-                                        inputRange: [0, 1],
-                                        outputRange: [0.2, 1],
-                                    }),
-                                },
-                            ],
-                        },
-                    ]}
-                    numberOfLines={1}
-                >
-                    {label}
-                </Animated.Text>,
-            ]}
-            <Animated.Text
-                onLayout={onLayoutAnimatedText}
-                style={[
-                    styles.placeholder,
-                    labelTextFontStyle,
-                    labelStyle,
-                    paddingOffset,
-                    {
-                        textAlign: 'left',
-                        top: topPosition,
-                        color: error && errorColor ? errorColor : activeColor,
-                        opacity: animatedLabel.interpolate({
-                            inputRange: [0, 1],
-                            outputRange: [hasActiveOutline ? 1 : 0, 0],
-                        }),
-                    },
-                ]}
-                numberOfLines={1}
-            >
-                {label}
-            </Animated.Text>
-            <Animated.Text
-                style={[
-                    styles.placeholder,
-                    labelTextFontStyle,
-                    labelStyle,
-                    paddingOffset,
-                    {
-                        textAlign: 'left',
-                        top: topPosition,
-                        color: error && errorColor ? errorColor : placeholderColor,
-                        opacity: placeholderOpacity,
-                    },
-                ]}
-                numberOfLines={1}
-            >
-                {label}
-            </Animated.Text>
-        </Animated.View>
-    ) : null);
-};
-
-export default InputLabel;