@desynova-digital/components 8.19.63 → 9.0.1

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 (80) hide show
  1. package/atoms/avatar/avatar.js +1 -1
  2. package/atoms/avatar/avatar.story.js +46 -14
  3. package/atoms/badge/badge.js +13 -13
  4. package/atoms/badge/badge.story.js +91 -29
  5. package/atoms/button/button.js +81 -85
  6. package/atoms/button/button.story.js +342 -2
  7. package/atoms/card/card.js +43 -39
  8. package/atoms/card/card.story.js +74 -48
  9. package/atoms/cardStack/cardStack.js +182 -155
  10. package/atoms/cardStack/cardStack.story.js +131 -18
  11. package/atoms/cardV2/cardV2.js +23 -23
  12. package/atoms/cardV2/cardV2.story.js +196 -45
  13. package/atoms/cardV2/content.js +109 -87
  14. package/atoms/cardV2/thumbnail.js +85 -72
  15. package/atoms/cardV2/timeline.js +119 -107
  16. package/atoms/checkbox/checkbox.js +41 -32
  17. package/atoms/checkbox/checkbox.story.js +220 -99
  18. package/atoms/customSelect/customSelect.story.js +820 -582
  19. package/atoms/datePicker/datePicker.js +77 -83
  20. package/atoms/datePicker/datePicker.story.js +167 -1
  21. package/atoms/dateTime/dateTime.story.js +26 -1
  22. package/atoms/draftInputText/draftInputText.js +358 -0
  23. package/atoms/draftInputText/draftInputText.story.js +251 -0
  24. package/atoms/draftInputText/index.js +13 -0
  25. package/atoms/dropdown/dropdown.story.js +146 -18
  26. package/atoms/dropdownList/dropdownList.story.js +1598 -1091
  27. package/atoms/graphs/barGraph/barGraph.js +143 -130
  28. package/atoms/graphs/barGraph/barGraph.story.js +74 -40
  29. package/atoms/graphs/circleDonut/circleDonut.story.js +374 -220
  30. package/atoms/graphs/circleGraph/circleGraph.js +84 -80
  31. package/atoms/graphs/circleGraph/circleGraph.story.js +38 -26
  32. package/atoms/graphs/circleNested/circleNested.story.js +98 -103
  33. package/atoms/graphs/pieChart/pieChart.story.js +160 -81
  34. package/atoms/graphs/verticalBarGraph/verticalBarGraph.story.js +30 -28
  35. package/atoms/icon/icon.story.js +220 -163
  36. package/atoms/inputText/inputText.js +52 -49
  37. package/atoms/label/label.js +29 -29
  38. package/atoms/label/label.story.js +42 -30
  39. package/atoms/loader/CircleLoader.js +13 -4
  40. package/atoms/loader/CircleLoader.jsx +10 -4
  41. package/atoms/loader/ThreeDotLoader.js +8 -4
  42. package/atoms/loader/ThreeDotLoader.jsx +4 -4
  43. package/atoms/loader/loader.js +29 -30
  44. package/atoms/loader/loader.story.js +38 -23
  45. package/atoms/loader/spinningLoader.js +7 -4
  46. package/atoms/loader/spinningLoader.jsx +5 -5
  47. package/atoms/popup/popup.js +11 -11
  48. package/atoms/popup/popup.story.js +36 -4
  49. package/atoms/radio/radio.story.js +140 -2
  50. package/atoms/sideBar/sidebar.js +19 -5
  51. package/atoms/sideBar/sidebar.jsx +13 -8
  52. package/atoms/switch/switch.js +72 -66
  53. package/atoms/switch/switch.story.js +323 -78
  54. package/atoms/tag/tag.js +39 -39
  55. package/atoms/tag/tag.story.js +83 -2
  56. package/atoms/textarea/textarea.js +36 -34
  57. package/atoms/timeCodeInput/timCodeInput.story.js +10 -9
  58. package/atoms/timeCodeInput/timeCodeInput.js +108 -100
  59. package/atoms/timer/timer.js +127 -126
  60. package/atoms/toast/toast.js +24 -14
  61. package/atoms/toast/toast.story.js +22 -0
  62. package/atoms/videoCard/videoCard.js +226 -203
  63. package/atoms/videoCard/videoCard.story.js +547 -186
  64. package/components.js +69 -66
  65. package/index.js +5 -4
  66. package/molecules/carousel/carousel.js +55 -67
  67. package/molecules/filter/filter.js +133 -106
  68. package/molecules/filter/filter.story.js +215 -173
  69. package/molecules/graphCard/graphCard.js +34 -24
  70. package/molecules/graphCard/graphCard.story.js +169 -82
  71. package/molecules/graphDetailCard/graphDetailCard.js +207 -182
  72. package/molecules/pageHeader/pageHeader.js +3 -2
  73. package/molecules/pageHeader/pageHeader.story.js +40 -18
  74. package/molecules/pagination/pagination.js +66 -14
  75. package/molecules/pagination/pagination.story.js +24 -2
  76. package/molecules/table/table.js +368 -316
  77. package/molecules/table/table.story.js +404 -208
  78. package/molecules/tabs/tabs.js +15 -6
  79. package/molecules/tabs/tabs.story.js +26 -0
  80. package/package.json +2 -2
package/atoms/dropdownList/dropdownList.story.js CHANGED
@@ -13,1107 +13,1614 @@ var _components = require('../../components');
13
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
14
 
15
15
  (0, _react3.storiesOf)('DropdownList').add('light theme df', function () {
16
- return _react2.default.createElement(
17
- _storyHelpers.Example,
18
- { title: 'Appearances Light', background: 'default' },
16
+ return _react2.default.createElement(
17
+ _storyHelpers.Example,
18
+ { title: 'Appearances Light', background: 'default' },
19
+ _react2.default.createElement(
20
+ _storyHelpers.Stack,
21
+ null,
22
+ _react2.default.createElement(
23
+ 'div',
24
+ { style: { width: '200px' } },
19
25
  _react2.default.createElement(
20
- _storyHelpers.Stack,
21
- null,
22
- _react2.default.createElement(
23
- 'div',
24
- { style: { 'width': '200px' } },
25
- _react2.default.createElement(
26
- 'div',
27
- { style: { 'marginTop': '30px' } },
28
- _react2.default.createElement(
29
- 'h5',
30
- { style: { 'fontWeight': 'bold' } },
31
- 'Simple List'
32
- ),
33
- _react2.default.createElement(_components.DropdownList, {
34
- show: true,
35
- itemOnClick: function itemOnClick(e, option, l) {
36
- console.log("clickCallback", e, option, l);
37
- },
38
-
39
- options: [{
40
- type: 'selectable',
41
- value: 'zz20',
42
- icon: 'add',
43
- label: 'Episode',
44
- display: 'item',
45
- data: {
46
- labelText: "Episode>text",
47
- id: "ID:Episode",
48
- permission: "level 4 user"
49
- }
50
- }, {
51
- type: 'selectable',
52
- value: 'zzz21',
53
- label: 'Promo',
54
- display: 'item',
55
- data: {
56
- labelText: "Promo>text",
57
- id: "ID:Promo",
58
- permission: "level 5 user"
59
- }
60
- }, {
61
- type: 'selectable',
62
- value: 'zzz21',
63
- label: 'Tvc',
64
- display: 'item',
65
- data: {
66
- labelText: "Tvc>text",
67
- id: "ID:Tvc",
68
- permission: "level 6 user"
69
- }
70
- }]
71
- })
72
- )
73
- )
26
+ 'div',
27
+ { style: { marginTop: '30px' } },
28
+ _react2.default.createElement(
29
+ 'h5',
30
+ { style: { fontWeight: 'bold' } },
31
+ 'Simple List'
32
+ ),
33
+ _react2.default.createElement(_components.DropdownList, {
34
+ show: true,
35
+ itemOnClick: function itemOnClick(e, option, l) {
36
+ console.log('clickCallback', e, option, l);
37
+ },
38
+ options: [{
39
+ type: 'selectable',
40
+ value: 'zz20',
41
+ icon: 'add',
42
+ label: 'Episode',
43
+ display: 'item',
44
+ data: {
45
+ labelText: 'Episode>text',
46
+ id: 'ID:Episode',
47
+ permission: 'level 4 user'
48
+ }
49
+ }, {
50
+ type: 'selectable',
51
+ value: 'zzz21',
52
+ label: 'Promo',
53
+ display: 'item',
54
+ data: {
55
+ labelText: 'Promo>text',
56
+ id: 'ID:Promo',
57
+ permission: 'level 5 user'
58
+ }
59
+ }, {
60
+ type: 'selectable',
61
+ value: 'zzz21',
62
+ label: 'Tvc',
63
+ display: 'item',
64
+ data: {
65
+ labelText: 'Tvc>text',
66
+ id: 'ID:Tvc',
67
+ permission: 'level 6 user'
68
+ }
69
+ }]
70
+ })
74
71
  )
75
- );
72
+ )
73
+ )
74
+ );
76
75
  });
