@fountain-ui/core 2.0.0-beta.53 → 2.0.0-beta.54
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/commonjs/TextField/TextField.js +10 -13
- package/build/commonjs/TextField/TextField.js.map +1 -1
- package/build/commonjs/TextField/TextFieldProps.js.map +1 -1
- package/build/module/TextField/TextField.js +11 -14
- package/build/module/TextField/TextField.js.map +1 -1
- package/build/module/TextField/TextFieldProps.js.map +1 -1
- package/build/typescript/TextField/TextFieldProps.d.ts +3 -0
- package/package.json +2 -2
- package/src/TextField/TextField.tsx +7 -9
- package/src/TextField/TextFieldProps.ts +4 -0
|
@@ -61,6 +61,13 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
|
|
|
61
61
|
var _innerRef$current3;
|
|
62
62
|
|
|
63
63
|
(_innerRef$current3 = innerRef.current) === null || _innerRef$current3 === void 0 ? void 0 : _innerRef$current3.blur();
|
|
64
|
+
},
|
|
65
|
+
setStyle: style => {
|
|
66
|
+
var _innerRef$current4;
|
|
67
|
+
|
|
68
|
+
(_innerRef$current4 = innerRef.current) === null || _innerRef$current4 === void 0 ? void 0 : _innerRef$current4.setNativeProps({
|
|
69
|
+
style
|
|
70
|
+
});
|
|
64
71
|
}
|
|
65
72
|
}));
|
|
66
73
|
const animatedLabel = (0, _hooks.useAnimatedValue)(value ? 0 : 1);
|
|
@@ -153,21 +160,11 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
|
|
|
153
160
|
};
|
|
154
161
|
|
|
155
162
|
const forceFocus = () => {
|
|
156
|
-
var _innerRef$current4;
|
|
157
|
-
|
|
158
|
-
(_innerRef$current4 = innerRef.current) === null || _innerRef$current4 === void 0 ? void 0 : _innerRef$current4.focus();
|
|
159
|
-
}; // react-native TextInput font family issue at android
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
(0, _react.useEffect)(() => {
|
|
163
163
|
var _innerRef$current5;
|
|
164
164
|
|
|
165
|
-
(_innerRef$current5 = innerRef.current) === null || _innerRef$current5 === void 0 ? void 0 : _innerRef$current5.
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
}
|
|
169
|
-
});
|
|
170
|
-
}, []);
|
|
165
|
+
(_innerRef$current5 = innerRef.current) === null || _innerRef$current5 === void 0 ? void 0 : _innerRef$current5.focus();
|
|
166
|
+
};
|
|
167
|
+
|
|
171
168
|
return /*#__PURE__*/_react.default.createElement(_OutlinedTextField.default, {
|
|
172
169
|
animatedError: animatedError,
|
|
173
170
|
animatedLabel: animatedLabel,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["TextField","React","forwardRef","props","ref","disabled","error","keyboardType","icon","label","onBlur","onChangeText","onFocus","onIconPress","onSubmitEditing","placeholder","placeholderProp","secureTextEntry","value","style","styleProp","innerRef","useRef","useImperativeHandle","focus","current","isFocused","clear","blur","animatedLabel","useAnimatedValue","animatedError","focused","setFocused","useState","setPlaceholder","labelLayout","setLabelLayout","measured","width","height","minimizeLabel","Animated","timing","toValue","duration","blurAnimationDuration","useNativeDriver","start","restoreLabel","focusAnimationDuration","showError","hideError","showPlaceholder","hidePlaceholder","useEffect","handleFocus","event","handleBlur","css","opacity","handleLayoutAnimatedText","nativeEvent","layout","forceFocus"
|
|
1
|
+
{"version":3,"names":["TextField","React","forwardRef","props","ref","disabled","error","keyboardType","icon","label","onBlur","onChangeText","onFocus","onIconPress","onSubmitEditing","placeholder","placeholderProp","secureTextEntry","value","style","styleProp","innerRef","useRef","useImperativeHandle","focus","current","isFocused","clear","blur","setStyle","setNativeProps","animatedLabel","useAnimatedValue","animatedError","focused","setFocused","useState","setPlaceholder","labelLayout","setLabelLayout","measured","width","height","minimizeLabel","Animated","timing","toValue","duration","blurAnimationDuration","useNativeDriver","start","restoreLabel","focusAnimationDuration","showError","hideError","showPlaceholder","hidePlaceholder","useEffect","handleFocus","event","handleBlur","css","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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"}
|
|
@@ -1 +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 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":""}
|
|
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":""}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useImperativeHandle, useRef } from 'react';
|
|
2
2
|
import { Animated } from 'react-native';
|
|
3
3
|
import { css } from '../styles';
|
|
4
4
|
import { useAnimatedValue } from '../hooks';
|
|
@@ -42,6 +42,13 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(props, ref) {
|
|
|
42
42
|
var _innerRef$current3;
|
|
43
43
|
|
|
44
44
|
(_innerRef$current3 = innerRef.current) === null || _innerRef$current3 === void 0 ? void 0 : _innerRef$current3.blur();
|
|
45
|
+
},
|
|
46
|
+
setStyle: style => {
|
|
47
|
+
var _innerRef$current4;
|
|
48
|
+
|
|
49
|
+
(_innerRef$current4 = innerRef.current) === null || _innerRef$current4 === void 0 ? void 0 : _innerRef$current4.setNativeProps({
|
|
50
|
+
style
|
|
51
|
+
});
|
|
45
52
|
}
|
|
46
53
|
}));
|
|
47
54
|
const animatedLabel = useAnimatedValue(value ? 0 : 1);
|
|
@@ -129,21 +136,11 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(props, ref) {
|
|
|
129
136
|
};
|
|
130
137
|
|
|
131
138
|
const forceFocus = () => {
|
|
132
|
-
var _innerRef$current4;
|
|
133
|
-
|
|
134
|
-
(_innerRef$current4 = innerRef.current) === null || _innerRef$current4 === void 0 ? void 0 : _innerRef$current4.focus();
|
|
135
|
-
}; // react-native TextInput font family issue at android
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
useEffect(() => {
|
|
139
139
|
var _innerRef$current5;
|
|
140
140
|
|
|
141
|
-
(_innerRef$current5 = innerRef.current) === null || _innerRef$current5 === void 0 ? void 0 : _innerRef$current5.
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
}
|
|
145
|
-
});
|
|
146
|
-
}, []);
|
|
141
|
+
(_innerRef$current5 = innerRef.current) === null || _innerRef$current5 === void 0 ? void 0 : _innerRef$current5.focus();
|
|
142
|
+
};
|
|
143
|
+
|
|
147
144
|
return /*#__PURE__*/React.createElement(OutlinedTextField, {
|
|
148
145
|
animatedError: animatedError,
|
|
149
146
|
animatedLabel: animatedLabel,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","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","animatedLabel","animatedError","focused","setFocused","useState","setPlaceholder","labelLayout","setLabelLayout","measured","width","height","minimizeLabel","timing","toValue","duration","useNativeDriver","start","restoreLabel","showError","hideError","showPlaceholder","hidePlaceholder","handleFocus","event","handleBlur","opacity","handleLayoutAnimatedText","nativeEvent","layout","forceFocus","setNativeProps","fontFamily"],"sources":["TextField.tsx"],"sourcesContent":["import React, { useEffect, 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 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 }));\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 // react-native TextInput font family issue at android\n useEffect(() => {\n innerRef.current?.setNativeProps({\n style: { fontFamily: 'Inter-Regular' },\n });\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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"}
|
|
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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"}
|
|
@@ -1 +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 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":""}
|
|
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":""}
|
|
@@ -2,6 +2,9 @@ import React from 'react';
|
|
|
2
2
|
import { NativeSyntheticEvent, TargetedEvent } from 'react-native';
|
|
3
3
|
import { ComponentProps } from '../types';
|
|
4
4
|
declare type TextFieldKeyboardType = 'default' | 'numeric' | 'email-address';
|
|
5
|
+
export interface setStyleProp {
|
|
6
|
+
fontFamily: string;
|
|
7
|
+
}
|
|
5
8
|
export default interface TextFieldProps extends ComponentProps<{
|
|
6
9
|
/**
|
|
7
10
|
* If true, user won't be able to interact with the component.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fountain-ui/core",
|
|
3
|
-
"version": "2.0.0-beta.
|
|
3
|
+
"version": "2.0.0-beta.54",
|
|
4
4
|
"author": "Fountain-UI Team",
|
|
5
5
|
"description": "React components that implement Tappytoon's Fountain Design.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"publishConfig": {
|
|
68
68
|
"access": "public"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "7f88347a0bb7b43e6781423f531d6e0d34af0c48"
|
|
71
71
|
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useImperativeHandle, useRef } from 'react';
|
|
2
2
|
import { Animated, LayoutChangeEvent, NativeSyntheticEvent, TargetedEvent, TextInput } from 'react-native';
|
|
3
3
|
import { css } from '../styles';
|
|
4
4
|
import { useAnimatedValue } from '../hooks';
|
|
5
5
|
import OutlinedTextField from './OutlinedTextField';
|
|
6
|
-
import TextFieldProps from './TextFieldProps';
|
|
6
|
+
import TextFieldProps, { setStyleProp } from './TextFieldProps';
|
|
7
7
|
import { blurAnimationDuration, focusAnimationDuration } from './utils';
|
|
8
8
|
|
|
9
9
|
const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField(props, ref) {
|
|
@@ -40,6 +40,11 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
|
|
|
40
40
|
blur: () => {
|
|
41
41
|
innerRef.current?.blur();
|
|
42
42
|
},
|
|
43
|
+
setStyle: (style: setStyleProp) => {
|
|
44
|
+
innerRef.current?.setNativeProps({
|
|
45
|
+
style,
|
|
46
|
+
});
|
|
47
|
+
},
|
|
43
48
|
}));
|
|
44
49
|
|
|
45
50
|
const animatedLabel = useAnimatedValue(value ? 0 : 1);
|
|
@@ -133,13 +138,6 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
|
|
|
133
138
|
innerRef.current?.focus();
|
|
134
139
|
};
|
|
135
140
|
|
|
136
|
-
// react-native TextInput font family issue at android
|
|
137
|
-
useEffect(() => {
|
|
138
|
-
innerRef.current?.setNativeProps({
|
|
139
|
-
style: { fontFamily: 'Inter-Regular' },
|
|
140
|
-
});
|
|
141
|
-
}, []);
|
|
142
|
-
|
|
143
141
|
return (
|
|
144
142
|
<OutlinedTextField
|
|
145
143
|
animatedError={animatedError}
|
|
@@ -4,6 +4,10 @@ import { ComponentProps } from '../types';
|
|
|
4
4
|
|
|
5
5
|
type TextFieldKeyboardType = 'default' | 'numeric' | 'email-address';
|
|
6
6
|
|
|
7
|
+
export interface setStyleProp {
|
|
8
|
+
fontFamily: string;
|
|
9
|
+
}
|
|
10
|
+
|
|
7
11
|
export default interface TextFieldProps extends ComponentProps<{
|
|
8
12
|
/**
|
|
9
13
|
* If true, user won't be able to interact with the component.
|