superdesk-ui-framework 3.0.66 → 3.0.68

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 (78) hide show
  1. package/app/styles/components/_list-item.scss +22 -11
  2. package/app-typescript/components/Autocomplete.tsx +9 -3
  3. package/app-typescript/components/Badge.tsx +16 -2
  4. package/app-typescript/components/Dropdown.tsx +3 -1
  5. package/app-typescript/components/DropdownFirst.tsx +14 -2
  6. package/app-typescript/components/DurationInput.tsx +19 -4
  7. package/app-typescript/components/EmptyState.tsx +11 -2
  8. package/app-typescript/components/Layouts/Panel.tsx +12 -1
  9. package/app-typescript/components/Lists/ContentList.tsx +5 -1
  10. package/app-typescript/components/Modal.tsx +10 -1
  11. package/app-typescript/components/Navigation/BottomNav.tsx +9 -2
  12. package/app-typescript/components/Navigation/QuickNavBar.tsx +10 -2
  13. package/app-typescript/components/Navigation/SideBarMenu.tsx +9 -4
  14. package/app-typescript/components/SidebarMenu.tsx +8 -1
  15. package/app-typescript/components/TabList.tsx +5 -1
  16. package/app-typescript/components/TagInput.tsx +4 -1
  17. package/app-typescript/components/ThemeSelector.tsx +13 -2
  18. package/app-typescript/components/TreeMenu.tsx +127 -122
  19. package/app-typescript/components/TreeSelect/TreeSelect.tsx +157 -141
  20. package/app-typescript/components/WithPortal.tsx +49 -0
  21. package/app-typescript/components/avatar/avatar-image.tsx +2 -0
  22. package/app-typescript/components/avatar/avatar.tsx +2 -1
  23. package/dist/examples.bundle.js +1446 -1318
  24. package/dist/playgrounds/planning.html +121 -43
  25. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +398 -385
  26. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +359 -365
  27. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +33 -33
  28. package/dist/playgrounds/react-playgrounds/Multiedit.tsx +227 -231
  29. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +41 -38
  30. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +76 -96
  31. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +73 -101
  32. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +788 -729
  33. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +35 -26
  34. package/dist/playgrounds/react-playgrounds/TestGround.tsx +99 -128
  35. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +40 -25
  36. package/dist/playgrounds/react-playgrounds/components/GraphicButton.tsx +6 -5
  37. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +0 -2
  38. package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -9
  39. package/dist/playgrounds/react-playgrounds/tsconfig.json +4 -0
  40. package/dist/superdesk-ui.bundle.css +24 -14
  41. package/dist/superdesk-ui.bundle.js +830 -727
  42. package/dist/vendor.bundle.js +14 -14
  43. package/examples/pages/playgrounds/planning.html +121 -43
  44. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +398 -385
  45. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +359 -365
  46. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +33 -33
  47. package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +227 -231
  48. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +41 -38
  49. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +76 -96
  50. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +73 -101
  51. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +788 -729
  52. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +35 -26
  53. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +99 -128
  54. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +40 -25
  55. package/examples/pages/playgrounds/react-playgrounds/components/GraphicButton.tsx +6 -5
  56. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +0 -2
  57. package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -9
  58. package/examples/pages/playgrounds/react-playgrounds/tsconfig.json +4 -0
  59. package/package.json +3 -2
  60. package/react/components/Autocomplete.js +2 -2
  61. package/react/components/Badge.js +1 -1
  62. package/react/components/Dropdown.js +3 -1
  63. package/react/components/DropdownFirst.js +6 -2
  64. package/react/components/DurationInput.js +5 -1
  65. package/react/components/EmptyState.js +2 -1
  66. package/react/components/Lists/ContentList.js +1 -1
  67. package/react/components/Navigation/BottomNav.js +4 -1
  68. package/react/components/Navigation/QuickNavBar.js +2 -1
  69. package/react/components/Navigation/SideBarMenu.js +3 -1
  70. package/react/components/TabList.js +2 -1
  71. package/react/components/TagInput.js +1 -1
  72. package/react/components/TreeSelect/TreeSelect.d.ts +3 -2
  73. package/react/components/TreeSelect/TreeSelect.js +81 -73
  74. package/react/components/WithPortal.d.ts +14 -0
  75. package/react/components/WithPortal.js +69 -0
  76. package/react/components/avatar/avatar.js +2 -1
  77. /package/dist/playgrounds/dummy-data/{items.js → items.ts} +0 -0
  78. /package/examples/pages/playgrounds/dummy-data/{items.js → items.ts} +0 -0
package/dist/playgrounds/react-playgrounds/CoreLayout.tsx CHANGED
@@ -1,5 +1,4 @@
1
1
  import * as React from 'react';
2
- import * as Components from './components/Index';
3
2
  import { ButtonGroup, Button, NavButton, SubNav, Dropdown, Input, IconButton, LeftMenu, BoxedList, BoxedListItem, BoxedListContentRow, Heading, Text, Time, Label, CreateButton, IconLabel, RadioButtonGroup, Select, Option } from '../../../../app-typescript/index';
4
3
  import * as Layout from '../../../../app-typescript/components/Layouts';
