superdesk-ui-framework 4.0.46 → 4.0.48

package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx

@@ -1,6 +1,22 @@
 import * as React from 'react';
 import * as Components from './components/Index';
-import { ButtonGroup, Button, NavButton, SubNav, Dropdown, RadioButtonGroup, Input, Select, Option, Label, Icon, IconButton, Checkbox, GridList, Badge } from '../../../../app-typescript/index';
+import {
+    ButtonGroup,
+    Button,
+    NavButton,
+    SubNav,
+    Dropdown,
+    RadioButtonGroup,
+    Input,
+    Select,
+    Option,
+    Label,
+    Icon,
+    IconButton,
+    Checkbox,
+    GridList,
+    Badge,
+} from '../../../../app-typescript/index';
 import * as GridElements from '../../../../app-typescript/components/GridItem';
 
 import dummy_items from '../dummy-data/items';
@@ -34,7 +50,7 @@ export class SamsPlayground extends React.Component<IProps, IState> {
             itemSelected2: false,
             itemSelected3: false,
             value1: false,
-        }
+        };
         this.handleFilter = this.handleFilter.bind(this);
         this.handlePreview = this.handlePreview.bind(this);
         this.handleTheme = this.handleTheme.bind(this);
@@ -55,7 +71,7 @@ export class SamsPlayground extends React.Component<IProps, IState> {
     handleTheme(newTheme: string) {
         this.setState({
             theme: newTheme,
-        })
+        });
     }
 
     changeStatus(item: any, status: string) {
@@ -68,92 +84,111 @@ export class SamsPlayground extends React.Component<IProps, IState> {
 
     render() {
         return (
-            <Components.Layout header='SAMS playground' theme={this.state.theme}>
+            <Components.Layout header="SAMS playground" theme={this.state.theme}>
                 <Components.SidebarMenu
                     items={[
-                        { icon: 'dashboard', size: 'big' },
-                        { icon: 'view', size: 'big' },
-                        { icon: 'marked-star', size: 'big' },
-                        { icon: 'spike', size: 'big' },
-                        { icon: 'personal', size: 'big' },
-                        { icon: 'global-search', size: 'big' },
-                        { icon: 'picture', size: 'big', active: true }
+                        {icon: 'dashboard', size: 'big'},
+                        {icon: 'view', size: 'big'},
+                        {icon: 'marked-star', size: 'big'},
+                        {icon: 'spike', size: 'big'},
+                        {icon: 'personal', size: 'big'},
+                        {icon: 'global-search', size: 'big'},
+                        {icon: 'picture', size: 'big', active: true},
                     ]}
                 />
 
                 <Components.LayoutContainer>
                     <Components.HeaderPanel>
                         <SubNav>
-                            <ButtonGroup align='inline'>
+                            <ButtonGroup align="inline">
                                 <Dropdown
                                     items={[
                                         {
-                                            type: 'group', label: 'Archives', items: [
+                                            type: 'group',
+                                            label: 'Archives',
+                                            items: [
                                                 'divider',
-                                                { label: 'All archives', onSelect: () => this.setState({ dropDownState: 'All archives' }) },
-                                                { label: 'Media archive', onSelect: () => this.setState({ dropDownState: 'Media archive' }) },
-                                                { label: 'File archive', onSelect: () => this.setState({ dropDownState: 'File archive' }) },
-                                                { label: 'AP images', onSelect: () => this.setState({ dropDownState: 'AP archive' }) },
-                                            ]
-                                        }
+                                                {
+                                                    label: 'All archives',
+                                                    onSelect: () => this.setState({dropDownState: 'All archives'}),
+                                                },
+                                                {
+                                                    label: 'Media archive',
+                                                    onSelect: () => this.setState({dropDownState: 'Media archive'}),
+                                                },
+                                                {
+                                                    label: 'File archive',
+                                                    onSelect: () => this.setState({dropDownState: 'File archive'}),
+                                                },
+                                                {
+                                                    label: 'AP images',
+                                                    onSelect: () => this.setState({dropDownState: 'AP archive'}),
+                                                },
+                                            ],
+                                        },
                                     ]}
                                 >
-                                    <NavButton text={this.state.dropDownState ? this.state.dropDownState : 'All Archives'} onClick={() => false} />
+                                    <NavButton
+                                        text={this.state.dropDownState ? this.state.dropDownState : 'All Archives'}
+                                        onClick={() => false}
+                                    />
                                 </Dropdown>
                             </ButtonGroup>
-                            <Components.SearchBar placeholder='Search media'></Components.SearchBar>
+                            <Components.SearchBar placeholder="Search media"></Components.SearchBar>
 
-                            <ButtonGroup align='end'>
-                                <NavButton icon='dots-vertical' onClick={() => false} />
+                            <ButtonGroup align="end">
+                                <NavButton icon="dots-vertical" onClick={() => false} />
                             </ButtonGroup>
                         </SubNav>
                         <SubNav>
-                            <ButtonGroup align='inline'>
-                                <NavButton icon='filter-large' onClick={this.handleFilter} />
+                            <ButtonGroup align="inline">
+                                <NavButton icon="filter-large" onClick={this.handleFilter} />
                             </ButtonGroup>
                             <RadioButtonGroup
                                 value={this.state.itemType}
-                                onChange={(value) => this.setState({ itemType: value })}
+                                onChange={(value) => this.setState({itemType: value})}
                                 options={[
-                                    { value: 'itemtype01', label: 'All item types' },
-                                    { value: 'itemtype02', label: 'Images only' },
-                                    { value: 'itemtype03', label: 'Videos only' },
-                                    { value: 'itemtype04', label: 'Documents only' }
+                                    {value: 'itemtype01', label: 'All item types'},
+                                    {value: 'itemtype02', label: 'Images only'},
+                                    {value: 'itemtype03', label: 'Videos only'},
+                                    {value: 'itemtype04', label: 'Documents only'},
                                 ]}
                                 group={{padded: true}}
                             />
-                            <ButtonGroup align='end' spaces='no-space'>
+                            <ButtonGroup align="end" spaces="no-space">
                                 <Dropdown
                                     items={[
                                         {
-                                            type: 'group', label: 'Chose a theme', items: [
+                                            type: 'group',
+                                            label: 'Chose a theme',
+                                            items: [
                                                 'divider',
-                                                { label: 'Light', onSelect: () => this.handleTheme('light-ui')},
-                                                { label: 'Dark', onSelect: () => this.handleTheme('dark-ui')},
-                                            ]
+                                                {label: 'Light', onSelect: () => this.handleTheme('light-ui')},
+                                                {label: 'Dark', onSelect: () => this.handleTheme('dark-ui')},
+                                            ],
                                         },
                                     ]}
                                 >
-                                    <NavButton type='default' icon='adjust' onClick={()=> false} />
+                                    <NavButton type="default" icon="adjust" onClick={() => false} />
                                 </Dropdown>
-                                <NavButton icon='th-list' onClick={() => false} />
+                                <NavButton icon="th-list" onClick={() => false} />
                             </ButtonGroup>
                         </SubNav>
                     </Components.HeaderPanel>
                     {/* TOOLBAR HEADER */}
 
                     <Components.LeftPanel open={this.state.openFilter}>
-                        <Components.Panel side='left' background='grey'>
-                            <Components.PanelHeader handleFilterParent={this.handleFilter} title='Advanced filters' />
+                        <Components.Panel side="left" background="grey">
+                            <Components.PanelHeader handleFilterParent={this.handleFilter} title="Advanced filters" />
                             <Components.PanelContent>
                                 <Components.PanelContentBlock>
                                     <div className="form__group">
                                         <div className="form__item">
                                             <Input
-                                                label='Title'
-                                                type='text'
-                                                value=''
-                                                info='This is info message'
+                                                label="Title"
+                                                type="text"
+                                                value=""
+                                                info="This is info message"
                                                 inlineLabel={false}
                                                 disabled={false}
                                                 onChange={() => false}
@@ -162,9 +197,10 @@ export class SamsPlayground extends React.Component<IProps, IState> {
                                     </div>
                                     <div className="form__group">
                                         <div className="form__item">
-                                            <Select label='Source'
-                                                value='Select ingest source...'
-                                                info='This is info message'
+                                            <Select
+                                                label="Source"
+                                                value="Select ingest source..."
+                                                info="This is info message"
                                                 inlineLabel={false}
                                                 disabled={false}
                                                 onChange={() => false}
@@ -178,11 +214,11 @@ export class SamsPlayground extends React.Component<IProps, IState> {
 
                                     <div className="form__group">
                                         <div className="form__item">
-                                            <Input 
-                                                label='Keyword'
-                                                type='text'
-                                                value=''
-                                                info='This is info message'
+                                            <Input
+                                                label="Keyword"
+                                                type="text"
+                                                value=""
+                                                info="This is info message"
                                                 inlineLabel={false}
                                                 disabled={false}
                                                 onChange={() => false}
@@ -192,9 +228,10 @@ export class SamsPlayground extends React.Component<IProps, IState> {
 
                                     <div className="form__group">
                                         <div className="form__item">
-                                            <Select label='Usage right'
-                                                value='--- Not selected ---'
-                                                info='This is info message'
+                                            <Select
+                                                label="Usage right"
+                                                value="--- Not selected ---"
+                                                info="This is info message"
                                                 inlineLabel={false}
                                                 disabled={false}
                                                 onChange={() => false}
@@ -210,29 +247,38 @@ export class SamsPlayground extends React.Component<IProps, IState> {
                                 </Components.PanelContentBlock>
                             </Components.PanelContent>
                             <Components.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} />
                             </Components.PanelFooter>
                         </Components.Panel>
                     </Components.LeftPanel>
                     {/* FILTER PANEL*/}
 
-                    <Components.MainPanel >
-
+                    <Components.MainPanel>
                         <GridList size="small" gap="medium" margin="1">
-                            {dummy_items.map((item: any, index: any) =>
-                                <GridElements.GridItem locked={item.locked} status={item.status} onClick={this.handlePreview} itemtype={item.type} key={index}>
+                            {dummy_items.map((item: any, index: any) => (
+                                <GridElements.GridItem
+                                    locked={item.locked}
+                                    status={item.status}
+                                    onClick={this.handlePreview}
+                                    itemtype={item.type}
+                                    key={index}
+                                >
                                     <GridElements.GridItemCheckWrapper>
-                                        <Checkbox checked={item.selected} label={{text:''}} onChange={(value) => {
-                                            item.selected = value;
-                                            this.changeStatus(item, 'selected');
-                                        }} />
+                                        <Checkbox
+                                            checked={item.selected}
+                                            label={{text: ''}}
+                                            onChange={(value) => {
+                                                item.selected = value;
+                                                this.changeStatus(item, 'selected');
+                                            }}
+                                        />
                                     </GridElements.GridItemCheckWrapper>
                                     <GridElements.GridItemTopActions>
-                                        <IconButton icon='fullscreen' ariaValue='More actions' onClick={()=> false} />
+                                        <IconButton icon="fullscreen" ariaValue="More actions" onClick={() => false} />
                                     </GridElements.GridItemTopActions>
                                     <GridElements.GridItemMedia>
-                                        { item.image ? <img src={item.image} alt={item.imageAlt}/> : null }
+                                        {item.image ? <img src={item.image} alt={item.imageAlt} /> : null}
                                     </GridElements.GridItemMedia>
                                     <GridElements.GridItemContent>
                                         <GridElements.GridItemTime time={item.date} />
@@ -240,54 +286,87 @@ export class SamsPlayground extends React.Component<IProps, IState> {
                                         <GridElements.GridItemText>{item.description}</GridElements.GridItemText>
                                     </GridElements.GridItemContent>
                                     <GridElements.GridItemFooter>
-                                        <GridElements.GridItemFooterBlock align='left'>
-                                            <Icon name={item.type} className='sd-grid-item__type-icn' />
+                                        <GridElements.GridItemFooterBlock align="left">
+                                            <Icon name={item.type} className="sd-grid-item__type-icn" />
                                             <Badge text={item.urgency} color={item.urgencyColor} />
-                                            <Badge text={item.priority} shape='square' color={item.priorityColor} />
+                                            <Badge text={item.priority} shape="square" color={item.priorityColor} />
                                         </GridElements.GridItemFooterBlock>
-                                        <GridElements.GridItemFooterBlock align='right'>
-                                            <Label type='success' style='translucent' text='In progress' />
+                                        <GridElements.GridItemFooterBlock align="right">
+                                            <Label type="success" style="translucent" text="In progress" />
                                         </GridElements.GridItemFooterBlock>
                                         <GridElements.GridItemFooterActions>
-                                            <IconButton size='small' icon='dots-vertical' ariaValue='More actions' onClick={()=> this.changeStatus(item, 'archived')} />
+                                            <IconButton
+                                                size="small"
+                                                icon="dots-vertical"
+                                                ariaValue="More actions"
+                                                onClick={() => this.changeStatus(item, 'archived')}
+                                            />
                                         </GridElements.GridItemFooterActions>
                                     </GridElements.GridItemFooter>
                                 </GridElements.GridItem>
-                            )}
+                            ))}
                         </GridList>
                     </Components.MainPanel>
                     {/* MAIN CONTENT (Monitoring) */}
 
                     <Components.RightPanel open={this.state.openPreview}>
-                        <Components.Panel side='right'>
-                            <Components.PanelHeader title='Item details' handleFilterParent={this.handlePreview} />
+                        <Components.Panel side="right">
+                            <Components.PanelHeader title="Item details" handleFilterParent={this.handlePreview} />
                             <Components.PanelContent>
                                 <Components.PanelContentBlock flex={true}>
                                     <div className="side-panel__content-block-inner side-panel__content-block-inner--grow">
-                                        <p className="sd-text__date-and-author"><time>Created 19.06.2020 by </time> <span className="sd-text__author">Mika Karapet</span></p> 
-                                        <p className="sd-text__date-and-author"><time>Updated 3 hours ago by</time> <span className="sd-text__author">John Doe</span></p>
+                                        <p className="sd-text__date-and-author">
+                                            <time>Created 19.06.2020 by </time>{' '}
+                                            <span className="sd-text__author">Mika Karapet</span>
+                                        </p>
+                                        <p className="sd-text__date-and-author">
+                                            <time>Updated 3 hours ago by</time>{' '}
+                                            <span className="sd-text__author">John Doe</span>
+                                        </p>
                                     </div>
                                     <div className="side-panel__content-block-inner side-panel__content-block-inner--right">
                                         <Dropdown
-                                            align = 'right'
+                                            align="right"
                                             items={[
                                                 {
-                                                    type: 'group', label: 'Actions', items: [
+                                                    type: 'group',
+                                                    label: 'Actions',
+                                                    items: [
                                                         'divider',
-                                                        { label: 'Edit', icon: 'pencil', onSelect: () => this.setState({ dropDownState: 'Edit ' }) },
-                                                        { label: 'Download', icon: 'download', onSelect: () => this.setState({ dropDownState: 'Download' }) },
-                                                        { label: 'Delete', icon: 'trash', onSelect: () => this.setState({ dropDownState: 'Delete' }) },
-                                                    ]
-                                                }
+                                                        {
+                                                            label: 'Edit',
+                                                            icon: 'pencil',
+                                                            onSelect: () => this.setState({dropDownState: 'Edit '}),
+                                                        },
+                                                        {
+                                                            label: 'Download',
+                                                            icon: 'download',
+                                                            onSelect: () => this.setState({dropDownState: 'Download'}),
+                                                        },
+                                                        {
+                                                            label: 'Delete',
+                                                            icon: 'trash',
+                                                            onSelect: () => this.setState({dropDownState: 'Delete'}),
+                                                        },
+                                                    ],
+                                                },
                                             ]}
                                         >
-                                            <IconButton ariaValue='dropdown-more-options' icon='dots-vertical' onClick={() => false} />
+                                            <IconButton
+                                                ariaValue="dropdown-more-options"
+                                                icon="dots-vertical"
+                                                onClick={() => false}
+                                            />
                                         </Dropdown>
                                     </div>
                                 </Components.PanelContentBlock>
-                                <Components.PanelContentBlock padding='0' className='side-panel__content-block--image'>
+                                <Components.PanelContentBlock padding="0" className="side-panel__content-block--image">
                                     <span className="side-panel__image-actions">
-                                        <IconButton ariaValue='button-fullscreen' icon='fullscreen' onClick={() => false} />
+                                        <IconButton
+                                            ariaValue="button-fullscreen"
+                                            icon="fullscreen"
+                                            onClick={() => false}
+                                        />
                                     </span>
                                     <img src="/d_trump.jpg" alt="test" />
                                 </Components.PanelContentBlock>
@@ -299,11 +378,14 @@ export class SamsPlayground extends React.Component<IProps, IState> {
                                     </div>
                                     <div className="form__row">
                                         <label className="form-label form-label--light">Description</label>
-                                        <p className="sd-text sd-text--medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur, vestibulum eros.</p>
+                                        <p className="sd-text sd-text--medium">
+                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus,
+                                            porta ac consectetur, vestibulum eros.
+                                        </p>
                                     </div>
                                     <div className="form__row">
-                                        <Label text='Public' type='success' style='hollow' size='large' />
-                                    </div> 
+                                        <Label text="Public" type="success" style="hollow" size="large" />
+                                    </div>
                                 </Components.PanelContentBlock>
                             </Components.PanelContent>
                         </Components.Panel>
@@ -313,7 +395,7 @@ export class SamsPlayground extends React.Component<IProps, IState> {
                     <Components.OverlayPanel />
                     {/* OVERLAY PANEL (Send To) */}
                 </Components.LayoutContainer>
-            </Components.Layout >
+            </Components.Layout>
         );
     }
 }