77
76
  (0, _react3.storiesOf)('DropdownList').add('light theme', function () {
78
- return _react2.default.createElement(
79
- _storyHelpers.Example,
80
- { title: 'Appearances Light', background: 'default' },
77
+ return _react2.default.createElement(
78
+ _storyHelpers.Example,
79
+ { title: 'Appearances Light', background: 'default' },
80
+ _react2.default.createElement(
81
+ _storyHelpers.Stack,
82
+ null,
83
+ _react2.default.createElement(
84
+ 'div',
85
+ { style: { width: '200px' } },
81
86
  _react2.default.createElement(
82
- _storyHelpers.Stack,
83
- null,
84
- _react2.default.createElement(
85
- 'div',
86
- { style: { 'width': '200px' } },
87
- _react2.default.createElement(
88
- 'div',
89
- { style: { 'marginTop': '30px' } },
90
- _react2.default.createElement(
91
- 'h5',
92
- { style: { 'fontWeight': 'bold' } },
93
- 'Simple List'
94
- ),
95
- _react2.default.createElement(_components.DropdownList, {
96
- show: true,
97
- itemOnClick: function itemOnClick(e, option, l) {
98
- console.log("clickCallback", e, option, l);
99
- },
100
-
101
- options: [{
102
- type: 'selectable',
103
- value: 'zz20',
104
- label: 'Episode',
105
- display: 'item',
106
- data: {
107
- labelText: "Episode>text",
108
- id: "ID:Episode",
109
- permission: "level 4 user"
110
- }
111
- }, {
112
- type: 'selectable',
113
- value: 'zzz21',
114
- label: 'Promo',
115
- display: 'item',
116
- data: {
117
- labelText: "Promo>text",
118
- id: "ID:Promo",
119
- permission: "level 5 user"
120
- }
121
- }, {
122
- type: 'selectable',
123
- value: 'zzz21',
124
- label: 'Tvc',
125
- display: 'item',
126
- data: {
127
- labelText: "Tvc>text",
128
- id: "ID:Tvc",
129
- permission: "level 6 user"
130
- }
131
- }]
132
- })
133
- ),
134
- _react2.default.createElement(
135
- 'div',
136
- { style: { 'marginTop': '30px' } },
137
- _react2.default.createElement(
138
- 'h5',
139
- { style: { 'fontWeight': 'bold' } },
140
- 'Simple Default Selected'
141
- ),
142
- _react2.default.createElement(_components.DropdownList, {
143
- show: true,
144
- itemOnClick: function itemOnClick(e, option) {
145
- console.log("clickCallback", e.target, option);
146
- },
147
- selectedOptions: [{
148
- type: 'selectable',
149
- value: 'zzz21',
150
- label: 'Promo',
151
- display: 'item'
152
- }],
153
- options: [{
154
- type: 'selectable',
155
- value: 'zz20',
156
- label: 'Episode',
157
- display: 'item'
158
- }, {
159
- type: 'selectable',
160
- value: 'zzz21',
161
- label: 'Promo',
162
- display: 'item'
163
- }, {
164
- type: 'selectable',
165
- value: 'zzz21',
166
- label: 'Tvc',
167
- display: 'item'
168
- }]
169
- })
170
- ),
171
- _react2.default.createElement(
172
- 'div',
173
- { style: { 'marginTop': '30px' } },
174
- _react2.default.createElement(
175
- 'h5',
176
- { style: { 'fontWeight': 'bold' } },
177
- 'Simple Disabled '
178
- ),
179
- _react2.default.createElement(_components.DropdownList, {
180
- show: true,
181
- itemOnClick: function itemOnClick(e, option) {
182
- console.log("clickCallback", e.target, option);
183
- },
184
-
185
- options: [{
186
- type: 'selectable',
187
- value: 'zz20',
188
- label: 'Episode',
189
- display: 'item'
190
- }, {
191
- type: 'disabled',
192
- value: 'zzz21',
193
- label: 'Promo',
194
- display: 'item'
195
- }, {
196
- type: 'selectable',
197
- value: 'zzz21',
198
- label: 'Tvc',
199
- display: 'item'
200
- }]
201
- })
202
- ),
203
- _react2.default.createElement(
204
- 'div',
205
- { style: { 'marginTop': '30px' } },
206
- _react2.default.createElement(
207
- 'h5',
208
- { style: { 'fontWeight': 'bold' } },
209
- 'Simple Selected and Disabled '
210
- ),
211
- _react2.default.createElement(_components.DropdownList, {
212
- show: true,
213
- itemOnClick: function itemOnClick(e, option) {
214
- console.log("clickCallback", e.target, option);
215
- },
216
- selectedOptions: [{
217
- type: 'disabled',
218
- value: 'zzz21',
219
- label: 'Promo',
220
- display: 'item'
221
- }],
222
- options: [{
223
- type: 'selectable',
224
- value: 'zz20',
225
- label: 'Episode',
226
- display: 'item'
227
- }, {
228
- type: 'disabled',
229
- value: 'zzz21',
230
- label: 'Promo',
231
- display: 'item'
232
- }, {
233
- type: 'selectable',
234
- value: 'zzz21',
235
- label: 'Tvc',
236
- display: 'item'
237
- }]
238
- })
239
- )
240
- ),
241
- _react2.default.createElement(
242
- 'div',
243
- { style: { width: '200px' } },
244
- _react2.default.createElement(
245
- 'h5',
246
- { style: { 'fontWeight': 'bold' } },
247
- 'Nested List'
248
- ),
249
- _react2.default.createElement(_components.DropdownList, {
250
- show: true,
251
- itemOnClick: function itemOnClick(e, option) {
252
- console.log("clickCallback", e.target, option);
253
- },
254
- selectedOptions: [],
255
- options: [{
256
- type: 'selectable',
257
- value: 'zz20',
258
- label: 'Television',
259
- display: 'item'
260
- }, {
261
- type: 'selectable',
262
- value: 'zzz21',
263
- label: 'Coming Soon',
264
- display: 'item'
265
- }, {
266
- label: 'INGEST',
267
- children: [{
268
- type: 'selectable',
269
- value: '10',
270
- label: 'All',
271
- display: 'item'
272
- }]
273
- }, {
274
- label: 'ONBOARDING',
275
- children: [{
276
- type: 'selectable',
277
- value: '20',
278
- label: 'All',
279
- display: 'item'
280
- }, {
281
- type: 'selectable',
282
- value: '21',
283
- label: 'Add Promo',
284
- display: 'item'
285
- }, {
286
- label: 'USERS',
287
- children: [{
288
- type: 'selectable',
289
- value: '21-1',
290
- label: 'All',
291
- display: 'item'
292
- }, {
293
- type: 'selectable',
294
- value: 'zddf21',
295
- label: 'Coming Soon',
296
- display: 'item'
297
- }]
298
- }, {
299
- type: 'selectable',
300
- value: '22',
301
- label: 'Add Tvc',
302
- display: 'item'
303
- }, {
304
- type: 'selectable',
305
- value: '23',
306
- label: 'Add Clip',
307
- display: 'item'
308
- }]
309
- }, {
310
- label: 'TAGGING',
311
- children: [{
312
- type: 'selectable',
313
- value: '30',
314
- label: 'All',
315
- display: 'item'
316
- }]
317
- }, {
318
- label: 'SCHEDULER',
319
- children: [{
320
- type: 'selectable',
321
- value: '40',
322
- label: 'All',
323
- display: 'item'
324
- }, {
325
- type: 'selectable',
326
- value: '41',
327
- label: 'Some Label Text',
328
- display: 'item'
329
- }, {
330
- type: 'selectable',
331
- value: '42',
332
- label: 'Some Label Text',
333
- display: 'item'
334
- }]
335
- }]
336
- })
337
- ),
338
- _react2.default.createElement(
339
- 'div',
340
- { style: { width: '200px' } },
341
- _react2.default.createElement(
342
- 'h5',
343
- { style: { 'fontWeight': 'bold' } },
344
- 'Default Selected List'
345
- ),
346
- _react2.default.createElement(_components.DropdownList, {
347
- show: true,
348
- itemOnClick: function itemOnClick(e, option) {
349
- console.log("clickCallback", e.target, option);
350
- },
351
- selectedOptions: [{
352
- type: 'selectable',
353
- value: 'zzz21',
354
- label: 'Coming Soon',
355
- display: 'item'
356
- }, {
357
- type: 'selectable',
358
- value: '22',
359
- label: 'Add Tvc',
360
- display: 'item'
361
- }, {
362
- type: 'selectable',
363
- value: '23',
364
- label: 'Add Clip',
365
- display: 'item'
366
- }],
367
- options: [{
368
- type: 'selectable',
369
- value: 'zz20',
370
- label: 'Television',
371
- display: 'item'
372
- }, {
373
- type: 'selectable',
374
- value: 'zzz21',
375
- label: 'Coming Soon',
376
- display: 'item'
377
- }, {
378
- label: 'INGEST',
379
- children: [{
380
- type: 'selectable',
381
- value: '10',
382
- label: 'All',
383
- display: 'item'
384
- }]
385
- }, {
386
- label: 'ONBOARDING',
387
- children: [{
388
- type: 'selectable',
389
- value: '20',
390
- label: 'All',
391
- display: 'item'
392
- }, {
393
- type: 'selectable',
394
- value: '21',
395
- label: 'Add Promo',
396
- display: 'item'
397
- }, {
398
- type: 'selectable',
399
- value: '22',
400
- label: 'Add Tvc',
401
- display: 'item'
402
- }, {
403
- type: 'selectable',
404
- value: '23',
405
- label: 'Add Clip',
406
- display: 'item'
407
- }]
408
- }, {
409
- label: 'TAGGING',
410
- children: [{
411
- type: 'selectable',
412
- value: '30',
413
- label: 'All',
414
- display: 'item'
415
- }]
416
- }, {
417
- label: 'SCHEDULER',
418
- children: [{
419
- type: 'selectable',
420
- value: '40',
421
- label: 'All',
422
- display: 'item'
423
- }, {
424
- type: 'selectable',
425
- value: '41',
426
- label: 'Some Label Text',
427
- display: 'item'
428
- }, {
429
- type: 'selectable',
430
- value: '42',
431
- label: 'Some Label Text',
432
- display: 'item'
433
- }]
434
- }]
435
- })
436
- ),
437
- _react2.default.createElement(
438
- 'div',
439
- { style: { width: '200px' } },
440
- _react2.default.createElement(
441
- 'h5',
442
- { style: { 'fontWeight': 'bold' } },
443
- 'Disabled and Divider List'
444
- ),
445
- _react2.default.createElement(_components.DropdownList, {
446
- show: true,
447
- itemOnClick: function itemOnClick(e, option) {
448
- console.log("clickCallback", e.target, option);
449
- },
450
-
451
- options: [{
452
- type: 'selectable',
453
- value: 'zz20',
454
- label: 'View Episode',
455
- display: 'item'
456
- }, {
457
- type: 'selectable',
458
- value: 'zzccz21',
459
- label: 'View Movie',
460
- display: 'item'
461
- }, {
462
- type: 'selectable',
463
- value: 'zzz21',
464
- label: 'View Promo',
465
- display: 'item'
466
- }, {
467
- type: 'selectable',
468
- value: 'zzz21',
469
- label: 'View Tvc',
470
- display: 'item'
471
- }, {
472
- display: 'divider'
473
- }, {
474
- type: 'selectable',
475
- value: '21',
476
- label: 'Add Episode',
477
- display: 'item'
478
- }, {
479
- type: 'selectable',
480
- value: 'zzccz21',
481
- label: 'Add Movie',
482
- display: 'item'
483
- }, {
484
- type: 'disabled',
485
- value: '22',
486
- label: 'Add Promo',
487
- display: 'item'
488
- }, {
489
- type: 'selectable',
490
- value: '23',
491
- label: 'Add Tvc',
492
- display: 'item'
493
- }]
494
- })
495
- ),
496
- _react2.default.createElement(
497
- 'div',
498
- { style: { width: '200px' } },
499
- _react2.default.createElement(
500
- 'h5',
501
- { style: { 'fontWeight': 'bold' } },
502
- 'Group Disabled and Divider List'
503
- ),
504
- _react2.default.createElement(_components.DropdownList, {
505
- show: true,
506
- itemOnClick: function itemOnClick(e, option) {
507
- console.log("clickCallback", e.target, option);
508
- },
509
- options: [{
510
- type: 'selectable',
511
- value: 'zz20',
512
- label: 'Television',
513
- display: 'item'
514
- }, {
515
- type: 'selectable',
516
- value: 'zzz21',
517
- label: 'Coming Soon',
518
- display: 'item'
519
- }, {
520
- display: 'divider'
521
- }, {
522
- label: 'INGEST',
523
- children: [{
524
- type: 'selectable',
525
- value: '10',
526
- label: 'All',
527
- display: 'item'
528
- }]
529
- }, {
530
- label: 'ONBOARDING',
531
- children: [{
532
- type: 'disabled',
533
- value: '20',
534
- label: 'All',
535
- display: 'item'
536
- }, {
537
- type: 'selectable',
538
- value: '21',
539
- label: 'Add Promo',
540
- display: 'item'
541
- }, {
542
- type: 'selectable',
543
- value: '22',
544
- label: 'Add Tvc',
545
- display: 'item'
546
- }, {
547
- type: 'selectable',
548
- value: '23',
549
- label: 'Add Clip',
550
- display: 'item'
551
- }, {
552
- display: 'divider'
553
- }, {
554
- type: 'selectable',
555
- value: '24',
556
- label: 'Delete Promo',
557
- display: 'item'
558
- }, {
559
- type: 'selectable',
560
- value: '25',
561
- label: 'Delete Tvc',
562
- display: 'item'
563
- }, {
564
- type: 'selectable',
565
- value: '26',
566
- label: 'Delete Clip',
567
- display: 'item'
568
- }]
569
- }, {
570
- label: 'TAGGING',
571
- children: [{
572
- type: 'selectable',
573
- value: '30',
574
- label: 'All',
575
- display: 'item'
576
- }]
577
- }, {
578
- label: 'SCHEDULER',
579
- children: [{
580
- type: 'selectable',
581
- value: '40',
582
- label: 'All',
583
- display: 'item'
584
- }, {
585
- type: 'selectable',
586
- value: '41',
587
- label: 'Some Label Text',
588
- display: 'item'
589
- }, {
590
- type: 'selectable',
591
- value: '42',
592
- label: 'Some Label Text',
593
- display: 'item'
594
- }]
595
- }]
596
- })
597
- )
87
+ 'div',
88
+ { style: { marginTop: '30px' } },
89
+ _react2.default.createElement(
90
+ 'h5',
91
+ { style: { fontWeight: 'bold' } },
92
+ 'Simple List'
93
+ ),
94
+ _react2.default.createElement(_components.DropdownList, {
95
+ show: true,
96
+ itemOnClick: function itemOnClick(e, option, l) {
97
+ console.log('clickCallback', e, option, l);
98
+ },
99
+ options: [{
100
+ type: 'selectable',
101
+ value: 'zz20',
102
+ label: 'Episode',
103
+ display: 'item',
104
+ data: {
105
+ labelText: 'Episode>text',
106
+ id: 'ID:Episode',
107
+ permission: 'level 4 user'
108
+ }
109
+ }, {
110
+ type: 'selectable',
111
+ value: 'zzz21',
112
+ label: 'Promo',
113
+ display: 'item',
114
+ data: {
115
+ labelText: 'Promo>text',
116
+ id: 'ID:Promo',
117
+ permission: 'level 5 user'
118
+ }
119
+ }, {
120
+ type: 'selectable',
121
+ value: 'zzz21',
122
+ label: 'Tvc',
123
+ display: 'item',
124
+ data: {
125
+ labelText: 'Tvc>text',
126
+ id: 'ID:Tvc',
127
+ permission: 'level 6 user'
128
+ }
129
+ }]
130
+ })
131
+ ),
132
+ _react2.default.createElement(
133
+ 'div',
134
+ { style: { marginTop: '30px' } },
135
+ _react2.default.createElement(
136
+ 'h5',
137
+ { style: { fontWeight: 'bold' } },
138
+ 'Simple Default Selected'
139
+ ),
140
+ _react2.default.createElement(_components.DropdownList, {
141
+ show: true,
142
+ itemOnClick: function itemOnClick(e, option) {
143
+ console.log('clickCallback', e.target, option);
144
+ },
145
+ selectedOptions: [{
146
+ type: 'selectable',
147
+ value: 'zzz21',
148
+ label: 'Promo',
149
+ display: 'item'
150
+ }],
151
+ options: [{
152
+ type: 'selectable',
153
+ value: 'zz20',
154
+ label: 'Episode',
155
+ display: 'item'
156
+ }, {
157
+ type: 'selectable',
158
+ value: 'zzz21',
159
+ label: 'Promo',
160
+ display: 'item'
161
+ }, {
162
+ type: 'selectable',
163
+ value: 'zzz21',
164
+ label: 'Tvc',
165
+ display: 'item'
166
+ }]
167
+ })
168
+ ),
169
+ _react2.default.createElement(
170
+ 'div',
171
+ { style: { marginTop: '30px' } },
172
+ _react2.default.createElement(
173
+ 'h5',
174
+ { style: { fontWeight: 'bold' } },
175
+ 'Simple Disabled '
176
+ ),
177
+ _react2.default.createElement(_components.DropdownList, {
178
+ show: true,
179
+ itemOnClick: function itemOnClick(e, option) {
180
+ console.log('clickCallback', e.target, option);
181
+ },
182
+ options: [{
183
+ type: 'selectable',
184
+ value: 'zz20',
185
+ label: 'Episode',
186
+ display: 'item'
187
+ }, {
188
+ type: 'disabled',
189
+ value: 'zzz21',
190
+ label: 'Promo',
191
+ display: 'item'
192
+ }, {
193
+ type: 'selectable',
194
+ value: 'zzz21',
195
+ label: 'Tvc',
196
+ display: 'item'
197
+ }]
198
+ })
199
+ ),
200
+ _react2.default.createElement(
201
+ 'div',
202
+ { style: { marginTop: '30px' } },
203
+ _react2.default.createElement(
204
+ 'h5',
205
+ { style: { fontWeight: 'bold' } },
206
+ 'Simple Selected and Disabled '
207
+ ),
208
+ _react2.default.createElement(_components.DropdownList, {
209
+ show: true,
210
+ itemOnClick: function itemOnClick(e, option) {
211
+ console.log('clickCallback', e.target, option);
212
+ },
213
+ selectedOptions: [{
214
+ type: 'disabled',
215
+ value: 'zzz21',
216
+ label: 'Promo',
217
+ display: 'item'
218
+ }],
219
+ options: [{
220
+ type: 'selectable',
221
+ value: 'zz20',
222
+ label: 'Episode',
223
+ display: 'item'
224
+ }, {
225
+ type: 'disabled',
226
+ value: 'zzz21',
227
+ label: 'Promo',
228
+ display: 'item'
229
+ }, {
230
+ type: 'selectable',
231
+ value: 'zzz21',
232
+ label: 'Tvc',
233
+ display: 'item'
234
+ }]
235
+ })
598
236
  )
599
- );
237
+ ),
238
+ _react2.default.createElement(
239
+ 'div',
240
+ { style: { width: '200px' } },
241
+ _react2.default.createElement(
242
+ 'h5',
243
+ { style: { fontWeight: 'bold' } },
244
+ 'Nested List'
245
+ ),
246
+ _react2.default.createElement(_components.DropdownList, {
247
+ show: true,
248
+ itemOnClick: function itemOnClick(e, option) {
249
+ console.log('clickCallback', e.target, option);
250
+ },
251
+ selectedOptions: [],
252
+ options: [{
253
+ type: 'selectable',
254
+ value: 'zz20',
255
+ label: 'Television',
256
+ display: 'item'
257
+ }, {
258
+ type: 'selectable',
259
+ value: 'zzz21',
260
+ label: 'Coming Soon',
261
+ display: 'item'
262
+ }, {
263
+ label: 'INGEST',
264
+ children: [{
265
+ type: 'selectable',
266
+ value: '10',
267
+ label: 'All',
268
+ display: 'item'
269
+ }]
270
+ }, {
271
+ label: 'ONBOARDING',
272
+ children: [{
273
+ type: 'selectable',
274
+ value: '20',
275
+ label: 'All',
276
+ display: 'item'
277
+ }, {
278
+ type: 'selectable',
279
+ value: '21',
280
+ label: 'Add Promo',
281
+ display: 'item'
282
+ }, {
283
+ label: 'USERS',
284
+ children: [{
285
+ type: 'selectable',
286
+ value: '21-1',
287
+ label: 'All',
288
+ display: 'item'
289
+ }, {
290
+ type: 'selectable',
291
+ value: 'zddf21',
292
+ label: 'Coming Soon',
293
+ display: 'item'
294
+ }]
295
+ }, {
296
+ type: 'selectable',
297
+ value: '22',
298
+ label: 'Add Tvc',
299
+ display: 'item'
300
+ }, {
301
+ type: 'selectable',
302
+ value: '23',
303
+ label: 'Add Clip',
304
+ display: 'item'
305
+ }]
306
+ }, {
307
+ label: 'TAGGING',
308
+ children: [{
309
+ type: 'selectable',
310
+ value: '30',
311
+ label: 'All',
312
+ display: 'item'
313
+ }]
314
+ }, {
315
+ label: 'SCHEDULER',
316
+ children: [{
317
+ type: 'selectable',
318
+ value: '40',
319
+ label: 'All',
320
+ display: 'item'
321
+ }, {
322
+ type: 'selectable',
323
+ value: '41',
324
+ label: 'Some Label Text',
325
+ display: 'item'
326
+ }, {
327
+ type: 'selectable',
328
+ value: '42',
329
+ label: 'Some Label Text',
330
+ display: 'item'
331
+ }]
332
+ }]
333
+ })
334
+ ),
335
+ _react2.default.createElement(
336
+ 'div',
337
+ { style: { width: '200px' } },
338
+ _react2.default.createElement(
339
+ 'h5',
340
+ { style: { fontWeight: 'bold' } },
341
+ 'Default Selected List'
342
+ ),
343
+ _react2.default.createElement(_components.DropdownList, {
344
+ show: true,
345
+ itemOnClick: function itemOnClick(e, option) {
346
+ console.log('clickCallback', e.target, option);
347
+ },
348
+ selectedOptions: [{
349
+ type: 'selectable',
350
+ value: 'zzz21',
351
+ label: 'Coming Soon',
352
+ display: 'item'
353
+ }, {
354
+ type: 'selectable',
355
+ value: '22',
356
+ label: 'Add Tvc',
357
+ display: 'item'
358
+ }, {
359
+ type: 'selectable',
360
+ value: '23',
361
+ label: 'Add Clip',
362
+ display: 'item'
363
+ }],
364
+ options: [{
365
+ type: 'selectable',
366
+ value: 'zz20',
367
+ label: 'Television',
368
+ display: 'item'
369
+ }, {
370
+ type: 'selectable',
371
+ value: 'zzz21',
372
+ label: 'Coming Soon',
373
+ display: 'item'
374
+ }, {
375
+ label: 'INGEST',
376
+ children: [{
377
+ type: 'selectable',
378
+ value: '10',
379
+ label: 'All',
380
+ display: 'item'
381
+ }]
382
+ }, {
383
+ label: 'ONBOARDING',
384
+ children: [{
385
+ type: 'selectable',
386
+ value: '20',
387
+ label: 'All',
388
+ display: 'item'
389
+ }, {
390
+ type: 'selectable',
391
+ value: '21',
392
+ label: 'Add Promo',
393
+ display: 'item'
394
+ }, {
395
+ type: 'selectable',
396
+ value: '22',
397
+ label: 'Add Tvc',
398
+ display: 'item'
399
+ }, {
400
+ type: 'selectable',
401
+ value: '23',
402
+ label: 'Add Clip',
403
+ display: 'item'
404
+ }]
405
+ }, {
406
+ label: 'TAGGING',
407
+ children: [{
408
+ type: 'selectable',
409
+ value: '30',
410
+ label: 'All',
411
+ display: 'item'
412
+ }]
413
+ }, {
414
+ label: 'SCHEDULER',
415
+ children: [{
416
+ type: 'selectable',
417
+ value: '40',
418
+ label: 'All',
419
+ display: 'item'
420
+ }, {
421
+ type: 'selectable',
422
+ value: '41',
423
+ label: 'Some Label Text',
424
+ display: 'item'
425
+ }, {
426
+ type: 'selectable',
427
+ value: '42',
428
+ label: 'Some Label Text',
429
+ display: 'item'
430
+ }]
431
+ }]
432
+ })
433
+ ),
434
+ _react2.default.createElement(
435
+ 'div',
436
+ { style: { width: '200px' } },
437
+ _react2.default.createElement(
438
+ 'h5',
439
+ { style: { fontWeight: 'bold' } },
440
+ 'Disabled and Divider List'
441
+ ),
442
+ _react2.default.createElement(_components.DropdownList, {
443
+ show: true,
444
+ itemOnClick: function itemOnClick(e, option) {
445
+ console.log('clickCallback', e.target, option);
446
+ },
447
+ options: [{
448
+ type: 'selectable',
449
+ value: 'zz20',
450
+ label: 'View Episode',
451
+ display: 'item'
452
+ }, {
453
+ type: 'selectable',
454
+ value: 'zzccz21',
455
+ label: 'View Movie',
456
+ display: 'item'
457
+ }, {
458
+ type: 'selectable',
459
+ value: 'zzz21',
460
+ label: 'View Promo',
461
+ display: 'item'
462
+ }, {
463
+ type: 'selectable',
464
+ value: 'zzz21',
465
+ label: 'View Tvc',
466
+ display: 'item'
467
+ }, {
468
+ display: 'divider'
469
+ }, {
470
+ type: 'selectable',
471
+ value: '21',
472
+ label: 'Add Episode',
473
+ display: 'item'
474
+ }, {
475
+ type: 'selectable',
476
+ value: 'zzccz21',
477
+ label: 'Add Movie',
478
+ display: 'item'
479
+ }, {
480
+ type: 'disabled',
481
+ value: '22',
482
+ label: 'Add Promo',
483
+ display: 'item'
484
+ }, {
485
+ type: 'selectable',
486
+ value: '23',
487
+ label: 'Add Tvc',
488
+ display: 'item'
489
+ }]
490
+ })
491
+ ),
492
+ _react2.default.createElement(
493
+ 'div',
494
+ { style: { width: '200px' } },
495
+ _react2.default.createElement(
496
+ 'h5',
497
+ { style: { fontWeight: 'bold' } },
498
+ 'Group Disabled and Divider List'
499
+ ),
500
+ _react2.default.createElement(_components.DropdownList, {
501
+ show: true,
502
+ itemOnClick: function itemOnClick(e, option) {
503
+ console.log('clickCallback', e.target, option);
504
+ },
505
+ options: [{
506
+ type: 'selectable',
507
+ value: 'zz20',
508
+ label: 'Television',
509
+ display: 'item'
510
+ }, {
511
+ type: 'selectable',
512
+ value: 'zzz21',
513
+ label: 'Coming Soon',
514
+ display: 'item'
515
+ }, {
516
+ display: 'divider'
517
+ }, {
518
+ label: 'INGEST',
519
+ children: [{
520
+ type: 'selectable',
521
+ value: '10',
522
+ label: 'All',
523
+ display: 'item'
524
+ }]
525
+ }, {
526
+ label: 'ONBOARDING',
527
+ children: [{
528
+ type: 'disabled',
529
+ value: '20',
530
+ label: 'All',
531
+ display: 'item'
532
+ }, {
533
+ type: 'selectable',
534
+ value: '21',
535
+ label: 'Add Promo',
536
+ display: 'item'
537
+ }, {
538
+ type: 'selectable',
539
+ value: '22',
540
+ label: 'Add Tvc',
541
+ display: 'item'
542
+ }, {
543
+ type: 'selectable',
544
+ value: '23',
545
+ label: 'Add Clip',
546
+ display: 'item'
547
+ }, {
548
+ display: 'divider'
549
+ }, {
550
+ type: 'selectable',
551
+ value: '24',
552
+ label: 'Delete Promo',
553
+ display: 'item'
554
+ }, {
555
+ type: 'selectable',
556
+ value: '25',
557
+ label: 'Delete Tvc',
558
+ display: 'item'
559
+ }, {
560
+ type: 'selectable',
561
+ value: '26',
562
+ label: 'Delete Clip',
563
+ display: 'item'
564
+ }]
565
+ }, {
566
+ label: 'TAGGING',
567
+ children: [{
568
+ type: 'selectable',
569
+ value: '30',
570
+ label: 'All',
571
+ display: 'item'
572
+ }]
573
+ }, {
574
+ label: 'SCHEDULER',
575
+ children: [{
576
+ type: 'selectable',
577
+ value: '40',
578
+ label: 'All',
579
+ display: 'item'
580
+ }, {
581
+ type: 'selectable',
582
+ value: '41',
583
+ label: 'Some Label Text',
584
+ display: 'item'
585
+ }, {
586
+ type: 'selectable',
587
+ value: '42',
588
+ label: 'Some Label Text',
589
+ display: 'item'
590
+ }]
591
+ }]
592
+ })
593
+ )
594
+ )
595
+ );
600
596
  });
