superdesk-ui-framework 3.0.1-beta.11 → 3.0.1-beta.13

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 (84) hide show
  1. package/app/styles/_modals.scss +3 -3
  2. package/app/styles/_table-list.scss +100 -11
  3. package/app/styles/grids/_grid-layout.scss +3 -0
  4. package/app-typescript/components/Dropdown.tsx +78 -37
  5. package/app-typescript/components/DurationInput.tsx +7 -1
  6. package/app-typescript/components/Layouts/CoreLayout.tsx +2 -1
  7. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +7 -1
  8. package/app-typescript/components/Lists/TableList.tsx +138 -25
  9. package/app-typescript/components/SearchBar.tsx +11 -3
  10. package/app-typescript/components/TimePicker.tsx +2 -13
  11. package/dist/examples.bundle.js +361 -123
  12. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +1 -0
  13. package/dist/react/Dropdowns.tsx +227 -47
  14. package/dist/react/TableList.tsx +15 -119
  15. package/dist/superdesk-ui.bundle.css +84 -16
  16. package/dist/superdesk-ui.bundle.js +153 -56
  17. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +1 -0
  18. package/examples/pages/react/Dropdowns.tsx +227 -47
  19. package/examples/pages/react/TableList.tsx +15 -119
  20. package/package.json +1 -1
  21. package/react/components/Dropdown.d.ts +2 -1
  22. package/react/components/Dropdown.js +39 -20
  23. package/react/components/DurationInput.js +9 -1
  24. package/react/components/Layouts/CoreLayout.d.ts +1 -0
  25. package/react/components/Layouts/CoreLayout.js +1 -1
  26. package/react/components/Layouts/CoreLayoutMain.d.ts +1 -0
  27. package/react/components/Layouts/CoreLayoutMain.js +8 -1
  28. package/react/components/Lists/TableList.d.ts +22 -6
  29. package/react/components/Lists/TableList.js +78 -19
  30. package/react/components/SearchBar.d.ts +1 -1
  31. package/react/components/SearchBar.js +15 -7
  32. package/react/components/TimePicker.d.ts +1 -5
  33. package/react/components/TimePicker.js +3 -7
  34. package/.vscode/settings.json +0 -5
  35. package/app-typescript/dist/components/Alert.d.ts +0 -16
  36. package/app-typescript/dist/components/Autocomplete.d.ts +0 -48
  37. package/app-typescript/dist/components/Avatar.d.ts +0 -33
  38. package/app-typescript/dist/components/Badge.d.ts +0 -13
  39. package/app-typescript/dist/components/Button.d.ts +0 -23
  40. package/app-typescript/dist/components/ButtonGroup.d.ts +0 -12
  41. package/app-typescript/dist/components/CheckButtonGroup.d.ts +0 -11
  42. package/app-typescript/dist/components/CheckGroup.d.ts +0 -9
  43. package/app-typescript/dist/components/Checkbox.d.ts +0 -19
  44. package/app-typescript/dist/components/CheckboxButton.d.ts +0 -19
  45. package/app-typescript/dist/components/DatePicker.d.ts +0 -37
  46. package/app-typescript/dist/components/Divider.d.ts +0 -9
  47. package/app-typescript/dist/components/DonutChart.d.ts +0 -12
  48. package/app-typescript/dist/components/Dropdown.d.ts +0 -28
  49. package/app-typescript/dist/components/DropdownFirst.d.ts +0 -42
  50. package/app-typescript/dist/components/EmptyState.d.ts +0 -11
  51. package/app-typescript/dist/components/FormLabel.d.ts +0 -9
  52. package/app-typescript/dist/components/Genie.d.ts +0 -13
  53. package/app-typescript/dist/components/GridItem.d.ts +0 -69
  54. package/app-typescript/dist/components/GridList.d.ts +0 -14
  55. package/app-typescript/dist/components/HeadingText.d.ts +0 -10
  56. package/app-typescript/dist/components/HelloWorld.d.ts +0 -8
  57. package/app-typescript/dist/components/Icon.d.ts +0 -12
  58. package/app-typescript/dist/components/IconButton.d.ts +0 -12
  59. package/app-typescript/dist/components/IconLabel.d.ts +0 -11
  60. package/app-typescript/dist/components/Input.d.ts +0 -24
  61. package/app-typescript/dist/components/Label.d.ts +0 -15
  62. package/app-typescript/dist/components/LeftMenu.d.ts +0 -26
  63. package/app-typescript/dist/components/Loader.d.ts +0 -8
  64. package/app-typescript/dist/components/NavButton.d.ts +0 -15
  65. package/app-typescript/dist/components/Popover.d.ts +0 -13
  66. package/app-typescript/dist/components/PropsList.d.ts +0 -15
  67. package/app-typescript/dist/components/Radio.d.ts +0 -19
  68. package/app-typescript/dist/components/RadioButton.d.ts +0 -20
  69. package/app-typescript/dist/components/Select.d.ts +0 -29
  70. package/app-typescript/dist/components/SelectWithTemplate.d.ts +0 -32
  71. package/app-typescript/dist/components/SlidingToolbar.d.ts +0 -8
  72. package/app-typescript/dist/components/StrechBar.d.ts +0 -4
  73. package/app-typescript/dist/components/SubNav.d.ts +0 -10
  74. package/app-typescript/dist/components/Switch.d.ts +0 -12
  75. package/app-typescript/dist/components/TabCustom.d.ts +0 -25
  76. package/app-typescript/dist/components/TabList.d.ts +0 -22
  77. package/app-typescript/dist/components/Tag.d.ts +0 -9
  78. package/app-typescript/dist/components/TagInput.d.ts +0 -7
  79. package/app-typescript/dist/components/TagInputTest.d.ts +0 -18
  80. package/app-typescript/dist/components/TimePicker.d.ts +0 -11
  81. package/app-typescript/dist/components/Tooltip.d.ts +0 -11
  82. package/app-typescript/dist/components/_Positioner.d.ts +0 -27
  83. package/app-typescript/dist/index.d.ts +0 -56
  84. package/yarn-error.log +0 -111
