@hero-design/rn-work-uikit 1.9.5 → 1.10.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.
Files changed (45) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/README.md +219 -63
  3. package/assets/fonts/hero-icons-mobile.ttf +0 -0
  4. package/es/index.js +55337 -0
  5. package/lib/index.js +7173 -21259
  6. package/package.json +22 -22
  7. package/src/components/FormGroup/index.tsx +21 -10
  8. package/src/components/FormGroup/utils.ts +3 -3
  9. package/src/components/TextInput/InputRow.tsx +3 -6
  10. package/src/components/TextInput/index.tsx +4 -4
  11. package/src/components/TextInput/types.ts +4 -8
  12. package/types/index.d.ts +525 -0
  13. package/src/__tests__/index-export.spec.ts +0 -64
  14. package/src/__tests__/index.spec.tsx +0 -14
  15. package/src/components/DatePicker/__tests__/__snapshots__/index.spec.tsx.snap +0 -1649
  16. package/src/components/DatePicker/__tests__/index.spec.tsx +0 -56
  17. package/src/components/FormGroup/__tests__/__snapshots__/index.spec.tsx.snap +0 -908
  18. package/src/components/FormGroup/__tests__/index.spec.tsx +0 -319
  19. package/src/components/FormGroup/__tests__/utils.spec.ts +0 -73
  20. package/src/components/RichTextEditor/__tests__/EditorToolbar.spec.tsx +0 -154
  21. package/src/components/RichTextEditor/__tests__/MentionList.spec.tsx +0 -105
  22. package/src/components/RichTextEditor/__tests__/RichTextEditor.spec.tsx +0 -81
  23. package/src/components/RichTextEditor/__tests__/RichTextEditorInput.spec.tsx +0 -174
  24. package/src/components/RichTextEditor/__tests__/__snapshots__/EditorToolbar.spec.tsx.snap +0 -407
  25. package/src/components/RichTextEditor/__tests__/__snapshots__/MentionList.spec.tsx.snap +0 -13
  26. package/src/components/Select/__tests__/__snapshots__/index.spec.tsx.snap +0 -1324
  27. package/src/components/Select/__tests__/index.spec.tsx +0 -43
  28. package/src/components/TextInput/__tests__/ErrorOrHelpText.spec.tsx +0 -20
  29. package/src/components/TextInput/__tests__/FloatingLabel.spec.tsx +0 -190
  30. package/src/components/TextInput/__tests__/InputComponent.spec.tsx +0 -41
  31. package/src/components/TextInput/__tests__/InputRow.spec.tsx +0 -233
  32. package/src/components/TextInput/__tests__/MaxLengthMessage.spec.tsx +0 -17
  33. package/src/components/TextInput/__tests__/PrefixComponent.spec.tsx +0 -14
  34. package/src/components/TextInput/__tests__/StyledTextInput.spec.tsx +0 -114
  35. package/src/components/TextInput/__tests__/SuffixComponent.spec.tsx +0 -20
  36. package/src/components/TextInput/__tests__/__snapshots__/StyledTextInput.spec.tsx.snap +0 -583
  37. package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap +0 -5835
  38. package/src/components/TextInput/__tests__/getState.spec.tsx +0 -89
  39. package/src/components/TextInput/__tests__/index.spec.tsx +0 -679
  40. package/src/components/TimePicker/__tests__/index.spec.tsx +0 -34
  41. package/src/theme/__tests__/ThemeProvider.spec.tsx +0 -32
  42. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +0 -2042
  43. package/src/theme/__tests__/index.spec.ts +0 -7
  44. package/src/utils/__tests__/helpers.spec.ts +0 -92
  45. package/stats/1.3.0/rn-work-uikit-stats.html +0 -4842
