@hero-design/rn-work-uikit 1.2.3 → 1.3.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/CHANGELOG.md +15 -0
- package/babel.config.js +6 -0
- package/lib/index.js +46464 -1337
- package/package.json +8 -5
- package/rollup.config.mjs +20 -5
- package/src/__tests__/index-export.spec.ts +64 -0
- package/src/__tests__/index.spec.tsx +0 -19
- package/src/components/DatePicker/__tests__/__snapshots__/index.spec.tsx.snap +1602 -0
- package/src/components/DatePicker/__tests__/index.spec.tsx +56 -0
- package/src/components/DatePicker/index.tsx +12 -0
- package/src/components/Select/__tests__/__snapshots__/index.spec.tsx.snap +1293 -0
- package/src/components/Select/__tests__/index.spec.tsx +43 -0
- package/src/components/Select/index.tsx +23 -0
- package/src/components/TextInput/Group/__tests__/__snapshots__/index.spec.tsx.snap +0 -6
- package/src/components/TextInput/PrefixComponent.tsx +4 -4
- package/src/components/TextInput/StyledTextInput.tsx +6 -3
- package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap +130 -34
- package/src/components/TimePicker/__tests__/index.spec.tsx +34 -0
- package/src/components/TimePicker/index.tsx +12 -0
- package/src/hero-editor.d.ts +8 -0
- package/src/index.ts +4 -1
- package/src/utils/functions.ts +2 -0
- package/stats/1.3.0/rn-work-uikit-stats.html +4842 -0
- package/stats/1.3.1/rn-work-uikit-stats.html +4844 -0
- package/tsconfig.json +9 -3
- package/tsconfig.rollup.json +8 -2
- package/src/__tests__/__snapshots__/index.spec.tsx.snap +0 -172
- package/src/__tests__/theme-export-override.spec.ts +0 -96
- package/stats/1.2.3/rn-work-uikit-stats.html +0 -4842
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Select from '..';
|
|
3
|
+
import renderWithTheme from '../../../../testUtils/renderWithTheme';
|
|
4
|
+
import { noop } from '../../../utils/functions';
|
|
5
|
+
|
|
6
|
+
const options = [
|
|
7
|
+
{ text: 'Monday', value: 'mon' },
|
|
8
|
+
{ text: 'Tuesday', value: 'tue' },
|
|
9
|
+
{ text: 'Wednesday', value: 'wed' },
|
|
10
|
+
{ text: 'Thursday', value: 'thu' },
|
|
11
|
+
{ text: 'Friday', value: 'fri' },
|
|
12
|
+
{ text: 'Saturday', value: 'sat' },
|
|
13
|
+
{ text: 'Sunday', value: 'sun', disabled: true },
|
|
14
|
+
];
|
|
15
|
+
|
|
16
|
+
describe('Select', () => {
|
|
17
|
+
it('renders correctly (snapshot)', () => {
|
|
18
|
+
const { toJSON } = renderWithTheme(
|
|
19
|
+
<Select
|
|
20
|
+
value="mon"
|
|
21
|
+
onConfirm={noop}
|
|
22
|
+
options={options}
|
|
23
|
+
label="Select Label"
|
|
24
|
+
/>
|
|
25
|
+
);
|
|
26
|
+
expect(toJSON()).toMatchSnapshot();
|
|
27
|
+
});
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
describe('MultiSelect', () => {
|
|
31
|
+
it('renders correctly (snapshot)', () => {
|
|
32
|
+
const { toJSON } = renderWithTheme(
|
|
33
|
+
<Select.Multi
|
|
34
|
+
value={['tue', 'wed']}
|
|
35
|
+
onConfirm={noop}
|
|
36
|
+
options={options}
|
|
37
|
+
label="Select Label"
|
|
38
|
+
footerLabel="Confirm"
|
|
39
|
+
/>
|
|
40
|
+
);
|
|
41
|
+
expect(toJSON()).toMatchSnapshot();
|
|
42
|
+
});
|
|
43
|
+
});
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
Select as InternalSelect,
|
|
4
|
+
MultiSelectProps,
|
|
5
|
+
SingleSelectProps,
|
|
6
|
+
SelectOptionType,
|
|
7
|
+
} from '@hero-design/rn';
|
|
8
|
+
import TextInput from '../TextInput';
|
|
9
|
+
|
|
10
|
+
function Select<V, T extends SelectOptionType<V> = SelectOptionType<V>>(
|
|
11
|
+
props: SingleSelectProps<V, T>
|
|
12
|
+
) {
|
|
13
|
+
return <InternalSelect {...props} TextInputComponent={TextInput} />;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
Select.Multi = function <
|
|
17
|
+
V,
|
|
18
|
+
T extends SelectOptionType<V> = SelectOptionType<V>
|
|
19
|
+
>(props: MultiSelectProps<V, T>) {
|
|
20
|
+
return <InternalSelect.Multi {...props} TextInputComponent={TextInput} />;
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
export default Select;
|
|
@@ -91,7 +91,6 @@ exports[`TextInputGroup should render: xxx 1`] = `
|
|
|
91
91
|
{
|
|
92
92
|
"alignItems": "center",
|
|
93
93
|
"backgroundColor": "transparent",
|
|
94
|
-
"flex": 1,
|
|
95
94
|
"flexDirection": "row",
|
|
96
95
|
},
|
|
97
96
|
],
|
|
@@ -174,7 +173,6 @@ exports[`TextInputGroup should render: xxx 1`] = `
|
|
|
174
173
|
"flexDirection": "row",
|
|
175
174
|
"flexGrow": 2,
|
|
176
175
|
"flexShrink": 1,
|
|
177
|
-
"gap": 3.9230769230769234,
|
|
178
176
|
"opacity": 1,
|
|
179
177
|
},
|
|
180
178
|
],
|
|
@@ -345,7 +343,6 @@ exports[`TextInputGroup should render: xxx 1`] = `
|
|
|
345
343
|
{
|
|
346
344
|
"alignItems": "center",
|
|
347
345
|
"backgroundColor": "transparent",
|
|
348
|
-
"flex": 1,
|
|
349
346
|
"flexDirection": "row",
|
|
350
347
|
},
|
|
351
348
|
],
|
|
@@ -457,7 +454,6 @@ exports[`TextInputGroup should render: xxx 1`] = `
|
|
|
457
454
|
"flexDirection": "row",
|
|
458
455
|
"flexGrow": 2,
|
|
459
456
|
"flexShrink": 1,
|
|
460
|
-
"gap": 3.9230769230769234,
|
|
461
457
|
"opacity": 1,
|
|
462
458
|
},
|
|
463
459
|
],
|
|
@@ -708,7 +704,6 @@ exports[`TextInputGroup should render: xxx 1`] = `
|
|
|
708
704
|
{
|
|
709
705
|
"alignItems": "center",
|
|
710
706
|
"backgroundColor": "transparent",
|
|
711
|
-
"flex": 1,
|
|
712
707
|
"flexDirection": "row",
|
|
713
708
|
},
|
|
714
709
|
],
|
|
@@ -791,7 +786,6 @@ exports[`TextInputGroup should render: xxx 1`] = `
|
|
|
791
786
|
"flexDirection": "row",
|
|
792
787
|
"flexGrow": 2,
|
|
793
788
|
"flexShrink": 1,
|
|
794
|
-
"gap": 3.9230769230769234,
|
|
795
789
|
"opacity": 1,
|
|
796
790
|
},
|
|
797
791
|
],
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Icon, IconName } from '@hero-design/rn';
|
|
3
3
|
import { View, ViewProps } from 'react-native';
|
|
4
|
-
import type
|
|
4
|
+
import { StyledPrefixComponentWrapper, type State } from './StyledTextInput';
|
|
5
5
|
|
|
6
6
|
export interface PrefixComponentProps extends ViewProps {
|
|
7
7
|
/** Current input state for styling decisions */
|
|
@@ -46,9 +46,9 @@ const PrefixComponent: React.FC<PrefixComponentProps> = ({
|
|
|
46
46
|
}) => {
|
|
47
47
|
const actualPrefix = typeof prefix === 'string' ? prefix : '';
|
|
48
48
|
|
|
49
|
-
if (
|
|
49
|
+
if (actualPrefix) {
|
|
50
50
|
return (
|
|
51
|
-
<
|
|
51
|
+
<StyledPrefixComponentWrapper testID="input-prefix" {...rest}>
|
|
52
52
|
<Icon
|
|
53
53
|
intent={state === 'disabled' ? 'disabled-text' : 'text'}
|
|
54
54
|
icon={actualPrefix}
|
|
@@ -57,7 +57,7 @@ const PrefixComponent: React.FC<PrefixComponentProps> = ({
|
|
|
57
57
|
accessibilityLabel={`Prefix icon: ${actualPrefix}`}
|
|
58
58
|
accessibilityRole="image"
|
|
59
59
|
/>
|
|
60
|
-
</
|
|
60
|
+
</StyledPrefixComponentWrapper>
|
|
61
61
|
);
|
|
62
62
|
}
|
|
63
63
|
|
|
@@ -42,7 +42,6 @@ const StyledFloatingLabelContainer = styled(Animated.View)<{
|
|
|
42
42
|
themeVariant: Variant;
|
|
43
43
|
}>(({ themeVariant }) => ({
|
|
44
44
|
flexDirection: 'row',
|
|
45
|
-
flex: 1,
|
|
46
45
|
alignItems: themeVariant === 'text' ? 'center' : 'flex-start',
|
|
47
46
|
backgroundColor: 'transparent',
|
|
48
47
|
}));
|
|
@@ -115,16 +114,19 @@ const StyledInputWrapper = styled(View)(({ theme }) => ({
|
|
|
115
114
|
}));
|
|
116
115
|
|
|
117
116
|
const StyledInputRow = styled(Pressable)<{ themeOpacity: number }>(
|
|
118
|
-
({
|
|
117
|
+
({ themeOpacity }) => ({
|
|
119
118
|
flexDirection: 'row',
|
|
120
119
|
alignItems: 'center',
|
|
121
120
|
flexGrow: 2,
|
|
122
121
|
flexShrink: 1,
|
|
123
|
-
gap: theme.__hd__.textInput.space.prefixAndInputContainerGap,
|
|
124
122
|
opacity: themeOpacity,
|
|
125
123
|
})
|
|
126
124
|
);
|
|
127
125
|
|
|
126
|
+
const StyledPrefixComponentWrapper = styled(View)(({ theme }) => ({
|
|
127
|
+
marginRight: theme.__hd__.textInput.space.prefixAndInputContainerGap,
|
|
128
|
+
}));
|
|
129
|
+
|
|
128
130
|
const StyledErrorAndHelpTextContainer = styled(View)(({ theme }) => ({
|
|
129
131
|
paddingHorizontal:
|
|
130
132
|
theme.__hd__.textInput.space.errorAndHelpTextContainerHorizontalPadding,
|
|
@@ -159,4 +161,5 @@ export {
|
|
|
159
161
|
StyledBottomContainer,
|
|
160
162
|
StyledSuffixContainer,
|
|
161
163
|
StyledLabel,
|
|
164
|
+
StyledPrefixComponentWrapper,
|
|
162
165
|
};
|
|
@@ -75,7 +75,6 @@ exports[`TextInput when user applies custom styling should respect user-provided
|
|
|
75
75
|
{
|
|
76
76
|
"alignItems": "center",
|
|
77
77
|
"backgroundColor": "transparent",
|
|
78
|
-
"flex": 1,
|
|
79
78
|
"flexDirection": "row",
|
|
80
79
|
},
|
|
81
80
|
],
|
|
@@ -158,7 +157,6 @@ exports[`TextInput when user applies custom styling should respect user-provided
|
|
|
158
157
|
"flexDirection": "row",
|
|
159
158
|
"flexGrow": 2,
|
|
160
159
|
"flexShrink": 1,
|
|
161
|
-
"gap": 3.9230769230769234,
|
|
162
160
|
"opacity": 1,
|
|
163
161
|
},
|
|
164
162
|
],
|
|
@@ -169,6 +167,16 @@ exports[`TextInput when user applies custom styling should respect user-provided
|
|
|
169
167
|
>
|
|
170
168
|
<View>
|
|
171
169
|
<View
|
|
170
|
+
style={
|
|
171
|
+
[
|
|
172
|
+
[
|
|
173
|
+
{
|
|
174
|
+
"marginRight": 3.9230769230769234,
|
|
175
|
+
},
|
|
176
|
+
],
|
|
177
|
+
undefined,
|
|
178
|
+
]
|
|
179
|
+
}
|
|
172
180
|
testID="input-prefix"
|
|
173
181
|
>
|
|
174
182
|
<Text
|
|
@@ -423,7 +431,6 @@ exports[`TextInput when user chooses textarea variant should provide multiline t
|
|
|
423
431
|
{
|
|
424
432
|
"alignItems": "flex-start",
|
|
425
433
|
"backgroundColor": "transparent",
|
|
426
|
-
"flex": 1,
|
|
427
434
|
"flexDirection": "row",
|
|
428
435
|
},
|
|
429
436
|
],
|
|
@@ -535,7 +542,6 @@ exports[`TextInput when user chooses textarea variant should provide multiline t
|
|
|
535
542
|
"flexDirection": "row",
|
|
536
543
|
"flexGrow": 2,
|
|
537
544
|
"flexShrink": 1,
|
|
538
|
-
"gap": 3.9230769230769234,
|
|
539
545
|
"opacity": 1,
|
|
540
546
|
},
|
|
541
547
|
],
|
|
@@ -704,7 +710,6 @@ exports[`TextInput when user encounters a disabled field should display content
|
|
|
704
710
|
{
|
|
705
711
|
"alignItems": "center",
|
|
706
712
|
"backgroundColor": "transparent",
|
|
707
|
-
"flex": 1,
|
|
708
713
|
"flexDirection": "row",
|
|
709
714
|
},
|
|
710
715
|
],
|
|
@@ -816,7 +821,6 @@ exports[`TextInput when user encounters a disabled field should display content
|
|
|
816
821
|
"flexDirection": "row",
|
|
817
822
|
"flexGrow": 2,
|
|
818
823
|
"flexShrink": 1,
|
|
819
|
-
"gap": 3.9230769230769234,
|
|
820
824
|
"opacity": 1,
|
|
821
825
|
},
|
|
822
826
|
],
|
|
@@ -984,7 +988,6 @@ exports[`TextInput when user encounters a read-only field should display content
|
|
|
984
988
|
{
|
|
985
989
|
"alignItems": "center",
|
|
986
990
|
"backgroundColor": "transparent",
|
|
987
|
-
"flex": 1,
|
|
988
991
|
"flexDirection": "row",
|
|
989
992
|
},
|
|
990
993
|
],
|
|
@@ -1096,7 +1099,6 @@ exports[`TextInput when user encounters a read-only field should display content
|
|
|
1096
1099
|
"flexDirection": "row",
|
|
1097
1100
|
"flexGrow": 2,
|
|
1098
1101
|
"flexShrink": 1,
|
|
1099
|
-
"gap": 3.9230769230769234,
|
|
1100
1102
|
"opacity": 1,
|
|
1101
1103
|
},
|
|
1102
1104
|
],
|
|
@@ -1107,6 +1109,16 @@ exports[`TextInput when user encounters a read-only field should display content
|
|
|
1107
1109
|
>
|
|
1108
1110
|
<View>
|
|
1109
1111
|
<View
|
|
1112
|
+
style={
|
|
1113
|
+
[
|
|
1114
|
+
[
|
|
1115
|
+
{
|
|
1116
|
+
"marginRight": 3.9230769230769234,
|
|
1117
|
+
},
|
|
1118
|
+
],
|
|
1119
|
+
undefined,
|
|
1120
|
+
]
|
|
1121
|
+
}
|
|
1110
1122
|
testID="input-prefix"
|
|
1111
1123
|
>
|
|
1112
1124
|
<Text
|
|
@@ -1338,7 +1350,6 @@ exports[`TextInput when user has entered text should show the input content and
|
|
|
1338
1350
|
{
|
|
1339
1351
|
"alignItems": "center",
|
|
1340
1352
|
"backgroundColor": "transparent",
|
|
1341
|
-
"flex": 1,
|
|
1342
1353
|
"flexDirection": "row",
|
|
1343
1354
|
},
|
|
1344
1355
|
],
|
|
@@ -1450,7 +1461,6 @@ exports[`TextInput when user has entered text should show the input content and
|
|
|
1450
1461
|
"flexDirection": "row",
|
|
1451
1462
|
"flexGrow": 2,
|
|
1452
1463
|
"flexShrink": 1,
|
|
1453
|
-
"gap": 3.9230769230769234,
|
|
1454
1464
|
"opacity": 1,
|
|
1455
1465
|
},
|
|
1456
1466
|
],
|
|
@@ -1461,6 +1471,16 @@ exports[`TextInput when user has entered text should show the input content and
|
|
|
1461
1471
|
>
|
|
1462
1472
|
<View>
|
|
1463
1473
|
<View
|
|
1474
|
+
style={
|
|
1475
|
+
[
|
|
1476
|
+
[
|
|
1477
|
+
{
|
|
1478
|
+
"marginRight": 3.9230769230769234,
|
|
1479
|
+
},
|
|
1480
|
+
],
|
|
1481
|
+
undefined,
|
|
1482
|
+
]
|
|
1483
|
+
}
|
|
1464
1484
|
testID="input-prefix"
|
|
1465
1485
|
>
|
|
1466
1486
|
<Text
|
|
@@ -1692,7 +1712,6 @@ exports[`TextInput when user interacts with placeholder text starting from empty
|
|
|
1692
1712
|
{
|
|
1693
1713
|
"alignItems": "center",
|
|
1694
1714
|
"backgroundColor": "transparent",
|
|
1695
|
-
"flex": 1,
|
|
1696
1715
|
"flexDirection": "row",
|
|
1697
1716
|
},
|
|
1698
1717
|
],
|
|
@@ -1775,7 +1794,6 @@ exports[`TextInput when user interacts with placeholder text starting from empty
|
|
|
1775
1794
|
"flexDirection": "row",
|
|
1776
1795
|
"flexGrow": 2,
|
|
1777
1796
|
"flexShrink": 1,
|
|
1778
|
-
"gap": 3.9230769230769234,
|
|
1779
1797
|
"opacity": 0,
|
|
1780
1798
|
},
|
|
1781
1799
|
],
|
|
@@ -1786,6 +1804,16 @@ exports[`TextInput when user interacts with placeholder text starting from empty
|
|
|
1786
1804
|
>
|
|
1787
1805
|
<View>
|
|
1788
1806
|
<View
|
|
1807
|
+
style={
|
|
1808
|
+
[
|
|
1809
|
+
[
|
|
1810
|
+
{
|
|
1811
|
+
"marginRight": 3.9230769230769234,
|
|
1812
|
+
},
|
|
1813
|
+
],
|
|
1814
|
+
undefined,
|
|
1815
|
+
]
|
|
1816
|
+
}
|
|
1789
1817
|
testID="input-prefix"
|
|
1790
1818
|
>
|
|
1791
1819
|
<Text
|
|
@@ -2003,7 +2031,6 @@ exports[`TextInput when user needs programmatic control should provide ref metho
|
|
|
2003
2031
|
{
|
|
2004
2032
|
"alignItems": "center",
|
|
2005
2033
|
"backgroundColor": "transparent",
|
|
2006
|
-
"flex": 1,
|
|
2007
2034
|
"flexDirection": "row",
|
|
2008
2035
|
},
|
|
2009
2036
|
],
|
|
@@ -2115,7 +2142,6 @@ exports[`TextInput when user needs programmatic control should provide ref metho
|
|
|
2115
2142
|
"flexDirection": "row",
|
|
2116
2143
|
"flexGrow": 2,
|
|
2117
2144
|
"flexShrink": 1,
|
|
2118
|
-
"gap": 3.9230769230769234,
|
|
2119
2145
|
"opacity": 1,
|
|
2120
2146
|
},
|
|
2121
2147
|
],
|
|
@@ -2283,7 +2309,6 @@ exports[`TextInput when user provides default values starting with pre-filled co
|
|
|
2283
2309
|
{
|
|
2284
2310
|
"alignItems": "center",
|
|
2285
2311
|
"backgroundColor": "transparent",
|
|
2286
|
-
"flex": 1,
|
|
2287
2312
|
"flexDirection": "row",
|
|
2288
2313
|
},
|
|
2289
2314
|
],
|
|
@@ -2366,7 +2391,6 @@ exports[`TextInput when user provides default values starting with pre-filled co
|
|
|
2366
2391
|
"flexDirection": "row",
|
|
2367
2392
|
"flexGrow": 2,
|
|
2368
2393
|
"flexShrink": 1,
|
|
2369
|
-
"gap": 3.9230769230769234,
|
|
2370
2394
|
"opacity": 1,
|
|
2371
2395
|
},
|
|
2372
2396
|
],
|
|
@@ -2377,6 +2401,16 @@ exports[`TextInput when user provides default values starting with pre-filled co
|
|
|
2377
2401
|
>
|
|
2378
2402
|
<View>
|
|
2379
2403
|
<View
|
|
2404
|
+
style={
|
|
2405
|
+
[
|
|
2406
|
+
[
|
|
2407
|
+
{
|
|
2408
|
+
"marginRight": 3.9230769230769234,
|
|
2409
|
+
},
|
|
2410
|
+
],
|
|
2411
|
+
undefined,
|
|
2412
|
+
]
|
|
2413
|
+
}
|
|
2380
2414
|
testID="input-prefix"
|
|
2381
2415
|
>
|
|
2382
2416
|
<Text
|
|
@@ -2630,7 +2664,6 @@ exports[`TextInput when user provides default values when both default and contr
|
|
|
2630
2664
|
{
|
|
2631
2665
|
"alignItems": "center",
|
|
2632
2666
|
"backgroundColor": "transparent",
|
|
2633
|
-
"flex": 1,
|
|
2634
2667
|
"flexDirection": "row",
|
|
2635
2668
|
},
|
|
2636
2669
|
],
|
|
@@ -2713,7 +2746,6 @@ exports[`TextInput when user provides default values when both default and contr
|
|
|
2713
2746
|
"flexDirection": "row",
|
|
2714
2747
|
"flexGrow": 2,
|
|
2715
2748
|
"flexShrink": 1,
|
|
2716
|
-
"gap": 3.9230769230769234,
|
|
2717
2749
|
"opacity": 1,
|
|
2718
2750
|
},
|
|
2719
2751
|
],
|
|
@@ -2724,6 +2756,16 @@ exports[`TextInput when user provides default values when both default and contr
|
|
|
2724
2756
|
>
|
|
2725
2757
|
<View>
|
|
2726
2758
|
<View
|
|
2759
|
+
style={
|
|
2760
|
+
[
|
|
2761
|
+
[
|
|
2762
|
+
{
|
|
2763
|
+
"marginRight": 3.9230769230769234,
|
|
2764
|
+
},
|
|
2765
|
+
],
|
|
2766
|
+
undefined,
|
|
2767
|
+
]
|
|
2768
|
+
}
|
|
2727
2769
|
testID="input-prefix"
|
|
2728
2770
|
>
|
|
2729
2771
|
<Text
|
|
@@ -2978,7 +3020,6 @@ exports[`TextInput when user sees a loading state should show loading indicator
|
|
|
2978
3020
|
{
|
|
2979
3021
|
"alignItems": "center",
|
|
2980
3022
|
"backgroundColor": "transparent",
|
|
2981
|
-
"flex": 1,
|
|
2982
3023
|
"flexDirection": "row",
|
|
2983
3024
|
},
|
|
2984
3025
|
],
|
|
@@ -3090,7 +3131,6 @@ exports[`TextInput when user sees a loading state should show loading indicator
|
|
|
3090
3131
|
"flexDirection": "row",
|
|
3091
3132
|
"flexGrow": 2,
|
|
3092
3133
|
"flexShrink": 1,
|
|
3093
|
-
"gap": 3.9230769230769234,
|
|
3094
3134
|
"opacity": 1,
|
|
3095
3135
|
},
|
|
3096
3136
|
],
|
|
@@ -3101,6 +3141,16 @@ exports[`TextInput when user sees a loading state should show loading indicator
|
|
|
3101
3141
|
>
|
|
3102
3142
|
<View>
|
|
3103
3143
|
<View
|
|
3144
|
+
style={
|
|
3145
|
+
[
|
|
3146
|
+
[
|
|
3147
|
+
{
|
|
3148
|
+
"marginRight": 3.9230769230769234,
|
|
3149
|
+
},
|
|
3150
|
+
],
|
|
3151
|
+
undefined,
|
|
3152
|
+
]
|
|
3153
|
+
}
|
|
3104
3154
|
testID="input-prefix"
|
|
3105
3155
|
>
|
|
3106
3156
|
<Text
|
|
@@ -3351,7 +3401,6 @@ exports[`TextInput when user sees a required field should indicate the field is
|
|
|
3351
3401
|
{
|
|
3352
3402
|
"alignItems": "center",
|
|
3353
3403
|
"backgroundColor": "transparent",
|
|
3354
|
-
"flex": 1,
|
|
3355
3404
|
"flexDirection": "row",
|
|
3356
3405
|
},
|
|
3357
3406
|
],
|
|
@@ -3434,7 +3483,6 @@ exports[`TextInput when user sees a required field should indicate the field is
|
|
|
3434
3483
|
"flexDirection": "row",
|
|
3435
3484
|
"flexGrow": 2,
|
|
3436
3485
|
"flexShrink": 1,
|
|
3437
|
-
"gap": 3.9230769230769234,
|
|
3438
3486
|
"opacity": 0,
|
|
3439
3487
|
},
|
|
3440
3488
|
],
|
|
@@ -3445,6 +3493,16 @@ exports[`TextInput when user sees a required field should indicate the field is
|
|
|
3445
3493
|
>
|
|
3446
3494
|
<View>
|
|
3447
3495
|
<View
|
|
3496
|
+
style={
|
|
3497
|
+
[
|
|
3498
|
+
[
|
|
3499
|
+
{
|
|
3500
|
+
"marginRight": 3.9230769230769234,
|
|
3501
|
+
},
|
|
3502
|
+
],
|
|
3503
|
+
undefined,
|
|
3504
|
+
]
|
|
3505
|
+
}
|
|
3448
3506
|
testID="input-prefix"
|
|
3449
3507
|
>
|
|
3450
3508
|
<Text
|
|
@@ -3675,7 +3733,6 @@ exports[`TextInput when user sees a textarea with character count should display
|
|
|
3675
3733
|
{
|
|
3676
3734
|
"alignItems": "flex-start",
|
|
3677
3735
|
"backgroundColor": "transparent",
|
|
3678
|
-
"flex": 1,
|
|
3679
3736
|
"flexDirection": "row",
|
|
3680
3737
|
},
|
|
3681
3738
|
],
|
|
@@ -3787,7 +3844,6 @@ exports[`TextInput when user sees a textarea with character count should display
|
|
|
3787
3844
|
"flexDirection": "row",
|
|
3788
3845
|
"flexGrow": 2,
|
|
3789
3846
|
"flexShrink": 1,
|
|
3790
|
-
"gap": 3.9230769230769234,
|
|
3791
3847
|
"opacity": 1,
|
|
3792
3848
|
},
|
|
3793
3849
|
],
|
|
@@ -3798,6 +3854,16 @@ exports[`TextInput when user sees a textarea with character count should display
|
|
|
3798
3854
|
>
|
|
3799
3855
|
<View>
|
|
3800
3856
|
<View
|
|
3857
|
+
style={
|
|
3858
|
+
[
|
|
3859
|
+
[
|
|
3860
|
+
{
|
|
3861
|
+
"marginRight": 3.9230769230769234,
|
|
3862
|
+
},
|
|
3863
|
+
],
|
|
3864
|
+
undefined,
|
|
3865
|
+
]
|
|
3866
|
+
}
|
|
3801
3867
|
testID="input-prefix"
|
|
3802
3868
|
>
|
|
3803
3869
|
<Text
|
|
@@ -4066,7 +4132,6 @@ exports[`TextInput when user sees a textarea with character count should hide ch
|
|
|
4066
4132
|
{
|
|
4067
4133
|
"alignItems": "flex-start",
|
|
4068
4134
|
"backgroundColor": "transparent",
|
|
4069
|
-
"flex": 1,
|
|
4070
4135
|
"flexDirection": "row",
|
|
4071
4136
|
},
|
|
4072
4137
|
],
|
|
@@ -4178,7 +4243,6 @@ exports[`TextInput when user sees a textarea with character count should hide ch
|
|
|
4178
4243
|
"flexDirection": "row",
|
|
4179
4244
|
"flexGrow": 2,
|
|
4180
4245
|
"flexShrink": 1,
|
|
4181
|
-
"gap": 3.9230769230769234,
|
|
4182
4246
|
"opacity": 1,
|
|
4183
4247
|
},
|
|
4184
4248
|
],
|
|
@@ -4189,6 +4253,16 @@ exports[`TextInput when user sees a textarea with character count should hide ch
|
|
|
4189
4253
|
>
|
|
4190
4254
|
<View>
|
|
4191
4255
|
<View
|
|
4256
|
+
style={
|
|
4257
|
+
[
|
|
4258
|
+
[
|
|
4259
|
+
{
|
|
4260
|
+
"marginRight": 3.9230769230769234,
|
|
4261
|
+
},
|
|
4262
|
+
],
|
|
4263
|
+
undefined,
|
|
4264
|
+
]
|
|
4265
|
+
}
|
|
4192
4266
|
testID="input-prefix"
|
|
4193
4267
|
>
|
|
4194
4268
|
<Text
|
|
@@ -4424,7 +4498,6 @@ exports[`TextInput when user sees an empty input field should display label and
|
|
|
4424
4498
|
{
|
|
4425
4499
|
"alignItems": "center",
|
|
4426
4500
|
"backgroundColor": "transparent",
|
|
4427
|
-
"flex": 1,
|
|
4428
4501
|
"flexDirection": "row",
|
|
4429
4502
|
},
|
|
4430
4503
|
],
|
|
@@ -4536,7 +4609,6 @@ exports[`TextInput when user sees an empty input field should display label and
|
|
|
4536
4609
|
"flexDirection": "row",
|
|
4537
4610
|
"flexGrow": 2,
|
|
4538
4611
|
"flexShrink": 1,
|
|
4539
|
-
"gap": 3.9230769230769234,
|
|
4540
4612
|
"opacity": 0,
|
|
4541
4613
|
},
|
|
4542
4614
|
],
|
|
@@ -4547,6 +4619,16 @@ exports[`TextInput when user sees an empty input field should display label and
|
|
|
4547
4619
|
>
|
|
4548
4620
|
<View>
|
|
4549
4621
|
<View
|
|
4622
|
+
style={
|
|
4623
|
+
[
|
|
4624
|
+
[
|
|
4625
|
+
{
|
|
4626
|
+
"marginRight": 3.9230769230769234,
|
|
4627
|
+
},
|
|
4628
|
+
],
|
|
4629
|
+
undefined,
|
|
4630
|
+
]
|
|
4631
|
+
}
|
|
4550
4632
|
testID="input-prefix"
|
|
4551
4633
|
>
|
|
4552
4634
|
<Text
|
|
@@ -4777,7 +4859,6 @@ exports[`TextInput when user sees an error state should display error message to
|
|
|
4777
4859
|
{
|
|
4778
4860
|
"alignItems": "center",
|
|
4779
4861
|
"backgroundColor": "transparent",
|
|
4780
|
-
"flex": 1,
|
|
4781
4862
|
"flexDirection": "row",
|
|
4782
4863
|
},
|
|
4783
4864
|
],
|
|
@@ -4860,7 +4941,6 @@ exports[`TextInput when user sees an error state should display error message to
|
|
|
4860
4941
|
"flexDirection": "row",
|
|
4861
4942
|
"flexGrow": 2,
|
|
4862
4943
|
"flexShrink": 1,
|
|
4863
|
-
"gap": 3.9230769230769234,
|
|
4864
4944
|
"opacity": 0,
|
|
4865
4945
|
},
|
|
4866
4946
|
],
|
|
@@ -4871,6 +4951,16 @@ exports[`TextInput when user sees an error state should display error message to
|
|
|
4871
4951
|
>
|
|
4872
4952
|
<View>
|
|
4873
4953
|
<View
|
|
4954
|
+
style={
|
|
4955
|
+
[
|
|
4956
|
+
[
|
|
4957
|
+
{
|
|
4958
|
+
"marginRight": 3.9230769230769234,
|
|
4959
|
+
},
|
|
4960
|
+
],
|
|
4961
|
+
undefined,
|
|
4962
|
+
]
|
|
4963
|
+
}
|
|
4874
4964
|
testID="input-prefix"
|
|
4875
4965
|
>
|
|
4876
4966
|
<Text
|
|
@@ -5146,7 +5236,6 @@ exports[`TextInput when user sees helper text should display guidance text to as
|
|
|
5146
5236
|
{
|
|
5147
5237
|
"alignItems": "center",
|
|
5148
5238
|
"backgroundColor": "transparent",
|
|
5149
|
-
"flex": 1,
|
|
5150
5239
|
"flexDirection": "row",
|
|
5151
5240
|
},
|
|
5152
5241
|
],
|
|
@@ -5229,7 +5318,6 @@ exports[`TextInput when user sees helper text should display guidance text to as
|
|
|
5229
5318
|
"flexDirection": "row",
|
|
5230
5319
|
"flexGrow": 2,
|
|
5231
5320
|
"flexShrink": 1,
|
|
5232
|
-
"gap": 3.9230769230769234,
|
|
5233
5321
|
"opacity": 0,
|
|
5234
5322
|
},
|
|
5235
5323
|
],
|
|
@@ -5240,6 +5328,16 @@ exports[`TextInput when user sees helper text should display guidance text to as
|
|
|
5240
5328
|
>
|
|
5241
5329
|
<View>
|
|
5242
5330
|
<View
|
|
5331
|
+
style={
|
|
5332
|
+
[
|
|
5333
|
+
[
|
|
5334
|
+
{
|
|
5335
|
+
"marginRight": 3.9230769230769234,
|
|
5336
|
+
},
|
|
5337
|
+
],
|
|
5338
|
+
undefined,
|
|
5339
|
+
]
|
|
5340
|
+
}
|
|
5243
5341
|
testID="input-prefix"
|
|
5244
5342
|
>
|
|
5245
5343
|
<Text
|
|
@@ -5457,7 +5555,6 @@ exports[`TextInput when user sees input with custom prefix and suffix elements s
|
|
|
5457
5555
|
{
|
|
5458
5556
|
"alignItems": "center",
|
|
5459
5557
|
"backgroundColor": "transparent",
|
|
5460
|
-
"flex": 1,
|
|
5461
5558
|
"flexDirection": "row",
|
|
5462
5559
|
},
|
|
5463
5560
|
],
|
|
@@ -5540,7 +5637,6 @@ exports[`TextInput when user sees input with custom prefix and suffix elements s
|
|
|
5540
5637
|
"flexDirection": "row",
|
|
5541
5638
|
"flexGrow": 2,
|
|
5542
5639
|
"flexShrink": 1,
|
|
5543
|
-
"gap": 3.9230769230769234,
|
|
5544
5640
|
"opacity": 0,
|
|
5545
5641
|
},
|
|
5546
5642
|
],
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Platform } from 'react-native';
|
|
3
|
+
import TimePicker from '..';
|
|
4
|
+
import renderWithTheme from '../../../../testUtils/renderWithTheme';
|
|
5
|
+
|
|
6
|
+
describe('TimePicker', () => {
|
|
7
|
+
it('renders TimePickerIOS when OS is iOS', () => {
|
|
8
|
+
Platform.OS = 'ios';
|
|
9
|
+
const { getByTestId } = renderWithTheme(
|
|
10
|
+
<TimePicker
|
|
11
|
+
label="Start time"
|
|
12
|
+
value={new Date('December 17, 1995 03:24:00')}
|
|
13
|
+
confirmLabel="Confirm"
|
|
14
|
+
onChange={jest.fn()}
|
|
15
|
+
/>
|
|
16
|
+
);
|
|
17
|
+
|
|
18
|
+
expect(getByTestId('timePickerInputIOS')).toBeDefined();
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
it('renders TimePickerAndroid when OS is android', () => {
|
|
22
|
+
Platform.OS = 'android';
|
|
23
|
+
const { getByTestId } = renderWithTheme(
|
|
24
|
+
<TimePicker
|
|
25
|
+
label="Start time"
|
|
26
|
+
value={new Date('December 17, 1995 03:24:00')}
|
|
27
|
+
confirmLabel="Confirm"
|
|
28
|
+
onChange={jest.fn()}
|
|
29
|
+
/>
|
|
30
|
+
);
|
|
31
|
+
|
|
32
|
+
expect(getByTestId('timePickerInputAndroid')).toBeDefined();
|
|
33
|
+
});
|
|
34
|
+
});
|