5
4
  import * as Form from '../../../../app-typescript/components/Form';
@@ -58,10 +57,10 @@ export class CoreLayout extends React.Component<IProps, IState> {
58
57
  mainMenuOpen: false,
59
58
  notificationsOpen: false,
60
59
  botNavArray: [
61
- { icon:'photo', title: 'Sed posuere consectetur est at lobortis.', onClick: () => false, onRemove: (e) => this.handleDelete(e) },
62
- { title: 'Nullam id dolor id nibh ultricies.', onClick: () => false, onRemove: (e) => this.handleDelete(e)},
63
- { icon:'video', title: 'Nulla vitae elit libero, a pharetra augue.', onClick: () => false, onRemove: (e) => this.handleDelete(e)},
64
- { title: 'Donec sed odio dui.', onClick: () => false, onRemove: (e) => this.handleDelete(e)},
60
+ { icon:'photo', title: 'Sed posuere consectetur est at lobortis.', onClick: () => false, onRemove: (e: any) => this.handleDelete(e) },
61
+ { title: 'Nullam id dolor id nibh ultricies.', onClick: () => false, onRemove: (e: any) => this.handleDelete(e)},
62
+ { icon:'video', title: 'Nulla vitae elit libero, a pharetra augue.', onClick: () => false, onRemove: (e: any) => this.handleDelete(e)},
63
+ { title: 'Donec sed odio dui.', onClick: () => false, onRemove: (e: any) => this.handleDelete(e)},
65
64
  ],
66
65
  itemType: 'itemtype01',
67
66
  dropDownState: '',
@@ -194,65 +193,67 @@ export class CoreLayout extends React.Component<IProps, IState> {
194
193
  render() {
195
194
  return (
196
195
  <Layout.CoreLayout
197
- heading='Core Layout'
198
- menuOpen={this.state.mainMenuOpen}
199
- onClick={this.handleMainMenu}
200
- active={this.state.mainMenuOpen}
201
- ariaControls='main-menu'
202
- menuId='main-menu'
203
- editorFullWidth={this.state.fullEditor}
204
- openPanel={this.state.rightPanel}
205
- slideInMenu={(
206
- <Layout.MainMenu
207
- headerTitle='Main Menu'
208
- poweredBy='Powered by Superdesk technology'
209
- header={(null)}
210
- footerContent={true}
211
- footer={(
212
- <p>Menu footer testing</p>
213
- )}>
214
- <LeftMenu
215
- style='blanc'
216
- reverseItemBorder={true}
217
- size='large'
218
- ariaLabel={'Left navigation'}
219
- activeItemId='1'
220
- groups={[
221
- { label: 'MAIN SECTIONS', items: [
222
- { id: '1', label: 'Section 1', ref:'section1'},
223
- { id: '2', label: 'Section 2', ref: 'section2' },
224
- { id: '3', label: 'Section 3', ref: 'section3' },
225
-
226
- ]},
227
- { label:'OTHER SECTIONS', items: [
228
- { id: '4', label: 'Section 4', ref: 'section4' },
229
- { id: '5', label: 'Section 5', ref: 'section5' },
230
- ]},
231
- { label:'OTHER SECTIONS', items: [
232
- { id: '6', label: 'Section 6', ref: 'section6' },
233
- { id: '7', label: 'Section 7', ref: 'section7' },
234
- ]}
235
- ]}
236
- onSelect={() => false} />
237
- </Layout.MainMenu>
196
+ heading='Core Layout'
197
+ menuOpen={this.state.mainMenuOpen}
198
+ onClick={this.handleMainMenu}
199
+ active={this.state.mainMenuOpen}
200
+ ariaControls='main-menu'
201
+ menuId='main-menu'
202
+ editorFullWidth={this.state.fullEditor}
203
+ openPanel={this.state.rightPanel}
204
+ slideInMenu={(
205
+ <Layout.MainMenu
206
+ headerTitle='Main Menu'
207
+ poweredBy='Powered by Superdesk technology'
208
+ header={(null)}
209
+ footerContent={true}
210
+ footer={(
211
+ <p>Menu footer testing</p>
212
+ )}
213
+ >
214
+ <LeftMenu
215
+ style='blanc'
216
+ reverseItemBorder={true}
217
+ size='large'
218
+ ariaLabel={'Left navigation'}
219
+ activeItemId='1'
220
+ groups={[
221
+ { label: 'MAIN SECTIONS', items: [
222
+ { id: '1', label: 'Section 1', ref:'section1'},
223
+ { id: '2', label: 'Section 2', ref: 'section2' },
224
+ { id: '3', label: 'Section 3', ref: 'section3' },
225
+
226
+ ]},
227
+ { label:'OTHER SECTIONS', items: [
228
+ { id: '4', label: 'Section 4', ref: 'section4' },
229
+ { id: '5', label: 'Section 5', ref: 'section5' },
230
+ ]},
231
+ { label:'OTHER SECTIONS', items: [
232
+ { id: '6', label: 'Section 6', ref: 'section6' },
233
+ { id: '7', label: 'Section 7', ref: 'section7' },
234
+ ]}
235
+ ]}
236
+ onSelect={() => false}
237
+ />
238
+ </Layout.MainMenu>
238
239
  )}
239
240
  topMenu={(
240
241
  <NavButton badgeValue='6' icon='bell' text='Show notifications' onClick={this.handleNotifications} />
241
242
  )}
242
243
  footer={(
243
244
  <>
244
- <Layout.BottomBarAction onClick={()=> false} />
245
- <BottomNav
246
- items={this.state.botNavArray} />
245
+ <Layout.BottomBarAction onClick={()=> false} />
246
+ <BottomNav items={this.state.botNavArray} />
247
247
  </>
248
248
  )}
249
249
  overlay={(
250
250
  <Layout.NotificationPanel
251
- header={(null)}
252
- headerTitle='Notifications'
253
- open={this.state.notificationsOpen}
254
- onClick={this.handleNotifications}
255
- theme='dark'>
251
+ header={(null)}
252
+ headerTitle='Notifications'
253
+ open={this.state.notificationsOpen}
254
+ onClick={this.handleNotifications}
255
+ theme='dark'
256
+ >
256
257
  <BoxedList>
257
258
  <BoxedListItem unread={true}>
258
259
  <Time datetime='29.06.2022'>29.06.2022</Time>
@@ -277,377 +278,389 @@ export class CoreLayout extends React.Component<IProps, IState> {
277
278
  </BoxedListItem>
278
279
  </BoxedList>
279
280
  </Layout.NotificationPanel>
280
- )}>
281
-
281
+ )}
282
+ >
282
283
  <Nav.SideBarMenu
283
284
  items={[
284
285
  { icon: 'dashboard', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, },
285
- { icon: 'view', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: () => this.setState({fullEditor: !this.state.fullEditor})},
286
+ { icon: 'view', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: () => this.setState({fullEditor: !this.state.fullEditor}) },
286
287
  { icon: 'marked-star', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: () => this.setState({fullEditor: !this.state.fullEditor}) },
287
288
  { icon: 'spike', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: () => this.setState({fullEditor: !this.state.fullEditor}) },
288
289
  { icon: 'personal', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: () => this.setState({fullEditor: !this.state.fullEditor}) },
289
290
  { icon: 'global-search', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: () => this.setState({fullEditor: !this.state.fullEditor}) },
290
291
  { icon: 'picture', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: () => this.setState({fullEditor: !this.state.fullEditor}) },
291
- { icon: 'rundown', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: () => this.setState({fullEditor: !this.state.fullEditor})
292
- }]} />
292
+ { icon: 'rundown', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: () => this.setState({fullEditor: !this.state.fullEditor}) }
293
+ ]}
294
+ />
293
295
 
294
296
  {!this.state.fullEditor && !this.state.rightPanel
295
- && <Layout.LayoutContainer>
296
- <Layout.HeaderPanel>
297
- <SubNav zIndex={2}>
298
- <SearchBar placeholder='Search media'></SearchBar>
299
- <ButtonGroup align='end' spaces='no-space'>
300
- <Dropdown
301
- items={[
302
- {
303
- type: 'group', label: 'Settings', items: [
304
- 'divider',
305
- { icon: 'switches', label: 'Manage Shows', onSelect: () => this.setState({modalManageShow: true}) },
306
- { icon: 'switches', label: 'Manage Templates', onSelect: () => this.setState({modalManageTemplate: true}) },
307
- ]
308
- }]}>
309
- <NavButton icon='settings' onClick={() => false} />
310
- </Dropdown>
311
- <Dropdown
312
- header={[
313
- {
314
- type: 'group', label: 'Create', items: []
315
- },
316
- {
317
- type: 'submenu', label: 'Rundown', icon: 'plus-sign', items: [
318
- { icon: 'plus-sign', label: 'Rundown', onSelect: () => 1 },
319
- ]
320
- },
321
- ]}
322
- items={[
323
- {
324
- type: 'group', label: 'Recent Templates', items: [
325
- { icon: 'plus-sign', label: 'Marker Daily', onSelect: () => this.setState({ dropDownState: ' ' }) },
326
- { icon: 'plus-sign', label: 'Marker Weekend', onSelect: () => this.setState({ dropDownState: ' ' }) },
327
- { icon: 'plus-sign', label: 'Tabu Daily', onSelect: () => this.setState({ dropDownState: ' ' }) },
328
- { icon: 'plus-sign', label: 'Tabu Specijal', onSelect: () => this.setState({ dropDownState: ' ' }) },
329
- ]
330
- }]}
331
- footer={[
332
- {
333
- type: 'group', items: [
334
- { icon: 'list-plus', label: 'Create new Template', onSelect: () => this.setState({modalNewTemplate: true}) },
335
- { icon: 'rundown', label: 'Create new Show', onSelect: () => this.setState({modalNewShow: true}) },
336
- ]
337
- },
338
- ]}>
339
-
340
- <CreateButton ariaValue='Create' onClick={() => false} />
341
- </Dropdown>
342
- </ButtonGroup>
343
- </SubNav>
344
- <SubNav zIndex={1}>
345
- <ButtonGroup align='start'>
346
- <NavButton icon='filter-large' onClick={this.handleFilter} />
347
- </ButtonGroup>
348
- <ButtonGroup align='end'>
349
- <ButtonGroup align='sub' padded={true} >
350
- <Button size="normal" icon="chevron-left-thin" text="Previous" shape="round" iconOnly={true} disabled onClick={()=> false} />
351
- <Button text='Today' style='hollow' onClick={() => false} />
352
- <Button size="normal" icon="chevron-right-thin" text="Next" shape="round" iconOnly={true} onClick={()=> false} />
353
- </ButtonGroup>
354
- <RadioButtonGroup options={[
355
- {value:'test10', label:'D'},
356
- {value:'test11', label:'W'},
357
- {value:'test12', label:'M'},
358
- ]} group={{padded:false}} value={this.state.itemType} onChange={(value) => this.setState({ itemType: value })} />
359
- <ButtonGroup align='sub' spaces='no-space'>
297
+ && <Layout.LayoutContainer>
298
+ <Layout.HeaderPanel>
299
+ <SubNav zIndex={2}>
300
+ <SearchBar placeholder='Search media'></SearchBar>
301
+ <ButtonGroup align='end' spaces='no-space'>
360
302
  <Dropdown
361
303
  items={[
362
304
  {
363
- type: 'group', label: 'Chose a theme', items: [
305
+ type: 'group', label: 'Settings', items: [
364
306
  'divider',
365
- { label: 'Light', icon: 'adjust', onSelect: () => this.handleTheme('light-ui')},
366
- { label: 'Dark', icon: 'adjust', onSelect: () => this.handleTheme('dark-ui')},
367
- { label: 'Accessible Light', icon: 'adjust', onSelect: () => this.handleTheme('accessible-light-ui')},
307
+ { icon: 'switches', label: 'Manage Shows', onSelect: () => this.setState({modalManageShow: true}) },
308
+ { icon: 'switches', label: 'Manage Templates', onSelect: () => this.setState({modalManageTemplate: true}) },
368
309
  ]
369
- },
370
- ]}>
371
- <NavButton type='default' icon='adjust' onClick={()=> false} />
310
+ }
311
+ ]}
312
+ >
313
+ <NavButton icon='settings' onClick={() => false} />
372
314
  </Dropdown>
373
315
  <Dropdown
316
+ header={[
317
+ {
318
+ type: 'group', label: 'Create', items: []
319
+ },
320
+ {
321
+ type: 'submenu', label: 'Rundown', icon: 'plus-sign', items: [
322
+ { icon: 'plus-sign', label: 'Rundown', onSelect: () => 1 },
323
+ ]
324
+ },
325
+ ]}
374
326
  items={[
375
327
  {
376
- type: 'group', label: 'Actions', items: [
377
- 'divider',
378
- { label: 'Action one', onSelect: () => this.setState({ dropDownState: ' ' }) },
379
- { label: 'Action two', onSelect: () => this.setState({ dropDownState: ' ' }) },
380
- { label: 'Action three', onSelect: () => this.setState({ dropDownState: ' ' }) },
328
+ type: 'group', label: 'Recent Templates', items: [
329
+ { icon: 'plus-sign', label: 'Marker Daily', onSelect: () => this.setState({ dropDownState: ' ' }) },
330
+ { icon: 'plus-sign', label: 'Marker Weekend', onSelect: () => this.setState({ dropDownState: ' ' }) },
331
+ { icon: 'plus-sign', label: 'Tabu Daily', onSelect: () => this.setState({ dropDownState: ' ' }) },
332
+ { icon: 'plus-sign', label: 'Tabu Specijal', onSelect: () => this.setState({ dropDownState: ' ' }) },
333
+ ]
334
+ }
335
+ ]}
336
+ footer={[
337
+ {
338
+ type: 'group', items: [
339
+ { icon: 'list-plus', label: 'Create new Template', onSelect: () => this.setState({modalNewTemplate: true}) },
340
+ { icon: 'rundown', label: 'Create new Show', onSelect: () => this.setState({modalNewShow: true}) },
381
341
  ]
382
- }]}>
383
- <NavButton icon='dots-vertical' onClick={() => false} />
342
+ },
343
+ ]}
344
+ >
345
+ <CreateButton ariaValue='Create' onClick={() => false} />
384
346
  </Dropdown>
