@fountain-ui/core 2.0.0-beta.93 → 2.0.0-beta.95

package/build/module/TextField/LegacyTextField.js

@@ -0,0 +1,169 @@
+import React, { useImperativeHandle, useRef } from 'react';
+import { Animated } from 'react-native';
+import { css } from '../styles';
+import { useAnimatedValue } from '../hooks';
+import OutlinedTextField from './OutlinedTextField';
+import { blurAnimationDuration, focusAnimationDuration } from './utils';
+const TextField = /*#__PURE__*/React.forwardRef(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(null); //@ts-ignore
+
+  useImperativeHandle(ref, () => ({
+    focus: () => {
+      var _innerRef$current;
+
+      (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
+    },
+    isFocused: () => {
+      const current = innerRef.current;
+      return current ? current.isFocused() : false;
+    },
+    clear: () => {
+      var _innerRef$current2;
+
+      (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.clear();
+    },
+    blur: () => {
+      var _innerRef$current3;
+
+      (_innerRef$current3 = innerRef.current) === null || _innerRef$current3 === void 0 ? void 0 : _innerRef$current3.blur();
+    },
+    setStyle: style => {
+      var _innerRef$current4;
+
+      (_innerRef$current4 = innerRef.current) === null || _innerRef$current4 === void 0 ? void 0 : _innerRef$current4.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 => {
+    if (disabled) {
+      return;
+    }
+
+    setFocused(true);
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+  };
+
+  const handleBlur = event => {
+    setFocused(false);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+  };
+
+  const style = css([{
+    opacity: disabled ? 0.3 : 1
+  }, styleProp]);
+
+  const handleLayoutAnimatedText = event => {
+    setLabelLayout({
+      width: event.nativeEvent.layout.width,
+      height: event.nativeEvent.layout.height,
+      measured: true
+    });
+  };
+
+  const forceFocus = () => {
+    var _innerRef$current5;
+
+    (_innerRef$current5 = innerRef.current) === null || _innerRef$current5 === void 0 ? void 0 : _innerRef$current5.focus();
+  };
+
+  return /*#__PURE__*/React.createElement(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;
+//# sourceMappingURL=LegacyTextField.js.map

package/build/module/TextField/LegacyTextField.js.map

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

package/build/module/TextField/LegacyTextFieldProps.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=LegacyTextFieldProps.js.map

package/build/module/TextField/LegacyTextFieldProps.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["LegacyTextFieldProps.ts"],"sourcesContent":["import React from 'react';\nimport { NativeSyntheticEvent, TargetedEvent } from 'react-native';\nimport { ComponentProps } from '../types';\n\ntype TextFieldKeyboardType = 'default' | 'numeric' | 'email-address';\n\nexport interface setStyleProp {\n    fontFamily: string;\n}\n\nexport default interface TextFieldProps extends ComponentProps<{\n    /**\n     * If true, user won't be able to interact with the component.\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether to style the TextField with error style.\n     * @default false\n     */\n    error?: boolean,\n\n    /**\n     * It is an icon placed to the right of the TextField.\n     */\n    icon?: React.ReactElement;\n\n    /**\n     * User can specify the keyboard type.\n     * @default 'default'\n     */\n    keyboardType?: TextFieldKeyboardType;\n\n    /**\n     * The text to use for the floating label.\n     */\n    label?: string;\n\n    /**\n     * Callback that is called when the textField is blurred.\n     */\n    onBlur?: (event: NativeSyntheticEvent<TargetedEvent>) => void,\n\n    /**\n     * Callback that is called when the textField's text changes.\n     */\n    onChangeText?: (value: string) => void,\n\n    /**\n     * Callback that is called when the textField is focused.\n     */\n    onFocus?: (event: NativeSyntheticEvent<TargetedEvent>) => void,\n\n    /**\n     * Callback that is called when icon pressed.\n     */\n    onIconPress?: () => void;\n\n    /**\n     * Callback that is called when enter or submit key pressed.\n     */\n    onSubmitEditing?: () => void\n\n    /**\n     * Placeholder for textField.\n     */\n    placeholder?: string;\n\n    /**\n     * If true, the text input obscures the text entered so that sensitive text like passwords stay secure.\n     * @default false\n     */\n    secureTextEntry?: boolean;\n\n    /**\n     * Value of the textField.\n     */\n    value?: string;\n}> {}\n"],"mappings":""}

package/build/module/TextField/OutlinedTextField.js.map

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

package/build/module/TextField/TextField.js

@@ -1,169 +1,129 @@
-import React, { useImperativeHandle, useRef } from 'react';
-import { Animated } from 'react-native';
-import { css } from '../styles';
-import { useAnimatedValue } from '../hooks';
-import OutlinedTextField from './OutlinedTextField';
-import { blurAnimationDuration, focusAnimationDuration } from './utils';
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useState } from 'react';
+import { Platform, StyleSheet, Text, TextInput, View } from 'react-native';
+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 useVariantStyleMap from './useVariantStyleMap';
+const styles = StyleSheet.create({
+  root: {
+    alignItems: 'center',
+    flexGrow: 1
+  },
+  input: {
+    flexGrow: 1
+  },
+  secureToggleButton: {
+    alignItems: 'flex-end',
+    padding: 0
+  }
+});
 const TextField = /*#__PURE__*/React.forwardRef(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,
+    placeholderTextColor: placeholderTextColorProp,
+    secureTextEntry: secureTextEntryProp,
+    showClearButton: showClearButtonProp,
+    status = 'default',
+    style: styleProp,
+    title,
     value,
-    style: styleProp
+    variant = 'default',
+    ...otherProps
   } = props;
-  const innerRef = useRef(null); //@ts-ignore
-
-  useImperativeHandle(ref, () => ({
-    focus: () => {
-      var _innerRef$current;
-
-      (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
-    },
-    isFocused: () => {
-      const current = innerRef.current;
-      return current ? current.isFocused() : false;
-    },
-    clear: () => {
-      var _innerRef$current2;
-
-      (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.clear();
-    },
-    blur: () => {
-      var _innerRef$current3;
-
-      (_innerRef$current3 = innerRef.current) === null || _innerRef$current3 === void 0 ? void 0 : _innerRef$current3.blur();
-    },
-    setStyle: style => {
-      var _innerRef$current4;
-
-      (_innerRef$current4 = innerRef.current) === null || _innerRef$current4 === void 0 ? void 0 : _innerRef$current4.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 isSearch = variant === 'search';
+  const disabled = !editable || isLoading;
+  const theme = useTheme();
+  const [isFocused, setIsFocused] = useState(autoFocus ?? false);
+  const [secureTextEntry, setSecureTextEntry] = useState(secureTextEntryProp ?? false);
+  const variantStyles = useVariantStyleMap(variant, status, isFocused);
 
-  const showPlaceholder = () => {
-    placeholderProp && setPlaceholder(placeholderProp);
+  const handleBlur = event => {
+    setIsFocused(false);
+    onBlur === null || onBlur === void 0 ? void 0 : 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 => {
-    if (disabled) {
-      return;
-    }
-
-    setFocused(true);
+    setIsFocused(true);
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
   };
 
-  const handleBlur = event => {
-    setFocused(false);
-    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+  const handleSecureTogglePress = () => {
+    setSecureTextEntry(current => !current);
   };
 
-  const style = css([{
-    opacity: disabled ? 0.3 : 1
-  }, styleProp]);
-
-  const handleLayoutAnimatedText = event => {
-    setLabelLayout({
-      width: event.nativeEvent.layout.width,
-      height: event.nativeEvent.layout.height,
-      measured: true
-    });
+  const handleChangeText = text => {
+    onChangeTextProp === null || onChangeTextProp === void 0 ? void 0 : onChangeTextProp(text);
   };
 
-  const forceFocus = () => {
-    var _innerRef$current5;
-
-    (_innerRef$current5 = innerRef.current) === null || _innerRef$current5 === void 0 ? void 0 : _innerRef$current5.focus();
+  const handleClear = () => {
+    handleChangeText('');
   };
 
-  return /*#__PURE__*/React.createElement(OutlinedTextField, {
-    animatedError: animatedError,
-    animatedLabel: animatedLabel,
-    disabled: disabled,
-    error: error,
-    focused: focused,
-    forceFocus: forceFocus,
-    icon: icon,
-    keyboardType: keyboardType,
-    label: label,
-    labelLayout: labelLayout,
-    onFocus: handleFocus,
+  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
+  } : {}, styleProp]);
+  const placeholderTextColor = placeholderTextColorProp ?? theme.palette.status.disabledLabel;
+  const containerStyle = css([styles.root, variantStyles.containerStyle, {
+    opacity: disabled ? 0.3 : 1
+  }, containerStyleProp]);
+  return /*#__PURE__*/React.createElement(View, null, title && !isSearch ? /*#__PURE__*/React.createElement(Text, {
+    children: title,
+    style: titleFontStyle
+  }) : null, /*#__PURE__*/React.createElement(Row, {
+    style: containerStyle
+  }, isSearch ? isLoading ? /*#__PURE__*/React.createElement(LoadingSpinner, null) : /*#__PURE__*/React.createElement(Search, {
+    color: 'base',
+    enableV2: true,
+    height: 18,
+    width: 18
+  }) : null, /*#__PURE__*/React.createElement(TextInput, _extends({
+    autoFocus: autoFocus,
+    editable: !disabled,
     onBlur: handleBlur,
-    onChangeText: onChangeText,
-    onIconPress: onIconPress,
-    onLayoutAnimatedText: handleLayoutAnimatedText,
-    onSubmitEditing: onSubmitEditing,
-    placeholder: placeholder,
-    ref: innerRef,
+    onChangeText: handleChangeText,
+    onFocus: handleFocus,
+    placeholderTextColor: placeholderTextColor,
+    ref: ref,
     secureTextEntry: secureTextEntry,
-    style: style,
+    style: inputStyle,
     value: value
-  });
+  }, otherProps)), showClearButton && value !== null && value !== void 0 && value.length && value.length > 0 ? /*#__PURE__*/React.createElement(IconButton, {
+    color: 'base',
+    children: /*#__PURE__*/React.createElement(Clear, {
+      height: 13.75,
+      width: 15
+    }),
+    onPress: handleClear
+  }) : null, secureTextEntryProp && !isSearch ? /*#__PURE__*/React.createElement(IconButton, {
+    color: 'base',
+    onPress: handleSecureTogglePress,
+    style: styles.secureToggleButton
+  }, secureTextEntry ? /*#__PURE__*/React.createElement(EyeOff, {
+    height: 19,
+    width: 17.42
+  }) : /*#__PURE__*/React.createElement(EyeOn, {
+    height: 19,
+    width: 17.42
+  })) : null), hint && !isSearch ? /*#__PURE__*/React.createElement(Text, {
+    children: hint,
+    style: variantStyles.hintStyle
+  }) : null);
 });
 export default TextField;
 //# sourceMappingURL=TextField.js.map

package/build/module/TextField/TextField.js.map

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

package/build/module/TextField/TextFieldProps.js

@@ -1,2 +1,3 @@
-
+export const textFieldStatus = ['default', 'success', 'error'];
+export const textFieldVariants = ['default', 'search'];
 //# sourceMappingURL=TextFieldProps.js.map

package/build/module/TextField/TextFieldProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["TextFieldProps.ts"],"sourcesContent":["import React from 'react';\nimport { NativeSyntheticEvent, TargetedEvent } from 'react-native';\nimport { ComponentProps } from '../types';\n\ntype TextFieldKeyboardType = 'default' | 'numeric' | 'email-address';\n\nexport interface setStyleProp {\n    fontFamily: string;\n}\n\nexport default interface TextFieldProps extends ComponentProps<{\n    /**\n     * If true, user won't be able to interact with the component.\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether to style the TextField with error style.\n     * @default false\n     */\n    error?: boolean,\n\n    /**\n     * It is an icon placed to the right of the TextField.\n     */\n    icon?: React.ReactElement;\n\n    /**\n     * User can specify the keyboard type.\n     * @default 'default'\n     */\n    keyboardType?: TextFieldKeyboardType;\n\n    /**\n     * The text to use for the floating label.\n     */\n    label?: string;\n\n    /**\n     * Callback that is called when the textField is blurred.\n     */\n    onBlur?: (event: NativeSyntheticEvent<TargetedEvent>) => void,\n\n    /**\n     * Callback that is called when the textField's text changes.\n     */\n    onChangeText?: (value: string) => void,\n\n    /**\n     * Callback that is called when the textField is focused.\n     */\n    onFocus?: (event: NativeSyntheticEvent<TargetedEvent>) => void,\n\n    /**\n     * Callback that is called when icon pressed.\n     */\n    onIconPress?: () => void;\n\n    /**\n     * Callback that is called when enter or submit key pressed.\n     */\n    onSubmitEditing?: () => void\n\n    /**\n     * Placeholder for textField.\n     */\n    placeholder?: string;\n\n    /**\n     * If true, the text input obscures the text entered so that sensitive text like passwords stay secure.\n     * @default false\n     */\n    secureTextEntry?: boolean;\n\n    /**\n     * Value of the textField.\n     */\n    value?: string;\n}> {}"],"mappings":""}
+{"version":3,"names":["textFieldStatus","textFieldVariants"],"sources":["TextFieldProps.ts"],"sourcesContent":["import type { TextInputProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\nimport { StyleProp, TextStyle } from 'react-native';\nimport { ExtendedStyle } from '../types';\n\nexport const textFieldStatus = ['default', 'success', 'error'] as const;\nexport type TextFieldStatus = typeof textFieldStatus[number];\n\nexport const textFieldVariants = ['default', 'search'] as const;\nexport type TextFieldVariant = typeof textFieldVariants[number];\n\nexport default interface TextFieldProps extends OverridableComponentProps<TextInputProps, {\n    /**\n     * Determines the style of the container that wraps the input.\n     */\n    containerStyle?: ExtendedStyle | ExtendedStyle[];\n\n    /**\n     * Determines the text below the input.\n     */\n    hint?: string;\n\n    /**\n     * Determines whether to display the spinner when in loading state. (only search)\n     */\n    isLoading?: boolean;\n\n    /**\n     * Determines whether to expose the Clear button.\n     * @default variant === search ? true : false\n     */\n    showClearButton?: boolean;\n\n    /**\n     * Determines the input color based on the status.\n     * @default default\n     */\n    status?: TextFieldStatus;\n\n    /**\n     * Determines the title of the input.\n     */\n    title?: string;\n\n    /**\n     * Determines the overall style and appearance of the input.\n     * @default default\n     */\n    variant?: TextFieldVariant;\n}> {}\n"],"mappings":"AAKA,OAAO,MAAMA,eAAe,GAAG,CAAC,SAAD,EAAY,SAAZ,EAAuB,OAAvB,CAAxB;AAGP,OAAO,MAAMC,iBAAiB,GAAG,CAAC,SAAD,EAAY,QAAZ,CAA1B"}

package/build/module/TextField/index.js

@@ -1,2 +1,2 @@
-export { default } from './TextField';
+export { default } from './LegacyTextField';
 //# sourceMappingURL=index.js.map

package/build/module/TextField/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["default"],"sources":["index.tsx"],"sourcesContent":["export { default } from './TextField';\nexport type { default as TextFieldProps } from './TextFieldProps';"],"mappings":"AAAA,SAASA,OAAT,QAAwB,aAAxB"}
+{"version":3,"names":["default"],"sources":["index.tsx"],"sourcesContent":["export { default } from './LegacyTextField';\nexport type { default as TextFieldProps } from './LegacyTextFieldProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,mBAAxB"}