@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/customSelect/customSelect.story.js CHANGED
@@ -1,856 +1,750 @@
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)('CustomSelect').add('light theme z', 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: '150px' } },
25
- _react2.default.createElement(_components.CustomSelect, {
26
- theme: 'light',
27
- required: true,
28
- name: 'select1',
29
- type: 'select',
30
- label: 'Movies',
31
- placeholder: '-Select-',
32
- minchar: '4',
33
- selectionChangeCallback: function selectionChangeCallback(e, data) {
34
- console.log('selectionChangeCallback', e, data);
35
- },
36
- textChangeCallback: function textChangeCallback(e) {
37
- console.log('textChangeCallback');
38
- }
39
- //error={"invalid selection"}
40
- , options: [{
41
- type: 'selectable',
42
- value: '1',
43
- label: 'One',
44
- display: 'item',
45
- data: {
46
- name: 'One>name',
47
- id: 'One>id'
48
- }
49
- }, {
50
- type: 'selectable',
51
- value: '2',
52
- label: 'two',
53
- display: 'item',
54
- data: {
55
- name: 'two>name',
56
- id: 'two>id'
57
- }
58
- }, {
59
- type: 'disabled',
60
- value: '21',
61
- label: 'two1',
62
- display: 'item',
63
- data: {
64
- name: 'two1>name',
65
- id: 'two1>id'
66
- }
67
- }, {
68
- display: 'divider'
69
- }, {
70
- type: 'selectable',
71
- value: '3',
72
- label: 'Three',
73
- display: 'item',
74
- data: {
75
- name: 'Three>name',
76
- id: 'Three>id'
77
- }
78
- }]
79
- })
80
- ),
81
- _react2.default.createElement(
82
- 'div',
83
- { style: { width: '150px' } },
84
- _react2.default.createElement(_components.CustomSelect, {
85
- theme: 'light',
86
- required: true,
87
- name: 'select2',
88
- type: 'select',
89
- label: 'Movies',
90
- placeholder: '-Select-',
91
- minchar: '4',
92
- selectionChangeCallback: function selectionChangeCallback(e, data) {
93
- console.log('selectionChangeCallback', e, data);
94
- },
95
- textChangeCallback: function textChangeCallback(e) {
96
- console.log('textChangeCallback');
97
- }
98
- // error={"invalid selection"}
99
- , options: [{
100
- type: 'selectable',
101
- value: '1',
102
- label: 'One',
103
- display: 'item',
104
- data: {
105
- name: 'One>name',
106
- id: 'One>id'
107
- }
108
- }, {
109
- type: 'selectable',
110
- value: '2',
111
- label: 'two',
112
- display: 'item',
113
- data: {
114
- name: 'two>name',
115
- id: 'two>id'
116
- }
117
- }, {
118
- type: 'disabled',
119
- value: '21',
120
- label: 'two1',
121
- display: 'item',
122
- data: {
123
- name: 'two1>name',
124
- id: 'two1>id'
125
- }
126
- }, {
127
- display: 'divider'
128
- }, {
129
- type: 'selectable',
130
- value: '3',
131
- label: 'Three',
132
- display: 'item',
133
- data: {
134
- name: 'Three>name',
135
- id: 'Three>id'
136
- }
137
- }]
138
- })
139
- )
140
- )
141
- );
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)('CustomSelect').add('light theme z', 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: '150px'
15
+ }
16
+ }, /*#__PURE__*/_react["default"].createElement(_components.CustomSelect, {
17
+ theme: "light",
18
+ required: true,
19
+ name: "select1",
20
+ type: "select",
21
+ label: "Movies",
22
+ placeholder: "-Select-",
23
+ minchar: "4",
24
+ selectionChangeCallback: function selectionChangeCallback(e, data) {
25
+ console.log('selectionChangeCallback', e, data);
26
+ },
27
+ textChangeCallback: function textChangeCallback(e) {
28
+ console.log('textChangeCallback');
29
+ }
30
+ //error={"invalid selection"}
31
+ ,
32
+ options: [{
33
+ type: 'selectable',
34
+ value: '1',
35
+ label: 'One',
36
+ display: 'item',
37
+ data: {
38
+ name: 'One>name',
39
+ id: 'One>id'
40
+ }
41
+ }, {
42
+ type: 'selectable',
43
+ value: '2',
44
+ label: 'two',
45
+ display: 'item',
46
+ data: {
47
+ name: 'two>name',
48
+ id: 'two>id'
49
+ }
50
+ }, {
51
+ type: 'disabled',
52
+ value: '21',
53
+ label: 'two1',
54
+ display: 'item',
55
+ data: {
56
+ name: 'two1>name',
57
+ id: 'two1>id'
58
+ }
59
+ }, {
60
+ display: 'divider'
61
+ }, {
62
+ type: 'selectable',
63
+ value: '3',
64
+ label: 'Three',
65
+ display: 'item',
66
+ data: {
67
+ name: 'Three>name',
68
+ id: 'Three>id'
69
+ }
70
+ }]
71
+ })), /*#__PURE__*/_react["default"].createElement("div", {
72
+ style: {
73
+ width: '150px'
74
+ }
75
+ }, /*#__PURE__*/_react["default"].createElement(_components.CustomSelect, {
76
+ theme: "light",
77
+ required: true,
78
+ name: "select2",
79
+ type: "select",
80
+ label: "Movies",
81
+ placeholder: "-Select-",
82
+ minchar: "4",
83
+ selectionChangeCallback: function selectionChangeCallback(e, data) {
84
+ console.log('selectionChangeCallback', e, data);
85
+ },
86
+ textChangeCallback: function textChangeCallback(e) {
87
+ console.log('textChangeCallback');
88
+ }
89
+ // error={"invalid selection"}
90
+ ,
91
+ options: [{
92
+ type: 'selectable',
93
+ value: '1',
94
+ label: 'One',
95
+ display: 'item',
96
+ data: {
97
+ name: 'One>name',
98
+ id: 'One>id'
99
+ }
100
+ }, {
101
+ type: 'selectable',
102
+ value: '2',
103
+ label: 'two',
104
+ display: 'item',
105
+ data: {
106
+ name: 'two>name',
107
+ id: 'two>id'
108
+ }
109
+ }, {
110
+ type: 'disabled',
111
+ value: '21',
112
+ label: 'two1',
113
+ display: 'item',
114
+ data: {
115
+ name: 'two1>name',
116
+ id: 'two1>id'
117
+ }
118
+ }, {
119
+ display: 'divider'
120
+ }, {
121
+ type: 'selectable',
122
+ value: '3',
123
+ label: 'Three',
124
+ display: 'item',
125
+ data: {
126
+ name: 'Three>name',
127
+ id: 'Three>id'
128
+ }
129
+ }]
130
+ }))));
142
131
  });
