superdesk-ui-framework 3.0.1-beta.12 → 3.0.1-beta.14

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 (29) hide show
  1. package/app/styles/_table-list.scss +1 -0
  2. package/app/styles/dropdowns/_basic-dropdown.scss +6 -0
  3. package/app-typescript/components/Dropdown.tsx +106 -78
  4. package/app-typescript/components/DurationInput.tsx +14 -4
  5. package/app-typescript/components/Lists/ContentList.tsx +28 -4
  6. package/app-typescript/components/Lists/TableList.tsx +11 -9
  7. package/dist/examples.bundle.js +2267 -1761
  8. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +3 -9
  9. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +9 -19
  10. package/dist/react/ContentList.tsx +2 -10
  11. package/dist/react/Dropdowns.tsx +580 -48
  12. package/dist/react/TableList.tsx +28 -30
  13. package/dist/superdesk-ui.bundle.css +8 -3
  14. package/dist/superdesk-ui.bundle.js +1294 -1219
  15. package/dist/vendor.bundle.js +14 -14
  16. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +3 -9
  17. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +9 -19
  18. package/examples/pages/react/ContentList.tsx +2 -10
  19. package/examples/pages/react/Dropdowns.tsx +580 -48
  20. package/examples/pages/react/TableList.tsx +28 -30
  21. package/package.json +1 -1
  22. package/react/components/Dropdown.d.ts +4 -4
  23. package/react/components/Dropdown.js +44 -26
  24. package/react/components/DurationInput.d.ts +1 -1
  25. package/react/components/DurationInput.js +14 -4
  26. package/react/components/Lists/ContentList.d.ts +5 -0
  27. package/react/components/Lists/ContentList.js +36 -15
  28. package/react/components/Lists/TableList.d.ts +5 -5
  29. package/react/components/Lists/TableList.js +6 -4
