unicorn-demo-app 7.10.0 → 7.11.0
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/package.json +1 -1
- package/src/screens/SettingsScreen.js +0 -1
- package/src/screens/__tests__/__snapshots__/AvatarScreen.spec.js.snap +43 -0
- package/src/screens/componentScreens/DateTimePickerScreen.tsx +0 -5
- package/src/screens/componentScreens/ExpandableSectionScreen.tsx +1 -1
- package/src/screens/componentScreens/PickerScreen.tsx +37 -1
- package/src/screens/componentScreens/TextFieldScreen.tsx +15 -10
package/package.json
CHANGED
|
@@ -80,7 +80,6 @@ class SettingsScreen extends Component {
|
|
|
80
80
|
value={defaultScreen?.value}
|
|
81
81
|
label={'Default Screen'}
|
|
82
82
|
onChange={this.setDefaultScreen}
|
|
83
|
-
migrateTextField
|
|
84
83
|
>
|
|
85
84
|
{_.map(filteredScreens, screen => (
|
|
86
85
|
<Picker.Item key={screen.value} value={screen.value} label={screen.label}/>
|
|
@@ -20,6 +20,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
20
20
|
undefined,
|
|
21
21
|
undefined,
|
|
22
22
|
undefined,
|
|
23
|
+
undefined,
|
|
23
24
|
{
|
|
24
25
|
"alignItems": "center",
|
|
25
26
|
"flexDirection": "row",
|
|
@@ -111,6 +112,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
111
112
|
undefined,
|
|
112
113
|
undefined,
|
|
113
114
|
undefined,
|
|
115
|
+
undefined,
|
|
114
116
|
[
|
|
115
117
|
{
|
|
116
118
|
"alignItems": "center",
|
|
@@ -143,6 +145,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
143
145
|
undefined,
|
|
144
146
|
undefined,
|
|
145
147
|
undefined,
|
|
148
|
+
undefined,
|
|
146
149
|
{
|
|
147
150
|
"alignItems": "center",
|
|
148
151
|
"flexDirection": "row",
|
|
@@ -234,6 +237,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
234
237
|
undefined,
|
|
235
238
|
undefined,
|
|
236
239
|
undefined,
|
|
240
|
+
undefined,
|
|
237
241
|
[
|
|
238
242
|
{
|
|
239
243
|
"alignItems": "center",
|
|
@@ -264,6 +268,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
264
268
|
undefined,
|
|
265
269
|
undefined,
|
|
266
270
|
undefined,
|
|
271
|
+
undefined,
|
|
267
272
|
[
|
|
268
273
|
{
|
|
269
274
|
"borderRadius": 25,
|
|
@@ -326,6 +331,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
326
331
|
undefined,
|
|
327
332
|
undefined,
|
|
328
333
|
undefined,
|
|
334
|
+
undefined,
|
|
329
335
|
{
|
|
330
336
|
"alignItems": "center",
|
|
331
337
|
"flexDirection": "row",
|
|
@@ -417,6 +423,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
417
423
|
undefined,
|
|
418
424
|
undefined,
|
|
419
425
|
undefined,
|
|
426
|
+
undefined,
|
|
420
427
|
[
|
|
421
428
|
{
|
|
422
429
|
"alignItems": "center",
|
|
@@ -487,6 +494,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
487
494
|
undefined,
|
|
488
495
|
undefined,
|
|
489
496
|
undefined,
|
|
497
|
+
undefined,
|
|
490
498
|
[
|
|
491
499
|
{
|
|
492
500
|
"borderRadius": 25,
|
|
@@ -551,6 +559,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
551
559
|
undefined,
|
|
552
560
|
undefined,
|
|
553
561
|
undefined,
|
|
562
|
+
undefined,
|
|
554
563
|
{
|
|
555
564
|
"alignItems": "center",
|
|
556
565
|
"flexDirection": "row",
|
|
@@ -642,6 +651,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
642
651
|
undefined,
|
|
643
652
|
undefined,
|
|
644
653
|
undefined,
|
|
654
|
+
undefined,
|
|
645
655
|
[
|
|
646
656
|
{
|
|
647
657
|
"alignItems": "center",
|
|
@@ -722,6 +732,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
722
732
|
undefined,
|
|
723
733
|
undefined,
|
|
724
734
|
undefined,
|
|
735
|
+
undefined,
|
|
725
736
|
{
|
|
726
737
|
"position": "absolute",
|
|
727
738
|
"right": 2.322330470336313,
|
|
@@ -739,6 +750,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
739
750
|
undefined,
|
|
740
751
|
undefined,
|
|
741
752
|
undefined,
|
|
753
|
+
undefined,
|
|
742
754
|
{},
|
|
743
755
|
{},
|
|
744
756
|
{
|
|
@@ -781,6 +793,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
781
793
|
undefined,
|
|
782
794
|
undefined,
|
|
783
795
|
undefined,
|
|
796
|
+
undefined,
|
|
784
797
|
{
|
|
785
798
|
"alignItems": "center",
|
|
786
799
|
"flexDirection": "row",
|
|
@@ -872,6 +885,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
872
885
|
undefined,
|
|
873
886
|
undefined,
|
|
874
887
|
undefined,
|
|
888
|
+
undefined,
|
|
875
889
|
[
|
|
876
890
|
{
|
|
877
891
|
"alignItems": "center",
|
|
@@ -973,6 +987,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
973
987
|
undefined,
|
|
974
988
|
undefined,
|
|
975
989
|
undefined,
|
|
990
|
+
undefined,
|
|
976
991
|
{
|
|
977
992
|
"bottom": 2.322330470336313,
|
|
978
993
|
"position": "absolute",
|
|
@@ -990,6 +1005,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
990
1005
|
undefined,
|
|
991
1006
|
undefined,
|
|
992
1007
|
undefined,
|
|
1008
|
+
undefined,
|
|
993
1009
|
{},
|
|
994
1010
|
{},
|
|
995
1011
|
{
|
|
@@ -1032,6 +1048,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
1032
1048
|
undefined,
|
|
1033
1049
|
undefined,
|
|
1034
1050
|
undefined,
|
|
1051
|
+
undefined,
|
|
1035
1052
|
{
|
|
1036
1053
|
"alignItems": "center",
|
|
1037
1054
|
"flexDirection": "row",
|
|
@@ -1123,6 +1140,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
1123
1140
|
undefined,
|
|
1124
1141
|
undefined,
|
|
1125
1142
|
undefined,
|
|
1143
|
+
undefined,
|
|
1126
1144
|
[
|
|
1127
1145
|
{
|
|
1128
1146
|
"alignItems": "center",
|
|
@@ -1224,6 +1242,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
1224
1242
|
undefined,
|
|
1225
1243
|
undefined,
|
|
1226
1244
|
undefined,
|
|
1245
|
+
undefined,
|
|
1227
1246
|
{
|
|
1228
1247
|
"bottom": 0.8578643762690499,
|
|
1229
1248
|
"left": 0.8578643762690499,
|
|
@@ -1241,6 +1260,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
1241
1260
|
undefined,
|
|
1242
1261
|
undefined,
|
|
1243
1262
|
undefined,
|
|
1263
|
+
undefined,
|
|
1244
1264
|
{},
|
|
1245
1265
|
{},
|
|
1246
1266
|
{
|
|
@@ -1283,6 +1303,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
1283
1303
|
undefined,
|
|
1284
1304
|
undefined,
|
|
1285
1305
|
undefined,
|
|
1306
|
+
undefined,
|
|
1286
1307
|
{
|
|
1287
1308
|
"alignItems": "center",
|
|
1288
1309
|
"flexDirection": "row",
|
|
@@ -1374,6 +1395,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
1374
1395
|
undefined,
|
|
1375
1396
|
undefined,
|
|
1376
1397
|
undefined,
|
|
1398
|
+
undefined,
|
|
1377
1399
|
[
|
|
1378
1400
|
{
|
|
1379
1401
|
"alignItems": "center",
|
|
@@ -1409,6 +1431,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
1409
1431
|
undefined,
|
|
1410
1432
|
undefined,
|
|
1411
1433
|
undefined,
|
|
1434
|
+
undefined,
|
|
1412
1435
|
{
|
|
1413
1436
|
"alignItems": "center",
|
|
1414
1437
|
"borderRadius": 999,
|
|
@@ -1485,6 +1508,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
1485
1508
|
undefined,
|
|
1486
1509
|
undefined,
|
|
1487
1510
|
undefined,
|
|
1511
|
+
undefined,
|
|
1488
1512
|
{
|
|
1489
1513
|
"alignItems": "center",
|
|
1490
1514
|
"flexDirection": "row",
|
|
@@ -1576,6 +1600,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
1576
1600
|
undefined,
|
|
1577
1601
|
undefined,
|
|
1578
1602
|
undefined,
|
|
1603
|
+
undefined,
|
|
1579
1604
|
[
|
|
1580
1605
|
{
|
|
1581
1606
|
"alignItems": "center",
|
|
@@ -1677,6 +1702,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
1677
1702
|
undefined,
|
|
1678
1703
|
undefined,
|
|
1679
1704
|
undefined,
|
|
1705
|
+
undefined,
|
|
1680
1706
|
{
|
|
1681
1707
|
"left": 3.2512626584708375,
|
|
1682
1708
|
"position": "absolute",
|
|
@@ -1694,6 +1720,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
1694
1720
|
undefined,
|
|
1695
1721
|
undefined,
|
|
1696
1722
|
undefined,
|
|
1723
|
+
undefined,
|
|
1697
1724
|
{},
|
|
1698
1725
|
{},
|
|
1699
1726
|
{
|
|
@@ -1736,6 +1763,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
1736
1763
|
undefined,
|
|
1737
1764
|
undefined,
|
|
1738
1765
|
undefined,
|
|
1766
|
+
undefined,
|
|
1739
1767
|
{
|
|
1740
1768
|
"alignItems": "center",
|
|
1741
1769
|
"flexDirection": "row",
|
|
@@ -1827,6 +1855,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
1827
1855
|
undefined,
|
|
1828
1856
|
undefined,
|
|
1829
1857
|
undefined,
|
|
1858
|
+
undefined,
|
|
1830
1859
|
[
|
|
1831
1860
|
{
|
|
1832
1861
|
"alignItems": "center",
|
|
@@ -1939,6 +1968,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
1939
1968
|
undefined,
|
|
1940
1969
|
undefined,
|
|
1941
1970
|
undefined,
|
|
1971
|
+
undefined,
|
|
1942
1972
|
{
|
|
1943
1973
|
"position": "absolute",
|
|
1944
1974
|
"right": 0.28679656440357526,
|
|
@@ -1956,6 +1986,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
1956
1986
|
undefined,
|
|
1957
1987
|
undefined,
|
|
1958
1988
|
undefined,
|
|
1989
|
+
undefined,
|
|
1959
1990
|
{},
|
|
1960
1991
|
{},
|
|
1961
1992
|
{
|
|
@@ -2031,6 +2062,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
2031
2062
|
undefined,
|
|
2032
2063
|
undefined,
|
|
2033
2064
|
undefined,
|
|
2065
|
+
undefined,
|
|
2034
2066
|
{
|
|
2035
2067
|
"alignItems": "center",
|
|
2036
2068
|
"flexDirection": "row",
|
|
@@ -2122,6 +2154,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
2122
2154
|
undefined,
|
|
2123
2155
|
undefined,
|
|
2124
2156
|
undefined,
|
|
2157
|
+
undefined,
|
|
2125
2158
|
[
|
|
2126
2159
|
{
|
|
2127
2160
|
"alignItems": "center",
|
|
@@ -2215,6 +2248,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
2215
2248
|
undefined,
|
|
2216
2249
|
undefined,
|
|
2217
2250
|
undefined,
|
|
2251
|
+
undefined,
|
|
2218
2252
|
{
|
|
2219
2253
|
"alignItems": "center",
|
|
2220
2254
|
"flexDirection": "row",
|
|
@@ -2306,6 +2340,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
2306
2340
|
undefined,
|
|
2307
2341
|
undefined,
|
|
2308
2342
|
undefined,
|
|
2343
|
+
undefined,
|
|
2309
2344
|
[
|
|
2310
2345
|
{
|
|
2311
2346
|
"alignItems": "center",
|
|
@@ -2441,6 +2476,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
2441
2476
|
undefined,
|
|
2442
2477
|
undefined,
|
|
2443
2478
|
undefined,
|
|
2479
|
+
undefined,
|
|
2444
2480
|
{
|
|
2445
2481
|
"alignItems": "center",
|
|
2446
2482
|
"flexDirection": "row",
|
|
@@ -2532,6 +2568,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
2532
2568
|
undefined,
|
|
2533
2569
|
undefined,
|
|
2534
2570
|
undefined,
|
|
2571
|
+
undefined,
|
|
2535
2572
|
[
|
|
2536
2573
|
{
|
|
2537
2574
|
"alignItems": "center",
|
|
@@ -2667,6 +2704,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
2667
2704
|
undefined,
|
|
2668
2705
|
undefined,
|
|
2669
2706
|
undefined,
|
|
2707
|
+
undefined,
|
|
2670
2708
|
{
|
|
2671
2709
|
"alignItems": "center",
|
|
2672
2710
|
"flexDirection": "row",
|
|
@@ -2758,6 +2796,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
2758
2796
|
undefined,
|
|
2759
2797
|
undefined,
|
|
2760
2798
|
undefined,
|
|
2799
|
+
undefined,
|
|
2761
2800
|
[
|
|
2762
2801
|
{
|
|
2763
2802
|
"alignItems": "center",
|
|
@@ -2851,6 +2890,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
2851
2890
|
undefined,
|
|
2852
2891
|
undefined,
|
|
2853
2892
|
undefined,
|
|
2893
|
+
undefined,
|
|
2854
2894
|
{
|
|
2855
2895
|
"alignItems": "center",
|
|
2856
2896
|
"flexDirection": "row",
|
|
@@ -2942,6 +2982,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
2942
2982
|
undefined,
|
|
2943
2983
|
undefined,
|
|
2944
2984
|
undefined,
|
|
2985
|
+
undefined,
|
|
2945
2986
|
[
|
|
2946
2987
|
{
|
|
2947
2988
|
"alignItems": "center",
|
|
@@ -3021,6 +3062,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
3021
3062
|
undefined,
|
|
3022
3063
|
undefined,
|
|
3023
3064
|
undefined,
|
|
3065
|
+
undefined,
|
|
3024
3066
|
{},
|
|
3025
3067
|
{},
|
|
3026
3068
|
{},
|
|
@@ -3041,6 +3083,7 @@ exports[`AvatarScreen renders screen 1`] = `
|
|
|
3041
3083
|
undefined,
|
|
3042
3084
|
undefined,
|
|
3043
3085
|
undefined,
|
|
3086
|
+
undefined,
|
|
3044
3087
|
{},
|
|
3045
3088
|
{},
|
|
3046
3089
|
{
|
|
@@ -62,14 +62,12 @@ export default class DateTimePickerScreen extends Component<{}, State> {
|
|
|
62
62
|
<View padding-page>
|
|
63
63
|
<Text text40>Date Time Picker</Text>
|
|
64
64
|
<DateTimePicker
|
|
65
|
-
migrateTextField
|
|
66
65
|
containerStyle={{marginVertical: 20}}
|
|
67
66
|
label={'Date'}
|
|
68
67
|
placeholder={'Select a date'}
|
|
69
68
|
// value={new Date('October 13, 2014')}
|
|
70
69
|
/>
|
|
71
70
|
<DateTimePicker
|
|
72
|
-
migrateTextField
|
|
73
71
|
mode={'time'}
|
|
74
72
|
label={'Time'}
|
|
75
73
|
placeholder={'Select time'}
|
|
@@ -80,14 +78,12 @@ export default class DateTimePickerScreen extends Component<{}, State> {
|
|
|
80
78
|
Disabled
|
|
81
79
|
</Text>
|
|
82
80
|
<DateTimePicker
|
|
83
|
-
migrateTextField
|
|
84
81
|
containerStyle={{marginBottom: 20}}
|
|
85
82
|
editable={false}
|
|
86
83
|
label={'Date'}
|
|
87
84
|
placeholder={'Select a date'}
|
|
88
85
|
/>
|
|
89
86
|
<DateTimePicker
|
|
90
|
-
migrateTextField
|
|
91
87
|
editable={false}
|
|
92
88
|
mode={'time'}
|
|
93
89
|
label={'Time'}
|
|
@@ -108,7 +104,6 @@ export default class DateTimePickerScreen extends Component<{}, State> {
|
|
|
108
104
|
</View>
|
|
109
105
|
</View>
|
|
110
106
|
<DateTimePicker
|
|
111
|
-
migrateTextField
|
|
112
107
|
containerStyle={{marginVertical: 20}}
|
|
113
108
|
renderInput={this.renderCustomInput}
|
|
114
109
|
mode={mode}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _ from 'lodash';
|
|
2
2
|
import React, {PureComponent} from 'react';
|
|
3
3
|
import {ScrollView, StyleSheet} from 'react-native';
|
|
4
|
-
import {Card, Text, Image, ListItem, Carousel,
|
|
4
|
+
import {Card, Text, Image, ListItem, Carousel, View, ExpandableSection, Switch} from 'react-native-ui-lib';
|
|
5
5
|
|
|
6
6
|
const cardImage2 = require('../../assets/images/empty-state.jpg');
|
|
7
7
|
const cardImage = require('../../assets/images/card-example.jpg');
|
|
@@ -32,6 +32,7 @@ const options = [
|
|
|
32
32
|
{label: 'C++', value: 'c++', disabled: true},
|
|
33
33
|
{label: 'Perl', value: 'perl'}
|
|
34
34
|
];
|
|
35
|
+
|
|
35
36
|
const filters = [
|
|
36
37
|
{label: 'All', value: 0},
|
|
37
38
|
{label: 'Draft', value: 1},
|
|
@@ -45,6 +46,16 @@ const schemes = [
|
|
|
45
46
|
{label: 'Dark', value: 3}
|
|
46
47
|
];
|
|
47
48
|
|
|
49
|
+
const dialogOptions = [
|
|
50
|
+
{label: 'Option 1', value: 0},
|
|
51
|
+
{label: 'Option 2', value: 1},
|
|
52
|
+
{label: 'Option 3', value: 2},
|
|
53
|
+
{label: 'Option 4', value: 3, disabled: true},
|
|
54
|
+
{label: 'Option 5', value: 4},
|
|
55
|
+
{label: 'Option 6', value: 5},
|
|
56
|
+
{label: 'Option 7', value: 6},
|
|
57
|
+
{label: 'Option 8', value: 6}
|
|
58
|
+
];
|
|
48
59
|
export default class PickerScreen extends Component {
|
|
49
60
|
picker = React.createRef<PickerMethods>();
|
|
50
61
|
state = {
|
|
@@ -53,7 +64,9 @@ export default class PickerScreen extends Component {
|
|
|
53
64
|
language: undefined,
|
|
54
65
|
language2: options[2].value,
|
|
55
66
|
languages: [],
|
|
67
|
+
option: undefined,
|
|
56
68
|
nativePickerValue: 'java',
|
|
69
|
+
dialogPickerValue: 'java',
|
|
57
70
|
customModalValues: [],
|
|
58
71
|
filter: filters[0].value,
|
|
59
72
|
scheme: schemes[0].value,
|
|
@@ -125,7 +138,6 @@ export default class PickerScreen extends Component {
|
|
|
125
138
|
label="Wheel Picker"
|
|
126
139
|
placeholder="Pick a Language"
|
|
127
140
|
useWheelPicker
|
|
128
|
-
// useWheelPicker
|
|
129
141
|
value={this.state.nativePickerValue}
|
|
130
142
|
onChange={nativePickerValue => this.setState({nativePickerValue})}
|
|
131
143
|
trailingAccessory={<Icon source={dropdown}/>}
|
|
@@ -164,6 +176,30 @@ export default class PickerScreen extends Component {
|
|
|
164
176
|
))}
|
|
165
177
|
</Picker>
|
|
166
178
|
|
|
179
|
+
<Picker
|
|
180
|
+
label="Dialog Picker"
|
|
181
|
+
placeholder="Favorite Language"
|
|
182
|
+
mode={Picker.modes.MULTI}
|
|
183
|
+
value={this.state.option}
|
|
184
|
+
enableModalBlur={false}
|
|
185
|
+
onChange={item => this.setState({option: item})}
|
|
186
|
+
topBarProps={{title: 'Languages'}}
|
|
187
|
+
useDialog
|
|
188
|
+
renderCustomDialogHeader={({onDone, onCancel}) => (
|
|
189
|
+
<View padding-s5 row spread>
|
|
190
|
+
<Button link label="Cancel" onPress={onCancel}/>
|
|
191
|
+
<Button link label="Done" onPress={onDone}/>
|
|
192
|
+
</View>
|
|
193
|
+
)}
|
|
194
|
+
customPickerProps={{migrateDialog: true, dialogProps: {bottom: true, width: '100%', height: '45%'}}}
|
|
195
|
+
showSearch
|
|
196
|
+
searchPlaceholder={'Search a language'}
|
|
197
|
+
>
|
|
198
|
+
{_.map(dialogOptions, option => (
|
|
199
|
+
<Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled}/>
|
|
200
|
+
))}
|
|
201
|
+
</Picker>
|
|
202
|
+
|
|
167
203
|
<Text marginB-10 text70 $textDefault>
|
|
168
204
|
Custom Picker:
|
|
169
205
|
</Text>
|
|
@@ -56,12 +56,13 @@ export default class TextFieldScreen extends Component {
|
|
|
56
56
|
<ScrollView keyboardShouldPersistTaps="always">
|
|
57
57
|
<View flex padding-page>
|
|
58
58
|
<Text h1>TextField</Text>
|
|
59
|
-
<Text h3
|
|
59
|
+
<Text h3 marginV-s4>
|
|
60
60
|
Default
|
|
61
61
|
</Text>
|
|
62
|
+
{/* @ts-expect-error */}
|
|
62
63
|
<TextField ref={this.input} label="Name" placeholder="Enter full name"/>
|
|
63
64
|
|
|
64
|
-
<Text h3
|
|
65
|
+
<Text h3 marginV-s4>
|
|
65
66
|
Static vs Floating Placeholder
|
|
66
67
|
</Text>
|
|
67
68
|
<View row bottom>
|
|
@@ -83,11 +84,12 @@ export default class TextFieldScreen extends Component {
|
|
|
83
84
|
fieldStyle={styles.withUnderline}
|
|
84
85
|
/>
|
|
85
86
|
</View>
|
|
86
|
-
<Text h3
|
|
87
|
+
<Text h3 marginV-s4>
|
|
87
88
|
Accessories
|
|
88
89
|
</Text>
|
|
89
90
|
|
|
90
91
|
<TextField
|
|
92
|
+
// @ts-expect-error
|
|
91
93
|
ref={this.input2}
|
|
92
94
|
placeholder="Enter search term"
|
|
93
95
|
text70
|
|
@@ -97,6 +99,7 @@ export default class TextFieldScreen extends Component {
|
|
|
97
99
|
/>
|
|
98
100
|
|
|
99
101
|
<TextField
|
|
102
|
+
// @ts-expect-error
|
|
100
103
|
ref={this.input2}
|
|
101
104
|
placeholder="Enter URL"
|
|
102
105
|
floatingPlaceholder
|
|
@@ -111,6 +114,7 @@ export default class TextFieldScreen extends Component {
|
|
|
111
114
|
/>
|
|
112
115
|
|
|
113
116
|
<TextField
|
|
117
|
+
// @ts-expect-error
|
|
114
118
|
ref={this.input2}
|
|
115
119
|
placeholder="Enter weight"
|
|
116
120
|
text70
|
|
@@ -124,7 +128,7 @@ export default class TextFieldScreen extends Component {
|
|
|
124
128
|
/>
|
|
125
129
|
|
|
126
130
|
<View row marginV-s4 spread>
|
|
127
|
-
<Text h3
|
|
131
|
+
<Text h3>
|
|
128
132
|
Validation
|
|
129
133
|
</Text>
|
|
130
134
|
|
|
@@ -162,6 +166,7 @@ export default class TextFieldScreen extends Component {
|
|
|
162
166
|
|
|
163
167
|
<View row top marginT-s4>
|
|
164
168
|
<TextField
|
|
169
|
+
// @ts-expect-error
|
|
165
170
|
ref={this.inputWithValidation}
|
|
166
171
|
placeholder="Enter full name"
|
|
167
172
|
validate="required"
|
|
@@ -180,7 +185,7 @@ export default class TextFieldScreen extends Component {
|
|
|
180
185
|
</View>
|
|
181
186
|
|
|
182
187
|
<View row centerV spread>
|
|
183
|
-
<Text h3
|
|
188
|
+
<Text h3 marginV-s4>
|
|
184
189
|
Colors By State
|
|
185
190
|
</Text>
|
|
186
191
|
<View row>
|
|
@@ -217,7 +222,7 @@ export default class TextFieldScreen extends Component {
|
|
|
217
222
|
/>
|
|
218
223
|
|
|
219
224
|
<View row spread centerV>
|
|
220
|
-
<Text h3
|
|
225
|
+
<Text h3 marginV-s4>
|
|
221
226
|
Custom Field Style
|
|
222
227
|
</Text>
|
|
223
228
|
<Button
|
|
@@ -238,7 +243,7 @@ export default class TextFieldScreen extends Component {
|
|
|
238
243
|
readonly={isReadonly}
|
|
239
244
|
/>
|
|
240
245
|
|
|
241
|
-
<Text h3
|
|
246
|
+
<Text h3 marginV-s4>
|
|
242
247
|
Char Counter
|
|
243
248
|
</Text>
|
|
244
249
|
|
|
@@ -256,7 +261,7 @@ export default class TextFieldScreen extends Component {
|
|
|
256
261
|
maxLength={20}
|
|
257
262
|
fieldStyle={styles.withFrame}
|
|
258
263
|
/>
|
|
259
|
-
<Text h3
|
|
264
|
+
<Text h3 marginV-s4>
|
|
260
265
|
Hint
|
|
261
266
|
</Text>
|
|
262
267
|
<TextField
|
|
@@ -265,7 +270,7 @@ export default class TextFieldScreen extends Component {
|
|
|
265
270
|
hint="1-6 chars including numeric chars"
|
|
266
271
|
fieldStyle={styles.withUnderline}
|
|
267
272
|
/>
|
|
268
|
-
<Text h3
|
|
273
|
+
<Text h3 marginV-s4>
|
|
269
274
|
Formatter
|
|
270
275
|
</Text>
|
|
271
276
|
<TextField
|
|
@@ -285,7 +290,7 @@ export default class TextFieldScreen extends Component {
|
|
|
285
290
|
fieldStyle={styles.withUnderline}
|
|
286
291
|
/>
|
|
287
292
|
|
|
288
|
-
<Text h3
|
|
293
|
+
<Text h3 marginV-s4>
|
|
289
294
|
Custom Alignments
|
|
290
295
|
</Text>
|
|
291
296
|
|