143
- (0, _react3.storiesOf)('CustomSelect').add('light theme', function () {
144
- return _react2.default.createElement(
145
- _storyHelpers.Example,
146
- { title: 'Appearances Light', background: 'default' },
147
- _react2.default.createElement(
148
- _storyHelpers.Stack,
149
- null,
150
- _react2.default.createElement(
151
- 'div',
152
- { style: { width: '150px' } },
153
- _react2.default.createElement(
154
- _components.CustomSelect,
155
- {
156
- type: 'dropdown',
157
- label: 'Movies',
158
- placeholder: '-Select-',
159
- minchar: '4',
160
- selectionChangeCallback: function selectionChangeCallback(e, a, s) {
161
- console.log('selectionChangeCallback', e, a, s);
162
- },
163
- textChangeCallback: function textChangeCallback(e) {
164
- console.log('textChangeCallback');
165
- },
166
- keyboardAction: true,
167
- options: [{
168
- type: 'selectable',
169
- value: '1',
170
- label: 'One',
171
- display: 'item'
172
- }, {
173
- label: 'group1',
174
- children: [{
175
- type: 'selectable',
176
- value: '122',
177
- label: 'One2 1',
178
- display: 'item'
179
- }, {
180
- type: 'selectable',
181
- value: '123',
182
- label: 'One2 2',
183
- display: 'item'
184
- }, {
185
- label: 'group1 2',
186
- children: [{
187
- type: 'selectable',
188
- value: '1221',
189
- label: 'One2 11',
190
- display: 'item'
191
- }, {
192
- type: 'selectable',
193
- value: '1232',
194
- label: 'One2 22',
195
- display: 'item'
196
- }]
197
- }, {
198
- type: 'selectable',
199
- value: '125',
200
- label: 'One2 4',
201
- display: 'item'
202
- }]
203
- }, {
204
- type: 'disabled',
205
- value: '21',
206
- label: 'two1',
207
- display: 'item'
208
- }, {
209
- display: 'divider'
210
- }, {
211
- type: 'selectable',
212
- value: '3',
213
- label: 'Three',
214
- display: 'item'
215
- }]
216
- },
217
- _react2.default.createElement(
218
- 'div',
219
- { style: { width: '100%', background: 'teal' } },
220
- _react2.default.createElement(
221
- 'div',
222
- null,
223
- 'Some DOM elements'
224
- ),
225
- _react2.default.createElement(
226
- 'ul',
227
- null,
228
- _react2.default.createElement(
229
- 'li',
230
- null,
231
- 'hello'
232
- )
233
- )
234
- )
235
- )
236
- )
237
- ),
238
- _react2.default.createElement(
239
- _storyHelpers.Stack,
240
- null,
241
- _react2.default.createElement(
242
- 'div',
243
- { style: { width: '300px' } },
244
- _react2.default.createElement(_components.CustomSelect, {
245
- type: 'select',
246
- label: 'Groups',
247
- placeholder: '-- Choose --',
248
- minchar: '4',
249
- selectionChangeCallback: function selectionChangeCallback(e) {
250
- console.log('selectionChangeCallback');
251
- },
252
- textChangeCallback: function textChangeCallback(e) {
253
- console.log('textChangeCallback');
254
- },
255
- options: [{
256
- type: 'selectable',
257
- value: '',
258
- label: 'All',
259
- display: 'item'
260
- }, {
261
- label: 'INGEST',
262
- value: '110',
263
- children: [{
264
- type: 'selectable',
265
- value: '10',
266
- label: 'All',
267
- display: 'item'
268
- }]
269
- }, {
270
- label: 'ONBOARDING',
271
- value: '210',
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
- type: 'selectable',
284
- value: '22',
285
- label: 'Add Tvc',
286
- display: 'item'
287
- }, {
288
- type: 'selectable',
289
- value: '23',
290
- label: 'Add Clip',
291
- display: 'item'
292
- }]
293
- }, {
294
- label: 'TAGGING',
295
- value: '310',
296
- children: [{
297
- type: 'selectable',
298
- value: '30',
299
- label: 'All',
300
- display: 'item'
301
- }]
302
- }, {
303
- label: 'SCHEDULER',
304
- value: '410',
305
- children: [{
306
- type: 'selectable',
307
- value: '40',
308
- label: 'All',
309
- display: 'item'
310
- }, {
311
- type: 'selectable',
312
- value: '41',
313
- label: 'Some Label Text',
314
- display: 'item'
315
- }, {
316
- type: 'selectable',
317
- value: '42',
318
- label: 'Some Label Text',
319
- display: 'item'
320
- }]
321
- }]
322
- })
323
- )
324
- ),
325
- _react2.default.createElement(
326
- _storyHelpers.Stack,
327
- null,
328
- _react2.default.createElement(
329
- 'div',
330
- { style: { width: '150px' } },
331
- _react2.default.createElement(_components.CustomSelect, {
332
- type: 'multiselect',
333
- label: 'Movies',
334
- placeholder: '-Select-',
335
- minchar: '4',
336
- selectionChangeCallback: function selectionChangeCallback(e) {
337
- console.log('selectionChangeCallback');
338
- },
339
- textChangeCallback: function textChangeCallback(e) {
340
- console.log('textChangeCallback');
341
- },
342
- searchable: true,
343
- options: [{
344
- type: 'selectable',
345
- value: '1',
346
- label: 'One',
347
- display: 'item'
348
- }, {
349
- type: 'selectable',
350
- value: '2',
351
- label: 'two',
352
- display: 'item'
353
- }, {
354
- type: 'disabled',
355
- value: '21',
356
- label: 'two1',
357
- display: 'item'
358
- }, {
359
- display: 'divider'
360
- }, {
361
- type: 'selectable',
362
- value: '3',
363
- label: 'Three',
364
- display: 'item'
365
- }]
366
- })
367
- )
368
- )
369
- );
132
+ (0, _react2.storiesOf)('CustomSelect').add('light theme', function () {
133
+ return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
134
+ title: "Appearances Light",
135
+ background: "default"
136
+ }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement("div", {
137
+ style: {
138
+ width: '150px'
139
+ }
140
+ }, /*#__PURE__*/_react["default"].createElement(_components.CustomSelect, {
141
+ type: "dropdown",
142
+ label: "Movies",
143
+ placeholder: "-Select-",
144
+ minchar: "4",
145
+ selectionChangeCallback: function selectionChangeCallback(e, a, s) {
146
+ console.log('selectionChangeCallback', e, a, s);
147
+ },
148
+ textChangeCallback: function textChangeCallback(e) {
149
+ console.log('textChangeCallback');
150
+ },
151
+ keyboardAction: true,
152
+ options: [{
153
+ type: 'selectable',
154
+ value: '1',
155
+ label: 'One',
156
+ display: 'item'
157
+ }, {
158
+ label: 'group1',
159
+ children: [{
160
+ type: 'selectable',
161
+ value: '122',
162
+ label: 'One2 1',
163
+ display: 'item'
164
+ }, {
165
+ type: 'selectable',
166
+ value: '123',
167
+ label: 'One2 2',
168
+ display: 'item'
169
+ }, {
170
+ label: 'group1 2',
171
+ children: [{
172
+ type: 'selectable',
173
+ value: '1221',
174
+ label: 'One2 11',
175
+ display: 'item'
176
+ }, {
177
+ type: 'selectable',
178
+ value: '1232',
179
+ label: 'One2 22',
180
+ display: 'item'
181
+ }]
182
+ }, {
183
+ type: 'selectable',
184
+ value: '125',
185
+ label: 'One2 4',
186
+ display: 'item'
187
+ }]
188
+ }, {
189
+ type: 'disabled',
190
+ value: '21',
191
+ label: 'two1',
192
+ display: 'item'
193
+ }, {
194
+ display: 'divider'
195
+ }, {
196
+ type: 'selectable',
197
+ value: '3',
198
+ label: 'Three',
199
+ display: 'item'
200
+ }]
201
+ }, /*#__PURE__*/_react["default"].createElement("div", {
202
+ style: {
203
+ width: '100%',
204
+ background: 'teal'
205
+ }
206
+ }, /*#__PURE__*/_react["default"].createElement("div", null, "Some DOM elements"), /*#__PURE__*/_react["default"].createElement("ul", null, /*#__PURE__*/_react["default"].createElement("li", null, "hello")))))), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement("div", {
207
+ style: {
208
+ width: '300px'
209
+ }
210
+ }, /*#__PURE__*/_react["default"].createElement(_components.CustomSelect, {
211
+ type: "select",
212
+ label: "Groups",
213
+ placeholder: "-- Choose --",
214
+ minchar: "4",
215
+ selectionChangeCallback: function selectionChangeCallback(e) {
216
+ console.log('selectionChangeCallback');
217
+ },
218
+ textChangeCallback: function textChangeCallback(e) {
219
+ console.log('textChangeCallback');
220
+ },
221
+ options: [{
222
+ type: 'selectable',
223
+ value: '',
224
+ label: 'All',
225
+ display: 'item'
226
+ }, {
227
+ label: 'INGEST',
228
+ value: '110',
229
+ children: [{
230
+ type: 'selectable',
231
+ value: '10',
232
+ label: 'All',
233
+ display: 'item'
234
+ }]
235
+ }, {
236
+ label: 'ONBOARDING',
237
+ value: '210',
238
+ children: [{
239
+ type: 'selectable',
240
+ value: '20',
241
+ label: 'All',
242
+ display: 'item'
243
+ }, {
244
+ type: 'selectable',
245
+ value: '21',
246
+ label: 'Add Promo',
247
+ display: 'item'
248
+ }, {
249
+ type: 'selectable',
250
+ value: '22',
251
+ label: 'Add Tvc',
252
+ display: 'item'
253
+ }, {
254
+ type: 'selectable',
255
+ value: '23',
256
+ label: 'Add Clip',
257
+ display: 'item'
258
+ }]
259
+ }, {
260
+ label: 'TAGGING',
261
+ value: '310',
262
+ children: [{
263
+ type: 'selectable',
264
+ value: '30',
265
+ label: 'All',
266
+ display: 'item'
267
+ }]
268
+ }, {
269
+ label: 'SCHEDULER',
270
+ value: '410',
271
+ children: [{
272
+ type: 'selectable',
273
+ value: '40',
274
+ label: 'All',
275
+ display: 'item'
276
+ }, {
277
+ type: 'selectable',
278
+ value: '41',
279
+ label: 'Some Label Text',
280
+ display: 'item'
281
+ }, {
282
+ type: 'selectable',
283
+ value: '42',
284
+ label: 'Some Label Text',
285
+ display: 'item'
286
+ }]
287
+ }]
288
+ }))), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement("div", {
289
+ style: {
290
+ width: '150px'
291
+ }
292
+ }, /*#__PURE__*/_react["default"].createElement(_components.CustomSelect, {
293
+ type: "multiselect",
294
+ label: "Movies",
295
+ placeholder: "-Select-",
296
+ minchar: "4",
297
+ selectionChangeCallback: function selectionChangeCallback(e) {
298
+ console.log('selectionChangeCallback');
299
+ },
300
+ textChangeCallback: function textChangeCallback(e) {
301
+ console.log('textChangeCallback');
302
+ },
303
+ searchable: true,
304
+ options: [{
305
+ type: 'selectable',
306
+ value: '1',
307
+ label: 'One',
308
+ display: 'item'
309
+ }, {
310
+ type: 'selectable',
311
+ value: '2',
312
+ label: 'two',
313
+ display: 'item'
314
+ }, {
315
+ type: 'disabled',
316
+ value: '21',
317
+ label: 'two1',
318
+ display: 'item'
319
+ }, {
320
+ display: 'divider'
321
+ }, {
322
+ type: 'selectable',
323
+ value: '3',
324
+ label: 'Three',
325
+ display: 'item'
326
+ }]
327
+ }))));
370
328
  });