385
347
  </ButtonGroup>
386
- </ButtonGroup>
387
- </SubNav>
388
- </Layout.HeaderPanel>
389
- {/* TOOLBAR HEADER */}
348
+ </SubNav>
349
+ <SubNav zIndex={1}>
350
+ <ButtonGroup align='start'>
351
+ <NavButton icon='filter-large' onClick={this.handleFilter} />
352
+ </ButtonGroup>
353
+ <ButtonGroup align='end'>
354
+ <ButtonGroup align='sub' padded={true} >
355
+ <Button size="normal" icon="chevron-left-thin" text="Previous" shape="round" iconOnly={true} disabled onClick={()=> false} />
356
+ <Button text='Today' style='hollow' onClick={() => false} />
357
+ <Button size="normal" icon="chevron-right-thin" text="Next" shape="round" iconOnly={true} onClick={()=> false} />
358
+ </ButtonGroup>
359
+ <RadioButtonGroup
360
+ options={[
361
+ {value:'test10', label:'D'},
362
+ {value:'test11', label:'W'},
363
+ {value:'test12', label:'M'},
364
+ ]}
365
+ group={{padded:false}}
366
+ value={this.state.itemType}
367
+ onChange={(value) => this.setState({ itemType: value })}
368
+ />
369
+ <ButtonGroup align='sub' spaces='no-space'>
370
+ <Dropdown
371
+ items={[
372
+ {
373
+ type: 'group', label: 'Chose a theme', items: [
374
+ 'divider',
375
+ { label: 'Light', icon: 'adjust', onSelect: () => this.handleTheme('light-ui')},
376
+ { label: 'Dark', icon: 'adjust', onSelect: () => this.handleTheme('dark-ui')},
377
+ { label: 'Accessible Light', icon: 'adjust', onSelect: () => this.handleTheme('accessible-light-ui')},
378
+ ]
379
+ },
380
+ ]}
381
+ >
382
+ <NavButton type='default' icon='adjust' onClick={()=> false} />
383
+ </Dropdown>
384
+ <Dropdown
385
+ items={[
386
+ {
387
+ type: 'group', label: 'Actions', items: [
388
+ 'divider',
389
+ { label: 'Action one', onSelect: () => this.setState({ dropDownState: ' ' }) },
390
+ { label: 'Action two', onSelect: () => this.setState({ dropDownState: ' ' }) },
391
+ { label: 'Action three', onSelect: () => this.setState({ dropDownState: ' ' }) },
392
+ ]
393
+ }
394
+ ]}
395
+ >
396
+ <NavButton icon='dots-vertical' onClick={() => false} />
397
+ </Dropdown>
398
+ </ButtonGroup>
399
+ </ButtonGroup>
400
+ </SubNav>
401
+ </Layout.HeaderPanel>
402
+ {/* TOOLBAR HEADER */}
390
403
 