package/src/components/DatePicker/__tests__/__snapshots__/index.spec.tsx.snap DELETED
@@ -1,1649 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`DatePicker renders correctly (snapshot) 1`] = `
4
- <TouchableOpacity
5
- disabled={false}
6
- onPress={[Function]}
7
- style={
8
- [
9
- [
10
- {},
11
- ],
12
- undefined,
13
- ]
14
- }
15
- testID="date-picker-ios-touchable-opacity"
16
- themeGroupStyleEnabled={false}
17
- themeHasError={false}
18
- >
19
- <View
20
- pointerEvents="none"
21
- testID="datePickerInputIOS"
22
- >
23
- <Pressable
24
- accessibilityState={
25
- {
26
- "disabled": false,
27
- }
28
- }
29
- disabled={false}
30
- onPress={[Function]}
31
- style={
32
- [
33
- [
34
- {
35
- "flexDirection": "row",
36
- "marginTop": 7.846153846153847,
37
- "minHeight": 54.92307692307692,
38
- "paddingHorizontal": 15.692307692307693,
39
- "width": "100%",
40
- },
41
- ],
42
- {},
43
- ]
44
- }
45
- themeFocused={false}
46
- themeGroupStyleEnabled={false}
47
- themeHasError={false}
48
- >
49
- <View
50
- pointerEvents="none"
51
- style={
52
- [
53
- [
54
- {
55
- "borderColor": "#e8e9ea",
56
- "borderRadius": 8,
57
- "borderWidth": 2,
58
- },
59
- ],
60
- [
61
- {
62
- "backgroundColor": "#ffffff",
63
- },
64
- {},
65
- ],
66
- ]
67
- }
68
- testID="text-input-border"
69
- themeFocused={false}
70
- themeState="filled"
71
- />
72
- <View
73
- style={
74
- [
75
- [
76
- {
77
- "backgroundColor": "transparent",
78
- "borderRadius": 8,
79
- "flex": 1,
80
- "flexDirection": "column",
81
- "marginBottom": 7.846153846153847,
82
- "marginTop": 7.846153846153847,
83
- "overflow": "hidden",
84
- },
85
- ],
86
- undefined,
87
- ]
88
- }
89
- >
90
- <AnimatedView
91
- style={
92
- [
93
- [
94
- {
95
- "alignItems": "center",
96
- "backgroundColor": "transparent",
97
- "flexDirection": "row",
98
- },
99
- ],
100
- [
101
- {
102
- "transformOrigin": "left center",
103
- },
104
- {
105
- "transform": [
106
- {
107
- "translateY": {
108
- "addListener": [MockFunction],
109
- "removeListener": [MockFunction],
110
- "setValue": [MockFunction],
111
- },
112
- },
113
- {
114
- "scale": {
115
- "addListener": [MockFunction],
116
- "removeListener": [MockFunction],
117
- "setValue": [MockFunction],
118
- },
119
- },
120
- ],
121
- },
122
- ],
123
- ]
124
- }
125
- testID="input-label"
126
- themeVariant="text"
127
- >
128
- <AnimatedView
129
- style={
130
- {
131
- "flexDirection": "row",
132
- }
133
- }
134
- >
135
- <Text
136
- allowFontScaling={false}
137
- numberOfLines={1}
138
- style={
139
- [
140
- [
141
- {
142
- "color": "#001f23",
143
- "fontFamily": "BeVietnamPro-Regular",
144
- "fontSize": 11.76923076923077,
145
- "letterSpacing": 0.36,
146
- "lineHeight": 15.76923076923077,
147
- },
148
- ],
149
- [
150
- [
151
- {
152
- "color": "#808f91",
153
- },
154
- ],
155
- {
156
- "backgroundColor": "transparent",
157
- },
158
- ],
159
- ]
160
- }
161
- testID="input-label-text"
162
- themeFontWeight="regular"
163
- themeIntent="body"
164
- themeIsItalic={false}
165
- themeState="filled"
166
- >
167
- Start date
168
- </Text>
169
- <Text
170
- allowFontScaling={false}
171
- style={
172
- [
173
- [
174
- {
175
- "color": "#001f23",
176
- "fontFamily": "BeVietnamPro-Regular",
177
- "fontSize": 11.76923076923077,
178
- "letterSpacing": 0.36,
179
- "lineHeight": 15.76923076923077,
180
- },
181
- ],
182
- [
183
- [
184
- {
185
- "color": "#808f91",
186
- },
187
- ],
188
- undefined,
189
- ],
190
- ]
191
- }
192
- themeFontWeight="regular"
193
- themeIntent="body"
194
- themeIsItalic={false}
195
- themeState="filled"
196
- >
197
- (Optional)
198
- </Text>
199
- </AnimatedView>
200
- </AnimatedView>
201
- <Pressable
202
- style={
203
- [
204
- [
205
- {
206
- "alignItems": "center",
207
- "flexDirection": "row",
208
- "flexGrow": 2,
209
- "flexShrink": 1,
210
- "opacity": 1,
211
- },
212
- ],
213
- undefined,
214
- ]
215
- }
216
- themeOpacity={1}
217
- >
218
- <View />
219
- <View
220
- accessibilityLabel="Text input field"
221
- style={
222
- {
223
- "flex": 1,
224
- }
225
- }
226
- testID="input-row-input-wrapper"
227
- >
228
- <TextInput
229
- accessibilityState={
230
- {
231
- "disabled": false,
232
- }
233
- }
234
- allowFontScaling={false}
235
- editable={true}
236
- onBlur={[Function]}
237
- onChangeText={[Function]}
238
- onFocus={[Function]}
239
- placeholder=" "
240
- placeholderTextColor="#001f23"
241
- style={
242
- [
243
- [
244
- {
245
- "flexGrow": 2,
246
- "fontFamily": "BeVietnamPro-Regular",
247
- "fontSize": 15.692307692307693,
248
- "height": undefined,
249
- "maxHeight": 141.23076923076923,
250
- "minHeight": 23.53846153846154,
251
- "paddingVertical": 0,
252
- "textAlignVertical": "center",
253
- },
254
- ],
255
- [
256
- {
257
- "backgroundColor": "#ffffff",
258
- "color": "#001f23",
259
- },
260
- {},
261
- ],
262
- ]
263
- }
264
- testID="text-input"
265
- themeVariant="text"
266
- value="17/12/1995"
267
- />
268
- </View>
269
- </Pressable>
270
- <View
271
- style={
272
- [
273
- [
274
- {
275
- "alignItems": "flex-start",
276
- "flexDirection": "row",
277
- "justifyContent": "space-between",
278
- },
279
- ],
280
- undefined,
281
- ]
282
- }
283
- />
284
- </View>
285
- <View
286
- style={
287
- [
288
- [
289
- {
290
- "alignItems": "center",
291
- "flexDirection": "row",
292
- "justifyContent": "flex-end",
293
- },
294
- ],
295
- undefined,
296
- ]
297
- }
298
- >
299
- <Text
300
- accessibilityLabel="Suffix icon: calendar-dates-outlined"
301
- accessibilityRole="image"
302
- allowFontScaling={false}
303
- selectable={false}
304
- style={
305
- [
306
- {
307
- "color": undefined,
308
- "fontSize": 12,
309
- },
310
- [
311
- [
312
- {
313
- "color": "#001f23",
314
- "fontSize": 23.53846153846154,
315
- },
316
- ],
317
- undefined,
318
- ],
319
- {
320
- "fontFamily": "hero-icons-mobile",
321
- "fontStyle": "normal",
322
- "fontWeight": "normal",
323
- },
324
- {},
325
- ]
326
- }
327
- testID="input-suffix"
328
- themeIntent="text"
329
- themeSize="medium"
330
- >
331
-
332
- </Text>
333
- </View>
334
- </Pressable>
335
- </View>
336
- <Modal
337
- onRequestClose={[Function]}
338
- supportedOrientations={
339
- [
340
- "portrait",
341
- ]
342
- }
343
- transparent={true}
344
- visible={false}
345
- >
346
- <View
347
- pointerEvents="box-none"
348
- style={
349
- [
350
- [
351
- {
352
- "flexDirection": "column-reverse",
353
- },
354
- ],
355
- undefined,
356
- ]
357
- }
358
- >
359
- <KeyboardAvoidingView
360
- behavior="padding"
361
- style={
362
- [
363
- [
364
- {
365
- "flex": 1,
366
- "flexDirection": "column-reverse",
367
- },
368
- ],
369
- undefined,
370
- ]
371
- }
372
- >
373
- <Pressable
374
- onPress={[Function]}
375
- style={
376
- [
377
- [
378
- {
379
- "backgroundColor": "#000000",
380
- "opacity": 0.4,
381
- },
382
- ],
383
- {
384
- "opacity": {
385
- "addListener": [MockFunction],
386
- "removeListener": [MockFunction],
387
- "setValue": [MockFunction],
388
- },
389
- },
390
- ]
391
- }
392
- />
393
- <SafeAreaView
394
- style={
395
- [
396
- [
397
- {
398
- "backgroundColor": "#ffffff",
399
- "borderTopLeftRadius": 16,
400
- "borderTopRightRadius": 16,
401
- "maxHeight": "94%",
402
- "width": "100%",
403
- },
404
- ],
405
- [
406
- undefined,
407
- {
408
- "transform": [
409
- {
410
- "scaleY": 1,
411
- },
412
- {
413
- "translateY": {
414
- "addListener": [MockFunction],
415
- "removeListener": [MockFunction],
416
- "setValue": [MockFunction],
417
- },
418
- },
419
- ],
420
- },
421
- ],
422
- ]
423
- }
424
- >
425
- <View
426
- style={
427
- [
428
- [
429
- {
430
- "flexDirection": "row",
431
- "paddingHorizontal": 15.692307692307693,
432
- "paddingVertical": 7.846153846153847,
433
- },
434
- ],
435
- undefined,
436
- ]
437
- }
438
- >
439
- <View
440
- style={
441
- [
442
- [
443
- {
444
- "flex": 1,
445
- "justifyContent": "center",
446
- },
447
- ],
448
- undefined,
449
- ]
450
- }
451
- >
452
- <Text
453
- allowFontScaling={false}
454
- style={
455
- [
456
- [
457
- {
458
- "color": "#001f23",
459
- "fontFamily": "BeVietnamPro-SemiBold",
460
- "fontSize": 15.692307692307693,
461
- "letterSpacing": 0.24,
462
- "lineHeight": 23.692307692307693,
463
- },
464
- ],
465
- undefined,
466
- ]
467
- }
468
- themeIntent="body"
469
- themeIsItalic={false}
470
- themeTypeface="neutral"
471
- themeVariant="regular-bold"
472
- >
473
- Start date
474
- </Text>
475
- </View>
476
- <View
477
- style={
478
- [
479
- [
480
- {
481
- "alignItems": "flex-end",
482
- "height": 47.07692307692308,
483
- "justifyContent": "center",
484
- "marginLeft": 11.76923076923077,
485
- "width": 47.07692307692308,
486
- },
487
- ],
488
- undefined,
489
- ]
490
- }
491
- >
492
- <TouchableOpacity
493
- onPress={[Function]}
494
- testID="bottom-sheet-close-icon"
495
- >
496
- <Text
497
- allowFontScaling={false}
498
- selectable={false}
499
- style={
500
- [
501
- {
502
- "color": undefined,
503
- "fontSize": 12,
504
- },
505
- [
506
- [
507
- {
508
- "color": "#001f23",
509
- "fontSize": 15.692307692307693,
510
- },
511
- ],
512
- undefined,
513
- ],
514
- {
515
- "fontFamily": "hero-icons-mobile",
516
- "fontStyle": "normal",
517
- "fontWeight": "normal",
518
- },
519
- {},
520
- ]
521
- }
522
- themeIntent="text"
523
- themeSize="xsmall"
524
- >
525
-
526
- </Text>
527
- </TouchableOpacity>
528
- </View>
529
- </View>
530
- <View
531
- style={
532
- [
533
- [
534
- {
535
- "alignItems": "center",
536
- "height": 172.6153846153846,
537
- },
538
- ],
539
- undefined,
540
- ]
541
- }
542
- >
543
- <RCTView
544
- data-mock-type="DateTimePicker"
545
- data-testid="mock-DateTimePicker"
546
- display="spinner"
547
- locale="en-AU"
548
- maximumDate={1996-12-17T00:00:00.000Z}
549
- minimumDate={1994-12-17T00:00:00.000Z}
550
- mode="date"
551
- onChange={[Function]}
552
- style={
553
- {
554
- "flex": 1,
555
- }
556
- }
557
- testID="datePickerIOS"
558
- textColor="#001f23"
559
- value={1995-12-17T00:00:00.000Z}
560
- />
561
- </View>
562
- <View>
563
- <View
564
- style={
565
- [
566
- [
567
- {
568
- "alignItems": "center",
569
- "flexDirection": "row",
570
- "justifyContent": "flex-end",
571
- "paddingHorizontal": 11.76923076923077,
572
- "paddingVertical": 1.9615384615384617,
573
- },
574
- ],
575
- undefined,
576
- ]
577
- }
578
- >
579
- <TouchableHighlight
580
- disabled={false}
581
- loading={false}
582
- onPress={[Function]}
583
- onPressIn={[Function]}
584
- onPressOut={[Function]}
585
- style={
586
- [
587
- [
588
- {
589
- "alignItems": "center",
590
- "backgroundColor": "transparent",
591
- "borderRadius": 999,
592
- "borderWidth": 0,
593
- "flexDirection": "row",
594
- "height": 58.84615384615385,
595
- "justifyContent": "center",
596
- "padding": 11.76923076923077,
597
- },
598
- ],
599
- undefined,
600
- ]
601
- }
602
- themeButtonVariant="text-primary"
603
- themeInlineText={false}
604
- themeIsCompact={false}
605
- themeIsIconOnly={false}
606
- themeIsMedium={false}
607
- underlayColor="#ece8ef"
608
- >
609
- <Text
610
- allowFontScaling={false}
611
- disabled={false}
612
- ellipsizeMode="tail"
613
- numberOfLines={1}
614
- style={
615
- [
616
- [
617
- {
618
- "color": "#001f23",
619
- "fontFamily": "BeVietnamPro-SemiBold",
620
- "fontSize": 15.692307692307693,
621
- "letterSpacing": 0.24,
622
- "lineHeight": 23.692307692307693,
623
- },
624
- ],
625
- [
626
- [
627
- {
628
- "color": "#401960",
629
- "flexShrink": 1,
630
- "lineHeight": 21.73076923076923,
631
- "textAlign": "center",
632
- "textAlignVertical": "center",
633
- },
634
- ],
635
- undefined,
636
- ],
637
- ]
638
- }
639
- themeButtonVariant="text-primary"
640
- themeIntent="body"
641
- themeIsCompact={false}
642
- themeIsItalic={false}
643
- themeIsPressed={false}
644
- themeTypeface="neutral"
645
- themeVariant="regular-bold"
646
- >
647
- Confirm
648
- </Text>
649
- </TouchableHighlight>
650
- </View>
651
- </View>
652
- </SafeAreaView>
653
- </KeyboardAvoidingView>
654
- </View>
655
- </Modal>
656
- </TouchableOpacity>
657
- `;
658
-
659
- exports[`Dialog renders DatePickerAndroid when OS is android 1`] = `
660
- <TouchableOpacity
661
- disabled={false}
662
- onPress={[Function]}
663
- style={
664
- [
665
- [
666
- {},
667
- ],
668
- undefined,
669
- ]
670
- }
671
- testID="date-picker-android-touchable-opacity"
672
- themeGroupStyleEnabled={false}
673
- themeHasError={false}
674
- >
675
- <View
676
- pointerEvents="none"
677
- testID="datePickerInputAndroid"
678
- >
679
- <Pressable
680
- accessibilityState={
681
- {
682
- "disabled": false,
683
- }
684
- }
685
- disabled={false}
686
- onPress={[Function]}
687
- style={
688
- [
689
- [
690
- {
691
- "flexDirection": "row",
692
- "marginTop": 7.846153846153847,
693
- "minHeight": 54.92307692307692,
694
- "paddingHorizontal": 15.692307692307693,
695
- "width": "100%",
696
- },
697
- ],
698
- {},
699
- ]
700
- }
701
- themeFocused={false}
702
- themeGroupStyleEnabled={false}
703
- themeHasError={false}
704
- >
705
- <View
706
- pointerEvents="none"
707
- style={
708
- [
709
- [
710
- {
711
- "borderColor": "#e8e9ea",
712
- "borderRadius": 8,
713
- "borderWidth": 2,
714
- },
715
- ],
716
- [
717
- {
718
- "backgroundColor": "#ffffff",
719
- },
720
- {},
721
- ],
722
- ]
723
- }
724
- testID="text-input-border"
725
- themeFocused={false}
726
- themeState="filled"
727
- />
728
- <View
729
- style={
730
- [
731
- [
732
- {
733
- "backgroundColor": "transparent",
734
- "borderRadius": 8,
735
- "flex": 1,
736
- "flexDirection": "column",
737
- "marginBottom": 7.846153846153847,
738
- "marginTop": 7.846153846153847,
739
- "overflow": "hidden",
740
- },
741
- ],
742
- undefined,
743
- ]
744
- }
745
- >
746
- <AnimatedView
747
- style={
748
- [
749
- [
750
- {
751
- "alignItems": "center",
752
- "backgroundColor": "transparent",
753
- "flexDirection": "row",
754
- },
755
- ],
756
- [
757
- {
758
- "transformOrigin": "left center",
759
- },
760
- {
761
- "transform": [
762
- {
763
- "translateY": {
764
- "addListener": [MockFunction],
765
- "removeListener": [MockFunction],
766
- "setValue": [MockFunction],
767
- },
768
- },
769
- {
770
- "scale": {
771
- "addListener": [MockFunction],
772
- "removeListener": [MockFunction],
773
- "setValue": [MockFunction],
774
- },
775
- },
776
- ],
777
- },
778
- ],
779
- ]
780
- }
781
- testID="input-label"
782
- themeVariant="text"
783
- >
784
- <AnimatedView
785
- style={
786
- {
787
- "flexDirection": "row",
788
- }
789
- }
790
- >
791
- <Text
792
- allowFontScaling={false}
793
- numberOfLines={1}
794
- style={
795
- [
796
- [
797
- {
798
- "color": "#001f23",
799
- "fontFamily": "BeVietnamPro-Regular",
800
- "fontSize": 11.76923076923077,
801
- "letterSpacing": 0.36,
802
- "lineHeight": 15.76923076923077,
803
- },
804
- ],
805
- [
806
- [
807
- {
808
- "color": "#808f91",
809
- },
810
- ],
811
- {
812
- "backgroundColor": "transparent",
813
- },
814
- ],
815
- ]
816
- }
817
- testID="input-label-text"
818
- themeFontWeight="regular"
819
- themeIntent="body"
820
- themeIsItalic={false}
821
- themeState="filled"
822
- >
823
- Start date
824
- </Text>
825
- <Text
826
- allowFontScaling={false}
827
- style={
828
- [
829
- [
830
- {
831
- "color": "#001f23",
832
- "fontFamily": "BeVietnamPro-Regular",
833
- "fontSize": 11.76923076923077,
834
- "letterSpacing": 0.36,
835
- "lineHeight": 15.76923076923077,
836
- },
837
- ],
838
- [
839
- [
840
- {
841
- "color": "#808f91",
842
- },
843
- ],
844
- undefined,
845
- ],
846
- ]
847
- }
848
- themeFontWeight="regular"
849
- themeIntent="body"
850
- themeIsItalic={false}
851
- themeState="filled"
852
- >
853
- (Optional)
854
- </Text>
855
- </AnimatedView>
856
- </AnimatedView>
857
- <Pressable
858
- style={
859
- [
860
- [
861
- {
862
- "alignItems": "center",
863
- "flexDirection": "row",
864
- "flexGrow": 2,
865
- "flexShrink": 1,
866
- "opacity": 1,
867
- },
868
- ],
869
- undefined,
870
- ]
871
- }
872
- themeOpacity={1}
873
- >
874
- <View />
875
- <View
876
- accessibilityLabel="Text input field"
877
- style={
878
- {
879
- "flex": 1,
880
- }
881
- }
882
- testID="input-row-input-wrapper"
883
- >
884
- <TextInput
885
- accessibilityState={
886
- {
887
- "disabled": false,
888
- }
889
- }
890
- allowFontScaling={false}
891
- editable={true}
892
- onBlur={[Function]}
893
- onChangeText={[Function]}
894
- onFocus={[Function]}
895
- placeholder=" "
896
- placeholderTextColor="#001f23"
897
- style={
898
- [
899
- [
900
- {
901
- "flexGrow": 2,
902
- "fontFamily": "BeVietnamPro-Regular",
903
- "fontSize": 15.692307692307693,
904
- "height": undefined,
905
- "maxHeight": 141.23076923076923,
906
- "minHeight": 23.53846153846154,
907
- "paddingVertical": 0,
908
- "textAlignVertical": "center",
909
- },
910
- ],
911
- [
912
- {
913
- "backgroundColor": "#ffffff",
914
- "color": "#001f23",
915
- },
916
- {},
917
- ],
918
- ]
919
- }
920
- testID="text-input"
921
- themeVariant="text"
922
- value="17/12/1995"
923
- />
924
- </View>
925
- </Pressable>
926
- <View
927
- style={
928
- [
929
- [
930
- {
931
- "alignItems": "flex-start",
932
- "flexDirection": "row",
933
- "justifyContent": "space-between",
934
- },
935
- ],
936
- undefined,
937
- ]
938
- }
939
- />
940
- </View>
941
- <View
942
- style={
943
- [
944
- [
945
- {
946
- "alignItems": "center",
947
- "flexDirection": "row",
948
- "justifyContent": "flex-end",
949
- },
950
- ],
951
- undefined,
952
- ]
953
- }
954
- >
955
- <Text
956
- accessibilityLabel="Suffix icon: calendar-dates-outlined"
957
- accessibilityRole="image"
958
- allowFontScaling={false}
959
- selectable={false}
960
- style={
961
- [
962
- {
963
- "color": undefined,
964
- "fontSize": 12,
965
- },
966
- [
967
- [
968
- {
969
- "color": "#001f23",
970
- "fontSize": 23.53846153846154,
971
- },
972
- ],
973
- undefined,
974
- ],
975
- {
976
- "fontFamily": "hero-icons-mobile",
977
- "fontStyle": "normal",
978
- "fontWeight": "normal",
979
- },
980
- {},
981
- ]
982
- }
983
- testID="input-suffix"
984
- themeIntent="text"
985
- themeSize="medium"
986
- >
987
-
988
- </Text>
989
- </View>
990
- </Pressable>
991
- </View>
992
- </TouchableOpacity>
993
- `;
994
-
995
- exports[`Dialog renders DatePickerIOS when OS is iOS 1`] = `
996
- <TouchableOpacity
997
- disabled={false}
998
- onPress={[Function]}
999
- style={
1000
- [
1001
- [
1002
- {},
1003
- ],
1004
- undefined,
1005
- ]
1006
- }
1007
- testID="date-picker-ios-touchable-opacity"
1008
- themeGroupStyleEnabled={false}
1009
- themeHasError={false}
1010
- >
1011
- <View
1012
- pointerEvents="none"
1013
- testID="datePickerInputIOS"
1014
- >
1015
- <Pressable
1016
- accessibilityState={
1017
- {
1018
- "disabled": false,
1019
- }
1020
- }
1021
- disabled={false}
1022
- onPress={[Function]}
1023
- style={
1024
- [
1025
- [
1026
- {
1027
- "flexDirection": "row",
1028
- "marginTop": 7.846153846153847,
1029
- "minHeight": 54.92307692307692,
1030
- "paddingHorizontal": 15.692307692307693,
1031
- "width": "100%",
1032
- },
1033
- ],
1034
- {},
1035
- ]
1036
- }
1037
- themeFocused={false}
1038
- themeGroupStyleEnabled={false}
1039
- themeHasError={false}
1040
- >
1041
- <View
1042
- pointerEvents="none"
1043
- style={
1044
- [
1045
- [
1046
- {
1047
- "borderColor": "#e8e9ea",
1048
- "borderRadius": 8,
1049
- "borderWidth": 2,
1050
- },
1051
- ],
1052
- [
1053
- {
1054
- "backgroundColor": "#ffffff",
1055
- },
1056
- {},
1057
- ],
1058
- ]
1059
- }
1060
- testID="text-input-border"
1061
- themeFocused={false}
1062
- themeState="filled"
1063
- />
1064
- <View
1065
- style={
1066
- [
1067
- [
1068
- {
1069
- "backgroundColor": "transparent",
1070
- "borderRadius": 8,
1071
- "flex": 1,
1072
- "flexDirection": "column",
1073
- "marginBottom": 7.846153846153847,
1074
- "marginTop": 7.846153846153847,
1075
- "overflow": "hidden",
1076
- },
1077
- ],
1078
- undefined,
1079
- ]
1080
- }
1081
- >
1082
- <AnimatedView
1083
- style={
1084
- [
1085
- [
1086
- {
1087
- "alignItems": "center",
1088
- "backgroundColor": "transparent",
1089
- "flexDirection": "row",
1090
- },
1091
- ],
1092
- [
1093
- {
1094
- "transformOrigin": "left center",
1095
- },
1096
- {
1097
- "transform": [
1098
- {
1099
- "translateY": {
1100
- "addListener": [MockFunction],
1101
- "removeListener": [MockFunction],
1102
- "setValue": [MockFunction],
1103
- },
1104
- },
1105
- {
1106
- "scale": {
1107
- "addListener": [MockFunction],
1108
- "removeListener": [MockFunction],
1109
- "setValue": [MockFunction],
1110
- },
1111
- },
1112
- ],
1113
- },
1114
- ],
1115
- ]
1116
- }
1117
- testID="input-label"
1118
- themeVariant="text"
1119
- >
1120
- <AnimatedView
1121
- style={
1122
- {
1123
- "flexDirection": "row",
1124
- }
1125
- }
1126
- >
1127
- <Text
1128
- allowFontScaling={false}
1129
- numberOfLines={1}
1130
- style={
1131
- [
1132
- [
1133
- {
1134
- "color": "#001f23",
1135
- "fontFamily": "BeVietnamPro-Regular",
1136
- "fontSize": 11.76923076923077,
1137
- "letterSpacing": 0.36,
1138
- "lineHeight": 15.76923076923077,
1139
- },
1140
- ],
1141
- [
1142
- [
1143
- {
1144
- "color": "#808f91",
1145
- },
1146
- ],
1147
- {
1148
- "backgroundColor": "transparent",
1149
- },
1150
- ],
1151
- ]
1152
- }
1153
- testID="input-label-text"
1154
- themeFontWeight="regular"
1155
- themeIntent="body"
1156
- themeIsItalic={false}
1157
- themeState="filled"
1158
- >
1159
- Start date
1160
- </Text>
1161
- <Text
1162
- allowFontScaling={false}
1163
- style={
1164
- [
1165
- [
1166
- {
1167
- "color": "#001f23",
1168
- "fontFamily": "BeVietnamPro-Regular",
1169
- "fontSize": 11.76923076923077,
1170
- "letterSpacing": 0.36,
1171
- "lineHeight": 15.76923076923077,
1172
- },
1173
- ],
1174
- [
1175
- [
1176
- {
1177
- "color": "#808f91",
1178
- },
1179
- ],
1180
- undefined,
1181
- ],
1182
- ]
1183
- }
1184
- themeFontWeight="regular"
1185
- themeIntent="body"
1186
- themeIsItalic={false}
1187
- themeState="filled"
1188
- >
1189
- (Optional)
1190
- </Text>
1191
- </AnimatedView>
1192
- </AnimatedView>
1193
- <Pressable
1194
- style={
1195
- [
1196
- [
1197
- {
1198
- "alignItems": "center",
1199
- "flexDirection": "row",
1200
- "flexGrow": 2,
1201
- "flexShrink": 1,
1202
- "opacity": 1,
1203
- },
1204
- ],
1205
- undefined,
1206
- ]
1207
- }
1208
- themeOpacity={1}
1209
- >
1210
- <View />
1211
- <View
1212
- accessibilityLabel="Text input field"
1213
- style={
1214
- {
1215
- "flex": 1,
1216
- }
1217
- }
1218
- testID="input-row-input-wrapper"
1219
- >
1220
- <TextInput
1221
- accessibilityState={
1222
- {
1223
- "disabled": false,
1224
- }
1225
- }
1226
- allowFontScaling={false}
1227
- editable={true}
1228
- onBlur={[Function]}
1229
- onChangeText={[Function]}
1230
- onFocus={[Function]}
1231
- placeholder=" "
1232
- placeholderTextColor="#001f23"
1233
- style={
1234
- [
1235
- [
1236
- {
1237
- "flexGrow": 2,
1238
- "fontFamily": "BeVietnamPro-Regular",
1239
- "fontSize": 15.692307692307693,
1240
- "height": undefined,
1241
- "maxHeight": 141.23076923076923,
1242
- "minHeight": 23.53846153846154,
1243
- "paddingVertical": 0,
1244
- "textAlignVertical": "center",
1245
- },
1246
- ],
1247
- [
1248
- {
1249
- "backgroundColor": "#ffffff",
1250
- "color": "#001f23",
1251
- },
1252
- {},
1253
- ],
1254
- ]
1255
- }
1256
- testID="text-input"
1257
- themeVariant="text"
1258
- value="17/12/1995"
1259
- />
1260
- </View>
1261
- </Pressable>
1262
- <View
1263
- style={
1264
- [
1265
- [
1266
- {
1267
- "alignItems": "flex-start",
1268
- "flexDirection": "row",
1269
- "justifyContent": "space-between",
1270
- },
1271
- ],
1272
- undefined,
1273
- ]
1274
- }
1275
- />
1276
- </View>
1277
- <View
1278
- style={
1279
- [
1280
- [
1281
- {
1282
- "alignItems": "center",
1283
- "flexDirection": "row",
1284
- "justifyContent": "flex-end",
1285
- },
1286
- ],
1287
- undefined,
1288
- ]
1289
- }
1290
- >
1291
- <Text
1292
- accessibilityLabel="Suffix icon: calendar-dates-outlined"
1293
- accessibilityRole="image"
1294
- allowFontScaling={false}
1295
- selectable={false}
1296
- style={
1297
- [
1298
- {
1299
- "color": undefined,
1300
- "fontSize": 12,
1301
- },
1302
- [
1303
- [
1304
- {
1305
- "color": "#001f23",
1306
- "fontSize": 23.53846153846154,
1307
- },
1308
- ],
1309
- undefined,
1310
- ],
1311
- {
1312
- "fontFamily": "hero-icons-mobile",
1313
- "fontStyle": "normal",
1314
- "fontWeight": "normal",
1315
- },
1316
- {},
1317
- ]
1318
- }
1319
- testID="input-suffix"
1320
- themeIntent="text"
1321
- themeSize="medium"
1322
- >
1323
-
1324
- </Text>
1325
- </View>
1326
- </Pressable>
1327
- </View>
1328
- <Modal
1329
- onRequestClose={[Function]}
1330
- supportedOrientations={
1331
- [
1332
- "portrait",
1333
- ]
1334
- }
1335
- transparent={true}
1336
- visible={false}
1337
- >
1338
- <View
1339
- pointerEvents="box-none"
1340
- style={
1341
- [
1342
- [
1343
- {
1344
- "flexDirection": "column-reverse",
1345
- },
1346
- ],
1347
- undefined,
1348
- ]
1349
- }
1350
- >
1351
- <KeyboardAvoidingView
1352
- behavior="padding"
1353
- style={
1354
- [
1355
- [
1356
- {
1357
- "flex": 1,
1358
- "flexDirection": "column-reverse",
1359
- },
1360
- ],
1361
- undefined,
1362
- ]
1363
- }
1364
- >
1365
- <Pressable
1366
- onPress={[Function]}
1367
- style={
1368
- [
1369
- [
1370
- {
1371
- "backgroundColor": "#000000",
1372
- "opacity": 0.4,
1373
- },
1374
- ],
1375
- {
1376
- "opacity": {
1377
- "addListener": [MockFunction],
1378
- "removeListener": [MockFunction],
1379
- "setValue": [MockFunction],
1380
- },
1381
- },
1382
- ]
1383
- }
1384
- />
1385
- <SafeAreaView
1386
- style={
1387
- [
1388
- [
1389
- {
1390
- "backgroundColor": "#ffffff",
1391
- "borderTopLeftRadius": 16,
1392
- "borderTopRightRadius": 16,
1393
- "maxHeight": "94%",
1394
- "width": "100%",
1395
- },
1396
- ],
1397
- [
1398
- undefined,
1399
- {
1400
- "transform": [
1401
- {
1402
- "scaleY": 1,
1403
- },
1404
- {
1405
- "translateY": {
1406
- "addListener": [MockFunction],
1407
- "removeListener": [MockFunction],
1408
- "setValue": [MockFunction],
1409
- },
1410
- },
1411
- ],
1412
- },
1413
- ],
1414
- ]
1415
- }
1416
- >
1417
- <View
1418
- style={
1419
- [
1420
- [
1421
- {
1422
- "flexDirection": "row",
1423
- "paddingHorizontal": 15.692307692307693,
1424
- "paddingVertical": 7.846153846153847,
1425
- },
1426
- ],
1427
- undefined,
1428
- ]
1429
- }
1430
- >
1431
- <View
1432
- style={
1433
- [
1434
- [
1435
- {
1436
- "flex": 1,
1437
- "justifyContent": "center",
1438
- },
1439
- ],
1440
- undefined,
1441
- ]
1442
- }
1443
- >
1444
- <Text
1445
- allowFontScaling={false}
1446
- style={
1447
- [
1448
- [
1449
- {
1450
- "color": "#001f23",
1451
- "fontFamily": "BeVietnamPro-SemiBold",
1452
- "fontSize": 15.692307692307693,
1453
- "letterSpacing": 0.24,
1454
- "lineHeight": 23.692307692307693,
1455
- },
1456
- ],
1457
- undefined,
1458
- ]
1459
- }
1460
- themeIntent="body"
1461
- themeIsItalic={false}
1462
- themeTypeface="neutral"
1463
- themeVariant="regular-bold"
1464
- >
1465
- Start date
1466
- </Text>
1467
- </View>
1468
- <View
1469
- style={
1470
- [
1471
- [
1472
- {
1473
- "alignItems": "flex-end",
1474
- "height": 47.07692307692308,
1475
- "justifyContent": "center",
1476
- "marginLeft": 11.76923076923077,
1477
- "width": 47.07692307692308,
1478
- },
1479
- ],
1480
- undefined,
1481
- ]
1482
- }
1483
- >
1484
- <TouchableOpacity
1485
- onPress={[Function]}
1486
- testID="bottom-sheet-close-icon"
1487
- >
1488
- <Text
1489
- allowFontScaling={false}
1490
- selectable={false}
1491
- style={
1492
- [
1493
- {
1494
- "color": undefined,
1495
- "fontSize": 12,
1496
- },
1497
- [
1498
- [
1499
- {
1500
- "color": "#001f23",
1501
- "fontSize": 15.692307692307693,
1502
- },
1503
- ],
1504
- undefined,
1505
- ],
1506
- {
1507
- "fontFamily": "hero-icons-mobile",
1508
- "fontStyle": "normal",
1509
- "fontWeight": "normal",
1510
- },
1511
- {},
1512
- ]
1513
- }
1514
- themeIntent="text"
1515
- themeSize="xsmall"
1516
- >
1517
-
1518
- </Text>
1519
- </TouchableOpacity>
1520
- </View>
1521
- </View>
1522
- <View
1523
- style={
1524
- [
1525
- [
1526
- {
1527
- "alignItems": "center",
1528
- "height": 172.6153846153846,
1529
- },
1530
- ],
1531
- undefined,
1532
- ]
1533
- }
1534
- >
1535
- <RCTView
1536
- data-mock-type="DateTimePicker"
1537
- data-testid="mock-DateTimePicker"
1538
- display="spinner"
1539
- locale="en-AU"
1540
- maximumDate={1996-12-17T00:00:00.000Z}
1541
- minimumDate={1994-12-17T00:00:00.000Z}
1542
- mode="date"
1543
- onChange={[Function]}
1544
- style={
1545
- {
1546
- "flex": 1,
1547
- }
1548
- }
1549
- testID="datePickerIOS"
1550
- textColor="#001f23"
1551
- value={1995-12-17T00:00:00.000Z}
1552
- />
1553
- </View>
1554
- <View>
1555
- <View
1556
- style={
1557
- [
1558
- [
1559
- {
1560
- "alignItems": "center",
1561
- "flexDirection": "row",
1562
- "justifyContent": "flex-end",
1563
- "paddingHorizontal": 11.76923076923077,
1564
- "paddingVertical": 1.9615384615384617,
1565
- },
1566
- ],
1567
- undefined,
1568
- ]
1569
- }
1570
- >
1571
- <TouchableHighlight
1572
- disabled={false}
1573
- loading={false}
1574
- onPress={[Function]}
1575
- onPressIn={[Function]}
1576
- onPressOut={[Function]}
1577
- style={
1578
- [
1579
- [
1580
- {
1581
- "alignItems": "center",
1582
- "backgroundColor": "transparent",
1583
- "borderRadius": 999,
1584
- "borderWidth": 0,
1585
- "flexDirection": "row",
1586
- "height": 58.84615384615385,
1587
- "justifyContent": "center",
1588
- "padding": 11.76923076923077,
1589
- },
1590
- ],
1591
- undefined,
1592
- ]
1593
- }
1594
- themeButtonVariant="text-primary"
1595
- themeInlineText={false}
1596
- themeIsCompact={false}
1597
- themeIsIconOnly={false}
1598
- themeIsMedium={false}
1599
- underlayColor="#ece8ef"
1600
- >
1601
- <Text
1602
- allowFontScaling={false}
1603
- disabled={false}
1604
- ellipsizeMode="tail"
1605
- numberOfLines={1}
1606
- style={
1607
- [
1608
- [
1609
- {
1610
- "color": "#001f23",
1611
- "fontFamily": "BeVietnamPro-SemiBold",
1612
- "fontSize": 15.692307692307693,
1613
- "letterSpacing": 0.24,
1614
- "lineHeight": 23.692307692307693,
1615
- },
1616
- ],
1617
- [
1618
- [
1619
- {
1620
- "color": "#401960",
1621
- "flexShrink": 1,
1622
- "lineHeight": 21.73076923076923,
1623
- "textAlign": "center",
1624
- "textAlignVertical": "center",
1625
- },
1626
- ],
1627
- undefined,
1628
- ],
1629
- ]
1630
- }
1631
- themeButtonVariant="text-primary"
1632
- themeIntent="body"
1633
- themeIsCompact={false}
1634
- themeIsItalic={false}
1635
- themeIsPressed={false}
1636
- themeTypeface="neutral"
1637
- themeVariant="regular-bold"
1638
- >
1639
- Confirm
1640
- </Text>
1641
- </TouchableHighlight>
1642
- </View>
1643
- </View>
1644
- </SafeAreaView>
1645
- </KeyboardAvoidingView>
1646
- </View>
1647
- </Modal>
1648
- </TouchableOpacity>
1649
- `;