superdesk-ui-framework 3.0.5 → 3.0.7

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 (20) hide show
  1. package/app/styles/_sd-tag-input.scss +29 -10
  2. package/app-typescript/components/MultiSelect.tsx +2 -3
  3. package/app-typescript/components/Navigation/SideBarTabs.tsx +2 -4
  4. package/app-typescript/components/TreeSelect.tsx +506 -243
  5. package/dist/examples.bundle.js +387 -146
  6. package/dist/react/Dropdowns.tsx +134 -85
  7. package/dist/react/MultiSelect.tsx +2 -2
  8. package/dist/react/TreeSelect.tsx +39 -27
  9. package/dist/superdesk-ui.bundle.css +26 -9
  10. package/dist/superdesk-ui.bundle.js +285 -107
  11. package/examples/pages/react/Dropdowns.tsx +134 -85
  12. package/examples/pages/react/MultiSelect.tsx +2 -2
  13. package/examples/pages/react/TreeSelect.tsx +39 -27
  14. package/package.json +2 -2
  15. package/react/components/MultiSelect.d.ts +1 -1
  16. package/react/components/MultiSelect.js +1 -1
  17. package/react/components/Navigation/SideBarTabs.d.ts +1 -2
  18. package/react/components/Navigation/SideBarTabs.js +2 -3
  19. package/react/components/TreeSelect.d.ts +17 -9
  20. package/react/components/TreeSelect.js +249 -74
package/dist/react/Dropdowns.tsx CHANGED
@@ -16,13 +16,14 @@ export default class DropdownDoc extends React.Component {
16
16
  ]}>
17
17
  Toogle button
18
18
  </Dropdown>