391
- <Layout.LeftPanel open={this.state.openFilter}>
392
- <Layout.Panel side='left' background='grey'>
393
- <Layout.PanelHeader title='Advanced filters' onClose={() => this.setState({'openFilter': false})} />
394
- <Layout.PanelContent>
395
- <Layout.PanelContentBlock>
396
- <Form.FormGroup>
397
- <Form.FormItem>
398
- <Select
399
- label='Shows'
400
- labelHidden={true}
401
- value='This is some value'
402
- error='This is error message'
403
- info='This is some hint message'
404
- required={true}
405
- disabled={false}
406
- invalid={false}
407
- onChange={(value) => {}}>
404
+ <Layout.LeftPanel open={this.state.openFilter}>
405
+ <Layout.Panel side='left' background='grey'>
406
+ <Layout.PanelHeader title='Advanced filters' onClose={() => this.setState({'openFilter': false})} />
407
+ <Layout.PanelContent>
408
+ <Layout.PanelContentBlock>
409
+ <Form.FormGroup>
410
+ <Form.FormItem>
411
+ <Select
412
+ label='Shows'
413
+ labelHidden={true}
414
+ value='This is some value'
415
+ info='This is some hint message'
416
+ required={true}
417
+ disabled={false}
418
+ onChange={() => false}
419
+ >
408
420
  <Option>Marker</Option>
