superdesk-ui-framework 3.0.7 → 3.0.9

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 (72) hide show
  1. package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +3 -1
  2. package/app-typescript/components/Lists/ContentList.tsx +28 -27
  3. package/app-typescript/components/Lists/TableList.tsx +140 -126
  4. package/app-typescript/components/SingleAndDoubleClickFunction.tsx +21 -0
  5. package/dist/examples.bundle.js +1019 -977
  6. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +18 -10
  7. package/dist/playgrounds/react-playgrounds/Multiedit.tsx +15 -13
  8. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +136 -125
  9. package/dist/superdesk-ui.bundle.js +735 -706
  10. package/dist/vendor.bundle.js +14 -14
  11. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +18 -10
  12. package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +15 -13
  13. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +136 -125
  14. package/package.json +1 -1
  15. package/react/components/Layouts/AuthoringInnerBody.js +3 -1
  16. package/react/components/Lists/ContentList.d.ts +2 -5
  17. package/react/components/Lists/ContentList.js +20 -25
  18. package/react/components/Lists/TableList.d.ts +4 -7
  19. package/react/components/Lists/TableList.js +66 -60
  20. package/react/components/SingleAndDoubleClickFunction.d.ts +6 -0
  21. package/react/components/SingleAndDoubleClickFunction.js +19 -0
  22. package/.vscode/settings.json +0 -5
  23. package/app-typescript/dist/components/Alert.d.ts +0 -16
  24. package/app-typescript/dist/components/Autocomplete.d.ts +0 -48
  25. package/app-typescript/dist/components/Avatar.d.ts +0 -33
  26. package/app-typescript/dist/components/Badge.d.ts +0 -13
  27. package/app-typescript/dist/components/Button.d.ts +0 -23
  28. package/app-typescript/dist/components/ButtonGroup.d.ts +0 -12
  29. package/app-typescript/dist/components/CheckButtonGroup.d.ts +0 -11
  30. package/app-typescript/dist/components/CheckGroup.d.ts +0 -9
  31. package/app-typescript/dist/components/Checkbox.d.ts +0 -19
  32. package/app-typescript/dist/components/CheckboxButton.d.ts +0 -19
  33. package/app-typescript/dist/components/DatePicker.d.ts +0 -37
  34. package/app-typescript/dist/components/Divider.d.ts +0 -9
  35. package/app-typescript/dist/components/DonutChart.d.ts +0 -12
  36. package/app-typescript/dist/components/Dropdown.d.ts +0 -28
  37. package/app-typescript/dist/components/DropdownFirst.d.ts +0 -42
  38. package/app-typescript/dist/components/EmptyState.d.ts +0 -11
  39. package/app-typescript/dist/components/FormLabel.d.ts +0 -9
  40. package/app-typescript/dist/components/Genie.d.ts +0 -13
  41. package/app-typescript/dist/components/GridItem.d.ts +0 -69
  42. package/app-typescript/dist/components/GridList.d.ts +0 -14
  43. package/app-typescript/dist/components/HeadingText.d.ts +0 -10
  44. package/app-typescript/dist/components/HelloWorld.d.ts +0 -8
  45. package/app-typescript/dist/components/Icon.d.ts +0 -12
  46. package/app-typescript/dist/components/IconButton.d.ts +0 -12
  47. package/app-typescript/dist/components/IconLabel.d.ts +0 -11
  48. package/app-typescript/dist/components/Input.d.ts +0 -24
  49. package/app-typescript/dist/components/Label.d.ts +0 -15
  50. package/app-typescript/dist/components/LeftMenu.d.ts +0 -26
  51. package/app-typescript/dist/components/Loader.d.ts +0 -8
  52. package/app-typescript/dist/components/NavButton.d.ts +0 -15
  53. package/app-typescript/dist/components/Popover.d.ts +0 -13
  54. package/app-typescript/dist/components/PropsList.d.ts +0 -15
  55. package/app-typescript/dist/components/Radio.d.ts +0 -19
  56. package/app-typescript/dist/components/RadioButton.d.ts +0 -20
  57. package/app-typescript/dist/components/Select.d.ts +0 -29
  58. package/app-typescript/dist/components/SelectWithTemplate.d.ts +0 -32
  59. package/app-typescript/dist/components/SlidingToolbar.d.ts +0 -8
  60. package/app-typescript/dist/components/StrechBar.d.ts +0 -4
  61. package/app-typescript/dist/components/SubNav.d.ts +0 -10
  62. package/app-typescript/dist/components/Switch.d.ts +0 -12
  63. package/app-typescript/dist/components/TabCustom.d.ts +0 -25
  64. package/app-typescript/dist/components/TabList.d.ts +0 -22
  65. package/app-typescript/dist/components/Tag.d.ts +0 -9
  66. package/app-typescript/dist/components/TagInput.d.ts +0 -7
  67. package/app-typescript/dist/components/TagInputTest.d.ts +0 -18
  68. package/app-typescript/dist/components/TimePicker.d.ts +0 -11
  69. package/app-typescript/dist/components/Tooltip.d.ts +0 -11
  70. package/app-typescript/dist/components/_Positioner.d.ts +0 -27
  71. package/app-typescript/dist/index.d.ts +0 -56
  72. package/yarn-error.log +0 -111
