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.
- package/app/styles/_modals.scss +3 -3
- package/app/styles/_table-list.scss +100 -11
- package/app/styles/grids/_grid-layout.scss +3 -0
- package/app-typescript/components/Dropdown.tsx +78 -37
- package/app-typescript/components/DurationInput.tsx +7 -1
- package/app-typescript/components/Layouts/CoreLayout.tsx +2 -1
- package/app-typescript/components/Layouts/CoreLayoutMain.tsx +7 -1
- package/app-typescript/components/Lists/TableList.tsx +138 -25
- package/app-typescript/components/SearchBar.tsx +11 -3
- package/app-typescript/components/TimePicker.tsx +2 -13
- package/dist/examples.bundle.js +361 -123
- package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +1 -0
- package/dist/react/Dropdowns.tsx +227 -47
- package/dist/react/TableList.tsx +15 -119
- package/dist/superdesk-ui.bundle.css +84 -16
- package/dist/superdesk-ui.bundle.js +153 -56
- package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +1 -0
- package/examples/pages/react/Dropdowns.tsx +227 -47
- package/examples/pages/react/TableList.tsx +15 -119
- package/package.json +1 -1
- package/react/components/Dropdown.d.ts +2 -1
- package/react/components/Dropdown.js +39 -20
- package/react/components/DurationInput.js +9 -1
- package/react/components/Layouts/CoreLayout.d.ts +1 -0
- package/react/components/Layouts/CoreLayout.js +1 -1
- package/react/components/Layouts/CoreLayoutMain.d.ts +1 -0
- package/react/components/Layouts/CoreLayoutMain.js +8 -1
- package/react/components/Lists/TableList.d.ts +22 -6
- package/react/components/Lists/TableList.js +78 -19
- package/react/components/SearchBar.d.ts +1 -1
- package/react/components/SearchBar.js +15 -7
- package/react/components/TimePicker.d.ts +1 -5
- package/react/components/TimePicker.js +3 -7
- package/.vscode/settings.json +0 -5
- package/app-typescript/dist/components/Alert.d.ts +0 -16
- package/app-typescript/dist/components/Autocomplete.d.ts +0 -48
- package/app-typescript/dist/components/Avatar.d.ts +0 -33
- package/app-typescript/dist/components/Badge.d.ts +0 -13
- package/app-typescript/dist/components/Button.d.ts +0 -23
- package/app-typescript/dist/components/ButtonGroup.d.ts +0 -12
- package/app-typescript/dist/components/CheckButtonGroup.d.ts +0 -11
- package/app-typescript/dist/components/CheckGroup.d.ts +0 -9
- package/app-typescript/dist/components/Checkbox.d.ts +0 -19
- package/app-typescript/dist/components/CheckboxButton.d.ts +0 -19
- package/app-typescript/dist/components/DatePicker.d.ts +0 -37
- package/app-typescript/dist/components/Divider.d.ts +0 -9
- package/app-typescript/dist/components/DonutChart.d.ts +0 -12
- package/app-typescript/dist/components/Dropdown.d.ts +0 -28
- package/app-typescript/dist/components/DropdownFirst.d.ts +0 -42
- package/app-typescript/dist/components/EmptyState.d.ts +0 -11
- package/app-typescript/dist/components/FormLabel.d.ts +0 -9
- package/app-typescript/dist/components/Genie.d.ts +0 -13
- package/app-typescript/dist/components/GridItem.d.ts +0 -69
- package/app-typescript/dist/components/GridList.d.ts +0 -14
- package/app-typescript/dist/components/HeadingText.d.ts +0 -10
- package/app-typescript/dist/components/HelloWorld.d.ts +0 -8
- package/app-typescript/dist/components/Icon.d.ts +0 -12
- package/app-typescript/dist/components/IconButton.d.ts +0 -12
- package/app-typescript/dist/components/IconLabel.d.ts +0 -11
- package/app-typescript/dist/components/Input.d.ts +0 -24
- package/app-typescript/dist/components/Label.d.ts +0 -15
- package/app-typescript/dist/components/LeftMenu.d.ts +0 -26
- package/app-typescript/dist/components/Loader.d.ts +0 -8
- package/app-typescript/dist/components/NavButton.d.ts +0 -15
- package/app-typescript/dist/components/Popover.d.ts +0 -13
- package/app-typescript/dist/components/PropsList.d.ts +0 -15
- package/app-typescript/dist/components/Radio.d.ts +0 -19
- package/app-typescript/dist/components/RadioButton.d.ts +0 -20
- package/app-typescript/dist/components/Select.d.ts +0 -29
- package/app-typescript/dist/components/SelectWithTemplate.d.ts +0 -32
- package/app-typescript/dist/components/SlidingToolbar.d.ts +0 -8
- package/app-typescript/dist/components/StrechBar.d.ts +0 -4
- package/app-typescript/dist/components/SubNav.d.ts +0 -10
- package/app-typescript/dist/components/Switch.d.ts +0 -12
- package/app-typescript/dist/components/TabCustom.d.ts +0 -25
- package/app-typescript/dist/components/TabList.d.ts +0 -22
- package/app-typescript/dist/components/Tag.d.ts +0 -9
- package/app-typescript/dist/components/TagInput.d.ts +0 -7
- package/app-typescript/dist/components/TagInputTest.d.ts +0 -18
- package/app-typescript/dist/components/TimePicker.d.ts +0 -11
- package/app-typescript/dist/components/Tooltip.d.ts +0 -11
- package/app-typescript/dist/components/_Positioner.d.ts +0 -27
- package/app-typescript/dist/index.d.ts +0 -56
- package/yarn-error.log +0 -111
@@ -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
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
'
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
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
|
-
|
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
|
-
|
390
|
+
append={true}
|
274
391
|
header={[
|
275
392
|
{
|
276
|
-
type: 'group',
|
277
|
-
|
278
|
-
|
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
|
-
{
|
286
|
-
|
287
|
-
|
288
|
-
|
289
|
-
|
290
|
-
|
291
|
-
|
292
|
-
|
293
|
-
|
294
|
-
|
295
|
-
|
296
|
-
|
297
|
-
|
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',
|
304
|
-
|
305
|
-
|
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>
|
@@ -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: <
|
27
|
-
|
28
|
-
|
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
@@ -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 {};
|
@@ -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(
|
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:
|
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
|
+
};
|
@@ -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
|
-
|
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;
|