409
421
  <Option>Tabu</Option>
410
- </Select>
411
- </Form.FormItem>
412
- </Form.FormGroup>
413
- <div className="form__group">
414
- <div className="form__item">
415
- <Input label='Title'
416
- error='This is error message'
417
- type='text'
418
- value='Title'
419
- inlineLabel={false}
420
- disabled={false}
421
- invalid={false}
422
- onChange={(value) => { }} />
422
+ </Select>
423
+ </Form.FormItem>
424
+ </Form.FormGroup>
425
+ <div className="form__group">
426
+ <div className="form__item">
427
+ <Input
428
+ label='Title'
429
+ type='text'
430
+ value='Title'
431
+ inlineLabel={false}
432
+ disabled={false}
433
+ onChange={() => false}
434
+ />
435
+ </div>
423
436
  </div>
424
- </div>
425
- <div className="form__group">
426
- <div className="form__item">
427
- <Select label='Source'
428
- value='Select ingest source...'
429
- error='This is error message'
430
- inlineLabel={false}
431
- disabled={false}
432
- invalid={false}
433
- onChange={(value) => { }}>
434
- <Option value="option-1">Select ingest source...</Option>
435
- <Option value="option-2">Associated Press</Option>
436
- <Option value="option-3">Reuters</Option>
437
- </Select>
437
+ <div className="form__group">
438
+ <div className="form__item">
439
+ <Select
440
+ label='Source'
441
+ value='Select ingest source...'
442
+ inlineLabel={false}
443
+ disabled={false}
444
+ onChange={() => false}
445
+ >
446
+ <Option value="option-1">Select ingest source...</Option>
447
+ <Option value="option-2">Associated Press</Option>
448
+ <Option value="option-3">Reuters</Option>
449
+ </Select>
450
+ </div>
438
451
  </div>
439
- </div>
440
452
 
