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

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/LegacyTextField.tsx

@@ -1,168 +0,0 @@
-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, { setStyleProp } from './LegacyTextFieldProps';
-import { blurAnimationDuration, focusAnimationDuration } from './utils';
-
-const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField(props, ref) {
-    const {
-        disabled = false,
-        error = false,
-        keyboardType = 'default',
-        icon,
-        label,
-        onBlur,
-        onChangeText,
-        onFocus,
-        onIconPress,
-        onSubmitEditing,
-        placeholder: placeholderProp,
-        secureTextEntry = false,
-        value,
-        style: styleProp,
-    } = props;
-
-    const innerRef = useRef<TextInput | null>(null);
-    //@ts-ignore
-    useImperativeHandle(ref, () => ({
-        focus: () => {
-            innerRef.current?.focus();
-        },
-        isFocused: () => {
-            const current = innerRef.current;
-            return current ? current.isFocused() : false;
-        },
-        clear: () => {
-            innerRef.current?.clear();
-        },
-        blur: () => {
-            innerRef.current?.blur();
-        },
-        setStyle: (style: setStyleProp) => {
-            innerRef.current?.setNativeProps({
-                style,
-            });
-        },
-    }));
-
-    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({
-        measured: false,
-        width: 0,
-        height: 0,
-    });
-
-    const minimizeLabel = () => {
-        Animated.timing(animatedLabel, {
-            toValue: 0,
-            duration: blurAnimationDuration,
-            useNativeDriver: false,
-        }).start();
-    };
-
-    const restoreLabel = () => {
-        Animated.timing(animatedLabel, {
-            toValue: 1,
-            duration: focusAnimationDuration,
-            useNativeDriver: false,
-        }).start();
-    };
-
-    const showError = () => {
-        Animated.timing(animatedError, {
-            toValue: 1,
-            duration: focusAnimationDuration,
-            useNativeDriver: false,
-        }).start();
-    };
-
-    const hideError = () => {
-        Animated.timing(animatedError, {
-            toValue: 0,
-            duration: blurAnimationDuration,
-            useNativeDriver: false,
-        }).start();
-    };
-
-    const showPlaceholder = () => {
-        placeholderProp && setPlaceholder(placeholderProp);
-    };
-
-    const hidePlaceholder = () => setPlaceholder('');
-
-    React.useEffect(() => {
-        value || focused ? minimizeLabel() : restoreLabel();
-    }, [focused, value, labelLayout]);
-
-    React.useEffect(() => {
-        animatedError ? showError() : hideError();
-    }, [animatedError]);
-
-    React.useEffect(() => {
-        focused || !label ? showPlaceholder() : hidePlaceholder();
-    }, [focused, label]);
-
-    const handleFocus = (event: NativeSyntheticEvent<TargetedEvent>) => {
-        if (disabled) {
-            return;
-        }
-
-        setFocused(true);
-        onFocus?.(event);
-    };
-
-    const handleBlur = (event: NativeSyntheticEvent<TargetedEvent>) => {
-        setFocused(false);
-        onBlur?.(event);
-    };
-
-    const style = css([
-        { opacity: disabled ? 0.3 : 1 },
-        styleProp,
-    ]);
-
-    const handleLayoutAnimatedText = (event: LayoutChangeEvent) => {
-        setLabelLayout({
-            width: event.nativeEvent.layout.width,
-            height: event.nativeEvent.layout.height,
-            measured: true,
-        });
-    };
-
-    const forceFocus = () => {
-        innerRef.current?.focus();
-    };
-
-    return (
-        <OutlinedTextField
-            animatedError={animatedError}
-            animatedLabel={animatedLabel}
-            disabled={disabled}
-            error={error}
-            focused={focused}
-            forceFocus={forceFocus}
-            icon={icon}
-            keyboardType={keyboardType}
-            label={label}
-            labelLayout={labelLayout}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-            onChangeText={onChangeText}
-            onIconPress={onIconPress}
-            onLayoutAnimatedText={handleLayoutAnimatedText}
-            onSubmitEditing={onSubmitEditing}
-            placeholder={placeholder}
-            ref={innerRef}
-            secureTextEntry={secureTextEntry}
-            style={style}
-            value={value}
-        />
-    );
-});
-
-export default TextField;

package/src/TextField/LegacyTextFieldProps.ts