package/examples/pages/react/Dropdowns.tsx CHANGED
@@ -67,27 +67,112 @@ 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
+ header={[
72
+ {
73
+ type: 'group',
74
+ label: 'Create new',
75
+ items: [
76
+ {
77
+ type: 'submenu',
78
+ label: 'Rundown',
79
+ icon: 'plus-sign',
80
+ items: [
81
+ {
82
+ type: 'submenu',
83
+ label: 'Show 1',
84
+ icon: 'plus-sign',
85
+ items: [
86
+
87
+ ],
88
+ },
89
+ {
90
+ type: 'submenu',
91
+ label: 'Show 2',
92
+ icon: 'plus-sign',
93
+ items: [
94
+
95
+ ],
96
+ },
97
+ ],
98
+ },
99
+ ],
100
+ },
101
+ ]}
102
+ items={[
103
+ {
104
+ type: 'group',
105
+ label: 'Create new',
106
+ items: [
107
+ {
108
+ type: 'submenu',
109
+ label: 'Rundown',
110
+ icon: 'plus-sign',
111
+ items: [
112
+ {
113
+ type: 'submenu',
114
+ label: 'Show 1',
115
+ icon: 'plus-sign',
116
+ items: [
117
+
118
+ ],
119
+ },
120
+ {
121
+ type: 'submenu',
122
+ label: 'Show 2',
123
+ icon: 'plus-sign',
124
+ items: [
125
+
126
+ ],
127
+ },
128
+ ],
129
+ },
130
+ ],
131
+ },
132
+ ]}
133
+ footer={[
134
+ {
135
+ type: 'group',
136
+ items: [
137
+ {
138
+ icon: 'rundown',
139
+ label: 'Create new Show',
140
+ onSelect: () => false,
141
+ },
142
+ ],
143
+ },
144
+ {
145
+ type: 'group',
146
+ label: 'Create new',
147
+ items: [
148
+ {
149
+ type: 'submenu',
150
+ label: 'Rundown',
151
+ icon: 'plus-sign',
152
+ items: [
153
+ {
154
+ type: 'submenu',
155
+ label: 'Show 1',
156
+ icon: 'plus-sign',
157
+ items: [
158
+
159
+ ],
160
+ },
161
+ {
162
+ type: 'submenu',
163
+ label: 'Show 2',
164
+ icon: 'plus-sign',
165
+ items: [
166
+
167
+ ],
168
+ },
169
+ ],
170
+ },
171
+ ],
172
+ },
173
+ ]}
174
+ >
175
+ </Dropdown>
91
176
  </Markup.ReactMarkupPreview>