441
- <div className="form__group">
442
- <div className="form__item">
443
- <Input label='Keyword'
444
- error='This is error message'
445
- type='text'
446
- value='Keyword'
447
- inlineLabel={false}
448
- disabled={false}
449
- invalid={false}
450
- onChange={(value) => { }} />
453
+ <div className="form__group">
454
+ <div className="form__item">
455
+ <Input label='Keyword'
456
+ type='text'
457
+ value='Keyword'
458
+ inlineLabel={false}
459
+ disabled={false}
460
+ onChange={() => false} />
461
+ </div>
451
462
  </div>
452
- </div>
453
463
 
454
- <div className="form__group">
455
- <div className="form__item">
456
- <Select label='Usage right'
457
- value='--- Not selected ---'
458
- error='This is error message'
459
- info='Dolor in hendrerit.'
460
- inlineLabel={false}
461
- disabled={false}
462
- invalid={false}
463
- onChange={(value) => { }}>
464
- <Option value="">--- Not selected ---</Option>
465
- <Option value="single">Single usage</Option>
466
- <Option value="time">Time restricted</Option>
467
- <Option value="bananas">Indefinite usage</Option>
468
- <Option value="indefinite">Pears</Option>
469
- </Select>
464
+ <div className="form__group">
465
+ <div className="form__item">
466
+ <Select
467
+ label='Usage right'
468
+ value='--- Not selected ---'
469
+ info='Dolor in hendrerit.'
470
+ inlineLabel={false}
471
+ disabled={false}
472
+ onChange={() => false}
473
+ >
474
+ <Option value="">--- Not selected ---</Option>
475
+ <Option value="single">Single usage</Option>
476
+ <Option value="time">Time restricted</Option>
477
+ <Option value="bananas">Indefinite usage</Option>
478
+ <Option value="indefinite">Pears</Option>
479
+ </Select>
480
+ </div>
470
481
  </div>
