superdesk-ui-framework 3.0.1-beta.10 → 3.0.1-beta.12

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/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>
         )

package/dist/react/TreeSelect.tsx

@@ -10,6 +10,7 @@ interface IState {
     options: any;
     options2: any;
     inputValue: string;
+    arr: any;
 }
 
 let itemArr = [
@@ -61,13 +62,41 @@ let itemArr2 = [
             {
                 value: {name: 'Sub-category1'},
                 children: [
-                    {value: {name: 'Item5'}}
+                    {value: {name: 'Item20'}}
                 ]
             },
             {
                 value: {name: 'Sub-category2'},
                 children: [
-                    {value: {name: 'Item7'}}
+                    {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: {name: 'Item24'}}
+                ]
+            }
+            ,
+            {
+                value: {name: 'Sub-category6'},
+                children: [
+                    {value: {name: 'Item25'}}
                 ]
             }
         ]
@@ -99,6 +128,10 @@ let itemArr2 = [
 const source = [
     {
         'name': 'Article (news)',
+        'qcode': 'Article (news)',
+    },
+    {
+        'name': 'Article',
         'qcode': 'Article',
     },
     {
@@ -109,19 +142,42 @@ const source = [
         '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
+);
+
+type ICancelFn = () => void;
+
 function searchOptions(
     term: string,
-    callback: (res: Array<ITreeNode<{name: string; qcode: string;}>>) => void,
-): void {
-    setTimeout(() => {
+    callback: (res: any) => void,
+): ICancelFn {
+    let timeout = setTimeout(() => {
+        
         callback(
-            source
-                .filter((item) => item.name.toLocaleLowerCase().includes(term.toLocaleLowerCase()))
+            fetchedArr
+                .filter((item: any) => item.display_name.toLocaleLowerCase().includes(term.toLocaleLowerCase()))
                 .map((item) => ({value: item})),
-        ); 
+        );
     }, 1000);
+
+    return () => {
+        clearTimeout(timeout);
+    }
 }
 
 export class TreeSelectDocs extends React.Component<{}, IState> {
@@ -132,8 +188,10 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
             value2: [],
             options: itemArr2,
             options2: itemArr2,
-            inputValue: ''
+            inputValue: '',
+            arr: []
         }
+        
 
         this.handleChange = this.handleChange.bind(this);
     }
@@ -146,13 +204,13 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
             this.setState({
                 options: option.item
             })
-        }  
+        }
     }
 
     render() {
         return (
             <section className='docs-page__container'>
-                <h2 className='docs-page__h2'>TreeSelect (in progress)</h2>
+                <h2 className='docs-page__h2'>TreeSelect</h2>
 
                 <Markup.ReactMarkupCodePreview>{`
                     <TreeSelect
@@ -183,7 +241,8 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                                     error={'Error Message'}
                                     required
                                     label={'TreeSelect Label'}
-
+                                    singleLevelSearch
+                                    searchPlaceholder='Search...'
                                 />
                             </div>
                         </div>
@@ -223,10 +282,11 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                                 onChange={(val) => {
                                     this.setState({value: val});
                                 }}
-                                getLabel={({name}) => name}
-                                getId={({qcode}) => qcode}
+                                getLabel={({display_name}) => display_name
+                                }
+                                getId={({qcode}) => qcode.display_name}
                                 selectBranchWithChildren={false}
-                                optionTemplate={(item) => <span style={{color: 'blue'}}>{item.name}</span>}
+                                //optionTemplate={(item) => <span style={{color: 'blue'}}>{item.display_name}</span>}
                                 allowMultiple={true}
                             />
                             </div>
@@ -269,6 +329,8 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                                     valueTemplate={(item: any) => {
                                         return <span>Label: {item.name}</span>
                                     }}
+                                    //allowMultiple
+                                    //readOnly
                                 />
                             </div>
                         </div>
@@ -302,12 +364,23 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                     <Prop name='selectBranchWithChildren' isRequired={false} type='boolean' default='false' description='When specified, select branch with children is enabled.'/>
                     <Prop name='readonly' isRequired={false} type='boolean' default='false' description='When specified, component changes are not enabled.'/>
                     <Prop name='loading' isRequired={false} type='boolean' default='false' description='Adds a loading indicator in dropdown.'/>
+                    <Prop name='allowMultiple' isRequired={false} type='boolean' default='/' description='Enable multi-select mode.'/>
+                    <Prop name='singleLevelSearch' isRequired={false} type='boolean' default='/' description='Limit search to only the level that is displayed.'/>
+                    <Prop name='placeholder' isRequired={false} type='string' default='/' description='Placeholder of component in single select mode.'/>
+                    <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='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'/>
+                    <Prop name='info' isRequired={false} type='string' default='/' description='Hint text'/>
+                    <Prop name='error' isRequired={false} type='string' default='/' description='Error text'/>
+                    <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline'/>
+                    <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required'/>
+                    <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled'/>
+                    <Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid'/>
                 </PropsList>
 
                 <p className='docs-page__paragraph'>synchronous:</p>
@@ -325,107 +398,3 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
         )
     }
 }
-
-// import React from 'react';
-// import {ITreeNode, TreeSelect} from './TreeSelect';
-
-// type IProps = {};
-
-// interface IVocabularyItem {
-//     qcode: string;
-//     name: string;
-// }
-
-// interface IState {
-//     value: Array<IVocabularyItem>;
-// }
-
-// const source: Array<ITreeNode<IVocabularyItem>> = [
-//     {
-//         value: {
-//             'name': 'Article (news)',
-//             'qcode': 'Article',
-//         },
-//         children: [
-//             {
-//                 value: {
-//                     'name': 'Test 1',
-//                     'qcode': 'test-1',
-//                 },
-//             }
-//         ],
-//     },
-//     {
-//         value: {
-//             'name': 'Sidebar',
-//             'qcode': 'Sidebar',
-//         },
-//         children: [
-//             {
-//                 value: {
-//                     'name': 'Test 2',
-//                     'qcode': 'test-2',
-//                 },
-//             }
-//         ],
-//     },
-//     {
-//         value: {
-//             'name': 'Factbox',
-//             'qcode': 'Factbox',
-//         },
-//         children: [
-//             {
-//                 value: {
-//                     'name': 'Test 3',
-//                     'qcode': 'test-3',
-//                 },
-//             }
-//         ],
-//     }
-// ];
-
-// export class TreeSelectDocs extends React.PureComponent<IProps, IState> {
-//     constructor(props: IProps) {
-//         super(props);
-//         this.state = {
-//             value: [],
-//         };
-//     }
-//     render() {
-//         return (
-//             // <TreeSelect
-//             //     kind="synchronous"
-//             //     getOptions={() => source}
-//             //     value={this.state.value}
-//             //     onChange={(val) => {
-//             //         this.setState({value: val});
-//             //     }}
-//             //     getId={(item) => item.name}
-//             //                         getLabel={(item) => item.name}
-//             //     selectBranchWithChildren={false}
-//             //     optionTemplate={(item) => <span style={{color: 'blue'}}>{item.name}</span>}
-//             //     allowMultiple={true}
-                
-//             // />
-
-//             <TreeSelect
-//                                     getId={(item) => item.name}
-//                                     getLabel={(item) => item.name}
-//                                     getOptions={() => {
-//                                         return source
-//                                     }}
-//                                     //value={[{name: 'Item1'}, {name: 'Item2'}]}
-//                                     //selectBranchWithChildren={true}
-//                                     onChange={(e) => console.log(e)}
-//                                     allowMultiple
-//                                     kind={'synchronous'}
-//                                     fullWidth
-//                                     info={'Info Message'}
-//                                     error={'Error Message'}
-//                                     required
-//                                     label={'TreeSelect Label'}
-//                                 />
-//         );
-//     }
-// }