19
-
19
+
20
20
  `}
21
21
  </Markup.ReactMarkupCodePreview>
22
22
  <p className='docs-page__paragraph'>By default dropdown menu is positioned left comparing to dropdown toggle button element. For right positioned menu (second example) add prop value <code>align = 'right'</code></p>
23
23
  <Markup.ReactMarkup>
24
24
  <Markup.ReactMarkupPreview>
25
25
  <Dropdown
26
+ append
26
27
  items={[
27
28
  { label: 'Action 1', onSelect: () => 1 },
28
29
  { label: 'Action 2', onSelect: () => 1 },
@@ -67,7 +68,7 @@ export default class DropdownDoc extends React.Component {
67
68
  <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
69
  <Markup.ReactMarkup>
69
70
  <Markup.ReactMarkupPreview>
70
- <Dropdown
71
+ <Dropdown
71
72
  append={true}
72
73
  header={[
73
74
  {
@@ -86,7 +87,7 @@ export default class DropdownDoc extends React.Component {
86
87
  items: [
87
88
  {
88
89
  type: 'submenu',
89
- label: 'Show 1',
90
+ label: 'Show 2',
90
91
  icon: 'plus-sign',
91
92
  items: []
92
93
  }
@@ -94,11 +95,11 @@ export default class DropdownDoc extends React.Component {
94
95
  },
95
96
  {
96
97
  type: 'submenu',
97
- label: 'Show 2',
98
+ label: 'Show 1',
98
99
  icon: 'plus-sign',
99
-
100
+
100
101
  items: [
101
-
102
+
102
103
  ],
103
104
  },
104
105
  ],
@@ -115,14 +116,14 @@ export default class DropdownDoc extends React.Component {
115
116
  type: 'submenu',
116
117
  label: 'Rundown',
117
118
  icon: 'plus-sign',
118
-
119
+
119
120
  items: [
120
121
  {
121
122
  type: 'submenu',
122
123
  label: 'Show 1',
123
124
  icon: 'plus-sign',
124
125
  items: [
125
-
126
+
126
127
  ],
127
128
  },
128
129
  {
@@ -130,7 +131,7 @@ export default class DropdownDoc extends React.Component {
130
131
  label: 'Show 2',
131
132
  icon: 'plus-sign',
132
133
  items: [
133
-
134
+
134
135
  ],
135
136
  },
136
137
  ],
@@ -139,14 +140,14 @@ export default class DropdownDoc extends React.Component {
139
140
  type: 'submenu',
140
141
  label: 'Rundown',
141
142
  icon: 'plus-sign',
142
-
143
+
143
144
  items: [
144
145
  {
145
146
  type: 'submenu',
146
147
  label: 'Show 1',
147
148
  icon: 'plus-sign',
148
149
  items: [
149
-
150
+
150
151
  ],
151
152
  },
152
153
  {
@@ -154,7 +155,7 @@ export default class DropdownDoc extends React.Component {
154
155
  label: 'Show 2',
155
156
  icon: 'plus-sign',
156
157
  items: [
157
-
158
+
158
159
  ],
159
160
  },
160
161
  ],
@@ -163,14 +164,14 @@ export default class DropdownDoc extends React.Component {
163
164
  type: 'submenu',
164
165
  label: 'Rundown',
165
166
  icon: 'plus-sign',
166
-
167
+
167
168
  items: [
168
169
  {
169
170
  type: 'submenu',
170
171
  label: 'Show 1',
171
172
  icon: 'plus-sign',
172
173
  items: [
173
-
174
+
174
175
  ],
175
176
  },
176
177
  {
@@ -178,7 +179,7 @@ export default class DropdownDoc extends React.Component {
178
179
  label: 'Show 2',
179
180
  icon: 'plus-sign',
180
181
  items: [
181
-
182
+
182
183
  ],
183
184
  },
184
185
  ],
@@ -187,14 +188,14 @@ export default class DropdownDoc extends React.Component {
187
188
  type: 'submenu',
188
189
  label: 'Rundown',
189
190
  icon: 'plus-sign',
190
-
191
+
191
192
  items: [
192
193
  {
193
194
  type: 'submenu',
194
195
  label: 'Show 1',
195
196
  icon: 'plus-sign',
196
197
  items: [
197
-
198
+
198
199
  ],
199
200
  },
200
201
  {
@@ -202,7 +203,7 @@ export default class DropdownDoc extends React.Component {
202
203
  label: 'Show 2',
203
204
  icon: 'plus-sign',
204
205
  items: [
205
-
206
+
206
207
  ],
207
208
  },
208
209
  ],
@@ -211,14 +212,14 @@ export default class DropdownDoc extends React.Component {
211
212
  type: 'submenu',
212
213
  label: 'Rundown',
213
214
  icon: 'plus-sign',
214
-
215
+
215
216
  items: [
216
217
  {
217
218
  type: 'submenu',
218
219
  label: 'Show 1',
219
220
  icon: 'plus-sign',
220
221
  items: [
221
-
222
+
222
223
  ],
223
224
  },
224
225
  {
@@ -226,7 +227,7 @@ export default class DropdownDoc extends React.Component {
226
227
  label: 'Show 2',
227
228
  icon: 'plus-sign',
228
229
  items: [
229
-
230
+
230
231
  ],
231
232
  },
232
233
  ],
@@ -235,14 +236,14 @@ export default class DropdownDoc extends React.Component {
235
236
  type: 'submenu',
236
237
  label: 'Rundown',
237
238
  icon: 'plus-sign',
238
-
239
+
239
240
  items: [
240
241
  {
241
242
  type: 'submenu',
242
243
  label: 'Show 1',
243
244
  icon: 'plus-sign',
244
245
  items: [
245
-
246
+
246
247
  ],
247
248
  },
248
249
  {
@@ -250,7 +251,7 @@ export default class DropdownDoc extends React.Component {
250
251
  label: 'Show 2',
251
252
  icon: 'plus-sign',
252
253
  items: [
253
-
254
+
254
255
  ],
255
256
  },
256
257
  ],
@@ -259,14 +260,14 @@ export default class DropdownDoc extends React.Component {
259
260
  type: 'submenu',
260
261
  label: 'Rundown',
261
262
  icon: 'plus-sign',
262
-
263
+
263
264
  items: [
264
265
  {
265
266
  type: 'submenu',
266
267
  label: 'Show 1',
267
268
  icon: 'plus-sign',
268
269
  items: [
269
-
270
+
270
271
  ],
271
272
  },
272
273
  {
@@ -274,7 +275,7 @@ export default class DropdownDoc extends React.Component {
274
275
  label: 'Show 2',
275
276
  icon: 'plus-sign',
276
277
  items: [
277
-
278
+
278
279
  ],
279
280
  },
280
281
  ],
@@ -283,14 +284,14 @@ export default class DropdownDoc extends React.Component {
283
284
  type: 'submenu',
284
285
  label: 'Rundown',
285
286
  icon: 'plus-sign',
286
-
287
+
287
288
  items: [
288
289
  {
289
290
  type: 'submenu',
290
291
  label: 'Show 1',
291
292
  icon: 'plus-sign',
292
293
  items: [
293
-
294
+
294
295
  ],
295
296
  },
296
297
  {
@@ -298,7 +299,7 @@ export default class DropdownDoc extends React.Component {
298
299
  label: 'Show 2',
299
300
  icon: 'plus-sign',
300
301
  items: [
301
-
302
+
302
303
  ],
303
304
  },
304
305
  ],
@@ -307,14 +308,14 @@ export default class DropdownDoc extends React.Component {
307
308
  type: 'submenu',
308
309
  label: 'Rundown',
309
310
  icon: 'plus-sign',
310
-
311
+
311
312
  items: [
312
313
  {
313
314
  type: 'submenu',
314
315
  label: 'Show 1',
315
316
  icon: 'plus-sign',
316
317
  items: [
317
-
318
+
318
319
  ],
319
320
  },
320
321
  {
@@ -322,7 +323,7 @@ export default class DropdownDoc extends React.Component {
322
323
  label: 'Show 2',
323
324
  icon: 'plus-sign',
324
325
  items: [
325
-
326
+
326
327
  ],
327
328
  },
328
329
  ],
@@ -331,14 +332,14 @@ export default class DropdownDoc extends React.Component {
331
332
  type: 'submenu',
332
333
  label: 'Rundown',
333
334
  icon: 'plus-sign',
334
-
335
+
335
336
  items: [
336
337
  {
337
338
  type: 'submenu',
338
339
  label: 'Show 1',
339
340
  icon: 'plus-sign',
340
341
  items: [
341
-
342
+
342
343
  ],
343
344
  },
344
345
  {
@@ -346,7 +347,7 @@ export default class DropdownDoc extends React.Component {
346
347
  label: 'Show 2',
347
348
  icon: 'plus-sign',
348
349
  items: [
349
-
350
+
350
351
  ],
351
352
  },
352
353
  ],
@@ -355,14 +356,14 @@ export default class DropdownDoc extends React.Component {
355
356
  type: 'submenu',
356
357
  label: 'Rundown',
357
358
  icon: 'plus-sign',
358
-
359
+
359
360
  items: [
360
361
  {
361
362
  type: 'submenu',
362
363
  label: 'Show 1',
363
364
  icon: 'plus-sign',
364
365
  items: [
365
-
366
+
366
367
  ],
367
368
  },
368
369
  {
@@ -370,7 +371,7 @@ export default class DropdownDoc extends React.Component {
370
371
  label: 'Show 2',
371
372
  icon: 'plus-sign',
372
373
  items: [
373
-
374
+
374
375
  ],
375
376
  },
376
377
  ],
@@ -379,14 +380,14 @@ export default class DropdownDoc extends React.Component {
379
380
  type: 'submenu',
380
381
  label: 'Rundown',
381
382
  icon: 'plus-sign',
382
-
383
+
383
384
  items: [
384
385
  {
385
386
  type: 'submenu',
386
387
  label: 'Show 1',
387
388
  icon: 'plus-sign',
388
389
  items: [
389
-
390
+
390
391
  ],
391
392
  },
392
393
  {
@@ -394,7 +395,7 @@ export default class DropdownDoc extends React.Component {
394
395
  label: 'Show 2',
395
396
  icon: 'plus-sign',
396
397
  items: [
397
-
398
+
398
399
  ],
399
400
  },
400
401
  ],
@@ -403,14 +404,14 @@ export default class DropdownDoc extends React.Component {
403
404
  type: 'submenu',
404
405
  label: 'Rundown',
405
406
  icon: 'plus-sign',
406
-
407
+
407
408
  items: [
408
409
  {
409
410
  type: 'submenu',
410
411
  label: 'Show 1',
411
412
  icon: 'plus-sign',
412
413
  items: [
413
-
414
+
414
415
  ],
415
416
  },
416
417
  {
@@ -418,7 +419,7 @@ export default class DropdownDoc extends React.Component {
418
419
  label: 'Show 2',
419
420
  icon: 'plus-sign',
420
421
  items: [
421
-
422
+
422
423
  ],
423
424
  },
424
425
  ],
@@ -427,15 +428,15 @@ export default class DropdownDoc extends React.Component {
427
428
  type: 'submenu',
428
429
  label: 'Rundown',
429
430
  icon: 'plus-sign',
430
-
431
+
431
432
  items: [
432
433
  {
433
434
  type: 'submenu',
434
435
  label: 'Show 1',
435
436
  icon: 'plus-sign',
436
-
437
+
437
438
  items: [
438
-
439
+
439
440
  ],
440
441
  },
441
442
  {
@@ -443,7 +444,7 @@ export default class DropdownDoc extends React.Component {
443
444
  label: 'Show 2',
444
445
  icon: 'plus-sign',
445
446
  items: [
446
-
447
+
447
448
  ],
448
449
  },
449
450
  ],
@@ -452,14 +453,14 @@ export default class DropdownDoc extends React.Component {
452
453
  type: 'submenu',
453
454
  label: 'Rundown',
454
455
  icon: 'plus-sign',
455
-
456
+
456
457
  items: [
457
458
  {
458
459
  type: 'submenu',
459
460
  label: 'Show 1',
460
461
  icon: 'plus-sign',
461
462
  items: [
462
-
463
+
463
464
  ],
464
465
  },
465
466
  {
@@ -467,14 +468,14 @@ export default class DropdownDoc extends React.Component {
467
468
  label: 'Show 2',
468
469
  icon: 'plus-sign',
469
470
  items: [
470
-
471
+
471
472
  ],
472
473
  },
473
474
  ],
474
475
  },
475
476
 
476
-
477
-
477
+
478
+
478
479
  ],
479
480
  },
480
481
  ]}
@@ -485,7 +486,7 @@ export default class DropdownDoc extends React.Component {
485
486
  {
486
487
  icon: 'rundown',
487
488
  label: 'Create new Show',
488
- onSelect: () => console.log('aaa'),
489
+ onSelect: () => false,
489
490
  },
490
491
  ],
491
492
  },
@@ -503,7 +504,7 @@ export default class DropdownDoc extends React.Component {
503
504
  label: 'Show 1',
504
505
  icon: 'plus-sign',
505
506
  items: [
506
-
507
+
507
508
  ],
508
509
  },
509
510
  {
@@ -511,7 +512,7 @@ export default class DropdownDoc extends React.Component {
511
512
  label: 'Show 2',
512
513
  icon: 'plus-sign',
513
514
  items: [
514
-
515
+
515
516
  ],
516
517
  },
517
518
  ],
@@ -543,8 +544,55 @@ export default class DropdownDoc extends React.Component {
543
544
  The submenu opens by default on the right side of the parent menu.</p>
544
545
  <Markup.ReactMarkup>
545
546
  <Markup.ReactMarkupPreview>
546
- <Dropdown
547
+ <Dropdown
547
548
  items={[
549
+ {
550
+ type: 'group',
551
+ label: 'Create new',
552
+ items: [
553
+ {
554
+ type: 'submenu',
555
+ label: 'Rundown',
556
+ icon: 'plus-sign',
557
+ items: [
558
+ {
559
+ type: 'submenu',
560
+ label: 'Show 1',
561
+ icon: 'plus-sign',
562
+ items: [
563
+ {
564
+ type: 'submenu',
565
+ label: 'Show 3',
566
+ icon: 'plus-sign',
567
+ items: []
568
+ }
569
+ ],
570
+ },
571
+ {
572
+ type: 'submenu',
573
+ label: 'Show 2',
574
+ icon: 'plus-sign',
575
+
576
+ items: [
577
+ {
578
+ type: 'submenu',
579
+ label: 'Show 4',
580
+ icon: 'plus-sign',
581
+ items: [
582
+ {
583
+ type: 'submenu',
584
+ label: 'Show 5',
585
+ icon: 'plus-sign',
586
+ items: []
587
+ }
588
+ ],
589
+ },
590
+ ],
591
+ },
592
+ ],
593
+ },
594
+ ],
595
+ },
548
596
  {
549
597
  type: 'group', label: 'actions', items: [
550
598
  'divider',
@@ -628,7 +676,7 @@ export default class DropdownDoc extends React.Component {
628
676
  ]
629
677
  }]}>
630
678
  Submenu on the left
631
- </Dropdown>
679
+ </Dropdown>
632
680
  `}