92
177
  <Markup.ReactMarkupCode>{`
93
178
  <Dropdown
@@ -207,8 +292,8 @@ export default class DropdownDoc extends React.Component {
207
292
  <SubNav zIndex={1} color='darker'>
208
293
  <h3 className="subnav__page-title">Subnav title</h3>
209
294
  <Dropdown
210
- align='right'
211
- items={[
295
+ //align='right'
296
+ header={[
212
297
  {
213
298
  type: 'group', label: 'actions', items: [
214
299
  'divider',
@@ -225,7 +310,39 @@ export default class DropdownDoc extends React.Component {
225
310
  { label: 'Action 3', onSelect: () => 1 },
226
311
  { label: 'Action 4', onSelect: () => 1 },
227
312
  ]
228
- }]}>
313
+ }
314
+ ]}
315
+ items={[
316
+ // {
317
+ // type: 'group', label: 'actions', items: [
318
+ // 'divider',
319
+ // { label: 'Edit', icon: 'pencil', onSelect: () => 1 },
320
+ // { label: 'Copy', icon: 'copy', onSelect: () => 1 },
321
+ // { label: 'Delete', icon: 'trash', onSelect: () => 1 },
322
+ // 'divider',
323
+ // ]
324
+ // },
325
+ // {
326
+ // type: 'submenu', label: 'Second level actions', icon: 'star', items: [
327
+ // { label: 'Action 1', onSelect: () => 1 },
328
+ // { label: 'Action 2', onSelect: () => 1 },
329
+ // { label: 'Action 3', onSelect: () => 1 },
330
+ // { label: 'Action 4', onSelect: () => 1 },
331
+ // ]
332
+ // }
333
+ ]}
334
+ footer={[
335
+
336
+ {
337
+ type: 'submenu', label: 'Second level actions', icon: 'star', items: [
338
+ { label: 'Action 1', onSelect: () => 1 },
339
+ { label: 'Action 2', onSelect: () => 1 },
340
+ { label: 'Action 3', onSelect: () => 1 },
341
+ { label: 'Action 4', onSelect: () => 1 },
342
+ ]
343
+ }
344
+ ]}
345
+ >
229
346
  <button className='sd-navbtn'>
230
347
  <i className="icon-dots-vertical"></i>
231
348
  </button>
@@ -270,42 +387,105 @@ export default class DropdownDoc extends React.Component {
270
387
  <SubNav zIndex={1} color='darker'>
271
388
  <h3 className="subnav__page-title">Subnav title</h3>
272
389
  <Dropdown
273
- align='right'
390
+ append={true}
274
391
  header={[
275
392
  {
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
- ]
393
+ type: 'group',
394
+ label: 'Create new',
395
+ items: [
396
+ {
397
+ type: 'submenu',
398
+ label: 'Rundown',
399
+ icon: 'plus-sign',
400
+ items: [
401
+ {
402
+ type: 'submenu',
403
+ label: 'Show 1',
404
+ icon: 'plus-sign',
405
+ items: [
406
+
407
+ ],
408
+ },
409
+ {
410
+ type: 'submenu',
411
+ label: 'Show 2',
412
+ icon: 'plus-sign',
413
+ items: [
414
+
415
+ ],
416
+ },
417
+ ],
418
+ },
419
+ ],
280
420
  },
281
421
  ]}
282
422
  items={[
283
423
  {
284
424
  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 },
425
+ {
426
+ type: 'group',
427
+ label: 'Create new',
428
+ items: [
429
+ {
430
+ type: 'submenu',
431
+ label: 'Rundown',
432
+ icon: 'plus-sign',
433
+ items: [
434
+ {
435
+ type: 'submenu',
436
+ label: 'Show 1',
437
+ icon: 'plus-sign',
438
+ items: [
439
+
440
+ ],
441
+ },
442
+ {
443
+ type: 'submenu',
444
+ label: 'Show 2',
445
+ icon: 'plus-sign',
446
+ items: [
447
+
448
+ ],
449
+ },
450
+ ],
451
+ },
452
+ ],
453
+ },
298
454
  ]
299
455
  },
300
456
  ]}
301
457
  footer={[
302
458
  {
303
- type: 'group', label: 'footer actions', items: [
304
- { label: 'Create gallery', icon: 'slideshow', onSelect: () => 1 },
305
- { label: 'Create package', icon: 'composite', onSelect: () => 1 },
306
- ]
459
+ type: 'group',
460
+ label: 'Create new',
461
+ items: [
462
+ {
463
+ type: 'submenu',
464
+ label: 'Rundown',
465
+ icon: 'plus-sign',
466
+ items: [
467
+ {
468
+ type: 'submenu',
469
+ label: 'Show 1',
470
+ icon: 'plus-sign',
471
+ items: [
472
+
473
+ ],
474
+ },
475
+ {
476
+ type: 'submenu',
477
+ label: 'Show 2',
478
+ icon: 'plus-sign',
479
+ items: [
480
+
481
+ ],
482
+ },
483
+ ],
484
+ },
485
+ ],
307
486
  },
308
- ]}>
487
+ ]}
488
+ >
309
489
  <button className='sd-navbtn'>
310
490
  <i className="icon-dots-vertical"></i>
311
491
  </button>
package/examples/pages/react/TableList.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import * as Markup from '../../js/react';
3
- import { BoxedList, BoxedListItem, BoxedListContentRow, Prop, PropsList, Icon, IconButton, AvatarWrapper, AvatarContentText, ButtonGroup, Button, Heading, Text, Label, Container, IconLabel, SelectGrid, Dropdown } from '../../../app-typescript';
3
+ import { BoxedList, BoxedListItem, BoxedListContentRow, Prop, PropsList, Icon, IconButton, AvatarWrapper, AvatarContentText, ButtonGroup, Button, Heading, Text, Label, Container, IconLabel, SelectGrid, Dropdown, Tooltip } from '../../../app-typescript';
4
4
  import { TableList, TableListItem } from '../../../app-typescript/components/Lists/TableList';
5
5
 
6
6
  interface IState {
@@ -23,10 +23,14 @@ export default class TableListDoc extends React.Component<IProps, IState> {
23
23
  </>,
24
24
  center: <span>Item 1</span>,
25
25
  end: <IconLabel style='translucent' text='Label success' type='success' icon='time' />,
26
- action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />,
27
- onClick: () => {
28
- return false;
29
- }
26
+ action: <Dropdown append={true} items={[
27
+ { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
28
+ { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
29
+ { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
30
+ ]}><IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={(e) => e.stopPropagation()} /></Dropdown>,
31
+ onClick: () => console.log('single'),
32
+ onDoubleClick: () => console.log('double'),
33
+ hexColor: '#ccff00'
30
34
  },
31
35
  {
32
36
  start: <>
@@ -75,111 +79,6 @@ export default class TableListDoc extends React.Component<IProps, IState> {
75
79
  `}
