superdesk-ui-framework 3.0.1-beta.11 → 3.0.1-beta.13

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

@@ -72,6 +72,7 @@ export class CoreLayout extends React.Component<IProps, IState> {
             active={this.state.mainMenuOpen}
             ariaControls='main-menu'
             menuId='main-menu'
+            editorFullWidth={true}
             slideInMenu={(
                 <Layout.MainMenu
                 headerTitle='Main Menu'

package/dist/react/Dropdowns.tsx

@@ -67,27 +67,112 @@ export default class DropdownDoc extends React.Component {
                 <p className='docs-page__paragraph'>Add prop value <code>append = true</code> to the dropdown element to append to the inner dropdown menu to the body. This is useful when the dropdown button is inside a div with overflow: hidden, and the menu would otherwise be hidden.</p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <Dropdown
-                            append={true}
-                            items={[
-                                {
-                                    type: 'group', label: 'actions', items: [
-                                        'divider',
-                                        { label: 'Edit', icon: 'pencil', onSelect: () => 1 },
-                                        { label: 'Copy', icon: 'copy', onSelect: () => 1 },
-                                        { label: 'Delete', icon: 'trash', onSelect: () => 1 },
-                                        'divider',
-                                    ]
-                                },
-                                {
-                                    type: 'group', label: 'actions 2', items: [
-                                        { label: 'Download', icon: 'download', onSelect: () => 1 },
-                                        { label: 'Print', icon: 'print', onSelect: () => 1 },
-                                    ]
-                                }
-                            ]}>
-                            Drop append to body
-                        </Dropdown>
+                    <Dropdown
+                        header={[
+                            {
+                                type: 'group',
+                                label: 'Create new',
+                                items: [
+                                    {
+                                        type: 'submenu',
+                                        label: 'Rundown',
+                                        icon: 'plus-sign',
+                                        items: [
+                                            {
+                                                type: 'submenu',
+                                                label: 'Show 1',
+                                                icon: 'plus-sign',
+                                                items: [
+                                                    
+                                                ],
+                                            },
+                                            {
+                                                type: 'submenu',
+                                                label: 'Show 2',
+                                                icon: 'plus-sign',
+                                                items: [
+                                                    
+                                                ],
+                                            },
+                                        ],
+                                    },
+                                ],
+                            },
+                        ]}
+                        items={[
+                            {
+                                type: 'group',
+                                label: 'Create new',
+                                items: [
+                                    {
+                                        type: 'submenu',
+                                        label: 'Rundown',
+                                        icon: 'plus-sign',
+                                        items: [
+                                            {
+                                                type: 'submenu',
+                                                label: 'Show 1',
+                                                icon: 'plus-sign',
+                                                items: [
+                                                    
+                                                ],
+                                            },
+                                            {
+                                                type: 'submenu',
+                                                label: 'Show 2',
+                                                icon: 'plus-sign',
+                                                items: [
+                                                    
+                                                ],
+                                            },
+                                        ],
+                                    },
+                                ],
+                            },
+                        ]}
+                        footer={[
+                            {
+                                type: 'group',
+                                items: [
+                                    {
+                                        icon: 'rundown',
+                                        label: 'Create new Show',
+                                        onSelect: () => false,
+                                    },
+                                ],
+                            },
+                            {
+                                type: 'group',
+                                label: 'Create new',
+                                items: [
+                                    {
+                                        type: 'submenu',
+                                        label: 'Rundown',
+                                        icon: 'plus-sign',
+                                        items: [
+                                            {
+                                                type: 'submenu',
+                                                label: 'Show 1',
+                                                icon: 'plus-sign',
+                                                items: [
+                                                    
+                                                ],
+                                            },
+                                            {
+                                                type: 'submenu',
+                                                label: 'Show 2',
+                                                icon: 'plus-sign',
+                                                items: [
+                                                    
+                                                ],
+                                            },
+                                        ],
+                                    },
+                                ],
+                            },
+                        ]}
+                    >
+                    </Dropdown>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         <Dropdown
@@ -207,8 +292,8 @@ export default class DropdownDoc extends React.Component {
                         <SubNav zIndex={1} color='darker'>
                             <h3 className="subnav__page-title">Subnav title</h3>
                             <Dropdown
-                                align='right'
-                                items={[
+                                //align='right'
+                                header={[
                                     {
                                         type: 'group', label: 'actions', items: [
                                             'divider',
@@ -225,7 +310,39 @@ export default class DropdownDoc extends React.Component {
                                             { label: 'Action 3', onSelect: () => 1 },
                                             { label: 'Action 4', onSelect: () => 1 },
                                         ]
-                                    }]}>
+                                    } 
+                                ]}
+                                items={[
+                                    // {
+                                    //     type: 'group', label: 'actions', items: [
+                                    //         'divider',
+                                    //         { label: 'Edit', icon: 'pencil', onSelect: () => 1 },
+                                    //         { label: 'Copy', icon: 'copy', onSelect: () => 1 },
+                                    //         { label: 'Delete', icon: 'trash', onSelect: () => 1 },
+                                    //         'divider',
+                                    //     ]
+                                    // },
+                                    // {
+                                    //     type: 'submenu', label: 'Second level actions', icon: 'star', items: [
+                                    //         { label: 'Action 1', onSelect: () => 1 },
+                                    //         { label: 'Action 2', onSelect: () => 1 },
+                                    //         { label: 'Action 3', onSelect: () => 1 },
+                                    //         { label: 'Action 4', onSelect: () => 1 },
+                                    //     ]
+                                    // }
+                                ]}
+                                    footer={[
+                                        
+                                        {
+                                            type: 'submenu', label: 'Second level actions', icon: 'star', items: [
+                                                { label: 'Action 1', onSelect: () => 1 },
+                                                { label: 'Action 2', onSelect: () => 1 },
+                                                { label: 'Action 3', onSelect: () => 1 },
+                                                { label: 'Action 4', onSelect: () => 1 },
+                                            ]
+                                        } 
+                                    ]}
+                                    >
                                 <button className='sd-navbtn'>
                                     <i className="icon-dots-vertical"></i>
                                 </button>
@@ -270,42 +387,105 @@ export default class DropdownDoc extends React.Component {
                         <SubNav zIndex={1} color='darker'>
                             <h3 className="subnav__page-title">Subnav title</h3>
                             <Dropdown
-                                align='right'
+                            append={true}
                                 header={[
                                     {
-                                        type: 'group', label: 'header actions', items: [
-                                            { label: 'Header action one', icon: 'download', onSelect: () => 1 },
-                                            { label: 'Header action two', icon: 'trash', onSelect: () => 1 },
-                                        ]
+                                        type: 'group',
+                                        label: 'Create new',
+                                        items: [
+                                            {
+                                                type: 'submenu',
+                                                label: 'Rundown',
+                                                icon: 'plus-sign',
+                                                items: [
+                                                    {
+                                                        type: 'submenu',
+                                                        label: 'Show 1',
+                                                        icon: 'plus-sign',
+                                                        items: [
+                                                            
+                                                        ],
+                                                    },
+                                                    {
+                                                        type: 'submenu',
+                                                        label: 'Show 2',
+                                                        icon: 'plus-sign',
+                                                        items: [
+                                                            
+                                                        ],
+                                                    },
+                                                ],
+                                            },
+                                        ],
                                     },
                                 ]}
                                 items={[
                                     {
                                         type: 'group', label: 'body actions', items: [
-                                            { label: 'Edit', icon: 'pencil', onSelect: () => 1 },
-                                            { label: 'Copy', icon: 'copy', onSelect: () => 1 },
-                                            { label: 'Action 2', icon: 'envelope', onSelect: () => 1 },
-                                            { label: 'Action 3', icon: 'heart', onSelect: () => 1 },
-                                            { label: 'Action 4', icon: 'print', onSelect: () => 1 },
-                                            { label: 'Action 5', icon: 'plus-sign', onSelect: () => 1 },
-                                            { label: 'Action 6', icon: 'minus-sign', onSelect: () => 1 },
-                                            { label: 'Action 7', icon: 'refresh', onSelect: () => 1 },
-                                            { label: 'Action 8', icon: 'pick', onSelect: () => 1 },
-                                            { label: 'Action 9', icon: 'bell', onSelect: () => 1 },
-                                            { label: 'Action 10', icon: 'kill', onSelect: () => 1 },
-                                            { label: 'Action 11', icon: 'settings', onSelect: () => 1 },
-                                            { label: 'Action 12', icon: 'cut', onSelect: () => 1 },
+                                            {
+                                                type: 'group',
+                                                label: 'Create new',
+                                                items: [
+                                                    {
+                                                        type: 'submenu',
+                                                        label: 'Rundown',
+                                                        icon: 'plus-sign',
+                                                        items: [
+                                                            {
+                                                                type: 'submenu',
+                                                                label: 'Show 1',
+                                                                icon: 'plus-sign',
+                                                                items: [
+                                                                    
+                                                                ],
+                                                            },
+                                                            {
+                                                                type: 'submenu',
+                                                                label: 'Show 2',
+                                                                icon: 'plus-sign',
+                                                                items: [
+                                                                    
+                                                                ],
+                                                            },
+                                                        ],
+                                                    },
+                                                ],
+                                            },
                                         ]
                                     },
                                 ]}
                                 footer={[
                                     {
-                                        type: 'group', label: 'footer actions', items: [
-                                            { label: 'Create gallery', icon: 'slideshow', onSelect: () => 1 },
-                                            { label: 'Create package', icon: 'composite', onSelect: () => 1 },
-                                        ]
+                                        type: 'group',
+                                        label: 'Create new',
+                                        items: [
+                                            {
+                                                type: 'submenu',
+                                                label: 'Rundown',
+                                                icon: 'plus-sign',
+                                                items: [
+                                                    {
+                                                        type: 'submenu',
+                                                        label: 'Show 1',
+                                                        icon: 'plus-sign',
+                                                        items: [
+                                                            
+                                                        ],
+                                                    },
+                                                    {
+                                                        type: 'submenu',
+                                                        label: 'Show 2',
+                                                        icon: 'plus-sign',
+                                                        items: [
+                                                            
+                                                        ],
+                                                    },
+                                                ],
+                                            },
+                                        ],
                                     },
-                                ]}>
+                                ]}
+                                >
                                 <button className='sd-navbtn'>
                                     <i className="icon-dots-vertical"></i>
                                 </button>

package/dist/react/TableList.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as Markup from '../../js/react';
-import { BoxedList, BoxedListItem, BoxedListContentRow, Prop, PropsList, Icon, IconButton, AvatarWrapper, AvatarContentText, ButtonGroup, Button, Heading, Text, Label, Container, IconLabel, SelectGrid, Dropdown } from '../../../app-typescript';
+import { BoxedList, BoxedListItem, BoxedListContentRow, Prop, PropsList, Icon, IconButton, AvatarWrapper, AvatarContentText, ButtonGroup, Button, Heading, Text, Label, Container, IconLabel, SelectGrid, Dropdown, Tooltip } from '../../../app-typescript';
 import { TableList, TableListItem } from '../../../app-typescript/components/Lists/TableList';
 
 interface IState {
@@ -23,10 +23,14 @@ export default class TableListDoc extends React.Component<IProps, IState> {
                     </>,
                     center: <span>Item 1</span>,
                     end: <IconLabel style='translucent' text='Label success' type='success' icon='time' />,
-                    action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />,
-                    onClick: () => {
-                        return false;
-                    }
+                    action: <Dropdown append={true} items={[
+                        { 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 },
+                    ]}><IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={(e) => e.stopPropagation()} /></Dropdown>,
+                    onClick: () => console.log('single'),
+                    onDoubleClick: () => console.log('double'),
+                    hexColor: '#ccff00'
                 },
                 {
                     start: <>
@@ -75,111 +79,6 @@ export default class TableListDoc extends React.Component<IProps, IState> {
                 `}
                 </Markup.ReactMarkupCodePreview>
 
-                <p className="docs-page__paragraph">Basic:</p>
-
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-
-                        <TableList>
-                            <TableListItem
-                                start={
-                                    <>
-                                        <Label style='translucent' text='aacc' />
-                                        <Label style='translucent' type='primary' text='prlg' />
-                                    </>
-                                }
-                                center={
-                                    <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
-                                }
-                                end={
-                                    <IconLabel style='translucent' text='Label success' type='success' icon='time' />
-                                }
-                                action={
-                                    <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />
-                                } />
-                            <TableListItem
-                                start={
-                                    <>
-                                        <Label style='hollow' text='aacc' />
-                                        <Label style='filled' type='primary' text='prlg' />
-                                    </>
-                                }
-                                center={
-                                    <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
-                                }
-                                end={
-                                    <IconLabel style='translucent' text='Label success' type='success' icon='time' />
-                                } />
-                            <TableListItem
-                                start={
-                                    <>
-                                        <Label style='translucent' text='aacc' />
-                                        <Label style='translucent' type='primary' text='prlg' />
-                                    </>
-                                }
-                                center={
-                                    <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
-                                }
-                                end={
-                                    <IconLabel style='translucent' text='Label success' type='success' icon='time' />
-                                }
-                                action={
-                                    <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />
-                                } />
-                        </TableList>
-
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
-                        <TableList>
-                            <TableListItem
-                            start={
-                                <>
-                                    <Label style='translucent' text='aacc' />
-                                    <Label style='translucent' type='primary' text='prlg' />
-                                </>
-                            }
-                            center={
-                                <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
-                            }
-                            end={
-                                <IconLabel style='translucent' text='Label success' type='success' icon='time' />
-                            }
-                            action={
-                                <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
-                            } />
-                            <TableListItem
-                            start={
-                                <>
-                                    <Label style='hollow' text='aacc' />
-                                    <Label style='filled' type='primary' text='prlg' />
-                                </>
-                            }
-                            center={
-                                <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
-                            }
-                            end={
-                                <IconLabel style='translucent' text='Label success' type='success' icon='time' />
-                            } />
-                            <TableListItem
-                            start={
-                                <>
-                                    <Label style='translucent' text='aacc' />
-                                    <Label style='translucent' type='primary' text='prlg' />
-                                </>
-                            }
-                            center={
-                                <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
-                            }
-                            end={
-                                <IconLabel style='translucent' text='Label success' type='success' icon='time' />
-                            }
-                            action={
-                                <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
-                            } />
-                        </TableList>
-                    `}
-                    </Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
                 <p className="docs-page__paragraph">With drag and drop functionality:</p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
@@ -187,13 +86,13 @@ export default class TableListDoc extends React.Component<IProps, IState> {
                         <TableList
                             dragAndDrop
                             addItem
+                            onAddItem={(index, item) => console.log(index, item)}
                             array={this.state.array}
                             itemsDropdown={[
-                                { label: <Label style='translucent' type='primary' text='aacc' />, 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 },
                             ]}
-                            onClick={() => false}
                             onDrag={(start, end) => console.log(start, end)}
                         />
 
@@ -223,24 +122,21 @@ export default class TableListDoc extends React.Component<IProps, IState> {
                     <Prop name='dragAndDrop' isRequired={false} type='boolean' default='false' description='Drag&Drop functionality.' />
                     <Prop name='itemsDropdown' isRequired={false} type='React.ReactNode | any' default='false' description='Dropdown for functionality to add items to the list.' />
                     <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='' />
                     <Prop name='onClick' isRequired={false} type='function' default='false' description='onClick functionality.' />
                     <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.' />
                 </PropsList>
                 <p className="docs-page__paragraph">array:</p>
-                <PropsList>
-                    <Prop name='start' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
-                    <Prop name='center' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
-                    <Prop name='end' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
-                    <Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='Column of individual list items that is displayed on hover.' />
-                </PropsList>
-                <p className="docs-page__paragraph">TableListItem</p>
                 <PropsList>
                     <Prop name='start' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
                     <Prop name='center' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
                     <Prop name='end' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
                     <Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='Column of individual list items that is displayed on hover.' />
                     <Prop name='onClick' isRequired={false} type='function' default='false' description='onClick functionality.' />
+                    <Prop name='onDoubleClick' isRequired={false} type='function' default='false' description='onDoubleClick functionality.' />
                 </PropsList>
+                
 
             </section>
         )