package/dist/playgrounds/react-playgrounds/EditorTest.tsx CHANGED
@@ -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
- items={[
445
- { icon: 'info', size: 'big', tooltip: 'Info', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}), id: '1' },
446
- { icon: 'chat', size: 'big', tooltip: 'Comments', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}), id: '2' },
447
- { icon: 'history', size: 'big', tooltip: 'History', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}), id: '3' },
448
- { icon: 'package', size: 'big', tooltip: 'Packages', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}), id: '4' },
449
- { icon: 'attachment', size: 'big', tooltip: 'Attachments', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}), id: '5' },
450
- { icon: 'comments', size: 'big', tooltip: 'Inline Comments', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}), id: '6' },
451
- { icon: 'suggestion', size: 'big', tooltip: 'Suggestions', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}), id: '7' }
452
- ]}
453
- active={'3'}
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={(
package/dist/playgrounds/react-playgrounds/Multiedit.tsx CHANGED
@@ -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
- items={[
312
- { icon: 'info', size: 'big', tooltip: 'Info', onClick: () => false, id: '1' },
313
- { icon: 'chat', size: 'big', tooltip: 'Comments', onClick: () => false, id: '2' },
314
- { icon: 'history', size: 'big', tooltip: 'History', onClick: () => false, id: '3' },
315
- { icon: 'package', size: 'big', tooltip: 'Packages', onClick: () => false, id: '4' },
316
- { icon: 'attachment', size: 'big', tooltip: 'Attachments', onClick: () => false, id: '5'},
317
- { icon: 'comments', size: 'big', tooltip: 'Inline Comments', onClick: () => false, id: '6' },
318
- { icon: 'suggestion', size: 'big', tooltip: 'Suggestions', onClick: () => false, id: '7' }
319
- ]}
320
- activeTab={this.state.activeTab}
321
- onActiveTabChange={(e) => this.setState({
322
- activeTab: e,
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
  />
package/dist/playgrounds/react-playgrounds/RundownEditor.tsx CHANGED
@@ -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
- <Layout.AuthoringMain
342
- headerPadding='medium'
343
- toolbarCustom={true}
344
- headerCollapsed={true}
345
- toolBar={(
346
- <React.Fragment>
347
- <SubNav className='sd-shadow--z0'>
348
- <SlidingToolbar>
349
- <ButtonGroup align='start'>
350
- <IconButton ariaValue="Close" icon="close-small" onClick={() => this.props.closePanel()} />
351
- </ButtonGroup>
352
- <ButtonGroup align='end'>
353
- <Button text="Save Changes" style='hollow' onClick={() => this.props.closePanel()} type="primary" />
354
- </ButtonGroup>
355
- </SlidingToolbar>
356
- </SubNav>
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
- <div className='sd-editor-content__toolbar-inner'>
359
- <div className="sd-editor-toolbar__content">
360
- <dl>
361
- <dt>Created</dt>
362
- <dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
363
- <dt>by</dt>
364
- <dt>Nareg Asmarian</dt>
365
- </dl>
366
- <dl>
367
- <dt>Modified</dt>
368
- <dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
369
- </dl>
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
- </div>
372
- </React.Fragment>
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
- </Layout.AuthoringMain>
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
- items={[
457
- { icon: 'info', size: 'big', tooltip: 'Info', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
458
- { icon: 'chat', size: 'big', tooltip: 'Comments', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
459
- { icon: 'history', size: 'big', tooltip: 'History', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
460
- { icon: 'package', size: 'big', tooltip: 'Packages', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
461
- { icon: 'attachment', size: 'big', tooltip: 'Attachments', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
462
- { icon: 'comments', size: 'big', tooltip: 'Inline Comments', badgeValue: '5', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) },
463
- { icon: 'suggestion', size: 'big', tooltip: 'Suggestions', onClick: () => this.setState({'sideOverlayOpen': !this.state.sideOverlayOpen}) }]} />
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
  );