76
80
  </Markup.ReactMarkupCodePreview>
77
81
 
78
- <p className="docs-page__paragraph">Basic:</p>
79
-
80
- <Markup.ReactMarkup>
81
- <Markup.ReactMarkupPreview>
82
-
83
- <TableList>
84
- <TableListItem
85
- start={
86
- <>
87
- <Label style='translucent' text='aacc' />
88
- <Label style='translucent' type='primary' text='prlg' />
89
- </>
90
- }
91
- center={
92
- <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
93
- }
94
- end={
95
- <IconLabel style='translucent' text='Label success' type='success' icon='time' />
96
- }
97
- action={
98
- <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />
99
- } />
100
- <TableListItem
101
- start={
102
- <>
103
- <Label style='hollow' text='aacc' />
104
- <Label style='filled' type='primary' text='prlg' />
105
- </>
106
- }
107
- center={
108
- <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
109
- }
110
- end={
111
- <IconLabel style='translucent' text='Label success' type='success' icon='time' />
112
- } />
113
- <TableListItem
114
- start={
115
- <>
116
- <Label style='translucent' text='aacc' />
117
- <Label style='translucent' type='primary' text='prlg' />
118
- </>
119
- }
120
- center={
121
- <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
122
- }
123
- end={
124
- <IconLabel style='translucent' text='Label success' type='success' icon='time' />
125
- }
126
- action={
127
- <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />
128
- } />
129
- </TableList>
130
-
131
- </Markup.ReactMarkupPreview>
132
- <Markup.ReactMarkupCode>{`
133
- <TableList>
134
- <TableListItem
135
- start={
136
- <>
137
- <Label style='translucent' text='aacc' />
138
- <Label style='translucent' type='primary' text='prlg' />
139
- </>
140
- }
141
- center={
142
- <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
143
- }
144
- end={
145
- <IconLabel style='translucent' text='Label success' type='success' icon='time' />
146
- }
147
- action={
148
- <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
149
- } />
150
- <TableListItem
151
- start={
152
- <>
153
- <Label style='hollow' text='aacc' />
154
- <Label style='filled' type='primary' text='prlg' />
155
- </>
156
- }
157
- center={
158
- <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
159
- }
160
- end={
161
- <IconLabel style='translucent' text='Label success' type='success' icon='time' />
162
- } />
163
- <TableListItem
164
- start={
165
- <>
166
- <Label style='translucent' text='aacc' />
167
- <Label style='translucent' type='primary' text='prlg' />
168
- </>
169
- }
170
- center={
171
- <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
172
- }
173
- end={
174
- <IconLabel style='translucent' text='Label success' type='success' icon='time' />
175
- }
176
- action={
177
- <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
178
- } />
179
- </TableList>
180
- `}
181
- </Markup.ReactMarkupCode>
182
- </Markup.ReactMarkup>
183
82
  <p className="docs-page__paragraph">With drag and drop functionality:</p>
