| 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","maxFontSizeMultiplier","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 const { maxFontSizeMultiplier = 1.5 } = rest;\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 maxFontSizeMultiplier={maxFontSizeMultiplier}\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"]} |