371
-
372
- (0, _react3.storiesOf)('CustomSelect').add('dark theme', function () {
373
- return _react2.default.createElement(
374
- _storyHelpers.Example,
375
- { title: 'Appearances Light', background: 'dark' },
376
- _react2.default.createElement(
377
- _storyHelpers.Stack,
378
- null,
379
- _react2.default.createElement(
380
- 'div',
381
- { style: { width: '150px' } },
382
- _react2.default.createElement(
383
- _components.CustomSelect,
384
- {
385
- theme: 'dark',
386
- type: 'dropdown',
387
- label: 'Movies',
388
- placeholder: '-Select-',
389
- minchar: '4',
390
- selectionChangeCallback: function selectionChangeCallback(e) {
391
- console.log('selectionChangeCallback');
392
- },
393
- textChangeCallback: function textChangeCallback(e) {
394
- console.log('textChangeCallback');
395
- },
396
- keyboardAction: true,
397
- options: [{
398
- type: 'selectable',
399
- value: '1',
400
- label: 'One',
401
- display: 'item'
402
- }, {
403
- label: 'group1',
404
- children: [{
405
- type: 'selectable',
406
- value: '122',
407
- label: 'One2 1',
408
- display: 'item'
409
- }, {
410
- type: 'selectable',
411
- value: '123',
412
- label: 'One2 2',
413
- display: 'item'
414
- }, {
415
- label: 'group1 2',
416
- children: [{
417
- type: 'selectable',
418
- value: '1221',
419
- label: 'One2 11',
420
- display: 'item'
421
- }, {
422
- type: 'selectable',
423
- value: '1232',
424
- label: 'One2 22',
425
- display: 'item'
426
- }]
427
- }, {
428
- type: 'selectable',
429
- value: '125',
430
- label: 'One2 4',
431
- display: 'item'
432
- }]
433
- }, {
434
- type: 'disabled',
435
- value: '21',
436
- label: 'two1',
437
- display: 'item'
438
- }, {
439
- display: 'divider'
440
- }, {
441
- type: 'selectable',
442
- value: '3',
443
- label: 'Three',
444
- display: 'item'
445
- }]
446
- },
447
- _react2.default.createElement(
448
- 'div',
449
- { style: { width: '100%', background: 'teal' } },
450
- _react2.default.createElement(
451
- 'div',
452
- null,
453
- 'Some DOM elements'
454
- ),
455
- _react2.default.createElement(
456
- 'ul',
457
- null,
458
- _react2.default.createElement(
459
- 'li',
460
- null,
461
- 'hello'
462
- )
463
- )
464
- )
465
- )
466
- )
467
- ),
468
- _react2.default.createElement(
469
- _storyHelpers.Stack,
470
- null,
471
- _react2.default.createElement(
472
- 'div',
473
- { style: { width: '300px' } },
474
- _react2.default.createElement(_components.CustomSelect, {
475
- theme: 'dark',
476
- type: 'select',
477
- label: 'Groups',
478
- placeholder: '-- Choose --',
479
- minchar: '4',
480
- selectionChangeCallback: function selectionChangeCallback(e) {
481
- console.log('selectionChangeCallback');
482
- },
483
- textChangeCallback: function textChangeCallback(e) {
484
- console.log('textChangeCallback');
485
- },
486
- options: [{
487
- label: 'INGEST',
488
- value: '110',
489
- children: [{
490
- type: 'selectable',
491
- value: '10',
492
- label: 'All',
493
- display: 'item'
494
- }]
495
- }, {
496
- label: 'ONBOARDING',
497
- value: '210',
498
- children: [{
499
- type: 'selectable',
500
- value: '20',
501
- label: 'All',
502
- display: 'item'
503
- }, {
504
- type: 'selectable',
505
- value: '21',
506
- label: 'Add Promo',
507
- display: 'item'
508
- }, {
509
- type: 'selectable',
510
- value: '22',
511
- label: 'Add Tvc',
512
- display: 'item'
513
- }, {
514
- type: 'selectable',
515
- value: '23',
516
- label: 'Add Clip',
517
- display: 'item'
518
- }]
519
- }, {
520
- label: 'TAGGING',
521
- value: '310',
522
- children: [{
523
- type: 'selectable',
524
- value: '30',
525
- label: 'All',
526
- display: 'item'
527
- }]
528
- }, {
529
- label: 'SCHEDULER',
530
- value: '410',
531
- children: [{
532
- type: 'selectable',
533
- value: '40',
534
- label: 'All',
535
- display: 'item'
536
- }, {
537
- type: 'selectable',
538
- value: '41',
539
- label: 'Some Label Text',
540
- display: 'item'
541
- }, {
542
- type: 'selectable',
543
- value: '42',
544
- label: 'Some Label Text',
545
- display: 'item'
546
- }]
547
- }]
548
- })
549
- )
550
- ),
551
- _react2.default.createElement(
552
- _storyHelpers.Stack,
553
- null,
554
- _react2.default.createElement(
555
- 'div',
556
- { style: { width: '150px' } },
557
- _react2.default.createElement(_components.CustomSelect, {
558
- theme: 'dark',
559
- type: 'multiselect',
560
- label: 'Movies',
561
- placeholder: '-Select-',
562
- minchar: '4',
563
- selectionChangeCallback: function selectionChangeCallback(e) {
564
- console.log('selectionChangeCallback');
565
- },
566
- textChangeCallback: function textChangeCallback(e) {
567
- console.log('textChangeCallback');
568
- },
569
- searchable: true,
570
- options: [{
571
- type: 'selectable',
572
- value: '1',
573
- label: 'One',
574
- display: 'item',
575
- data: {
576
- name: 'One>name',
577
- id: 'One>id'
578
- }
579
- }, {
580
- type: 'selectable',
581
- value: '2',
582
- label: 'two',
583
- display: 'item',
584
- data: {
585
- name: 'two>name',
586
- id: 'two>id'
587
- }
588
- }, {
589
- type: 'disabled',
590
- value: '21',
591
- label: 'two1',
592
- display: 'item',
593
- data: {
594
- name: 'two1>name',
595
- id: 'two1>id'
596
- }
597
- }, {
598
- display: 'divider'
599
- }, {
600
- type: 'selectable',
601
- value: '3',
602
- label: 'Three',
603
- display: 'item',
604
- data: {
605
- name: 'Three>name',
606
- id: 'Three>id'
607
- }
608
- }]
609
- })
610
- )
611
- )
612
- );
329
+ (0, _react2.storiesOf)('CustomSelect').add('dark theme', function () {
330
+ return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
331
+ title: "Appearances Light",
332
+ background: "dark"
333
+ }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement("div", {
334
+ style: {
335
+ width: '150px'
336
+ }
337
+ }, /*#__PURE__*/_react["default"].createElement(_components.CustomSelect, {
338
+ theme: "dark",
339
+ type: "dropdown",
340
+ label: "Movies",
341
+ placeholder: "-Select-",
342
+ minchar: "4",
343
+ selectionChangeCallback: function selectionChangeCallback(e) {
344
+ console.log('selectionChangeCallback');
345
+ },
346
+ textChangeCallback: function textChangeCallback(e) {
347
+ console.log('textChangeCallback');
348
+ },
349
+ keyboardAction: true,
350
+ options: [{
351
+ type: 'selectable',
352
+ value: '1',
353
+ label: 'One',
354
+ display: 'item'
355
+ }, {
356
+ label: 'group1',
357
+ children: [{
358
+ type: 'selectable',
359
+ value: '122',
360
+ label: 'One2 1',
361
+ display: 'item'
362
+ }, {
363
+ type: 'selectable',
364
+ value: '123',
365
+ label: 'One2 2',
366
+ display: 'item'
367
+ }, {
368
+ label: 'group1 2',
369
+ children: [{
370
+ type: 'selectable',
371
+ value: '1221',
372
+ label: 'One2 11',
373
+ display: 'item'
374
+ }, {
375
+ type: 'selectable',
376
+ value: '1232',
377
+ label: 'One2 22',
378
+ display: 'item'
379
+ }]
380
+ }, {
381
+ type: 'selectable',
382
+ value: '125',
383
+ label: 'One2 4',
384
+ display: 'item'
385
+ }]
386
+ }, {
387
+ type: 'disabled',
388
+ value: '21',
389
+ label: 'two1',
390
+ display: 'item'
391
+ }, {
392
+ display: 'divider'
393
+ }, {
394
+ type: 'selectable',
395
+ value: '3',
396
+ label: 'Three',
397
+ display: 'item'
398
+ }]
399
+ }, /*#__PURE__*/_react["default"].createElement("div", {
400
+ style: {
401
+ width: '100%',
402
+ background: 'teal'
403
+ }
404
+ }, /*#__PURE__*/_react["default"].createElement("div", null, "Some DOM elements"), /*#__PURE__*/_react["default"].createElement("ul", null, /*#__PURE__*/_react["default"].createElement("li", null, "hello")))))), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement("div", {
405
+ style: {
406
+ width: '300px'
407
+ }
408
+ }, /*#__PURE__*/_react["default"].createElement(_components.CustomSelect, {
409
+ theme: "dark",
410
+ type: "select",
411
+ label: "Groups",
412
+ placeholder: "-- Choose --",
413
+ minchar: "4",
414
+ selectionChangeCallback: function selectionChangeCallback(e) {
415
+ console.log('selectionChangeCallback');
416
+ },
417
+ textChangeCallback: function textChangeCallback(e) {
418
+ console.log('textChangeCallback');
419
+ },
420
+ options: [{
421
+ label: 'INGEST',
422
+ value: '110',
423
+ children: [{
424
+ type: 'selectable',
425
+ value: '10',
426
+ label: 'All',
427
+ display: 'item'
428
+ }]
429
+ }, {
430
+ label: 'ONBOARDING',
431
+ value: '210',
432
+ children: [{
433
+ type: 'selectable',
434
+ value: '20',
435
+ label: 'All',
436
+ display: 'item'
437
+ }, {
438
+ type: 'selectable',
439
+ value: '21',
440
+ label: 'Add Promo',
441
+ display: 'item'
442
+ }, {
443
+ type: 'selectable',
444
+ value: '22',
445
+ label: 'Add Tvc',
446
+ display: 'item'
447
+ }, {
448
+ type: 'selectable',
449
+ value: '23',
450
+ label: 'Add Clip',
451
+ display: 'item'
452
+ }]
453
+ }, {
454
+ label: 'TAGGING',
455
+ value: '310',
456
+ children: [{
457
+ type: 'selectable',
458
+ value: '30',
459
+ label: 'All',
460
+ display: 'item'
461
+ }]
462
+ }, {
463
+ label: 'SCHEDULER',
464
+ value: '410',
465
+ children: [{
466
+ type: 'selectable',
467
+ value: '40',
468
+ label: 'All',
469
+ display: 'item'
470
+ }, {
471
+ type: 'selectable',
472
+ value: '41',
473
+ label: 'Some Label Text',
474
+ display: 'item'
475
+ }, {
476
+ type: 'selectable',
477
+ value: '42',
478
+ label: 'Some Label Text',
479
+ display: 'item'
480
+ }]
481
+ }]
482
+ }))), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement("div", {
483
+ style: {
484
+ width: '150px'
485
+ }
486
+ }, /*#__PURE__*/_react["default"].createElement(_components.CustomSelect, {
487
+ theme: "dark",
488
+ type: "multiselect",
489
+ label: "Movies",
490
+ placeholder: "-Select-",
491
+ minchar: "4",
492
+ selectionChangeCallback: function selectionChangeCallback(e) {
493
+ console.log('selectionChangeCallback');
494
+ },
495
+ textChangeCallback: function textChangeCallback(e) {
496
+ console.log('textChangeCallback');
497
+ },
498
+ searchable: true,
499
+ options: [{
500
+ type: 'selectable',
501
+ value: '1',
502
+ label: 'One',
503
+ display: 'item',
504
+ data: {
505
+ name: 'One>name',
506
+ id: 'One>id'
507
+ }
508
+ }, {
509
+ type: 'selectable',
510
+ value: '2',
511
+ label: 'two',
512
+ display: 'item',
513
+ data: {
514
+ name: 'two>name',
515
+ id: 'two>id'
516
+ }
517
+ }, {
518
+ type: 'disabled',
519
+ value: '21',
520
+ label: 'two1',
521
+ display: 'item',
522
+ data: {
523
+ name: 'two1>name',
524
+ id: 'two1>id'
525
+ }
526
+ }, {
527
+ display: 'divider'
528
+ }, {
529
+ type: 'selectable',
530
+ value: '3',
531
+ label: 'Three',
532
+ display: 'item',
533
+ data: {
534
+ name: 'Three>name',
535
+ id: 'Three>id'
536
+ }
537
+ }]
538
+ }))));
613
539
  });