471
- </div>
472
- </Layout.PanelContentBlock>
473
- </Layout.PanelContent>
474
- <Layout.PanelFooter>
475
- <Button text='Clear' style='hollow' onClick={() => false} />
476
- <Button text='Submit' type='primary' onClick={() => false} />
477
- </Layout.PanelFooter>
478
- </Layout.Panel>
479
- </Layout.LeftPanel>
480
- {/* FILTER PANEL*/}
481
- <Layout.MainPanel>
482
- <ContentList
483
- items={[
484
- {
485
- itemColum: [
486
- {
487
- itemRow: [{content:<>
488
- <i className="icon-rundown"></i>
489
- </>}],
490
- border: true
491
- },
492
- {
493
- itemRow: [
494
- {
495
- content:
496
- <>
497
- <span className="sd-list-item__slugline">19:00 – 19:45</span>
498
- <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
499
- <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
500
- <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
501
- </>
502
- },
503
- {
504
- content:
505
- <>
506
- <Label text='Marker' color='blue--800'/>
507
- <span className='sd-list-item__compound-text'>
508
- <span className='sd-list-item__text-label'>Template:</span>
509
- <span>Marker Daily</span>
510
- </span>
511
- <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>
512
- <Label style='translucent' text='In Progress' type='warning' />
513
- </>
514
- },
515
- ],
516
- fullwidth: true,
517
- }
518
- ],
519
- action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
520
- locked: true,
521
- onClick: () => this.setState({openEditor: !this.state.openEditor}),
522
- },
523
- {
524
- itemColum: [
525
- {
526
- itemRow: [{content:<>
527
- <i className="icon-rundown"></i>
528
- </>}],
529
- border: true
530
- },
531
- {
532
- itemRow: [
533
- {
534
- content:
535
- <>
536
- <span className="sd-list-item__slugline">19:00 – 19:45</span>
537
- <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
538
- <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
539
- <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
540
- </>
541
- },
542
- {
543
- content:
544
- <>
545
- <Label text='Tabu' color='blue--800'/>
546
- <span className='sd-list-item__compound-text'>
547
- <span className='sd-list-item__text-label'>Template:</span>
548
- <span>Tabu Daily</span>
549
- </span>
550
- <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>
551
- <Label style='translucent' text='Draft' />
552
- </>
553
- },
554
- ],
555
- fullwidth: true,
556
- }
557
- ],
558
- action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
559
- onClick: () => this.setState({openPreview: !this.state.openPreview}),
560
- },
561
- ]} />
562
-
563
- </Layout.MainPanel>
564
- {/* MAIN CONTENT (Monitoring) */}
565
- <Layout.RightPanel open={this.state.openPreview}>
566
- <Layout.Panel side='right'>
567
- <Layout.PanelHeader title='Item preview' onClose={() => this.setState({'openPreview': false})} />
568
- <Layout.PanelContent>
569
- <Layout.PanelContentBlock flex={true}>
570
- <Layout.Container direction='column' gap='x-small'>
571
- <Layout.Container direction='row' gap='small'><Text color='light'>Created 09.06.2022 by </Text><Text weight='medium'>Mika Karapet</Text></Layout.Container>
572
- <Layout.Container direction='row' gap='small'><Text color='light'>Updated 3 hours ago by </Text><Text weight='medium'>John Doe</Text></Layout.Container>
573
- </Layout.Container>
574
- <Layout.Container className='sd-margin-s--auto sd-flex--items-center'>
575
- {/* <Dropdown
576
- align = 'right'
577
- append = {true}
578
- items={[
482
+ </Layout.PanelContentBlock>
483
+ </Layout.PanelContent>
484
+ <Layout.PanelFooter>
485
+ <Button text='Clear' style='hollow' onClick={() => false} />
486
+ <Button text='Submit' type='primary' onClick={() => false} />
487
+ </Layout.PanelFooter>
488
+ </Layout.Panel>
489
+ </Layout.LeftPanel>
490
+ {/* FILTER PANEL*/}
491
+ <Layout.MainPanel>
492
+ <ContentList
493
+ items={[
494
+ {
495
+ itemColum: [
496
+ {
497
+ itemRow: [{content:<>
498
+ <i className="icon-rundown"></i>
499
+ </>}],
500
+ border: true
501
+ },
502
+ {
503
+ itemRow: [
579
504
  {
580
- type: 'group', label: 'Actions', items: [
581
- 'divider',
582
- { label: 'Edit', icon: 'pencil', onSelect: () => this.setState({ dropDownState: 'Edit ' }) },
583
- { label: 'Download', icon: 'download', onSelect: () => this.setState({ dropDownState: 'Download' }) },
584
- { label: 'Delete', icon: 'trash', onSelect: () => this.setState({ dropDownState: 'Delete' }) },
585
- ]
586
- }]}>
587
- <IconButton ariaValue='dropdown-more-options' icon='dots-vertical' onClick={() => false} />
588
- </Dropdown> */}
589
- </Layout.Container>
590
- </Layout.PanelContentBlock>
505
+ content:
506
+ <>
507
+ <span className="sd-list-item__slugline">19:00 – 19:45</span>
508
+ <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
509
+ <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
510
+ <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
511
+ </>
512
+ },
513
+ {
514
+ content:
515
+ <>
516
+ <Label text='Marker' color='blue--800'/>
517
+ <span className='sd-list-item__compound-text'>
518
+ <span className='sd-list-item__text-label'>Template:</span>
519
+ <span>Marker Daily</span>
520
+ </span>
521
+ <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>
522
+ <Label style='translucent' text='In Progress' type='warning' />
523
+ </>
524
+ },
525
+ ],
526
+ fullwidth: true,
527
+ }
528
+ ],
529
+ action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
530
+ locked: true,
531
+ onClick: () => this.setState({openEditor: !this.state.openEditor}),
532
+ },
533
+ {
534
+ itemColum: [
535
+ {
536
+ itemRow: [{content:<>
537
+ <i className="icon-rundown"></i>
538
+ </>}],
539
+ border: true
540
+ },
541
+ {
542
+ itemRow: [
543
+ {
544
+ content:
545
+ <>
546
+ <span className="sd-list-item__slugline">19:00 – 19:45</span>
547
+ <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
548
+ <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
549
+ <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
550
+ </>
551
+ },
552
+ {
553
+ content:
554
+ <>
555
+ <Label text='Tabu' color='blue--800'/>
556
+ <span className='sd-list-item__compound-text'>
557
+ <span className='sd-list-item__text-label'>Template:</span>
558
+ <span>Tabu Daily</span>
559
+ </span>
560
+ <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>
561
+ <Label style='translucent' text='Draft' />
562
+ </>
563
+ },
564
+ ],
565
+ fullwidth: true,
566
+ }
567
+ ],
568
+ action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
569
+ onClick: () => this.setState({openPreview: !this.state.openPreview}),
570
+ },
571
+ ]}
572
+ />
573
+ </Layout.MainPanel>
591
574
 
592
- <Layout.PanelContentBlock>
593
- <Layout.Container direction='row' gap='large' className='sd-margin-b--3'>
594
- <Label size='large' text='Tabu' color='blue--800'/>
595
- <Layout.Container direction='row' gap='small'>
596
- <Text color='light' size='small' style='italic' >Template:</Text>
597
- <Text size='small' style='italic' weight='medium'>Tabu daily</Text>
575
+ {/* MAIN CONTENT (Monitoring) */}
576
+ <Layout.RightPanel open={this.state.openPreview}>
577
+ <Layout.Panel side='right'>
578
+ <Layout.PanelHeader title='Item preview' onClose={() => this.setState({'openPreview': false})} />
579
+ <Layout.PanelContent>
580
+ <Layout.PanelContentBlock flex={true}>
581
+ <Layout.Container direction='column' gap='x-small'>
582
+ <Layout.Container direction='row' gap='small'><Text color='light'>Created 09.06.2022 by </Text><Text weight='medium'>Mika Karapet</Text></Layout.Container>
583
+ <Layout.Container direction='row' gap='small'><Text color='light'>Updated 3 hours ago by </Text><Text weight='medium'>John Doe</Text></Layout.Container>
598
584
  </Layout.Container>
