1 | function _extends() { _extends = Object.assign || 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); }
|
2 |
|
3 | import * as React from 'react';
|
4 | import color from 'color';
|
5 | import { Animated, StyleSheet } from 'react-native';
|
6 | import AnimatedText from './Typography/AnimatedText';
|
7 | import { withTheme } from '../core/theming';
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 |
|
42 |
|
43 |
|
44 | const HelperText = _ref => {
|
45 | let {
|
46 | style,
|
47 | type = 'info',
|
48 | visible = true,
|
49 | theme,
|
50 | onLayout,
|
51 | padding = 'normal',
|
52 | ...rest
|
53 | } = _ref;
|
54 | const {
|
55 | current: shown
|
56 | } = React.useRef(new Animated.Value(visible ? 1 : 0));
|
57 | let {
|
58 | current: textHeight
|
59 | } = React.useRef(0);
|
60 | const {
|
61 | scale
|
62 | } = theme.animation;
|
63 | const {
|
64 | maxFontSizeMultiplier = 1.5
|
65 | } = rest;
|
66 | React.useEffect(() => {
|
67 | if (visible) {
|
68 |
|
69 | Animated.timing(shown, {
|
70 | toValue: 1,
|
71 | duration: 150 * scale,
|
72 | useNativeDriver: true
|
73 | }).start();
|
74 | } else {
|
75 |
|
76 | Animated.timing(shown, {
|
77 | toValue: 0,
|
78 | duration: 180 * scale,
|
79 | useNativeDriver: true
|
80 | }).start();
|
81 | }
|
82 | }, [visible, scale, shown]);
|
83 |
|
84 | const handleTextLayout = e => {
|
85 | onLayout === null || onLayout === void 0 ? void 0 : onLayout(e);
|
86 | textHeight = e.nativeEvent.layout.height;
|
87 | };
|
88 |
|
89 | const {
|
90 | colors,
|
91 | dark
|
92 | } = theme;
|
93 | const textColor = type === 'error' ? colors.error : color(colors.text).alpha(dark ? 0.7 : 0.54).rgb().string();
|
94 | return React.createElement(AnimatedText, _extends({
|
95 | onLayout: handleTextLayout,
|
96 | style: [styles.text, padding !== 'none' ? styles.padding : {}, {
|
97 | color: textColor,
|
98 | opacity: shown,
|
99 | transform: visible && type === 'error' ? [{
|
100 | translateY: shown.interpolate({
|
101 | inputRange: [0, 1],
|
102 | outputRange: [-textHeight / 2, 0]
|
103 | })
|
104 | }] : []
|
105 | }, style],
|
106 | maxFontSizeMultiplier: maxFontSizeMultiplier
|
107 | }, rest), rest.children);
|
108 | };
|
109 |
|
110 | const styles = StyleSheet.create({
|
111 | text: {
|
112 | fontSize: 12,
|
113 | paddingVertical: 4
|
114 | },
|
115 | padding: {
|
116 | paddingHorizontal: 12
|
117 | }
|
118 | });
|
119 | export default withTheme(HelperText);
|
120 |
|
\ | No newline at end of file |