superdesk-ui-framework 3.0.1-beta.25 → 3.0.1-beta.26

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

@@ -4,6 +4,7 @@ export { TestGround } from './TestGround';
 export { UiPlayground } from './UiPlayground';
 export { PageLayoutTest } from './PageLayoutTest';
 export { EditorTest } from './EditorTest';
+export { Multiedit } from './Multiedit';
 export { RundownEditor } from './RundownEditor';
 export { PersonalProfile } from './PersonalProfile';
 export { Rundowns } from './Rundowns';

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

@@ -0,0 +1,321 @@
+import * as React from 'react';
+import * as Components from './components/Index';
+import { ButtonGroup, Button, NavButton, SubNav, Dropdown, Input, IconButton, Divider, Tooltip, Select, Option, Switch, Icon, AvatarWrapper, AvatarContentImage, AvatarContentText, Text, EmptyState, Alert, SlidingToolbar, TabLabel, Tabs, Heading, Modal } 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 { BoxedList, BoxedListItem, BoxedListContentRow } from '../../../../app-typescript/components/Lists';
+import { Spacer } from '../../../../app-typescript/components/Spacer';
+
+interface IProps {
+    children?: React.ReactNode;
+}
+
+interface IState {
+    theme: 'dark' | 'light' | string;
+    itemType: string;
+    dropDownState: string;
+    itemSelected1: boolean;
+    itemSelected2: boolean;
+    itemSelected3: boolean;
+    value1: boolean;
+    value2: boolean;
+    value3: boolean;
+    leftPanelOpen: boolean;
+    rightPanelOpen: boolean;
+    rightPanelPinned: boolean;
+    sideOverlayOpen: boolean;
+    sideBarOpen: boolean;
+    arr: any;
+}
+
+export class Multiedit extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+            theme: 'light',
+            itemType: 'itemtype01',
+            dropDownState: '',
+            itemSelected1: false,
+            itemSelected2: false,
+            itemSelected3: false,
+            value1: false,
+            value2: false,
+            value3: false,
+            leftPanelOpen: false,
+            rightPanelOpen: false,
+            rightPanelPinned: false,
+            sideOverlayOpen: false,
+            sideBarOpen: false,
+            arr: [<Editor />, <Editor />]
+            
+        }
+        this.handleTheme = this.handleTheme.bind(this);
+    }
+
+    handleTheme(newTheme: string) {
+        this.setState({
+            theme: newTheme
+        })
+    }
+
+    changeStatus(item: any, status: string) {
+        if (item.status.includes(status)) {
+            item.status.splice(item.status.indexOf(status), 1);
+        } else {
+            item.status.push(status);
+        }
+    }
+
+    render() {
+        return (    
+            <Modal
+            className='p-dialog-flex'
+            onHide={() => false}
+            maximized={true} contentPadding={"none"}
+            headerTemplate="Multiedit"
+            visible={true} >
+                <Spacer children={this.state.arr} gap={'0'}></Spacer>
+                <div style={{
+                    padding: '0 20px',
+                    display: 'flex',
+                    alignItems: 'center'
+                }}>
+                    <Dropdown
+                    append
+                    items={[
+                            { label: 'Action 1', onSelect: () => this.setState({arr: [...this.state.arr, <Editor />]}) },
+                    ]}>
+                        <Button type="primary" icon="plus-large" text="Add article" style="filled" size="large" shape="round" iconOnly={true} onClick={()=> false} />
+                    </Dropdown>
+                </div>
+            </Modal> 
+        );
+    }
+}
+
+interface IEditor {
+    sideBarOpen?: boolean;
+}
+
+export class Editor extends React.Component<IEditor, IEditor> {
+    constructor(props: IEditor) {
+        super(props);
+        this.state = {
+            sideBarOpen: false,
+            
+        }
+    }
+
+    render() {
+    return <div style={{borderRight: '4px solid grey'}}>
+        <Layout.AuthoringFrame
+        header={(
+            <SubNav zIndex={2}>
+                <ButtonGroup align='end'>
+                    <ButtonGroup subgroup={true} spaces="no-space">
+                        <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>
+                        <Tooltip text='Send to / Publish' flow='left'>
+                            <NavButton type='darker' icon={this.state.sideBarOpen ? 'forward-thin' : 'backward-thin'} text='More actions' onClick={()=> this.setState({sideBarOpen: !this.state.sideBarOpen})} />
+                        </Tooltip>
+                    </ButtonGroup>
+                </ButtonGroup>
+            </SubNav>
+        )}
+        main={(
+            <Layout.AuthoringMain
+            headerPadding='medium'
+            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>
+                            <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>
+                        </dl>
+                    </div>
+                    <ButtonGroup align='end'>
+                        <IconButton icon="preview-mode" toolTipAppend={true} ariaValue="Print preview" onClick={()=> false} />
+                        <IconButton icon="adjust" ariaValue="Toogle theme" onClick={()=> false} />
+                        <IconButton icon="switches" ariaValue="Theme settings" onClick={()=> false} />
+                    </ButtonGroup>
+                </React.Fragment>
+            )}
+            authoringHeader ={(
+                <React.Fragment>
+                    <Form.FormGroup inlineLabel={true}>
+                        <Form.FormItem>
+                            <Input
+                                type='text'
+                                label='Slugline'
+                                value='This is some value'
+                                maxLength={30}
+                                error='This is error message'
+                                info='This is some hint message'
+                                required={false}
+                                disabled={false}
+                                invalid={false}
+                                onChange={(value) => {}} />
+                        </Form.FormItem>
+                        <Form.FormItem>
+                            <Input
+                                type='text'
+                                label='Slugline'
+                                value='This is some value'
+                                maxLength={30}
+                                error='This is error message'
+                                info='This is some hint message'
+                                required={false}
+                                disabled={false}
+                                invalid={false}
+                                onChange={(value) => {}} /> 
+                        </Form.FormItem>
+                    </Form.FormGroup>
+                    <Form.FormGroup inlineLabel={true}>
+                        <Form.FormItem>
+                            <Input
+                                type='text'
+                                label='Genre'
+                                value='This is some value'
+                                maxLength={30}
+                                error='This is error message'
+                                info='This is some hint message'
+                                required={false}
+                                disabled={false}
+                                invalid={false}
+                                onChange={(value) => {}} /> 
+                        </Form.FormItem>
+                    </Form.FormGroup>
+                    <Form.FormGroup marginBottom='0' inlineLabel={true}>
+                        <Form.FormItem>
+                            <Input
+                                type='text'
+                                label='Subject'
+                                value='This is some value'
+                                maxLength={30}
+                                error='This is error message'
+                                info='This is some hint message'
+                                required={true}
+                                disabled={false}
+                                invalid={false}
+                                onChange={(value) => {}} /> 
+                        </Form.FormItem>
+                        <Form.FormItem autoWidth={true}>
+                            <Form.FormText>Just testing:</Form.FormText>
+                        </Form.FormItem>
+                        <Form.FormItem>
+                            <Select
+                                label='Categories'
+                                labelHidden={true}
+                                value='This is some value'
+                                error='This is error message'
+                                info='This is some hint message'
+                                required={true}
+                                disabled={false}
+                                invalid={false}
+                                onChange={(value) => {}}>
+                                    <Option>Option 1</Option>
+                                    <Option>Option 2</Option>
+                            </Select>
+                        </Form.FormItem>
+                        <Form.FormItem autoWidth={true}>
+                            <ButtonGroup>
+                                <IconButton ariaValue="Submit" icon="picture" onClick={()=> false} />
+                                <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
+                                <Button text="Submit" onClick={()=> false} type="primary" />
+                            </ButtonGroup>
+                        </Form.FormItem>
+                    </Form.FormGroup>
+                </React.Fragment>
+            )}>
+            </Layout.AuthoringMain>
+        )}
+        sidePanel={(
+            <Layout.Panel side='right' background='grey' open={false} size='x-small'>
+                <Layout.PanelHeader title='Pinned content' onClose={() => false}>
+                </Layout.PanelHeader>
+                <Layout.PanelContent>
+                    <Layout.PanelContentBlock>
+                        <BoxedList density='comfortable'>
+                            <BoxedListItem 
+                                type="success"
+                                clickable={true}
+                                media={(
+                                    <Icon name='slideshow'  />
+                                )}
+                                actions={(
+                                    <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
+                                )}
+                            >
+                                <BoxedListContentRow>
+                                    Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.
+                                </BoxedListContentRow>
+                                <BoxedListContentRow>
+                                    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. 
+                                </BoxedListContentRow>
+                            </BoxedListItem>
+                            <BoxedListItem 
+                                type="warning"
+                                media={(
+                                    <AvatarWrapper
+                                        size="medium"
+                                        >
+                                        <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
+                                    </AvatarWrapper>
+                                )}
+                                footer={(
+                                    <ButtonGroup align="end">
+                                        <Button text="cancel" size="small" style="hollow" onClick={()=> false} />
+                                        <Button text="yes" size="small" style="hollow" type="primary" onClick={()=> false} />
+                                    </ButtonGroup>
+                                )}
+                                actions={(
+                                    <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
+                                )}
+                            >
+                                <BoxedListContentRow>
+                                    Maecenas sed diam eget risus varius blandit sit amet magna.
+                                </BoxedListContentRow>
+                            </BoxedListItem>
+                            <BoxedListItem 
+                                selected={true}
+                                actions={(
+                                    <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
+                                )}
+                            >
+                                <BoxedListContentRow>
+                                    Maecenas sed diam eget risus varius blandit sit amet magna. Vestibulum id ligula porta felis euismod semper.
+                                </BoxedListContentRow>
+                            </BoxedListItem>
+                        </BoxedList>
+                    </Layout.PanelContentBlock>
+                </Layout.PanelContent>
+            </Layout.Panel>
+        )}
+        
+        sideBarClosed={this.state.sideBarOpen}
+        sideBar={(
+            <Nav.SideBarTabs
+            items={[
+                { icon: 'info', size: 'big', tooltip: 'Info', onClick: () => false },
+                { icon: 'chat', size: 'big', tooltip: 'Comments', onClick: () => false },
+                { icon: 'history', size: 'big', tooltip: 'History', onClick: () => false },
+                { icon: 'package', size: 'big', tooltip: 'Packages', onClick: () => false },
+                { icon: 'attachment', size: 'big', tooltip: 'Attachments', onClick: () => false },
+                { icon: 'comments', size: 'big', tooltip: 'Inline Comments', onClick: () => false },
+                { icon: 'suggestion', size: 'big', tooltip: 'Suggestions', onClick: () => false }]} />
+        )}
+    />
+    </div>
+    }
+}