@@ -67,27 +67,460 @@ export default class DropdownDoc extends React.Component {
67
67
  <p className='docs-page__paragraph'>Add prop value <code>append = true</code> to the dropdown element to append to the inner dropdown menu to the body. This is useful when the dropdown button is inside a div with overflow: hidden, and the menu would otherwise be hidden.</p>
68
68
  <Markup.ReactMarkup>
69
69
  <Markup.ReactMarkupPreview>
70
- <Dropdown
71
- append={true}
72
- items={[
73
- {
74
- type: 'group', label: 'actions', items: [
75
- 'divider',
76
- { label: 'Edit', icon: 'pencil', onSelect: () => 1 },
77
- { label: 'Copy', icon: 'copy', onSelect: () => 1 },
78
- { label: 'Delete', icon: 'trash', onSelect: () => 1 },
79
- 'divider',
80
- ]
81
- },
82
- {
83
- type: 'group', label: 'actions 2', items: [
84
- { label: 'Download', icon: 'download', onSelect: () => 1 },
85
- { label: 'Print', icon: 'print', onSelect: () => 1 },
86
- ]
87
- }
88
- ]}>
89
- Drop append to body
90
- </Dropdown>
70
+ <Dropdown
71
+ append={true}
72
+ header={[
73
+ {
74
+ type: 'group',
75
+ label: 'Create new',
76
+ items: [
77
+ {
78
+ type: 'submenu',
79
+ label: 'Rundown',
80
+ icon: 'plus-sign',
81
+ items: [
82
+ {
83
+ type: 'submenu',
84
+ label: 'Show 1',
85
+ icon: 'plus-sign',
86
+ items: [
87
+ {
88
+ type: 'submenu',
89
+ label: 'Show 1',
90
+ icon: 'plus-sign',
91
+ items: []
92
+ }
93
+ ],
94
+ },
95
+ {
96
+ type: 'submenu',
97
+ label: 'Show 2',
98
+ icon: 'plus-sign',
99
+
100
+ items: [
101
+
102
+ ],
103
+ },
104
+ ],
105
+ },
106
+ ],
107
+ },
108
+ ]}
109
+ items={[
110
+ {
111
+ type: 'group',
112
+ label: 'Create new',
113
+ items: [
114
+ {
115
+ type: 'submenu',
116
+ label: 'Rundown',
117
+ icon: 'plus-sign',
118
+
119
+ items: [
120
+ {
121
+ type: 'submenu',
122
+ label: 'Show 1',
123
+ icon: 'plus-sign',
124
+ items: [
125
+
126
+ ],
127
+ },
128
+ {
129
+ type: 'submenu',
130
+ label: 'Show 2',
131
+ icon: 'plus-sign',
132
+ items: [
133
+
134
+ ],
135
+ },
136
+ ],
137
+ },
138
+ {
139
+ type: 'submenu',
140
+ label: 'Rundown',
141
+ icon: 'plus-sign',
142
+
143
+ items: [
144
+ {
145
+ type: 'submenu',
146
+ label: 'Show 1',
147
+ icon: 'plus-sign',
148
+ items: [
149
+
150
+ ],
151
+ },
152
+ {
153
+ type: 'submenu',
154
+ label: 'Show 2',
155
+ icon: 'plus-sign',
156
+ items: [
157
+
158
+ ],
159
+ },
160
+ ],
161
+ },
162
+ {
163
+ type: 'submenu',
164
+ label: 'Rundown',
165
+ icon: 'plus-sign',
166
+
167
+ items: [
168
+ {
169
+ type: 'submenu',
170
+ label: 'Show 1',
171
+ icon: 'plus-sign',
172
+ items: [
173
+
174
+ ],
175
+ },
176
+ {
177
+ type: 'submenu',
178
+ label: 'Show 2',
179
+ icon: 'plus-sign',
180
+ items: [
181
+
182
+ ],
183
+ },
184
+ ],
185
+ },
186
+ {
187
+ type: 'submenu',
188
+ label: 'Rundown',
189
+ icon: 'plus-sign',
190
+
191
+ items: [
192
+ {
193
+ type: 'submenu',
194
+ label: 'Show 1',
195
+ icon: 'plus-sign',
196
+ items: [
197
+
198
+ ],
199
+ },
200
+ {
201
+ type: 'submenu',
202
+ label: 'Show 2',
203
+ icon: 'plus-sign',
204
+ items: [
205
+
206
+ ],
207
+ },
208
+ ],
209
+ },
210
+ {
211
+ type: 'submenu',
212
+ label: 'Rundown',
213
+ icon: 'plus-sign',
214
+
215
+ items: [
216
+ {
217
+ type: 'submenu',
218
+ label: 'Show 1',
219
+ icon: 'plus-sign',
220
+ items: [
221
+
222
+ ],
223
+ },
224
+ {
225
+ type: 'submenu',
226
+ label: 'Show 2',
227
+ icon: 'plus-sign',
228
+ items: [
229
+
230
+ ],
231
+ },
232
+ ],
233
+ },
234
+ {
235
+ type: 'submenu',
236
+ label: 'Rundown',
237
+ icon: 'plus-sign',
238
+
239
+ items: [
240
+ {
241
+ type: 'submenu',
242
+ label: 'Show 1',
243
+ icon: 'plus-sign',
244
+ items: [
245
+
246
+ ],
247
+ },
248
+ {
249
+ type: 'submenu',
250
+ label: 'Show 2',
251
+ icon: 'plus-sign',
252
+ items: [
253
+
254
+ ],
255
+ },
256
+ ],
257
+ },
258
+ {
259
+ type: 'submenu',
260
+ label: 'Rundown',
261
+ icon: 'plus-sign',
262
+
263
+ items: [
264
+ {
265
+ type: 'submenu',
266
+ label: 'Show 1',
267
+ icon: 'plus-sign',
268
+ items: [
269
+
270
+ ],
271
+ },
272
+ {
273
+ type: 'submenu',
274
+ label: 'Show 2',
275
+ icon: 'plus-sign',
276
+ items: [
277
+
278
+ ],
279
+ },
280
+ ],
281
+ },
282
+ {
283
+ type: 'submenu',
284
+ label: 'Rundown',
285
+ icon: 'plus-sign',
286
+
287
+ items: [
288
+ {
289
+ type: 'submenu',
290
+ label: 'Show 1',
291
+ icon: 'plus-sign',
292
+ items: [
293
+
294
+ ],
295
+ },
296
+ {
297
+ type: 'submenu',
298
+ label: 'Show 2',
299
+ icon: 'plus-sign',
300
+ items: [
301
+
302
+ ],
303
+ },
304
+ ],
305
+ },
306
+ {
307
+ type: 'submenu',
308
+ label: 'Rundown',
309
+ icon: 'plus-sign',
310
+
311
+ items: [
312
+ {
313
+ type: 'submenu',
314
+ label: 'Show 1',
315
+ icon: 'plus-sign',
316
+ items: [
317
+
318
+ ],
319
+ },
320
+ {
321
+ type: 'submenu',
322
+ label: 'Show 2',
323
+ icon: 'plus-sign',
324
+ items: [
325
+
326
+ ],
327
+ },
328
+ ],
329
+ },
330
+ {
331
+ type: 'submenu',
332
+ label: 'Rundown',
333
+ icon: 'plus-sign',
334
+
335
+ items: [
336
+ {
337
+ type: 'submenu',
338
+ label: 'Show 1',
339
+ icon: 'plus-sign',
340
+ items: [
341
+
342
+ ],
343
+ },
344
+ {
345
+ type: 'submenu',
346
+ label: 'Show 2',
347
+ icon: 'plus-sign',
348
+ items: [
349
+
350
+ ],
351
+ },
352
+ ],
353
+ },
354
+ {
355
+ type: 'submenu',
356
+ label: 'Rundown',
357
+ icon: 'plus-sign',
358
+
359
+ items: [
360
+ {
361
+ type: 'submenu',
362
+ label: 'Show 1',
363
+ icon: 'plus-sign',
364
+ items: [
365
+
366
+ ],
367
+ },
368
+ {
369
+ type: 'submenu',
370
+ label: 'Show 2',
371
+ icon: 'plus-sign',
372
+ items: [
373
+
374
+ ],
375
+ },
376
+ ],
377
+ },
378
+ {
379
+ type: 'submenu',
380
+ label: 'Rundown',
381
+ icon: 'plus-sign',
382
+
383
+ items: [
384
+ {
385
+ type: 'submenu',
386
+ label: 'Show 1',
387
+ icon: 'plus-sign',
388
+ items: [
389
+
390
+ ],
391
+ },
392
+ {
393
+ type: 'submenu',
394
+ label: 'Show 2',
395
+ icon: 'plus-sign',
396
+ items: [
397
+
398
+ ],
399
+ },
400
+ ],
401
+ },
402
+ {
403
+ type: 'submenu',
404
+ label: 'Rundown',
405
+ icon: 'plus-sign',
406
+
407
+ items: [
408
+ {
409
+ type: 'submenu',
410
+ label: 'Show 1',
411
+ icon: 'plus-sign',
412
+ items: [
413
+
414
+ ],
415
+ },
416
+ {
417
+ type: 'submenu',
418
+ label: 'Show 2',
419
+ icon: 'plus-sign',
420
+ items: [
421
+
422
+ ],
423
+ },
424
+ ],
425
+ },
426
+ {
427
+ type: 'submenu',
428
+ label: 'Rundown',
429
+ icon: 'plus-sign',
430
+
431
+ items: [
432
+ {
433
+ type: 'submenu',
434
+ label: 'Show 1',
435
+ icon: 'plus-sign',
436
+
437
+ items: [
438
+
439
+ ],
440
+ },
441
+ {
442
+ type: 'submenu',
443
+ label: 'Show 2',
444
+ icon: 'plus-sign',
445
+ items: [
446
+
447
+ ],
448
+ },
449
+ ],
450
+ },
451
+ {
452
+ type: 'submenu',
453
+ label: 'Rundown',
454
+ icon: 'plus-sign',
455
+
456
+ items: [
457
+ {
458
+ type: 'submenu',
459
+ label: 'Show 1',
460
+ icon: 'plus-sign',
461
+ items: [
462
+
463
+ ],
464
+ },
465
+ {
466
+ type: 'submenu',
467
+ label: 'Show 2',
468
+ icon: 'plus-sign',
469
+ items: [
470
+
471
+ ],
472
+ },
473
+ ],
474
+ },
475
+
476
+
477
+
478
+ ],
479
+ },
480
+ ]}
481
+ footer={[
482
+ {
483
+ type: 'group',
484
+ items: [
485
+ {
486
+ icon: 'rundown',
487
+ label: 'Create new Show',
488
+ onSelect: () => console.log('aaa'),
489
+ },
490
+ ],
491
+ },
492
+ {
493
+ type: 'group',
494
+ label: 'Create new',
495
+ items: [
496
+ {
497
+ type: 'submenu',
498
+ label: 'Rundown',
499
+ icon: 'plus-sign',
500
+ items: [
501
+ {
502
+ type: 'submenu',
503
+ label: 'Show 1',
504
+ icon: 'plus-sign',
505
+ items: [
506
+
507
+ ],
508
+ },
509
+ {
510
+ type: 'submenu',
511
+ label: 'Show 2',
512
+ icon: 'plus-sign',
513
+ items: [
514
+
515
+ ],
516
+ },
517
+ ],
518
+ },
519
+ ],
520
+ },
521
+ ]}
522
+ >
523
+ </Dropdown>
91
524
  </Markup.ReactMarkupPreview>
92
525
  <Markup.ReactMarkupCode>{`
93
526
  <Dropdown
@@ -110,7 +543,7 @@ export default class DropdownDoc extends React.Component {
110
543
  The submenu opens by default on the right side of the parent menu.</p>
111
544
  <Markup.ReactMarkup>
112
545
  <Markup.ReactMarkupPreview>
113
- <Dropdown
546
+ <Dropdown
114
547
  items={[
115
548
  {
116
549
  type: 'group', label: 'actions', items: [
@@ -207,8 +640,8 @@ export default class DropdownDoc extends React.Component {
207
640
  <SubNav zIndex={1} color='darker'>
208
641
  <h3 className="subnav__page-title">Subnav title</h3>
209
642
  <Dropdown
210
- align='right'
211
- items={[
643
+ //align='right'
644
+ header={[
212
645
  {
213
646
  type: 'group', label: 'actions', items: [
214
647
  'divider',
@@ -225,7 +658,39 @@ export default class DropdownDoc extends React.Component {
225
658
  { label: 'Action 3', onSelect: () => 1 },
226
659
  { label: 'Action 4', onSelect: () => 1 },
227
660
  ]
228
- }]}>
661
+ }
662
+ ]}
663
+ items={[
664
+ // {
665
+ // type: 'group', label: 'actions', items: [
666
+ // 'divider',
667
+ // { label: 'Edit', icon: 'pencil', onSelect: () => 1 },
668
+ // { label: 'Copy', icon: 'copy', onSelect: () => 1 },
669
+ // { label: 'Delete', icon: 'trash', onSelect: () => 1 },
670
+ // 'divider',
671
+ // ]
672
+ // },
673
+ // {
674
+ // type: 'submenu', label: 'Second level actions', icon: 'star', items: [
675
+ // { label: 'Action 1', onSelect: () => 1 },
676
+ // { label: 'Action 2', onSelect: () => 1 },
677
+ // { label: 'Action 3', onSelect: () => 1 },
678
+ // { label: 'Action 4', onSelect: () => 1 },
679
+ // ]
680
+ // }
681
+ ]}
682
+ footer={[
683
+
684
+ {
685
+ type: 'submenu', label: 'Second level actions', icon: 'star', items: [
686
+ { label: 'Action 1', onSelect: () => 1 },
687
+ { label: 'Action 2', onSelect: () => 1 },
688
+ { label: 'Action 3', onSelect: () => 1 },
689
+ { label: 'Action 4', onSelect: () => 1 },
690
+ ]
691
+ }
692
+ ]}
693
+ >
229
694
  <button className='sd-navbtn'>
230
695
  <i className="icon-dots-vertical"></i>
231
696
  </button>
@@ -270,42 +735,109 @@ export default class DropdownDoc extends React.Component {
270
735
  <SubNav zIndex={1} color='darker'>
271
736
  <h3 className="subnav__page-title">Subnav title</h3>
272
737
  <Dropdown
273
- align='right'
738
+ append={true}
274
739
  header={[
275
740
  {
276
- type: 'group', label: 'header actions', items: [
277
- { label: 'Header action one', icon: 'download', onSelect: () => 1 },
278
- { label: 'Header action two', icon: 'trash', onSelect: () => 1 },
279
- ]
741
+ type: 'group',
742
+ label: 'Create new',
743
+ items: [
744
+ {
745
+ type: 'submenu',
746
+ label: 'Rundown',
747
+ icon: 'plus-sign',
748
+ items: [
749
+ {
750
+ type: 'submenu',
751
+ label: 'Show 1',
752
+ icon: 'plus-sign',
753
+ items: [
754
+ {
755
+ type: 'submenu',
756
+ label: 'Show 1',
757
+ items:[]
758
+ }
759
+ ],
760
+ },
761
+ {
762
+ type: 'submenu',
763
+ label: 'Show 2',
764
+ icon: 'plus-sign',
765
+ items: [
766
+
767
+ ],
768
+ },
769
+ ],
770
+ },
771
+ ],
280
772
  },
281
773
  ]}
282
774
  items={[
283
775
  {
284
776
  type: 'group', label: 'body actions', items: [
285
- { label: 'Edit', icon: 'pencil', onSelect: () => 1 },
286
- { label: 'Copy', icon: 'copy', onSelect: () => 1 },
287
- { label: 'Action 2', icon: 'envelope', onSelect: () => 1 },
288
- { label: 'Action 3', icon: 'heart', onSelect: () => 1 },
289
- { label: 'Action 4', icon: 'print', onSelect: () => 1 },
290
- { label: 'Action 5', icon: 'plus-sign', onSelect: () => 1 },
291
- { label: 'Action 6', icon: 'minus-sign', onSelect: () => 1 },
292
- { label: 'Action 7', icon: 'refresh', onSelect: () => 1 },
293
- { label: 'Action 8', icon: 'pick', onSelect: () => 1 },
294
- { label: 'Action 9', icon: 'bell', onSelect: () => 1 },
295
- { label: 'Action 10', icon: 'kill', onSelect: () => 1 },
296
- { label: 'Action 11', icon: 'settings', onSelect: () => 1 },
297
- { label: 'Action 12', icon: 'cut', onSelect: () => 1 },
777
+ {
778
+ type: 'group',
779
+ label: 'Create new',
780
+ items: [
781
+ {
782
+ type: 'submenu',
783
+ label: 'Rundown',
784
+ icon: 'plus-sign',
785
+ items: [
786
+ {
787
+ type: 'submenu',
788
+ label: 'Show 1',
789
+ icon: 'plus-sign',
790
+ items: [
791
+
792
+ ],
793
+ },
794
+ {
795
+ type: 'submenu',
796
+ label: 'Show 2',
797
+ icon: 'plus-sign',
798
+ items: [
799
+
800
+ ],
801
+ },
802
+ ],
803
+ },
804
+ ],
805
+ },
298
806
  ]
299
807
  },
300
808
  ]}
301
809
  footer={[
302
810
  {
303
- type: 'group', label: 'footer actions', items: [
304
- { label: 'Create gallery', icon: 'slideshow', onSelect: () => 1 },
305
- { label: 'Create package', icon: 'composite', onSelect: () => 1 },
306
- ]
811
+ type: 'group',
812
+ label: 'Create new',
813
+ items: [
814
+ {
815
+ type: 'submenu',
816
+ label: 'Rundown',
817
+ icon: 'plus-sign',
818
+ items: [
819
+ {
820
+ type: 'submenu',
821
+ label: 'Show 1',
822
+ icon: 'plus-sign',
823
+ items: [
824
+
825
+ ],
826
+ },
827
+ {
828
+ type: 'submenu',
829
+ label: 'Show 2',
830
+ icon: 'plus-sign',
831
+ items: [
832
+
833
+ ],
834
+ },
835
+ ],
836
+ },
837
+ ],
307
838
  },
308
- ]}>
839
+ ]}
840
+ >
309
841
  <button className='sd-navbtn'>
310
842
  <i className="icon-dots-vertical"></i>
311
843
  </button>