633
681
  </Markup.ReactMarkupCode>
634
682
  </Markup.ReactMarkup>
@@ -641,6 +689,7 @@ export default class DropdownDoc extends React.Component {
641
689
  <h3 className="subnav__page-title">Subnav title</h3>
642
690
  <Dropdown
643
691
  //align='right'
692
+ append
644
693
  header={[
645
694
  {
646
695
  type: 'group', label: 'actions', items: [
@@ -658,29 +707,29 @@ export default class DropdownDoc extends React.Component {
658
707
  { label: 'Action 3', onSelect: () => 1 },
659
708
  { label: 'Action 4', onSelect: () => 1 },
660
709
  ]
661
- }
710
+ }
662
711
  ]}
663
712
  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
- // }
713
+ {
714
+ type: 'group', label: 'actions', items: [
715
+ 'divider',
716
+ { label: 'Edit', icon: 'pencil', onSelect: () => 1 },
717
+ { label: 'Copy', icon: 'copy', onSelect: () => 1 },
718
+ { label: 'Delete', icon: 'trash', onSelect: () => 1 },
719
+ 'divider',
720
+ ]
721
+ },
722
+ {
723
+ type: 'submenu', label: 'Second level actions', icon: 'star', items: [
724
+ { label: 'Action 1', onSelect: () => 1 },
725
+ { label: 'Action 2', onSelect: () => 1 },
726
+ { label: 'Action 3', onSelect: () => 1 },
727
+ { label: 'Action 4', onSelect: () => 1 },
728
+ ]
729
+ }
681
730
  ]}
