superdesk-ui-framework 4.0.47 → 4.0.49

package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx

@@ -1,14 +1,35 @@
 import * as React from 'react';
-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';
+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';
 import * as Layout from '../../../../app-typescript/components/Layouts';
 import * as Form from '../../../../app-typescript/components/Form';
 import * as Nav from '../../../../app-typescript/components/Navigation';
-import { BottomNav } from '../../../../app-typescript/components/Navigation/BottomNav';
-import { clone } from 'lodash';
-import { RundownEditor } from './RundownEditor';
-import { ContentList } from '../../../../app-typescript/components/Lists/ContentList';
-import { TableList } from '../../../../app-typescript/components/Lists/TableList';
-import { SearchBar } from './components/Index';
+import {BottomNav} from '../../../../app-typescript/components/Navigation/BottomNav';
+import {clone} from 'lodash';
+import {RundownEditor} from './RundownEditor';
+import {ContentList} from '../../../../app-typescript/components/Lists/ContentList';
+import {TableList} from '../../../../app-typescript/components/Lists/TableList';
+import {SearchBar} from './components/Index';
 
 interface IProps {
     children?: React.ReactNode;
@@ -57,10 +78,24 @@ export class CoreLayout extends React.Component<IProps, IState> {
             mainMenuOpen: false,
             notificationsOpen: false,
             botNavArray: [
-                            { icon:'photo', title: 'Sed posuere consectetur est at lobortis.', onClick: () => false, onRemove: (e: any) => this.handleDelete(e) },
-                            { title: 'Nullam id dolor id nibh ultricies.', onClick: () => false, onRemove: (e: any) => this.handleDelete(e)},
-                            { icon:'video', title: 'Nulla vitae elit libero, a pharetra augue.', onClick: () => false, onRemove: (e: any) => this.handleDelete(e)},
-                            { title: 'Donec sed odio dui.', onClick: () => false, onRemove: (e: any) => this.handleDelete(e)},
+                {
+                    icon: 'photo',
+                    title: 'Sed posuere consectetur est at lobortis.',
+                    onClick: () => false,
+                    onRemove: (e: any) => this.handleDelete(e),
+                },
+                {
+                    title: 'Nullam id dolor id nibh ultricies.',
+                    onClick: () => false,
+                    onRemove: (e: any) => this.handleDelete(e),
+                },
+                {
+                    icon: 'video',
+                    title: 'Nulla vitae elit libero, a pharetra augue.',
+                    onClick: () => false,
+                    onRemove: (e: any) => this.handleDelete(e),
+                },
+                {title: 'Donec sed odio dui.', onClick: () => false, onRemove: (e: any) => this.handleDelete(e)},
             ],
             itemType: 'itemtype01',
             dropDownState: '',
@@ -86,47 +121,57 @@ export class CoreLayout extends React.Component<IProps, IState> {
             previousState: false,
             array: [
                 {
-                    start: <>
-                                <Label style='translucent' text='aacc' />
-                                <Label style='translucent' type='primary' text='prlg' />
-                            </>,
+                    start: (
+                        <>
+                            <Label style="translucent" text="aacc" />
+                            <Label style="translucent" type="primary" text="prlg" />
+                        </>
+                    ),
                     center: <span>Duis mollis est non commodo</span>,
                     onClick: () => false,
                 },
                 {
-                    start: <>
-                                <Label style='translucent' type='warning' text='pokr' />
-                                <Label style='translucent' text='slika' />
-                            </>,
+                    start: (
+                        <>
+                            <Label style="translucent" type="warning" text="pokr" />
+                            <Label style="translucent" text="slika" />
+                        </>
+                    ),
                     center: <span>Nullam id dolor id nibh ultricies</span>,
                     onClick: () => false,
                 },
                 {
-                    start: <>
-                                <Label style='translucent' text='aacc' />
-                                <Label style='translucent' type='primary' text='prlg' />
-                            </>,
+                    start: (
+                        <>
+                            <Label style="translucent" text="aacc" />
+                            <Label style="translucent" type="primary" text="prlg" />
+                        </>
+                    ),
                     center: <span>Duis mollis est non commodo</span>,
                     onClick: () => false,
                 },
                 {
-                    start: <>
-                                <Label style='translucent' type='warning' text='pokr' />
-                                <Label style='translucent' text='slika' />
-                            </>,
+                    start: (
+                        <>
+                            <Label style="translucent" type="warning" text="pokr" />
+                            <Label style="translucent" text="slika" />
+                        </>
+                    ),
                     center: <span>Cras mattis consectetur purus</span>,
                     onClick: () => false,
                 },
                 {
-                    start: <>
-                                <Label style='translucent' text='aacc' />
-                                <Label style='translucent' type='primary' text='prlg' />
-                            </>,
+                    start: (
+                        <>
+                            <Label style="translucent" text="aacc" />
+                            <Label style="translucent" type="primary" text="prlg" />
+                        </>
+                    ),
                     center: <span>Duis mollis est non commodo</span>,
                     onClick: () => false,
                 },
-            ]
-        }
+            ],
+        };
 
         this.handleMainMenu = this.handleMainMenu.bind(this);
         this.handleNotifications = this.handleNotifications.bind(this);