599
- </Layout.Container>
600
-
601
- <Layout.Container direction='column' className='sd-margin-y--2'>
602
- {/* <FormLabel text='Title' /> */}
603
- <Heading type='h2'>Tabu // 01.06.2022</Heading>
604
- </Layout.Container>
605
- <ButtonGroup>
606
- <IconLabel style='translucent' innerLabel='Airtime:' text='19:45 - 20:45' type='primary' />
607
- <IconLabel style='translucent' innerLabel='Duration:' text='00:56' type='warning' />
608
- <Text color='light' size='small' className='sd-margin--0'>OF</Text>
609
- <IconLabel style='translucent' innerLabel='Planned:'text='01:00' />
610
- </ButtonGroup>
611
- <TableList
612
- className='sd-margin-y--4'
613
- array={this.state.array}
614
- itemsDropdown={() => [
615
- { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
616
- { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
617
- { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
618
- ]}
619
- />
620
- </Layout.PanelContentBlock>
621
- </Layout.PanelContent>
622
- </Layout.Panel>
623
- </Layout.RightPanel>
624
- {/* PREVIEW PANEL*/}
585
+ <Layout.Container className='sd-margin-s--auto sd-flex--items-center'>
586
+ {/* <Dropdown
587
+ align = 'right'
588
+ append = {true}
589
+ items={[
590
+ {
591
+ type: 'group', label: 'Actions', items: [
592
+ 'divider',
593
+ { label: 'Edit', icon: 'pencil', onSelect: () => this.setState({ dropDownState: 'Edit ' }) },
594
+ { label: 'Download', icon: 'download', onSelect: () => this.setState({ dropDownState: 'Download' }) },
595
+ { label: 'Delete', icon: 'trash', onSelect: () => this.setState({ dropDownState: 'Delete' }) },
596
+ ]
597
+ }]}>
598
+ <IconButton ariaValue='dropdown-more-options' icon='dots-vertical' onClick={() => false} />
599
+ </Dropdown> */}
600
+ </Layout.Container>
601
+ </Layout.PanelContentBlock>
602
+
603
+ <Layout.PanelContentBlock>
604
+ <Layout.Container direction='row' gap='large' className='sd-margin-b--3'>
605
+ <Label size='large' text='Tabu' color='blue--800'/>
606
+ <Layout.Container direction='row' gap='small'>
607
+ <Text color='light' size='small' style='italic' >Template:</Text>
608
+ <Text size='small' style='italic' weight='medium'>Tabu daily</Text>
609
+ </Layout.Container>
610
+ </Layout.Container>
611
+
612
+ <Layout.Container direction='column' className='sd-margin-y--2'>
613
+ {/* <FormLabel text='Title' /> */}
614
+ <Heading type='h2'>Tabu // 01.06.2022</Heading>
615
+ </Layout.Container>
616
+ <ButtonGroup>
617
+ <IconLabel style='translucent' innerLabel='Airtime:' text='19:45 - 20:45' type='primary' />
618
+ <IconLabel style='translucent' innerLabel='Duration:' text='00:56' type='warning' />
619
+ <Text color='light' size='small' className='sd-margin--0'>OF</Text>
620
+ <IconLabel style='translucent' innerLabel='Planned:'text='01:00' />
621
+ </ButtonGroup>
622
+ <TableList
623
+ className='sd-margin-y--4'
624
+ array={this.state.array}
625
+ itemsDropdown={() => [
626
+ { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
627
+ { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
628
+ { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
629
+ ]}
630
+ />
631
+ </Layout.PanelContentBlock>
632
+ </Layout.PanelContent>
633
+ </Layout.Panel>
634
+ </Layout.RightPanel>
635
+ {/* PREVIEW PANEL*/}
625
636
 
626
- <Layout.OverlayPanel />
627
- {/* OVERLAY PANEL (Send To) */}
628
- </Layout.LayoutContainer>}
637
+ <Layout.OverlayPanel />
638
+ {/* OVERLAY PANEL (Send To) */}
639
+ </Layout.LayoutContainer>
640
+ }
629
641
 
630
642
  <Layout.ContentSplitter visible={this.state.openEditor} />
631
643
 
632
644
  {/* RUNDOWN EDITOR */}
633
645
  <Layout.AuthoringContainer open={this.state.openEditor}>
634
- <RundownEditor rightPanel={this.state.rightPanel}
635
- openPanel={() => {
636
- if (this.state.fullEditor) {
637
- this.setState({previousState: true})
638
- } else {
639
- this.setState({previousState: false})
640
- }
641
-
642
- this.setState({rightPanel: true})
643
- }}
644
- closePanel={() => {
645
- if (!this.state.previousState) {
646
- this.setState({rightPanel: false, fullEditor: false})
647
- } else {
648
- this.setState({rightPanel: false})
649
- }
650
- }}
646
+ <RundownEditor
647
+ rightPanel={this.state.rightPanel}
648
+ openPanel={() => {
649
+ if (this.state.fullEditor) {
650
+ this.setState({previousState: true})
651
+ } else {
652
+ this.setState({previousState: false})
653
+ }
654
+
655
+ this.setState({rightPanel: true})
656
+ }}
657
+ closePanel={() => {
658
+ if (!this.state.previousState) {
659
+ this.setState({rightPanel: false, fullEditor: false})
660
+ } else {
661
+ this.setState({rightPanel: false})
662
+ }
663
+ }}
651
664
  />
652
665
  </Layout.AuthoringContainer>
653
666
  {/* END RUNDOWN EDITOR */}