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

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;

package/src/Tooltip/LegacyTooltip.tsx

@@ -1,167 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Platform, Text, View, ViewProps } from 'react-native';
-import type { WithTimingConfig } from 'react-native-reanimated';
-import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
-import { rgb } from '@fountain-ui/utils';
-import ButtonBase from '../ButtonBase';
-import { createFontStyle, css, useTheme } from '../styles';
-import { Close as CloseIcon } from '../internal/icons';
-import type TooltipProps from './LegacyTooltipProps';
-import UpArrow from './UpArrow';
-
-const DEFAULT_OPACITY = 0.8;
-const INITIAL_LAYOUT = { width: 0, height: 0, x: 0, y: 0 };
-
-const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };
-
-export default function Tooltip(props: TooltipProps) {
-    const {
-        arrowLayout,
-        children,
-        initialLayout = INITIAL_LAYOUT,
-        left,
-        onClose,
-        placement = 'top',
-        right,
-        numberOfTitleLines = 1,
-        style,
-        title,
-        tooltipStyle,
-        verticalOffset = 4,
-        visible = false,
-    } = props;
-
-    const theme = useTheme();
-
-    const [layout, setLayout] = useState(initialLayout);
-
-    const scale = useSharedValue(0);
-
-    const animatedStyle = useAnimatedStyle(() => ({
-        transform: [{ scale: scale.value }],
-    }), []);
-
-    const [r, g, b] = rgb(theme.palette.primary.main);
-
-    const totalVerticalOffset = -(layout.height + verticalOffset);
-    const tooltipLayoutStyle: ViewProps['style'] = {
-        alignItems: arrowLayout?.placement === 'left'
-            ? 'flex-start'
-            : arrowLayout?.placement === 'right'
-                ? 'flex-end'
-                : 'center',
-        bottom: placement === 'bottom' ? totalVerticalOffset : undefined,
-        left,
-        position: 'absolute',
-        right,
-        top: placement === 'top' ? totalVerticalOffset : undefined,
-        zIndex: theme.zIndex.tooltip,
-        height: visible ? undefined : 0,
-        overflow: visible ? undefined : 'hidden',
-        ...Platform.select({
-            web: {
-                display: visible ? 'flex' : 'none',
-            },
-            default: {},
-        }),
-    };
-
-    useEffect(() => {
-        const nextScaleValue = visible ? 1 : 0;
-
-        scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);
-    }, [visible]);
-
-    const touchableStyle: ViewProps['style'] = {
-        alignItems: 'center',
-        backgroundColor: `rgba(${r}, ${g}, ${b}, ${DEFAULT_OPACITY})`,
-        borderRadius: theme.shape.roundness,
-        flexDirection: 'row',
-        padding: theme.spacing(2),
-        width: '100%',
-    };
-
-    const fontStyle = createFontStyle(theme, {
-        selector: (typo) => typo.caption2,
-        color: theme.palette.primary.contrastTextColor,
-    });
-
-    const textStyle = css([
-        fontStyle,
-        {
-            marginRight: theme.spacing(2),
-            flexShrink: 1,
-        },
-    ]);
-
-    const arrowStyle = css({
-        ...(arrowLayout && {
-            [arrowLayout.placement]: arrowLayout.offset,
-        }),
-    });
-
-    const buttonElem = (
-        <ButtonBase
-            pressEffect={'none'}
-            onPress={onClose}
-        >
-            <View style={css(touchableStyle)}>
-                <Text
-                    // TODO: Should we provide text prop customization?
-                    numberOfLines={numberOfTitleLines}
-                    style={textStyle}
-                >
-                    {title}
-                </Text>
-                <CloseIcon
-                    fill={theme.palette.primary.contrastTextColor}
-                    width={20}
-                    height={20}
-                />
-            </View>
-        </ButtonBase>
-    );
-
-    const arrowElem = (
-        <View style={arrowStyle}>
-            <UpArrow
-                upsideDown={placement === 'top'}
-                fill={theme.palette.primary.main}
-                opacity={DEFAULT_OPACITY}
-            />
-        </View>
-    );
-
-    return (
-        <View style={style}>
-            {children}
-
-            <Animated.View
-                onLayout={(event) => {
-                    if (event.nativeEvent.layout.height === 0) {
-                        return;
-                    }
-
-                    setLayout(event.nativeEvent.layout);
-                }}
-                style={[
-                    animatedStyle,
-                    tooltipLayoutStyle,
-                    tooltipStyle,
-                ]}
-            >
-                {placement === 'top' ? (
-                    <React.Fragment>
-                        {buttonElem}
-                        {arrowElem}
-                    </React.Fragment>
-                ) : (
-                    <React.Fragment>
-                        {arrowElem}
-                        {buttonElem}
-                    </React.Fragment>
-                )}
-            </Animated.View>
-        </View>
-    );
-};