dce-reactkit 3.1.3 → 3.1.6
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/dist/cjs/index.js +236 -10
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/CheckboxButton.d.ts +1 -0
- package/dist/cjs/types/components/ItemPicker/NestableItemList.d.ts +17 -0
- package/dist/cjs/types/components/ItemPicker/index.d.ts +18 -0
- package/dist/cjs/types/components/ItemPicker/index.test.d.ts +1 -0
- package/dist/cjs/types/components/ItemPicker/types/PickableItem.d.ts +16 -0
- package/dist/cjs/types/helpers/parallelLimit.d.ts +12 -0
- package/dist/cjs/types/index.d.ts +3 -1
- package/dist/esm/index.js +236 -12
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/CheckboxButton.d.ts +1 -0
- package/dist/esm/types/components/ItemPicker/NestableItemList.d.ts +17 -0
- package/dist/esm/types/components/ItemPicker/index.d.ts +18 -0
- package/dist/esm/types/components/ItemPicker/index.test.d.ts +1 -0
- package/dist/esm/types/components/ItemPicker/types/PickableItem.d.ts +16 -0
- package/dist/esm/types/helpers/parallelLimit.d.ts +12 -0
- package/dist/esm/types/index.d.ts +3 -1
- package/dist/index.d.ts +73 -27
- package/package.json +12 -2
- package/sandbox.js +21 -0
- package/src/components/CheckboxButton.tsx +4 -1
- package/src/components/ItemPicker/NestableItemList.tsx +288 -0
- package/src/components/ItemPicker/index.test.tsx +783 -0
- package/src/components/ItemPicker/index.tsx +85 -0
- package/src/components/ItemPicker/types/PickableItem.tsx +30 -0
- package/src/helpers/parallelLimit.ts +61 -0
- package/src/index.ts +4 -0
|
@@ -0,0 +1,783 @@
|
|
|
1
|
+
// Import React
|
|
2
|
+
import React from 'react';
|
|
3
|
+
|
|
4
|
+
// Import testing lib
|
|
5
|
+
import Raixa from 'raixa';
|
|
6
|
+
|
|
7
|
+
// Import item picker
|
|
8
|
+
import ItemPicker from '.';
|
|
9
|
+
|
|
10
|
+
// Import types
|
|
11
|
+
import PickableItem from './types/PickableItem';
|
|
12
|
+
|
|
13
|
+
const items: PickableItem[] = [
|
|
14
|
+
{
|
|
15
|
+
id: '1',
|
|
16
|
+
name: 'Item 1',
|
|
17
|
+
isGroup: false,
|
|
18
|
+
checked: false,
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
id: '2',
|
|
22
|
+
name: 'Item 2',
|
|
23
|
+
isGroup: false,
|
|
24
|
+
checked: false,
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
id: '3',
|
|
28
|
+
name: 'Item 3',
|
|
29
|
+
isGroup: true,
|
|
30
|
+
children: [
|
|
31
|
+
{
|
|
32
|
+
id: '4',
|
|
33
|
+
name: 'Item 4',
|
|
34
|
+
isGroup: false,
|
|
35
|
+
checked: false,
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
id: '5',
|
|
39
|
+
name: 'Item 5',
|
|
40
|
+
isGroup: false,
|
|
41
|
+
checked: false,
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
id: '6',
|
|
45
|
+
name: 'Item 6',
|
|
46
|
+
isGroup: true,
|
|
47
|
+
children: [
|
|
48
|
+
{
|
|
49
|
+
id: '7',
|
|
50
|
+
name: 'Item 7',
|
|
51
|
+
isGroup: false,
|
|
52
|
+
checked: false,
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
id: '8',
|
|
56
|
+
name: 'Item 8',
|
|
57
|
+
isGroup: true,
|
|
58
|
+
children: [
|
|
59
|
+
{
|
|
60
|
+
id: '9',
|
|
61
|
+
name: 'Item 9',
|
|
62
|
+
isGroup: false,
|
|
63
|
+
checked: false,
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
id: '10',
|
|
67
|
+
name: 'Item 10',
|
|
68
|
+
isGroup: true,
|
|
69
|
+
children: [
|
|
70
|
+
{
|
|
71
|
+
id: '11',
|
|
72
|
+
name: 'Item 11',
|
|
73
|
+
isGroup: false,
|
|
74
|
+
checked: false,
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
id: '12',
|
|
78
|
+
name: 'Item 12',
|
|
79
|
+
isGroup: true,
|
|
80
|
+
children: [
|
|
81
|
+
{
|
|
82
|
+
id: '13',
|
|
83
|
+
name: 'Item 13',
|
|
84
|
+
isGroup: true,
|
|
85
|
+
children: [
|
|
86
|
+
{
|
|
87
|
+
id: '14',
|
|
88
|
+
name: 'Item 14',
|
|
89
|
+
isGroup: true,
|
|
90
|
+
children: [
|
|
91
|
+
{
|
|
92
|
+
id: '15',
|
|
93
|
+
name: 'Item 15',
|
|
94
|
+
isGroup: true,
|
|
95
|
+
children: [
|
|
96
|
+
{
|
|
97
|
+
id: '16',
|
|
98
|
+
name: 'Item 16',
|
|
99
|
+
isGroup: false,
|
|
100
|
+
checked: false,
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
id: '17',
|
|
104
|
+
name: 'Item 17',
|
|
105
|
+
isGroup: true,
|
|
106
|
+
children: [
|
|
107
|
+
{
|
|
108
|
+
id: '18',
|
|
109
|
+
name: 'Item 18',
|
|
110
|
+
isGroup: false,
|
|
111
|
+
checked: false,
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
id: '19',
|
|
115
|
+
name: 'Item 19',
|
|
116
|
+
isGroup: true,
|
|
117
|
+
children: [
|
|
118
|
+
{
|
|
119
|
+
id: '20',
|
|
120
|
+
name: 'Item 20',
|
|
121
|
+
isGroup: true,
|
|
122
|
+
children: [
|
|
123
|
+
{
|
|
124
|
+
id: '21',
|
|
125
|
+
name: 'Item 21',
|
|
126
|
+
isGroup: false,
|
|
127
|
+
checked: false,
|
|
128
|
+
},
|
|
129
|
+
],
|
|
130
|
+
},
|
|
131
|
+
],
|
|
132
|
+
},
|
|
133
|
+
],
|
|
134
|
+
},
|
|
135
|
+
],
|
|
136
|
+
},
|
|
137
|
+
],
|
|
138
|
+
},
|
|
139
|
+
],
|
|
140
|
+
},
|
|
141
|
+
],
|
|
142
|
+
},
|
|
143
|
+
],
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
id: '22',
|
|
147
|
+
name: 'Item 22',
|
|
148
|
+
isGroup: false,
|
|
149
|
+
checked: false,
|
|
150
|
+
},
|
|
151
|
+
],
|
|
152
|
+
},
|
|
153
|
+
],
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
id: '23',
|
|
157
|
+
name: 'Item 23',
|
|
158
|
+
isGroup: false,
|
|
159
|
+
checked: false,
|
|
160
|
+
},
|
|
161
|
+
],
|
|
162
|
+
},
|
|
163
|
+
{
|
|
164
|
+
id: '24',
|
|
165
|
+
name: 'Item 24',
|
|
166
|
+
isGroup: false,
|
|
167
|
+
checked: false,
|
|
168
|
+
},
|
|
169
|
+
];
|
|
170
|
+
|
|
171
|
+
const allCheckedItems: PickableItem[] = [
|
|
172
|
+
{
|
|
173
|
+
id: '1',
|
|
174
|
+
name: 'Item 1',
|
|
175
|
+
isGroup: false,
|
|
176
|
+
checked: true,
|
|
177
|
+
},
|
|
178
|
+
{
|
|
179
|
+
id: '2',
|
|
180
|
+
name: 'Item 2',
|
|
181
|
+
isGroup: false,
|
|
182
|
+
checked: true,
|
|
183
|
+
},
|
|
184
|
+
{
|
|
185
|
+
id: '3',
|
|
186
|
+
name: 'Item 3',
|
|
187
|
+
isGroup: true,
|
|
188
|
+
children: [
|
|
189
|
+
{
|
|
190
|
+
id: '4',
|
|
191
|
+
name: 'Item 4',
|
|
192
|
+
isGroup: false,
|
|
193
|
+
checked: true,
|
|
194
|
+
},
|
|
195
|
+
{
|
|
196
|
+
id: '5',
|
|
197
|
+
name: 'Item 5',
|
|
198
|
+
isGroup: false,
|
|
199
|
+
checked: true,
|
|
200
|
+
},
|
|
201
|
+
{
|
|
202
|
+
id: '6',
|
|
203
|
+
name: 'Item 6',
|
|
204
|
+
isGroup: true,
|
|
205
|
+
children: [
|
|
206
|
+
{
|
|
207
|
+
id: '7',
|
|
208
|
+
name: 'Item 7',
|
|
209
|
+
isGroup: false,
|
|
210
|
+
checked: true,
|
|
211
|
+
},
|
|
212
|
+
{
|
|
213
|
+
id: '8',
|
|
214
|
+
name: 'Item 8',
|
|
215
|
+
isGroup: true,
|
|
216
|
+
children: [
|
|
217
|
+
{
|
|
218
|
+
id: '9',
|
|
219
|
+
name: 'Item 9',
|
|
220
|
+
isGroup: false,
|
|
221
|
+
checked: true,
|
|
222
|
+
},
|
|
223
|
+
{
|
|
224
|
+
id: '10',
|
|
225
|
+
name: 'Item 10',
|
|
226
|
+
isGroup: true,
|
|
227
|
+
children: [
|
|
228
|
+
{
|
|
229
|
+
id: '11',
|
|
230
|
+
name: 'Item 11',
|
|
231
|
+
isGroup: false,
|
|
232
|
+
checked: true,
|
|
233
|
+
},
|
|
234
|
+
{
|
|
235
|
+
id: '12',
|
|
236
|
+
name: 'Item 12',
|
|
237
|
+
isGroup: true,
|
|
238
|
+
children: [
|
|
239
|
+
{
|
|
240
|
+
id: '13',
|
|
241
|
+
name: 'Item 13',
|
|
242
|
+
isGroup: true,
|
|
243
|
+
children: [
|
|
244
|
+
{
|
|
245
|
+
id: '14',
|
|
246
|
+
name: 'Item 14',
|
|
247
|
+
isGroup: true,
|
|
248
|
+
children: [
|
|
249
|
+
{
|
|
250
|
+
id: '15',
|
|
251
|
+
name: 'Item 15',
|
|
252
|
+
isGroup: true,
|
|
253
|
+
children: [
|
|
254
|
+
{
|
|
255
|
+
id: '16',
|
|
256
|
+
name: 'Item 16',
|
|
257
|
+
isGroup: false,
|
|
258
|
+
checked: true,
|
|
259
|
+
},
|
|
260
|
+
{
|
|
261
|
+
id: '17',
|
|
262
|
+
name: 'Item 17',
|
|
263
|
+
isGroup: true,
|
|
264
|
+
children: [
|
|
265
|
+
{
|
|
266
|
+
id: '18',
|
|
267
|
+
name: 'Item 18',
|
|
268
|
+
isGroup: false,
|
|
269
|
+
checked: true,
|
|
270
|
+
},
|
|
271
|
+
{
|
|
272
|
+
id: '19',
|
|
273
|
+
name: 'Item 19',
|
|
274
|
+
isGroup: true,
|
|
275
|
+
children: [
|
|
276
|
+
{
|
|
277
|
+
id: '20',
|
|
278
|
+
name: 'Item 20',
|
|
279
|
+
isGroup: true,
|
|
280
|
+
children: [
|
|
281
|
+
{
|
|
282
|
+
id: '21',
|
|
283
|
+
name: 'Item 21',
|
|
284
|
+
isGroup: false,
|
|
285
|
+
checked: true,
|
|
286
|
+
},
|
|
287
|
+
],
|
|
288
|
+
},
|
|
289
|
+
],
|
|
290
|
+
},
|
|
291
|
+
],
|
|
292
|
+
},
|
|
293
|
+
],
|
|
294
|
+
},
|
|
295
|
+
],
|
|
296
|
+
},
|
|
297
|
+
],
|
|
298
|
+
},
|
|
299
|
+
],
|
|
300
|
+
},
|
|
301
|
+
],
|
|
302
|
+
},
|
|
303
|
+
{
|
|
304
|
+
id: '22',
|
|
305
|
+
name: 'Item 22',
|
|
306
|
+
isGroup: false,
|
|
307
|
+
checked: true,
|
|
308
|
+
},
|
|
309
|
+
],
|
|
310
|
+
},
|
|
311
|
+
],
|
|
312
|
+
},
|
|
313
|
+
{
|
|
314
|
+
id: '23',
|
|
315
|
+
name: 'Item 23',
|
|
316
|
+
isGroup: false,
|
|
317
|
+
checked: true,
|
|
318
|
+
},
|
|
319
|
+
],
|
|
320
|
+
},
|
|
321
|
+
{
|
|
322
|
+
id: '24',
|
|
323
|
+
name: 'Item 24',
|
|
324
|
+
isGroup: false,
|
|
325
|
+
checked: true,
|
|
326
|
+
},
|
|
327
|
+
];
|
|
328
|
+
|
|
329
|
+
const someCheckedItems: PickableItem[] = [
|
|
330
|
+
{
|
|
331
|
+
id: '1',
|
|
332
|
+
name: 'Item 1',
|
|
333
|
+
isGroup: false,
|
|
334
|
+
checked: false,
|
|
335
|
+
},
|
|
336
|
+
{
|
|
337
|
+
id: '2',
|
|
338
|
+
name: 'Item 2',
|
|
339
|
+
isGroup: false,
|
|
340
|
+
checked: false,
|
|
341
|
+
},
|
|
342
|
+
{
|
|
343
|
+
id: '3',
|
|
344
|
+
name: 'Item 3',
|
|
345
|
+
isGroup: true,
|
|
346
|
+
children: [
|
|
347
|
+
{
|
|
348
|
+
id: '4',
|
|
349
|
+
name: 'Item 4',
|
|
350
|
+
isGroup: false,
|
|
351
|
+
checked: false,
|
|
352
|
+
},
|
|
353
|
+
{
|
|
354
|
+
id: '5',
|
|
355
|
+
name: 'Item 5',
|
|
356
|
+
isGroup: false,
|
|
357
|
+
checked: true,
|
|
358
|
+
},
|
|
359
|
+
{
|
|
360
|
+
id: '6',
|
|
361
|
+
name: 'Item 6',
|
|
362
|
+
isGroup: true,
|
|
363
|
+
children: [
|
|
364
|
+
{
|
|
365
|
+
id: '7',
|
|
366
|
+
name: 'Item 7',
|
|
367
|
+
isGroup: false,
|
|
368
|
+
checked: false,
|
|
369
|
+
},
|
|
370
|
+
{
|
|
371
|
+
id: '8',
|
|
372
|
+
name: 'Item 8',
|
|
373
|
+
isGroup: true,
|
|
374
|
+
children: [
|
|
375
|
+
{
|
|
376
|
+
id: '9',
|
|
377
|
+
name: 'Item 9',
|
|
378
|
+
isGroup: false,
|
|
379
|
+
checked: false,
|
|
380
|
+
},
|
|
381
|
+
{
|
|
382
|
+
id: '10',
|
|
383
|
+
name: 'Item 10',
|
|
384
|
+
isGroup: true,
|
|
385
|
+
children: [
|
|
386
|
+
{
|
|
387
|
+
id: '11',
|
|
388
|
+
name: 'Item 11',
|
|
389
|
+
isGroup: false,
|
|
390
|
+
checked: false,
|
|
391
|
+
},
|
|
392
|
+
{
|
|
393
|
+
id: '12',
|
|
394
|
+
name: 'Item 12',
|
|
395
|
+
isGroup: true,
|
|
396
|
+
children: [
|
|
397
|
+
{
|
|
398
|
+
id: '13',
|
|
399
|
+
name: 'Item 13',
|
|
400
|
+
isGroup: true,
|
|
401
|
+
children: [
|
|
402
|
+
{
|
|
403
|
+
id: '14',
|
|
404
|
+
name: 'Item 14',
|
|
405
|
+
isGroup: true,
|
|
406
|
+
children: [
|
|
407
|
+
{
|
|
408
|
+
id: '15',
|
|
409
|
+
name: 'Item 15',
|
|
410
|
+
isGroup: true,
|
|
411
|
+
children: [
|
|
412
|
+
{
|
|
413
|
+
id: '16',
|
|
414
|
+
name: 'Item 16',
|
|
415
|
+
isGroup: false,
|
|
416
|
+
checked: true,
|
|
417
|
+
},
|
|
418
|
+
{
|
|
419
|
+
id: '17',
|
|
420
|
+
name: 'Item 17',
|
|
421
|
+
isGroup: true,
|
|
422
|
+
children: [
|
|
423
|
+
{
|
|
424
|
+
id: '18',
|
|
425
|
+
name: 'Item 18',
|
|
426
|
+
isGroup: false,
|
|
427
|
+
checked: false,
|
|
428
|
+
},
|
|
429
|
+
{
|
|
430
|
+
id: '19',
|
|
431
|
+
name: 'Item 19',
|
|
432
|
+
isGroup: true,
|
|
433
|
+
children: [
|
|
434
|
+
{
|
|
435
|
+
id: '20',
|
|
436
|
+
name: 'Item 20',
|
|
437
|
+
isGroup: true,
|
|
438
|
+
children: [
|
|
439
|
+
{
|
|
440
|
+
id: '21',
|
|
441
|
+
name: 'Item 21',
|
|
442
|
+
isGroup: false,
|
|
443
|
+
checked: true,
|
|
444
|
+
},
|
|
445
|
+
],
|
|
446
|
+
},
|
|
447
|
+
],
|
|
448
|
+
},
|
|
449
|
+
],
|
|
450
|
+
},
|
|
451
|
+
],
|
|
452
|
+
},
|
|
453
|
+
],
|
|
454
|
+
},
|
|
455
|
+
],
|
|
456
|
+
},
|
|
457
|
+
],
|
|
458
|
+
},
|
|
459
|
+
],
|
|
460
|
+
},
|
|
461
|
+
{
|
|
462
|
+
id: '22',
|
|
463
|
+
name: 'Item 22',
|
|
464
|
+
isGroup: false,
|
|
465
|
+
checked: true,
|
|
466
|
+
},
|
|
467
|
+
],
|
|
468
|
+
},
|
|
469
|
+
],
|
|
470
|
+
},
|
|
471
|
+
{
|
|
472
|
+
id: '23',
|
|
473
|
+
name: 'Item 23',
|
|
474
|
+
isGroup: false,
|
|
475
|
+
checked: true,
|
|
476
|
+
},
|
|
477
|
+
],
|
|
478
|
+
},
|
|
479
|
+
{
|
|
480
|
+
id: '24',
|
|
481
|
+
name: 'Item 24',
|
|
482
|
+
isGroup: false,
|
|
483
|
+
checked: false,
|
|
484
|
+
},
|
|
485
|
+
];
|
|
486
|
+
|
|
487
|
+
/**
|
|
488
|
+
* Makes sure that all expected checked items (including nested items) are
|
|
489
|
+
* checked. Also make sure that no items are checked that should not be
|
|
490
|
+
* checked. Throw an error if the assertion fails
|
|
491
|
+
* @author Yuen Ler Chow
|
|
492
|
+
* @param pickableItems full list of items
|
|
493
|
+
* @param expectedCheckedItemIds list of item ids that must be checked
|
|
494
|
+
*/
|
|
495
|
+
const assertExpectedItemsAreChecked = (
|
|
496
|
+
pickableItems: PickableItem[],
|
|
497
|
+
expectedCheckedItemIds: string[],
|
|
498
|
+
) => {
|
|
499
|
+
for (const item of pickableItems) {
|
|
500
|
+
const itemShouldBeChecked = (
|
|
501
|
+
expectedCheckedItemIds.includes(String(item.id))
|
|
502
|
+
);
|
|
503
|
+
|
|
504
|
+
if (item.isGroup) {
|
|
505
|
+
// Recursively check children
|
|
506
|
+
assertExpectedItemsAreChecked(item.children, expectedCheckedItemIds);
|
|
507
|
+
} else if (item.checked && !itemShouldBeChecked) {
|
|
508
|
+
throw new Error(`Item ${item.id} is checked but not expected to be checked`);
|
|
509
|
+
} else if (!item.checked && itemShouldBeChecked) {
|
|
510
|
+
throw new Error(`Item ${item.id} is not checked but expected to be checked`);
|
|
511
|
+
}
|
|
512
|
+
}
|
|
513
|
+
};
|
|
514
|
+
|
|
515
|
+
test(
|
|
516
|
+
'All Checkboxes appear when initially rendered',
|
|
517
|
+
async () => {
|
|
518
|
+
Raixa.render(
|
|
519
|
+
<ItemPicker
|
|
520
|
+
title="Files"
|
|
521
|
+
items={items}
|
|
522
|
+
onChanged={() => { }}
|
|
523
|
+
/>,
|
|
524
|
+
);
|
|
525
|
+
|
|
526
|
+
// Make sure every checkbox exists
|
|
527
|
+
for (let i = 1; i <= 24; i++) {
|
|
528
|
+
Raixa.assertExists(`.NestableItemList-CheckboxButton-${i}`);
|
|
529
|
+
}
|
|
530
|
+
},
|
|
531
|
+
);
|
|
532
|
+
|
|
533
|
+
test(
|
|
534
|
+
'Collapsing item 3 results in only the first 3 items and item 24 showing',
|
|
535
|
+
async () => {
|
|
536
|
+
Raixa.render(
|
|
537
|
+
<ItemPicker
|
|
538
|
+
title="Files"
|
|
539
|
+
items={items}
|
|
540
|
+
onChanged={() => { }}
|
|
541
|
+
/>,
|
|
542
|
+
);
|
|
543
|
+
|
|
544
|
+
// Collapse the dropdown
|
|
545
|
+
Raixa.click('.NestableItemList-dropdown-button-3');
|
|
546
|
+
|
|
547
|
+
// Make sure all the children of the dropdown do not exist
|
|
548
|
+
for (let i = 1; i <= 24; i++) {
|
|
549
|
+
if (i <= 3 || i === 24) {
|
|
550
|
+
Raixa.assertExists(`.NestableItemList-CheckboxButton-${i}`);
|
|
551
|
+
} else {
|
|
552
|
+
Raixa.assertAbsent(`.NestableItemList-CheckboxButton-${i}`);
|
|
553
|
+
}
|
|
554
|
+
}
|
|
555
|
+
},
|
|
556
|
+
);
|
|
557
|
+
|
|
558
|
+
test(
|
|
559
|
+
'Collapsing item 15 results hides items 16 through 21',
|
|
560
|
+
async () => {
|
|
561
|
+
Raixa.render(
|
|
562
|
+
<ItemPicker
|
|
563
|
+
title="Files"
|
|
564
|
+
items={items}
|
|
565
|
+
onChanged={() => { }}
|
|
566
|
+
/>,
|
|
567
|
+
);
|
|
568
|
+
|
|
569
|
+
// Collapse the dropdown
|
|
570
|
+
Raixa.click('.NestableItemList-dropdown-button-15');
|
|
571
|
+
|
|
572
|
+
// Make sure all the children of the dropdown do not exist
|
|
573
|
+
for (let i = 1; i <= 24; i++) {
|
|
574
|
+
if (i <= 15 || i >= 22) {
|
|
575
|
+
Raixa.assertExists(`.NestableItemList-CheckboxButton-${i}`);
|
|
576
|
+
} else {
|
|
577
|
+
Raixa.assertAbsent(`.NestableItemList-CheckboxButton-${i}`);
|
|
578
|
+
}
|
|
579
|
+
}
|
|
580
|
+
},
|
|
581
|
+
);
|
|
582
|
+
|
|
583
|
+
test(
|
|
584
|
+
'Collapsing item 10 results hides items 11 through 21',
|
|
585
|
+
async () => {
|
|
586
|
+
Raixa.render(
|
|
587
|
+
<ItemPicker
|
|
588
|
+
title="Files"
|
|
589
|
+
items={items}
|
|
590
|
+
onChanged={() => { }}
|
|
591
|
+
/>,
|
|
592
|
+
);
|
|
593
|
+
|
|
594
|
+
// Collapse the dropdown
|
|
595
|
+
Raixa.click('.NestableItemList-dropdown-button-10');
|
|
596
|
+
|
|
597
|
+
// Make sure all the children of the dropdown do not exist
|
|
598
|
+
for (let i = 1; i <= 24; i++) {
|
|
599
|
+
if (i <= 10 || i >= 22) {
|
|
600
|
+
Raixa.assertExists(`.NestableItemList-CheckboxButton-${i}`);
|
|
601
|
+
} else {
|
|
602
|
+
Raixa.assertAbsent(`.NestableItemList-CheckboxButton-${i}`);
|
|
603
|
+
}
|
|
604
|
+
}
|
|
605
|
+
},
|
|
606
|
+
);
|
|
607
|
+
|
|
608
|
+
test(
|
|
609
|
+
'All Checkboxes are unchecked when initially rendered',
|
|
610
|
+
async () => {
|
|
611
|
+
Raixa.render(
|
|
612
|
+
<ItemPicker
|
|
613
|
+
title="Files"
|
|
614
|
+
items={items}
|
|
615
|
+
onChanged={() => { }}
|
|
616
|
+
/>,
|
|
617
|
+
);
|
|
618
|
+
|
|
619
|
+
// Make sure all checkboxes are unchecked
|
|
620
|
+
for (let i = 1; i <= 24; i++) {
|
|
621
|
+
Raixa.assertHasClass(
|
|
622
|
+
`.NestableItemList-CheckboxButton-${i}`,
|
|
623
|
+
'CheckboxButton-status-unchecked',
|
|
624
|
+
);
|
|
625
|
+
}
|
|
626
|
+
},
|
|
627
|
+
);
|
|
628
|
+
|
|
629
|
+
test(
|
|
630
|
+
'Checking item 1 checks items 1',
|
|
631
|
+
async () => {
|
|
632
|
+
let updatedItems: PickableItem[] = [];
|
|
633
|
+
Raixa.render(
|
|
634
|
+
<ItemPicker
|
|
635
|
+
title="Files"
|
|
636
|
+
items={items}
|
|
637
|
+
onChanged={(newUpdatedItems) => {
|
|
638
|
+
updatedItems = newUpdatedItems;
|
|
639
|
+
}}
|
|
640
|
+
/>,
|
|
641
|
+
);
|
|
642
|
+
|
|
643
|
+
// Make sure the checkbox is unchecked to start
|
|
644
|
+
Raixa.assertHasClass(
|
|
645
|
+
'.NestableItemList-CheckboxButton-1',
|
|
646
|
+
'CheckboxButton-status-unchecked',
|
|
647
|
+
);
|
|
648
|
+
|
|
649
|
+
// Toggle the checkbox
|
|
650
|
+
Raixa.click('.NestableItemList-CheckboxButton-1');
|
|
651
|
+
|
|
652
|
+
// Make sure the item is now checked
|
|
653
|
+
assertExpectedItemsAreChecked(updatedItems, ['1']);
|
|
654
|
+
},
|
|
655
|
+
);
|
|
656
|
+
|
|
657
|
+
test(
|
|
658
|
+
'Clicking item 1 unchecks items 1',
|
|
659
|
+
async () => {
|
|
660
|
+
let updatedItems: PickableItem[] = [];
|
|
661
|
+
Raixa.render(
|
|
662
|
+
<ItemPicker
|
|
663
|
+
title="Files"
|
|
664
|
+
items={allCheckedItems}
|
|
665
|
+
onChanged={(newUpdatedItems) => {
|
|
666
|
+
updatedItems = newUpdatedItems;
|
|
667
|
+
}}
|
|
668
|
+
/>,
|
|
669
|
+
);
|
|
670
|
+
|
|
671
|
+
// Make sure the checkbox starts checked
|
|
672
|
+
Raixa.assertHasClass(
|
|
673
|
+
'.NestableItemList-CheckboxButton-1',
|
|
674
|
+
'CheckboxButton-status-checked',
|
|
675
|
+
);
|
|
676
|
+
|
|
677
|
+
// Uncheck the checkbox
|
|
678
|
+
Raixa.click('.NestableItemList-CheckboxButton-1');
|
|
679
|
+
|
|
680
|
+
// Make sure everything but the first checkbox is checked
|
|
681
|
+
const expected = [];
|
|
682
|
+
for (let i = 2; i <= 24; i++) {
|
|
683
|
+
expected.push(String(i));
|
|
684
|
+
}
|
|
685
|
+
assertExpectedItemsAreChecked(updatedItems, expected);
|
|
686
|
+
},
|
|
687
|
+
);
|
|
688
|
+
|
|
689
|
+
test(
|
|
690
|
+
'Checking item 3 checks items 3 through 23',
|
|
691
|
+
async () => {
|
|
692
|
+
let updatedItems: PickableItem[] = [];
|
|
693
|
+
Raixa.render(
|
|
694
|
+
<ItemPicker
|
|
695
|
+
title="Files"
|
|
696
|
+
items={items}
|
|
697
|
+
onChanged={(newUpdatedItems) => {
|
|
698
|
+
updatedItems = newUpdatedItems;
|
|
699
|
+
}}
|
|
700
|
+
/>,
|
|
701
|
+
);
|
|
702
|
+
|
|
703
|
+
// Make sure items 3-23 are unchecked
|
|
704
|
+
for (let i = 3; i <= 23; i++) {
|
|
705
|
+
Raixa.assertHasClass(
|
|
706
|
+
`.NestableItemList-CheckboxButton-${i}`,
|
|
707
|
+
'CheckboxButton-status-unchecked',
|
|
708
|
+
);
|
|
709
|
+
}
|
|
710
|
+
|
|
711
|
+
// Toggle the checkbox
|
|
712
|
+
Raixa.click('.NestableItemList-CheckboxButton-3');
|
|
713
|
+
|
|
714
|
+
// Make sure the checkbox and its children are all checked
|
|
715
|
+
const expected = [];
|
|
716
|
+
for (let i = 3; i <= 23; i++) {
|
|
717
|
+
expected.push(String(i));
|
|
718
|
+
}
|
|
719
|
+
assertExpectedItemsAreChecked(updatedItems, expected);
|
|
720
|
+
},
|
|
721
|
+
);
|
|
722
|
+
|
|
723
|
+
test(
|
|
724
|
+
'Clicking folder 3 checks unchecks 3 through 23',
|
|
725
|
+
async () => {
|
|
726
|
+
let updatedItems: PickableItem[] = [];
|
|
727
|
+
Raixa.render(
|
|
728
|
+
<ItemPicker
|
|
729
|
+
title="Files"
|
|
730
|
+
items={allCheckedItems}
|
|
731
|
+
onChanged={(newUpdatedItems) => {
|
|
732
|
+
updatedItems = newUpdatedItems;
|
|
733
|
+
}}
|
|
734
|
+
/>,
|
|
735
|
+
);
|
|
736
|
+
|
|
737
|
+
// Make sure items 3-23 start checked
|
|
738
|
+
for (let i = 3; i <= 23; i++) {
|
|
739
|
+
Raixa.assertHasClass(
|
|
740
|
+
`.NestableItemList-CheckboxButton-${i}`,
|
|
741
|
+
'CheckboxButton-status-checked',
|
|
742
|
+
);
|
|
743
|
+
}
|
|
744
|
+
|
|
745
|
+
// Toggle the checkbox
|
|
746
|
+
Raixa.click('.NestableItemList-CheckboxButton-3');
|
|
747
|
+
|
|
748
|
+
// Make sure 3-23 are not checked
|
|
749
|
+
assertExpectedItemsAreChecked(updatedItems, ['1', '2', '24']);
|
|
750
|
+
},
|
|
751
|
+
);
|
|
752
|
+
|
|
753
|
+
test(
|
|
754
|
+
'Clicking dashed folder 3 checks 3 through 23',
|
|
755
|
+
async () => {
|
|
756
|
+
let updatedItems: PickableItem[] = [];
|
|
757
|
+
Raixa.render(
|
|
758
|
+
<ItemPicker
|
|
759
|
+
title="Files"
|
|
760
|
+
items={someCheckedItems}
|
|
761
|
+
onChanged={(newUpdatedItems) => {
|
|
762
|
+
updatedItems = newUpdatedItems;
|
|
763
|
+
}}
|
|
764
|
+
/>,
|
|
765
|
+
);
|
|
766
|
+
|
|
767
|
+
// Make sure the checkbox is dashed to start
|
|
768
|
+
Raixa.assertHasClass(
|
|
769
|
+
'.NestableItemList-CheckboxButton-3',
|
|
770
|
+
'CheckboxButton-dashed',
|
|
771
|
+
);
|
|
772
|
+
|
|
773
|
+
// Toggle the checkbox
|
|
774
|
+
Raixa.click('.NestableItemList-CheckboxButton-3');
|
|
775
|
+
|
|
776
|
+
// Make sure checkboxes 3-23 are all checked
|
|
777
|
+
const expected = [];
|
|
778
|
+
for (let i = 3; i <= 23; i++) {
|
|
779
|
+
expected.push(String(i));
|
|
780
|
+
}
|
|
781
|
+
assertExpectedItemsAreChecked(updatedItems, expected);
|
|
782
|
+
},
|
|
783
|
+
);
|