@@ -1,80 +0,0 @@
-import React from 'react';
-import { NativeSyntheticEvent, TargetedEvent } from 'react-native';
-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.
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * Whether to style the TextField with error style.
-     * @default false
-     */
-    error?: boolean,
-
-    /**
-     * It is an icon placed to the right of the TextField.
-     */
-    icon?: React.ReactElement;
-
-    /**
-     * User can specify the keyboard type.
-     * @default 'default'
-     */
-    keyboardType?: TextFieldKeyboardType;
-
-    /**
-     * The text to use for the floating label.
-     */
-    label?: string;
-
-    /**
-     * Callback that is called when the textField is blurred.
-     */
-    onBlur?: (event: NativeSyntheticEvent<TargetedEvent>) => void,
-
-    /**
-     * Callback that is called when the textField's text changes.
-     */
-    onChangeText?: (value: string) => void,
-
-    /**
-     * Callback that is called when the textField is focused.
-     */
-    onFocus?: (event: NativeSyntheticEvent<TargetedEvent>) => void,
-
-    /**
-     * Callback that is called when icon pressed.
-     */
-    onIconPress?: () => void;
-
-    /**
-     * Callback that is called when enter or submit key pressed.
-     */
-    onSubmitEditing?: () => void
-
-    /**
-     * Placeholder for textField.
-     */
-    placeholder?: string;
-
-    /**
-     * If true, the text input obscures the text entered so that sensitive text like passwords stay secure.
-     * @default false
-     */
-    secureTextEntry?: boolean;
-
-    /**
-     * Value of the textField.
-     */
-    value?: string;
-}> {}

package/src/TextField/OutlinedTextField.tsx

