@fountain-ui/core 2.0.0-beta.92 → 2.0.0-beta.94

package/src/TextField/LegacyTextField.tsx

@@ -0,0 +1,168 @@
+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

@@ -0,0 +1,80 @@
+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

@@ -3,7 +3,7 @@ import { Animated, LayoutChangeEvent, Platform, TextInput, View } from 'react-na
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { createFontStyle, css, useTheme } from '../styles';
 import IconButton from '../IconButton';
-import TextFieldProps from './TextFieldProps';
+import TextFieldProps from './LegacyTextFieldProps';
 import InputLabel from './InputLabel';
 import {
     defaultHeight,

package/src/TextField/TextField.tsx

@@ -1,167 +1,185 @@
-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 './TextFieldProps';
-import { blurAnimationDuration, focusAnimationDuration } from './utils';
+import React, { useState } from 'react';
+import type { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';
+import { Platform, StyleSheet, Text, TextInput, View } from 'react-native';
+import type { FountainUiStyle } from '@fountain-ui/styles';
+import { css } from '@fountain-ui/styles';
+import IconButton from '../IconButton/IconButton';
+import { Clear, EyeOff, EyeOn, LoadingSpinner, Search } from '../internal/icons';
+import Row from '../Row';
+import { createFontStyle, useTheme } from '../styles';
+import type TextFieldProps from './TextFieldProps';
+import type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';
+import useVariantStyleMap from './useVariantStyleMap';
+
+const styles = StyleSheet.create({
+    root: {
+        alignItems: 'center',
+        flexGrow: 1,
+    },
+    input: {
+        flexGrow: 1,
+    },
+    secureToggleButton: {
+        alignItems: 'flex-end',
+        padding: 0,
+    },
+});
 
 const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField(props, ref) {
     const {
-        disabled = false,
-        error = false,
-        keyboardType = 'default',
-        icon,
-        label,
+        autoFocus,
+        containerStyle: containerStyleProp,
+        editable = true,
+        hint,
+        isLoading,
         onBlur,
-        onChangeText,
+        onChangeText: onChangeTextProp,
         onFocus,
-        onIconPress,
-        onSubmitEditing,
-        placeholder: placeholderProp,
-        secureTextEntry = false,
-        value,
+        placeholderTextColor: placeholderTextColorProp,
+        secureTextEntry: secureTextEntryProp,
+        showClearButton: showClearButtonProp,
+        status = 'default' as TextFieldStatus,
         style: styleProp,
+        title,
+        value,
+        variant = 'default' as TextFieldVariant,
+        ...otherProps
     } = 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 isSearch = variant === 'search';
 
-    const minimizeLabel = () => {
-        Animated.timing(animatedLabel, {
-            toValue: 0,
-            duration: blurAnimationDuration,
-            useNativeDriver: false,
-        }).start();
-    };
+    const disabled = !editable || isLoading;
 
-    const restoreLabel = () => {
-        Animated.timing(animatedLabel, {
-            toValue: 1,
-            duration: focusAnimationDuration,
-            useNativeDriver: false,
-        }).start();
-    };
+    const theme = useTheme();
 
-    const showError = () => {
-        Animated.timing(animatedError, {
-            toValue: 1,
-            duration: focusAnimationDuration,
-            useNativeDriver: false,
-        }).start();
-    };
+    const [isFocused, setIsFocused] = useState<boolean>(autoFocus ?? false);
+    const [secureTextEntry, setSecureTextEntry] = useState<boolean>(secureTextEntryProp ?? false);
 
-    const hideError = () => {
-        Animated.timing(animatedError, {
-            toValue: 0,
-            duration: blurAnimationDuration,
-            useNativeDriver: false,
-        }).start();
-    };
+    const variantStyles = useVariantStyleMap(variant, status, isFocused);
 
-    const showPlaceholder = () => {
-        placeholderProp && setPlaceholder(placeholderProp);
+    const handleBlur = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+        setIsFocused(false);
+        onBlur?.(event);
     };
 
-    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<TextInputFocusEventData>) => {
+        setIsFocused(true);
+        onFocus?.(event);
+    };
 
-    const handleFocus = (event: NativeSyntheticEvent<TargetedEvent>) => {
-        if (disabled) {
-            return;
-        }
+    const handleSecureTogglePress = () => {
+        setSecureTextEntry((current) => !current);
+    };
 
-        setFocused(true);
-        onFocus?.(event);
+    const handleChangeText = (text: string) => {
+        onChangeTextProp?.(text);
     };
 
-    const handleBlur = (event: NativeSyntheticEvent<TargetedEvent>) => {
-        setFocused(false);
-        onBlur?.(event);
+    const handleClear = () => {
+        handleChangeText('');
     };
 
-    const style = css([
-        { opacity: disabled ? 0.3 : 1 },
+    const showClearButton = showClearButtonProp ?? isSearch;
+
+    const titleFontStyle = createFontStyle(theme, {
+        // selector: (typography) => typography.caption1['semiBold']
+        color: theme.palette.text.strong,
+    });
+
+    const inputStyle = css([
+        styles.input,
+        variantStyles.inputStyle,
+        Platform.OS === 'web' ? { outlineWidth: 0 } as FountainUiStyle : {},
         styleProp,
     ]);
 
-    const handleLayoutAnimatedText = (event: LayoutChangeEvent) => {
-        setLabelLayout({
-            width: event.nativeEvent.layout.width,
-            height: event.nativeEvent.layout.height,
-            measured: true,
-        });
-    };
+    const placeholderTextColor = placeholderTextColorProp ?? theme.palette.status.disabledLabel;
 
-    const forceFocus = () => {
-        innerRef.current?.focus();
-    };
+    const containerStyle = css([
+        styles.root,
+        variantStyles.containerStyle,
+        { opacity: disabled ? 0.3 : 1 },
+        containerStyleProp,
+    ]);
 
     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}
-        />
+        <View>
+            {title && !isSearch ? (
+                <Text
+                    children={title}
+                    style={titleFontStyle}
+                />
+            ) : null}
+
+            <Row style={containerStyle}>
+                {isSearch ? (
+                    isLoading ? (
+                        <LoadingSpinner/>
+                    ) : (
+                        <Search
+                            color={'base'}
+                            enableV2={true}
+                            height={18}
+                            width={18}
+                        />
+                    )
+                ) : null}
+
+                <TextInput
+                    autoFocus={autoFocus}
+                    editable={!disabled}
+                    onBlur={handleBlur}
+                    onChangeText={handleChangeText}
+                    onFocus={handleFocus}
+                    placeholderTextColor={placeholderTextColor}
+                    ref={ref}
+                    secureTextEntry={secureTextEntry}
+                    style={inputStyle}
+                    value={value}
+                    {...otherProps}
+                />
+
+                {showClearButton && value?.length && value.length > 0 ? (
+                    <IconButton
+                        color={'base'}
+                        children={
+                            <Clear
+                                height={13.75}
+                                width={15}
+                            />
+                        }
+                        onPress={handleClear}
+                    />
+                ) : null}
+
+                {secureTextEntryProp && !isSearch ? (
+                    <IconButton
+                        color={'base'}
+                        onPress={handleSecureTogglePress}
+                        style={styles.secureToggleButton}
+                    >
+                        {secureTextEntry ? (
+                            <EyeOff
+                                height={19}
+                                width={17.42}
+                            />
+                        ) : (
+                            <EyeOn
+                                height={19}
+                                width={17.42}
+                            />
+                        )}
+                    </IconButton>
+                ) : null}
+            </Row>
+
+            {hint && !isSearch ? (
+                <Text
+                    children={hint}
+                    style={variantStyles.hintStyle}
+                />
+            ) : null}
+        </View>
     );
 });
 

package/src/TextField/TextFieldProps.ts

@@ -1,80 +1,50 @@
-import React from 'react';
-import { NativeSyntheticEvent, TargetedEvent } from 'react-native';
-import { ComponentProps } from '../types';
+import type { TextInputProps } from 'react-native';
+import type { OverridableComponentProps } from '../types';
+import { StyleProp, TextStyle } from 'react-native';
+import { ExtendedStyle } from '../types';
 
-type TextFieldKeyboardType = 'default' | 'numeric' | 'email-address';
+export const textFieldStatus = ['default', 'success', 'error'] as const;
+export type TextFieldStatus = typeof textFieldStatus[number];
 
-export interface setStyleProp {
-    fontFamily: string;
-}
+export const textFieldVariants = ['default', 'search'] as const;
+export type TextFieldVariant = typeof textFieldVariants[number];
 
-export default interface TextFieldProps extends ComponentProps<{
+export default interface TextFieldProps extends OverridableComponentProps<TextInputProps, {
     /**
-     * If true, user won't be able to interact with the component.
-     * @default false
+     * Determines the style of the container that wraps the input.
      */
-    disabled?: boolean;
+    containerStyle?: ExtendedStyle | ExtendedStyle[];
 
     /**
-     * Whether to style the TextField with error style.
-     * @default false
+     * Determines the text below the input.
      */
-    error?: boolean,
+    hint?: string;
 
     /**
-     * It is an icon placed to the right of the TextField.
+     * Determines whether to display the spinner when in loading state. (only search)
      */
-    icon?: React.ReactElement;
+    isLoading?: boolean;
 
     /**
-     * User can specify the keyboard type.
-     * @default 'default'
+     * Determines whether to expose the Clear button.
+     * @default variant === search ? true : false
      */
-    keyboardType?: TextFieldKeyboardType;
+    showClearButton?: boolean;
 
     /**
-     * The text to use for the floating label.
+     * Determines the input color based on the status.
+     * @default default
      */
-    label?: string;
+    status?: TextFieldStatus;
 
     /**
-     * Callback that is called when the textField is blurred.
+     * Determines the title of the input.
      */
-    onBlur?: (event: NativeSyntheticEvent<TargetedEvent>) => void,
+    title?: string;
 
     /**
-     * Callback that is called when the textField's text changes.
+     * Determines the overall style and appearance of the input.
+     * @default default
      */
-    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;
-}> {}
+    variant?: TextFieldVariant;
+}> {}