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

package/examples/pages/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "3.0.1-beta.9",
+  "version": "3.0.1",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",
@@ -23,8 +23,7 @@
     "build-ui": "webpack && tsc && npm run lint",
     "lint": "eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'",
     "lint-fix": "tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'",
-    "prepublishOnly": "npm run build",
-    "postinstall": "patch-package"
+    "prepublishOnly": "npm run build"
   },
   "devDependencies": {
     "@types/chart.js": "^2.9.24",
@@ -61,7 +60,6 @@
     "jquery-ui": "^1.12.1",
     "lodash": "4.17.21",
     "node-sass": "6.0",
-    "patch-package": "6.2.0",
     "prismjs": "^1.28.0",
     "prop-types": "^15.6.0",
     "react": "16.8.6",
@@ -86,7 +84,7 @@
   "dependencies": {
     "@material-ui/lab": "^4.0.0-alpha.56",
     "@popperjs/core": "^2.4.0",
-    "@superdesk/primereact": "^5.0.2-4",
+    "@superdesk/primereact": "^5.0.2-6",
     "@types/node": "^14.10.2",
     "chart.js": "^2.9.3",
     "date-fns": "2.7.0",

package/react/components/ContentDivider.d.ts

@@ -4,6 +4,7 @@ interface IProps {
     orientation?: 'horizontal' | 'vertical';
     align?: 'center' | 'left' | 'right';
     border?: boolean;
+    margin?: 'x-small' | 'small' | 'medium' | 'large' | 'none';
     children?: React.ReactNode;
 }
 export declare class ContentDivider extends React.PureComponent<IProps> {

package/react/components/ContentDivider.js

@@ -54,6 +54,8 @@ var ContentDivider = /** @class */ (function (_super) {
             _a["sd-content-divider--".concat(this.props.type)] = this.props.type || this.props.type !== undefined,
             _a["sd-content-divider--text-".concat(this.props.align)] = this.props.align || this.props.align !== undefined,
             _a["sd-content-divider--".concat(this.props.orientation)] = this.props.orientation || this.props.orientation !== undefined,
+            _a['sd-content-divider--margin-medium'] = this.props.margin === undefined,
+            _a["sd-content-divider--margin-".concat(this.props.margin)] = this.props.margin || this.props.margin !== undefined,
             _a));
         if (this.props.children) {
             return (React.createElement("div", { className: "sd-content-divider--with-text " + classes, role: "separator" },

package/react/components/DatePicker.d.ts

@@ -2,13 +2,13 @@ import * as React from 'react';
 import { LocaleSettings, CalendarProps } from '@superdesk/primereact/calendar';
 export declare type DatePickerLocaleSettings = Omit<LocaleSettings, 'today' | 'clear'>;
 interface IDatePickerBase {
-    disabled?: boolean;
     dateFormat: string;
-    shortcuts?: Array<{
+    headerButtonBar?: Array<{
         days: number;
         label: string;
     }>;
     locale?: DatePickerLocaleSettings;
+    disabled?: boolean;
     inlineLabel?: boolean;
     required?: boolean;
     fullWidth?: boolean;

package/react/components/DatePicker.js

@@ -139,9 +139,9 @@ var DatePicker = /** @class */ (function (_super) {
                         // updating internal state so a user can continue typing and enter a valid value
                         _this.setState({ value: event.value, valid: false });
                     }
-                }, locale: locale, dateFormat: this.props.dateFormat.replace('YYYY', 'yy').replace('MM', 'mm').replace('DD', 'dd'), showIcon: true, icon: "icon-calendar", headerTemplate: function () { return _this.props.shortcuts == null ? null : (React.createElement("div", { style: { width: '100%', display: 'flex', justifyContent: 'space-between', marginBottom: 10 } }, _this.props.shortcuts.map(function (_a, i) {
+                }, locale: locale, dateFormat: this.props.dateFormat.replace('YYYY', 'yy').replace('MM', 'mm').replace('DD', 'dd'), showIcon: true, icon: "icon-calendar", headerTemplate: function () { return _this.props.headerButtonBar == null ? null : (React.createElement("div", { className: "datepicker-header-toolbar" }, _this.props.headerButtonBar.map(function (_a, i) {
                     var label = _a.label, days = _a.days;
-                    return (React.createElement("button", { key: i, className: "btn btn--hollow btn--small", onClick: function () {
+                    return (React.createElement("button", { key: i, className: "btn btn--small", onClick: function () {
                             _this.props.onChange((0, addDays_1.default)(new Date(), days));
                             if (_this.instance != null && typeof _this.instance.hideOverlay === 'function') {
                                 _this.instance.hideOverlay();
@@ -176,7 +176,7 @@ var DatePickerISO = /** @class */ (function (_super) {
                 else {
                     _this.props.onChange((0, format_1.default)(value, 'yyyy-MM-dd'));
                 }
-            }, disabled: this.props.disabled, shortcuts: this.props.shortcuts, dateFormat: this.props.dateFormat, locale: this.props.locale, inlineLabel: this.props.inlineLabel, required: this.props.required, fullWidth: this.props.fullWidth, invalid: this.props.invalid, labelHidden: this.props.labelHidden, tabindex: this.props.tabindex, label: this.props.label, info: this.props.info, error: this.props.error }));
+            }, disabled: this.props.disabled, headerButtonBar: this.props.headerButtonBar, dateFormat: this.props.dateFormat, locale: this.props.locale, inlineLabel: this.props.inlineLabel, required: this.props.required, fullWidth: this.props.fullWidth, invalid: this.props.invalid, labelHidden: this.props.labelHidden, tabindex: this.props.tabindex, label: this.props.label, info: this.props.info, error: this.props.error }));
     };
     return DatePickerISO;
 }(React.PureComponent));

package/react/components/Dropdown.d.ts

@@ -1,29 +1,30 @@
 import * as React from 'react';
 export interface IMenuItem {
-    label: string;
+    label: string | React.ReactNode;
     icon?: string;
     active?: boolean;
     onSelect(): void;
 }
 export interface ISubmenu {
     type: 'submenu';
-    label: string;
+    label: string | React.ReactNode;
     icon?: string;
     items: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
 }
 export interface IMenuGroup {
     type: 'group';
-    label?: string;
+    label?: string | React.ReactNode;
     items: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
 }
 interface IMenu {
-    label?: string;
+    label?: string | React.ReactNode;
     align?: 'left' | 'right';
     items: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
     header?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
     footer?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
     append?: boolean;
     children: React.ReactNode;
+    onChange?(event?: any): void;
 }
-export declare const Dropdown: ({ items, header, footer, children, append, align, }: IMenu) => JSX.Element;
+export declare const Dropdown: ({ items, header, footer, children, append, align, onChange, }: IMenu) => JSX.Element;
 export {};