package/dist/react/TableList.tsx

@@ -98,6 +98,7 @@ export default class TableListDoc extends React.Component<IProps, IState> {
                     <Markup.ReactMarkupPreview>
                         <TableList
                             dragAndDrop
+                            append
                             addItem
                             array={this.state.array}
                             itemsDropdown={(index) => [
@@ -135,6 +136,7 @@ export default class TableListDoc extends React.Component<IProps, IState> {
                     <Prop name='className' isRequired={false} type='string' default='false' description='Add class on TableList container.' />
                     <Prop name='showDragHandle' isRequired={false} type='string' default='always' description='"always" | "onHover" | "none".' />
                     <Prop name='readOnly' isRequired={false} type='boolean' default='false' description='When specified, component changes are not enabled.' />
+                    <Prop name='append' isRequired={false} type='boolean' default='false' description='Set append to body on individual item while draging.' />
                     <Prop name='onDrag' isRequired={false} type='function' default='false' description='Returns start and end position of draggable item' />
                     <Prop name='onAddItem' isRequired={false} type='function' default='false' description='Returns index of draggable item.' />
                     <Prop name='itemsDropdown' isRequired={false} type='function' default='false' description='Dropdown for adding items in the list. Returns index of draggable item.' />

package/dist/react/TreeSelect.tsx

@@ -13,51 +13,79 @@ interface IState {
     arr: any;
 }
 
-let itemArr = [
+let options = [
     {
-        value: 'Category1',
+        value: {name: 'Category1'},
         children: [
             {
-                value: 'Sub-Category1',
+                value: {name: 'Sub-category1'},
                 children: [
-                    {value: 'Item10'}
+                    {value: {name: 'Item20'}}
                 ]
             },
             {
-                value: 'Sub-Category2',
+                value: {name: 'Sub-category2'},
+                children: [
+                    {value: {name: 'Item21'}}
+                ]
+            }
+            ,
+            {
+                value: {name: 'Sub-category3'},
+                children: [
+                    {value: {name: 'Item22'}}
+                ]
+            }
+            ,
+            {
+                value: {name: 'Sub-category4'},
+                children: [
+                    {value: {name: 'Item23'}}
+                ]
+            }
+            ,
+            {
+                value: {name: 'Sub-category5'},
                 children: [
-                    {value: 'Item11'}
+                    {value: {name: 'Item24'}}
+                ]
+            }
+            ,
+            {
+                value: {name: 'Sub-category6'},
+                children: [
+                    {value: {name: 'Item25'}}
                 ]
             }
         ]
     },
     {
-        value: 'Category2',
+        value: {name: 'Category2'},
         children: [
             {
-                value: 'Sub-Category3'
+                value: {name: 'Item8'}
             },
             {
-                value: 'Sub-Category4'
+                value: {name: 'Item9'}
             }
         ]
     },
     {
-        value: 'Category3',
+        value: {name: 'Category3', bgColor: 'red'},
         children: [
             {
-                value: 'Sub-Category5'
+                value: {name: 'Item10'}
             },
             {
-                value: 'Sub-Category6'
+                value: {name: 'Item11'}
             }
         ]
     },
 ]
 
-let itemArr2 = [
+let options2 = [
     {
-        value: {name: 'Category1'},
+        value: {name: 'Category1', border: 'red'},
         children: [
             {
                 value: {name: 'Sub-category1'},
@@ -102,7 +130,7 @@ let itemArr2 = [
         ]
     },
     {
-        value: {name: 'Category2'},
+        value: {name: 'Category2', border: 'green'},
         children: [
             {
                 value: {name: 'Item8'}
@@ -113,7 +141,7 @@ let itemArr2 = [
         ]
     },
     {
-        value: {name: 'Category3'},
+        value: {name: 'Category3', border: 'yellow'},
         children: [
             {
                 value: {name: 'Item10'}
@@ -125,37 +153,6 @@ let itemArr2 = [
     },
 ]
 
-const source = [
-    {
-        'name': 'Article (news)',
-        'qcode': 'Article (news)',
-    },
-    {
-        'name': 'Article',
-        'qcode': 'Article',
-    },
-    {
-        'name': 'Sidebar',
-        'qcode': 'Sidebar',
-    },
-    {
-        'name': 'Factbox',
-        'qcode': 'Factbox',
-    },
-    {
-        'name': 'Item',
-        'qcode': 'Item',
-    },
-    {
-        'name': 'Array',
-        'qcode': 'Array',
-    },
-    {
-        'name': 'Object',
-        'qcode': 'Object',
-    },
-];
-
 let fetchedArr = [];
 fetch('https://nominatim.openstreetmap.org/search/berlin?format=json&addressdetails=1&limit=20').then(response => response.json()).then(data => fetchedArr = data
 );
@@ -186,8 +183,8 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
         this.state = {
             value: [],
             value2: [],
-            options: itemArr2,
-            options2: itemArr2,
+            options: options,
+            options2: options,
             inputValue: '',
             arr: []
         }
@@ -228,21 +225,29 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                         <div className='docs-page__content-row docs-page__content-row--no-margin'>
                             <div className='form__row'>
                                 <TreeSelect
+                                    value={[{name: 'Item1'}, {name: 'Item2'}]}
+                                    getOptions={() => options}
+                                    kind={'synchronous'}
                                     getId={(item) => item.name}
                                     getLabel={(item) => item.name}
-                                    getOptions={() => itemArr2}
-                                    value={[{name: 'Item1'}, {name: 'Item2'}]}
+                                    getBackgroundColor={(item: any) => item.bgColor}
                                     selectBranchWithChildren={true}
-                                    onChange={(e) => console.log(e)}
                                     allowMultiple
-                                    kind={'synchronous'}
                                     fullWidth
+                                    singleLevelSearch
+                                    required
                                     info={'Info Message'}
                                     error={'Error Message'}
-                                    required
                                     label={'TreeSelect Label'}
-                                    singleLevelSearch
                                     searchPlaceholder='Search...'
+                                    onChange={(e) => false}
+                                    valueTemplate={(item, Wrapper) => {
+                                        return (
+                                            <Wrapper backgroundColor={item.bgColor}>
+                                                <span>{item.name}</span>
+                                            </Wrapper>
+                                        );
+                                    }}    
                                 />
                             </div>
                         </div>
@@ -250,21 +255,29 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
 
                     <Markup.ReactMarkupCode>{`
                         <TreeSelect
+                            value={[{name: 'Item1'}, {name: 'Item2'}]}
+                            getOptions={() => options}
+                            kind={'synchronous'}
                             getId={(item) => item.name}
                             getLabel={(item) => item.name}
-                            getOptions={() => {
-                                return itemArr2
-                            }}
-                            value={[{name: 'Item1'}, {name: 'Item2'}]}
+                            getBackgroundColor={(item: any) => item.bgColor}
                             selectBranchWithChildren={true}
-                            onChange={(e) => console.log(e)}
                             allowMultiple
-                            kind={'synchronous'}
                             fullWidth
+                            singleLevelSearch
+                            required
                             info={'Info Message'}
                             error={'Error Message'}
-                            required
                             label={'TreeSelect Label'}
+                            searchPlaceholder='Search...'
+                            onChange={(e) => false}
+                            valueTemplate={(item, Wrapper) => {
+                                return (
+                                    <Wrapper backgroundColor={item.bgColor}>
+                                        <span>{item.name}</span>
+                                    </Wrapper>
+                                );
+                            }}    
                         />
                     `}</Markup.ReactMarkupCode>
                     
@@ -286,7 +299,6 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                                 }
                                 getId={({qcode}) => qcode.display_name}
                                 selectBranchWithChildren={false}
-                                //optionTemplate={(item) => <span style={{color: 'blue'}}>{item.display_name}</span>}
                                 allowMultiple={true}
                             />
                             </div>
@@ -317,20 +329,23 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                         <div className='docs-page__content-row docs-page__content-row--no-margin'>
                             <div className='form__row'>
                                 <TreeSelect
+                                    getOptions={() => options2}
+                                    kind={'synchronous'}
                                     getId={(item) => item.name}
                                     getLabel={(item) => item.name}
+                                    getBackgroundColor={(item) => item.bgColor}
+                                    getBorderColor={(item) => item.border}
                                     placeholder='Select one'
-                                    getOptions={() => this.state.options}
-                                    kind={'synchronous'}
-                                    onChange={(e) => console.log(e)}
+                                    selectBranchWithChildren={true}
+                                    onChange={(e) => false}
                                     optionTemplate={(item: any) => {
                                         return <div>Label: {item.name}</div>
                                     }}
-                                    valueTemplate={(item: any) => {
-                                        return <span>Label: {item.name}</span>
+                                    valueTemplate={(item: any, Wrapper) => {
+                                        return <Wrapper borderColor={item.border}>
+                                            <span>{item.name}</span>
+                                        </Wrapper>
                                     }}
-                                    //allowMultiple
-                                    //readOnly
                                 />
                             </div>
                         </div>
@@ -338,17 +353,22 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
 
                     <Markup.ReactMarkupCode>{`
                         <TreeSelect
+                            getOptions={() => options2}
+                            kind={'synchronous'}
                             getId={(item) => item.name}
                             getLabel={(item) => item.name}
-                            value={[{name: 'Item4'}, {name: 'Item10'}]}
-                            getOptions={() => this.state.options}
-                            kind={'synchronous'}
-                            onChange={(e) => console.log(e)}
+                            getBackgroundColor={(item) => item.bgColor}
+                            getBorderColor={(item) => item.border}
+                            placeholder='Select one'
+                            selectBranchWithChildren={true}
+                            onChange={(e) => false}
                             optionTemplate={(item: any) => {
                                 return <div>Label: {item.name}</div>
                             }}
-                            valueTemplate={(item: any) => {
-                                return <span>Label: {item.name}</span>
+                            valueTemplate={(item: any, Wrapper) => {
+                                return <Wrapper borderColor={item.border}>
+                                    <span>{item.name}</span>
+                                </Wrapper>
                             }}
                         />
                     `}</Markup.ReactMarkupCode>
@@ -370,8 +390,10 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                     <Prop name='searchPlaceholder' isRequired={false} type='string' default='/' description='Filter input placeholder.'/>
                     <Prop name='getLabel' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
                     <Prop name='getId' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
-                    <Prop name='valueTemplate' isRequired={false} type='Function' default='/' description='Function that gets an item in the value and returns the content for it.'/>
-                    <Prop name='optionTemplate' isRequired={false} type='Function' default='/' description='Function that gets the option and returns the content for it.'/>
+                    <Prop name='getBackgroundColor' isRequired={true} type='Function' default='/' description='Function to return background color of individual item in options.'/>
+                    <Prop name='getBorderColor' isRequired={true} type='Function' default='/' description='Function to return border color of individual item in options in single-select mode.'/>
+                    <Prop name='valueTemplate' isRequired={false} type='Function(item, Wrapper)' default='/' description='Function that gets an item in the value and returns the content for it.'/>
+                    <Prop name='optionTemplate' isRequired={false} type='Function(item)' default='/' description='Function that gets the option and returns the content for it.'/>
                     <Prop name='searchOptions' isRequired={false} type='Function' default='/' description='The function will be called when a search is initiated from UI in asynchronous mode.'/>
                     <Prop name='onChange' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
                     <Prop name='label' isRequired={false} type='string' default='/' description='Input label'/>