601
597
 
602
598
  (0, _react3.storiesOf)('DropdownList').add('dark theme', function () {
603
- return _react2.default.createElement(
604
- _storyHelpers.Example,
605
- { title: 'Appearances Light', background: 'default' },
599
+ return _react2.default.createElement(
600
+ _storyHelpers.Example,
601
+ { title: 'Appearances Light', background: 'default' },
602
+ _react2.default.createElement(
603
+ _storyHelpers.Stack,
604
+ null,
605
+ _react2.default.createElement(
606
+ 'div',
607
+ { style: { width: '200px' } },
606
608
  _react2.default.createElement(
607
- _storyHelpers.Stack,
608
- null,
609
- _react2.default.createElement(
610
- 'div',
611
- { style: { 'width': '200px' } },
612
- _react2.default.createElement(
613
- 'div',
614
- { style: { 'marginTop': '30px' } },
615
- _react2.default.createElement(
616
- 'h5',
617
- { style: { 'fontWeight': 'bold' } },
618
- 'Simple List'
619
- ),
620
- _react2.default.createElement(_components.DropdownList, {
621
- theme: 'dark',
622
- show: true,
623
- itemOnClick: function itemOnClick(e, option) {
624
- console.log("clickCallback", e.target, option);
625
- },
626
-
627
- options: [{
628
- type: 'selectable',
629
- value: 'zz20',
630
- label: 'Episode',
631
- display: 'item'
632
- }, {
633
- type: 'selectable',
634
- value: 'zzz21',
635
- label: 'Promo',
636
- display: 'item'
637
- }, {
638
- type: 'selectable',
639
- value: 'zzz21',
640
- label: 'Tvc',
641
- display: 'item'
642
- }]
643
- })
644
- ),
645
- _react2.default.createElement(
646
- 'div',
647
- { style: { 'marginTop': '30px' } },
648
- _react2.default.createElement(
649
- 'h5',
650
- { style: { 'fontWeight': 'bold' } },
651
- 'Simple Default Selected'
652
- ),
653
- _react2.default.createElement(_components.DropdownList, {
654
-
655
- theme: 'dark',
656
- show: true,
657
- itemOnClick: function itemOnClick(e, option) {
658
- console.log("clickCallback", e.target, option);
659
- },
660
- selectedOptions: [{
661
- type: 'selectable',
662
- value: 'zzz21',
663
- label: 'Promo',
664
- display: 'item'
665
- }],
666
- options: [{
667
- type: 'selectable',
668
- value: 'zz20',
669
- label: 'Episode',
670
- display: 'item'
671
- }, {
672
- type: 'selectable',
673
- value: 'zzz21',
674
- label: 'Promo',
675
- display: 'item'
676
- }, {
677
- type: 'selectable',
678
- value: 'zzz21',
679
- label: 'Tvc',
680
- display: 'item'
681
- }]
682
- })
683
- ),
684
- _react2.default.createElement(
685
- 'div',
686
- { style: { 'marginTop': '30px' } },
687
- _react2.default.createElement(
688
- 'h5',
689
- { style: { 'fontWeight': 'bold' } },
690
- 'Simple Disabled '
691
- ),
692
- _react2.default.createElement(_components.DropdownList, {
693
- theme: 'dark',
694
- show: true,
695
- itemOnClick: function itemOnClick(e, option) {
696
- console.log("clickCallback", e.target, option);
697
- },
698
-
699
- options: [{
700
- type: 'selectable',
701
- value: 'zz20',
702
- label: 'Episode',
703
- display: 'item'
704
- }, {
705
- type: 'disabled',
706
- value: 'zzz21',
707
- label: 'Promo',
708
- display: 'item'
709
- }, {
710
- type: 'selectable',
711
- value: 'zzz21',
712
- label: 'Tvc',
713
- display: 'item'
714
- }]
715
- })
716
- ),
717
- _react2.default.createElement(
718
- 'div',
719
- { style: { 'marginTop': '30px' } },
720
- _react2.default.createElement(
721
- 'h5',
722
- { style: { 'fontWeight': 'bold' } },
723
- 'Simple Selected and Disabled '
724
- ),
725
- _react2.default.createElement(_components.DropdownList, {
726
- theme: 'dark',
727
- show: true,
728
- itemOnClick: function itemOnClick(e, option) {
729
- console.log("clickCallback", e.target, option);
730
- },
731
- selectedOptions: [{
732
- type: 'disabled',
733
- value: 'zzz21',
734
- label: 'Promo',
735
- display: 'item'
736
- }],
737
- options: [{
738
- type: 'selectable',
739
- value: 'zz20',
740
- label: 'Episode',
741
- display: 'item'
742
- }, {
743
- type: 'disabled',
744
- value: 'zzz21',
745
- label: 'Promo',
746
- display: 'item'
747
- }, {
748
- type: 'selectable',
749
- value: 'zzz21',
750
- label: 'Tvc',
751
- display: 'item'
752
- }]
753
- })
754
- )
755
- ),
756
- _react2.default.createElement(
757
- 'div',
758
- { style: { width: '200px' } },
759
- _react2.default.createElement(
760
- 'h5',
761
- { style: { 'fontWeight': 'bold' } },
762
- 'Nested List'
763
- ),
764
- _react2.default.createElement(_components.DropdownList, {
765
- theme: 'dark',
766
- show: true,
767
- itemOnClick: function itemOnClick(e, option) {
768
- console.log("clickCallback", e.target, option);
769
- },
770
- selectedOptions: [],
771
- options: [{
772
- type: 'selectable',
773
- value: 'zz20',
774
- label: 'Television',
775
- display: 'item'
776
- }, {
777
- type: 'selectable',
778
- value: 'zzz21',
779
- label: 'Coming Soon',
780
- display: 'item'
781
- }, {
782
- label: 'INGEST',
783
- children: [{
784
- type: 'selectable',
785
- value: '10',
786
- label: 'All',
787
- display: 'item'
788
- }]
789
- }, {
790
- label: 'ONBOARDING',
791
- children: [{
792
- type: 'selectable',
793
- value: '20',
794
- label: 'All',
795
- display: 'item'
796
- }, {
797
- type: 'selectable',
798
- value: '21',
799
- label: 'Add Promo',
800
- display: 'item'
801
- }, {
802
- label: 'USERS',
803
- children: [{
804
- type: 'selectable',
805
- value: '21-1',
806
- label: 'All',
807
- display: 'item'
808
- }, {
809
- type: 'selectable',
810
- value: 'zddf21',
811
- label: 'Coming Soon',
812
- display: 'item'
813
- }]
814
- }, {
815
- type: 'selectable',
816
- value: '22',
817
- label: 'Add Tvc',
818
- display: 'item'
819
- }, {
820
- type: 'selectable',
821
- value: '23',
822
- label: 'Add Clip',
823
- display: 'item'
824
- }]
825
- }, {
826
- label: 'TAGGING',
827
- children: [{
828
- type: 'selectable',
829
- value: '30',
830
- label: 'All',
831
- display: 'item'
832
- }]
833
- }, {
834
- label: 'SCHEDULER',
835
- children: [{
836
- type: 'selectable',
837
- value: '40',
838
- label: 'All',
839
- display: 'item'
840
- }, {
841
- type: 'selectable',
842
- value: '41',
843
- label: 'Some Label Text',
844
- display: 'item'
845
- }, {
846
- type: 'selectable',
847
- value: '42',
848
- label: 'Some Label Text',
849
- display: 'item'
850
- }]
851
- }]
852
- })
853
- ),
854
- _react2.default.createElement(
855
- 'div',
856
- { style: { width: '200px' } },
857
- _react2.default.createElement(
858
- 'h5',
859
- { style: { 'fontWeight': 'bold' } },
860
- 'Default Selected List'
861
- ),
862
- _react2.default.createElement(_components.DropdownList, {
863
- theme: 'dark',
864
- show: true,
865
- itemOnClick: function itemOnClick(e, option) {
866
- console.log("clickCallback", e.target, option);
867
- },
868
- selectedOptions: [{
869
- type: 'selectable',
870
- value: 'zzz21',
871
- label: 'Coming Soon',
872
- display: 'item'
873
- }, {
874
- type: 'selectable',
875
- value: '22',
876
- label: 'Add Tvc',
877
- display: 'item'
878
- }, {
879
- type: 'selectable',
880
- value: '23',
881
- label: 'Add Clip',
882
- display: 'item'
883
- }],
884
- options: [{
885
- type: 'selectable',
886
- value: 'zz20',
887
- label: 'Television',
888
- display: 'item'
889
- }, {
890
- type: 'selectable',
891
- value: 'zzz21',
892
- label: 'Coming Soon',
893
- display: 'item'
894
- }, {
895
- label: 'INGEST',
896
- children: [{
897
- type: 'selectable',
898
- value: '10',
899
- label: 'All',
900
- display: 'item'
901
- }]
902
- }, {
903
- label: 'ONBOARDING',
904
- children: [{
905
- type: 'selectable',
906
- value: '20',
907
- label: 'All',
908
- display: 'item'
909
- }, {
910
- type: 'selectable',
911
- value: '21',
912
- label: 'Add Promo',
913
- display: 'item'
914
- }, {
915
- type: 'selectable',
916
- value: '22',
917
- label: 'Add Tvc',
918
- display: 'item'
919
- }, {
920
- type: 'selectable',
921
- value: '23',
922
- label: 'Add Clip',
923
- display: 'item'
924
- }]
925
- }, {
926
- label: 'TAGGING',
927
- children: [{
928
- type: 'selectable',
929
- value: '30',
930
- label: 'All',
931
- display: 'item'
932
- }]
933
- }, {
934
- label: 'SCHEDULER',
935
- children: [{
936
- type: 'selectable',
937
- value: '40',
938
- label: 'All',
939
- display: 'item'
940
- }, {
941
- type: 'selectable',
942
- value: '41',
943
- label: 'Some Label Text',
944
- display: 'item'
945
- }, {
946
- type: 'selectable',
947
- value: '42',
948
- label: 'Some Label Text',
949
- display: 'item'
950
- }]
951
- }]
952
- })
953
- ),
954
- _react2.default.createElement(
955
- 'div',
956
- { style: { width: '200px' } },
957
- _react2.default.createElement(
958
- 'h5',
959
- { style: { 'fontWeight': 'bold' } },
960
- 'Disabled and Divider List'
961
- ),
962
- _react2.default.createElement(_components.DropdownList, {
963
- theme: 'dark',
964
- show: true,
965
- itemOnClick: function itemOnClick(e, option) {
966
- console.log("clickCallback", e.target, option);
967
- },
609
+ 'div',
610
+ { style: { marginTop: '30px' } },
611
+ _react2.default.createElement(
612
+ 'h5',
613
+ { style: { fontWeight: 'bold' } },
614
+ 'Simple List'
615
+ ),
616
+ _react2.default.createElement(_components.DropdownList, {
617
+ theme: 'dark',
618
+ show: true,
619
+ itemOnClick: function itemOnClick(e, option) {
620
+ console.log('clickCallback', e.target, option);
621
+ },
622
+ options: [{
623
+ type: 'selectable',
624
+ value: 'zz20',
625
+ label: 'Episode',
626
+ display: 'item'
627
+ }, {
628
+ type: 'selectable',
629
+ value: 'zzz21',
630
+ label: 'Promo',
631
+ display: 'item'
632
+ }, {
633
+ type: 'selectable',
634
+ value: 'zzz21',
635
+ label: 'Tvc',
636
+ display: 'item'
637
+ }]
638
+ })
639
+ ),
640
+ _react2.default.createElement(
641
+ 'div',
642
+ { style: { marginTop: '30px' } },
643
+ _react2.default.createElement(
644
+ 'h5',
645
+ { style: { fontWeight: 'bold' } },
646
+ 'Simple Default Selected'
647
+ ),
648
+ _react2.default.createElement(_components.DropdownList, {
649
+ theme: 'dark',
650
+ show: true,
651
+ itemOnClick: function itemOnClick(e, option) {
652
+ console.log('clickCallback', e.target, option);
653
+ },
654
+ selectedOptions: [{
655
+ type: 'selectable',
656
+ value: 'zzz21',
657
+ label: 'Promo',
658
+ display: 'item'
659
+ }],
660
+ options: [{
661
+ type: 'selectable',
662
+ value: 'zz20',
663
+ label: 'Episode',
664
+ display: 'item'
665
+ }, {
666
+ type: 'selectable',
667
+ value: 'zzz21',
668
+ label: 'Promo',
669
+ display: 'item'
670
+ }, {
671
+ type: 'selectable',
672
+ value: 'zzz21',
673
+ label: 'Tvc',
674
+ display: 'item'
675
+ }]
676
+ })
677
+ ),
678
+ _react2.default.createElement(
679
+ 'div',
680
+ { style: { marginTop: '30px' } },
681
+ _react2.default.createElement(
682
+ 'h5',
683
+ { style: { fontWeight: 'bold' } },
684
+ 'Simple Disabled '
685
+ ),
686
+ _react2.default.createElement(_components.DropdownList, {
687
+ theme: 'dark',
688
+ show: true,
689
+ itemOnClick: function itemOnClick(e, option) {
690
+ console.log('clickCallback', e.target, option);
691
+ },
692
+ options: [{
693
+ type: 'selectable',
694
+ value: 'zz20',
695
+ label: 'Episode',
696
+ display: 'item'
697
+ }, {
698
+ type: 'disabled',
699
+ value: 'zzz21',
700
+ label: 'Promo',
701
+ display: 'item'
702
+ }, {
703
+ type: 'selectable',
704
+ value: 'zzz21',
705
+ label: 'Tvc',
706
+ display: 'item'
707
+ }]
708
+ })
709
+ ),
710
+ _react2.default.createElement(
711
+ 'div',
712
+ { style: { marginTop: '30px' } },
713
+ _react2.default.createElement(
714
+ 'h5',
715
+ { style: { fontWeight: 'bold' } },
716
+ 'Simple Selected and Disabled '
717
+ ),
718
+ _react2.default.createElement(_components.DropdownList, {
719
+ theme: 'dark',
720
+ show: true,
721
+ itemOnClick: function itemOnClick(e, option) {
722
+ console.log('clickCallback', e.target, option);
723
+ },
724
+ selectedOptions: [{
725
+ type: 'disabled',
726
+ value: 'zzz21',
727
+ label: 'Promo',
728
+ display: 'item'
729
+ }],
730
+ options: [{
731
+ type: 'selectable',
732
+ value: 'zz20',
733
+ label: 'Episode',
734
+ display: 'item'
735
+ }, {
736
+ type: 'disabled',
737
+ value: 'zzz21',
738
+ label: 'Promo',
739
+ display: 'item'
740
+ }, {
741
+ type: 'selectable',
742
+ value: 'zzz21',
743
+ label: 'Tvc',
744
+ display: 'item'
745
+ }]
746
+ })
747
+ )
748
+ ),
749
+ _react2.default.createElement(
750
+ 'div',
751
+ { style: { width: '200px' } },
752
+ _react2.default.createElement(
753
+ 'h5',
754
+ { style: { fontWeight: 'bold' } },
755
+ 'Nested List'
756
+ ),
757
+ _react2.default.createElement(_components.DropdownList, {
758
+ theme: 'dark',
759
+ show: true,
760
+ itemOnClick: function itemOnClick(e, option) {
761
+ console.log('clickCallback', e.target, option);
762
+ },
763
+ selectedOptions: [],
764
+ options: [{
765
+ type: 'selectable',
766
+ value: 'zz20',
767
+ label: 'Television',
768
+ display: 'item'
769
+ }, {
770
+ type: 'selectable',
771
+ value: 'zzz21',
772
+ label: 'Coming Soon',
773
+ display: 'item'
774
+ }, {
775
+ label: 'INGEST',
776
+ children: [{
777
+ type: 'selectable',
778
+ value: '10',
779
+ label: 'All',
780
+ display: 'item'
781
+ }]
782
+ }, {
783
+ label: 'ONBOARDING',
784
+ children: [{
785
+ type: 'selectable',
786
+ value: '20',
787
+ label: 'All',
788
+ display: 'item'
789
+ }, {
790
+ type: 'selectable',
791
+ value: '21',
792
+ label: 'Add Promo',
793
+ display: 'item'
794
+ }, {
795
+ label: 'USERS',
796
+ children: [{
797
+ type: 'selectable',
798
+ value: '21-1',
799
+ label: 'All',
800
+ display: 'item'
801
+ }, {
802
+ type: 'selectable',
803
+ value: 'zddf21',
804
+ label: 'Coming Soon',
805
+ display: 'item'
806
+ }]
807
+ }, {
808
+ type: 'selectable',
809
+ value: '22',
810
+ label: 'Add Tvc',
811
+ display: 'item'
812
+ }, {
813
+ type: 'selectable',
814
+ value: '23',
815
+ label: 'Add Clip',
816
+ display: 'item'
817
+ }]
818
+ }, {
819
+ label: 'TAGGING',
820
+ children: [{
821
+ type: 'selectable',
822
+ value: '30',
823
+ label: 'All',
824
+ display: 'item'
825
+ }]
826
+ }, {
827
+ label: 'SCHEDULER',
828
+ children: [{
829
+ type: 'selectable',
830
+ value: '40',
831
+ label: 'All',
832
+ display: 'item'
833
+ }, {
834
+ type: 'selectable',
835
+ value: '41',
836
+ label: 'Some Label Text',
837
+ display: 'item'
838
+ }, {
839
+ type: 'selectable',
840
+ value: '42',
841
+ label: 'Some Label Text',
842
+ display: 'item'
843
+ }]
844
+ }]
845
+ })
846
+ ),
847
+ _react2.default.createElement(
848
+ 'div',
849
+ { style: { width: '200px' } },
850
+ _react2.default.createElement(
851
+ 'h5',
852
+ { style: { fontWeight: 'bold' } },
853
+ 'Default Selected List'
854
+ ),
855
+ _react2.default.createElement(_components.DropdownList, {
856
+ theme: 'dark',
857
+ show: true,
858
+ itemOnClick: function itemOnClick(e, option) {
859
+ console.log('clickCallback', e.target, option);
860
+ },
861
+ selectedOptions: [{
862
+ type: 'selectable',
863
+ value: 'zzz21',
864
+ label: 'Coming Soon',
865
+ display: 'item'
866
+ }, {
867
+ type: 'selectable',
868
+ value: '22',
869
+ label: 'Add Tvc',
870
+ display: 'item'
871
+ }, {
872
+ type: 'selectable',
873
+ value: '23',
874
+ label: 'Add Clip',
875
+ display: 'item'
876
+ }],
877
+ options: [{
878
+ type: 'selectable',
879
+ value: 'zz20',
880
+ label: 'Television',
881
+ display: 'item'
882
+ }, {
883
+ type: 'selectable',
884
+ value: 'zzz21',
885
+ label: 'Coming Soon',
886
+ display: 'item'
887
+ }, {
888
+ label: 'INGEST',
889
+ children: [{
890
+ type: 'selectable',
891
+ value: '10',
892
+ label: 'All',
893
+ display: 'item'
894
+ }]
895
+ }, {
896
+ label: 'ONBOARDING',
897
+ children: [{
898
+ type: 'selectable',
899
+ value: '20',
900
+ label: 'All',
901
+ display: 'item'
902
+ }, {
903
+ type: 'selectable',
904
+ value: '21',
905
+ label: 'Add Promo',
906
+ display: 'item'
907
+ }, {
908
+ type: 'selectable',
909
+ value: '22',
910
+ label: 'Add Tvc',
911
+ display: 'item'
912
+ }, {
913
+ type: 'selectable',
914
+ value: '23',
915
+ label: 'Add Clip',
916
+ display: 'item'
917
+ }]
918
+ }, {
919
+ label: 'TAGGING',
920
+ children: [{
921
+ type: 'selectable',
922
+ value: '30',
923
+ label: 'All',
924
+ display: 'item'
925
+ }]
926
+ }, {
927
+ label: 'SCHEDULER',
928
+ children: [{
929
+ type: 'selectable',
930
+ value: '40',
931
+ label: 'All',
932
+ display: 'item'
933
+ }, {
934
+ type: 'selectable',
935
+ value: '41',
936
+ label: 'Some Label Text',
937
+ display: 'item'
938
+ }, {
939
+ type: 'selectable',
940
+ value: '42',
941
+ label: 'Some Label Text',
942
+ display: 'item'
943
+ }]
944
+ }]
945
+ })
946
+ ),
947
+ _react2.default.createElement(
948
+ 'div',
949
+ { style: { width: '200px' } },
950
+ _react2.default.createElement(
951
+ 'h5',
952
+ { style: { fontWeight: 'bold' } },
953
+ 'Disabled and Divider List'
954
+ ),
955
+ _react2.default.createElement(_components.DropdownList, {
956
+ theme: 'dark',
957
+ show: true,
958
+ itemOnClick: function itemOnClick(e, option) {
959
+ console.log('clickCallback', e.target, option);
960
+ },
961
+ options: [{
962
+ type: 'selectable',
963
+ value: 'zz20',
964
+ label: 'View Episode',
965
+ display: 'item'
966
+ }, {
967
+ type: 'selectable',
968
+ value: 'zzccz21',
969
+ label: 'View Movie',
970
+ display: 'item'
971
+ }, {
972
+ type: 'selectable',
973
+ value: 'zzz21',
974
+ label: 'View Promo',
975
+ display: 'item'
976
+ }, {
977
+ type: 'selectable',
978
+ value: 'zzz21',
979
+ label: 'View Tvc',
980
+ display: 'item'
981
+ }, {
982
+ display: 'divider'
983
+ }, {
984
+ type: 'selectable',
985
+ value: '21',
986
+ label: 'Add Episode',
987
+ display: 'item'
988
+ }, {
989
+ type: 'selectable',
990
+ value: 'zzccz21',
991
+ label: 'Add Movie',
992
+ display: 'item'
993
+ }, {
994
+ type: 'disabled',
995
+ value: '22',
996
+ label: 'Add Promo',
997
+ display: 'item'
998
+ }, {
999
+ type: 'selectable',
1000
+ value: '23',
1001
+ label: 'Add Tvc',
1002
+ display: 'item'
1003
+ }]
1004
+ })
1005
+ ),
1006
+ _react2.default.createElement(
1007
+ 'div',
1008
+ { style: { width: '200px' } },
1009
+ _react2.default.createElement(
1010
+ 'h5',
1011
+ { style: { fontWeight: 'bold' } },
1012
+ 'Group Disabled and Divider List'
1013
+ ),
1014
+ _react2.default.createElement(_components.DropdownList, {
1015
+ theme: 'dark',
1016
+ show: true,
1017
+ itemOnClick: function itemOnClick(e, option) {
1018
+ console.log('clickCallback', e.target, option);
1019
+ },
1020
+ options: [{
1021
+ type: 'selectable',
1022
+ value: 'zz20',
1023
+ label: 'Television',
1024
+ display: 'item'
1025
+ }, {
1026
+ type: 'selectable',
1027
+ value: 'zzz21',
1028
+ label: 'Coming Soon',
1029
+ display: 'item'
1030
+ }, {
1031
+ display: 'divider'
1032
+ }, {
1033
+ label: 'INGEST',
1034
+ children: [{
1035
+ type: 'selectable',
1036
+ value: '10',
1037
+ label: 'All',
1038
+ display: 'item'
1039
+ }]
1040
+ }, {
1041
+ label: 'ONBOARDING',
1042
+ children: [{
1043
+ type: 'disabled',
1044
+ value: '20',
1045
+ label: 'All',
1046
+ display: 'item'
1047
+ }, {
1048
+ type: 'selectable',
1049
+ value: '21',
1050
+ label: 'Add Promo',
1051
+ display: 'item'
1052
+ }, {
1053
+ type: 'selectable',
1054
+ value: '22',
1055
+ label: 'Add Tvc',
1056
+ display: 'item'
1057
+ }, {
1058
+ type: 'selectable',
1059
+ value: '23',
1060
+ label: 'Add Clip',
1061
+ display: 'item'
1062
+ }, {
1063
+ display: 'divider'
1064
+ }, {
1065
+ type: 'selectable',
1066
+ value: '24',
1067
+ label: 'Delete Promo',
1068
+ display: 'item'
1069
+ }, {
1070
+ type: 'selectable',
1071
+ value: '25',
1072
+ label: 'Delete Tvc',
1073
+ display: 'item'
1074
+ }, {
1075
+ type: 'selectable',
1076
+ value: '26',
1077
+ label: 'Delete Clip',
1078
+ display: 'item'
1079
+ }]
1080
+ }, {
1081
+ label: 'TAGGING',
1082
+ children: [{
1083
+ type: 'selectable',
1084
+ value: '30',
1085
+ label: 'All',
1086
+ display: 'item'
1087
+ }]
1088
+ }, {
1089
+ label: 'SCHEDULER',
1090
+ children: [{
1091
+ type: 'selectable',
1092
+ value: '40',
1093
+ label: 'All',
1094
+ display: 'item'
1095
+ }, {
1096
+ type: 'selectable',
1097
+ value: '41',
1098
+ label: 'Some Label Text',
1099
+ display: 'item'
1100
+ }, {
1101
+ type: 'selectable',
1102
+ value: '42',
1103
+ label: 'Some Label Text',
1104
+ display: 'item'
1105
+ }]
1106
+ }]
1107
+ })
1108
+ )
1109
+ )
1110
+ );
1111
+ });
968
1112
 
969
- options: [{
970
- type: 'selectable',
971
- value: 'zz20',
972
- label: 'View Episode',
973
- display: 'item'
974
- }, {
975
- type: 'selectable',
976
- value: 'zzccz21',
977
- label: 'View Movie',
978
- display: 'item'
979
- }, {
980
- type: 'selectable',
981
- value: 'zzz21',
982
- label: 'View Promo',
983
- display: 'item'
984
- }, {
985
- type: 'selectable',
986
- value: 'zzz21',
987
- label: 'View Tvc',
988
- display: 'item'
989
- }, {
990
- display: 'divider'
991
- }, {
992
- type: 'selectable',
993
- value: '21',
994
- label: 'Add Episode',
995
- display: 'item'
996
- }, {
997
- type: 'selectable',
998
- value: 'zzccz21',
999
- label: 'Add Movie',
1000
- display: 'item'
1001
- }, {
1002
- type: 'disabled',
1003
- value: '22',
1004
- label: 'Add Promo',
1005
- display: 'item'
1006
- }, {
1007
- type: 'selectable',
1008
- value: '23',
1009
- label: 'Add Tvc',
1010
- display: 'item'
1011
- }]
1012
- })
1013
- ),
1014
- _react2.default.createElement(
1015
- 'div',
1016
- { style: { width: '200px' } },
1017
- _react2.default.createElement(
1018
- 'h5',
1019
- { style: { 'fontWeight': 'bold' } },
1020
- 'Group Disabled and Divider List'
1021
- ),
1022
- _react2.default.createElement(_components.DropdownList, {
1023
- theme: 'dark',
1024
- show: true,
1025
- itemOnClick: function itemOnClick(e, option) {
1026
- console.log("clickCallback", e.target, option);
1027
- },
1028
- options: [{
1029
- type: 'selectable',
1030
- value: 'zz20',
1031
- label: 'Television',
1032
- display: 'item'
1033
- }, {
1034
- type: 'selectable',
1035
- value: 'zzz21',
1036
- label: 'Coming Soon',
1037
- display: 'item'
1038
- }, {
1039
- display: 'divider'
1040
- }, {
1041
- label: 'INGEST',
1042
- children: [{
1043
- type: 'selectable',
1044
- value: '10',
1045
- label: 'All',
1046
- display: 'item'
1047
- }]
1048
- }, {
1049
- label: 'ONBOARDING',
1050
- children: [{
1051
- type: 'disabled',
1052
- value: '20',
1053
- label: 'All',
1054
- display: 'item'
1055
- }, {
1056
- type: 'selectable',
1057
- value: '21',
1058
- label: 'Add Promo',
1059
- display: 'item'
1060
- }, {
1061
- type: 'selectable',
1062
- value: '22',
1063
- label: 'Add Tvc',
1064
- display: 'item'
1065
- }, {
1066
- type: 'selectable',
1067
- value: '23',
1068
- label: 'Add Clip',
1069
- display: 'item'
1070
- }, {
1071
- display: 'divider'
1072
- }, {
1073
- type: 'selectable',
1074
- value: '24',
1075
- label: 'Delete Promo',
1076
- display: 'item'
1077
- }, {
1078
- type: 'selectable',
1079
- value: '25',
1080
- label: 'Delete Tvc',
1081
- display: 'item'
1082
- }, {
1083
- type: 'selectable',
1084
- value: '26',
1085
- label: 'Delete Clip',
1086
- display: 'item'
1087
- }]
1088
- }, {
1089
- label: 'TAGGING',
1090
- children: [{
1091
- type: 'selectable',
1092
- value: '30',
1093
- label: 'All',
1094
- display: 'item'
1095
- }]
1096
- }, {
1097
- label: 'SCHEDULER',
1098
- children: [{
1099
- type: 'selectable',
1100
- value: '40',
1101
- label: 'All',
1102
- display: 'item'
1103
- }, {
1104
- type: 'selectable',
1105
- value: '41',
1106
- label: 'Some Label Text',
1107
- display: 'item'
1108
- }, {
1109
- type: 'selectable',
1110
- value: '42',
1111
- label: 'Some Label Text',
1112
- display: 'item'
1113
- }]
1114
- }]
1115
- })
1116
- )
1113
+ (0, _react3.storiesOf)('DropdownList').add('nexc theme', function () {
1114
+ return _react2.default.createElement(
1115
+ _storyHelpers.Example,
1116
+ { title: 'Appearances Light', background: 'default' },
1117
+ _react2.default.createElement(
1118
+ _storyHelpers.Stack,
1119
+ null,
1120
+ _react2.default.createElement(
1121
+ 'div',
1122
+ { style: { width: '200px' } },
1123
+ _react2.default.createElement(
1124
+ 'div',
1125
+ { style: { marginTop: '30px' } },
1126
+ _react2.default.createElement(
1127
+ 'h5',
1128
+ { style: { fontWeight: 'bold' } },
1129
+ 'Simple List'
1130
+ ),
1131
+ _react2.default.createElement(_components.DropdownList, {
1132
+ theme: 'nexc',
1133
+ show: true,
1134
+ itemOnClick: function itemOnClick(e, option) {
1135
+ console.log('clickCallback', e.target, option);
1136
+ },
1137
+ options: [{
1138
+ type: 'selectable',
1139
+ value: 'zz20',
1140
+ label: 'Episode',
1141
+ display: 'item'
1142
+ }, {
1143
+ type: 'selectable',
1144
+ value: 'zzz21',
1145
+ label: 'Promo',
1146
+ display: 'item'
1147
+ }, {
1148
+ type: 'selectable',
1149
+ value: 'zzz21',
1150
+ label: 'Tvc',
1151
+ display: 'item'
1152
+ }]
1153
+ })
1154
+ ),
1155
+ _react2.default.createElement(
1156
+ 'div',
1157
+ { style: { marginTop: '30px' } },
1158
+ _react2.default.createElement(
1159
+ 'h5',
1160
+ { style: { fontWeight: 'bold' } },
1161
+ 'Simple Default Selected'
1162
+ ),
1163
+ _react2.default.createElement(_components.DropdownList, {
1164
+ theme: 'nexc',
1165
+ show: true,
1166
+ itemOnClick: function itemOnClick(e, option) {
1167
+ console.log('clickCallback', e.target, option);
1168
+ },
1169
+ selectedOptions: [{
1170
+ type: 'selectable',
1171
+ value: 'zzz21',
1172
+ label: 'Promo',
1173
+ display: 'item'
1174
+ }],
1175
+ options: [{
1176
+ type: 'selectable',
1177
+ value: 'zz20',
1178
+ label: 'Episode',
1179
+ display: 'item'
1180
+ }, {
1181
+ type: 'selectable',
1182
+ value: 'zzz21',
1183
+ label: 'Promo',
1184
+ display: 'item'
1185
+ }, {
1186
+ type: 'selectable',
1187
+ value: 'zzz21',
1188
+ label: 'Tvc',
1189
+ display: 'item'
1190
+ }]
1191
+ })
1192
+ ),
1193
+ _react2.default.createElement(
1194
+ 'div',
1195
+ { style: { marginTop: '30px' } },
1196
+ _react2.default.createElement(
1197
+ 'h5',
1198
+ { style: { fontWeight: 'bold' } },
1199
+ 'Simple Disabled '
1200
+ ),
1201
+ _react2.default.createElement(_components.DropdownList, {
1202
+ theme: 'nexc',
1203
+ show: true,
1204
+ itemOnClick: function itemOnClick(e, option) {
1205
+ console.log('clickCallback', e.target, option);
1206
+ },
1207
+ options: [{
1208
+ type: 'selectable',
1209
+ value: 'zz20',
1210
+ label: 'Episode',
1211
+ display: 'item'
1212
+ }, {
1213
+ type: 'disabled',
1214
+ value: 'zzz21',
1215
+ label: 'Promo',
1216
+ display: 'item'
1217
+ }, {
1218
+ type: 'selectable',
1219
+ value: 'zzz21',
1220
+ label: 'Tvc',
1221
+ display: 'item'
1222
+ }]
1223
+ })
1224
+ ),
1225
+ _react2.default.createElement(
1226
+ 'div',
1227
+ { style: { marginTop: '30px' } },
1228
+ _react2.default.createElement(
1229
+ 'h5',
1230
+ { style: { fontWeight: 'bold' } },
1231
+ 'Simple Selected and Disabled '
1232
+ ),
1233
+ _react2.default.createElement(_components.DropdownList, {
1234
+ theme: 'nexc',
1235
+ show: true,
1236
+ itemOnClick: function itemOnClick(e, option) {
1237
+ console.log('clickCallback', e.target, option);
1238
+ },
1239
+ selectedOptions: [{
1240
+ type: 'disabled',
1241
+ value: 'zzz21',
1242
+ label: 'Promo',
1243
+ display: 'item'
1244
+ }],
1245
+ options: [{
1246
+ type: 'selectable',
1247
+ value: 'zz20',
1248
+ label: 'Episode',
1249
+ display: 'item'
1250
+ }, {
1251
+ type: 'disabled',
1252
+ value: 'zzz21',
1253
+ label: 'Promo',
1254
+ display: 'item'
1255
+ }, {
1256
+ type: 'selectable',
1257
+ value: 'zzz21',
1258
+ label: 'Tvc',
1259
+ display: 'item'
1260
+ }]
1261
+ })
1117
1262
  )
1118
- );
1263
+ ),
1264
+ _react2.default.createElement(
1265
+ 'div',
1266
+ { style: { width: '200px' } },
1267
+ _react2.default.createElement(
1268
+ 'h5',
1269
+ { style: { fontWeight: 'bold' } },
1270
+ 'Nested List'
1271
+ ),
1272
+ _react2.default.createElement(_components.DropdownList, {
1273
+ theme: 'nexc',
1274
+ show: true,
1275
+ itemOnClick: function itemOnClick(e, option) {
1276
+ console.log('clickCallback', e.target, option);
1277
+ },
1278
+ selectedOptions: [],
1279
+ options: [{
1280
+ type: 'selectable',
1281
+ value: 'zz20',
1282
+ label: 'Television',
1283
+ display: 'item'
1284
+ }, {
1285
+ type: 'selectable',
1286
+ value: 'zzz21',
1287
+ label: 'Coming Soon',
1288
+ display: 'item'
1289
+ }, {
1290
+ label: 'INGEST',
1291
+ children: [{
1292
+ type: 'selectable',
1293
+ value: '10',
1294
+ label: 'All',
1295
+ display: 'item'
1296
+ }]
1297
+ }, {
1298
+ label: 'ONBOARDING',
1299
+ children: [{
1300
+ type: 'selectable',
1301
+ value: '20',
1302
+ label: 'All',
1303
+ display: 'item'
1304
+ }, {
1305
+ type: 'selectable',
1306
+ value: '21',
1307
+ label: 'Add Promo',
1308
+ display: 'item'
1309
+ }, {
1310
+ label: 'USERS',
1311
+ children: [{
1312
+ type: 'selectable',
1313
+ value: '21-1',
1314
+ label: 'All',
1315
+ display: 'item'
1316
+ }, {
1317
+ type: 'selectable',
1318
+ value: 'zddf21',
1319
+ label: 'Coming Soon',
1320
+ display: 'item'
1321
+ }]
1322
+ }, {
1323
+ type: 'selectable',
1324
+ value: '22',
1325
+ label: 'Add Tvc',
1326
+ display: 'item'
1327
+ }, {
1328
+ type: 'selectable',
1329
+ value: '23',
1330
+ label: 'Add Clip',
1331
+ display: 'item'
1332
+ }]
1333
+ }, {
1334
+ label: 'TAGGING',
1335
+ children: [{
1336
+ type: 'selectable',
1337
+ value: '30',
1338
+ label: 'All',
1339
+ display: 'item'
1340
+ }]
1341
+ }, {
1342
+ label: 'SCHEDULER',
1343
+ children: [{
1344
+ type: 'selectable',
1345
+ value: '40',
1346
+ label: 'All',
1347
+ display: 'item'
1348
+ }, {
1349
+ type: 'selectable',
1350
+ value: '41',
1351
+ label: 'Some Label Text',
1352
+ display: 'item'
1353
+ }, {
1354
+ type: 'selectable',
1355
+ value: '42',
1356
+ label: 'Some Label Text',
1357
+ display: 'item'
1358
+ }]
1359
+ }]
1360
+ })
1361
+ ),
1362
+ _react2.default.createElement(
1363
+ 'div',
1364
+ { style: { width: '200px' } },
1365
+ _react2.default.createElement(
1366
+ 'h5',
1367
+ { style: { fontWeight: 'bold' } },
1368
+ 'Default Selected List'
1369
+ ),
1370
+ _react2.default.createElement(_components.DropdownList, {
1371
+ theme: 'nexc',
1372
+ show: true,
1373
+ itemOnClick: function itemOnClick(e, option) {
1374
+ console.log('clickCallback', e.target, option);
1375
+ },
1376
+ selectedOptions: [{
1377
+ type: 'selectable',
1378
+ value: 'zzz21',
1379
+ label: 'Coming Soon',
1380
+ display: 'item'
1381
+ }, {
1382
+ type: 'selectable',
1383
+ value: '22',
1384
+ label: 'Add Tvc',
1385
+ display: 'item'
1386
+ }, {
1387
+ type: 'selectable',
1388
+ value: '23',
1389
+ label: 'Add Clip',
1390
+ display: 'item'
1391
+ }],
1392
+ options: [{
1393
+ type: 'selectable',
1394
+ value: 'zz20',
1395
+ label: 'Television',
1396
+ display: 'item'
1397
+ }, {
1398
+ type: 'selectable',
1399
+ value: 'zzz21',
1400
+ label: 'Coming Soon',
1401
+ display: 'item'
1402
+ }, {
1403
+ label: 'INGEST',
1404
+ children: [{
1405
+ type: 'selectable',
1406
+ value: '10',
1407
+ label: 'All',
1408
+ display: 'item'
1409
+ }]
1410
+ }, {
1411
+ label: 'ONBOARDING',
1412
+ children: [{
1413
+ type: 'selectable',
1414
+ value: '20',
1415
+ label: 'All',
1416
+ display: 'item'
1417
+ }, {
1418
+ type: 'selectable',
1419
+ value: '21',
1420
+ label: 'Add Promo',
1421
+ display: 'item'
1422
+ }, {
1423
+ type: 'selectable',
1424
+ value: '22',
1425
+ label: 'Add Tvc',
1426
+ display: 'item'
1427
+ }, {
1428
+ type: 'selectable',
1429
+ value: '23',
1430
+ label: 'Add Clip',
1431
+ display: 'item'
1432
+ }]
1433
+ }, {
1434
+ label: 'TAGGING',
1435
+ children: [{
1436
+ type: 'selectable',
1437
+ value: '30',
1438
+ label: 'All',
1439
+ display: 'item'
1440
+ }]
1441
+ }, {
1442
+ label: 'SCHEDULER',
1443
+ children: [{
1444
+ type: 'selectable',
1445
+ value: '40',
1446
+ label: 'All',
1447
+ display: 'item'
1448
+ }, {
1449
+ type: 'selectable',
1450
+ value: '41',
1451
+ label: 'Some Label Text',
1452
+ display: 'item'
1453
+ }, {
1454
+ type: 'selectable',
1455
+ value: '42',
1456
+ label: 'Some Label Text',
1457
+ display: 'item'
1458
+ }]
1459
+ }]
1460
+ })
1461
+ ),
1462
+ _react2.default.createElement(
1463
+ 'div',
1464
+ { style: { width: '200px' } },
1465
+ _react2.default.createElement(
1466
+ 'h5',
1467
+ { style: { fontWeight: 'bold' } },
1468
+ 'Disabled and Divider List'
1469
+ ),
1470
+ _react2.default.createElement(_components.DropdownList, {
1471
+ theme: 'nexc',
1472
+ show: true,
1473
+ itemOnClick: function itemOnClick(e, option) {
1474
+ console.log('clickCallback', e.target, option);
1475
+ },
1476
+ options: [{
1477
+ type: 'selectable',
1478
+ value: 'zz20',
1479
+ label: 'View Episode',
1480
+ display: 'item'
1481
+ }, {
1482
+ type: 'selectable',
1483
+ value: 'zzccz21',
1484
+ label: 'View Movie',
1485
+ display: 'item'
1486
+ }, {
1487
+ type: 'selectable',
1488
+ value: 'zzz21',
1489
+ label: 'View Promo',
1490
+ display: 'item'
1491
+ }, {
1492
+ type: 'selectable',
1493
+ value: 'zzz21',
1494
+ label: 'View Tvc',
1495
+ display: 'item'
1496
+ }, {
1497
+ display: 'divider'
1498
+ }, {
1499
+ type: 'selectable',
1500
+ value: '21',
1501
+ label: 'Add Episode',
1502
+ display: 'item'
1503
+ }, {
1504
+ type: 'selectable',
1505
+ value: 'zzccz21',
1506
+ label: 'Add Movie',
1507
+ display: 'item'
1508
+ }, {
1509
+ type: 'disabled',
1510
+ value: '22',
1511
+ label: 'Add Promo',
1512
+ display: 'item'
1513
+ }, {
1514
+ type: 'selectable',
1515
+ value: '23',
1516
+ label: 'Add Tvc',
1517
+ display: 'item'
1518
+ }]
1519
+ })
1520
+ ),
1521
+ _react2.default.createElement(
1522
+ 'div',
1523
+ { style: { width: '200px' } },
1524
+ _react2.default.createElement(
1525
+ 'h5',
1526
+ { style: { fontWeight: 'bold' } },
1527
+ 'Group Disabled and Divider List'
1528
+ ),
1529
+ _react2.default.createElement(_components.DropdownList, {
1530
+ theme: 'nexc',
1531
+ show: true,
1532
+ itemOnClick: function itemOnClick(e, option) {
1533
+ console.log('clickCallback', e.target, option);
1534
+ },
1535
+ options: [{
1536
+ type: 'selectable',
1537
+ value: 'zz20',
1538
+ label: 'Television',
1539
+ display: 'item'
1540
+ }, {
1541
+ type: 'selectable',
1542
+ value: 'zzz21',
1543
+ label: 'Coming Soon',
1544
+ display: 'item'
1545
+ }, {
1546
+ display: 'divider'
1547
+ }, {
1548
+ label: 'INGEST',
1549
+ children: [{
1550
+ type: 'selectable',
1551
+ value: '10',
1552
+ label: 'All',
1553
+ display: 'item'
1554
+ }]
1555
+ }, {
1556
+ label: 'ONBOARDING',
1557
+ children: [{
1558
+ type: 'disabled',
1559
+ value: '20',
1560
+ label: 'All',
1561
+ display: 'item'
1562
+ }, {
1563
+ type: 'selectable',
1564
+ value: '21',
1565
+ label: 'Add Promo',
1566
+ display: 'item'
1567
+ }, {
1568
+ type: 'selectable',
1569
+ value: '22',
1570
+ label: 'Add Tvc',
1571
+ display: 'item'
1572
+ }, {
1573
+ type: 'selectable',
1574
+ value: '23',
1575
+ label: 'Add Clip',
1576
+ display: 'item'
1577
+ }, {
1578
+ display: 'divider'
1579
+ }, {
1580
+ type: 'selectable',
1581
+ value: '24',
1582
+ label: 'Delete Promo',
1583
+ display: 'item'
1584
+ }, {
1585
+ type: 'selectable',
1586
+ value: '25',
1587
+ label: 'Delete Tvc',
1588
+ display: 'item'
1589
+ }, {
1590
+ type: 'selectable',
1591
+ value: '26',
1592
+ label: 'Delete Clip',
1593
+ display: 'item'
1594
+ }]
1595
+ }, {
1596
+ label: 'TAGGING',
1597
+ children: [{
1598
+ type: 'selectable',
1599
+ value: '30',
1600
+ label: 'All',
1601
+ display: 'item'
1602
+ }]
1603
+ }, {
1604
+ label: 'SCHEDULER',
1605
+ children: [{
1606
+ type: 'selectable',
1607
+ value: '40',
1608
+ label: 'All',
1609
+ display: 'item'
1610
+ }, {
1611
+ type: 'selectable',
1612
+ value: '41',
1613
+ label: 'Some Label Text',
1614
+ display: 'item'
1615
+ }, {
1616
+ type: 'selectable',
1617
+ value: '42',
1618
+ label: 'Some Label Text',
1619
+ display: 'item'
1620
+ }]
1621
+ }]
1622
+ })
1623
+ )
1624
+ )
1625
+ );
1119
1626
  });