@hero-design/rn 7.16.1 → 7.17.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 (54) hide show
  1. package/.turbo/turbo-build.log +2 -2
  2. package/es/index.js +228 -187
  3. package/lib/index.js +227 -186
  4. package/package.json +2 -2
  5. package/src/components/DatePicker/DatePickerIOS.tsx +2 -2
  6. package/src/components/List/BasicListItem.tsx +8 -4
  7. package/src/components/List/StyledBasicListItem.tsx +2 -2
  8. package/src/components/Select/MultiSelect/Option.tsx +21 -15
  9. package/src/components/Select/MultiSelect/OptionList.tsx +47 -41
  10. package/src/components/Select/MultiSelect/__tests__/OptionList.spec.tsx +25 -14
  11. package/src/components/Select/MultiSelect/__tests__/__snapshots__/Option.spec.tsx.snap +41 -21
  12. package/src/components/Select/MultiSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap +1995 -352
  13. package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap +5611 -523
  14. package/src/components/Select/MultiSelect/__tests__/index.spec.tsx +122 -1
  15. package/src/components/Select/MultiSelect/index.tsx +26 -36
  16. package/src/components/Select/SingleSelect/Option.tsx +20 -13
  17. package/src/components/Select/SingleSelect/OptionList.tsx +47 -39
  18. package/src/components/Select/SingleSelect/__tests__/OptionList.spec.tsx +23 -12
  19. package/src/components/Select/SingleSelect/__tests__/__snapshots__/Option.spec.tsx.snap +23 -14
  20. package/src/components/Select/SingleSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap +1846 -258
  21. package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap +5140 -412
  22. package/src/components/Select/SingleSelect/__tests__/index.spec.tsx +117 -1
  23. package/src/components/Select/SingleSelect/index.tsx +26 -37
  24. package/src/components/Select/StyledOptionList.tsx +43 -44
  25. package/src/components/Select/StyledSelect.tsx +6 -15
  26. package/src/components/Select/__tests__/StyledSelect.spec.tsx +1 -23
  27. package/src/components/Select/__tests__/__snapshots__/StyledSelect.spec.tsx.snap +0 -67
  28. package/src/components/Select/__tests__/helpers.spec.tsx +74 -0
  29. package/src/components/Select/helpers.tsx +87 -4
  30. package/src/components/Select/types.ts +99 -0
  31. package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap +157 -1
  32. package/src/components/TextInput/__tests__/index.spec.tsx +29 -8
  33. package/src/components/TextInput/index.tsx +18 -7
  34. package/src/components/TimePicker/TimePickerIOS.tsx +2 -2
  35. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +3 -5
  36. package/src/theme/components/select.ts +3 -5
  37. package/src/types.ts +7 -1
  38. package/types/components/List/BasicListItem.d.ts +1 -1
  39. package/types/components/Select/MultiSelect/Option.d.ts +4 -2
  40. package/types/components/Select/MultiSelect/OptionList.d.ts +6 -7
  41. package/types/components/Select/MultiSelect/index.d.ts +5 -5
  42. package/types/components/Select/SingleSelect/Option.d.ts +4 -2
  43. package/types/components/Select/SingleSelect/OptionList.d.ts +6 -7
  44. package/types/components/Select/SingleSelect/index.d.ts +5 -5
  45. package/types/components/Select/StyledOptionList.d.ts +10 -16
  46. package/types/components/Select/StyledSelect.d.ts +5 -7
  47. package/types/components/Select/__tests__/helpers.spec.d.ts +1 -0
  48. package/types/components/Select/helpers.d.ts +14 -2
  49. package/types/components/Select/index.d.ts +1 -1
  50. package/types/components/Select/types.d.ts +32 -7
  51. package/types/components/TextInput/index.d.ts +4 -2
  52. package/types/theme/components/select.d.ts +3 -5
  53. package/types/types.d.ts +2 -1
  54. package/src/components/Select/types.tsx +0 -52
package/src/components/Select/SingleSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap CHANGED
@@ -18,16 +18,26 @@ exports[`OptionList render isLoading correctly 1`] = `
18
18
  data={
19
19
  Array [
20
20
  Object {
21
- "text": "A",
22
- "value": "a",
23
- },
24
- Object {
25
- "text": "B",
26
- "value": "b",
21
+ "category": "A",
22
+ "data": Array [
23
+ Object {
24
+ "text": "A1",
25
+ "value": "a1",
26
+ },
27
+ ],
27
28
  },
28
29
  Object {
29
- "text": "C",
30
- "value": "c",
30
+ "category": "B",
31
+ "data": Array [
32
+ Object {
33
+ "text": "B1",
34
+ "value": "b1",
35
+ },
36
+ Object {
37
+ "text": "B2",
38
+ "value": "b2",
39
+ },
40
+ ],
31
41
  },
32
42
  ]
33
43
  }
@@ -44,28 +54,139 @@ exports[`OptionList render isLoading correctly 1`] = `
44
54
  onScrollBeginDrag={[Function]}
45
55
  onScrollEndDrag={[Function]}
46
56
  onScrollToIndexFailed={[Function]}
47
- removeClippedSubviews={false}
48
57
  renderItem={[Function]}
49
58
  scrollEventThrottle={50}
