orc-shared 5.10.1-dev.6 → 5.10.1-dev.8

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 (42) hide show
  1. package/dist/components/AppFrame/MenuItem.js +3 -12
  2. package/dist/components/MaterialUI/DataDisplay/Table.js +2 -1
  3. package/dist/components/MaterialUI/DataDisplay/TableProps.js +3 -1
  4. package/dist/components/MaterialUI/Surfaces/SectionExpansionPanel.js +3 -2
  5. package/dist/components/ToastList.js +95 -64
  6. package/dist/getTheme.js +0 -5
  7. package/dist/utils/toastHelper.js +52 -0
  8. package/package.json +1 -1
  9. package/src/components/AppFrame/MenuItem.js +1 -9
  10. package/src/components/MaterialUI/DataDisplay/Table.js +6 -1
  11. package/src/components/MaterialUI/DataDisplay/Table.test.js +20 -0
  12. package/src/components/MaterialUI/DataDisplay/TableProps.js +2 -0
  13. package/src/components/MaterialUI/DataDisplay/TableProps.test.js +20 -2
  14. package/src/components/MaterialUI/Surfaces/SectionExpansionPanel.js +2 -1
  15. package/src/components/ToastList.js +79 -90
  16. package/src/components/ToastList.test.js +29 -103
  17. package/src/getTheme.js +0 -5
  18. package/src/utils/toastHelper.js +8 -0
  19. package/src/utils/toastHelper.test.js +41 -0
  20. package/dist/components/CategoryList.js +0 -197
  21. package/dist/components/List/DataCell.js +0 -129
  22. package/dist/components/List/HeadCell.js +0 -125
  23. package/dist/components/List/HeadRow.js +0 -73
  24. package/dist/components/List/List.js +0 -274
  25. package/dist/components/List/Row.js +0 -109
  26. package/dist/components/List/enhanceColumnDefs.js +0 -111
  27. package/dist/components/List/index.js +0 -59
  28. package/src/components/CategoryList.js +0 -140
  29. package/src/components/CategoryList.test.js +0 -667
  30. package/src/components/List/DataCell.js +0 -77
  31. package/src/components/List/DataCell.test.js +0 -357
  32. package/src/components/List/HeadCell.js +0 -105
  33. package/src/components/List/HeadCell.test.js +0 -331
  34. package/src/components/List/HeadRow.js +0 -21
  35. package/src/components/List/HeadRow.test.js +0 -27
  36. package/src/components/List/List.js +0 -162
  37. package/src/components/List/List.test.js +0 -705
  38. package/src/components/List/Row.js +0 -72
  39. package/src/components/List/Row.test.js +0 -194
  40. package/src/components/List/enhanceColumnDefs.js +0 -54
  41. package/src/components/List/enhanceColumnDefs.test.js +0 -179
  42. package/src/components/List/index.js +0 -6