682
731
  footer={[
683
-
732
+
684
733
  {
685
734
  type: 'submenu', label: 'Second level actions', icon: 'star', items: [
686
735
  { label: 'Action 1', onSelect: () => 1 },
@@ -688,7 +737,7 @@ export default class DropdownDoc extends React.Component {
688
737
  { label: 'Action 3', onSelect: () => 1 },
689
738
  { label: 'Action 4', onSelect: () => 1 },
690
739
  ]
691
- }
740
+ }
692
741
  ]}
693
742
  >
694
743
  <button className='sd-navbtn'>
@@ -753,7 +802,7 @@ export default class DropdownDoc extends React.Component {
753
802
  items: [
754
803
  {
755
804
  type: 'submenu',
756
- label: 'Show 1',
805
+ label: 'Show 3',
757
806
  items:[]
758
807
  }
759
808
  ],
@@ -763,7 +812,7 @@ export default class DropdownDoc extends React.Component {
763
812
  label: 'Show 2',
764
813
  icon: 'plus-sign',
765
814
  items: [
766
-
815
+
767
816
  ],
768
817
  },
769
818
  ],
@@ -788,7 +837,7 @@ export default class DropdownDoc extends React.Component {
788
837
  label: 'Show 1',
789
838
  icon: 'plus-sign',
790
839
  items: [
791
-
840
+
792
841
  ],
793
842
  },
794
843
  {
@@ -796,7 +845,7 @@ export default class DropdownDoc extends React.Component {
796
845
  label: 'Show 2',
797
846
  icon: 'plus-sign',
798
847
  items: [
799
-
848
+
800
849
  ],
801
850
  },
802
851
  ],
@@ -821,7 +870,7 @@ export default class DropdownDoc extends React.Component {
821
870
  label: 'Show 1',
822
871
  icon: 'plus-sign',
823
872
  items: [
824
-
873
+
825
874
  ],
826
875
  },
827
876
  {
@@ -829,7 +878,7 @@ export default class DropdownDoc extends React.Component {
829
878
  label: 'Show 2',
830
879
  icon: 'plus-sign',
831
880
  items: [
832
-
881
+
833
882
  ],
834
883
  },
835
884
  ],