50
- stickyHeaderIndices={Array []}
51
- style={
52
- Object {
53
- "paddingHorizontal": 16,
54
- }
59
+ stickyHeaderIndices={
60
+ Array [
61
+ 0,
62
+ 3,
63
+ ]
55
64
  }
56
- viewabilityConfigCallbackPairs={Array []}
65
+ style={Object {}}
57
66
  >
58
67
  <View>
68
+ <View
69
+ onLayout={[Function]}
70
+ style={null}
71
+ >
72
+ <View
73
+ style={
74
+ Array [
75
+ Object {
76
+ "alignContent": "center",
77
+ "backgroundColor": "#dadbde",
78
+ "display": "flex",
79
+ "flexDirection": "row",
80
+ "justifyContent": "space-between",
81
+ "marginBottom": 16,
82
+ "paddingHorizontal": 16,
83
+ "paddingVertical": 8,
84
+ },
85
+ Object {
86
+ "marginBottom": 0,
87
+ },
88
+ ]
89
+ }
90
+ >
91
+ <View
92
+ style={
93
+ Array [
94
+ Object {
95
+ "display": "flex",
96
+ "flexDirection": "row",
97
+ },
98
+ undefined,
99
+ ]
100
+ }
101
+ >
102
+ <View
103
+ style={
104
+ Array [
105
+ Object {
106
+ "marginRight": 8,
107
+ },
108
+ undefined,
109
+ ]
110
+ }
111
+ />
112
+ <Text
113
+ style={
114
+ Array [
115
+ Object {
116
+ "color": "#292a2b",
117
+ "fontFamily": "BeVietnamPro-Regular",
118
+ "fontSize": 16,
119
+ "letterSpacing": 0.48,
120
+ "lineHeight": 24,
121
+ },
122
+ undefined,
123
+ ]
124
+ }
125
+ themeFontSize="large"
126
+ themeFontWeight="regular"
127
+ themeIntent="body"
128
+ >
129
+ A
130
+ </Text>
131
+ </View>
132
+ </View>
133
+ </View>
59
134
  <View
60
135
  onLayout={[Function]}
61
136
  style={null}
62
137
  >
63
138
  <View>
64
139
  <View
140
+ highlighted={false}
141
+ section={
142
+ Object {
143
+ "category": "A",
144
+ "data": Array [
145
+ Object {
146
+ "text": "A1",
147
+ "value": "a1",
148
+ },
149
+ ],
150
+ }
151
+ }
152
+ style={
153
+ Array [
154
+ Object {
155
+ "marginTop": 12,
156
+ },
157
+ undefined,
158
+ ]
159
+ }
160
+ trailingItem={
161
+ Object {
162
+ "text": "A1",
163
+ "value": "a1",
164
+ }
165
+ }
166
+ trailingSection={
167
+ Object {
168
+ "category": "B",
169
+ "data": Array [
170
+ Object {
171
+ "text": "B1",
172
+ "value": "b1",
173
+ },
174
+ Object {
175
+ "text": "B2",
176
+ "value": "b2",
177
+ },
178
+ ],
179
+ }
180
+ }
181
+ />
182
+ <View
183
+ accessibilityState={
184
+ Object {
185
+ "disabled": false,
186
+ }
187
+ }
65
188
  accessible={true}
66
- collapsable={false}
67
189
  focusable={true}
68
- nativeID="animatedComponent"
69
190
  onClick={[Function]}
70
191
  onResponderGrant={[Function]}
71
192
  onResponderMove={[Function]}
@@ -74,22 +195,28 @@ exports[`OptionList render isLoading correctly 1`] = `
74
195
  onResponderTerminationRequest={[Function]}
75
196
  onStartShouldSetResponder={[Function]}
76
197
  style={
77
- Object {
78
- "alignItems": "center",
79
- "backgroundColor": "#f1e9fb",
80
- "borderRadius": 4,
81
- "flexDirection": "row",
82
- "justifyContent": "space-between",
83
- "opacity": 1,
84
- "padding": 16,
85
- }
198
+ Array [
199
+ Object {
200
+ "alignItems": "center",
201
+ "backgroundColor": "#f1e9fb",
202
+ "flexDirection": "row",
203
+ "opacity": 1,
204
+ "padding": 16,
205
+ },
206
+ Object {
207
+ "marginHorizontal": 12,
208
+ },
209
+ ]
86
210
  }
87
211
  >
88
212
  <View
89
213
  style={
90
- Object {
91
- "flex": 1,
92
- }
214
+ Array [
215
+ Object {
216
+ "flex": 1,
217
+ },
218
+ undefined,
219
+ ]
93
220
  }
94
221
  >
95
222
  <Text
@@ -109,10 +236,123 @@ exports[`OptionList render isLoading correctly 1`] = `
109
236
  themeFontWeight="regular"
110
237
  themeIntent="body"
111
238
  >
112
- A
239
+ A1
113
240
  </Text>
114
241
  </View>
115
242
  </View>
243
+ <View
244
+ highlighted={false}
245
+ leadingItem={
246
+ Object {
247
+ "text": "A1",
248
+ "value": "a1",
249
+ }
250
+ }
251
+ section={
252
+ Object {
253
+ "category": "A",
254
+ "data": Array [
255
+ Object {
256
+ "text": "A1",
257
+ "value": "a1",
258
+ },
259
+ ],
260
+ }
261
+ }
262
+ style={
263
+ Array [
264
+ Object {
265
+ "marginTop": 12,
266
+ },
267
+ undefined,
268
+ ]
269
+ }
270
+ trailingSection={
271
+ Object {
272
+ "category": "B",
273
+ "data": Array [
274
+ Object {
275
+ "text": "B1",
276
+ "value": "b1",
277
+ },
278
+ Object {
279
+ "text": "B2",
280
+ "value": "b2",
281
+ },
282
+ ],
283
+ }
284
+ }
285
+ />
286
+ </View>
287
+ </View>
288
+ <View
289
+ onLayout={[Function]}
290
+ style={null}
291
+ />
292
+ <View
293
+ onLayout={[Function]}
294
+ style={null}
295
+ >
296
+ <View
297
+ style={
298
+ Array [
299
+ Object {
300
+ "alignContent": "center",
301
+ "backgroundColor": "#dadbde",
302
+ "display": "flex",
303
+ "flexDirection": "row",
304
+ "justifyContent": "space-between",
305
+ "marginBottom": 16,
306
+ "paddingHorizontal": 16,
307
+ "paddingVertical": 8,
308
+ },
309
+ Object {
310
+ "marginBottom": 0,
311
+ },
312
+ ]
313
+ }
314
+ >
315
+ <View
316
+ style={
317
+ Array [
318
+ Object {
319
+ "display": "flex",
320
+ "flexDirection": "row",
321
+ },
322
+ undefined,
323
+ ]
324
+ }
325
+ >
326
+ <View
327
+ style={
328
+ Array [
329
+ Object {
330
+ "marginRight": 8,
331
+ },
332
+ undefined,
333
+ ]
334
+ }
335
+ />
336
+ <Text
337
+ style={
338
+ Array [
339
+ Object {
340
+ "color": "#292a2b",
341
+ "fontFamily": "BeVietnamPro-Regular",
342
+ "fontSize": 16,
343
+ "letterSpacing": 0.48,
344
+ "lineHeight": 24,
345
+ },
346
+ undefined,
347
+ ]
348
+ }
349
+ themeFontSize="large"
350
+ themeFontWeight="regular"
351
+ themeIntent="body"
352
+ >
353
+ B
354
+ </Text>
355
+ </View>
116
356
  </View>
117
357
  </View>
118
358
  <View
@@ -121,10 +361,56 @@ exports[`OptionList render isLoading correctly 1`] = `
121
361
  >
122
362
  <View>
123
363
  <View
364
+ highlighted={false}
365
+ leadingSection={
366
+ Object {
367
+ "category": "A",
368
+ "data": Array [
369
+ Object {
370
+ "text": "A1",
371
+ "value": "a1",
372
+ },
373
+ ],
374
+ }
375
+ }
376
+ section={
377
+ Object {
378
+ "category": "B",
379
+ "data": Array [
380
+ Object {
381
+ "text": "B1",
382
+ "value": "b1",
383
+ },
384
+ Object {
385
+ "text": "B2",
386
+ "value": "b2",
387
+ },
388
+ ],
389
+ }
390
+ }
391
+ style={
392
+ Array [
393
+ Object {
394
+ "marginTop": 12,
395
+ },
396
+ undefined,
397
+ ]
398
+ }
399
+ trailingItem={
400
+ Object {
401
+ "text": "B1",
402
+ "value": "b1",
403
+ }
404
+ }
405
+ />
406
+ <View
407
+ accessibilityState={
408
+ Object {
409
+ "disabled": false,
410
+ }
411
+ }
124
412
  accessible={true}
125
- collapsable={false}
126
413
  focusable={true}
127
- nativeID="animatedComponent"
128
414
  onClick={[Function]}
129
415
  onResponderGrant={[Function]}
130
416
  onResponderMove={[Function]}
@@ -133,22 +419,28 @@ exports[`OptionList render isLoading correctly 1`] = `
133
419
  onResponderTerminationRequest={[Function]}
134
420
  onStartShouldSetResponder={[Function]}
135
421
  style={
136
- Object {
137
- "alignItems": "center",
138
- "backgroundColor": "#ffffff",
139
- "borderRadius": 4,
140
- "flexDirection": "row",
141
- "justifyContent": "space-between",
142
- "opacity": 1,
143
- "padding": 16,
144
- }
422
+ Array [
423
+ Object {
424
+ "alignItems": "center",
425
+ "backgroundColor": "#ffffff",
426
+ "flexDirection": "row",
427
+ "opacity": 1,
428
+ "padding": 16,
429
+ },
430
+ Object {
431
+ "marginHorizontal": 12,
432
+ },
433
+ ]
145
434
  }
146
435
  >
147
436
  <View
148
437
  style={
149
- Object {
150
- "flex": 1,
151
- }
438
+ Array [
439
+ Object {
440
+ "flex": 1,
441
+ },
442
+ undefined,
443
+ ]
152
444
  }
153
445
  >
154
446
  <Text
@@ -168,10 +460,59 @@ exports[`OptionList render isLoading correctly 1`] = `
168
460
  themeFontWeight="regular"
169
461
  themeIntent="body"
170
462
  >
171
- B
463
+ B1
172
464
  </Text>
173
465
  </View>
174
466
  </View>
467
+ <View
468
+ highlighted={false}
469
+ leadingItem={
470
+ Object {
471
+ "text": "B1",
472
+ "value": "b1",
473
+ }
474
+ }
475
+ leadingSection={
476
+ Object {
477
+ "category": "A",
478
+ "data": Array [
479
+ Object {
480
+ "text": "A1",
481
+ "value": "a1",
482
+ },
483
+ ],
484
+ }
485
+ }
486
+ section={
487
+ Object {
488
+ "category": "B",
489
+ "data": Array [
490
+ Object {
491
+ "text": "B1",
492
+ "value": "b1",
493
+ },
494
+ Object {
495
+ "text": "B2",
496
+ "value": "b2",
497
+ },
498
+ ],
499
+ }
500
+ }
501
+ style={
502
+ Array [
503
+ Object {
504
+ "marginTop": 4,
505
+ },
506
+ undefined,
507
+ ]
508
+ }
509
+ trailingItem={
510
+ Object {
511
+ "text": "B2",
512
+ "value": "b2",
513
+ }
514
+ }
515
+ />
175
516
  </View>
176
517
  </View>
177
518
  <View
@@ -180,10 +521,13 @@ exports[`OptionList render isLoading correctly 1`] = `
180
521
  >
181
522
  <View>
182
523
  <View
524
+ accessibilityState={
525
+ Object {
526
+ "disabled": false,
527
+ }
528
+ }
183
529
  accessible={true}
184
- collapsable={false}
185
530
  focusable={true}
186
- nativeID="animatedComponent"
187
531
  onClick={[Function]}
188
532
  onResponderGrant={[Function]}
189
533
  onResponderMove={[Function]}
@@ -192,22 +536,28 @@ exports[`OptionList render isLoading correctly 1`] = `
192
536
  onResponderTerminationRequest={[Function]}
193
537
  onStartShouldSetResponder={[Function]}
194
538
  style={
195
- Object {
196
- "alignItems": "center",
197
- "backgroundColor": "#ffffff",
198
- "borderRadius": 4,
199
- "flexDirection": "row",
200
- "justifyContent": "space-between",
201
- "opacity": 1,
202
- "padding": 16,
203
- }
539
+ Array [
540
+ Object {
541
+ "alignItems": "center",
542
+ "backgroundColor": "#ffffff",
543
+ "flexDirection": "row",
544
+ "opacity": 1,
545
+ "padding": 16,
546
+ },
547
+ Object {
548
+ "marginHorizontal": 12,
549
+ },
550
+ ]
204
551
  }
205
552
  >
206
553
  <View
207
554
  style={
208
- Object {
209
- "flex": 1,
210
- }
555
+ Array [
556
+ Object {
557
+ "flex": 1,
558
+ },
559
+ undefined,
560
+ ]
211
561
  }
212
562
  >
213
563
  <Text
@@ -227,15 +577,62 @@ exports[`OptionList render isLoading correctly 1`] = `
227
577
  themeFontWeight="regular"
228
578
  themeIntent="body"
229
579
  >
230
- C
580
+ B2
231
581
  </Text>
232
582
  </View>
233
583
  </View>
584
+ <View
585
+ highlighted={false}
586
+ leadingItem={
587
+ Object {
588
+ "text": "B2",
589
+ "value": "b2",
590
+ }
591
+ }
592
+ leadingSection={
593
+ Object {
594
+ "category": "A",
595
+ "data": Array [
596
+ Object {
597
+ "text": "A1",
598
+ "value": "a1",
599
+ },
600
+ ],
601
+ }
602
+ }
603
+ section={
604
+ Object {
605
+ "category": "B",
606
+ "data": Array [
607
+ Object {
608
+ "text": "B1",
609
+ "value": "b1",
610
+ },
611
+ Object {
612
+ "text": "B2",
613
+ "value": "b2",
614
+ },
615
+ ],
616
+ }
617
+ }
618
+ style={
619
+ Array [
620
+ Object {
621
+ "marginTop": 12,
622
+ },
623
+ undefined,
624
+ ]
625
+ }
626
+ />
234
627
  </View>
235
628
  </View>
236
629
  <View
237
630
  onLayout={[Function]}
238
- >
631
+ style={null}
632
+ />
633
+ <View
634
+ onLayout={[Function]}
635
+ >
239
636
  <View
240
637
  style={
241
638
  Object {
@@ -393,16 +790,26 @@ exports[`OptionList renders correctly 1`] = `
393
790
  data={
394
791
  Array [
395
792
  Object {
396
- "text": "A",
397
- "value": "a",
398
- },
399
- Object {
400
- "text": "B",
401
- "value": "b",
793
+ "category": "A",
794
+ "data": Array [
795
+ Object {
796
+ "text": "A1",
797
+ "value": "a1",
798
+ },
799
+ ],
402
800
  },
403
801
  Object {
404
- "text": "C",
405
- "value": "c",
802
+ "category": "B",
803
+ "data": Array [
804
+ Object {
805
+ "text": "B1",
806
+ "value": "b1",
807
+ },
808
+ Object {
809
+ "text": "B2",
810
+ "value": "b2",
811
+ },
812
+ ],
406
813
  },
407
814
  ]
408
815
  }
@@ -419,28 +826,139 @@ exports[`OptionList renders correctly 1`] = `
419
826
  onScrollBeginDrag={[Function]}
420
827
  onScrollEndDrag={[Function]}
421
828
  onScrollToIndexFailed={[Function]}
422
- removeClippedSubviews={false}
423
829
  renderItem={[Function]}
424
830
  scrollEventThrottle={50}
425
- stickyHeaderIndices={Array []}
426
- style={
427
- Object {
428
- "paddingHorizontal": 16,
429
- }
831
+ stickyHeaderIndices={
832
+ Array [
833
+ 0,
834
+ 3,
835
+ ]
430
836
  }
431
- viewabilityConfigCallbackPairs={Array []}
837
+ style={Object {}}
432
838
  >
433
839
  <View>
840
+ <View
841
+ onLayout={[Function]}
842
+ style={null}
843
+ >
844
+ <View
845
+ style={
846
+ Array [
847
+ Object {
848
+ "alignContent": "center",
849
+ "backgroundColor": "#dadbde",
850
+ "display": "flex",
851
+ "flexDirection": "row",
852
+ "justifyContent": "space-between",
853
+ "marginBottom": 16,
854
+ "paddingHorizontal": 16,
855
+ "paddingVertical": 8,
856
+ },
857
+ Object {
858
+ "marginBottom": 0,
859
+ },
860
+ ]
861
+ }
862
+ >
863
+ <View
864
+ style={
865
+ Array [
866
+ Object {
867
+ "display": "flex",
868
+ "flexDirection": "row",
869
+ },
870
+ undefined,
871
+ ]
872
+ }
873
+ >
874
+ <View
875
+ style={
876
+ Array [
877
+ Object {
878
+ "marginRight": 8,
879
+ },
880
+ undefined,
881
+ ]
882
+ }
883
+ />
884
+ <Text
885
+ style={
886
+ Array [
887
+ Object {
888
+ "color": "#292a2b",
889
+ "fontFamily": "BeVietnamPro-Regular",
890
+ "fontSize": 16,
891
+ "letterSpacing": 0.48,
892
+ "lineHeight": 24,
893
+ },
894
+ undefined,
895
+ ]
896
+ }
897
+ themeFontSize="large"
898
+ themeFontWeight="regular"
899
+ themeIntent="body"
900
+ >
901
+ A
902
+ </Text>
903
+ </View>
904
+ </View>
905
+ </View>
434
906
  <View
435
907
  onLayout={[Function]}
436
908
  style={null}
437
909
  >
438
910
  <View>
439
911
  <View
912
+ highlighted={false}
913
+ section={
914
+ Object {
915
+ "category": "A",
916
+ "data": Array [
917
+ Object {
918
+ "text": "A1",
919
+ "value": "a1",
920
+ },
921
+ ],
922
+ }
923
+ }
924
+ style={
925
+ Array [
926
+ Object {
927
+ "marginTop": 12,
928
+ },
929
+ undefined,
930
+ ]
931
+ }
932
+ trailingItem={
933
+ Object {
934
+ "text": "A1",
935
+ "value": "a1",
936
+ }
937
+ }
938
+ trailingSection={
939
+ Object {
940
+ "category": "B",
941
+ "data": Array [
942
+ Object {
943
+ "text": "B1",
944
+ "value": "b1",
945
+ },
946
+ Object {
947
+ "text": "B2",
948
+ "value": "b2",
949
+ },
950
+ ],
951
+ }
952
+ }
953
+ />
954
+ <View
955
+ accessibilityState={
956
+ Object {
957
+ "disabled": false,
958
+ }
959
+ }
440
960
  accessible={true}
441
- collapsable={false}
442
961
  focusable={true}
443
- nativeID="animatedComponent"
444
962
  onClick={[Function]}
445
963
  onResponderGrant={[Function]}
446
964
  onResponderMove={[Function]}
@@ -449,22 +967,28 @@ exports[`OptionList renders correctly 1`] = `
449
967
  onResponderTerminationRequest={[Function]}
450
968
  onStartShouldSetResponder={[Function]}
451
969
  style={
452
- Object {
453
- "alignItems": "center",
454
- "backgroundColor": "#f1e9fb",
455
- "borderRadius": 4,
456
- "flexDirection": "row",
457
- "justifyContent": "space-between",
458
- "opacity": 1,
459
- "padding": 16,
460
- }
970
+ Array [
971
+ Object {
972
+ "alignItems": "center",
973
+ "backgroundColor": "#f1e9fb",
974
+ "flexDirection": "row",
975
+ "opacity": 1,
976
+ "padding": 16,
977
+ },
978
+ Object {
979
+ "marginHorizontal": 12,
980
+ },
981
+ ]
461
982
  }
462
983
  >
463
984
  <View
464
985
  style={
465
- Object {
466
- "flex": 1,
467
- }
986
+ Array [
987
+ Object {
988
+ "flex": 1,
989
+ },
990
+ undefined,
991
+ ]
468
992
  }
469
993
  >
470
994
  <Text
@@ -484,10 +1008,123 @@ exports[`OptionList renders correctly 1`] = `
484
1008
  themeFontWeight="regular"
485
1009
  themeIntent="body"
486
1010
  >
487
- A
1011
+ A1
488
1012
  </Text>
489
1013
  </View>
490
1014
  </View>
1015
+ <View
1016
+ highlighted={false}
1017
+ leadingItem={
1018
+ Object {
1019
+ "text": "A1",
1020
+ "value": "a1",
1021
+ }
1022
+ }
1023
+ section={
1024
+ Object {
1025
+ "category": "A",
1026
+ "data": Array [
1027
+ Object {
1028
+ "text": "A1",
1029
+ "value": "a1",
1030
+ },
1031
+ ],
1032
+ }
1033
+ }
1034
+ style={
1035
+ Array [
1036
+ Object {
1037
+ "marginTop": 12,
1038
+ },
1039
+ undefined,
1040
+ ]
1041
+ }
1042
+ trailingSection={
1043
+ Object {
1044
+ "category": "B",
1045
+ "data": Array [
1046
+ Object {
1047
+ "text": "B1",
1048
+ "value": "b1",
1049
+ },
1050
+ Object {
1051
+ "text": "B2",
1052
+ "value": "b2",
1053
+ },
1054
+ ],
1055
+ }
1056
+ }
1057
+ />
1058
+ </View>
1059
+ </View>
1060
+ <View
1061
+ onLayout={[Function]}
1062
+ style={null}
1063
+ />
1064
+ <View
1065
+ onLayout={[Function]}
1066
+ style={null}
1067
+ >
1068
+ <View
1069
+ style={
1070
+ Array [
1071
+ Object {
1072
+ "alignContent": "center",
1073
+ "backgroundColor": "#dadbde",
1074
+ "display": "flex",
1075
+ "flexDirection": "row",
1076
+ "justifyContent": "space-between",
1077
+ "marginBottom": 16,
1078
+ "paddingHorizontal": 16,
1079
+ "paddingVertical": 8,
1080
+ },
1081
+ Object {
1082
+ "marginBottom": 0,
1083
+ },
1084
+ ]
1085
+ }
1086
+ >
1087
+ <View
1088
+ style={
1089
+ Array [
1090
+ Object {
1091
+ "display": "flex",
1092
+ "flexDirection": "row",
1093
+ },
1094
+ undefined,
1095
+ ]
1096
+ }
1097
+ >
1098
+ <View
1099
+ style={
1100
+ Array [
1101
+ Object {
1102
+ "marginRight": 8,
1103
+ },
1104
+ undefined,
1105
+ ]
1106
+ }
1107
+ />
1108
+ <Text
1109
+ style={
1110
+ Array [
1111
+ Object {
1112
+ "color": "#292a2b",
1113
+ "fontFamily": "BeVietnamPro-Regular",
1114
+ "fontSize": 16,
1115
+ "letterSpacing": 0.48,
1116
+ "lineHeight": 24,
1117
+ },
1118
+ undefined,
1119
+ ]
1120
+ }
1121
+ themeFontSize="large"
1122
+ themeFontWeight="regular"
1123
+ themeIntent="body"
1124
+ >
1125
+ B
1126
+ </Text>
1127
+ </View>
491
1128
  </View>
492
1129
  </View>
493
1130
  <View
@@ -496,10 +1133,56 @@ exports[`OptionList renders correctly 1`] = `
496
1133
  >
497
1134
  <View>
498
1135
  <View
1136
+ highlighted={false}
1137
+ leadingSection={
1138
+ Object {
1139
+ "category": "A",
1140
+ "data": Array [
1141
+ Object {
1142
+ "text": "A1",
1143
+ "value": "a1",
1144
+ },
1145
+ ],
1146
+ }
1147
+ }
1148
+ section={
1149
+ Object {
1150
+ "category": "B",
1151
+ "data": Array [
1152
+ Object {
1153
+ "text": "B1",
1154
+ "value": "b1",
1155
+ },
1156
+ Object {
1157
+ "text": "B2",
1158
+ "value": "b2",
1159
+ },
1160
+ ],
1161
+ }
1162
+ }
1163
+ style={
1164
+ Array [
1165
+ Object {
1166
+ "marginTop": 12,
1167
+ },
1168
+ undefined,
1169
+ ]
1170
+ }
1171
+ trailingItem={
1172
+ Object {
1173
+ "text": "B1",
1174
+ "value": "b1",
1175
+ }
1176
+ }
1177
+ />
1178
+ <View
1179
+ accessibilityState={
1180
+ Object {
1181
+ "disabled": false,
1182
+ }
1183
+ }
499
1184
  accessible={true}
500
- collapsable={false}
501
1185
  focusable={true}
502
- nativeID="animatedComponent"
503
1186
  onClick={[Function]}
504
1187
  onResponderGrant={[Function]}
505
1188
  onResponderMove={[Function]}
@@ -508,22 +1191,28 @@ exports[`OptionList renders correctly 1`] = `
508
1191
  onResponderTerminationRequest={[Function]}
509
1192
  onStartShouldSetResponder={[Function]}
510
1193
  style={
511
- Object {
512
- "alignItems": "center",
513
- "backgroundColor": "#ffffff",
514
- "borderRadius": 4,
515
- "flexDirection": "row",
516
- "justifyContent": "space-between",
517
- "opacity": 1,
518
- "padding": 16,
519
- }
1194
+ Array [
1195
+ Object {
1196
+ "alignItems": "center",
1197
+ "backgroundColor": "#ffffff",
1198
+ "flexDirection": "row",
1199
+ "opacity": 1,
1200
+ "padding": 16,
1201
+ },
1202
+ Object {
1203
+ "marginHorizontal": 12,
1204
+ },
1205
+ ]
520
1206
  }
521
1207
  >
522
1208
  <View
523
1209
  style={
524
- Object {
525
- "flex": 1,
526
- }
1210
+ Array [
1211
+ Object {
1212
+ "flex": 1,
1213
+ },
1214
+ undefined,
1215
+ ]
527
1216
  }
528
1217
  >
529
1218
  <Text
@@ -543,10 +1232,59 @@ exports[`OptionList renders correctly 1`] = `
543
1232
  themeFontWeight="regular"
544
1233
  themeIntent="body"
545
1234
  >
546
- B
1235
+ B1
547
1236
  </Text>
548
1237
  </View>
549
1238
  </View>
1239
+ <View
1240
+ highlighted={false}
1241
+ leadingItem={
1242
+ Object {
1243
+ "text": "B1",
1244
+ "value": "b1",
1245
+ }
1246
+ }
1247
+ leadingSection={
1248
+ Object {
1249
+ "category": "A",
1250
+ "data": Array [
1251
+ Object {
1252
+ "text": "A1",
1253
+ "value": "a1",
1254
+ },
1255
+ ],
1256
+ }
1257
+ }
1258
+ section={
1259
+ Object {
1260
+ "category": "B",
1261
+ "data": Array [
1262
+ Object {
1263
+ "text": "B1",
1264
+ "value": "b1",
1265
+ },
1266
+ Object {
1267
+ "text": "B2",
1268
+ "value": "b2",
1269
+ },
1270
+ ],
1271
+ }
1272
+ }
1273
+ style={
1274
+ Array [
1275
+ Object {
1276
+ "marginTop": 4,
1277
+ },
1278
+ undefined,
1279
+ ]
1280
+ }
1281
+ trailingItem={
1282
+ Object {
1283
+ "text": "B2",
1284
+ "value": "b2",
1285
+ }
1286
+ }
1287
+ />
550
1288
  </View>
551
1289
  </View>
552
1290
  <View
@@ -555,10 +1293,13 @@ exports[`OptionList renders correctly 1`] = `
555
1293
  >
556
1294
  <View>
557
1295
  <View
1296
+ accessibilityState={
1297
+ Object {
1298
+ "disabled": false,
1299
+ }
1300
+ }
558
1301
  accessible={true}
559
- collapsable={false}
560
1302
  focusable={true}
561
- nativeID="animatedComponent"
562
1303
  onClick={[Function]}
563
1304
  onResponderGrant={[Function]}
564
1305
  onResponderMove={[Function]}
@@ -567,22 +1308,28 @@ exports[`OptionList renders correctly 1`] = `
567
1308
  onResponderTerminationRequest={[Function]}
568
1309
  onStartShouldSetResponder={[Function]}
569
1310
  style={
570
- Object {
571
- "alignItems": "center",
572
- "backgroundColor": "#ffffff",
573
- "borderRadius": 4,
574
- "flexDirection": "row",
575
- "justifyContent": "space-between",
576
- "opacity": 1,
577
- "padding": 16,
578
- }
1311
+ Array [
1312
+ Object {
1313
+ "alignItems": "center",
1314
+ "backgroundColor": "#ffffff",
1315
+ "flexDirection": "row",
1316
+ "opacity": 1,
1317
+ "padding": 16,
1318
+ },
1319
+ Object {
1320
+ "marginHorizontal": 12,
1321
+ },
1322
+ ]
579
1323
  }
580
1324
  >
581
1325
  <View
582
1326
  style={
583
- Object {
584
- "flex": 1,
585
- }
1327
+ Array [
1328
+ Object {
1329
+ "flex": 1,
1330
+ },
1331
+ undefined,
1332
+ ]
586
1333
  }
587
1334
  >
588
1335
  <Text
@@ -602,35 +1349,92 @@ exports[`OptionList renders correctly 1`] = `
602
1349
  themeFontWeight="regular"
603
1350
  themeIntent="body"
604
1351
  >
605
- C
1352
+ B2
606
1353
  </Text>
607
1354
  </View>
608
1355
  </View>
609
- </View>
610
- </View>
611
- </View>
612
- </RCTScrollView>
613
- `;
614
-
615
- exports[`OptionList trigger onPress correctly on select new value 1`] = `
616
- <RCTScrollView
617
- ListFooterComponent={null}
618
- data={
619
- Array [
620
- Object {
621
- "text": "A",
622
- "value": "a",
623
- },
624
- Object {
625
- "text": "B",
626
- "value": "b",
627
- },
628
- Object {
629
- "text": "C",
630
- "value": "c",
631
- },
632
- ]
633
- }
1356
+ <View
1357
+ highlighted={false}
1358
+ leadingItem={
1359
+ Object {
1360
+ "text": "B2",
1361
+ "value": "b2",
1362
+ }
1363
+ }
1364
+ leadingSection={
1365
+ Object {
1366
+ "category": "A",
1367
+ "data": Array [
1368
+ Object {
1369
+ "text": "A1",
1370
+ "value": "a1",
1371
+ },
1372
+ ],
1373
+ }
1374
+ }
1375
+ section={
1376
+ Object {
1377
+ "category": "B",
1378
+ "data": Array [
1379
+ Object {
1380
+ "text": "B1",
1381
+ "value": "b1",
1382
+ },
1383
+ Object {
1384
+ "text": "B2",
1385
+ "value": "b2",
1386
+ },
1387
+ ],
1388
+ }
1389
+ }
1390
+ style={
1391
+ Array [
1392
+ Object {
1393
+ "marginTop": 12,
1394
+ },
1395
+ undefined,
1396
+ ]
1397
+ }
1398
+ />
1399
+ </View>
1400
+ </View>
1401
+ <View
1402
+ onLayout={[Function]}
1403
+ style={null}
1404
+ />
1405
+ </View>
1406
+ </RCTScrollView>
1407
+ `;
1408
+
1409
+ exports[`OptionList trigger onPress correctly on select new value 1`] = `
1410
+ <RCTScrollView
1411
+ ListFooterComponent={null}
1412
+ data={
1413
+ Array [
1414
+ Object {
1415
+ "category": "A",
1416
+ "data": Array [
1417
+ Object {
1418
+ "text": "A1",
1419
+ "value": "a1",
1420
+ },
1421
+ ],
1422
+ },
1423
+ Object {
1424
+ "category": "B",
1425
+ "data": Array [
1426
+ Object {
1427
+ "text": "B1",
1428
+ "value": "b1",
1429
+ },
1430
+ Object {
1431
+ "text": "B2",
1432
+ "value": "b2",
1433
+ },
1434
+ ],
1435
+ },
1436
+ ]
1437
+ }
634
1438
  getItem={[Function]}
635
1439
  getItemCount={[Function]}
636
1440
  keyExtractor={[Function]}
@@ -644,28 +1448,139 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
644
1448
  onScrollBeginDrag={[Function]}
645
1449
  onScrollEndDrag={[Function]}
646
1450
  onScrollToIndexFailed={[Function]}
647
- removeClippedSubviews={false}
648
1451
  renderItem={[Function]}
649
1452
  scrollEventThrottle={50}
650
- stickyHeaderIndices={Array []}
651
- style={
652
- Object {
653
- "paddingHorizontal": 16,
654
- }
1453
+ stickyHeaderIndices={
1454
+ Array [
1455
+ 0,
1456
+ 3,
1457
+ ]
655
1458
  }
656
- viewabilityConfigCallbackPairs={Array []}
1459
+ style={Object {}}
657
1460
  >
658
1461
  <View>
1462
+ <View
1463
+ onLayout={[Function]}
1464
+ style={null}
1465
+ >
1466
+ <View
1467
+ style={
1468
+ Array [
1469
+ Object {
1470
+ "alignContent": "center",
1471
+ "backgroundColor": "#dadbde",
1472
+ "display": "flex",
1473
+ "flexDirection": "row",
1474
+ "justifyContent": "space-between",
1475
+ "marginBottom": 16,
1476
+ "paddingHorizontal": 16,
1477
+ "paddingVertical": 8,
1478
+ },
1479
+ Object {
1480
+ "marginBottom": 0,
1481
+ },
1482
+ ]
1483
+ }
1484
+ >
1485
+ <View
1486
+ style={
1487
+ Array [
1488
+ Object {
1489
+ "display": "flex",
1490
+ "flexDirection": "row",
1491
+ },
1492
+ undefined,
1493
+ ]
1494
+ }
1495
+ >
1496
+ <View
1497
+ style={
1498
+ Array [
1499
+ Object {
1500
+ "marginRight": 8,
1501
+ },
1502
+ undefined,
1503
+ ]
1504
+ }
1505
+ />
1506
+ <Text
1507
+ style={
1508
+ Array [
1509
+ Object {
1510
+ "color": "#292a2b",
1511
+ "fontFamily": "BeVietnamPro-Regular",
1512
+ "fontSize": 16,
1513
+ "letterSpacing": 0.48,
1514
+ "lineHeight": 24,
1515
+ },
1516
+ undefined,
1517
+ ]
1518
+ }
1519
+ themeFontSize="large"
1520
+ themeFontWeight="regular"
1521
+ themeIntent="body"
1522
+ >
1523
+ A
1524
+ </Text>
1525
+ </View>
1526
+ </View>
1527
+ </View>
659
1528
  <View
660
1529
  onLayout={[Function]}
661
1530
  style={null}
662
1531
  >
663
1532
  <View>
664
1533
  <View
1534
+ highlighted={false}
1535
+ section={
1536
+ Object {
1537
+ "category": "A",
1538
+ "data": Array [
1539
+ Object {
1540
+ "text": "A1",
1541
+ "value": "a1",
1542
+ },
1543
+ ],
1544
+ }
1545
+ }
1546
+ style={
1547
+ Array [
1548
+ Object {
1549
+ "marginTop": 12,
1550
+ },
1551
+ undefined,
1552
+ ]
1553
+ }
1554
+ trailingItem={
1555
+ Object {
1556
+ "text": "A1",
1557
+ "value": "a1",
1558
+ }
1559
+ }
1560
+ trailingSection={
1561
+ Object {
1562
+ "category": "B",
1563
+ "data": Array [
1564
+ Object {
1565
+ "text": "B1",
1566
+ "value": "b1",
1567
+ },
1568
+ Object {
1569
+ "text": "B2",
1570
+ "value": "b2",
1571
+ },
1572
+ ],
1573
+ }
1574
+ }
1575
+ />
1576
+ <View
1577
+ accessibilityState={
1578
+ Object {
1579
+ "disabled": false,
1580
+ }
1581
+ }
665
1582
  accessible={true}
666
- collapsable={false}
667
1583
  focusable={true}
668
- nativeID="animatedComponent"
669
1584
  onClick={[Function]}
670
1585
  onResponderGrant={[Function]}
671
1586
  onResponderMove={[Function]}
@@ -674,22 +1589,28 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
674
1589
  onResponderTerminationRequest={[Function]}
675
1590
  onStartShouldSetResponder={[Function]}
676
1591
  style={
677
- Object {
678
- "alignItems": "center",
679
- "backgroundColor": "#f1e9fb",
680
- "borderRadius": 4,
681
- "flexDirection": "row",
682
- "justifyContent": "space-between",
683
- "opacity": 1,
684
- "padding": 16,
685
- }
1592
+ Array [
1593
+ Object {
1594
+ "alignItems": "center",
1595
+ "backgroundColor": "#f1e9fb",
1596
+ "flexDirection": "row",
1597
+ "opacity": 1,
1598
+ "padding": 16,
1599
+ },
1600
+ Object {
1601
+ "marginHorizontal": 12,
1602
+ },
1603
+ ]
686
1604
  }
687
1605
  >
688
1606
  <View
689
1607
  style={
690
- Object {
691
- "flex": 1,
692
- }
1608
+ Array [
1609
+ Object {
1610
+ "flex": 1,
1611
+ },
1612
+ undefined,
1613
+ ]
693
1614
  }
694
1615
  >
695
1616
  <Text
@@ -709,10 +1630,123 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
709
1630
  themeFontWeight="regular"
710
1631
  themeIntent="body"
711
1632
  >
712
- A
1633
+ A1
713
1634
  </Text>
714
1635
  </View>
715
1636
  </View>
1637
+ <View
1638
+ highlighted={false}
1639
+ leadingItem={
1640
+ Object {
1641
+ "text": "A1",
1642
+ "value": "a1",
1643
+ }
1644
+ }
1645
+ section={
1646
+ Object {
1647
+ "category": "A",
1648
+ "data": Array [
1649
+ Object {
1650
+ "text": "A1",
1651
+ "value": "a1",
1652
+ },
1653
+ ],
1654
+ }
1655
+ }
1656
+ style={
1657
+ Array [
1658
+ Object {
1659
+ "marginTop": 12,
1660
+ },
1661
+ undefined,
1662
+ ]
1663
+ }
1664
+ trailingSection={
1665
+ Object {
1666
+ "category": "B",
1667
+ "data": Array [
1668
+ Object {
1669
+ "text": "B1",
1670
+ "value": "b1",
1671
+ },
1672
+ Object {
1673
+ "text": "B2",
1674
+ "value": "b2",
1675
+ },
1676
+ ],
1677
+ }
1678
+ }
1679
+ />
1680
+ </View>
1681
+ </View>
1682
+ <View
1683
+ onLayout={[Function]}
1684
+ style={null}
1685
+ />
1686
+ <View
1687
+ onLayout={[Function]}
1688
+ style={null}
1689
+ >
1690
+ <View
1691
+ style={
1692
+ Array [
1693
+ Object {
1694
+ "alignContent": "center",
1695
+ "backgroundColor": "#dadbde",
1696
+ "display": "flex",
1697
+ "flexDirection": "row",
1698
+ "justifyContent": "space-between",
1699
+ "marginBottom": 16,
1700
+ "paddingHorizontal": 16,
1701
+ "paddingVertical": 8,
1702
+ },
1703
+ Object {
1704
+ "marginBottom": 0,
1705
+ },
1706
+ ]
1707
+ }
1708
+ >
1709
+ <View
1710
+ style={
1711
+ Array [
1712
+ Object {
1713
+ "display": "flex",
1714
+ "flexDirection": "row",
1715
+ },
1716
+ undefined,
1717
+ ]
1718
+ }
1719
+ >
1720
+ <View
1721
+ style={
1722
+ Array [
1723
+ Object {
1724
+ "marginRight": 8,
1725
+ },
1726
+ undefined,
1727
+ ]
1728
+ }
1729
+ />
1730
+ <Text
1731
+ style={
1732
+ Array [
1733
+ Object {
1734
+ "color": "#292a2b",
1735
+ "fontFamily": "BeVietnamPro-Regular",
1736
+ "fontSize": 16,
1737
+ "letterSpacing": 0.48,
1738
+ "lineHeight": 24,
1739
+ },
1740
+ undefined,
1741
+ ]
1742
+ }
1743
+ themeFontSize="large"
1744
+ themeFontWeight="regular"
1745
+ themeIntent="body"
1746
+ >
1747
+ B
1748
+ </Text>
1749
+ </View>
716
1750
  </View>
717
1751
  </View>
718
1752
  <View
@@ -721,10 +1755,56 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
721
1755
  >
722
1756
  <View>
723
1757
  <View
1758
+ highlighted={false}
1759
+ leadingSection={
1760
+ Object {
1761
+ "category": "A",
1762
+ "data": Array [
1763
+ Object {
1764
+ "text": "A1",
1765
+ "value": "a1",
1766
+ },
1767
+ ],
1768
+ }
1769
+ }
1770
+ section={
1771
+ Object {
1772
+ "category": "B",
1773
+ "data": Array [
1774
+ Object {
1775
+ "text": "B1",
1776
+ "value": "b1",
1777
+ },
1778
+ Object {
1779
+ "text": "B2",
1780
+ "value": "b2",
1781
+ },
1782
+ ],
1783
+ }
1784
+ }
1785
+ style={
1786
+ Array [
1787
+ Object {
1788
+ "marginTop": 12,
1789
+ },
1790
+ undefined,
1791
+ ]
1792
+ }
1793
+ trailingItem={
1794
+ Object {
1795
+ "text": "B1",
1796
+ "value": "b1",
1797
+ }
1798
+ }
1799
+ />
1800
+ <View
1801
+ accessibilityState={
1802
+ Object {
1803
+ "disabled": false,
1804
+ }
1805
+ }
724
1806
  accessible={true}
725
- collapsable={false}
726
1807
  focusable={true}
727
- nativeID="animatedComponent"
728
1808
  onClick={[Function]}
729
1809
  onResponderGrant={[Function]}
730
1810
  onResponderMove={[Function]}
@@ -733,22 +1813,28 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
733
1813
  onResponderTerminationRequest={[Function]}
734
1814
  onStartShouldSetResponder={[Function]}
735
1815
  style={
736
- Object {
737
- "alignItems": "center",
738
- "backgroundColor": "#ffffff",
739
- "borderRadius": 4,
740
- "flexDirection": "row",
741
- "justifyContent": "space-between",
742
- "opacity": 1,
743
- "padding": 16,
744
- }
1816
+ Array [
1817
+ Object {
1818
+ "alignItems": "center",
1819
+ "backgroundColor": "#ffffff",
1820
+ "flexDirection": "row",
1821
+ "opacity": 1,
1822
+ "padding": 16,
1823
+ },
1824
+ Object {
1825
+ "marginHorizontal": 12,
1826
+ },
1827
+ ]
745
1828
  }
746
1829
  >
747
1830
  <View
748
1831
  style={
749
- Object {
750
- "flex": 1,
751
- }
1832
+ Array [
1833
+ Object {
1834
+ "flex": 1,
1835
+ },
1836
+ undefined,
1837
+ ]
752
1838
  }
753
1839
  >
754
1840
  <Text
@@ -768,10 +1854,59 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
768
1854
  themeFontWeight="regular"
769
1855
  themeIntent="body"
770
1856
  >
771
- B
1857
+ B1
772
1858
  </Text>
773
1859
  </View>
774
1860
  </View>
1861
+ <View
1862
+ highlighted={false}
1863
+ leadingItem={
1864
+ Object {
1865
+ "text": "B1",
1866
+ "value": "b1",
1867
+ }
1868
+ }
1869
+ leadingSection={
1870
+ Object {
1871
+ "category": "A",
1872
+ "data": Array [
1873
+ Object {
1874
+ "text": "A1",
1875
+ "value": "a1",
1876
+ },
1877
+ ],
1878
+ }
1879
+ }
1880
+ section={
1881
+ Object {
1882
+ "category": "B",
1883
+ "data": Array [
1884
+ Object {
1885
+ "text": "B1",
1886
+ "value": "b1",
1887
+ },
1888
+ Object {
1889
+ "text": "B2",
1890
+ "value": "b2",
1891
+ },
1892
+ ],
1893
+ }
1894
+ }
1895
+ style={
1896
+ Array [
1897
+ Object {
1898
+ "marginTop": 4,
1899
+ },
1900
+ undefined,
1901
+ ]
1902
+ }
1903
+ trailingItem={
1904
+ Object {
1905
+ "text": "B2",
1906
+ "value": "b2",
1907
+ }
1908
+ }
1909
+ />
775
1910
  </View>
776
1911
  </View>
777
1912
  <View
@@ -780,10 +1915,13 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
780
1915
  >
781
1916
  <View>
782
1917
  <View
1918
+ accessibilityState={
1919
+ Object {
1920
+ "disabled": false,
1921
+ }
1922
+ }
783
1923
  accessible={true}
784
- collapsable={false}
785
1924
  focusable={true}
786
- nativeID="animatedComponent"
787
1925
  onClick={[Function]}
788
1926
  onResponderGrant={[Function]}
789
1927
  onResponderMove={[Function]}
@@ -792,22 +1930,28 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
792
1930
  onResponderTerminationRequest={[Function]}
793
1931
  onStartShouldSetResponder={[Function]}
794
1932
  style={
795
- Object {
796
- "alignItems": "center",
797
- "backgroundColor": "#ffffff",
798
- "borderRadius": 4,
799
- "flexDirection": "row",
800
- "justifyContent": "space-between",
801
- "opacity": 1,
802
- "padding": 16,
803
- }
1933
+ Array [
1934
+ Object {
1935
+ "alignItems": "center",
1936
+ "backgroundColor": "#ffffff",
1937
+ "flexDirection": "row",
1938
+ "opacity": 1,
1939
+ "padding": 16,
1940
+ },
1941
+ Object {
1942
+ "marginHorizontal": 12,
1943
+ },
1944
+ ]
804
1945
  }
805
1946
  >
806
1947
  <View
807
1948
  style={
808
- Object {
809
- "flex": 1,
810
- }
1949
+ Array [
1950
+ Object {
1951
+ "flex": 1,
1952
+ },
1953
+ undefined,
1954
+ ]
811
1955
  }
812
1956
  >
813
1957
  <Text
@@ -827,12 +1971,59 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
827
1971
  themeFontWeight="regular"
828
1972
  themeIntent="body"
829
1973
  >
830
- C
1974
+ B2
831
1975
  </Text>
832
1976
  </View>
833
1977
  </View>
1978
+ <View
1979
+ highlighted={false}
1980
+ leadingItem={
1981
+ Object {
1982
+ "text": "B2",
1983
+ "value": "b2",
1984
+ }
1985
+ }
1986
+ leadingSection={
1987
+ Object {
1988
+ "category": "A",
1989
+ "data": Array [
1990
+ Object {
1991
+ "text": "A1",
1992
+ "value": "a1",
1993
+ },
1994
+ ],
1995
+ }
1996
+ }
1997
+ section={
1998
+ Object {
1999
+ "category": "B",
2000
+ "data": Array [
2001
+ Object {
2002
+ "text": "B1",
2003
+ "value": "b1",
2004
+ },
2005
+ Object {
2006
+ "text": "B2",
2007
+ "value": "b2",
2008
+ },
2009
+ ],
2010
+ }
2011
+ }
2012
+ style={
2013
+ Array [
2014
+ Object {
2015
+ "marginTop": 12,
2016
+ },
2017
+ undefined,
2018
+ ]
2019
+ }
2020
+ />
834
2021
  </View>
835
2022
  </View>
2023
+ <View
2024
+ onLayout={[Function]}
2025
+ style={null}
2026
+ />
836
2027
  </View>
837
2028
  </RCTScrollView>
838
2029
  `;
@@ -843,16 +2034,26 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
843
2034
  data={
844
2035
  Array [
845
2036
  Object {
846
- "text": "A",
847
- "value": "a",
848
- },
849
- Object {
850
- "text": "B",
851
- "value": "b",
2037
+ "category": "A",
2038
+ "data": Array [
2039
+ Object {
2040
+ "text": "A1",
2041
+ "value": "a1",
2042
+ },
2043
+ ],
852
2044
  },
853
2045
  Object {
854
- "text": "C",
855
- "value": "c",
2046
+ "category": "B",
2047
+ "data": Array [
2048
+ Object {
2049
+ "text": "B1",
2050
+ "value": "b1",
2051
+ },
2052
+ Object {
2053
+ "text": "B2",
2054
+ "value": "b2",
2055
+ },
2056
+ ],
856
2057
  },
857
2058
  ]
858
2059
  }
@@ -869,28 +2070,139 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
869
2070
  onScrollBeginDrag={[Function]}
870
2071
  onScrollEndDrag={[Function]}
871
2072
  onScrollToIndexFailed={[Function]}
872
- removeClippedSubviews={false}
873
2073
  renderItem={[Function]}
874
2074
  scrollEventThrottle={50}
875
- stickyHeaderIndices={Array []}
876
- style={
877
- Object {
878
- "paddingHorizontal": 16,
879
- }
2075
+ stickyHeaderIndices={
2076
+ Array [
2077
+ 0,
2078
+ 3,
2079
+ ]
880
2080
  }
881
- viewabilityConfigCallbackPairs={Array []}
2081
+ style={Object {}}
882
2082
  >
883
2083
  <View>
2084
+ <View
2085
+ onLayout={[Function]}
2086
+ style={null}
2087
+ >
2088
+ <View
2089
+ style={
2090
+ Array [
2091
+ Object {
2092
+ "alignContent": "center",
2093
+ "backgroundColor": "#dadbde",
2094
+ "display": "flex",
2095
+ "flexDirection": "row",
2096
+ "justifyContent": "space-between",
2097
+ "marginBottom": 16,
2098
+ "paddingHorizontal": 16,
2099
+ "paddingVertical": 8,
2100
+ },
2101
+ Object {
2102
+ "marginBottom": 0,
2103
+ },
2104
+ ]
2105
+ }
2106
+ >
2107
+ <View
2108
+ style={
2109
+ Array [
2110
+ Object {
2111
+ "display": "flex",
2112
+ "flexDirection": "row",
2113
+ },
2114
+ undefined,
2115
+ ]
2116
+ }
2117
+ >
2118
+ <View
2119
+ style={
2120
+ Array [
2121
+ Object {
2122
+ "marginRight": 8,
2123
+ },
2124
+ undefined,
2125
+ ]
2126
+ }
2127
+ />
2128
+ <Text
2129
+ style={
2130
+ Array [
2131
+ Object {
2132
+ "color": "#292a2b",
2133
+ "fontFamily": "BeVietnamPro-Regular",
2134
+ "fontSize": 16,
2135
+ "letterSpacing": 0.48,
2136
+ "lineHeight": 24,
2137
+ },
2138
+ undefined,
2139
+ ]
2140
+ }
2141
+ themeFontSize="large"
2142
+ themeFontWeight="regular"
2143
+ themeIntent="body"
2144
+ >
2145
+ A
2146
+ </Text>
2147
+ </View>
2148
+ </View>
2149
+ </View>
884
2150
  <View
885
2151
  onLayout={[Function]}
886
2152
  style={null}
887
2153
  >
888
2154
  <View>
889
2155
  <View
2156
+ highlighted={false}
2157
+ section={
2158
+ Object {
2159
+ "category": "A",
2160
+ "data": Array [
2161
+ Object {
2162
+ "text": "A1",
2163
+ "value": "a1",
2164
+ },
2165
+ ],
2166
+ }
2167
+ }
2168
+ style={
2169
+ Array [
2170
+ Object {
2171
+ "marginTop": 12,
2172
+ },
2173
+ undefined,
2174
+ ]
2175
+ }
2176
+ trailingItem={
2177
+ Object {
2178
+ "text": "A1",
2179
+ "value": "a1",
2180
+ }
2181
+ }
2182
+ trailingSection={
2183
+ Object {
2184
+ "category": "B",
2185
+ "data": Array [
2186
+ Object {
2187
+ "text": "B1",
2188
+ "value": "b1",
2189
+ },
2190
+ Object {
2191
+ "text": "B2",
2192
+ "value": "b2",
2193
+ },
2194
+ ],
2195
+ }
2196
+ }
2197
+ />
2198
+ <View
2199
+ accessibilityState={
2200
+ Object {
2201
+ "disabled": false,
2202
+ }
2203
+ }
890
2204
  accessible={true}
891
- collapsable={false}
892
2205
  focusable={true}
893
- nativeID="animatedComponent"
894
2206
  onClick={[Function]}
895
2207
  onResponderGrant={[Function]}
896
2208
  onResponderMove={[Function]}
@@ -899,22 +2211,28 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
899
2211
  onResponderTerminationRequest={[Function]}
900
2212
  onStartShouldSetResponder={[Function]}
901
2213
  style={
902
- Object {
903
- "alignItems": "center",
904
- "backgroundColor": "#f1e9fb",
905
- "borderRadius": 4,
906
- "flexDirection": "row",
907
- "justifyContent": "space-between",
908
- "opacity": 1,
909
- "padding": 16,
910
- }
2214
+ Array [
2215
+ Object {
2216
+ "alignItems": "center",
2217
+ "backgroundColor": "#f1e9fb",
2218
+ "flexDirection": "row",
2219
+ "opacity": 1,
2220
+ "padding": 16,
2221
+ },
2222
+ Object {
2223
+ "marginHorizontal": 12,
2224
+ },
2225
+ ]
911
2226
  }
912
2227
  >
913
2228
  <View
914
2229
  style={
915
- Object {
916
- "flex": 1,
917
- }
2230
+ Array [
2231
+ Object {
2232
+ "flex": 1,
2233
+ },
2234
+ undefined,
2235
+ ]
918
2236
  }
919
2237
  >
920
2238
  <Text
@@ -934,10 +2252,123 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
934
2252
  themeFontWeight="regular"
935
2253
  themeIntent="body"
936
2254
  >
937
- A
2255
+ A1
938
2256
  </Text>
939
2257
  </View>
940
2258
  </View>
2259
+ <View
2260
+ highlighted={false}
2261
+ leadingItem={
2262
+ Object {
2263
+ "text": "A1",
2264
+ "value": "a1",
2265
+ }
2266
+ }
2267
+ section={
2268
+ Object {
2269
+ "category": "A",
2270
+ "data": Array [
2271
+ Object {
2272
+ "text": "A1",
2273
+ "value": "a1",
2274
+ },
2275
+ ],
2276
+ }
2277
+ }
2278
+ style={
2279
+ Array [
2280
+ Object {
2281
+ "marginTop": 12,
2282
+ },
2283
+ undefined,
2284
+ ]
2285
+ }
2286
+ trailingSection={
2287
+ Object {
2288
+ "category": "B",
2289
+ "data": Array [
2290
+ Object {
2291
+ "text": "B1",
2292
+ "value": "b1",
2293
+ },
2294
+ Object {
2295
+ "text": "B2",
2296
+ "value": "b2",
2297
+ },
2298
+ ],
2299
+ }
2300
+ }
2301
+ />
2302
+ </View>
2303
+ </View>
2304
+ <View
2305
+ onLayout={[Function]}
2306
+ style={null}
2307
+ />
2308
+ <View
2309
+ onLayout={[Function]}
2310
+ style={null}
2311
+ >
2312
+ <View
2313
+ style={
2314
+ Array [
2315
+ Object {
2316
+ "alignContent": "center",
2317
+ "backgroundColor": "#dadbde",
2318
+ "display": "flex",
2319
+ "flexDirection": "row",
2320
+ "justifyContent": "space-between",
2321
+ "marginBottom": 16,
2322
+ "paddingHorizontal": 16,
2323
+ "paddingVertical": 8,
2324
+ },
2325
+ Object {
2326
+ "marginBottom": 0,
2327
+ },
2328
+ ]
2329
+ }
2330
+ >
2331
+ <View
2332
+ style={
2333
+ Array [
2334
+ Object {
2335
+ "display": "flex",
2336
+ "flexDirection": "row",
2337
+ },
2338
+ undefined,
2339
+ ]
2340
+ }
2341
+ >
2342
+ <View
2343
+ style={
2344
+ Array [
2345
+ Object {
2346
+ "marginRight": 8,
2347
+ },
2348
+ undefined,
2349
+ ]
2350
+ }
2351
+ />
2352
+ <Text
2353
+ style={
2354
+ Array [
2355
+ Object {
2356
+ "color": "#292a2b",
2357
+ "fontFamily": "BeVietnamPro-Regular",
2358
+ "fontSize": 16,
2359
+ "letterSpacing": 0.48,
2360
+ "lineHeight": 24,
2361
+ },
2362
+ undefined,
2363
+ ]
2364
+ }
2365
+ themeFontSize="large"
2366
+ themeFontWeight="regular"
2367
+ themeIntent="body"
2368
+ >
2369
+ B
2370
+ </Text>
2371
+ </View>
941
2372
  </View>
942
2373
  </View>
943
2374
  <View
@@ -946,10 +2377,56 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
946
2377
  >
947
2378
  <View>
948
2379
  <View
2380
+ highlighted={false}
2381
+ leadingSection={
2382
+ Object {
2383
+ "category": "A",
2384
+ "data": Array [
2385
+ Object {
2386
+ "text": "A1",
2387
+ "value": "a1",
2388
+ },
2389
+ ],
2390
+ }
2391
+ }
2392
+ section={
2393
+ Object {
2394
+ "category": "B",
2395
+ "data": Array [
2396
+ Object {
2397
+ "text": "B1",
2398
+ "value": "b1",
2399
+ },
2400
+ Object {
2401
+ "text": "B2",
2402
+ "value": "b2",
2403
+ },
2404
+ ],
2405
+ }
2406
+ }
2407
+ style={
2408
+ Array [
2409
+ Object {
2410
+ "marginTop": 12,
2411
+ },
2412
+ undefined,
2413
+ ]
2414
+ }
2415
+ trailingItem={
2416
+ Object {
2417
+ "text": "B1",
2418
+ "value": "b1",
2419
+ }
2420
+ }
2421
+ />
2422
+ <View
2423
+ accessibilityState={
2424
+ Object {
2425
+ "disabled": false,
2426
+ }
2427
+ }
949
2428
  accessible={true}
950
- collapsable={false}
951
2429
  focusable={true}
952
- nativeID="animatedComponent"
953
2430
  onClick={[Function]}
954
2431
  onResponderGrant={[Function]}
955
2432
  onResponderMove={[Function]}
@@ -958,22 +2435,28 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
958
2435
  onResponderTerminationRequest={[Function]}
959
2436
  onStartShouldSetResponder={[Function]}
960
2437
  style={
961
- Object {
962
- "alignItems": "center",
963
- "backgroundColor": "#ffffff",
964
- "borderRadius": 4,
965
- "flexDirection": "row",
966
- "justifyContent": "space-between",
967
- "opacity": 1,
968
- "padding": 16,
969
- }
2438
+ Array [
2439
+ Object {
2440
+ "alignItems": "center",
2441
+ "backgroundColor": "#ffffff",
2442
+ "flexDirection": "row",
2443
+ "opacity": 1,
2444
+ "padding": 16,
2445
+ },
2446
+ Object {
2447
+ "marginHorizontal": 12,
2448
+ },
2449
+ ]
970
2450
  }
971
2451
  >
972
2452
  <View
973
2453
  style={
974
- Object {
975
- "flex": 1,
976
- }
2454
+ Array [
2455
+ Object {
2456
+ "flex": 1,
2457
+ },
2458
+ undefined,
2459
+ ]
977
2460
  }
978
2461
  >
979
2462
  <Text
@@ -993,10 +2476,59 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
993
2476
  themeFontWeight="regular"
994
2477
  themeIntent="body"
995
2478
  >
996
- B
2479
+ B1
997
2480
  </Text>
998
2481
  </View>
999
2482
  </View>
2483
+ <View
2484
+ highlighted={false}
2485
+ leadingItem={
2486
+ Object {
2487
+ "text": "B1",
2488
+ "value": "b1",
2489
+ }
2490
+ }
2491
+ leadingSection={
2492
+ Object {
2493
+ "category": "A",
2494
+ "data": Array [
2495
+ Object {
2496
+ "text": "A1",
2497
+ "value": "a1",
2498
+ },
2499
+ ],
2500
+ }
2501
+ }
2502
+ section={
2503
+ Object {
2504
+ "category": "B",
2505
+ "data": Array [
2506
+ Object {
2507
+ "text": "B1",
2508
+ "value": "b1",
2509
+ },
2510
+ Object {
2511
+ "text": "B2",
2512
+ "value": "b2",
2513
+ },
2514
+ ],
2515
+ }
2516
+ }
2517
+ style={
2518
+ Array [
2519
+ Object {
2520
+ "marginTop": 4,
2521
+ },
2522
+ undefined,
2523
+ ]
2524
+ }
2525
+ trailingItem={
2526
+ Object {
2527
+ "text": "B2",
2528
+ "value": "b2",
2529
+ }
2530
+ }
2531
+ />
1000
2532
  </View>
1001
2533
  </View>
1002
2534
  <View
@@ -1005,10 +2537,13 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
1005
2537
  >
1006
2538
  <View>
1007
2539
  <View
2540
+ accessibilityState={
2541
+ Object {
2542
+ "disabled": false,
2543
+ }
2544
+ }
1008
2545
  accessible={true}
1009
- collapsable={false}
1010
2546
  focusable={true}
1011
- nativeID="animatedComponent"
1012
2547
  onClick={[Function]}
1013
2548
  onResponderGrant={[Function]}
1014
2549
  onResponderMove={[Function]}
@@ -1017,22 +2552,28 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
1017
2552
  onResponderTerminationRequest={[Function]}
1018
2553
  onStartShouldSetResponder={[Function]}
1019
2554
  style={
1020
- Object {
1021
- "alignItems": "center",
1022
- "backgroundColor": "#ffffff",
1023
- "borderRadius": 4,
1024
- "flexDirection": "row",
1025
- "justifyContent": "space-between",
1026
- "opacity": 1,
1027
- "padding": 16,
1028
- }
2555
+ Array [
2556
+ Object {
2557
+ "alignItems": "center",
2558
+ "backgroundColor": "#ffffff",
2559
+ "flexDirection": "row",
2560
+ "opacity": 1,
2561
+ "padding": 16,
2562
+ },
2563
+ Object {
2564
+ "marginHorizontal": 12,
2565
+ },
2566
+ ]
1029
2567
  }
1030
2568
  >
1031
2569
  <View
1032
2570
  style={
1033
- Object {
1034
- "flex": 1,
1035
- }
2571
+ Array [
2572
+ Object {
2573
+ "flex": 1,
2574
+ },
2575
+ undefined,
2576
+ ]
1036
2577
  }
1037
2578
  >
1038
2579
  <Text
@@ -1052,12 +2593,59 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
1052
2593
  themeFontWeight="regular"
1053
2594
  themeIntent="body"
1054
2595
  >
1055
- C
2596
+ B2
1056
2597
  </Text>
1057
2598
  </View>
1058
2599
  </View>
2600
+ <View
2601
+ highlighted={false}
2602
+ leadingItem={
2603
+ Object {
2604
+ "text": "B2",
2605
+ "value": "b2",
2606
+ }
2607
+ }
2608
+ leadingSection={
2609
+ Object {
2610
+ "category": "A",
2611
+ "data": Array [
2612
+ Object {
2613
+ "text": "A1",
2614
+ "value": "a1",
2615
+ },
2616
+ ],
2617
+ }
2618
+ }
2619
+ section={
2620
+ Object {
2621
+ "category": "B",
2622
+ "data": Array [
2623
+ Object {
2624
+ "text": "B1",
2625
+ "value": "b1",
2626
+ },
2627
+ Object {
2628
+ "text": "B2",
2629
+ "value": "b2",
2630
+ },
2631
+ ],
2632
+ }
2633
+ }
2634
+ style={
2635
+ Array [
2636
+ Object {
2637
+ "marginTop": 12,
2638
+ },
2639
+ undefined,
2640
+ ]
2641
+ }
2642
+ />
1059
2643
  </View>
1060
2644
  </View>
2645
+ <View
2646
+ onLayout={[Function]}
2647
+ style={null}
2648
+ />
1061
2649
  </View>
1062
2650
  </RCTScrollView>
1063
2651
  `;