superdesk-ui-framework 3.0.1-beta.13 → 3.0.1-beta.15
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/scripts/toggleBoxNext.js +1 -1
- package/app/styles/_buttons.scss +1 -1
- package/app/styles/_content-divider.scss +5 -5
- package/app/styles/_helpers.scss +24 -1
- package/app/styles/_icon-font.scss +9 -9
- package/app/styles/_modals.scss +3 -0
- package/app/styles/_normalize.scss +4 -0
- package/app/styles/_simple-list.scss +1 -0
- package/app/styles/_table-list.scss +11 -1
- package/app/styles/app.scss +1 -0
- package/app/styles/components/_list-item.scss +23 -16
- package/app/styles/components/_sd-collapse-box.scss +6 -6
- package/app/styles/design-tokens/_new-colors.scss +10 -5
- package/app/styles/dropdowns/_basic-dropdown.scss +6 -0
- package/app/styles/form-elements/_input-wrap.scss +138 -0
- package/app/styles/form-elements/_inputs.scss +230 -61
- package/app/styles/interface-elements/_side-panel.scss +1 -1
- package/app/styles/primereact/_pr-dialog.scss +1 -0
- package/app/styles/primereact/_pr-menu.scss +6 -5
- package/app-typescript/components/Dropdown.tsx +65 -65
- package/app-typescript/components/DurationInput.tsx +10 -6
- package/app-typescript/components/Form/FormLabel.tsx +8 -1
- package/app-typescript/components/Form/InputBase.tsx +12 -2
- package/app-typescript/components/Lists/ContentList.tsx +28 -4
- package/app-typescript/components/Lists/TableList.tsx +11 -9
- package/dist/examples.bundle.css +8 -8
- package/dist/examples.bundle.js +1075 -640
- package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +1 -1
- package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +5 -10
- package/dist/playgrounds/react-playgrounds/Rundowns.tsx +20 -21
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +198 -25
- package/dist/react/ContentDivider.tsx +4 -4
- package/dist/react/ContentList.tsx +2 -10
- package/dist/react/Dropdowns.tsx +357 -5
- package/dist/react/Inputs.tsx +1 -7
- package/dist/react/TableList.tsx +28 -30
- package/dist/react/Togglebox.tsx +1 -1
- package/dist/superdesk-ui.bundle.css +463 -176
- package/dist/superdesk-ui.bundle.js +591 -539
- package/dist/vendor.bundle.js +2 -2
- package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +1 -1
- package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +5 -10
- package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +20 -21
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +198 -25
- package/examples/pages/react/ContentDivider.tsx +4 -4
- package/examples/pages/react/ContentList.tsx +2 -10
- package/examples/pages/react/Dropdowns.tsx +357 -5
- package/examples/pages/react/Inputs.tsx +1 -7
- package/examples/pages/react/TableList.tsx +28 -30
- package/examples/pages/react/Togglebox.tsx +1 -1
- package/package.json +1 -1
- package/react/components/Dropdown.d.ts +4 -4
- package/react/components/Dropdown.js +19 -15
- package/react/components/DurationInput.d.ts +1 -1
- package/react/components/DurationInput.js +12 -7
- package/react/components/Form/FormLabel.d.ts +4 -1
- package/react/components/Form/FormLabel.js +9 -3
- package/react/components/Form/InputBase.d.ts +0 -1
- package/react/components/Form/InputBase.js +15 -1
- package/react/components/Lists/ContentList.d.ts +5 -0
- package/react/components/Lists/ContentList.js +36 -15
- package/react/components/Lists/TableList.d.ts +5 -5
- package/react/components/Lists/TableList.js +6 -4
|
@@ -67,7 +67,8 @@ 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
|
|
70
|
+
<Dropdown
|
|
71
|
+
append={true}
|
|
71
72
|
header={[
|
|
72
73
|
{
|
|
73
74
|
type: 'group',
|
|
@@ -83,13 +84,19 @@ export default class DropdownDoc extends React.Component {
|
|
|
83
84
|
label: 'Show 1',
|
|
84
85
|
icon: 'plus-sign',
|
|
85
86
|
items: [
|
|
86
|
-
|
|
87
|
+
{
|
|
88
|
+
type: 'submenu',
|
|
89
|
+
label: 'Show 1',
|
|
90
|
+
icon: 'plus-sign',
|
|
91
|
+
items: []
|
|
92
|
+
}
|
|
87
93
|
],
|
|
88
94
|
},
|
|
89
95
|
{
|
|
90
96
|
type: 'submenu',
|
|
91
97
|
label: 'Show 2',
|
|
92
98
|
icon: 'plus-sign',
|
|
99
|
+
|
|
93
100
|
items: [
|
|
94
101
|
|
|
95
102
|
],
|
|
@@ -108,6 +115,295 @@ export default class DropdownDoc extends React.Component {
|
|
|
108
115
|
type: 'submenu',
|
|
109
116
|
label: 'Rundown',
|
|
110
117
|
icon: 'plus-sign',
|
|
118
|
+
|
|
119
|
+
items: [
|
|
120
|
+
{
|
|
121
|
+
type: 'submenu',
|
|
122
|
+
label: 'Show 1',
|
|
123
|
+
icon: 'plus-sign',
|
|
124
|
+
items: [
|
|
125
|
+
|
|
126
|
+
],
|
|
127
|
+
},
|
|
128
|
+
{
|
|
129
|
+
type: 'submenu',
|
|
130
|
+
label: 'Show 2',
|
|
131
|
+
icon: 'plus-sign',
|
|
132
|
+
items: [
|
|
133
|
+
|
|
134
|
+
],
|
|
135
|
+
},
|
|
136
|
+
],
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
type: 'submenu',
|
|
140
|
+
label: 'Rundown',
|
|
141
|
+
icon: 'plus-sign',
|
|
142
|
+
|
|
143
|
+
items: [
|
|
144
|
+
{
|
|
145
|
+
type: 'submenu',
|
|
146
|
+
label: 'Show 1',
|
|
147
|
+
icon: 'plus-sign',
|
|
148
|
+
items: [
|
|
149
|
+
|
|
150
|
+
],
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
type: 'submenu',
|
|
154
|
+
label: 'Show 2',
|
|
155
|
+
icon: 'plus-sign',
|
|
156
|
+
items: [
|
|
157
|
+
|
|
158
|
+
],
|
|
159
|
+
},
|
|
160
|
+
],
|
|
161
|
+
},
|
|
162
|
+
{
|
|
163
|
+
type: 'submenu',
|
|
164
|
+
label: 'Rundown',
|
|
165
|
+
icon: 'plus-sign',
|
|
166
|
+
|
|
167
|
+
items: [
|
|
168
|
+
{
|
|
169
|
+
type: 'submenu',
|
|
170
|
+
label: 'Show 1',
|
|
171
|
+
icon: 'plus-sign',
|
|
172
|
+
items: [
|
|
173
|
+
|
|
174
|
+
],
|
|
175
|
+
},
|
|
176
|
+
{
|
|
177
|
+
type: 'submenu',
|
|
178
|
+
label: 'Show 2',
|
|
179
|
+
icon: 'plus-sign',
|
|
180
|
+
items: [
|
|
181
|
+
|
|
182
|
+
],
|
|
183
|
+
},
|
|
184
|
+
],
|
|
185
|
+
},
|
|
186
|
+
{
|
|
187
|
+
type: 'submenu',
|
|
188
|
+
label: 'Rundown',
|
|
189
|
+
icon: 'plus-sign',
|
|
190
|
+
|
|
191
|
+
items: [
|
|
192
|
+
{
|
|
193
|
+
type: 'submenu',
|
|
194
|
+
label: 'Show 1',
|
|
195
|
+
icon: 'plus-sign',
|
|
196
|
+
items: [
|
|
197
|
+
|
|
198
|
+
],
|
|
199
|
+
},
|
|
200
|
+
{
|
|
201
|
+
type: 'submenu',
|
|
202
|
+
label: 'Show 2',
|
|
203
|
+
icon: 'plus-sign',
|
|
204
|
+
items: [
|
|
205
|
+
|
|
206
|
+
],
|
|
207
|
+
},
|
|
208
|
+
],
|
|
209
|
+
},
|
|
210
|
+
{
|
|
211
|
+
type: 'submenu',
|
|
212
|
+
label: 'Rundown',
|
|
213
|
+
icon: 'plus-sign',
|
|
214
|
+
|
|
215
|
+
items: [
|
|
216
|
+
{
|
|
217
|
+
type: 'submenu',
|
|
218
|
+
label: 'Show 1',
|
|
219
|
+
icon: 'plus-sign',
|
|
220
|
+
items: [
|
|
221
|
+
|
|
222
|
+
],
|
|
223
|
+
},
|
|
224
|
+
{
|
|
225
|
+
type: 'submenu',
|
|
226
|
+
label: 'Show 2',
|
|
227
|
+
icon: 'plus-sign',
|
|
228
|
+
items: [
|
|
229
|
+
|
|
230
|
+
],
|
|
231
|
+
},
|
|
232
|
+
],
|
|
233
|
+
},
|
|
234
|
+
{
|
|
235
|
+
type: 'submenu',
|
|
236
|
+
label: 'Rundown',
|
|
237
|
+
icon: 'plus-sign',
|
|
238
|
+
|
|
239
|
+
items: [
|
|
240
|
+
{
|
|
241
|
+
type: 'submenu',
|
|
242
|
+
label: 'Show 1',
|
|
243
|
+
icon: 'plus-sign',
|
|
244
|
+
items: [
|
|
245
|
+
|
|
246
|
+
],
|
|
247
|
+
},
|
|
248
|
+
{
|
|
249
|
+
type: 'submenu',
|
|
250
|
+
label: 'Show 2',
|
|
251
|
+
icon: 'plus-sign',
|
|
252
|
+
items: [
|
|
253
|
+
|
|
254
|
+
],
|
|
255
|
+
},
|
|
256
|
+
],
|
|
257
|
+
},
|
|
258
|
+
{
|
|
259
|
+
type: 'submenu',
|
|
260
|
+
label: 'Rundown',
|
|
261
|
+
icon: 'plus-sign',
|
|
262
|
+
|
|
263
|
+
items: [
|
|
264
|
+
{
|
|
265
|
+
type: 'submenu',
|
|
266
|
+
label: 'Show 1',
|
|
267
|
+
icon: 'plus-sign',
|
|
268
|
+
items: [
|
|
269
|
+
|
|
270
|
+
],
|
|
271
|
+
},
|
|
272
|
+
{
|
|
273
|
+
type: 'submenu',
|
|
274
|
+
label: 'Show 2',
|
|
275
|
+
icon: 'plus-sign',
|
|
276
|
+
items: [
|
|
277
|
+
|
|
278
|
+
],
|
|
279
|
+
},
|
|
280
|
+
],
|
|
281
|
+
},
|
|
282
|
+
{
|
|
283
|
+
type: 'submenu',
|
|
284
|
+
label: 'Rundown',
|
|
285
|
+
icon: 'plus-sign',
|
|
286
|
+
|
|
287
|
+
items: [
|
|
288
|
+
{
|
|
289
|
+
type: 'submenu',
|
|
290
|
+
label: 'Show 1',
|
|
291
|
+
icon: 'plus-sign',
|
|
292
|
+
items: [
|
|
293
|
+
|
|
294
|
+
],
|
|
295
|
+
},
|
|
296
|
+
{
|
|
297
|
+
type: 'submenu',
|
|
298
|
+
label: 'Show 2',
|
|
299
|
+
icon: 'plus-sign',
|
|
300
|
+
items: [
|
|
301
|
+
|
|
302
|
+
],
|
|
303
|
+
},
|
|
304
|
+
],
|
|
305
|
+
},
|
|
306
|
+
{
|
|
307
|
+
type: 'submenu',
|
|
308
|
+
label: 'Rundown',
|
|
309
|
+
icon: 'plus-sign',
|
|
310
|
+
|
|
311
|
+
items: [
|
|
312
|
+
{
|
|
313
|
+
type: 'submenu',
|
|
314
|
+
label: 'Show 1',
|
|
315
|
+
icon: 'plus-sign',
|
|
316
|
+
items: [
|
|
317
|
+
|
|
318
|
+
],
|
|
319
|
+
},
|
|
320
|
+
{
|
|
321
|
+
type: 'submenu',
|
|
322
|
+
label: 'Show 2',
|
|
323
|
+
icon: 'plus-sign',
|
|
324
|
+
items: [
|
|
325
|
+
|
|
326
|
+
],
|
|
327
|
+
},
|
|
328
|
+
],
|
|
329
|
+
},
|
|
330
|
+
{
|
|
331
|
+
type: 'submenu',
|
|
332
|
+
label: 'Rundown',
|
|
333
|
+
icon: 'plus-sign',
|
|
334
|
+
|
|
335
|
+
items: [
|
|
336
|
+
{
|
|
337
|
+
type: 'submenu',
|
|
338
|
+
label: 'Show 1',
|
|
339
|
+
icon: 'plus-sign',
|
|
340
|
+
items: [
|
|
341
|
+
|
|
342
|
+
],
|
|
343
|
+
},
|
|
344
|
+
{
|
|
345
|
+
type: 'submenu',
|
|
346
|
+
label: 'Show 2',
|
|
347
|
+
icon: 'plus-sign',
|
|
348
|
+
items: [
|
|
349
|
+
|
|
350
|
+
],
|
|
351
|
+
},
|
|
352
|
+
],
|
|
353
|
+
},
|
|
354
|
+
{
|
|
355
|
+
type: 'submenu',
|
|
356
|
+
label: 'Rundown',
|
|
357
|
+
icon: 'plus-sign',
|
|
358
|
+
|
|
359
|
+
items: [
|
|
360
|
+
{
|
|
361
|
+
type: 'submenu',
|
|
362
|
+
label: 'Show 1',
|
|
363
|
+
icon: 'plus-sign',
|
|
364
|
+
items: [
|
|
365
|
+
|
|
366
|
+
],
|
|
367
|
+
},
|
|
368
|
+
{
|
|
369
|
+
type: 'submenu',
|
|
370
|
+
label: 'Show 2',
|
|
371
|
+
icon: 'plus-sign',
|
|
372
|
+
items: [
|
|
373
|
+
|
|
374
|
+
],
|
|
375
|
+
},
|
|
376
|
+
],
|
|
377
|
+
},
|
|
378
|
+
{
|
|
379
|
+
type: 'submenu',
|
|
380
|
+
label: 'Rundown',
|
|
381
|
+
icon: 'plus-sign',
|
|
382
|
+
|
|
383
|
+
items: [
|
|
384
|
+
{
|
|
385
|
+
type: 'submenu',
|
|
386
|
+
label: 'Show 1',
|
|
387
|
+
icon: 'plus-sign',
|
|
388
|
+
items: [
|
|
389
|
+
|
|
390
|
+
],
|
|
391
|
+
},
|
|
392
|
+
{
|
|
393
|
+
type: 'submenu',
|
|
394
|
+
label: 'Show 2',
|
|
395
|
+
icon: 'plus-sign',
|
|
396
|
+
items: [
|
|
397
|
+
|
|
398
|
+
],
|
|
399
|
+
},
|
|
400
|
+
],
|
|
401
|
+
},
|
|
402
|
+
{
|
|
403
|
+
type: 'submenu',
|
|
404
|
+
label: 'Rundown',
|
|
405
|
+
icon: 'plus-sign',
|
|
406
|
+
|
|
111
407
|
items: [
|
|
112
408
|
{
|
|
113
409
|
type: 'submenu',
|
|
@@ -127,6 +423,58 @@ export default class DropdownDoc extends React.Component {
|
|
|
127
423
|
},
|
|
128
424
|
],
|
|
129
425
|
},
|
|
426
|
+
{
|
|
427
|
+
type: 'submenu',
|
|
428
|
+
label: 'Rundown',
|
|
429
|
+
icon: 'plus-sign',
|
|
430
|
+
|
|
431
|
+
items: [
|
|
432
|
+
{
|
|
433
|
+
type: 'submenu',
|
|
434
|
+
label: 'Show 1',
|
|
435
|
+
icon: 'plus-sign',
|
|
436
|
+
|
|
437
|
+
items: [
|
|
438
|
+
|
|
439
|
+
],
|
|
440
|
+
},
|
|
441
|
+
{
|
|
442
|
+
type: 'submenu',
|
|
443
|
+
label: 'Show 2',
|
|
444
|
+
icon: 'plus-sign',
|
|
445
|
+
items: [
|
|
446
|
+
|
|
447
|
+
],
|
|
448
|
+
},
|
|
449
|
+
],
|
|
450
|
+
},
|
|
451
|
+
{
|
|
452
|
+
type: 'submenu',
|
|
453
|
+
label: 'Rundown',
|
|
454
|
+
icon: 'plus-sign',
|
|
455
|
+
|
|
456
|
+
items: [
|
|
457
|
+
{
|
|
458
|
+
type: 'submenu',
|
|
459
|
+
label: 'Show 1',
|
|
460
|
+
icon: 'plus-sign',
|
|
461
|
+
items: [
|
|
462
|
+
|
|
463
|
+
],
|
|
464
|
+
},
|
|
465
|
+
{
|
|
466
|
+
type: 'submenu',
|
|
467
|
+
label: 'Show 2',
|
|
468
|
+
icon: 'plus-sign',
|
|
469
|
+
items: [
|
|
470
|
+
|
|
471
|
+
],
|
|
472
|
+
},
|
|
473
|
+
],
|
|
474
|
+
},
|
|
475
|
+
|
|
476
|
+
|
|
477
|
+
|
|
130
478
|
],
|
|
131
479
|
},
|
|
132
480
|
]}
|
|
@@ -137,7 +485,7 @@ export default class DropdownDoc extends React.Component {
|
|
|
137
485
|
{
|
|
138
486
|
icon: 'rundown',
|
|
139
487
|
label: 'Create new Show',
|
|
140
|
-
onSelect: () =>
|
|
488
|
+
onSelect: () => console.log('aaa'),
|
|
141
489
|
},
|
|
142
490
|
],
|
|
143
491
|
},
|
|
@@ -195,7 +543,7 @@ export default class DropdownDoc extends React.Component {
|
|
|
195
543
|
The submenu opens by default on the right side of the parent menu.</p>
|
|
196
544
|
<Markup.ReactMarkup>
|
|
197
545
|
<Markup.ReactMarkupPreview>
|
|
198
|
-
<Dropdown
|
|
546
|
+
<Dropdown
|
|
199
547
|
items={[
|
|
200
548
|
{
|
|
201
549
|
type: 'group', label: 'actions', items: [
|
|
@@ -403,7 +751,11 @@ export default class DropdownDoc extends React.Component {
|
|
|
403
751
|
label: 'Show 1',
|
|
404
752
|
icon: 'plus-sign',
|
|
405
753
|
items: [
|
|
406
|
-
|
|
754
|
+
{
|
|
755
|
+
type: 'submenu',
|
|
756
|
+
label: 'Show 1',
|
|
757
|
+
items:[]
|
|
758
|
+
}
|
|
407
759
|
],
|
|
408
760
|
},
|
|
409
761
|
{
|
|
@@ -108,12 +108,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
|
|
|
108
108
|
tabindex={0}
|
|
109
109
|
onChange={(value) => this.setState({value2: value})} />
|
|
110
110
|
</div>
|
|
111
|
-
|
|
112
|
-
<DurationInput
|
|
113
|
-
onChange={(e) => {
|
|
114
|
-
console.log(e)
|
|
115
|
-
}}
|
|
116
|
-
/>
|
|
111
|
+
|
|
117
112
|
<p className="docs-page__paragraph">// Boxed with hidden label</p>
|
|
118
113
|
<div className='form__row'>
|
|
119
114
|
<Input label='Input label'
|
|
@@ -214,7 +209,6 @@ export default class InputsDoc extends React.Component<{}, IState> {
|
|
|
214
209
|
tabindex={0}
|
|
215
210
|
onChange={(value) => this.setState({value2: value})} />
|
|
216
211
|
</div>
|
|
217
|
-
</div>
|
|
218
212
|
</div>
|
|
219
213
|
|
|
220
214
|
</Markup.ReactMarkupPreview>
|
|
@@ -14,7 +14,7 @@ interface IProps {
|
|
|
14
14
|
export default class TableListDoc extends React.Component<IProps, IState> {
|
|
15
15
|
constructor(props: IState) {
|
|
16
16
|
super(props);
|
|
17
|
-
this.state = {
|
|
17
|
+
this.state = {
|
|
18
18
|
array: [
|
|
19
19
|
{
|
|
20
20
|
start: <>
|
|
@@ -40,9 +40,8 @@ export default class TableListDoc extends React.Component<IProps, IState> {
|
|
|
40
40
|
center: <span>Item 2</span>,
|
|
41
41
|
end: <IconLabel style='translucent' text='Label success' type='success' icon='time' />,
|
|
42
42
|
action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />,
|
|
43
|
-
onClick: () =>
|
|
44
|
-
|
|
45
|
-
}
|
|
43
|
+
onClick: () => console.log('single'),
|
|
44
|
+
onDoubleClick: () => console.log('double'),
|
|
46
45
|
},
|
|
47
46
|
{
|
|
48
47
|
start: <>
|
|
@@ -52,9 +51,9 @@ export default class TableListDoc extends React.Component<IProps, IState> {
|
|
|
52
51
|
center: <span>Item 3</span>,
|
|
53
52
|
end: <IconLabel style='translucent' text='Label success' type='success' icon='time' />,
|
|
54
53
|
action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />,
|
|
55
|
-
onClick: () =>
|
|
56
|
-
|
|
57
|
-
|
|
54
|
+
onClick: () => console.log('single'),
|
|
55
|
+
onDoubleClick: () => console.log('double'),
|
|
56
|
+
hexColor: '#ff9808'
|
|
58
57
|
},
|
|
59
58
|
]
|
|
60
59
|
}
|
|
@@ -71,10 +70,10 @@ export default class TableListDoc extends React.Component<IProps, IState> {
|
|
|
71
70
|
dragAndDrop
|
|
72
71
|
addItem
|
|
73
72
|
array={this.state.array}
|
|
74
|
-
itemsDropdown={[
|
|
75
|
-
{ label: '
|
|
76
|
-
{ label: '
|
|
77
|
-
{ label: '
|
|
73
|
+
itemsDropdown={(index) => [
|
|
74
|
+
{ label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => console.log(index) },
|
|
75
|
+
{ label: <Label style='translucent' text='prlg' />, onSelect: () => console.log(index) },
|
|
76
|
+
{ label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => console.log(index) },
|
|
78
77
|
]} />
|
|
79
78
|
`}
|
|
80
79
|
</Markup.ReactMarkupCodePreview>
|
|
@@ -82,32 +81,31 @@ export default class TableListDoc extends React.Component<IProps, IState> {
|
|
|
82
81
|
<p className="docs-page__paragraph">With drag and drop functionality:</p>
|
|
83
82
|
<Markup.ReactMarkup>
|
|
84
83
|
<Markup.ReactMarkupPreview>
|
|
85
|
-
|
|
86
84
|
<TableList
|
|
87
85
|
dragAndDrop
|
|
88
86
|
addItem
|
|
89
|
-
onAddItem={(index, item) => console.log(index, item)}
|
|
90
87
|
array={this.state.array}
|
|
91
|
-
itemsDropdown={[
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
88
|
+
itemsDropdown={(index) => [
|
|
89
|
+
{ label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => console.log(index) },
|
|
90
|
+
{ label: <Label style='translucent' text='prlg' />, onSelect: () => console.log(index) },
|
|
91
|
+
{ label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => console.log(index) },
|
|
92
|
+
]
|
|
93
|
+
}
|
|
96
94
|
onDrag={(start, end) => console.log(start, end)}
|
|
97
95
|
/>
|
|
98
|
-
|
|
99
96
|
</Markup.ReactMarkupPreview>
|
|
100
97
|
<Markup.ReactMarkupCode>{`
|
|
101
98
|
<TableList
|
|
102
99
|
dragAndDrop
|
|
103
100
|
addItem
|
|
104
101
|
array={this.state.array}
|
|
105
|
-
itemsDropdown={[
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
102
|
+
itemsDropdown={(index) => [
|
|
103
|
+
{ label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => console.log(index) },
|
|
104
|
+
{ label: <Label style='translucent' text='prlg' />, onSelect: () => console.log(index) },
|
|
105
|
+
{ label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => console.log(index) },
|
|
106
|
+
]
|
|
107
|
+
}
|
|
108
|
+
onDrag={(start, end) => console.log(start, end)}
|
|
111
109
|
/>
|
|
112
110
|
`}
|
|
113
111
|
</Markup.ReactMarkupCode>
|
|
@@ -116,16 +114,15 @@ export default class TableListDoc extends React.Component<IProps, IState> {
|
|
|
116
114
|
<h3 className="docs-page__h3">Props</h3>
|
|
117
115
|
<p className="docs-page__paragraph">TableList</p>
|
|
118
116
|
<PropsList>
|
|
119
|
-
<Prop name='array' isRequired={
|
|
120
|
-
<Prop name='children' isRequired={false} type='React.ReactNode' default='false' description='Children of component.' />
|
|
117
|
+
<Prop name='array' isRequired={true} type='Array' default='false' description='Array of object.' />
|
|
121
118
|
<Prop name='addItem' isRequired={false} type='boolean' default='false' description='Functionality to add items to the list.' />
|
|
122
119
|
<Prop name='dragAndDrop' isRequired={false} type='boolean' default='false' description='Drag&Drop functionality.' />
|
|
123
|
-
<Prop name='itemsDropdown' isRequired={false} type='React.ReactNode | any' default='false' description='Dropdown for functionality to add items to the list.' />
|
|
124
120
|
<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='' />
|
|
126
|
-
<Prop name='
|
|
121
|
+
<Prop name='showDragHandle' isRequired={false} type='string' default='always' description='"always" | "onHover" | "none".' />
|
|
122
|
+
<Prop name='readOnly' isRequired={false} type='boolean' default='false' description='When specified, component changes are not enabled.' />
|
|
127
123
|
<Prop name='onDrag' isRequired={false} type='function' default='false' description='Returns start and end position of draggable item' />
|
|
128
124
|
<Prop name='onAddItem' isRequired={false} type='function' default='false' description='Returns index of draggable item.' />
|
|
125
|
+
<Prop name='itemsDropdown' isRequired={false} type='function' default='false' description='Dropdown for adding items in the list. Returns index of draggable item.' />
|
|
129
126
|
</PropsList>
|
|
130
127
|
<p className="docs-page__paragraph">array:</p>
|
|
131
128
|
<PropsList>
|
|
@@ -133,6 +130,7 @@ export default class TableListDoc extends React.Component<IProps, IState> {
|
|
|
133
130
|
<Prop name='center' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
|
|
134
131
|
<Prop name='end' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
|
|
135
132
|
<Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='Column of individual list items that is displayed on hover.' />
|
|
133
|
+
<Prop name='hexColor' isRequired={false} type='string' default='false' description='' />
|
|
136
134
|
<Prop name='onClick' isRequired={false} type='function' default='false' description='onClick functionality.' />
|
|
137
135
|
<Prop name='onDoubleClick' isRequired={false} type='function' default='false' description='onDoubleClick functionality.' />
|
|
138
136
|
</PropsList>
|
|
@@ -40,6 +40,7 @@ const ToggleboxDocs = () => {
|
|
|
40
40
|
<Prop name='hideUsingCSS' isRequired={false} type='boolean' default='false' description='Usefull when working with forms. Content of togglebox will be hidden but remain rendered.' />
|
|
41
41
|
<Prop name='initiallyOpen' isRequired={false} type='boolean' default='false' description='Opens togglebox on initial render' />
|
|
42
42
|
<Prop name='className' isRequired={false} type='string' default='null' description='Style class of the component' />
|
|
43
|
+
<Prop name='margin' isRequired={false} type='none | small | normal | large' default='normal' description='Defines the bottom margin of the toggle box.' />
|
|
43
44
|
<Prop name='onOpen' isRequired={false} type='function' default='null' description='Callback on open event' />
|
|
44
45
|
<Prop name='onClose' isRequired={false} type='function' default='null' description='Callback on close event' />
|
|
45
46
|
</PropsList>
|
|
@@ -47,5 +48,4 @@ const ToggleboxDocs = () => {
|
|
|
47
48
|
)
|
|
48
49
|
}
|
|
49
50
|
|
|
50
|
-
|
|
51
51
|
export default ToggleboxDocs;
|
package/package.json
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
export interface IMenuItem {
|
|
3
|
-
label: string;
|
|
3
|
+
label: string | React.ReactNode;
|
|
4
4
|
icon?: string;
|
|
5
5
|
active?: boolean;
|
|
6
6
|
onSelect(): void;
|
|
7
7
|
}
|
|
8
8
|
export interface ISubmenu {
|
|
9
9
|
type: 'submenu';
|
|
10
|
-
label: string;
|
|
10
|
+
label: string | React.ReactNode;
|
|
11
11
|
icon?: string;
|
|
12
12
|
items: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
|
|
13
13
|
}
|
|
14
14
|
export interface IMenuGroup {
|
|
15
15
|
type: 'group';
|
|
16
|
-
label?: string;
|
|
16
|
+
label?: string | React.ReactNode;
|
|
17
17
|
items: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
|
|
18
18
|
}
|
|
19
19
|
interface IMenu {
|
|
20
|
-
label?: string;
|
|
20
|
+
label?: string | React.ReactNode;
|
|
21
21
|
align?: 'left' | 'right';
|
|
22
22
|
items: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
|
|
23
23
|
header?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
|