184
83
  <Markup.ReactMarkup>
185
84
  <Markup.ReactMarkupPreview>
@@ -187,13 +86,13 @@ export default class TableListDoc extends React.Component<IProps, IState> {
187
86
  <TableList
188
87
  dragAndDrop
189
88
  addItem
89
+ onAddItem={(index, item) => console.log(index, item)}
190
90
  array={this.state.array}
191
91
  itemsDropdown={[
192
- { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
92
+ { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1},
193
93
  { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
194
94
  { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
195
95
  ]}
196
- onClick={() => false}
197
96
  onDrag={(start, end) => console.log(start, end)}
198
97
  />
199
98
 
@@ -223,24 +122,21 @@ export default class TableListDoc extends React.Component<IProps, IState> {
223
122
  <Prop name='dragAndDrop' isRequired={false} type='boolean' default='false' description='Drag&Drop functionality.' />
224
123
  <Prop name='itemsDropdown' isRequired={false} type='React.ReactNode | any' default='false' description='Dropdown for functionality to add items to the list.' />
225
124
  <Prop name='className' isRequired={false} type='string' default='false' description='Add class on TableList container.' />
125
+ <Prop name='showDragHandle' isRequired={false} type='string' default='always' description='' />
226
126
  <Prop name='onClick' isRequired={false} type='function' default='false' description='onClick functionality.' />
227
127
  <Prop name='onDrag' isRequired={false} type='function' default='false' description='Returns start and end position of draggable item' />
128
+ <Prop name='onAddItem' isRequired={false} type='function' default='false' description='Returns index of draggable item.' />
228
129
  </PropsList>
229
130
  <p className="docs-page__paragraph">array:</p>
230
- <PropsList>
231
- <Prop name='start' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
232
- <Prop name='center' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
233
- <Prop name='end' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
234
- <Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='Column of individual list items that is displayed on hover.' />
235
- </PropsList>
236
- <p className="docs-page__paragraph">TableListItem</p>
237
131
  <PropsList>
238
132
  <Prop name='start' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
239
133
  <Prop name='center' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
240
134
  <Prop name='end' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
241
135
  <Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='Column of individual list items that is displayed on hover.' />
242
136
  <Prop name='onClick' isRequired={false} type='function' default='false' description='onClick functionality.' />
137
+ <Prop name='onDoubleClick' isRequired={false} type='function' default='false' description='onDoubleClick functionality.' />
243
138
  </PropsList>
139
+
244
140
 
245
141
  </section>
246
142
  )
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "superdesk-ui-framework",
3
- "version": "3.0.1-beta.11",
3
+ "version": "3.0.1-beta.13",
4
4
  "license": "AGPL-3.0",
5
5
  "repository": {
6
6
  "type": "git",
package/react/components/Dropdown.d.ts CHANGED
@@ -24,6 +24,7 @@ interface IMenu {
24
24
  footer?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
25
25
  append?: boolean;
26
26
  children: React.ReactNode;
27
+ onChange?(event?: any): void;
27
28
  }
28
- export declare const Dropdown: ({ items, header, footer, children, append, align, }: IMenu) => JSX.Element;
29
+ export declare const Dropdown: ({ items, header, footer, children, append, align, onChange, }: IMenu) => JSX.Element;
29
30
  export {};
package/react/components/Dropdown.js CHANGED
@@ -25,15 +25,13 @@ var ReactDOM = __importStar(require("react-dom"));
25
25
  var core_1 = require("@popperjs/core");
26
26
  var react_id_generator_1 = require("react-id-generator");
27
27
  var Dropdown = function (_a) {
28
- var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align;
28
+ var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, onChange = _a.onChange;
29
29
  var _b = React.useState(false), open = _b[0], setOpen = _b[1];
30
30
  var _c = React.useState(false), change = _c[0], setChange = _c[1];
31
31
  var menuID = (0, react_id_generator_1.useId)()[0];
32
32
  var DROPDOWN_ID = "react-placeholder";
33
33
  var ref = React.useRef(null);
34
- var refSubMenu = React.useRef(null);
35
34
  var buttonRef = React.useRef(null);
36
- var refButtonSubMenu = React.useRef(null);
37
35
  var headerElements = header === null || header === void 0 ? void 0 : header.map(function (el, index) {
38
36
  return each(el, index);
39
37
  });
@@ -152,20 +150,7 @@ var Dropdown = function (_a) {
152
150
  item['items'].forEach(function (el, key) {
153
151
  submenuItems_1.push(each(el, key));
154
152
  });
155
- return (React.createElement("li", { key: index },
156
- React.createElement("div", { className: 'dropdown' },
157
- React.createElement("button", { ref: refButtonSubMenu, className: 'dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, onMouseOver: function () {
158
- var subMenuRef = refSubMenu.current;
159
- var subToggleRef = refButtonSubMenu.current;
160
- if (subMenuRef && subToggleRef) {
161
- (0, core_1.createPopper)(subToggleRef, subMenuRef, {
162
- placement: 'right-start',
163
- });
164
- }
165
- }, onClick: item['onSelect'] },
166
- item['icon'] ? React.createElement("i", { className: 'icon-' + item['icon'] }) : null,
167
- item['label']),
168
- React.createElement("ul", { ref: refSubMenu, role: 'menu', className: 'dropdown__menu' }, submenuItems_1))));
153
+ return (React.createElement(DropdownItemWithSubmenu, { key: index, item: item, subMenuItems: submenuItems_1 }));
169
154
  }
170
155
  else if (item['type'] === 'group') {
171
156
  var groupItems_1 = [];
@@ -181,7 +166,7 @@ var Dropdown = function (_a) {
181
166
  return (React.createElement("li", { className: "dropdown__menu-divider", key: index }));
182
167
  }
183
168
  else {
184
- return (React.createElement(DropdownItem, { key: index, label: item['label'], icon: item['icon'], active: item['active'], onSelect: item['onSelect'] }));
169
+ return (React.createElement(DropdownItem, { key: index, label: item['label'], icon: item['icon'], active: item['active'], onSelect: item['onSelect'], onChange: onChange }));
185
170
  }
186
171
  }
187
172
  return (React.createElement("div", { className: 'dropdown ' + (open ? 'open' : '') },
@@ -223,9 +208,43 @@ var Dropdown = function (_a) {
223
208
  };
224
209
  exports.Dropdown = Dropdown;
225
210
  var DropdownItem = function (_a) {
226
- var label = _a.label, icon = _a.icon, active = _a.active, onSelect = _a.onSelect;
211
+ var label = _a.label, icon = _a.icon, active = _a.active, onSelect = _a.onSelect, onChange = _a.onChange;
227
212
  return (React.createElement("li", { role: 'none', className: active ? 'dropdown__menu-item--active' : '' },
228
- React.createElement("button", { tabIndex: 0, role: 'menuitem', onClick: onSelect },
213
+ React.createElement("button", { tabIndex: 0, role: 'menuitem', onClick: function () {
214
+ onSelect();
215
+ if (onChange) {
216
+ onChange();
217
+ }
218
+ } },
229
219
  React.createElement("i", { className: icon ? ('icon-' + icon) : '' }),
230
220
  label)));
231
221
  };
222
+ var DropdownItemWithSubmenu = function (_a) {
223
+ var index = _a.index, item = _a.item, subMenuItems = _a.subMenuItems;
224
+ var _b = React.useState(undefined), open = _b[0], setOpen = _b[1];
225
+ var refButtonSubMenu = React.useRef(null);
226
+ var refSubMenu = React.useRef(null);
227
+ React.useEffect(function () {
228
+ var subMenuRef = refSubMenu.current;
229
+ var subToggleRef = refButtonSubMenu.current;
230
+ if (open === true) {
231
+ document.body.appendChild(subMenuRef);
232
+ subMenuRef.style.display = 'block';
233
+ }
234
+ else if (open === false) {
235
+ document.body.removeChild(subMenuRef);
236
+ subMenuRef.style.display = 'none';
237
+ }
238
+ if (subMenuRef && subToggleRef) {
239
+ (0, core_1.createPopper)(subToggleRef, subMenuRef, {
240
+ placement: 'right-start',
241
+ });
242
+ }
243
+ }, [open]);
244
+ return (React.createElement("li", { key: index, ref: refButtonSubMenu },
245
+ React.createElement("div", { className: 'dropdown', onMouseLeave: function () { return setOpen(false); } },
246
+ React.createElement("button", { className: 'dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, onMouseOver: function () { return setOpen(true); }, onClick: item['onSelect'] },
247
+ item['icon'] ? React.createElement("i", { className: 'icon-' + item['icon'] }) : null,
248
+ item['label']),
249
+ React.createElement("ul", { role: 'menu', ref: refSubMenu, style: { display: 'none' }, className: 'dropdown__menu' }, subMenuItems))));
250
+ };
package/react/components/DurationInput.js CHANGED
@@ -330,6 +330,14 @@ function getDurationString(seconds) {
330
330
  var hour = zeroPad(Math.floor(seconds / 3600));
331
331
  var minute = zeroPad(Math.floor((seconds % 3600) / 60));
332
332
  var second = zeroPad(Math.floor(seconds % 60));
333
- return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
333
+ if (Number(hour) === 0 && Number(minute) > 0) {
334
+ return "".concat(minute, "m ").concat(second, "s");
335
+ }
336
+ else if (Number(hour) === 0 && Number(minute) === 0) {
337
+ return "".concat(second, "s");
338
+ }
339
+ else {
340
+ return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
341
+ }
334
342
  }
335
343
  exports.getDurationString = getDurationString;
package/react/components/Layouts/CoreLayout.d.ts CHANGED
@@ -12,6 +12,7 @@ interface IProps {
12
12
  menuId?: string;
13
13
  ariaControls?: string;
14
14
  buttonAnimation?: 'spin' | 'squeeze' | 'none';
15
+ editorFullWidth?: boolean;
15
16
  }
16
17
  export declare class CoreLayout extends React.PureComponent<IProps> {
17
18
  render(): JSX.Element;