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
package/dist/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
|
-
|
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>
|
package/dist/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: <
|
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
|
)
|