package/src/components/List/List.test.js DELETED
@@ -1,705 +0,0 @@
1
- import React from "react";
2
- import { Provider } from "react-redux";
3
- import { Ignore } from "unexpected-reaction";
4
- import { List, Table, Placeholder, PlaceholderCell, PlaceholderBox } from "./List";
5
- import { TableRow } from "./Row";
6
- import { HeadTableRow } from "./HeadRow";
7
- import { TableHeader, HeadBox } from "./HeadCell";
8
-
9
- const generateRows = count => {
10
- const rows = [];
11
- for (let i = 0; i < count; i += 1) {
12
- rows.push({ key: (i + 1).toString() });
13
- }
14
- return rows;
15
- };
16
-
17
- describe("List", () => {
18
- let store, selection;
19
- beforeEach(() => {
20
- store = {
21
- subscribe: () => {},
22
- dispatch: () => {},
23
- getState: () => ({ getIn: () => ({ selection }) }),
24
- };
25
- });
26
-
27
- it("renders nothing if no columnDefs", () =>
28
- expect(
29
- <Provider store={store}>
30
- <List rows={[{}]} />
31
- </Provider>,
32
- "to satisfy",
33
- null,
34
- ));
35
-
36
- it("renders a table with no rows", () =>
37
- expect(
38
- <Provider store={store}>
39
- <List columnDefs={[{ fieldName: "a" }]} />
40
- </Provider>,
41
- "when mounted",
42
- "to satisfy",
43
- <Table>
44
- <thead>
45
- <HeadTableRow>
46
- <TableHeader>
47
- <HeadBox></HeadBox>
48
- </TableHeader>
49
- </HeadTableRow>
50
- </thead>
51
- <tbody></tbody>
52
- </Table>,
53
- ));
54
-
55
- it("renders a placeholder if one given and no rows", () =>
56
- expect(
57
- <Provider store={store}>
58
- <List
59
- height={121}
60
- columnDefs={[{ fieldName: "a" }, { fieldName: "b" }, { fieldName: "c" }]}
61
- placeholder={<div />}
62
- />
63
- </Provider>,
64
- "when mounted",
65
- "to satisfy",
66
- <table>
67
- <thead>
68
- <tr>
69
- <th>
70
- <Ignore />
71
- </th>
72
- <th>
73
- <Ignore />
74
- </th>
75
- <th>
76
- <Ignore />
77
- </th>
78
- </tr>
79
- </thead>
80
- <tbody>
81
- <Placeholder width={3} height={80}>
82
- <div />
83
- </Placeholder>
84
- </tbody>
85
- </table>,
86
- ));
87
-
88
- it("renders a row for each row data object", () => {
89
- const rows = [{ key: "a" }, { key: "b" }, { key: "c" }];
90
- const columnDefs = [{ fieldName: "a" }];
91
- return expect(
92
- <Provider store={store}>
93
- <List columnDefs={columnDefs} rows={rows} keyField={["key"]} />
94
- </Provider>,
95
- "when mounted",
96
- "to satisfy",
97
- <table>
98
- <thead>
99
- <tr>
100
- <th>
101
- <Ignore />
102
- </th>
103
- </tr>
104
- </thead>
105
- <tbody>
106
- <TableRow>
107
- <td />
108
- </TableRow>
109
- <TableRow>
110
- <td />
111
- </TableRow>
112
- <TableRow>
113
- <td />
114
- </TableRow>
115
- </tbody>
116
- </table>,
117
- );
118
- });
119
-
120
- it("renders rows with click handlers", () => {
121
- const rows = [{ key: "a" }, { key: "b" }, { key: "c" }];
122
- const columnDefs = [{ fieldName: "a" }];
123
- return expect(
124
- <Provider store={store}>
125
- <List columnDefs={columnDefs} rows={rows} keyField={["key"]} rowOnClick={() => {}} />
126
- </Provider>,
127
- "when mounted",
128
- "to satisfy",
129
- <table>
130
- <thead>
131
- <tr>
132
- <th>
133
- <Ignore />
134
- </th>
135
- </tr>
136
- </thead>
137
- <tbody>
138
- <TableRow onClick={() => {}}>
139
- <td />
140
- </TableRow>
141
- <TableRow onClick={() => {}}>
142
- <td />
143
- </TableRow>
144
- <TableRow onClick={() => {}}>
145
- <td />
146
- </TableRow>
147
- </tbody>
148
- </table>,
149
- );
150
- });
151
-
152
- it("renders rows with data-based backgrounds", () => {
153
- const rows = [{ key: "a" }, { key: "b" }, { key: "c" }];
154
- const columnDefs = [{ fieldName: "a" }];
155
- const colorMap = {
156
- a: "#ff0000",
157
- b: "#00ff00",
158
- c: "#0000ff",
159
- };
160
- const colorGetter = row => colorMap[row.key];
161
- return expect(
162
- <Provider store={store}>
163
- <List columnDefs={columnDefs} rows={rows} keyField={["key"]} rowBackgroundGetter={colorGetter} />
164
- </Provider>,
165
- "when mounted",
166
- "to satisfy",
167
- <table>
168
- <thead>
169
- <tr>
170
- <th>
171
- <Ignore />
172
- </th>
173
- </tr>
174
- </thead>
175
- <tbody>
176
- <TableRow bgColor="#ff0000">
177
- <td />
178
- </TableRow>
179
- <TableRow bgColor="#00ff00">
180
- <td />
181
- </TableRow>
182
- <TableRow bgColor="#0000ff">
183
- <td />
184
- </TableRow>
185
- </tbody>
186
- </table>,
187
- );
188
- });
189
-
190
- it("renders rows with index-based backgrounds", () => {
191
- const rows = [{ key: "a" }, { key: "b" }, { key: "c" }];
192
- const columnDefs = [{ fieldName: "a" }];
193
- const colorGetter = (row, index) => (index % 2 ? "red" : "green");
194
- return expect(
195
- <Provider store={store}>
196
- <List columnDefs={columnDefs} rows={rows} keyField={["key"]} rowBackgroundGetter={colorGetter} />
197
- </Provider>,
198
- "when mounted",
199
- "to satisfy",
200
- <table>
201
- <thead>
202
- <tr>
203
- <th>
204
- <Ignore />
205
- </th>
206
- </tr>
207
- </thead>
208
- <tbody>
209
- <TableRow bgColor="green">
210
- <td />
211
- </TableRow>
212
- <TableRow bgColor="red">
213
- <td />
214
- </TableRow>
215
- <TableRow bgColor="green">
216
- <td />
217
- </TableRow>
218
- </tbody>
219
- </table>,
220
- );
221
- });
222
-
223
- it("renders a header based on column definitions", () => {
224
- const rows = [{ key: "a" }, { key: "b" }, { key: "c" }];
225
- const columnDefs = [
226
- { type: "select", fieldName: "select" },
227
- { fieldName: "key", label: "Key" },
228
- ];
229
- const selection = ["a"];
230
- return expect(
231
- <Provider store={store}>
232
- <List columnDefs={columnDefs} rows={rows} keyField={["key"]} selection={selection} />
233
- </Provider>,
234
- "when mounted",
235
- "to satisfy",
236
- <table>
237
- <thead>
238
- <HeadTableRow>
239
- <TableHeader select>
240
- <HeadBox>
241
- <label>
242
- <input type="checkbox" value={false} />
243
- <label></label>
244
- </label>
245
- </HeadBox>
246
- </TableHeader>
247
- <TableHeader>
248
- <HeadBox>Key</HeadBox>
249
- </TableHeader>
250
- </HeadTableRow>
251
- </thead>
252
- <tbody>
253
- <tr>
254
- <td>
255
- <Ignore />
256
- </td>
257
- <td>
258
- <Ignore />
259
- </td>
260
- </tr>
261
- <tr>
262
- <td>
263
- <Ignore />
264
- </td>
265
- <td>
266
- <Ignore />
267
- </td>
268
- </tr>
269
- <tr>
270
- <td>
271
- <Ignore />
272
- </td>
273
- <td>
274
- <Ignore />
275
- </td>
276
- </tr>
277
- </tbody>
278
- </table>,
279
- );
280
- });
281
-
282
- it("renders a header when all rows are selected", () => {
283
- const rows = [{ key: "a" }, { key: "b" }, { key: "c" }];
284
- const columnDefs = [{ type: "select", fieldName: "select" }];
285
- selection = ["a", "b", "c"];
286
- return expect(
287
- <Provider store={store}>
288
- <List columnDefs={columnDefs} rows={rows} keyField={["key"]} />
289
- </Provider>,
290
- "when mounted",
291
- "to satisfy",
292
- <table>
293
- <thead>
294
- <HeadTableRow>
295
- <TableHeader select>
296
- <HeadBox>
297
- <label>
298
- <input type="checkbox" value={true} />
299
- <label></label>
300
- </label>
301
- </HeadBox>
302
- </TableHeader>
303
- </HeadTableRow>
304
- </thead>
305
- <tbody>
306
- <tr>
307
- <td>
308
- <Ignore />
309
- </td>
310
- </tr>
311
- <tr>
312
- <td>
313
- <Ignore />
314
- </td>
315
- </tr>
316
- <tr>
317
- <td>
318
- <Ignore />
319
- </td>
320
- </tr>
321
- </tbody>
322
- </table>,
323
- );
324
- });
325
-
326
- describe("virtual scrolling", () => {
327
- let rows, columnDefs, colorGetter;
328
- beforeEach(() => {
329
- rows = generateRows(15);
330
- columnDefs = [{ fieldName: "key", label: "Key" }];
331
- colorGetter = (row, index) => `rgb(${row.key},${row.key},${row.key})`;
332
- });
333
-
334
- it("renders a header with all rows identified when virtual", () => {
335
- const rows = generateRows(15);
336
- const columnDefs = [{ type: "select", fieldName: "select" }];
337
- selection = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"];
338
- return expect(
339
- <Provider store={store}>
340
- <List
341
- columnDefs={columnDefs}
342
- rows={rows}
343
- keyField={["key"]}
344
- selection={selection}
345
- virtual
346
- scrollTop={350}
347
- height={150}
348
- scrollBuffer={1}
349
- />
350
- </Provider>,
351
- "when mounted",
352
- "to satisfy",
353
- <table>
354
- <thead>
355
- <HeadTableRow>
356
- <TableHeader select>
357
- <HeadBox>
358
- <label>
359
- <input type="checkbox" value={true} />
360
- <label></label>
361
- </label>
362
- </HeadBox>
363
- </TableHeader>
364
- </HeadTableRow>
365
- </thead>
366
- <tbody>
367
- <tr />
368
- <tr>
369
- <td>
370
- <Ignore />
371
- </td>
372
- </tr>
373
- <tr>
374
- <td>
375
- <Ignore />
376
- </td>
377
- </tr>
378
- <tr>
379
- <td>
380
- <Ignore />
381
- </td>
382
- </tr>
383
- <tr>
384
- <td>
385
- <Ignore />
386
- </td>
387
- </tr>
388
- <tr>
389
- <td>
390
- <Ignore />
391
- </td>
392
- </tr>
393
- <tr />
394
- </tbody>
395
- </table>,
396
- );
397
- });
398
-
399
- it("renders at top", () =>
400
- expect(
401
- <Provider store={store}>
402
- <List
403
- virtual
404
- scrollTop={0}
405
- height={150}
406
- scrollBuffer={1}
407
- columnDefs={columnDefs}
408
- rows={rows}
409
- keyField={["key"]}
410
- rowBackgroundGetter={colorGetter}
411
- />
412
- </Provider>,
413
- "when mounted",
414
- "to satisfy",
415
- <table>
416
- <thead>
417
- <tr>
418
- <th>
419
- <Ignore />
420
- </th>
421
- </tr>
422
- </thead>
423
- <tbody>
424
- <TableRow bgColor="rgb(1,1,1)">
425
- <td>
426
- <Ignore />
427
- </td>
428
- </TableRow>
429
- <TableRow bgColor="rgb(2,2,2)">
430
- <td>
431
- <Ignore />
432
- </td>
433
- </TableRow>
434
- <TableRow bgColor="rgb(3,3,3)">
435
- <td>
436
- <Ignore />
437
- </td>
438
- </TableRow>
439
- <TableRow bgColor="rgb(4,4,4)">
440
- <td>
441
- <Ignore />
442
- </td>
443
- </TableRow>
444
- <tr style={{ height: 561 }} />
445
- </tbody>
446
- </table>,
447
- ));
448
-
449
- it("renders near top", () =>
450
- expect(
451
- <Provider store={store}>
452
- <List
453
- virtual
454
- scrollTop={150}
455
- height={150}
456
- scrollBuffer={1}
457
- columnDefs={columnDefs}
458
- rows={rows}
459
- keyField={["key"]}
460
- rowBackgroundGetter={colorGetter}
461
- />
462
- </Provider>,
463
- "when mounted",
464
- "to satisfy",
465
- <table>
466
- <thead>
467
- <tr>
468
- <th>
469
- <Ignore />
470
- </th>
471
- </tr>
472
- </thead>
473
- <tbody>
474
- <tr style={{ height: 51 }} />
475
- <TableRow bgColor="rgb(2,2,2)">
476
- <td>
477
- <Ignore />
478
- </td>
479
- </TableRow>
480
- <TableRow bgColor="rgb(3,3,3)">
481
- <td>
482
- <Ignore />
483
- </td>
484
- </TableRow>
485
- <TableRow bgColor="rgb(4,4,4)">
486
- <td>
487
- <Ignore />
488
- </td>
489
- </TableRow>
490
- <TableRow bgColor="rgb(5,5,5)">
491
- <td>
492
- <Ignore />
493
- </td>
494
- </TableRow>
495
- <TableRow bgColor="rgb(6,6,6)">
496
- <td>
497
- <Ignore />
498
- </td>
499
- </TableRow>
500
- <TableRow bgColor="rgb(7,7,7)">
501
- <td>
502
- <Ignore />
503
- </td>
504
- </TableRow>
505
- <tr style={{ height: 408 }} />
506
- </tbody>
507
- </table>,
508
- ));
509
-
510
- it("renders in the middle", () =>
511
- expect(
512
- <Provider store={store}>
513
- <List
514
- virtual
515
- scrollTop={350}
516
- height={150}
517
- scrollBuffer={1}
518
- columnDefs={columnDefs}
519
- rows={rows}
520
- keyField={["key"]}
521
- rowBackgroundGetter={colorGetter}
522
- />
523
- </Provider>,
524
- "when mounted",
525
- "to satisfy",
526
- <table>
527
- <thead>
528
- <tr>
529
- <th>
530
- <Ignore />
531
- </th>
532
- </tr>
533
- </thead>
534
- <tbody>
535
- <tr style={{ height: 255 }} />
536
- <TableRow bgColor="rgb(6,6,6)">
537
- <td>
538
- <Ignore />
539
- </td>
540
- </TableRow>
541
- <TableRow bgColor="rgb(7,7,7)">
542
- <td>
543
- <Ignore />
544
- </td>
545
- </TableRow>
546
- <TableRow bgColor="rgb(8,8,8)">
547
- <td>
548
- <Ignore />
549
- </td>
550
- </TableRow>
551
- <TableRow bgColor="rgb(9,9,9)">
552
- <td>
553
- <Ignore />
554
- </td>
555
- </TableRow>
556
- <TableRow bgColor="rgb(10,10,10)">
557
- <td>
558
- <Ignore />
559
- </td>
560
- </TableRow>
561
- <tr style={{ height: 255 }} />
562
- </tbody>
563
- </table>,
564
- ));
565
-
566
- it("renders near end", () =>
567
- expect(
568
- <Provider store={store}>
569
- <List
570
- virtual
571
- scrollTop={550}
572
- height={150}
573
- scrollBuffer={1}
574
- columnDefs={columnDefs}
575
- rows={rows}
576
- keyField={["key"]}
577
- rowBackgroundGetter={colorGetter}
578
- />
579
- </Provider>,
580
- "when mounted",
581
- "to satisfy",
582
- <table>
583
- <thead>
584
- <tr>
585
- <th>
586
- <Ignore />
587
- </th>
588
- </tr>
589
- </thead>
590
- <tbody>
591
- <tr style={{ height: 408 }} />
592
- <TableRow bgColor="rgb(9,9,9)">
593
- <td>
594
- <Ignore />
595
- </td>
596
- </TableRow>
597
- <TableRow bgColor="rgb(10,10,10)">
598
- <td>
599
- <Ignore />
600
- </td>
601
- </TableRow>
602
- <TableRow bgColor="rgb(11,11,11)">
603
- <td>
604
- <Ignore />
605
- </td>
606
- </TableRow>
607
- <TableRow bgColor="rgb(12,12,12)">
608
- <td>
609
- <Ignore />
610
- </td>
611
- </TableRow>
612
- <TableRow bgColor="rgb(13,13,13)">
613
- <td>
614
- <Ignore />
615
- </td>
616
- </TableRow>
617
- <TableRow bgColor="rgb(14,14,14)">
618
- <td>
619
- <Ignore />
620
- </td>
621
- </TableRow>
622
- <tr style={{ height: 51 }} />
623
- </tbody>
624
- </table>,
625
- ));
626
-
627
- it("renders at end", () =>
628
- expect(
629
- <Provider store={store}>
630
- <List
631
- virtual
632
- scrollTop={656}
633
- height={150}
634
- scrollBuffer={1}
635
- columnDefs={columnDefs}
636
- rows={rows}
637
- keyField={["key"]}
638
- rowBackgroundGetter={colorGetter}
639
- />
640
- </Provider>,
641
- "when mounted",
642
- "to satisfy",
643
- <table>
644
- <thead>
645
- <tr>
646
- <th>
647
- <Ignore />
648
- </th>
649
- </tr>
650
- </thead>
651
- <tbody>
652
- <tr style={{ height: 561 }} />
653
- <TableRow bgColor="rgb(12,12,12)">
654
- <td>
655
- <Ignore />
656
- </td>
657
- </TableRow>
658
- <TableRow bgColor="rgb(13,13,13)">
659
- <td>
660
- <Ignore />
661
- </td>
662
- </TableRow>
663
- <TableRow bgColor="rgb(14,14,14)">
664
- <td>
665
- <Ignore />
666
- </td>
667
- </TableRow>
668
- <TableRow bgColor="rgb(15,15,15)">
669
- <td>
670
- <Ignore />
671
- </td>
672
- </TableRow>
673
- </tbody>
674
- </table>,
675
- ));
676
- });
677
- });
678
-
679
- describe("Placeholder", () => {
680
- it("renders wrappers to center the placeholder in the table", () =>
681
- expect(
682
- <table>
683
- <tbody>
684
- <Placeholder width={4} height={450}>
685
- <div id="child" />
686
- </Placeholder>
687
- </tbody>
688
- </table>,
689
- "when mounted",
690
- "to satisfy",
691
- <table>
692
- <tbody>
693
- <tr>
694
- <td colSpan={4} style={{ padding: 0 }}>
695
- <PlaceholderCell cssHeight={450}>
696
- <PlaceholderBox>
697
- <div id="child" />
698
- </PlaceholderBox>
699
- </PlaceholderCell>
700
- </td>
701
- </tr>
702
- </tbody>
703
- </table>,
704
- ));
705
- });