614
-
615
- (0, _react3.storiesOf)('CustomSelect').add('nexc theme', function () {
616
- return _react2.default.createElement(
617
- _storyHelpers.Example,
618
- { title: 'Appearances Light', background: 'dark' },
619
- _react2.default.createElement(
620
- _storyHelpers.Stack,
621
- null,
622
- _react2.default.createElement(
623
- 'div',
624
- { style: { width: '150px' } },
625
- _react2.default.createElement(
626
- _components.CustomSelect,
627
- {
628
- theme: 'nexc',
629
- type: 'dropdown',
630
- label: 'Movies',
631
- placeholder: '-Select-',
632
- minchar: '4',
633
- selectionChangeCallback: function selectionChangeCallback(e) {
634
- console.log('selectionChangeCallback');
635
- },
636
- textChangeCallback: function textChangeCallback(e) {
637
- console.log('textChangeCallback');
638
- },
639
- keyboardAction: true,
640
- options: [{
641
- type: 'selectable',
642
- value: '1',
643
- label: 'One',
644
- display: 'item'
645
- }, {
646
- label: 'group1',
647
- children: [{
648
- type: 'selectable',
649
- value: '122',
650
- label: 'One2 1',
651
- display: 'item'
652
- }, {
653
- type: 'selectable',
654
- value: '123',
655
- label: 'One2 2',
656
- display: 'item'
657
- }, {
658
- label: 'group1 2',
659
- children: [{
660
- type: 'selectable',
661
- value: '1221',
662
- label: 'One2 11',
663
- display: 'item'
664
- }, {
665
- type: 'selectable',
666
- value: '1232',
667
- label: 'One2 22',
668
- display: 'item'
669
- }]
670
- }, {
671
- type: 'selectable',
672
- value: '125',
673
- label: 'One2 4',
674
- display: 'item'
675
- }]
676
- }, {
677
- type: 'disabled',
678
- value: '21',
679
- label: 'two1',
680
- display: 'item'
681
- }, {
682
- display: 'divider'
683
- }, {
684
- type: 'selectable',
685
- value: '3',
686
- label: 'Three',
687
- display: 'item'
688
- }]
689
- },
690
- _react2.default.createElement(
691
- 'div',
692
- { style: { width: '100%', background: 'teal' } },
693
- _react2.default.createElement(
694
- 'div',
695
- null,
696
- 'Some DOM elements'
697
- ),
698
- _react2.default.createElement(
699
- 'ul',
700
- null,
701
- _react2.default.createElement(
702
- 'li',
703
- null,
704
- 'hello'
705
- )
706
- )
707
- )
708
- )
709
- )
710
- ),
711
- _react2.default.createElement(
712
- _storyHelpers.Stack,
713
- null,
714
- _react2.default.createElement(
715
- 'div',
716
- { style: { width: '300px' } },
717
- _react2.default.createElement(_components.CustomSelect, {
718
- theme: 'nexc',
719
- type: 'select',
720
- label: 'Groups',
721
- placeholder: '-- Choose --',
722
- minchar: '4',
723
- selectionChangeCallback: function selectionChangeCallback(e) {
724
- console.log('selectionChangeCallback');
725
- },
726
- textChangeCallback: function textChangeCallback(e) {
727
- console.log('textChangeCallback');
728
- },
729
- options: [{
730
- label: 'INGEST',
731
- value: '110',
732
- children: [{
733
- type: 'selectable',
734
- value: '10',
735
- label: 'All',
736
- display: 'item'
737
- }]
738
- }, {
739
- label: 'ONBOARDING',
740
- value: '210',
741
- children: [{
742
- type: 'selectable',
743
- value: '20',
744
- label: 'All',
745
- display: 'item'
746
- }, {
747
- type: 'selectable',
748
- value: '21',
749
- label: 'Add Promo',
750
- display: 'item'
751
- }, {
752
- type: 'selectable',
753
- value: '22',
754
- label: 'Add Tvc',
755
- display: 'item'
756
- }, {
757
- type: 'selectable',
758
- value: '23',
759
- label: 'Add Clip',
760
- display: 'item'
761
- }]
762
- }, {
763
- label: 'TAGGING',
764
- value: '310',
765
- children: [{
766
- type: 'selectable',
767
- value: '30',
768
- label: 'All',
769
- display: 'item'
770
- }]
771
- }, {
772
- label: 'SCHEDULER',
773
- value: '410',
774
- children: [{
775
- type: 'selectable',
776
- value: '40',
777
- label: 'All',
778
- display: 'item'
779
- }, {
780
- type: 'selectable',
781
- value: '41',
782
- label: 'Some Label Text',
783
- display: 'item'
784
- }, {
785
- type: 'selectable',
786
- value: '42',
787
- label: 'Some Label Text',
788
- display: 'item'
789
- }]
790
- }]
791
- })
792
- )
793
- ),
794
- _react2.default.createElement(
795
- _storyHelpers.Stack,
796
- null,
797
- _react2.default.createElement(
798
- 'div',
799
- { style: { width: '150px' } },
800
- _react2.default.createElement(_components.CustomSelect, {
801
- theme: 'nexc',
802
- type: 'multiselect',
803
- label: 'Movies',
804
- placeholder: '-Select-',
805
- minchar: '4',
806
- selectionChangeCallback: function selectionChangeCallback(e) {
807
- console.log('selectionChangeCallback');
808
- },
809
- textChangeCallback: function textChangeCallback(e) {
810
- console.log('textChangeCallback');
811
- },
812
- searchable: true,
813
- options: [{
814
- type: 'selectable',
815
- value: '1',
816
- label: 'One',
817
- display: 'item',
818
- data: {
819
- name: 'One>name',
820
- id: 'One>id'
821
- }
822
- }, {
823
- type: 'selectable',
824
- value: '2',
825
- label: 'two',
826
- display: 'item',
827
- data: {
828
- name: 'two>name',
829
- id: 'two>id'
830
- }
831
- }, {
832
- type: 'disabled',
833
- value: '21',
834
- label: 'two1',
835
- display: 'item',
836
- data: {
837
- name: 'two1>name',
838
- id: 'two1>id'
839
- }
840
- }, {
841
- display: 'divider'
842
- }, {
843
- type: 'selectable',
844
- value: '3',
845
- label: 'Three',
846
- display: 'item',
847
- data: {
848
- name: 'Three>name',
849
- id: 'Three>id'
850
- }
851
- }]
852
- })
853
- )
854
- )
855
- );
540
+ (0, _react2.storiesOf)('CustomSelect').add('nexc theme', function () {
541
+ return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
542
+ title: "Appearances Light",
543
+ background: "dark"
544
+ }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement("div", {
545
+ style: {
546
+ width: '150px'
547
+ }
548
+ }, /*#__PURE__*/_react["default"].createElement(_components.CustomSelect, {
549
+ theme: "nexc",
550
+ type: "dropdown",
551
+ label: "Movies",
552
+ placeholder: "-Select-",
553
+ minchar: "4",
554
+ selectionChangeCallback: function selectionChangeCallback(e) {
555
+ console.log('selectionChangeCallback');
556
+ },
557
+ textChangeCallback: function textChangeCallback(e) {
558
+ console.log('textChangeCallback');
559
+ },
560
+ keyboardAction: true,
561
+ options: [{
562
+ type: 'selectable',
563
+ value: '1',
564
+ label: 'One',
565
+ display: 'item'
566
+ }, {
567
+ label: 'group1',
568
+ children: [{
569
+ type: 'selectable',
570
+ value: '122',
571
+ label: 'One2 1',
572
+ display: 'item'
573
+ }, {
574
+ type: 'selectable',
575
+ value: '123',
576
+ label: 'One2 2',
577
+ display: 'item'
578
+ }, {
579
+ label: 'group1 2',
580
+ children: [{
581
+ type: 'selectable',
582
+ value: '1221',
583
+ label: 'One2 11',
584
+ display: 'item'
585
+ }, {
586
+ type: 'selectable',
587
+ value: '1232',
588
+ label: 'One2 22',
589
+ display: 'item'
590
+ }]
591
+ }, {
592
+ type: 'selectable',
593
+ value: '125',
594
+ label: 'One2 4',
595
+ display: 'item'
596
+ }]
597
+ }, {
598
+ type: 'disabled',
599
+ value: '21',
600
+ label: 'two1',
601
+ display: 'item'
602
+ }, {
603
+ display: 'divider'
604
+ }, {
605
+ type: 'selectable',
606
+ value: '3',
607
+ label: 'Three',
608
+ display: 'item'
609
+ }]
610
+ }, /*#__PURE__*/_react["default"].createElement("div", {
611
+ style: {
612
+ width: '100%',
613
+ background: 'teal'
614
+ }
615
+ }, /*#__PURE__*/_react["default"].createElement("div", null, "Some DOM elements"), /*#__PURE__*/_react["default"].createElement("ul", null, /*#__PURE__*/_react["default"].createElement("li", null, "hello")))))), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement("div", {
616
+ style: {
617
+ width: '300px'
618
+ }
619
+ }, /*#__PURE__*/_react["default"].createElement(_components.CustomSelect, {
620
+ theme: "nexc",
621
+ type: "select",
622
+ label: "Groups",
623
+ placeholder: "-- Choose --",
624
+ minchar: "4",
625
+ selectionChangeCallback: function selectionChangeCallback(e) {
626
+ console.log('selectionChangeCallback');
627
+ },
628
+ textChangeCallback: function textChangeCallback(e) {
629
+ console.log('textChangeCallback');
630
+ },
631
+ options: [{
632
+ label: 'INGEST',
633
+ value: '110',
634
+ children: [{
635
+ type: 'selectable',
636
+ value: '10',
637
+ label: 'All',
638
+ display: 'item'
639
+ }]
640
+ }, {
641
+ label: 'ONBOARDING',
642
+ value: '210',
643
+ children: [{
644
+ type: 'selectable',
645
+ value: '20',
646
+ label: 'All',
647
+ display: 'item'
648
+ }, {
649
+ type: 'selectable',
650
+ value: '21',
651
+ label: 'Add Promo',
652
+ display: 'item'
653
+ }, {
654
+ type: 'selectable',
655
+ value: '22',
656
+ label: 'Add Tvc',
657
+ display: 'item'
658
+ }, {
659
+ type: 'selectable',
660
+ value: '23',
661
+ label: 'Add Clip',
662
+ display: 'item'
663
+ }]
664
+ }, {
665
+ label: 'TAGGING',
666
+ value: '310',
667
+ children: [{
668
+ type: 'selectable',
669
+ value: '30',
670
+ label: 'All',
671
+ display: 'item'
672
+ }]
673
+ }, {
674
+ label: 'SCHEDULER',
675
+ value: '410',
676
+ children: [{
677
+ type: 'selectable',
678
+ value: '40',
679
+ label: 'All',
680
+ display: 'item'
681
+ }, {
682
+ type: 'selectable',
683
+ value: '41',
684
+ label: 'Some Label Text',
685
+ display: 'item'
686
+ }, {
687
+ type: 'selectable',
688
+ value: '42',
689
+ label: 'Some Label Text',
690
+ display: 'item'
691
+ }]
692
+ }]
693
+ }))), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement("div", {
694
+ style: {
695
+ width: '150px'
696
+ }
697
+ }, /*#__PURE__*/_react["default"].createElement(_components.CustomSelect, {
698
+ theme: "nexc",
699
+ type: "multiselect",
700
+ label: "Movies",
701
+ placeholder: "-Select-",
702
+ minchar: "4",
703
+ selectionChangeCallback: function selectionChangeCallback(e) {
704
+ console.log('selectionChangeCallback');
705
+ },
706
+ textChangeCallback: function textChangeCallback(e) {
707
+ console.log('textChangeCallback');
708
+ },
709
+ searchable: true,
710
+ options: [{
711
+ type: 'selectable',
712
+ value: '1',
713
+ label: 'One',
714
+ display: 'item',
715
+ data: {
716
+ name: 'One>name',
717
+ id: 'One>id'
718
+ }
719
+ }, {
720
+ type: 'selectable',
721
+ value: '2',
722
+ label: 'two',
723
+ display: 'item',
724
+ data: {
725
+ name: 'two>name',
726
+ id: 'two>id'
727
+ }
728
+ }, {
729
+ type: 'disabled',
730
+ value: '21',
731
+ label: 'two1',
732
+ display: 'item',
733
+ data: {
734
+ name: 'two1>name',
735
+ id: 'two1>id'
736
+ }
737
+ }, {
738
+ display: 'divider'
739
+ }, {
740
+ type: 'selectable',
741
+ value: '3',
742
+ label: 'Three',
743
+ display: 'item',
744
+ data: {
745
+ name: 'Three>name',
746
+ id: 'Three>id'
747
+ }
748
+ }]
749
+ }))));
856
750
  });