@@ -1,234 +0,0 @@
-import React from 'react';
-import { Animated, LayoutChangeEvent, Platform, TextInput, View } from 'react-native';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import { createFontStyle, css, useTheme } from '../styles';
-import IconButton from '../IconButton';
-import TextFieldProps from './LegacyTextFieldProps';
-import InputLabel from './InputLabel';
-import {
-    defaultHeight,
-    iconSize,
-    inputPaddingHorizontal,
-    labelFontSize,
-    labelPaddingTop,
-    labelYOffset,
-} from './utils';
-
-interface OutlinedTextFieldProps extends TextFieldProps {
-    animatedError: Animated.Value;
-    animatedLabel: Animated.Value;
-    focused: boolean;
-    forceFocus: () => void;
-    labelLayout: { measured: boolean; width: number; height: number };
-    onLayoutAnimatedText: (event: LayoutChangeEvent) => void;
-}
-
-type OutlinedTextFieldStyles = NamedStylesStringUnion<'outline' | 'input' | 'iconContainer'>;
-
-const useStyles: UseStyles<OutlinedTextFieldStyles> = function (): OutlinedTextFieldStyles {
-    const theme = useTheme();
-
-    return {
-        outline: {
-            position: 'absolute',
-            left: 0,
-            right: 0,
-            bottom: 0,
-            borderRadius: theme.shape.roundness,
-        },
-        input: {
-            flexGrow: 1,
-            paddingHorizontal: inputPaddingHorizontal,
-            textAlignVertical: 'center',
-            textAlign: 'left',
-            zIndex: theme.zIndex.textField,
-        },
-        iconContainer: {
-            position: 'absolute',
-            width: 24,
-            height: 24,
-            justifyContent: 'center',
-            alignItems: 'center',
-            right: 12,
-        },
-    };
-};
-
-const OutlinedTextField = React.forwardRef<TextInput, OutlinedTextFieldProps>(function OutlinedTextField(props, ref) {
-    const {
-        animatedError,
-        animatedLabel,
-        disabled,
-        error,
-        focused,
-        forceFocus,
-        icon,
-        keyboardType,
-        label,
-        labelLayout,
-        onBlur,
-        onChangeText,
-        onFocus,
-        onIconPress,
-        onLayoutAnimatedText,
-        onSubmitEditing,
-        placeholder,
-        secureTextEntry,
-        style,
-        value,
-    } = props;
-
-    const theme = useTheme();
-
-    const styles = useStyles();
-
-    const hasActiveOutline = focused || error;
-    const inputTextColor = disabled ? theme.palette.tertiary.main : theme.palette.primary.main;
-    const activeColor = error
-        ? theme.palette.warning.main
-        : disabled
-            ? theme.palette.tertiary.main
-            : theme.palette.accent.main;
-    const placeholderColor = disabled ? theme.palette.tertiary.main : theme.palette.text.hint;
-    const outlineColor = theme.palette.border.default;
-    const errorColor = disabled ? theme.palette.tertiary.main : theme.palette.warning.main;
-
-    const typography = theme.typography.body2;
-    const fontSize = typography.fontSize.unitless;
-
-    const labelScale = labelFontSize / fontSize;
-    const labelWidth = labelLayout.width;
-    const labelHeight = labelLayout.height;
-    const labelHalfWidth = labelWidth / 2;
-    const labelHalfHeight = labelHeight / 2;
-
-    const labelTranslateX = -1 * (labelHalfWidth - (labelScale * labelWidth) / 2 - (fontSize - labelFontSize) * labelScale);
-    const minInputHeight = defaultHeight - labelPaddingTop;
-    const inputHeight = labelHeight < minInputHeight ? minInputHeight : labelHeight;
-    const topPosition = Math.floor(((inputHeight > 0 ? inputHeight : 0) - labelHeight) / 2 + labelPaddingTop);
-    const iconTopPosition = (defaultHeight - (label ? 0 : labelPaddingTop) - iconSize - (label ? labelYOffset : 0)) / 2;
-    const labelTranslateY = -labelHalfHeight - (topPosition + labelYOffset);
-
-    const placeholderOpacity = hasActiveOutline
-        ? animatedLabel.interpolate({
-            inputRange: [0, 1],
-            outputRange: [hasActiveOutline ? 0 : 1, 1],
-        })
-        : labelLayout.measured ? 1 : 0;
-
-    const labelProps = {
-        activeColor,
-        error,
-        errorColor,
-        fontSize,
-        hasActiveOutline,
-        label,
-        labelScale,
-        labelTranslateX,
-        labelTranslateY,
-        onLayoutAnimatedText,
-        placeholderColor,
-        placeholderOpacity,
-        topPosition,
-    };
-
-    const inputTextFontStyle = createFontStyle(theme, {
-        selector: (typo) => typo.caption2,
-        color: inputTextColor,
-    });
-
-    const outlineStyle = css([
-        styles.outline,
-        {
-            borderWidth: hasActiveOutline ? 2 : 1,
-            borderColor: error ? errorColor : (hasActiveOutline ? activeColor : outlineColor),
-            top: label ? 6 : 0,
-        },
-    ]);
-
-    const textInputStyle = css([
-        inputTextFontStyle,
-        styles.input,
-        {
-            fontSize,
-            color: inputTextColor,
-            height: inputHeight,
-        },
-        icon && {
-            marginRight: iconSize + 20,
-            paddingRight: 0,
-        },
-        Platform.OS === 'web' && {
-            //@ts-ignore
-            outlineWidth: 0,
-        },
-    ]);
-
-    const containerStyle = css([
-        {
-            paddingTop: label ? labelPaddingTop : 0,
-            minHeight: label ? defaultHeight : defaultHeight + labelYOffset,
-        },
-    ]);
-
-    const iconContainerStyle = css([
-        styles.iconContainer,
-        { top: iconTopPosition },
-    ]);
-
-    const onIconButtonPress = () => {
-        forceFocus();
-        onIconPress?.();
-    };
-
-    return (
-        <View style={style}>
-            <View
-                pointerEvents={'none'}
-                style={outlineStyle}
-            />
-            <View style={containerStyle}>
-                {label ? (
-                    <InputLabel
-                        animatedLabel={animatedLabel}
-                        animatedError={animatedError}
-                        focused={focused}
-                        labelLayout={labelLayout}
-                        placeholder={placeholder}
-                        value={value}
-                        {...labelProps}
-                    />
-                ) : null}
-                <TextInput
-                    autoCapitalize={'none'}
-                    autoCorrect={false}
-                    disableFullscreenUI={true}
-                    ref={ref}
-                    onChangeText={onChangeText}
-                    placeholder={placeholder}
-                    placeholderTextColor={placeholderColor}
-                    editable={!disabled}
-                    selectionColor={activeColor}
-                    onFocus={onFocus}
-                    onBlur={onBlur}
-                    onSubmitEditing={onSubmitEditing}
-                    keyboardType={keyboardType}
-                    secureTextEntry={secureTextEntry}
-                    underlineColorAndroid={'transparent'}
-                    style={textInputStyle}
-                    value={value}
-                />
-            </View>
-            {icon ? (
-                <View style={iconContainerStyle}>
-                    <IconButton
-                        children={icon}
-                        onPress={onIconButtonPress}
-                    />
-                </View>
-            ) : null}
-        </View>
-    );
-});
-
-export default OutlinedTextField;