@hero-design/rn 8.44.0 → 8.44.1
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/.turbo/turbo-build.log +2 -2
- package/CHANGELOG.md +6 -0
- package/es/index.js +154 -96
- package/lib/index.js +154 -96
- package/package.json +1 -1
- package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.spec.tsx.snap +102 -57
- package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap +34 -19
- package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap +34 -19
- package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap +34 -19
- package/src/components/RichTextEditor/RichTextEditor.tsx +76 -38
- package/src/components/RichTextEditor/__tests__/__snapshots__/RichTextEditor.spec.tsx.snap +126 -102
- package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap +235 -146
- package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap +201 -127
- package/src/components/TextInput/StyledTextInput.tsx +8 -31
- package/src/components/TextInput/__tests__/StyledTextInput.spec.tsx +0 -44
- package/src/components/TextInput/__tests__/__snapshots__/StyledTextInput.spec.tsx.snap +21 -638
- package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap +1126 -833
- package/src/components/TextInput/__tests__/index.spec.tsx +2 -2
- package/src/components/TextInput/index.tsx +113 -57
- package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap +68 -38
- package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap +68 -38
- package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +2 -2
- package/src/theme/components/textInput.ts +2 -2
- package/types/components/TextInput/StyledTextInput.d.ts +4 -24
- package/types/components/TextInput/index.d.ts +1 -0
|
@@ -432,10 +432,10 @@ describe('TextInput', () => {
|
|
|
432
432
|
expect(wrapper.getByTestId('text-input-border')).toHaveStyle({
|
|
433
433
|
backgroundColor: theme.colors.neutralGlobalSurface,
|
|
434
434
|
});
|
|
435
|
-
expect(wrapper.getByTestId('label
|
|
435
|
+
expect(wrapper.getByTestId('input-label')).toHaveStyle({
|
|
436
436
|
backgroundColor: theme.colors.neutralGlobalSurface,
|
|
437
437
|
});
|
|
438
|
-
expect(wrapper.
|
|
438
|
+
expect(wrapper.getByTestId('input-label-asterisk')).toHaveStyle({
|
|
439
439
|
backgroundColor: theme.colors.neutralGlobalSurface,
|
|
440
440
|
});
|
|
441
441
|
});
|
|
@@ -1,17 +1,27 @@
|
|
|
1
|
-
import React, {
|
|
2
|
-
|
|
1
|
+
import React, {
|
|
2
|
+
useMemo,
|
|
3
|
+
forwardRef,
|
|
4
|
+
useRef,
|
|
5
|
+
useCallback,
|
|
6
|
+
useEffect,
|
|
7
|
+
} from 'react';
|
|
8
|
+
import {
|
|
9
|
+
StyleSheet,
|
|
10
|
+
TextInput as RNTextInput,
|
|
11
|
+
Animated,
|
|
12
|
+
Easing,
|
|
13
|
+
View,
|
|
14
|
+
} from 'react-native';
|
|
3
15
|
import type {
|
|
4
16
|
TextInputProps as NativeTextInputProps,
|
|
5
17
|
StyleProp,
|
|
6
18
|
ViewStyle,
|
|
7
19
|
TextStyle,
|
|
20
|
+
LayoutChangeEvent,
|
|
8
21
|
} from 'react-native';
|
|
9
22
|
import {
|
|
10
23
|
StyledTextInputContainer,
|
|
11
|
-
StyledLabel,
|
|
12
|
-
StyledLabelContainer,
|
|
13
24
|
StyledLabelInsideTextInput,
|
|
14
|
-
StyledAsteriskLabel,
|
|
15
25
|
StyledError,
|
|
16
26
|
StyledTextInput,
|
|
17
27
|
StyledContainer,
|
|
@@ -149,6 +159,8 @@ export const getState = ({
|
|
|
149
159
|
// https://github.com/callstack/react-native-paper/pull/3331
|
|
150
160
|
const EMPTY_PLACEHOLDER_VALUE = ' ';
|
|
151
161
|
|
|
162
|
+
export const LABEL_ANIMATION_DURATION = 150;
|
|
163
|
+
|
|
152
164
|
const TextInput = forwardRef<TextInputHandles, TextInputProps>(
|
|
153
165
|
(
|
|
154
166
|
{
|
|
@@ -180,6 +192,9 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
|
|
|
180
192
|
const isEmptyValue = displayText.length === 0;
|
|
181
193
|
const actualSuffix = loading ? 'loading' : suffix;
|
|
182
194
|
|
|
195
|
+
const [inputHeight, setInputHeight] = React.useState<number>(0);
|
|
196
|
+
const [prefixWidth, setPrefixWidth] = React.useState<number>(0);
|
|
197
|
+
|
|
183
198
|
const [isFocused, setIsFocused] = React.useState(false);
|
|
184
199
|
|
|
185
200
|
const state = getState({
|
|
@@ -195,6 +210,27 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
|
|
|
195
210
|
|
|
196
211
|
const theme = useTheme();
|
|
197
212
|
|
|
213
|
+
const focusAnimation = useRef(new Animated.Value(0)).current;
|
|
214
|
+
|
|
215
|
+
useEffect(() => {
|
|
216
|
+
Animated.timing(focusAnimation, {
|
|
217
|
+
toValue: isFocused || !isEmptyValue ? 1 : 0,
|
|
218
|
+
duration: LABEL_ANIMATION_DURATION,
|
|
219
|
+
easing: Easing.bezier(0.4, 0, 0.2, 1),
|
|
220
|
+
useNativeDriver: true,
|
|
221
|
+
}).start();
|
|
222
|
+
}, [focusAnimation, isEmptyValue, isFocused]);
|
|
223
|
+
|
|
224
|
+
const onLayout = useCallback((event: LayoutChangeEvent) => {
|
|
225
|
+
const { height } = event.nativeEvent.layout;
|
|
226
|
+
setInputHeight(height);
|
|
227
|
+
}, []);
|
|
228
|
+
|
|
229
|
+
const onPrefixLayout = useCallback((event: LayoutChangeEvent) => {
|
|
230
|
+
const { width } = event.nativeEvent.layout;
|
|
231
|
+
setPrefixWidth(width);
|
|
232
|
+
}, []);
|
|
233
|
+
|
|
198
234
|
const innerTextInput = React.useRef<RNTextInput | undefined | null>();
|
|
199
235
|
React.useImperativeHandle(
|
|
200
236
|
ref,
|
|
@@ -293,66 +329,86 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
|
|
|
293
329
|
}
|
|
294
330
|
testID={testID}
|
|
295
331
|
>
|
|
296
|
-
<StyledTextInputContainer>
|
|
332
|
+
<StyledTextInputContainer onLayout={onLayout}>
|
|
297
333
|
<StyledBorderBackDrop
|
|
298
334
|
themeFocused={isFocused}
|
|
299
335
|
themeState={state}
|
|
300
336
|
testID="text-input-border"
|
|
301
337
|
style={[{ backgroundColor }, borderStyle]}
|
|
302
338
|
/>
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
+
|
|
340
|
+
<View onLayout={onPrefixLayout}>
|
|
341
|
+
{typeof prefix === 'string' ? (
|
|
342
|
+
<Icon
|
|
343
|
+
intent={state === 'disabled' ? 'disabled-text' : 'text'}
|
|
344
|
+
testID="input-prefix"
|
|
345
|
+
icon={prefix}
|
|
346
|
+
size="xsmall"
|
|
347
|
+
/>
|
|
348
|
+
) : (
|
|
349
|
+
prefix
|
|
350
|
+
)}
|
|
351
|
+
</View>
|
|
352
|
+
<StyledLabelContainerInsideTextInput
|
|
353
|
+
themeVariant={variant}
|
|
354
|
+
pointerEvents="none"
|
|
355
|
+
style={[
|
|
356
|
+
{
|
|
357
|
+
position: 'absolute',
|
|
358
|
+
},
|
|
359
|
+
{
|
|
360
|
+
transform: [
|
|
361
|
+
{
|
|
362
|
+
translateY: focusAnimation.interpolate({
|
|
363
|
+
inputRange: [0, 1],
|
|
364
|
+
outputRange: [
|
|
365
|
+
variant !== 'textarea'
|
|
366
|
+
? inputHeight / 2
|
|
367
|
+
: theme.space.large,
|
|
368
|
+
0,
|
|
369
|
+
],
|
|
370
|
+
}),
|
|
371
|
+
},
|
|
372
|
+
{
|
|
373
|
+
translateX: focusAnimation.interpolate({
|
|
374
|
+
inputRange: [0, 1],
|
|
375
|
+
outputRange: [
|
|
376
|
+
prefix ? prefixWidth * 4 : theme.space.xxxlarge,
|
|
377
|
+
0,
|
|
378
|
+
],
|
|
379
|
+
}),
|
|
380
|
+
},
|
|
381
|
+
{
|
|
382
|
+
scale: focusAnimation.interpolate({
|
|
383
|
+
inputRange: [0, 1],
|
|
384
|
+
outputRange: [1, 0.75],
|
|
385
|
+
}),
|
|
386
|
+
},
|
|
387
|
+
],
|
|
388
|
+
},
|
|
389
|
+
]}
|
|
390
|
+
>
|
|
391
|
+
{required && (
|
|
392
|
+
<StyledAsteriskLabelInsideTextInput
|
|
393
|
+
style={{ backgroundColor }}
|
|
394
|
+
themeState={state}
|
|
395
|
+
testID="input-label-asterisk"
|
|
339
396
|
>
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
*
|
|
343
|
-
</StyledAsteriskLabelInsideTextInput>
|
|
344
|
-
)}
|
|
345
|
-
{!!label && (
|
|
346
|
-
<StyledLabelInsideTextInput
|
|
347
|
-
nativeID={accessibilityLabelledBy}
|
|
348
|
-
testID="input-label"
|
|
349
|
-
themeState={state}
|
|
350
|
-
>
|
|
351
|
-
{label}
|
|
352
|
-
</StyledLabelInsideTextInput>
|
|
353
|
-
)}
|
|
354
|
-
</StyledLabelContainerInsideTextInput>
|
|
397
|
+
*
|
|
398
|
+
</StyledAsteriskLabelInsideTextInput>
|
|
355
399
|
)}
|
|
400
|
+
{!!label && (
|
|
401
|
+
<StyledLabelInsideTextInput
|
|
402
|
+
style={{ backgroundColor }}
|
|
403
|
+
nativeID={accessibilityLabelledBy}
|
|
404
|
+
testID="input-label"
|
|
405
|
+
themeState={state}
|
|
406
|
+
>
|
|
407
|
+
{label}
|
|
408
|
+
</StyledLabelInsideTextInput>
|
|
409
|
+
)}
|
|
410
|
+
</StyledLabelContainerInsideTextInput>
|
|
411
|
+
<StyledTextInputAndLabelContainer>
|
|
356
412
|
{renderInputValue ? (
|
|
357
413
|
renderInputValue(nativeInputProps)
|
|
358
414
|
) : (
|
|
@@ -59,6 +59,7 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
|
|
|
59
59
|
}
|
|
60
60
|
>
|
|
61
61
|
<View
|
|
62
|
+
onLayout={[Function]}
|
|
62
63
|
style={
|
|
63
64
|
[
|
|
64
65
|
{
|
|
@@ -98,24 +99,34 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
|
|
|
98
99
|
themeState="filled"
|
|
99
100
|
/>
|
|
100
101
|
<View
|
|
102
|
+
onLayout={[Function]}
|
|
103
|
+
/>
|
|
104
|
+
<View
|
|
105
|
+
collapsable={false}
|
|
101
106
|
pointerEvents="none"
|
|
102
107
|
style={
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
108
|
+
{
|
|
109
|
+
"alignItems": "center",
|
|
110
|
+
"flexDirection": "row",
|
|
111
|
+
"left": -32,
|
|
112
|
+
"position": "absolute",
|
|
113
|
+
"right": 0,
|
|
114
|
+
"top": -10.666666666666666,
|
|
115
|
+
"transform": [
|
|
116
|
+
{
|
|
117
|
+
"translateY": 0,
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
"translateX": 48,
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
"scale": 1,
|
|
124
|
+
},
|
|
125
|
+
],
|
|
126
|
+
"zIndex": 1,
|
|
127
|
+
}
|
|
117
128
|
}
|
|
118
|
-
|
|
129
|
+
themeVariant="text"
|
|
119
130
|
>
|
|
120
131
|
<Text
|
|
121
132
|
allowFontScaling={false}
|
|
@@ -124,14 +135,17 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
|
|
|
124
135
|
{
|
|
125
136
|
"color": "#001f23",
|
|
126
137
|
"fontFamily": "BeVietnamPro-Regular",
|
|
127
|
-
"fontSize":
|
|
138
|
+
"fontSize": 16,
|
|
128
139
|
"letterSpacing": 0.48,
|
|
129
|
-
"lineHeight":
|
|
140
|
+
"lineHeight": 24,
|
|
130
141
|
},
|
|
131
142
|
[
|
|
132
143
|
{
|
|
144
|
+
"alignContent": "center",
|
|
145
|
+
"alignItems": "center",
|
|
133
146
|
"color": "#001f23",
|
|
134
|
-
"
|
|
147
|
+
"marginTop": -2,
|
|
148
|
+
"textAlignVertical": "center",
|
|
135
149
|
},
|
|
136
150
|
{
|
|
137
151
|
"backgroundColor": "#ffffff",
|
|
@@ -140,9 +154,10 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
|
|
|
140
154
|
]
|
|
141
155
|
}
|
|
142
156
|
testID="input-label"
|
|
143
|
-
themeFontWeight="regular"
|
|
144
157
|
themeIntent="body"
|
|
145
158
|
themeState="filled"
|
|
159
|
+
themeTypeface="neutral"
|
|
160
|
+
themeVariant="regular"
|
|
146
161
|
>
|
|
147
162
|
Break time
|
|
148
163
|
</Text>
|
|
@@ -327,6 +342,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
|
|
|
327
342
|
}
|
|
328
343
|
>
|
|
329
344
|
<View
|
|
345
|
+
onLayout={[Function]}
|
|
330
346
|
style={
|
|
331
347
|
[
|
|
332
348
|
{
|
|
@@ -366,24 +382,34 @@ exports[`TimePickerAndroid renders correctly 1`] = `
|
|
|
366
382
|
themeState="filled"
|
|
367
383
|
/>
|
|
368
384
|
<View
|
|
385
|
+
onLayout={[Function]}
|
|
386
|
+
/>
|
|
387
|
+
<View
|
|
388
|
+
collapsable={false}
|
|
369
389
|
pointerEvents="none"
|
|
370
390
|
style={
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
391
|
+
{
|
|
392
|
+
"alignItems": "center",
|
|
393
|
+
"flexDirection": "row",
|
|
394
|
+
"left": -32,
|
|
395
|
+
"position": "absolute",
|
|
396
|
+
"right": 0,
|
|
397
|
+
"top": -10.666666666666666,
|
|
398
|
+
"transform": [
|
|
399
|
+
{
|
|
400
|
+
"translateY": 0,
|
|
401
|
+
},
|
|
402
|
+
{
|
|
403
|
+
"translateX": 48,
|
|
404
|
+
},
|
|
405
|
+
{
|
|
406
|
+
"scale": 1,
|
|
407
|
+
},
|
|
408
|
+
],
|
|
409
|
+
"zIndex": 1,
|
|
410
|
+
}
|
|
385
411
|
}
|
|
386
|
-
|
|
412
|
+
themeVariant="text"
|
|
387
413
|
>
|
|
388
414
|
<Text
|
|
389
415
|
allowFontScaling={false}
|
|
@@ -392,14 +418,17 @@ exports[`TimePickerAndroid renders correctly 1`] = `
|
|
|
392
418
|
{
|
|
393
419
|
"color": "#001f23",
|
|
394
420
|
"fontFamily": "BeVietnamPro-Regular",
|
|
395
|
-
"fontSize":
|
|
421
|
+
"fontSize": 16,
|
|
396
422
|
"letterSpacing": 0.48,
|
|
397
|
-
"lineHeight":
|
|
423
|
+
"lineHeight": 24,
|
|
398
424
|
},
|
|
399
425
|
[
|
|
400
426
|
{
|
|
427
|
+
"alignContent": "center",
|
|
428
|
+
"alignItems": "center",
|
|
401
429
|
"color": "#001f23",
|
|
402
|
-
"
|
|
430
|
+
"marginTop": -2,
|
|
431
|
+
"textAlignVertical": "center",
|
|
403
432
|
},
|
|
404
433
|
{
|
|
405
434
|
"backgroundColor": "#ffffff",
|
|
@@ -408,9 +437,10 @@ exports[`TimePickerAndroid renders correctly 1`] = `
|
|
|
408
437
|
]
|
|
409
438
|
}
|
|
410
439
|
testID="input-label"
|
|
411
|
-
themeFontWeight="regular"
|
|
412
440
|
themeIntent="body"
|
|
413
441
|
themeState="filled"
|
|
442
|
+
themeTypeface="neutral"
|
|
443
|
+
themeVariant="regular"
|
|
414
444
|
>
|
|
415
445
|
Break time
|
|
416
446
|
</Text>
|
|
@@ -59,6 +59,7 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
|
|
|
59
59
|
}
|
|
60
60
|
>
|
|
61
61
|
<View
|
|
62
|
+
onLayout={[Function]}
|
|
62
63
|
style={
|
|
63
64
|
[
|
|
64
65
|
{
|
|
@@ -98,24 +99,34 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
|
|
|
98
99
|
themeState="filled"
|
|
99
100
|
/>
|
|
100
101
|
<View
|
|
102
|
+
onLayout={[Function]}
|
|
103
|
+
/>
|
|
104
|
+
<View
|
|
105
|
+
collapsable={false}
|
|
101
106
|
pointerEvents="none"
|
|
102
107
|
style={
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
108
|
+
{
|
|
109
|
+
"alignItems": "center",
|
|
110
|
+
"flexDirection": "row",
|
|
111
|
+
"left": -32,
|
|
112
|
+
"position": "absolute",
|
|
113
|
+
"right": 0,
|
|
114
|
+
"top": -10.666666666666666,
|
|
115
|
+
"transform": [
|
|
116
|
+
{
|
|
117
|
+
"translateY": 0,
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
"translateX": 48,
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
"scale": 1,
|
|
124
|
+
},
|
|
125
|
+
],
|
|
126
|
+
"zIndex": 1,
|
|
127
|
+
}
|
|
117
128
|
}
|
|
118
|
-
|
|
129
|
+
themeVariant="text"
|
|
119
130
|
>
|
|
120
131
|
<Text
|
|
121
132
|
allowFontScaling={false}
|
|
@@ -124,14 +135,17 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
|
|
|
124
135
|
{
|
|
125
136
|
"color": "#001f23",
|
|
126
137
|
"fontFamily": "BeVietnamPro-Regular",
|
|
127
|
-
"fontSize":
|
|
138
|
+
"fontSize": 16,
|
|
128
139
|
"letterSpacing": 0.48,
|
|
129
|
-
"lineHeight":
|
|
140
|
+
"lineHeight": 24,
|
|
130
141
|
},
|
|
131
142
|
[
|
|
132
143
|
{
|
|
144
|
+
"alignContent": "center",
|
|
145
|
+
"alignItems": "center",
|
|
133
146
|
"color": "#001f23",
|
|
134
|
-
"
|
|
147
|
+
"marginTop": -2,
|
|
148
|
+
"textAlignVertical": "center",
|
|
135
149
|
},
|
|
136
150
|
{
|
|
137
151
|
"backgroundColor": "#ffffff",
|
|
@@ -140,9 +154,10 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
|
|
|
140
154
|
]
|
|
141
155
|
}
|
|
142
156
|
testID="input-label"
|
|
143
|
-
themeFontWeight="regular"
|
|
144
157
|
themeIntent="body"
|
|
145
158
|
themeState="filled"
|
|
159
|
+
themeTypeface="neutral"
|
|
160
|
+
themeVariant="regular"
|
|
146
161
|
>
|
|
147
162
|
Break time
|
|
148
163
|
</Text>
|
|
@@ -327,6 +342,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
|
|
|
327
342
|
}
|
|
328
343
|
>
|
|
329
344
|
<View
|
|
345
|
+
onLayout={[Function]}
|
|
330
346
|
style={
|
|
331
347
|
[
|
|
332
348
|
{
|
|
@@ -366,24 +382,34 @@ exports[`TimePickerIOS renders correctly 1`] = `
|
|
|
366
382
|
themeState="filled"
|
|
367
383
|
/>
|
|
368
384
|
<View
|
|
385
|
+
onLayout={[Function]}
|
|
386
|
+
/>
|
|
387
|
+
<View
|
|
388
|
+
collapsable={false}
|
|
369
389
|
pointerEvents="none"
|
|
370
390
|
style={
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
391
|
+
{
|
|
392
|
+
"alignItems": "center",
|
|
393
|
+
"flexDirection": "row",
|
|
394
|
+
"left": -32,
|
|
395
|
+
"position": "absolute",
|
|
396
|
+
"right": 0,
|
|
397
|
+
"top": -10.666666666666666,
|
|
398
|
+
"transform": [
|
|
399
|
+
{
|
|
400
|
+
"translateY": 0,
|
|
401
|
+
},
|
|
402
|
+
{
|
|
403
|
+
"translateX": 48,
|
|
404
|
+
},
|
|
405
|
+
{
|
|
406
|
+
"scale": 1,
|
|
407
|
+
},
|
|
408
|
+
],
|
|
409
|
+
"zIndex": 1,
|
|
410
|
+
}
|
|
385
411
|
}
|
|
386
|
-
|
|
412
|
+
themeVariant="text"
|
|
387
413
|
>
|
|
388
414
|
<Text
|
|
389
415
|
allowFontScaling={false}
|
|
@@ -392,14 +418,17 @@ exports[`TimePickerIOS renders correctly 1`] = `
|
|
|
392
418
|
{
|
|
393
419
|
"color": "#001f23",
|
|
394
420
|
"fontFamily": "BeVietnamPro-Regular",
|
|
395
|
-
"fontSize":
|
|
421
|
+
"fontSize": 16,
|
|
396
422
|
"letterSpacing": 0.48,
|
|
397
|
-
"lineHeight":
|
|
423
|
+
"lineHeight": 24,
|
|
398
424
|
},
|
|
399
425
|
[
|
|
400
426
|
{
|
|
427
|
+
"alignContent": "center",
|
|
428
|
+
"alignItems": "center",
|
|
401
429
|
"color": "#001f23",
|
|
402
|
-
"
|
|
430
|
+
"marginTop": -2,
|
|
431
|
+
"textAlignVertical": "center",
|
|
403
432
|
},
|
|
404
433
|
{
|
|
405
434
|
"backgroundColor": "#ffffff",
|
|
@@ -408,9 +437,10 @@ exports[`TimePickerIOS renders correctly 1`] = `
|
|
|
408
437
|
]
|
|
409
438
|
}
|
|
410
439
|
testID="input-label"
|
|
411
|
-
themeFontWeight="regular"
|
|
412
440
|
themeIntent="body"
|
|
413
441
|
themeState="filled"
|
|
442
|
+
themeTypeface="neutral"
|
|
443
|
+
themeVariant="regular"
|
|
414
444
|
>
|
|
415
445
|
Break time
|
|
416
446
|
</Text>
|
|
@@ -1068,9 +1068,9 @@ exports[`theme returns correct theme object 1`] = `
|
|
|
1068
1068
|
"inputHorizontalMargin": 8,
|
|
1069
1069
|
"labelHorizontalPadding": 4,
|
|
1070
1070
|
"labelInsideTextInputMarginTop": -2,
|
|
1071
|
-
"labelLeft":
|
|
1071
|
+
"labelLeft": 32,
|
|
1072
1072
|
"labelPaddingBottom": 8,
|
|
1073
|
-
"labelTop":
|
|
1073
|
+
"labelTop": 10.666666666666666,
|
|
1074
1074
|
"maxLengthLabelMarginLeft": 4,
|
|
1075
1075
|
},
|
|
1076
1076
|
},
|
|
@@ -45,8 +45,8 @@ const getTextInputTheme = (theme: GlobalTheme) => {
|
|
|
45
45
|
|
|
46
46
|
const space = {
|
|
47
47
|
containerPadding: theme.space.medium,
|
|
48
|
-
labelLeft: theme.space.
|
|
49
|
-
labelTop: theme.
|
|
48
|
+
labelLeft: theme.space.xlarge,
|
|
49
|
+
labelTop: theme.space.xlarge / 3,
|
|
50
50
|
labelPaddingBottom: theme.space.small,
|
|
51
51
|
labelHorizontalPadding: theme.space.xsmall,
|
|
52
52
|
inputHorizontalMargin: theme.space.small,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { TextInput, View } from 'react-native';
|
|
2
|
+
import { TextInput, View, Animated } from 'react-native';
|
|
3
3
|
export type State = 'default' | 'filled' | 'disabled' | 'readonly' | 'error';
|
|
4
4
|
type Variant = 'text' | 'textarea';
|
|
5
5
|
declare const StyledContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
|
|
@@ -8,32 +8,12 @@ declare const StyledContainer: import("@emotion/native").StyledComponent<import(
|
|
|
8
8
|
}, {}, {
|
|
9
9
|
ref?: import("react").Ref<View> | undefined;
|
|
10
10
|
}>;
|
|
11
|
-
declare const
|
|
12
|
-
theme?: import("@emotion/react").Theme | undefined;
|
|
13
|
-
as?: import("react").ElementType<any> | undefined;
|
|
14
|
-
}, {}, {
|
|
15
|
-
ref?: import("react").Ref<View> | undefined;
|
|
16
|
-
}>;
|
|
17
|
-
declare const StyledLabel: import("@emotion/native").StyledComponent<import("../Typography/Caption").CaptionProps & {
|
|
18
|
-
theme?: import("@emotion/react").Theme | undefined;
|
|
19
|
-
as?: import("react").ElementType<any> | undefined;
|
|
20
|
-
} & {
|
|
21
|
-
themeState: State;
|
|
22
|
-
}, {}, {}>;
|
|
23
|
-
declare const StyledAsteriskLabel: import("@emotion/native").StyledComponent<import("../Typography/Caption").CaptionProps & {
|
|
24
|
-
theme?: import("@emotion/react").Theme | undefined;
|
|
25
|
-
as?: import("react").ElementType<any> | undefined;
|
|
26
|
-
} & {
|
|
27
|
-
themeState: State;
|
|
28
|
-
}, {}, {}>;
|
|
29
|
-
declare const StyledLabelContainerInsideTextInput: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
|
|
11
|
+
declare const StyledLabelContainerInsideTextInput: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<View>> & {
|
|
30
12
|
theme?: import("@emotion/react").Theme | undefined;
|
|
31
13
|
as?: import("react").ElementType<any> | undefined;
|
|
32
14
|
} & {
|
|
33
15
|
themeVariant: Variant;
|
|
34
|
-
}, {}, {
|
|
35
|
-
ref?: import("react").Ref<View> | undefined;
|
|
36
|
-
}>;
|
|
16
|
+
}, {}, {}>;
|
|
37
17
|
declare const StyledLabelInsideTextInput: import("@emotion/native").StyledComponent<import("../Typography/Body").BodyProps & {
|
|
38
18
|
theme?: import("@emotion/react").Theme | undefined;
|
|
39
19
|
as?: import("react").ElementType<any> | undefined;
|
|
@@ -104,4 +84,4 @@ declare const StyledErrorAndMaxLengthContainer: import("@emotion/native").Styled
|
|
|
104
84
|
}, {}, {
|
|
105
85
|
ref?: import("react").Ref<View> | undefined;
|
|
106
86
|
}>;
|
|
107
|
-
export { StyledTextInputContainer,
|
|
87
|
+
export { StyledTextInputContainer, StyledAsteriskLabelInsideTextInput, StyledTextInput, StyledError, StyledMaxLengthMessage, StyledLabelInsideTextInput, StyledContainer, StyledErrorContainer, StyledHelperText, StyledTextInputAndLabelContainer, StyledLabelContainerInsideTextInput, StyledErrorAndHelpTextContainer, StyledBorderBackDrop, StyledErrorAndMaxLengthContainer, };
|