@desynova-digital/components 9.0.26 → 9.1.0

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