superdesk-ui-framework 4.0.47 → 4.0.49

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

@@ -1,9 +1,26 @@
 import * as React from 'react';
-import { ButtonGroup, Button, NavButton, SubNav, Input, IconButton, Divider, Tooltip, Select, Option, Text, SlidingToolbar, Container, Label, IconLabel, Icon } from '../../../../app-typescript/index';
+import {
+    ButtonGroup,
+    Button,
+    NavButton,
+    SubNav,
+    Input,
+    IconButton,
+    Divider,
+    Tooltip,
+    Select,
+    Option,
+    Text,
+    SlidingToolbar,
+    Container,
+    Label,
+    IconLabel,
+    Icon,
+} 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 { TableList } from '../../../../app-typescript/components/Lists/TableList';
+import {TableList} from '../../../../app-typescript/components/Lists/TableList';
 
 interface IProps {
     children?: React.ReactNode;
@@ -52,81 +69,121 @@ export class RundownEditor extends React.Component<IProps, IState> {
             inputValue: 'string',
             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>,
-                    end: <>
-                            <IconLabel style='translucent' innerLabel='Planned:' text='00:20' />
-                            <IconLabel style='translucent' innerLabel='Duration:' text='00:20' type='success' />
-                        </>,
-                    action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
-                    onClick: () => { this.props.openPanel() }
+                    end: (
+                        <>
+                            <IconLabel style="translucent" innerLabel="Planned:" text="00:20" />
+                            <IconLabel style="translucent" innerLabel="Duration:" text="00:20" type="success" />
+                        </>
+                    ),
+                    action: (
+                        <IconButton icon="dots-vertical" size="small" ariaValue="More actions" onClick={() => false} />
+                    ),
+                    onClick: () => {
+                        this.props.openPanel();
+                    },
                 },
                 {
-                    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>,
-                    end: <>
-                        <IconLabel style='translucent' innerLabel='Planned:' text='00:12' />
-                        <IconLabel style='translucent' innerLabel='Duration:' text='00:11' type='warning' />
-                        </>,
-                    action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
-                    onClick: () => { this.props.openPanel() }
+                    end: (
+                        <>
+                            <IconLabel style="translucent" innerLabel="Planned:" text="00:12" />
+                            <IconLabel style="translucent" innerLabel="Duration:" text="00:11" type="warning" />
+                        </>
+                    ),
+                    action: (
+                        <IconButton icon="dots-vertical" size="small" ariaValue="More actions" onClick={() => false} />
+                    ),
+                    onClick: () => {
+                        this.props.openPanel();
+                    },
                 },
                 {
-                    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>,
-                    end: <>
-                            <IconLabel style='translucent' innerLabel='Planned:' text='00:20' />
-                            <IconLabel style='translucent' innerLabel='Duration:' text='00:20' type='success' />
-                        </>,
-                    action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
-                    onClick: () => { this.props.openPanel() }
+                    end: (
+                        <>
+                            <IconLabel style="translucent" innerLabel="Planned:" text="00:20" />
+                            <IconLabel style="translucent" innerLabel="Duration:" text="00:20" type="success" />
+                        </>
+                    ),
+                    action: (
+                        <IconButton icon="dots-vertical" size="small" ariaValue="More actions" onClick={() => false} />
+                    ),
+                    onClick: () => {
+                        this.props.openPanel();
+                    },
                 },
                 {
-                    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>,
-                    end: <>
-                            <IconLabel style='translucent' innerLabel='Planned:' text='00:14' />
-                            <IconLabel style='translucent' innerLabel='Duration:' text='00:15' type='alert' />
-                        </>,
-                    action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
-                    onClick: () => { this.props.openPanel() }
+                    end: (
+                        <>
+                            <IconLabel style="translucent" innerLabel="Planned:" text="00:14" />
+                            <IconLabel style="translucent" innerLabel="Duration:" text="00:15" type="alert" />
+                        </>
+                    ),
+                    action: (
+                        <IconButton icon="dots-vertical" size="small" ariaValue="More actions" onClick={() => false} />
+                    ),
+                    onClick: () => {
+                        this.props.openPanel();
+                    },
                 },
                 {
-                    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>,
-                    end: <>
-                            <IconLabel style='translucent' innerLabel='Planned:' text='00:20' />
-                            <IconLabel style='translucent' innerLabel='Duration:' text='00:20' type='success' />
-                        </>,
-                    action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
-                    onClick: () => { this.props.openPanel() }
+                    end: (
+                        <>
+                            <IconLabel style="translucent" innerLabel="Planned:" text="00:20" />
+                            <IconLabel style="translucent" innerLabel="Duration:" text="00:20" type="success" />
+                        </>
+                    ),
+                    action: (
+                        <IconButton icon="dots-vertical" size="small" ariaValue="More actions" onClick={() => false} />
+                    ),
+                    onClick: () => {
+                        this.props.openPanel();
+                    },
                 },
             ],
             activeTab: null,
             isExpanded: false,
