@hero-design/rn 7.22.1 → 7.22.2
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/es/index.js +42 -46
- package/lib/index.js +42 -46
- package/package.json +4 -4
- package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap +4 -18
- package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap +4 -18
- package/src/components/List/StyledBasicListItem.tsx +1 -0
- package/src/components/List/__tests__/BasicListItem.spec.tsx +37 -13
- package/src/components/List/__tests__/__snapshots__/BasicListItem.spec.tsx.snap +162 -1
- package/src/components/List/__tests__/__snapshots__/StyledBasicListItem.spec.tsx.snap +6 -2
- package/src/components/List/__tests__/__snapshots__/StyledListItem.spec.tsx.snap +2 -2
- package/src/components/Radio/__tests__/__snapshots__/Radio.spec.tsx.snap +3 -1
- package/src/components/Radio/__tests__/__snapshots__/RadioGroup.spec.tsx.snap +4 -1
- package/src/components/RichTextEditor/RichTextEditor.tsx +1 -3
- package/src/components/RichTextEditor/__tests__/__snapshots__/RichTextEditor.spec.tsx.snap +8 -36
- package/src/components/Select/MultiSelect/__tests__/__snapshots__/Option.spec.tsx.snap +2 -1
- package/src/components/Select/MultiSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap +17 -5
- package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap +56 -98
- package/src/components/Select/SingleSelect/__tests__/__snapshots__/Option.spec.tsx.snap +2 -1
- package/src/components/Select/SingleSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap +16 -4
- package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap +52 -94
- package/src/components/TextInput/StyledTextInput.tsx +11 -16
- package/src/components/TextInput/__tests__/StyledTextInput.spec.tsx +3 -3
- package/src/components/TextInput/__tests__/__snapshots__/StyledTextInput.spec.tsx.snap +18 -36
- package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap +55 -237
- package/src/components/TextInput/index.tsx +27 -27
- package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap +4 -18
- package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap +4 -18
- package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +4 -2
- package/src/theme/components/list.ts +5 -2
- package/src/theme/global/colors/swag.ts +1 -0
- package/src/theme/global/colors/types.ts +1 -0
- package/types/components/TextInput/StyledTextInput.d.ts +3 -9
- package/types/components/TextInput/index.d.ts +4 -4
- package/types/theme/components/list.d.ts +1 -0
- package/types/theme/global/colors/types.d.ts +1 -0
- package/types/theme/global/index.d.ts +1 -0
|
@@ -29,12 +29,16 @@ Array [
|
|
|
29
29
|
style={
|
|
30
30
|
Array [
|
|
31
31
|
Object {
|
|
32
|
+
"borderColor": "#001f23",
|
|
33
|
+
"borderRadius": 8,
|
|
34
|
+
"borderWidth": 1,
|
|
32
35
|
"marginVertical": 8,
|
|
33
36
|
"width": "100%",
|
|
34
37
|
},
|
|
35
38
|
undefined,
|
|
36
39
|
]
|
|
37
40
|
}
|
|
41
|
+
themeVariant="default"
|
|
38
42
|
>
|
|
39
43
|
<View
|
|
40
44
|
style={
|
|
@@ -48,24 +52,6 @@ Array [
|
|
|
48
52
|
]
|
|
49
53
|
}
|
|
50
54
|
>
|
|
51
|
-
<View
|
|
52
|
-
style={
|
|
53
|
-
Array [
|
|
54
|
-
Object {
|
|
55
|
-
"borderColor": "#001f23",
|
|
56
|
-
"borderRadius": 8,
|
|
57
|
-
"borderWidth": 1,
|
|
58
|
-
"bottom": 0,
|
|
59
|
-
"left": 0,
|
|
60
|
-
"position": "absolute",
|
|
61
|
-
"right": 0,
|
|
62
|
-
"top": 0,
|
|
63
|
-
},
|
|
64
|
-
undefined,
|
|
65
|
-
]
|
|
66
|
-
}
|
|
67
|
-
themeVariant="default"
|
|
68
|
-
/>
|
|
69
55
|
<View
|
|
70
56
|
style={
|
|
71
57
|
Array [
|
|
@@ -599,6 +585,7 @@ Array [
|
|
|
599
585
|
Object {
|
|
600
586
|
"alignItems": "center",
|
|
601
587
|
"backgroundColor": "#ffffff",
|
|
588
|
+
"borderRadius": 4,
|
|
602
589
|
"flexDirection": "row",
|
|
603
590
|
"opacity": 1,
|
|
604
591
|
"padding": 16,
|
|
@@ -743,6 +730,7 @@ Array [
|
|
|
743
730
|
Object {
|
|
744
731
|
"alignItems": "center",
|
|
745
732
|
"backgroundColor": "#ffffff",
|
|
733
|
+
"borderRadius": 4,
|
|
746
734
|
"flexDirection": "row",
|
|
747
735
|
"opacity": 1,
|
|
748
736
|
"padding": 16,
|
|
@@ -1002,6 +990,7 @@ Array [
|
|
|
1002
990
|
Object {
|
|
1003
991
|
"alignItems": "center",
|
|
1004
992
|
"backgroundColor": "#ffffff",
|
|
993
|
+
"borderRadius": 4,
|
|
1005
994
|
"flexDirection": "row",
|
|
1006
995
|
"opacity": 1,
|
|
1007
996
|
"padding": 16,
|
|
@@ -1146,6 +1135,7 @@ Array [
|
|
|
1146
1135
|
Object {
|
|
1147
1136
|
"alignItems": "center",
|
|
1148
1137
|
"backgroundColor": "#ffffff",
|
|
1138
|
+
"borderRadius": 4,
|
|
1149
1139
|
"flexDirection": "row",
|
|
1150
1140
|
"opacity": 1,
|
|
1151
1141
|
"padding": 16,
|
|
@@ -1302,12 +1292,16 @@ Array [
|
|
|
1302
1292
|
style={
|
|
1303
1293
|
Array [
|
|
1304
1294
|
Object {
|
|
1295
|
+
"borderColor": "#001f23",
|
|
1296
|
+
"borderRadius": 8,
|
|
1297
|
+
"borderWidth": 1,
|
|
1305
1298
|
"marginVertical": 8,
|
|
1306
1299
|
"width": "100%",
|
|
1307
1300
|
},
|
|
1308
1301
|
undefined,
|
|
1309
1302
|
]
|
|
1310
1303
|
}
|
|
1304
|
+
themeVariant="filled"
|
|
1311
1305
|
>
|
|
1312
1306
|
<View
|
|
1313
1307
|
style={
|
|
@@ -1321,24 +1315,6 @@ Array [
|
|
|
1321
1315
|
]
|
|
1322
1316
|
}
|
|
1323
1317
|
>
|
|
1324
|
-
<View
|
|
1325
|
-
style={
|
|
1326
|
-
Array [
|
|
1327
|
-
Object {
|
|
1328
|
-
"borderColor": "#001f23",
|
|
1329
|
-
"borderRadius": 8,
|
|
1330
|
-
"borderWidth": 1,
|
|
1331
|
-
"bottom": 0,
|
|
1332
|
-
"left": 0,
|
|
1333
|
-
"position": "absolute",
|
|
1334
|
-
"right": 0,
|
|
1335
|
-
"top": 0,
|
|
1336
|
-
},
|
|
1337
|
-
undefined,
|
|
1338
|
-
]
|
|
1339
|
-
}
|
|
1340
|
-
themeVariant="filled"
|
|
1341
|
-
/>
|
|
1342
1318
|
<View
|
|
1343
1319
|
pointerEvents="none"
|
|
1344
1320
|
style={
|
|
@@ -1814,7 +1790,8 @@ Array [
|
|
|
1814
1790
|
Array [
|
|
1815
1791
|
Object {
|
|
1816
1792
|
"alignItems": "center",
|
|
1817
|
-
"backgroundColor": "#
|
|
1793
|
+
"backgroundColor": "#ECE8EF",
|
|
1794
|
+
"borderRadius": 4,
|
|
1818
1795
|
"flexDirection": "row",
|
|
1819
1796
|
"opacity": 1,
|
|
1820
1797
|
"padding": 16,
|
|
@@ -1942,6 +1919,7 @@ Array [
|
|
|
1942
1919
|
Object {
|
|
1943
1920
|
"alignItems": "center",
|
|
1944
1921
|
"backgroundColor": "#ffffff",
|
|
1922
|
+
"borderRadius": 4,
|
|
1945
1923
|
"flexDirection": "row",
|
|
1946
1924
|
"opacity": 1,
|
|
1947
1925
|
"padding": 16,
|
|
@@ -2069,6 +2047,7 @@ Array [
|
|
|
2069
2047
|
Object {
|
|
2070
2048
|
"alignItems": "center",
|
|
2071
2049
|
"backgroundColor": "#ffffff",
|
|
2050
|
+
"borderRadius": 4,
|
|
2072
2051
|
"flexDirection": "row",
|
|
2073
2052
|
"opacity": 1,
|
|
2074
2053
|
"padding": 16,
|
|
@@ -2196,6 +2175,7 @@ Array [
|
|
|
2196
2175
|
Object {
|
|
2197
2176
|
"alignItems": "center",
|
|
2198
2177
|
"backgroundColor": "#ffffff",
|
|
2178
|
+
"borderRadius": 4,
|
|
2199
2179
|
"flexDirection": "row",
|
|
2200
2180
|
"opacity": 1,
|
|
2201
2181
|
"padding": 16,
|
|
@@ -2323,6 +2303,7 @@ Array [
|
|
|
2323
2303
|
Object {
|
|
2324
2304
|
"alignItems": "center",
|
|
2325
2305
|
"backgroundColor": "#ffffff",
|
|
2306
|
+
"borderRadius": 4,
|
|
2326
2307
|
"flexDirection": "row",
|
|
2327
2308
|
"opacity": 1,
|
|
2328
2309
|
"padding": 16,
|
|
@@ -2450,6 +2431,7 @@ Array [
|
|
|
2450
2431
|
Object {
|
|
2451
2432
|
"alignItems": "center",
|
|
2452
2433
|
"backgroundColor": "#ffffff",
|
|
2434
|
+
"borderRadius": 4,
|
|
2453
2435
|
"flexDirection": "row",
|
|
2454
2436
|
"opacity": 1,
|
|
2455
2437
|
"padding": 16,
|
|
@@ -2578,6 +2560,7 @@ Array [
|
|
|
2578
2560
|
Object {
|
|
2579
2561
|
"alignItems": "center",
|
|
2580
2562
|
"backgroundColor": "#ffffff",
|
|
2563
|
+
"borderRadius": 4,
|
|
2581
2564
|
"flexDirection": "row",
|
|
2582
2565
|
"opacity": 0.38,
|
|
2583
2566
|
"padding": 16,
|
|
@@ -2717,12 +2700,16 @@ Array [
|
|
|
2717
2700
|
style={
|
|
2718
2701
|
Array [
|
|
2719
2702
|
Object {
|
|
2703
|
+
"borderColor": "#001f23",
|
|
2704
|
+
"borderRadius": 8,
|
|
2705
|
+
"borderWidth": 1,
|
|
2720
2706
|
"marginVertical": 8,
|
|
2721
2707
|
"width": "100%",
|
|
2722
2708
|
},
|
|
2723
2709
|
undefined,
|
|
2724
2710
|
]
|
|
2725
2711
|
}
|
|
2712
|
+
themeVariant="filled"
|
|
2726
2713
|
>
|
|
2727
2714
|
<View
|
|
2728
2715
|
style={
|
|
@@ -2736,24 +2723,6 @@ Array [
|
|
|
2736
2723
|
]
|
|
2737
2724
|
}
|
|
2738
2725
|
>
|
|
2739
|
-
<View
|
|
2740
|
-
style={
|
|
2741
|
-
Array [
|
|
2742
|
-
Object {
|
|
2743
|
-
"borderColor": "#001f23",
|
|
2744
|
-
"borderRadius": 8,
|
|
2745
|
-
"borderWidth": 1,
|
|
2746
|
-
"bottom": 0,
|
|
2747
|
-
"left": 0,
|
|
2748
|
-
"position": "absolute",
|
|
2749
|
-
"right": 0,
|
|
2750
|
-
"top": 0,
|
|
2751
|
-
},
|
|
2752
|
-
undefined,
|
|
2753
|
-
]
|
|
2754
|
-
}
|
|
2755
|
-
themeVariant="filled"
|
|
2756
|
-
/>
|
|
2757
2726
|
<View
|
|
2758
2727
|
pointerEvents="none"
|
|
2759
2728
|
style={
|
|
@@ -3224,7 +3193,8 @@ Array [
|
|
|
3224
3193
|
Array [
|
|
3225
3194
|
Object {
|
|
3226
3195
|
"alignItems": "center",
|
|
3227
|
-
"backgroundColor": "#
|
|
3196
|
+
"backgroundColor": "#ECE8EF",
|
|
3197
|
+
"borderRadius": 4,
|
|
3228
3198
|
"flexDirection": "row",
|
|
3229
3199
|
"opacity": 1,
|
|
3230
3200
|
"padding": 16,
|
|
@@ -3352,6 +3322,7 @@ Array [
|
|
|
3352
3322
|
Object {
|
|
3353
3323
|
"alignItems": "center",
|
|
3354
3324
|
"backgroundColor": "#ffffff",
|
|
3325
|
+
"borderRadius": 4,
|
|
3355
3326
|
"flexDirection": "row",
|
|
3356
3327
|
"opacity": 1,
|
|
3357
3328
|
"padding": 16,
|
|
@@ -3479,6 +3450,7 @@ Array [
|
|
|
3479
3450
|
Object {
|
|
3480
3451
|
"alignItems": "center",
|
|
3481
3452
|
"backgroundColor": "#ffffff",
|
|
3453
|
+
"borderRadius": 4,
|
|
3482
3454
|
"flexDirection": "row",
|
|
3483
3455
|
"opacity": 1,
|
|
3484
3456
|
"padding": 16,
|
|
@@ -3606,6 +3578,7 @@ Array [
|
|
|
3606
3578
|
Object {
|
|
3607
3579
|
"alignItems": "center",
|
|
3608
3580
|
"backgroundColor": "#ffffff",
|
|
3581
|
+
"borderRadius": 4,
|
|
3609
3582
|
"flexDirection": "row",
|
|
3610
3583
|
"opacity": 1,
|
|
3611
3584
|
"padding": 16,
|
|
@@ -3733,6 +3706,7 @@ Array [
|
|
|
3733
3706
|
Object {
|
|
3734
3707
|
"alignItems": "center",
|
|
3735
3708
|
"backgroundColor": "#ffffff",
|
|
3709
|
+
"borderRadius": 4,
|
|
3736
3710
|
"flexDirection": "row",
|
|
3737
3711
|
"opacity": 1,
|
|
3738
3712
|
"padding": 16,
|
|
@@ -3860,6 +3834,7 @@ Array [
|
|
|
3860
3834
|
Object {
|
|
3861
3835
|
"alignItems": "center",
|
|
3862
3836
|
"backgroundColor": "#ffffff",
|
|
3837
|
+
"borderRadius": 4,
|
|
3863
3838
|
"flexDirection": "row",
|
|
3864
3839
|
"opacity": 1,
|
|
3865
3840
|
"padding": 16,
|
|
@@ -3988,6 +3963,7 @@ Array [
|
|
|
3988
3963
|
Object {
|
|
3989
3964
|
"alignItems": "center",
|
|
3990
3965
|
"backgroundColor": "#ffffff",
|
|
3966
|
+
"borderRadius": 4,
|
|
3991
3967
|
"flexDirection": "row",
|
|
3992
3968
|
"opacity": 0.38,
|
|
3993
3969
|
"padding": 16,
|
|
@@ -4129,12 +4105,16 @@ Array [
|
|
|
4129
4105
|
style={
|
|
4130
4106
|
Array [
|
|
4131
4107
|
Object {
|
|
4108
|
+
"borderColor": "#808f91",
|
|
4109
|
+
"borderRadius": 8,
|
|
4110
|
+
"borderWidth": 1,
|
|
4132
4111
|
"marginVertical": 8,
|
|
4133
4112
|
"width": "100%",
|
|
4134
4113
|
},
|
|
4135
4114
|
undefined,
|
|
4136
4115
|
]
|
|
4137
4116
|
}
|
|
4117
|
+
themeVariant="readonly"
|
|
4138
4118
|
>
|
|
4139
4119
|
<View
|
|
4140
4120
|
style={
|
|
@@ -4148,24 +4128,6 @@ Array [
|
|
|
4148
4128
|
]
|
|
4149
4129
|
}
|
|
4150
4130
|
>
|
|
4151
|
-
<View
|
|
4152
|
-
style={
|
|
4153
|
-
Array [
|
|
4154
|
-
Object {
|
|
4155
|
-
"borderColor": "#808f91",
|
|
4156
|
-
"borderRadius": 8,
|
|
4157
|
-
"borderWidth": 1,
|
|
4158
|
-
"bottom": 0,
|
|
4159
|
-
"left": 0,
|
|
4160
|
-
"position": "absolute",
|
|
4161
|
-
"right": 0,
|
|
4162
|
-
"top": 0,
|
|
4163
|
-
},
|
|
4164
|
-
undefined,
|
|
4165
|
-
]
|
|
4166
|
-
}
|
|
4167
|
-
themeVariant="readonly"
|
|
4168
|
-
/>
|
|
4169
4131
|
<View
|
|
4170
4132
|
pointerEvents="none"
|
|
4171
4133
|
style={
|
|
@@ -4655,7 +4617,8 @@ Array [
|
|
|
4655
4617
|
Array [
|
|
4656
4618
|
Object {
|
|
4657
4619
|
"alignItems": "center",
|
|
4658
|
-
"backgroundColor": "#
|
|
4620
|
+
"backgroundColor": "#ECE8EF",
|
|
4621
|
+
"borderRadius": 4,
|
|
4659
4622
|
"flexDirection": "row",
|
|
4660
4623
|
"opacity": 1,
|
|
4661
4624
|
"padding": 16,
|
|
@@ -4783,6 +4746,7 @@ Array [
|
|
|
4783
4746
|
Object {
|
|
4784
4747
|
"alignItems": "center",
|
|
4785
4748
|
"backgroundColor": "#ffffff",
|
|
4749
|
+
"borderRadius": 4,
|
|
4786
4750
|
"flexDirection": "row",
|
|
4787
4751
|
"opacity": 1,
|
|
4788
4752
|
"padding": 16,
|
|
@@ -4910,6 +4874,7 @@ Array [
|
|
|
4910
4874
|
Object {
|
|
4911
4875
|
"alignItems": "center",
|
|
4912
4876
|
"backgroundColor": "#ffffff",
|
|
4877
|
+
"borderRadius": 4,
|
|
4913
4878
|
"flexDirection": "row",
|
|
4914
4879
|
"opacity": 1,
|
|
4915
4880
|
"padding": 16,
|
|
@@ -5037,6 +5002,7 @@ Array [
|
|
|
5037
5002
|
Object {
|
|
5038
5003
|
"alignItems": "center",
|
|
5039
5004
|
"backgroundColor": "#ffffff",
|
|
5005
|
+
"borderRadius": 4,
|
|
5040
5006
|
"flexDirection": "row",
|
|
5041
5007
|
"opacity": 1,
|
|
5042
5008
|
"padding": 16,
|
|
@@ -5164,6 +5130,7 @@ Array [
|
|
|
5164
5130
|
Object {
|
|
5165
5131
|
"alignItems": "center",
|
|
5166
5132
|
"backgroundColor": "#ffffff",
|
|
5133
|
+
"borderRadius": 4,
|
|
5167
5134
|
"flexDirection": "row",
|
|
5168
5135
|
"opacity": 1,
|
|
5169
5136
|
"padding": 16,
|
|
@@ -5291,6 +5258,7 @@ Array [
|
|
|
5291
5258
|
Object {
|
|
5292
5259
|
"alignItems": "center",
|
|
5293
5260
|
"backgroundColor": "#ffffff",
|
|
5261
|
+
"borderRadius": 4,
|
|
5294
5262
|
"flexDirection": "row",
|
|
5295
5263
|
"opacity": 1,
|
|
5296
5264
|
"padding": 16,
|
|
@@ -5419,6 +5387,7 @@ Array [
|
|
|
5419
5387
|
Object {
|
|
5420
5388
|
"alignItems": "center",
|
|
5421
5389
|
"backgroundColor": "#ffffff",
|
|
5390
|
+
"borderRadius": 4,
|
|
5422
5391
|
"flexDirection": "row",
|
|
5423
5392
|
"opacity": 0.38,
|
|
5424
5393
|
"padding": 16,
|
|
@@ -5558,12 +5527,16 @@ Array [
|
|
|
5558
5527
|
style={
|
|
5559
5528
|
Array [
|
|
5560
5529
|
Object {
|
|
5530
|
+
"borderColor": "#001f23",
|
|
5531
|
+
"borderRadius": 8,
|
|
5532
|
+
"borderWidth": 1,
|
|
5561
5533
|
"marginVertical": 8,
|
|
5562
5534
|
"width": "100%",
|
|
5563
5535
|
},
|
|
5564
5536
|
undefined,
|
|
5565
5537
|
]
|
|
5566
5538
|
}
|
|
5539
|
+
themeVariant="filled"
|
|
5567
5540
|
>
|
|
5568
5541
|
<View
|
|
5569
5542
|
style={
|
|
@@ -5577,24 +5550,6 @@ Array [
|
|
|
5577
5550
|
]
|
|
5578
5551
|
}
|
|
5579
5552
|
>
|
|
5580
|
-
<View
|
|
5581
|
-
style={
|
|
5582
|
-
Array [
|
|
5583
|
-
Object {
|
|
5584
|
-
"borderColor": "#001f23",
|
|
5585
|
-
"borderRadius": 8,
|
|
5586
|
-
"borderWidth": 1,
|
|
5587
|
-
"bottom": 0,
|
|
5588
|
-
"left": 0,
|
|
5589
|
-
"position": "absolute",
|
|
5590
|
-
"right": 0,
|
|
5591
|
-
"top": 0,
|
|
5592
|
-
},
|
|
5593
|
-
undefined,
|
|
5594
|
-
]
|
|
5595
|
-
}
|
|
5596
|
-
themeVariant="filled"
|
|
5597
|
-
/>
|
|
5598
5553
|
<View
|
|
5599
5554
|
pointerEvents="none"
|
|
5600
5555
|
style={
|
|
@@ -6106,7 +6061,8 @@ Array [
|
|
|
6106
6061
|
Array [
|
|
6107
6062
|
Object {
|
|
6108
6063
|
"alignItems": "center",
|
|
6109
|
-
"backgroundColor": "#
|
|
6064
|
+
"backgroundColor": "#ECE8EF",
|
|
6065
|
+
"borderRadius": 4,
|
|
6110
6066
|
"flexDirection": "row",
|
|
6111
6067
|
"opacity": 1,
|
|
6112
6068
|
"padding": 16,
|
|
@@ -6331,6 +6287,7 @@ Array [
|
|
|
6331
6287
|
Object {
|
|
6332
6288
|
"alignItems": "center",
|
|
6333
6289
|
"backgroundColor": "#ffffff",
|
|
6290
|
+
"borderRadius": 4,
|
|
6334
6291
|
"flexDirection": "row",
|
|
6335
6292
|
"opacity": 1,
|
|
6336
6293
|
"padding": 16,
|
|
@@ -6448,6 +6405,7 @@ Array [
|
|
|
6448
6405
|
Object {
|
|
6449
6406
|
"alignItems": "center",
|
|
6450
6407
|
"backgroundColor": "#ffffff",
|
|
6408
|
+
"borderRadius": 4,
|
|
6451
6409
|
"flexDirection": "row",
|
|
6452
6410
|
"opacity": 1,
|
|
6453
6411
|
"padding": 16,
|
|
@@ -10,9 +10,19 @@ export type Variant =
|
|
|
10
10
|
| 'readonly'
|
|
11
11
|
| 'error';
|
|
12
12
|
|
|
13
|
-
const StyledContainer = styled(View)
|
|
13
|
+
const StyledContainer = styled(View)<{
|
|
14
|
+
themeVariant: Variant;
|
|
15
|
+
}>(({ theme, themeVariant }) => ({
|
|
14
16
|
width: '100%',
|
|
15
17
|
marginVertical: theme.__hd__.textInput.space.containerMarginVertical,
|
|
18
|
+
borderWidth:
|
|
19
|
+
themeVariant === 'focused'
|
|
20
|
+
? theme.__hd__.textInput.borderWidths.container.focused
|
|
21
|
+
: theme.__hd__.textInput.borderWidths.container.normal,
|
|
22
|
+
borderRadius: theme.__hd__.textInput.radii.container,
|
|
23
|
+
borderColor:
|
|
24
|
+
theme.__hd__.textInput.colors.borders[themeVariant] ??
|
|
25
|
+
theme.__hd__.textInput.colors.borders.default,
|
|
16
26
|
}));
|
|
17
27
|
|
|
18
28
|
const StyledLabelContainer = styled(View)(({ theme }) => ({
|
|
@@ -97,20 +107,6 @@ const StyledTextInput = styled(TextInput)(({ theme }) => ({
|
|
|
97
107
|
marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin,
|
|
98
108
|
}));
|
|
99
109
|
|
|
100
|
-
const StyledBorderBackDrop = styled(View)<{
|
|
101
|
-
themeVariant: Variant;
|
|
102
|
-
}>(({ theme, themeVariant }) => ({
|
|
103
|
-
...StyleSheet.absoluteFillObject,
|
|
104
|
-
borderWidth:
|
|
105
|
-
themeVariant === 'focused'
|
|
106
|
-
? theme.__hd__.textInput.borderWidths.container.focused
|
|
107
|
-
: theme.__hd__.textInput.borderWidths.container.normal,
|
|
108
|
-
borderRadius: theme.__hd__.textInput.radii.container,
|
|
109
|
-
borderColor:
|
|
110
|
-
theme.__hd__.textInput.colors.borders[themeVariant] ??
|
|
111
|
-
theme.__hd__.textInput.colors.borders.default,
|
|
112
|
-
}));
|
|
113
|
-
|
|
114
110
|
const StyledTextInputContainer = styled(View)(({ theme }) => ({
|
|
115
111
|
flexDirection: 'row',
|
|
116
112
|
alignItems: 'center',
|
|
@@ -151,6 +147,5 @@ export {
|
|
|
151
147
|
StyledTextInputAndLabelContainer,
|
|
152
148
|
StyledLabelContainerInsideTextInput,
|
|
153
149
|
StyledErrorAndHelpTextContainer,
|
|
154
|
-
StyledBorderBackDrop,
|
|
155
150
|
StyledErrorAndMaxLengthContainer,
|
|
156
151
|
};
|
|
@@ -10,7 +10,7 @@ import {
|
|
|
10
10
|
StyledAsteriskLabel,
|
|
11
11
|
StyledLabelContainer,
|
|
12
12
|
StyledLabelInsideTextInput,
|
|
13
|
-
|
|
13
|
+
StyledContainer,
|
|
14
14
|
} from '../StyledTextInput';
|
|
15
15
|
|
|
16
16
|
describe('Label', () => {
|
|
@@ -133,7 +133,7 @@ describe('StyledHelperText', () => {
|
|
|
133
133
|
});
|
|
134
134
|
});
|
|
135
135
|
|
|
136
|
-
describe('
|
|
136
|
+
describe('StyledContainer', () => {
|
|
137
137
|
it.each`
|
|
138
138
|
themeVariant
|
|
139
139
|
${'default'}
|
|
@@ -146,7 +146,7 @@ describe('StyledBorderBackDrop', () => {
|
|
|
146
146
|
'renders correctly with themeVariant $themeVariant',
|
|
147
147
|
({ themeVariant }): void => {
|
|
148
148
|
const { toJSON } = renderWithTheme(
|
|
149
|
-
<
|
|
149
|
+
<StyledContainer themeVariant={themeVariant} />
|
|
150
150
|
);
|
|
151
151
|
|
|
152
152
|
expect(toJSON()).toMatchSnapshot();
|
|
@@ -547,7 +547,7 @@ exports[`StyledAsteriskLabel renders correctly with themeVariant readonly 1`] =
|
|
|
547
547
|
</Text>
|
|
548
548
|
`;
|
|
549
549
|
|
|
550
|
-
exports[`
|
|
550
|
+
exports[`StyledContainer renders correctly with themeVariant default 1`] = `
|
|
551
551
|
<View
|
|
552
552
|
style={
|
|
553
553
|
Array [
|
|
@@ -555,11 +555,8 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant default 1`] =
|
|
|
555
555
|
"borderColor": "#001f23",
|
|
556
556
|
"borderRadius": 8,
|
|
557
557
|
"borderWidth": 1,
|
|
558
|
-
"
|
|
559
|
-
"
|
|
560
|
-
"position": "absolute",
|
|
561
|
-
"right": 0,
|
|
562
|
-
"top": 0,
|
|
558
|
+
"marginVertical": 8,
|
|
559
|
+
"width": "100%",
|
|
563
560
|
},
|
|
564
561
|
undefined,
|
|
565
562
|
]
|
|
@@ -568,7 +565,7 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant default 1`] =
|
|
|
568
565
|
/>
|
|
569
566
|
`;
|
|
570
567
|
|
|
571
|
-
exports[`
|
|
568
|
+
exports[`StyledContainer renders correctly with themeVariant disabled 1`] = `
|
|
572
569
|
<View
|
|
573
570
|
style={
|
|
574
571
|
Array [
|
|
@@ -576,11 +573,8 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant disabled 1`] =
|
|
|
576
573
|
"borderColor": "#bfc1c5",
|
|
577
574
|
"borderRadius": 8,
|
|
578
575
|
"borderWidth": 1,
|
|
579
|
-
"
|
|
580
|
-
"
|
|
581
|
-
"position": "absolute",
|
|
582
|
-
"right": 0,
|
|
583
|
-
"top": 0,
|
|
576
|
+
"marginVertical": 8,
|
|
577
|
+
"width": "100%",
|
|
584
578
|
},
|
|
585
579
|
undefined,
|
|
586
580
|
]
|
|
@@ -589,7 +583,7 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant disabled 1`] =
|
|
|
589
583
|
/>
|
|
590
584
|
`;
|
|
591
585
|
|
|
592
|
-
exports[`
|
|
586
|
+
exports[`StyledContainer renders correctly with themeVariant error 1`] = `
|
|
593
587
|
<View
|
|
594
588
|
style={
|
|
595
589
|
Array [
|
|
@@ -597,11 +591,8 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant error 1`] = `
|
|
|
597
591
|
"borderColor": "#de350b",
|
|
598
592
|
"borderRadius": 8,
|
|
599
593
|
"borderWidth": 1,
|
|
600
|
-
"
|
|
601
|
-
"
|
|
602
|
-
"position": "absolute",
|
|
603
|
-
"right": 0,
|
|
604
|
-
"top": 0,
|
|
594
|
+
"marginVertical": 8,
|
|
595
|
+
"width": "100%",
|
|
605
596
|
},
|
|
606
597
|
undefined,
|
|
607
598
|
]
|
|
@@ -610,7 +601,7 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant error 1`] = `
|
|
|
610
601
|
/>
|
|
611
602
|
`;
|
|
612
603
|
|
|
613
|
-
exports[`
|
|
604
|
+
exports[`StyledContainer renders correctly with themeVariant filled 1`] = `
|
|
614
605
|
<View
|
|
615
606
|
style={
|
|
616
607
|
Array [
|
|
@@ -618,11 +609,8 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant filled 1`] = `
|
|
|
618
609
|
"borderColor": "#001f23",
|
|
619
610
|
"borderRadius": 8,
|
|
620
611
|
"borderWidth": 1,
|
|
621
|
-
"
|
|
622
|
-
"
|
|
623
|
-
"position": "absolute",
|
|
624
|
-
"right": 0,
|
|
625
|
-
"top": 0,
|
|
612
|
+
"marginVertical": 8,
|
|
613
|
+
"width": "100%",
|
|
626
614
|
},
|
|
627
615
|
undefined,
|
|
628
616
|
]
|
|
@@ -631,7 +619,7 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant filled 1`] = `
|
|
|
631
619
|
/>
|
|
632
620
|
`;
|
|
633
621
|
|
|
634
|
-
exports[`
|
|
622
|
+
exports[`StyledContainer renders correctly with themeVariant focused 1`] = `
|
|
635
623
|
<View
|
|
636
624
|
style={
|
|
637
625
|
Array [
|
|
@@ -639,11 +627,8 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant focused 1`] =
|
|
|
639
627
|
"borderColor": "#001f23",
|
|
640
628
|
"borderRadius": 8,
|
|
641
629
|
"borderWidth": 2,
|
|
642
|
-
"
|
|
643
|
-
"
|
|
644
|
-
"position": "absolute",
|
|
645
|
-
"right": 0,
|
|
646
|
-
"top": 0,
|
|
630
|
+
"marginVertical": 8,
|
|
631
|
+
"width": "100%",
|
|
647
632
|
},
|
|
648
633
|
undefined,
|
|
649
634
|
]
|
|
@@ -652,7 +637,7 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant focused 1`] =
|
|
|
652
637
|
/>
|
|
653
638
|
`;
|
|
654
639
|
|
|
655
|
-
exports[`
|
|
640
|
+
exports[`StyledContainer renders correctly with themeVariant readonly 1`] = `
|
|
656
641
|
<View
|
|
657
642
|
style={
|
|
658
643
|
Array [
|
|
@@ -660,11 +645,8 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant readonly 1`] =
|
|
|
660
645
|
"borderColor": "#808f91",
|
|
661
646
|
"borderRadius": 8,
|
|
662
647
|
"borderWidth": 1,
|
|
663
|
-
"
|
|
664
|
-
"
|
|
665
|
-
"position": "absolute",
|
|
666
|
-
"right": 0,
|
|
667
|
-
"top": 0,
|
|
648
|
+
"marginVertical": 8,
|
|
649
|
+
"width": "100%",
|
|
668
650
|
},
|
|
669
651
|
undefined,
|
|
670
652
|
]
|