@@ -148,14 +193,14 @@ export class CoreLayout extends React.Component<IProps, IState> {
             notificationsOpen: !state.notificationsOpen,
         }));
     }
-    
+
     handleDelete(indexNumber: number) {
         const newItems = clone(this.state.botNavArray);
         newItems.splice(indexNumber, 1);
 
         this.setState({
             botNavArray: newItems,
-        });  
+        });
     }
 
     handleFilter() {
@@ -178,8 +223,8 @@ export class CoreLayout extends React.Component<IProps, IState> {
 
     handleTheme(newTheme: string) {
         this.setState({
-            theme: newTheme
-        })
+            theme: newTheme,
+        });
     }
 
     changeStatus(item: any, status: string) {
@@ -193,207 +238,333 @@ export class CoreLayout extends React.Component<IProps, IState> {
     render() {
         return (
             <Layout.CoreLayout
-                heading='Core Layout'
+                heading="Core Layout"
                 menuOpen={this.state.mainMenuOpen}
                 onClick={this.handleMainMenu}
                 active={this.state.mainMenuOpen}
-                ariaControls='main-menu'
-                menuId='main-menu'
+                ariaControls="main-menu"
+                menuId="main-menu"
                 editorFullWidth={this.state.fullEditor}
                 openPanel={this.state.rightPanel}
-                slideInMenu={(
+                slideInMenu={
                     <Layout.MainMenu
-                        headerTitle='Main Menu'
-                        poweredBy='Powered by Superdesk technology'
-                        header={(null)}
+                        headerTitle="Main Menu"
+                        poweredBy="Powered by Superdesk technology"
+                        header={null}
                         footerContent={true}
-                        footer={(
-                            <p>Menu footer testing</p>
-                        )}
+                        footer={<p>Menu footer testing</p>}
                     >
-                        <LeftMenu 
-                            style='blanc'
+                        <LeftMenu
+                            style="blanc"
                             reverseItemBorder={true}
-                            size='large'
-                            ariaLabel={'Left navigation'}   
-                            activeItemId='1'
+                            size="large"
+                            ariaLabel={'Left navigation'}
+                            activeItemId="1"
                             groups={[
-                                { label: 'MAIN SECTIONS', items: [
-                                    { id: '1', label: 'Section 1', ref:'section1'},
-                                    { id: '2', label: 'Section 2', ref: 'section2' },
-                                    { id: '3', label: 'Section 3', ref: 'section3' },
-                                
-                                ]},
-                                { label:'OTHER SECTIONS', items: [
-                                    { id: '4', label: 'Section 4', ref: 'section4' },
-                                    { id: '5', label: 'Section 5', ref: 'section5' },
-                                ]},
-                                { label:'OTHER SECTIONS', items: [
-                                    { id: '6', label: 'Section 6', ref: 'section6' },
-                                    { id: '7', label: 'Section 7', ref: 'section7' },
-                                ]}
+                                {
+                                    label: 'MAIN SECTIONS',
+                                    items: [
+                                        {id: '1', label: 'Section 1', ref: 'section1'},
+                                        {id: '2', label: 'Section 2', ref: 'section2'},
+                                        {id: '3', label: 'Section 3', ref: 'section3'},
+                                    ],
+                                },
+                                {
+                                    label: 'OTHER SECTIONS',
+                                    items: [
+                                        {id: '4', label: 'Section 4', ref: 'section4'},
+                                        {id: '5', label: 'Section 5', ref: 'section5'},
+                                    ],
+                                },
+                                {
+                                    label: 'OTHER SECTIONS',
+                                    items: [
+                                        {id: '6', label: 'Section 6', ref: 'section6'},
+                                        {id: '7', label: 'Section 7', ref: 'section7'},
+                                    ],
+                                },
                             ]}
                             onSelect={() => false}
                         />
                     </Layout.MainMenu>
-                )}
-                topMenu={(
-                    <NavButton badgeValue='6' icon='bell' text='Show notifications' onClick={this.handleNotifications} />
-                )}
-                footer={(
+                }
+                topMenu={
+                    <NavButton
+                        badgeValue="6"
+                        icon="bell"
+                        text="Show notifications"
+                        onClick={this.handleNotifications}
+                    />
+                }
+                footer={
                     <>
-                        <Layout.BottomBarAction onClick={()=> false} />
+                        <Layout.BottomBarAction onClick={() => false} />
                         <BottomNav items={this.state.botNavArray} />
                     </>
-                )}
-                overlay={(
+                }
+                overlay={
                     <Layout.NotificationPanel
-                        header={(null)}
-                        headerTitle='Notifications'
+                        header={null}
+                        headerTitle="Notifications"
                         open={this.state.notificationsOpen}
                         onClick={this.handleNotifications}
-                        theme='dark'
+                        theme="dark"
                     >
                         <BoxedList>
                             <BoxedListItem unread={true}>
-                                <Time datetime='29.06.2022'>29.06.2022</Time>
+                                <Time datetime="29.06.2022">29.06.2022</Time>
                                 <BoxedListContentRow>
-                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et
-                                    magnis dis parturient montes, nascetur ridiculus mus.
+                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque
+                                    penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                                 </BoxedListContentRow>
                             </BoxedListItem>
                             <BoxedListItem>
-                                <Time datetime='29.06.2022'>29.06.2022</Time>
+                                <Time datetime="29.06.2022">29.06.2022</Time>
                                 <BoxedListContentRow>
-                                    Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula
-                                    porta felis euismod semper.
+                                    Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id
+                                    ligula porta felis euismod semper.
                                 </BoxedListContentRow>
                             </BoxedListItem>
                             <BoxedListItem>
-                                <Time datetime='29.06.2022'>29.06.2022</Time>
+                                <Time datetime="29.06.2022">29.06.2022</Time>
                                 <BoxedListContentRow>
-                                    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer
-                                    posuere erat a ante venenatis dapibus posuere velit aliquet.
+                                    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+                                    mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
                                 </BoxedListContentRow>
                             </BoxedListItem>
                         </BoxedList>
                     </Layout.NotificationPanel>
-                )}
+                }
             >
                 <Nav.SideBarMenu
                     items={[
-                        { icon: 'dashboard', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, },
-                        { icon: 'view', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: () => this.setState({fullEditor: !this.state.fullEditor}) },
-                        { icon: 'marked-star', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: () => this.setState({fullEditor: !this.state.fullEditor}) },
-                        { icon: 'spike', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: () => this.setState({fullEditor: !this.state.fullEditor}) },
-                        { icon: 'personal', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: () => this.setState({fullEditor: !this.state.fullEditor}) },
-                        { icon: 'global-search', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: () => this.setState({fullEditor: !this.state.fullEditor}) },
-                        { icon: 'picture', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: () => this.setState({fullEditor: !this.state.fullEditor}) },
-                        { icon: 'rundown', size: 'big', hover: this.state.openEditor && !this.state.rightPanel, onCLick: () => this.setState({fullEditor: !this.state.fullEditor}) }
+                        {icon: 'dashboard', size: 'big', hover: this.state.openEditor && !this.state.rightPanel},
+                        {
+                            icon: 'view',
+                            size: 'big',
+                            hover: this.state.openEditor && !this.state.rightPanel,
+                            onCLick: () => this.setState({fullEditor: !this.state.fullEditor}),
+                        },
+                        {
+                            icon: 'marked-star',
+                            size: 'big',
+                            hover: this.state.openEditor && !this.state.rightPanel,
+                            onCLick: () => this.setState({fullEditor: !this.state.fullEditor}),
+                        },
+                        {
+                            icon: 'spike',
+                            size: 'big',
+                            hover: this.state.openEditor && !this.state.rightPanel,
+                            onCLick: () => this.setState({fullEditor: !this.state.fullEditor}),
+                        },
+                        {
+                            icon: 'personal',
+                            size: 'big',
+                            hover: this.state.openEditor && !this.state.rightPanel,
+                            onCLick: () => this.setState({fullEditor: !this.state.fullEditor}),
+                        },
+                        {
+                            icon: 'global-search',
+                            size: 'big',
+                            hover: this.state.openEditor && !this.state.rightPanel,
+                            onCLick: () => this.setState({fullEditor: !this.state.fullEditor}),
+                        },
+                        {
+                            icon: 'picture',
+                            size: 'big',
+                            hover: this.state.openEditor && !this.state.rightPanel,
+                            onCLick: () => this.setState({fullEditor: !this.state.fullEditor}),
+                        },
+                        {
+                            icon: 'rundown',
+                            size: 'big',
+                            hover: this.state.openEditor && !this.state.rightPanel,
+                            onCLick: () => this.setState({fullEditor: !this.state.fullEditor}),
+                        },
                     ]}
                 />
 
-                {!this.state.fullEditor && !this.state.rightPanel
-                    && <Layout.LayoutContainer>
+                {!this.state.fullEditor && !this.state.rightPanel && (
+                    <Layout.LayoutContainer>
                         <Layout.HeaderPanel>
                             <SubNav>
-                                <SearchBar placeholder='Search media'></SearchBar>
-                                <ButtonGroup align='end' spaces='no-space'>
+                                <SearchBar placeholder="Search media"></SearchBar>
+                                <ButtonGroup align="end" spaces="no-space">
                                     <Dropdown
                                         items={[
                                             {
-                                                type: 'group', label: 'Settings', items: [
+                                                type: 'group',
+                                                label: 'Settings',
+                                                items: [
                                                     'divider',
-                                                    { icon: 'switches', label: 'Manage Shows', onSelect: () => this.setState({modalManageShow: true}) },
-                                                    { icon: 'switches', label: 'Manage Templates', onSelect: () => this.setState({modalManageTemplate: true}) },
-                                                ]
-                                            }
+                                                    {
+                                                        icon: 'switches',
+                                                        label: 'Manage Shows',
+                                                        onSelect: () => this.setState({modalManageShow: true}),
+                                                    },
+                                                    {
+                                                        icon: 'switches',
+                                                        label: 'Manage Templates',
+                                                        onSelect: () => this.setState({modalManageTemplate: true}),
+                                                    },
+                                                ],
+                                            },
                                         ]}
                                     >
-                                        <NavButton icon='settings' onClick={() => false} />
+                                        <NavButton icon="settings" onClick={() => false} />
                                     </Dropdown>
                                     <Dropdown
                                         header={[
                                             {
-                                                type: 'group', label: 'Create', items: []
+                                                type: 'group',
+                                                label: 'Create',
+                                                items: [],
                                             },
                                             {
-                                                type: 'submenu', label: 'Rundown', icon: 'plus-sign', items: [
-                                                    { icon: 'plus-sign', label: 'Rundown', onSelect: () => 1 },
-                                                ]
+                                                type: 'submenu',
+                                                label: 'Rundown',
+                                                icon: 'plus-sign',
+                                                items: [{icon: 'plus-sign', label: 'Rundown', onSelect: () => 1}],
                                             },
                                         ]}
                                         items={[
                                             {
-                                                type: 'group', label: 'Recent Templates', items: [
-                                                    { icon: 'plus-sign', label: 'Marker Daily', onSelect: () => this.setState({ dropDownState: ' ' }) },
-                                                    { icon: 'plus-sign', label: 'Marker Weekend', onSelect: () => this.setState({ dropDownState: ' ' }) },
-                                                    { icon: 'plus-sign', label: 'Tabu Daily', onSelect: () => this.setState({ dropDownState: ' ' }) },
-                                                    { icon: 'plus-sign', label: 'Tabu Specijal', onSelect: () => this.setState({ dropDownState: ' ' }) },
-                                                ]
-                                            }
+                                                type: 'group',
+                                                label: 'Recent Templates',
+                                                items: [
+                                                    {
+                                                        icon: 'plus-sign',
+                                                        label: 'Marker Daily',
+                                                        onSelect: () => this.setState({dropDownState: ' '}),
+                                                    },
+                                                    {
+                                                        icon: 'plus-sign',
+                                                        label: 'Marker Weekend',
+                                                        onSelect: () => this.setState({dropDownState: ' '}),
+                                                    },
+                                                    {
+                                                        icon: 'plus-sign',
+                                                        label: 'Tabu Daily',
+                                                        onSelect: () => this.setState({dropDownState: ' '}),
+                                                    },
+                                                    {
+                                                        icon: 'plus-sign',
+                                                        label: 'Tabu Specijal',
+                                                        onSelect: () => this.setState({dropDownState: ' '}),
+                                                    },
+                                                ],
+                                            },
                                         ]}
                                         footer={[
                                             {
-                                                type: 'group', items: [
-                                                    { icon: 'list-plus', label: 'Create new Template', onSelect: () => this.setState({modalNewTemplate: true}) },
-                                                    { icon: 'rundown', label: 'Create new Show', onSelect: () => this.setState({modalNewShow: true}) },
-                                                ]
+                                                type: 'group',
+                                                items: [
+                                                    {
+                                                        icon: 'list-plus',
+                                                        label: 'Create new Template',
+                                                        onSelect: () => this.setState({modalNewTemplate: true}),
+                                                    },
+                                                    {
+                                                        icon: 'rundown',
+                                                        label: 'Create new Show',
+                                                        onSelect: () => this.setState({modalNewShow: true}),
+                                                    },
+                                                ],
                                             },
                                         ]}
                                     >
-                                        <CreateButton ariaValue='Create' onClick={() => false} />
+                                        <CreateButton ariaValue="Create" onClick={() => false} />
                                     </Dropdown>
                                 </ButtonGroup>
                             </SubNav>
                             <SubNav>
-                                <ButtonGroup align='start'>
-                                    <NavButton icon='filter-large' onClick={this.handleFilter} />
+                                <ButtonGroup align="start">
+                                    <NavButton icon="filter-large" onClick={this.handleFilter} />
                                 </ButtonGroup>
-                                <ButtonGroup align='end'>
-                                    <ButtonGroup align='sub' padded={true} >
-                                        <Button size="normal" icon="chevron-left-thin" text="Previous" shape="round" iconOnly={true} disabled onClick={()=> false} />
-                                        <Button text='Today' style='hollow' onClick={() => false} />
-                                        <Button size="normal" icon="chevron-right-thin" text="Next" shape="round" iconOnly={true} onClick={()=> false} />
+                                <ButtonGroup align="end">
+                                    <ButtonGroup align="sub" padded={true}>
+                                        <Button
+                                            size="normal"
+                                            icon="chevron-left-thin"
+                                            text="Previous"
+                                            shape="round"
+                                            iconOnly={true}
+                                            disabled
+                                            onClick={() => false}
+                                        />
+                                        <Button text="Today" style="hollow" onClick={() => false} />
+                                        <Button
+                                            size="normal"
+                                            icon="chevron-right-thin"
+                                            text="Next"
+                                            shape="round"
+                                            iconOnly={true}
+                                            onClick={() => false}
+                                        />
                                     </ButtonGroup>
                                     <RadioButtonGroup
                                         options={[
-                                            {value:'test10', label:'D'},
-                                            {value:'test11', label:'W'},
-                                            {value:'test12', label:'M'},
+                                            {value: 'test10', label: 'D'},
+                                            {value: 'test11', label: 'W'},
+                                            {value: 'test12', label: 'M'},
                                         ]}
-                                        group={{padded:false}}
+                                        group={{padded: false}}
                                         value={this.state.itemType}
-                                        onChange={(value) => this.setState({ itemType: value })}
+                                        onChange={(value) => this.setState({itemType: value})}
                                     />
-                                    <ButtonGroup align='sub' spaces='no-space'>
+                                    <ButtonGroup align="sub" spaces="no-space">
                                         <Dropdown
                                             items={[
                                                 {
-                                                    type: 'group', label: 'Chose a theme', items: [
+                                                    type: 'group',
+                                                    label: 'Chose a theme',
+                                                    items: [
                                                         'divider',
-                                                        { label: 'Light', icon: 'adjust', onSelect: () => this.handleTheme('light-ui')},
-                                                        { label: 'Dark', icon: 'adjust', onSelect: () => this.handleTheme('dark-ui')},
-                                                        { label: 'Accessible Light', icon: 'adjust', onSelect: () => this.handleTheme('accessible-light-ui')},
-                                                    ]
+                                                        {
+                                                            label: 'Light',
+                                                            icon: 'adjust',
+                                                            onSelect: () => this.handleTheme('light-ui'),
+                                                        },
+                                                        {
+                                                            label: 'Dark',
+                                                            icon: 'adjust',
+                                                            onSelect: () => this.handleTheme('dark-ui'),
+                                                        },
+                                                        {
+                                                            label: 'Accessible Light',
+                                                            icon: 'adjust',
+                                                            onSelect: () => this.handleTheme('accessible-light-ui'),
+                                                        },
+                                                    ],
                                                 },
                                             ]}
                                         >
-                                            <NavButton type='default' icon='adjust' onClick={()=> false} />
+                                            <NavButton type="default" icon="adjust" onClick={() => false} />
                                         </Dropdown>
                                         <Dropdown
                                             items={[
                                                 {
-                                                    type: 'group', label: 'Actions', items: [
+                                                    type: 'group',
+                                                    label: 'Actions',
+                                                    items: [
                                                         'divider',
-                                                        { label: 'Action one', onSelect: () => this.setState({ dropDownState: ' ' }) },
-                                                        { label: 'Action two', onSelect: () => this.setState({ dropDownState: ' ' }) },
-                                                        { label: 'Action three', onSelect: () => this.setState({ dropDownState: ' ' }) },
-                                                    ]
-                                                }
+                                                        {
+                                                            label: 'Action one',
+                                                            onSelect: () => this.setState({dropDownState: ' '}),
+                                                        },
+                                                        {
+                                                            label: 'Action two',
+                                                            onSelect: () => this.setState({dropDownState: ' '}),
+                                                        },
+                                                        {
+                                                            label: 'Action three',
+                                                            onSelect: () => this.setState({dropDownState: ' '}),
+                                                        },
+                                                    ],
+                                                },
                                             ]}
                                         >
-                                            <NavButton icon='dots-vertical' onClick={() => false} />
+                                            <NavButton icon="dots-vertical" onClick={() => false} />
                                         </Dropdown>
                                     </ButtonGroup>
                                 </ButtonGroup>
@@ -402,17 +573,20 @@ export class CoreLayout extends React.Component<IProps, IState> {
                         {/* TOOLBAR HEADER */}
 
                         <Layout.LeftPanel open={this.state.openFilter}>
-                            <Layout.Panel side='left' background='grey'>
-                                <Layout.PanelHeader title='Advanced filters' onClose={() => this.setState({'openFilter': false})} />
+                            <Layout.Panel side="left" background="grey">
+                                <Layout.PanelHeader
+                                    title="Advanced filters"
+                                    onClose={() => this.setState({openFilter: false})}
+                                />
                                 <Layout.PanelContent>
                                     <Layout.PanelContentBlock>
                                         <Form.FormGroup>
                                             <Form.FormItem>
                                                 <Select
-                                                    label='Shows'
+                                                    label="Shows"
                                                     labelHidden={true}
-                                                    value='This is some value'
-                                                    info='This is some hint message'
+                                                    value="This is some value"
+                                                    info="This is some hint message"
                                                     required={true}
                                                     disabled={false}
                                                     onChange={() => false}
@@ -425,9 +599,9 @@ export class CoreLayout extends React.Component<IProps, IState> {
                                         <div className="form__group">
                                             <div className="form__item">
                                                 <Input
-                                                    label='Title'
-                                                    type='text'
-                                                    value='Title'
+                                                    label="Title"
+                                                    type="text"
+                                                    value="Title"
                                                     inlineLabel={false}
                                                     disabled={false}
                                                     onChange={() => false}
@@ -437,8 +611,8 @@ export class CoreLayout extends React.Component<IProps, IState> {
                                         <div className="form__group">
                                             <div className="form__item">
                                                 <Select
-                                                    label='Source'
-                                                    value='Select ingest source...'
+                                                    label="Source"
+                                                    value="Select ingest source..."
                                                     inlineLabel={false}
                                                     disabled={false}
                                                     onChange={() => false}
@@ -452,21 +626,23 @@ export class CoreLayout extends React.Component<IProps, IState> {
 
                                         <div className="form__group">
                                             <div className="form__item">
-                                                <Input label='Keyword'
-                                                    type='text'
-                                                    value='Keyword'
+                                                <Input
+                                                    label="Keyword"
+                                                    type="text"
+                                                    value="Keyword"
                                                     inlineLabel={false}
                                                     disabled={false}
-                                                    onChange={() => false} />
+                                                    onChange={() => false}
+                                                />
                                             </div>
                                         </div>
 
                                         <div className="form__group">
                                             <div className="form__item">
                                                 <Select
-                                                    label='Usage right'
-                                                    value='--- Not selected ---'
-                                                    info='Dolor in hendrerit.'
+                                                    label="Usage right"
+                                                    value="--- Not selected ---"
+                                                    info="Dolor in hendrerit."
                                                     inlineLabel={false}
                                                     disabled={false}
                                                     onChange={() => false}
@@ -482,107 +658,192 @@ export class CoreLayout extends React.Component<IProps, IState> {
                                     </Layout.PanelContentBlock>
                                 </Layout.PanelContent>
                                 <Layout.PanelFooter>
-                                    <Button text='Clear' style='hollow' onClick={() => false} />
-                                    <Button text='Submit' type='primary' onClick={() => false} />
+                                    <Button text="Clear" style="hollow" onClick={() => false} />
+                                    <Button text="Submit" type="primary" onClick={() => false} />
                                 </Layout.PanelFooter>
                             </Layout.Panel>
                         </Layout.LeftPanel>
                         {/* FILTER PANEL*/}
                         <Layout.MainPanel>
                             <ContentList
-                            items={[
-                                {
-                                    itemColum: [
-                                        {
-                                            itemRow: [{content:<>
-                                                        <i className="icon-rundown"></i>
-                                                    </>}],
-                                            border: true
-                                        },
-                                        {
-                                            itemRow: [
-                                                {
-                                                    content:
-                                                    <>
-                                                        <span className="sd-list-item__slugline">19:00 – 19:45</span>
-                                                        <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
-                                                        <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
-                                                        <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
-                                                    </>
-                                                },
-                                                {
-                                                    content:
-                                                    <>
-                                                        <Label text='Marker' color='blue--800'/>
-                                                            <span className='sd-list-item__compound-text'>
-                                                                <span className='sd-list-item__text-label'>Template:</span>
-                                                                <span>Marker Daily</span>
-                                                            </span>
-                                                            <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>    
-                                                        <Label style='translucent' text='In Progress' type='warning' />
-                                                    </>
-                                                },
-                                            ],
-                                            fullwidth: true,
-                                        }
-                                    ],
-                                    action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
-                                    locked: true,
-                                    onClick: () => this.setState({openEditor: !this.state.openEditor}),
-                                },
-                                {
-                                    itemColum: [
-                                        {
-                                            itemRow: [{content:<>
-                                                        <i className="icon-rundown"></i>
-                                                    </>}], 
-                                            border: true
-                                        },
-                                        {
-                                            itemRow: [
-                                                {
-                                                    content: 
-                                                    <>
-                                                        <span className="sd-list-item__slugline">19:00 – 19:45</span>
-                                                        <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
-                                                        <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
-                                                        <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
-                                                    </>
-                                                },
-                                                {
-                                                    content: 
-                                                    <>
-                                                        <Label text='Tabu' color='blue--800'/>
-                                                            <span className='sd-list-item__compound-text'>
-                                                                <span className='sd-list-item__text-label'>Template:</span>
-                                                                <span>Tabu Daily</span>
-                                                            </span>
-                                                            <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>    
-                                                        <Label style='translucent' text='Draft' />
-                                                    </>
-                                                },
-                                            ],
-                                            fullwidth: true,
-                                        }
-                                    ],
-                                    action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
-                                    onClick: () => this.setState({openPreview: !this.state.openPreview}),
-                                },
-                            ]}
-                        />
+                                items={[
+                                    {
+                                        itemColum: [
+                                            {
+                                                itemRow: [
+                                                    {
+                                                        content: (
+                                                            <>
+                                                                <i className="icon-rundown"></i>
+                                                            </>
+                                                        ),
+                                                    },
+                                                ],
+                                                border: true,
+                                            },
+                                            {
+                                                itemRow: [
+                                                    {
+                                                        content: (
+                                                            <>
+                                                                <span className="sd-list-item__slugline">
+                                                                    19:00 – 19:45
+                                                                </span>
+                                                                <IconLabel
+                                                                    style="translucent"
+                                                                    innerLabel="Duration:"
+                                                                    text="00:38"
+                                                                    size="small"
+                                                                    type="warning"
+                                                                />
+                                                                <IconLabel
+                                                                    style="translucent"
+                                                                    innerLabel="Planned Duration:"
+                                                                    text="00:45"
+                                                                    size="small"
+                                                                />
+                                                                <time
+                                                                    className="sd-margin-s--auto"
+                                                                    title="June 01, 2022 11:08 AM"
+                                                                >
+                                                                    11:08, 01.06.2022
+                                                                </time>
+                                                            </>
+                                                        ),
+                                                    },
+                                                    {
+                                                        content: (
+                                                            <>
+                                                                <Label text="Marker" color="blue--800" />
+                                                                <span className="sd-list-item__compound-text">
+                                                                    <span className="sd-list-item__text-label">
+                                                                        Template:
+                                                                    </span>
+                                                                    <span>Marker Daily</span>
+                                                                </span>
+                                                                <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">
+                                                                    Marker // 01.06.2022
+                                                                </span>
+                                                                <Label
+                                                                    style="translucent"
+                                                                    text="In Progress"
+                                                                    type="warning"
+                                                                />
+                                                            </>
+                                                        ),
+                                                    },
+                                                ],
+                                                fullwidth: true,
+                                            },
+                                        ],
+                                        action: (
+                                            <IconButton
+                                                icon="dots-vertical"
+                                                ariaValue="More actions"
+                                                onClick={() => false}
+                                            />
+                                        ),
+                                        locked: true,
+                                        onClick: () => this.setState({openEditor: !this.state.openEditor}),
+                                    },
+                                    {
+                                        itemColum: [
+                                            {
+                                                itemRow: [
+                                                    {
+                                                        content: (
+                                                            <>
+                                                                <i className="icon-rundown"></i>
+                                                            </>
+                                                        ),
+                                                    },
+                                                ],
+                                                border: true,
+                                            },
+                                            {
+                                                itemRow: [
+                                                    {
+                                                        content: (
+                                                            <>
+                                                                <span className="sd-list-item__slugline">
+                                                                    19:00 – 19:45
+                                                                </span>
+                                                                <IconLabel
+                                                                    style="translucent"
+                                                                    innerLabel="Duration:"
+                                                                    text="00:38"
+                                                                    size="small"
+                                                                    type="warning"
+                                                                />
+                                                                <IconLabel
+                                                                    style="translucent"
+                                                                    innerLabel="Planned Duration:"
+                                                                    text="00:45"
+                                                                    size="small"
+                                                                />
+                                                                <time
+                                                                    className="sd-margin-s--auto"
+                                                                    title="June 01, 2022 11:08 AM"
+                                                                >
+                                                                    11:08, 01.06.2022
+                                                                </time>
+                                                            </>
+                                                        ),
+                                                    },
+                                                    {
+                                                        content: (
+                                                            <>
+                                                                <Label text="Tabu" color="blue--800" />
+                                                                <span className="sd-list-item__compound-text">
+                                                                    <span className="sd-list-item__text-label">
+                                                                        Template:
+                                                                    </span>
+                                                                    <span>Tabu Daily</span>
+                                                                </span>
+                                                                <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">
+                                                                    Marker // 01.06.2022
+                                                                </span>
+                                                                <Label style="translucent" text="Draft" />
+                                                            </>
+                                                        ),
+                                                    },
+                                                ],
+                                                fullwidth: true,
+                                            },
+                                        ],
+                                        action: (
+                                            <IconButton
+                                                icon="dots-vertical"
+                                                ariaValue="More actions"
+                                                onClick={() => false}
+                                            />
+                                        ),
+                                        onClick: () => this.setState({openPreview: !this.state.openPreview}),
+                                    },
+                                ]}
+                            />
                         </Layout.MainPanel>
 
                         {/* MAIN CONTENT (Monitoring) */}
                         <Layout.RightPanel open={this.state.openPreview}>
-                            <Layout.Panel side='right'>
-                                <Layout.PanelHeader title='Item preview' onClose={() => this.setState({'openPreview': false})}  />
+                            <Layout.Panel side="right">
+                                <Layout.PanelHeader
+                                    title="Item preview"
+                                    onClose={() => this.setState({openPreview: false})}
+                                />
                                 <Layout.PanelContent>
                                     <Layout.PanelContentBlock flex={true}>
-                                        <Layout.Container direction='column' gap='x-small'>
-                                            <Layout.Container direction='row' gap='small'><Text color='light'>Created 09.06.2022 by </Text><Text weight='medium'>Mika Karapet</Text></Layout.Container>
-                                            <Layout.Container direction='row' gap='small'><Text color='light'>Updated 3 hours ago by </Text><Text weight='medium'>John Doe</Text></Layout.Container>
+                                        <Layout.Container direction="column" gap="x-small">
+                                            <Layout.Container direction="row" gap="small">
+                                                <Text color="light">Created 09.06.2022 by </Text>
+                                                <Text weight="medium">Mika Karapet</Text>
+                                            </Layout.Container>
+                                            <Layout.Container direction="row" gap="small">
+                                                <Text color="light">Updated 3 hours ago by </Text>
+                                                <Text weight="medium">John Doe</Text>
+                                            </Layout.Container>
                                         </Layout.Container>
-                                        <Layout.Container className='sd-margin-s--auto sd-flex--items-center'>
+                                        <Layout.Container className="sd-margin-s--auto sd-flex--items-center">
                                             {/* <Dropdown
                                                 align = 'right'
                                                 items={[
@@ -600,33 +861,55 @@ export class CoreLayout extends React.Component<IProps, IState> {
                                     </Layout.PanelContentBlock>
 
                                     <Layout.PanelContentBlock>
-                                        <Layout.Container direction='row'  gap='large' className='sd-margin-b--3'>
-                                            <Label size='large' text='Tabu' color='blue--800'/>
-                                            <Layout.Container direction='row' gap='small'>
-                                                <Text color='light' size='small' style='italic' >Template:</Text>
-                                                <Text size='small' style='italic' weight='medium'>Tabu daily</Text>
+                                        <Layout.Container direction="row" gap="large" className="sd-margin-b--3">
+                                            <Label size="large" text="Tabu" color="blue--800" />
+                                            <Layout.Container direction="row" gap="small">
+                                                <Text color="light" size="small" style="italic">
+                                                    Template:
+                                                </Text>
+                                                <Text size="small" style="italic" weight="medium">
+                                                    Tabu daily
+                                                </Text>
                                             </Layout.Container>
                                         </Layout.Container>
-                                    
-                                        <Layout.Container direction='column' className='sd-margin-y--2'>
+
+                                        <Layout.Container direction="column" className="sd-margin-y--2">
                                             {/* <FormLabel text='Title' /> */}
-                                            <Heading type='h2'>Tabu // 01.06.2022</Heading>
+                                            <Heading type="h2">Tabu // 01.06.2022</Heading>
                                         </Layout.Container>
                                         <ButtonGroup>
-                                            <IconLabel style='translucent' innerLabel='Airtime:' text='19:45 - 20:45' type='primary' />
-                                            <IconLabel style='translucent' innerLabel='Duration:' text='00:56' type='warning' />
-                                            <Text color='light' size='small' className='sd-margin--0'>OF</Text>
-                                            <IconLabel style='translucent' innerLabel='Planned:'text='01:00' />
+                                            <IconLabel
+                                                style="translucent"
+                                                innerLabel="Airtime:"
+                                                text="19:45 - 20:45"
+                                                type="primary"
+                                            />
+                                            <IconLabel
+                                                style="translucent"
+                                                innerLabel="Duration:"
+                                                text="00:56"
+                                                type="warning"
+                                            />
+                                            <Text color="light" size="small" className="sd-margin--0">
+                                                OF
+                                            </Text>
+                                            <IconLabel style="translucent" innerLabel="Planned:" text="01:00" />
                                         </ButtonGroup>
                                         <TableList
-                                            className='sd-margin-y--4'
+                                            className="sd-margin-y--4"
                                             array={this.state.array}
                                             itemsDropdown={() => [
-                                                { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
-                                                { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
-                                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                                                {
+                                                    label: <Label style="translucent" type="primary" text="aacc" />,
+                                                    onSelect: () => 1,
+                                                },
+                                                {label: <Label style="translucent" text="prlg" />, onSelect: () => 1},
+                                                {
+                                                    label: <Label style="translucent" type="primary" text="prlg" />,
+                                                    onSelect: () => 1,
+                                                },
                                             ]}
-                                        />   
+                                        />
                                     </Layout.PanelContentBlock>
                                 </Layout.PanelContent>
                             </Layout.Panel>
@@ -636,7 +919,7 @@ export class CoreLayout extends React.Component<IProps, IState> {
                         <Layout.OverlayPanel />
                         {/* OVERLAY PANEL (Send To) */}
                     </Layout.LayoutContainer>
-                }
+                )}
 
                 <Layout.ContentSplitter visible={this.state.openEditor} />
 
@@ -646,24 +929,23 @@ export class CoreLayout extends React.Component<IProps, IState> {
                         rightPanel={this.state.rightPanel}
                         openPanel={() => {
                             if (this.state.fullEditor) {
-                                this.setState({previousState: true})
+                                this.setState({previousState: true});
                             } else {
-                                this.setState({previousState: false})
+                                this.setState({previousState: false});
                             }
-                            
-                            this.setState({rightPanel: true})
+
+                            this.setState({rightPanel: true});
                         }}
                         closePanel={() => {
                             if (!this.state.previousState) {
-                                this.setState({rightPanel: false, fullEditor: false})
+                                this.setState({rightPanel: false, fullEditor: false});
                             } else {
-                                this.setState({rightPanel: false})
+                                this.setState({rightPanel: false});
                             }
                         }}
                     />
                 </Layout.AuthoringContainer>
                 {/* END RUNDOWN EDITOR */}
-     
             </Layout.CoreLayout>
         );
     }