-        }
+        };
         this.handleTheme = this.handleTheme.bind(this);
     }
 
     handleTheme(newTheme: string) {
         this.setState({
-            theme: newTheme
-        })
+            theme: newTheme,
+        });
     }
 
     changeStatus(item: any, status: string) {
@@ -138,66 +195,87 @@ export class RundownEditor extends React.Component<IProps, IState> {
     }
 
     toggleExpand = () => {
-        this.setState(prevState => ({ isExpanded: !prevState.isExpanded }));
-    }
+        this.setState((prevState) => ({isExpanded: !prevState.isExpanded}));
+    };
 
     render() {
         return (
             <Layout.LayoutContainer>
                 <Layout.HeaderPanel>
                     <SubNav>
-                        <Tooltip text={this.state.isExpanded ? "Revert Authoring" : "Expand Authoring"} flow='right'>
+                        <Tooltip text={this.state.isExpanded ? 'Revert Authoring' : 'Expand Authoring'} flow="right">
                             <button
-                                className={`expand-button ${this.state.isExpanded ? "expand-button--expanded" : ""}`}
+                                className={`expand-button ${this.state.isExpanded ? 'expand-button--expanded' : ''}`}
                                 onClick={this.toggleExpand}
                             >
-                                <Icon name='chevron-left-thin' />
+                                <Icon name="chevron-left-thin" />
                             </button>
                         </Tooltip>
-                        <ButtonGroup align='end'>
-                            <Button text="Cancel" onClick={()=> false} type="default" />
-                            <Button text="Save Rundown" onClick={()=> false} type="primary" />
+                        <ButtonGroup align="end">
+                            <Button text="Cancel" onClick={() => false} type="default" />
+                            <Button text="Save Rundown" onClick={() => false} type="primary" />
                             <Divider size="mini" />
                             <ButtonGroup subgroup={true} spaces="no-space">
-                                <Tooltip text='Minimize' flow='left'>
-                                    <NavButton type='default' icon='minimize' iconSize='big' text='Minimize' onClick={()=> false} />
+                                <Tooltip text="Minimize" flow="left">
+                                    <NavButton
+                                        type="default"
+                                        icon="minimize"
+                                        iconSize="big"
+                                        text="Minimize"
+                                        onClick={() => false}
+                                    />
                                 </Tooltip>
-                                <Tooltip text='More actions' flow='left'>
-                                    <NavButton type='default' icon='dots-vertical' text='More actions' onClick={()=> false} />
+                                <Tooltip text="More actions" flow="left">
+                                    <NavButton
+                                        type="default"
+                                        icon="dots-vertical"
+                                        text="More actions"
+                                        onClick={() => false}
+                                    />
                                 </Tooltip>
-                                <Tooltip text='Send to / Publish' flow='left'>
-                                    <NavButton type='highlight' icon='send-to' iconSize='big' text='Send to / Publish' onClick={()=> false} />
+                                <Tooltip text="Send to / Publish" flow="left">
+                                    <NavButton
+                                        type="highlight"
+                                        icon="send-to"
+                                        iconSize="big"
+                                        text="Send to / Publish"
+                                        onClick={() => false}
+                                    />
                                 </Tooltip>
                             </ButtonGroup>
                         </ButtonGroup>
                     </SubNav>
                 </Layout.HeaderPanel>
 
-                <Layout.MainPanel padding='none'>
+                <Layout.MainPanel padding="none">
                     <Layout.AuthoringMain
-                        toolBar={(
+                        toolBar={
                             <React.Fragment>
                                 <div className="sd-editor-toolbar__content">
                                     <dl>
                                         <dt>Created</dt>
-                                        <dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
+                                        <dd>
+                                            <time title="July 29, 2021 3:58 PM">07/29</time>
+                                        </dd>
                                         <dt>by</dt>
                                         <dt>Nareg Asmarian</dt>
                                     </dl>
                                     <dl>
                                         <dt>Modified</dt>
-                                        <dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
+                                        <dd>
+                                            <time title="July 29, 2021 3:58 PM">07/29</time>
+                                        </dd>
                                     </dl>
                                 </div>
                             </React.Fragment>
-                        )}
-                        authoringHeader={(
+                        }
+                        authoringHeader={
                             <React.Fragment>
                                 <Form.FormGroup>
                                     <Form.FormItem>
                                         <Select
-                                            label='Type'
-                                            value='Type value'
+                                            label="Type"
+                                            value="Type value"
                                             required={true}
                                             disabled={false}
                                             onChange={() => false}
@@ -208,8 +286,8 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                     </Form.FormItem>
                                     <Form.FormItem>
                                         <Select
-                                            label='Show'
-                                            value='show value'
+                                            label="Show"
+                                            value="show value"
                                             required={true}
                                             disabled={false}
                                             onChange={() => false}
@@ -220,8 +298,8 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                     </Form.FormItem>
                                     <Form.FormItem>
                                         <Select
-                                            label='Show section'
-                                            value='Some value'
+                                            label="Show section"
+                                            value="Some value"
                                             required={true}
                                             disabled={false}
                                             onChange={() => false}
@@ -234,9 +312,9 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                 <Form.FormGroup>
                                     <Form.FormItem>
                                         <Input
-                                            type='text'
-                                            label='Slugline'
-                                            value=''
+                                            type="text"
+                                            label="Slugline"
+                                            value=""
                                             required={false}
                                             disabled={false}
                                             onChange={() => false}
@@ -244,9 +322,9 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                     </Form.FormItem>
                                     <Form.FormItem>
                                         <Input
-                                            type='text'
-                                            label='Category'
-                                            value=''
+                                            type="text"
+                                            label="Category"
+                                            value=""
                                             required={false}
                                             disabled={false}
                                             onChange={() => false}
@@ -256,21 +334,21 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                 <Form.FormGroup>
                                     <Form.FormItem>
                                         <Input
-                                            type='text'
-                                            label='Author'
-                                            value='This is some value'
+                                            type="text"
+                                            label="Author"
+                                            value="This is some value"
                                             required={true}
                                             disabled={false}
                                             onChange={() => false}
                                         />
                                     </Form.FormItem>
                                 </Form.FormGroup>
-                                <Form.FormGroup marginBottom='2'>
+                                <Form.FormGroup marginBottom="2">
                                     <Form.FormItem>
                                         <Input
-                                            type='text'
-                                            label='Start Time'
-                                            value=''
+                                            type="text"
+                                            label="Start Time"
+                                            value=""
                                             required={true}
                                             disabled={false}
                                             onChange={() => false}
@@ -278,9 +356,9 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                     </Form.FormItem>
                                     <Form.FormItem>
                                         <Input
-                                            type='text'
-                                            label='End Time'
-                                            value=''
+                                            type="text"
+                                            label="End Time"
+                                            value=""
                                             required={true}
                                             disabled={false}
                                             onChange={() => false}
@@ -288,9 +366,9 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                     </Form.FormItem>
                                     <Form.FormItem>
                                         <Input
-                                            type='text'
-                                            label='Duration'
-                                            value=''
+                                            type="text"
+                                            label="Duration"
+                                            value=""
                                             required={true}
                                             disabled={false}
                                             onChange={() => false}
@@ -298,86 +376,114 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                     </Form.FormItem>
                                 </Form.FormGroup>
                             </React.Fragment>
-                        )}
+                        }
                     >
-                        <Container direction='column' className='sd-margin-y--2'>
+                        <Container direction="column" className="sd-margin-y--2">
                             <Input
-                                label='Rundown title'
+                                label="Rundown title"
                                 value={'Marker // 01.06.2022'}
                                 boxedStyle={true}
                                 boxedLable={true}
-                                size='x-large'
-                                placeholder='Rundown title'
+                                size="x-large"
+                                placeholder="Rundown title"
                                 labelHidden={true}
-                                type='text'
+                                type="text"
                                 tabindex={0}
                                 onChange={(value) => this.setState({inputValue: value})}
                             />
                         </Container>
                         <ButtonGroup>
-                            <IconLabel style='translucent' innerLabel='Airtime:' text='19:00 - 19:45' size='large' type='primary' icon='time' />
-                            <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='large' type='warning' />
-                            <Text color='light' size='medium' className='sd-margin--0'>OF</Text>
-                            <IconLabel style='translucent' innerLabel='Planned:'text='00:45' size='large' />
+                            <IconLabel
+                                style="translucent"
+                                innerLabel="Airtime:"
+                                text="19:00 - 19:45"
+                                size="large"
+                                type="primary"
+                                icon="time"
+                            />
+                            <IconLabel
+                                style="translucent"
+                                innerLabel="Duration:"
+                                text="00:38"
+                                size="large"
+                                type="warning"
+                            />
+                            <Text color="light" size="medium" className="sd-margin--0">
+                                OF
+                            </Text>
+                            <IconLabel style="translucent" innerLabel="Planned:" text="00:45" size="large" />
                         </ButtonGroup>
                         <TableList
-                            className='sd-margin-y--4'
+                            className="sd-margin-y--4"
                             dragAndDrop
                             addItem
                             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.AuthoringMain>
                 </Layout.MainPanel>
 
                 <Layout.RightPanel open={this.props.rightPanel}>
-                    <Layout.Panel size='x-large' side='right'>
+                    <Layout.Panel size="x-large" side="right">
                         <Layout.PanelContent>
                             <Layout.AuthoringFrame
                                 main={
                                     <Layout.AuthoringMain
                                         toolbarCustom={true}
                                         headerCollapsed={true}
-                                        toolBar={(
+                                        toolBar={
                                             <React.Fragment>
-                                                <SubNav className='sd-shadow--z0'>
+                                                <SubNav className="sd-shadow--z0">
                                                     <SlidingToolbar>
-                                                        <ButtonGroup align='start'>
-                                                            <IconButton ariaValue="Close" icon="close-small" onClick={() => this.props.closePanel()} />
+                                                        <ButtonGroup align="start">
+                                                            <IconButton
+                                                                ariaValue="Close"
+                                                                icon="close-small"
+                                                                onClick={() => this.props.closePanel()}
+                                                            />
                                                         </ButtonGroup>
-                                                        <ButtonGroup align='end'>
-                                                            <Button text="Save Changes" style='hollow' onClick={() => this.props.closePanel()} type="primary" />
+                                                        <ButtonGroup align="end">
+                                                            <Button
+                                                                text="Save Changes"
+                                                                style="hollow"
+                                                                onClick={() => this.props.closePanel()}
+                                                                type="primary"
+                                                            />
                                                         </ButtonGroup>
                                                     </SlidingToolbar>
                                                 </SubNav>
 
-                                                <div className='sd-editor-content__toolbar-inner'>
+                                                <div className="sd-editor-content__toolbar-inner">
                                                     <div className="sd-editor-toolbar__content">
                                                         <dl>
                                                             <dt>Created</dt>
-                                                            <dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
+                                                            <dd>
+                                                                <time title="July 29, 2021 3:58 PM">07/29</time>
+                                                            </dd>
                                                             <dt>by</dt>
                                                             <dt>Nareg Asmarian</dt>
                                                         </dl>
                                                         <dl>
                                                             <dt>Modified</dt>
-                                                            <dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
+                                                            <dd>
+                                                                <time title="July 29, 2021 3:58 PM">07/29</time>
+                                                            </dd>
                                                         </dl>
                                                     </div>
                                                 </div>
                                             </React.Fragment>
-                                        )}
-                                        authoringHeader={(
+                                        }
+                                        authoringHeader={
                                             <React.Fragment>
                                                 <Form.FormGroup inlineLabel={false}>
                                                     <Form.FormItem>
                                                         <Select
-                                                            label='Type'
-                                                            value='Type value'
+                                                            label="Type"
+                                                            value="Type value"
                                                             required={true}
                                                             disabled={false}
                                                             onChange={() => false}
@@ -388,8 +494,8 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                                     </Form.FormItem>
                                                     <Form.FormItem>
                                                         <Select
-                                                            label='Show section'
-                                                            value='Some value'
+                                                            label="Show section"
+                                                            value="Some value"
                                                             required={true}
                                                             disabled={false}
                                                             onChange={() => false}
@@ -402,8 +508,8 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                                 <Form.FormGroup inlineLabel={false}>
                                                     <Form.FormItem>
                                                         <Select
-                                                            label='Duration'
-                                                            value='Some value'
+                                                            label="Duration"
+                                                            value="Some value"
                                                             required={true}
                                                             disabled={false}
                                                             onChange={() => false}
@@ -414,9 +520,9 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                                     </Form.FormItem>
                                                     <Form.FormItem>
                                                         <Input
-                                                            type='text'
-                                                            label='Category'
-                                                            value=' '
+                                                            type="text"
+                                                            label="Category"
+                                                            value=" "
                                                             required={false}
                                                             disabled={false}
                                                             onChange={() => false}
@@ -426,9 +532,9 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                                 <Form.FormGroup inlineLabel={false}>
                                                     <Form.FormItem>
                                                         <Input
-                                                            type='text'
-                                                            label='Author'
-                                                            value='This is some value'
+                                                            type="text"
+                                                            label="Author"
+                                                            value="This is some value"
                                                             required={false}
                                                             disabled={false}
                                                             onChange={() => false}
@@ -436,28 +542,34 @@ export class RundownEditor extends React.Component<IProps, IState> {
                                                     </Form.FormItem>
                                                 </Form.FormGroup>
                                             </React.Fragment>
-                                        )}
+                                        }
                                     />
                                 }
-                                sideBar={(
+                                sideBar={
                                     <Nav.SideBarTabs
                                         items={[
-                                            { icon: 'info', size: 'big', tooltip: 'Info', id: '1' },
-                                            { icon: 'chat', size: 'big', tooltip: 'Comments', id: '2' },
-                                            { icon: 'history', size: 'big', tooltip: 'History', id: '3' },
-                                            { icon: 'package', size: 'big', tooltip: 'Packages', id: '4' },
-                                            { icon: 'attachment', size: 'big', tooltip: 'Attachments', id: '5' },
-                                            { icon: 'comments', size: 'big', tooltip: 'Inline Comments', badgeValue: '5', id: '6' },
-                                            { icon: 'suggestion', size: 'big', tooltip: 'Suggestions', id: '7' }
+                                            {icon: 'info', size: 'big', tooltip: 'Info', id: '1'},
+                                            {icon: 'chat', size: 'big', tooltip: 'Comments', id: '2'},
+                                            {icon: 'history', size: 'big', tooltip: 'History', id: '3'},
+                                            {icon: 'package', size: 'big', tooltip: 'Packages', id: '4'},
+                                            {icon: 'attachment', size: 'big', tooltip: 'Attachments', id: '5'},
+                                            {
+                                                icon: 'comments',
+                                                size: 'big',
+                                                tooltip: 'Inline Comments',
+                                                badgeValue: '5',
+                                                id: '6',
+                                            },
+                                            {icon: 'suggestion', size: 'big', tooltip: 'Suggestions', id: '7'},
                                         ]}
                                         activeTab={this.state.activeTab}
                                         onActiveTabChange={(id) => {
                                             this.setState({
                                                 activeTab: id,
-                                            })
+                                            });
                                         }}
                                     />
-                                )}
+                                }
                             />
                         </Layout.PanelContent>
                     </Layout.Panel>