superdesk-ui-framework 3.0.1-beta.9 → 3.0.2

package/dist/react/TreeSelect.tsx

@@ -10,70 +10,127 @@ interface IState {
     options: any;
     options2: any;
     inputValue: string;
+    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'},
                 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'}}
                 ]
             }
         ]
     },
     {
-        value: {name: 'Category2'},
+        value: {name: 'Category2', border: 'green'},
         children: [
             {
                 value: {name: 'Item8'}
@@ -84,7 +141,7 @@ let itemArr2 = [
         ]
     },
     {
-        value: {name: 'Category3'},
+        value: {name: 'Category3', border: 'yellow'},
         children: [
             {
                 value: {name: 'Item10'}
@@ -96,32 +153,28 @@ let itemArr2 = [
     },
 ]
 
-const source = [
-    {
-        'name': 'Article (news)',
-        'qcode': 'Article',
-    },
-    {
-        'name': 'Sidebar',
-        'qcode': 'Sidebar',
-    },
-    {
-        'name': 'Factbox',
-        'qcode': 'Factbox',
-    },
-];
+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> {
@@ -130,10 +183,12 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
         this.state = {
             value: [],
             value2: [],
-            options: itemArr2,
-            options2: itemArr2,
-            inputValue: ''
+            options: options,
+            options2: options,
+            inputValue: '',
+            arr: []
         }
+        
 
         this.handleChange = this.handleChange.bind(this);
     }
@@ -146,13 +201,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
@@ -170,20 +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'}
-
+                                    searchPlaceholder='Search...'
+                                    onChange={(e) => false}
+                                    valueTemplate={(item, Wrapper) => {
+                                        return (
+                                            <Wrapper backgroundColor={item.bgColor}>
+                                                <span>{item.name}</span>
+                                            </Wrapper>
+                                        );
+                                    }}    
                                 />
                             </div>
                         </div>
@@ -191,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>
                     
@@ -223,10 +295,10 @@ 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>}
                                 allowMultiple={true}
                             />
                             </div>
@@ -257,17 +329,22 @@ 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>
                                     }}
                                 />
                             </div>
@@ -276,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>
@@ -302,12 +384,25 @@ 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='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'/>
+                    <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 +420,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'}
-//                                 />
-//         );
-//     }
-// }

package/dist/sd_icons.svg

@@ -193,4 +193,5 @@
 <glyph unicode="&#xe6b7;" glyph-name="audio-cancel" d="M67.882 891.8l195.052-195.052 0.128 0.102 477.43-477.66c0.037 0.039 0.074 0.077 0.111 0.116l75.807-75.805-0.114-0.115 139.712-139.712-67.882-67.882-145.282 145.284c-48.898-33.743-104.339-58.713-164.049-72.639l-2.796-0.643v110.54c31.797 9.462 61.834 23.030 89.496 40.088l-153.496 153.496v-247.918l-320 256h-192v320h183.918l-183.918 183.918zM576 949c215.178-48.832 375.624-240.934 375.624-470.602 0-95.32-27.637-184.169-75.354-258.991l-78.258 78.258c29.502 53.629 46.29 115.232 46.29 180.733 0 168.403-110.971 311.035-263.662 358.648l-4.64 1.414zM576 694.648c79.418-39.708 134.152-121.272 134.152-216.252 0-27.892-4.72-54.628-13.4-79.473l-120.752 120.751zM512 896v-312.326l-173.516 173.514z" />
 <glyph unicode="&#xe6b8;" glyph-name="list-alt-cancel" d="M67.882 891.8l60.116-60.116 0.002 0.228 128-128-0.002-0.228 63.684-63.684h0.23l64.088-64.088-0.002-0.228 63.684-63.684h0.23l64-64h-0.23l64-64h0.23l64-64h-0.23l64-64h0.23l192.088-192.088-0.004-0.226 60.012-60.012-67.882-67.882-64.208 64.208h-631.918c-34.353 0-63.413 30.677-63.991 63.019l-0.009 0.981-0.002 631.92-127.998 127.998zM832 896c34.353 0 63.413-28.717 63.991-62.961l0.009-1.039v-632.324l-184.324 184.324h56.324v64h-120.324l-63.998 64h184.322v64h-248.322l-64 64h312.322v64h-376.322l-192 192zM567.918 256l-64 64h-119.918v-64zM320 320h-64v-64h64zM439.918 384l-55.92 55.92 0.002-55.92zM320 448h-64v-64h64zM255.998 567.92l0.002-55.92h55.918z" />
 <glyph unicode="&#xe6b9;" glyph-name="post-cancel" d="M67.882 891.8l59.8-59.8 0.228 0.002 128.090-128.092v-0.228l63.68-63.68h0.228l64-64h-0.228l64-64h0.228l64-64h-0.228l64-64h0.23l128-128h-0.23l252.328-252.328-67.882-67.882-320.21 320.21-311.916-0.002-192-192v695.918l-64 64zM896 832c34.353 0 63.413-28.717 63.991-62.961l0.009-1.039v-448c0-34.353-28.717-63.413-62.961-63.991l-1.039-0.009-56.326 0.002-256.002 256 184.328-0.002v64l-248.328 0.002-64 64 312.328-0.002v64l-376.328 0.002-128 128zM439.916 384.002l-64 64-119.916-0.002v-64zM311.916 512.002l-55.916 55.916v-55.918z" />
+<glyph unicode="&#xe6ba;" glyph-name="text-block" d="M896 543.95v-191.9c0-53.012-43.038-96.050-96.050-96.050h-575.9c-53.012 0-96.050 43.038-96.050 96.050v191.9c0 53.012 43.039 96.050 96.050 96.050h575.9c53.012 0 96.050-43.038 96.050-96.050zM256 384h512v128h-512zM128 768h768v128h-768zM128 0h768v128h-768z" />
 </font></defs></svg>