| 1 | {"version":3,"sources":["HelperText.tsx"],"names":["React","color","Animated","StyleSheet","AnimatedText","withTheme","HelperText","style","type","visible","theme","onLayout","padding","rest","current","shown","useRef","Value","textHeight","scale","animation","useEffect","timing","toValue","duration","useNativeDriver","start","handleTextLayout","e","nativeEvent","layout","height","colors","dark","textColor","error","text","alpha","rgb","string","styles","opacity","transform","translateY","interpolate","inputRange","outputRange","children","create","fontSize","paddingVertical","paddingHorizontal"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport color from 'color';\nimport {\n Animated,\n StyleSheet,\n StyleProp,\n TextStyle,\n LayoutChangeEvent,\n} from 'react-native';\nimport AnimatedText from './Typography/AnimatedText';\nimport { withTheme } from '../core/theming';\nimport type { $Omit } from '../types';\n\ntype Props = $Omit<\n $Omit<React.ComponentPropsWithRef<typeof AnimatedText>, 'padding'>,\n 'type'\n> & {\n /**\n * Type of the helper text.\n */\n type: 'error' | 'info';\n /**\n * Whether to display the helper text.\n */\n visible?: boolean;\n /**\n * Whether to apply padding to the helper text.\n */\n padding?: 'none' | 'normal';\n /**\n * Text content of the HelperText.\n */\n children: React.ReactNode;\n style?: StyleProp<TextStyle>;\n /**\n * @optional\n */\n theme: ReactNativePaper.Theme;\n /**\n * TestID used for testing purposes\n */\n testID?: string;\n};\n\n/**\n * Helper text is used in conjuction with input elements to provide additional hints for the user.\n *\n * <div class=\"screenshots\">\n * <img class=\"medium\" src=\"screenshots/helper-text.gif\" />\n * </div>\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { View } from 'react-native';\n * import { HelperText, TextInput } from 'react-native-paper';\n *\n * const MyComponent = () => {\n * const [text, setText] = React.useState('');\n *\n * const onChangeText = text => setText(text);\n *\n * const hasErrors = () => {\n * return !text.includes('@');\n * };\n *\n * return (\n * <View>\n * <TextInput label=\"Email\" value={text} onChangeText={onChangeText} />\n * <HelperText type=\"error\" visible={hasErrors()}>\n * Email address is invalid!\n * </HelperText>\n * </View>\n * );\n * };\n *\n * export default MyComponent;\n * ```\n */\nconst HelperText = ({\n style,\n type = 'info',\n visible = true,\n theme,\n onLayout,\n padding = 'normal',\n ...rest\n}: Props) => {\n const { current: shown } = React.useRef<Animated.Value>(\n new Animated.Value(visible ? 1 : 0)\n );\n\n let { current: textHeight } = React.useRef<number>(0);\n\n const { scale } = theme.animation;\n\n React.useEffect(() => {\n if (visible) {\n // show text\n Animated.timing(shown, {\n toValue: 1,\n duration: 150 * scale,\n useNativeDriver: true,\n }).start();\n } else {\n // hide text\n Animated.timing(shown, {\n toValue: 0,\n duration: 180 * scale,\n useNativeDriver: true,\n }).start();\n }\n }, [visible, scale, shown]);\n\n const handleTextLayout = (e: LayoutChangeEvent) => {\n onLayout?.(e);\n textHeight = e.nativeEvent.layout.height;\n };\n\n const { colors, dark } = theme;\n\n const textColor =\n type === 'error'\n ? colors.error\n : color(colors.text)\n .alpha(dark ? 0.7 : 0.54)\n .rgb()\n .string();\n\n return (\n <AnimatedText\n onLayout={handleTextLayout}\n style={[\n styles.text,\n padding !== 'none' ? styles.padding : {},\n {\n color: textColor,\n opacity: shown,\n transform:\n visible && type === 'error'\n ? [\n {\n translateY: shown.interpolate({\n inputRange: [0, 1],\n outputRange: [-textHeight / 2, 0],\n }),\n },\n ]\n : [],\n },\n style,\n ]}\n {...rest}\n >\n {rest.children}\n </AnimatedText>\n );\n};\n\nconst styles = StyleSheet.create({\n text: {\n fontSize: 12,\n paddingVertical: 4,\n },\n padding: {\n paddingHorizontal: 12,\n },\n});\n\nexport default withTheme(HelperText);\n"]} |