superdesk-ui-framework 3.0.7 → 3.0.8
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-typescript/components/Lists/ContentList.tsx +28 -27
- package/app-typescript/components/Lists/TableList.tsx +140 -126
- package/app-typescript/components/SingleAndDoubleClickFunction.tsx +21 -0
- package/dist/examples.bundle.js +1016 -976
- package/dist/playgrounds/react-playgrounds/EditorTest.tsx +18 -10
- package/dist/playgrounds/react-playgrounds/Multiedit.tsx +15 -13
- package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +136 -125
- package/dist/superdesk-ui.bundle.js +732 -705
- package/dist/vendor.bundle.js +14 -14
- package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +18 -10
- package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +15 -13
- package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +136 -125
- package/package.json +1 -1
- package/react/components/Lists/ContentList.d.ts +2 -5
- package/react/components/Lists/ContentList.js +20 -25
- package/react/components/Lists/TableList.d.ts +4 -7
- package/react/components/Lists/TableList.js +66 -60
- package/react/components/SingleAndDoubleClickFunction.d.ts +6 -0
- package/react/components/SingleAndDoubleClickFunction.js +19 -0
|
@@ -25,6 +25,7 @@ interface IState {
|
|
|
25
25
|
rightPanelOpen: boolean;
|
|
26
26
|
rightPanelPinned: boolean;
|
|
27
27
|
sideOverlayOpen: boolean;
|
|
28
|
+
activeTab: string | null;
|
|
28
29
|
}
|
|
29
30
|
|
|
30
31
|
export class EditorTest extends React.Component<IProps, IState> {
|
|
@@ -44,6 +45,7 @@ export class EditorTest extends React.Component<IProps, IState> {
|
|
|
44
45
|
rightPanelOpen: false,
|
|
45
46
|
rightPanelPinned: false,
|
|
46
47
|
sideOverlayOpen: false,
|
|
48
|
+
activeTab: null,
|
|
47
49
|
|
|
48
50
|
}
|
|
49
51
|
this.handleTheme = this.handleTheme.bind(this);
|
|
@@ -441,16 +443,22 @@ export class EditorTest extends React.Component<IProps, IState> {
|
|
|
441
443
|
)}
|
|
442
444
|
sideBar={(
|
|
443
445
|
<Nav.SideBarTabs
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
446
|
+
items={[
|
|
447
|
+
{ icon: 'info', size: 'big', tooltip: 'Info', id: '1' },
|
|
448
|
+
{ icon: 'chat', size: 'big', tooltip: 'Comments', id: '2' },
|
|
449
|
+
{ icon: 'history', size: 'big', tooltip: 'History', id: '3' },
|
|
450
|
+
{ icon: 'package', size: 'big', tooltip: 'Packages', id: '4' },
|
|
451
|
+
{ icon: 'attachment', size: 'big', tooltip: 'Attachments', id: '5' },
|
|
452
|
+
{ icon: 'comments', size: 'big', tooltip: 'Inline Comments', id: '6' },
|
|
453
|
+
{ icon: 'suggestion', size: 'big', tooltip: 'Suggestions', id: '7' }
|
|
454
|
+
]}
|
|
455
|
+
activeTab={this.state.activeTab}
|
|
456
|
+
onActiveTabChange={(val) => {
|
|
457
|
+
this.setState({
|
|
458
|
+
activeTab: val,
|
|
459
|
+
sideOverlayOpen: !this.state.sideOverlayOpen,
|
|
460
|
+
});
|
|
461
|
+
}}
|
|
454
462
|
/>
|
|
455
463
|
)}
|
|
456
464
|
overlayPanel={(
|
|
@@ -308,19 +308,21 @@ export class Editor extends React.Component<{}, IEditor> {
|
|
|
308
308
|
sideBarClosed={this.state.sideBarOpen}
|
|
309
309
|
sideBar={(
|
|
310
310
|
<Nav.SideBarTabs
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
311
|
+
items={[
|
|
312
|
+
{ icon: 'info', size: 'big', tooltip: 'Info', id: '1' },
|
|
313
|
+
{ icon: 'chat', size: 'big', tooltip: 'Comments', id: '2' },
|
|
314
|
+
{ icon: 'history', size: 'big', tooltip: 'History', id: '3' },
|
|
315
|
+
{ icon: 'package', size: 'big', tooltip: 'Packages', id: '4' },
|
|
316
|
+
{ icon: 'attachment', size: 'big', tooltip: 'Attachments', id: '5'},
|
|
317
|
+
{ icon: 'comments', size: 'big', tooltip: 'Inline Comments', id: '6' },
|
|
318
|
+
{ icon: 'suggestion', size: 'big', tooltip: 'Suggestions', id: '7' }
|
|
319
|
+
]}
|
|
320
|
+
activeTab={this.state.activeTab}
|
|
321
|
+
onActiveTabChange={(val) => {
|
|
322
|
+
this.setState({
|
|
323
|
+
activeTab: val,
|
|
324
|
+
})
|
|
325
|
+
}}
|
|
324
326
|
/>
|
|
325
327
|
)}
|
|
326
328
|
/>
|
|
@@ -28,6 +28,7 @@ interface IState {
|
|
|
28
28
|
sideOverlayOpen: boolean;
|
|
29
29
|
array: any;
|
|
30
30
|
inputValue: string;
|
|
31
|
+
activeTab: string | null;
|
|
31
32
|
}
|
|
32
33
|
|
|
33
34
|
export class RundownEditor extends React.Component<IProps, IState> {
|
|
@@ -114,7 +115,8 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
|
114
115
|
action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
|
|
115
116
|
onClick: () => { this.props.openPanel() }
|
|
116
117
|
},
|
|
117
|
-
]
|
|
118
|
+
],
|
|
119
|
+
activeTab: null,
|
|
118
120
|
}
|
|
119
121
|
this.handleTheme = this.handleTheme.bind(this);
|
|
120
122
|
}
|
|
@@ -135,14 +137,14 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
|
135
137
|
render() {
|
|
136
138
|
return (
|
|
137
139
|
<Layout.LayoutContainer>
|
|
138
|
-
<Layout.HeaderPanel>
|
|
140
|
+
<Layout.HeaderPanel>
|
|
139
141
|
<SubNav>
|
|
140
142
|
<ButtonGroup align='end'>
|
|
141
143
|
<Button text="Cancel" onClick={()=> false} type="default" />
|
|
142
144
|
<Button text="Save Rundown" onClick={()=> false} type="primary" />
|
|
143
145
|
<Divider size="mini" />
|
|
144
146
|
<ButtonGroup subgroup={true} spaces="no-space">
|
|
145
|
-
|
|
147
|
+
|
|
146
148
|
<Tooltip text='Minimize' flow='left'>
|
|
147
149
|
<NavButton type='default' icon='minimize' iconSize='big' text='Minimize' onClick={()=> false} />
|
|
148
150
|
</Tooltip>
|
|
@@ -156,7 +158,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
|
156
158
|
</ButtonGroup>
|
|
157
159
|
</SubNav>
|
|
158
160
|
</Layout.HeaderPanel>
|
|
159
|
-
|
|
161
|
+
|
|
160
162
|
<Layout.MainPanel padding='none'>
|
|
161
163
|
<Layout.AuthoringMain
|
|
162
164
|
headerPadding='medium'
|
|
@@ -233,7 +235,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
|
233
235
|
required={false}
|
|
234
236
|
disabled={false}
|
|
235
237
|
invalid={false}
|
|
236
|
-
onChange={(value) => {}} />
|
|
238
|
+
onChange={(value) => {}} />
|
|
237
239
|
</Form.FormItem>
|
|
238
240
|
<Form.FormItem>
|
|
239
241
|
<Input
|
|
@@ -245,7 +247,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
|
245
247
|
required={false}
|
|
246
248
|
disabled={false}
|
|
247
249
|
invalid={false}
|
|
248
|
-
onChange={(value) => {}} />
|
|
250
|
+
onChange={(value) => {}} />
|
|
249
251
|
</Form.FormItem>
|
|
250
252
|
</Form.FormGroup>
|
|
251
253
|
<Form.FormGroup>
|
|
@@ -300,7 +302,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
|
300
302
|
)}
|
|
301
303
|
>
|
|
302
304
|
<Container direction='column' className='sd-margin-y--2'>
|
|
303
|
-
<Input
|
|
305
|
+
<Input
|
|
304
306
|
label='Rundown title'
|
|
305
307
|
value={'Marker // 01.06.2022'}
|
|
306
308
|
boxedStyle={true}
|
|
@@ -338,133 +340,142 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
|
338
340
|
<Layout.PanelContent>
|
|
339
341
|
<Layout.AuthoringFrame
|
|
340
342
|
main={
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
343
|
+
<Layout.AuthoringMain
|
|
344
|
+
headerPadding='medium'
|
|
345
|
+
toolbarCustom={true}
|
|
346
|
+
headerCollapsed={true}
|
|
347
|
+
toolBar={(
|
|
348
|
+
<React.Fragment>
|
|
349
|
+
<SubNav className='sd-shadow--z0'>
|
|
350
|
+
<SlidingToolbar>
|
|
351
|
+
<ButtonGroup align='start'>
|
|
352
|
+
<IconButton ariaValue="Close" icon="close-small" onClick={() => this.props.closePanel()} />
|
|
353
|
+
</ButtonGroup>
|
|
354
|
+
<ButtonGroup align='end'>
|
|
355
|
+
<Button text="Save Changes" style='hollow' onClick={() => this.props.closePanel()} type="primary" />
|
|
356
|
+
</ButtonGroup>
|
|
357
|
+
</SlidingToolbar>
|
|
358
|
+
</SubNav>
|
|
357
359
|
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
360
|
+
<div className='sd-editor-content__toolbar-inner'>
|
|
361
|
+
<div className="sd-editor-toolbar__content">
|
|
362
|
+
<dl>
|
|
363
|
+
<dt>Created</dt>
|
|
364
|
+
<dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
|
|
365
|
+
<dt>by</dt>
|
|
366
|
+
<dt>Nareg Asmarian</dt>
|
|
367
|
+
</dl>
|
|
368
|
+
<dl>
|
|
369
|
+
<dt>Modified</dt>
|
|
370
|
+
<dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
|
|
371
|
+
</dl>
|
|
372
|
+
</div>
|
|
370
373
|
</div>
|
|
371
|
-
</
|
|
372
|
-
|
|
373
|
-
)}
|
|
374
|
-
authoringHeader={(
|
|
375
|
-
<React.Fragment>
|
|
376
|
-
<Form.FormGroup inlineLabel={false}>
|
|
377
|
-
<Form.FormItem>
|
|
378
|
-
<Select
|
|
379
|
-
label='Type'
|
|
380
|
-
value='Type value'
|
|
381
|
-
error='This is error message'
|
|
382
|
-
info=' '
|
|
383
|
-
required={true}
|
|
384
|
-
disabled={false}
|
|
385
|
-
invalid={false}
|
|
386
|
-
onChange={(value) => {}}>
|
|
387
|
-
<Option>Type 1</Option>
|
|
388
|
-
<Option>Type 2</Option>
|
|
389
|
-
</Select>
|
|
390
|
-
</Form.FormItem>
|
|
391
|
-
<Form.FormItem>
|
|
392
|
-
<Select
|
|
393
|
-
label='Show section'
|
|
394
|
-
value='Some value'
|
|
395
|
-
error='This is error message'
|
|
396
|
-
info=' '
|
|
397
|
-
required={true}
|
|
398
|
-
disabled={false}
|
|
399
|
-
invalid={false}
|
|
400
|
-
onChange={(value) => {}}>
|
|
401
|
-
<Option>Section 1</Option>
|
|
402
|
-
<Option>Section 2</Option>
|
|
403
|
-
</Select>
|
|
404
|
-
</Form.FormItem>
|
|
405
|
-
</Form.FormGroup>
|
|
406
|
-
<Form.FormGroup inlineLabel={false}>
|
|
407
|
-
<Form.FormItem>
|
|
408
|
-
<Select
|
|
409
|
-
label='Duration'
|
|
410
|
-
value='Some value'
|
|
411
|
-
error='This is error message'
|
|
412
|
-
info=' '
|
|
413
|
-
required={true}
|
|
414
|
-
disabled={false}
|
|
415
|
-
invalid={false}
|
|
416
|
-
onChange={(value) => {}}>
|
|
417
|
-
<Option>Option 1</Option>
|
|
418
|
-
<Option>Option 2</Option>
|
|
419
|
-
</Select>
|
|
420
|
-
</Form.FormItem>
|
|
421
|
-
<Form.FormItem>
|
|
422
|
-
<Input
|
|
423
|
-
type='text'
|
|
424
|
-
label='Category'
|
|
425
|
-
value=' '
|
|
426
|
-
error='This is error message'
|
|
427
|
-
info=' '
|
|
428
|
-
required={false}
|
|
429
|
-
disabled={false}
|
|
430
|
-
invalid={false}
|
|
431
|
-
onChange={(value) => {}} />
|
|
432
|
-
</Form.FormItem>
|
|
433
|
-
</Form.FormGroup>
|
|
434
|
-
<Form.FormGroup inlineLabel={false}>
|
|
435
|
-
<Form.FormItem>
|
|
436
|
-
<Input
|
|
437
|
-
type='text'
|
|
438
|
-
label='Author'
|
|
439
|
-
value='This is some value'
|
|
440
|
-
error='This is error message'
|
|
441
|
-
info=' '
|
|
442
|
-
required={false}
|
|
443
|
-
disabled={false}
|
|
444
|
-
invalid={false}
|
|
445
|
-
onChange={(value) => {}} />
|
|
446
|
-
</Form.FormItem>
|
|
447
|
-
</Form.FormGroup>
|
|
448
|
-
</React.Fragment>
|
|
449
|
-
)}
|
|
450
|
-
>
|
|
374
|
+
</React.Fragment>
|
|
375
|
+
)}
|
|
451
376
|
|
|
452
|
-
|
|
377
|
+
authoringHeader={(
|
|
378
|
+
<React.Fragment>
|
|
379
|
+
<Form.FormGroup inlineLabel={false}>
|
|
380
|
+
<Form.FormItem>
|
|
381
|
+
<Select
|
|
382
|
+
label='Type'
|
|
383
|
+
value='Type value'
|
|
384
|
+
error='This is error message'
|
|
385
|
+
info=' '
|
|
386
|
+
required={true}
|
|
387
|
+
disabled={false}
|
|
388
|
+
invalid={false}
|
|
389
|
+
onChange={(value) => {}}>
|
|
390
|
+
<Option>Type 1</Option>
|
|
391
|
+
<Option>Type 2</Option>
|
|
392
|
+
</Select>
|
|
393
|
+
</Form.FormItem>
|
|
394
|
+
<Form.FormItem>
|
|
395
|
+
<Select
|
|
396
|
+
label='Show section'
|
|
397
|
+
value='Some value'
|
|
398
|
+
error='This is error message'
|
|
399
|
+
info=' '
|
|
400
|
+
required={true}
|
|
401
|
+
disabled={false}
|
|
402
|
+
invalid={false}
|
|
403
|
+
onChange={(value) => {}}>
|
|
404
|
+
<Option>Section 1</Option>
|
|
405
|
+
<Option>Section 2</Option>
|
|
406
|
+
</Select>
|
|
407
|
+
</Form.FormItem>
|
|
408
|
+
</Form.FormGroup>
|
|
409
|
+
<Form.FormGroup inlineLabel={false}>
|
|
410
|
+
<Form.FormItem>
|
|
411
|
+
<Select
|
|
412
|
+
label='Duration'
|
|
413
|
+
value='Some value'
|
|
414
|
+
error='This is error message'
|
|
415
|
+
info=' '
|
|
416
|
+
required={true}
|
|
417
|
+
disabled={false}
|
|
418
|
+
invalid={false}
|
|
419
|
+
onChange={(value) => {}}>
|
|
420
|
+
<Option>Option 1</Option>
|
|
421
|
+
<Option>Option 2</Option>
|
|
422
|
+
</Select>
|
|
423
|
+
</Form.FormItem>
|
|
424
|
+
<Form.FormItem>
|
|
425
|
+
<Input
|
|
426
|
+
type='text'
|
|
427
|
+
label='Category'
|
|
428
|
+
value=' '
|
|
429
|
+
error='This is error message'
|
|
430
|
+
info=' '
|
|
431
|
+
required={false}
|
|
432
|
+
disabled={false}
|
|
433
|
+
invalid={false}
|
|
434
|
+
onChange={(value) => {}} />
|
|
435
|
+
</Form.FormItem>
|
|
436
|
+
</Form.FormGroup>
|
|
437
|
+
<Form.FormGroup inlineLabel={false}>
|
|
438
|
+
<Form.FormItem>
|
|
439
|
+
<Input
|
|
440
|
+
type='text'
|
|
441
|
+
label='Author'
|
|
442
|
+
value='This is some value'
|
|
443
|
+
error='This is error message'
|
|
444
|
+
info=' '
|
|
445
|
+
required={false}
|
|
446
|
+
disabled={false}
|
|
447
|
+
invalid={false}
|
|
448
|
+
onChange={(value) => {}} />
|
|
449
|
+
</Form.FormItem>
|
|
450
|
+
</Form.FormGroup>
|
|
451
|
+
</React.Fragment>
|
|
452
|
+
)}
|
|
453
|
+
>
|
|
454
|
+
</Layout.AuthoringMain>
|
|
453
455
|
}
|
|
456
|
+
|
|
454
457
|
sideBar={(
|
|
455
458
|
<Nav.SideBarTabs
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
459
|
+
items={[
|
|
460
|
+
{ icon: 'info', size: 'big', tooltip: 'Info', id: '1' },
|
|
461
|
+
{ icon: 'chat', size: 'big', tooltip: 'Comments', id: '2' },
|
|
462
|
+
{ icon: 'history', size: 'big', tooltip: 'History', id: '3' },
|
|
463
|
+
{ icon: 'package', size: 'big', tooltip: 'Packages', id: '4' },
|
|
464
|
+
{ icon: 'attachment', size: 'big', tooltip: 'Attachments', id: '5' },
|
|
465
|
+
{ icon: 'comments', size: 'big', tooltip: 'Inline Comments', badgeValue: '5', id: '6' },
|
|
466
|
+
{ icon: 'suggestion', size: 'big', tooltip: 'Suggestions', id: '7' }
|
|
467
|
+
]}
|
|
468
|
+
activeTab={this.state.activeTab}
|
|
469
|
+
onActiveTabChange={(id) => {
|
|
470
|
+
this.setState({
|
|
471
|
+
activeTab: id,
|
|
472
|
+
})
|
|
473
|
+
}}
|
|
474
|
+
/>
|
|
464
475
|
)}
|
|
465
476
|
/>
|
|
466
477
|
</Layout.PanelContent>
|
|
467
|
-
</Layout.Panel>
|
|
478
|
+
</Layout.Panel>
|
|
468
479
|
</Layout.RightPanel>
|
|
469
480
|
</Layout.LayoutContainer>
|
|
470
481
|
);
|