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

package/examples/pages/react/TreeSelect.tsx

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "3.0.1-beta.24",
+  "version": "3.0.1-beta.26",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",

package/react/components/Label.d.ts

@@ -13,4 +13,5 @@ interface IProps {
 export declare class Label extends React.PureComponent<IProps> {
     render(): JSX.Element;
 }
+export declare function getTextColor(backgroundColor: string): 'black' | 'white' | undefined;
 export {};

package/react/components/Label.js

@@ -37,7 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Label = void 0;
+exports.getTextColor = exports.Label = void 0;
 var React = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var Label = /** @class */ (function (_super) {
@@ -74,10 +74,25 @@ var Label = /** @class */ (function (_super) {
                 return (React.createElement("span", { className: classes, style: { color: this.props.hexColor, backgroundColor: "".concat(this.props.hexColor, "33") } }, this.props.text));
             }
             else {
-                return (React.createElement("span", { className: classes, style: { backgroundColor: this.props.hexColor } }, this.props.text));
+                return (React.createElement("span", { className: classes, style: this.props.hexColor
+                        ? { backgroundColor: this.props.hexColor, color: getTextColor(this.props.hexColor) }
+                        : undefined }, this.props.text));
             }
         }
     };
     return Label;
 }(React.PureComponent));
 exports.Label = Label;
+function getTextColor(backgroundColor) {
+    if (backgroundColor) {
+        var r = parseInt(backgroundColor.substr(1, 2), 16);
+        var g = parseInt(backgroundColor.substr(3, 2), 16);
+        var b = parseInt(backgroundColor.substr(5, 2), 16);
+        var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
+        return (yiq >= 128) ? 'black' : 'white';
+    }
+    else {
+        return;
+    }
+}
+exports.getTextColor = getTextColor;

package/react/components/Layouts/AuthoringFrame.d.ts

@@ -3,6 +3,7 @@ interface IProps {
     header?: React.ReactNode;
     main?: React.ReactNode;
     sideBar?: React.ReactNode;
+    sideBarClosed?: boolean;
     sidePanel?: React.ReactNode;
     sideOverlay?: React.ReactNode;
     sideOverlayOpen?: boolean;

package/react/components/Layouts/AuthoringFrame.js

@@ -50,7 +50,7 @@ var AuthoringFrame = /** @class */ (function (_super) {
             this.props.main && (React.createElement(_1.AuthoringFrameMain, null, this.props.main)),
             this.props.sidePanel && (React.createElement(_1.AuthoringFrameSidePanel, { opened: this.props.sidePanelOpen, pinned: this.props.sidePanelPinned }, this.props.sidePanel)),
             this.props.sideOverlay && (React.createElement(_1.AuthoringFrameSidePanelOverlay, { opened: this.props.sideOverlayOpen }, this.props.sideOverlay)),
-            this.props.sideBar && (React.createElement(_1.AuthoringFrameRightBar, null, this.props.sideBar)),
+            this.props.sideBar && (React.createElement(_1.AuthoringFrameRightBar, { closed: this.props.sideBarClosed }, this.props.sideBar)),
             this.props.overlayPanel && (React.createElement(_1.AuthoringFrameOverlay, null, this.props.overlayPanel))));
     };
     return AuthoringFrame;

package/react/components/Layouts/AuthoringFrameRightBar.d.ts

@@ -1,8 +1,15 @@
 import * as React from 'react';
 interface IProps {
     children?: React.ReactNode;
+    closed?: boolean;
 }
-export declare class AuthoringFrameRightBar extends React.PureComponent<IProps> {
-    render(): JSX.Element;
+interface IState {
+    children?: React.ReactNode;
+    closed?: boolean;
+}
+export declare class AuthoringFrameRightBar extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps);
+    componentDidUpdate(prevProps: Readonly<IProps>): void;
+    render(): false | JSX.Element;
 }
 export {};

package/react/components/Layouts/AuthoringFrameRightBar.js

@@ -38,11 +38,22 @@ exports.AuthoringFrameRightBar = void 0;
 var React = __importStar(require("react"));
 var AuthoringFrameRightBar = /** @class */ (function (_super) {
     __extends(AuthoringFrameRightBar, _super);
-    function AuthoringFrameRightBar() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    function AuthoringFrameRightBar(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            closed: _this.props.closed ? _this.props.closed : false,
+        };
+        return _this;
     }
+    AuthoringFrameRightBar.prototype.componentDidUpdate = function (prevProps) {
+        if (prevProps.closed !== this.props.closed) {
+            this.setState({
+                closed: this.props.closed,
+            });
+        }
+    };
     AuthoringFrameRightBar.prototype.render = function () {
-        return (React.createElement("div", { className: "sd-editor-grid__sidetabs-bar" }, this.props.children));
+        return (!this.state.closed && React.createElement("div", { className: "sd-editor-grid__sidetabs-bar" }, this.props.children));
     };
     return AuthoringFrameRightBar;
 }(React.PureComponent));

package/react/components/Lists/ContentList.d.ts

@@ -22,6 +22,7 @@ declare class ContentListItem extends React.PureComponent<IPropsItem> {
     private prevent;
     onSingleClick: () => void;
     onDoubleClick: () => void;
+    onActionMenuClick: (event: React.MouseEvent<HTMLElement>) => void;
     render(): JSX.Element;
 }
 interface IProps {

package/react/components/Lists/ContentList.js

@@ -65,6 +65,10 @@ var ContentListItem = /** @class */ (function (_super) {
                 _this.prevent = false;
             }, _this.delay);
         };
+        _this.onActionMenuClick = function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        };
         return _this;
     }
     ContentListItem.prototype.render = function () {
@@ -85,7 +89,7 @@ var ContentListItem = /** @class */ (function (_super) {
                         : React.createElement("div", { className: "sd-list-item__row", key: i }, e.content));
                 }));
             }),
-            React.createElement("div", { className: "sd-list-item__action-menu" }, this.props.action)));
+            React.createElement("div", { className: "sd-list-item__action-menu", onClick: this.onActionMenuClick }, this.props.action)));
     };
     return ContentListItem;
 }(React.PureComponent));

package/react/components/Lists/TableList.d.ts

@@ -8,6 +8,7 @@ export interface IProps {
     className?: string;
     readOnly?: boolean;
     showDragHandle?: 'always' | 'onHover' | 'none';
+    append?: boolean;
     onDrag?(start: number, end: number): void;
     onAddItem?(index: number, item?: IPropsArrayItem): void;
     itemsDropdown?(index?: number): Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;

package/react/components/Lists/TableList.js

@@ -55,6 +55,7 @@ var react_beautiful_dnd_1 = require("react-beautiful-dnd");
 var Tooltip_1 = require("../Tooltip");
 var Button_1 = require("../Button");
 var Dropdown_1 = require("../Dropdown");
+var react_dom_1 = __importDefault(require("react-dom"));
 var reorder = function (list, startIndex, endIndex) {
     var result = Array.from(list);
     var removed = result.splice(startIndex, 1)[0];
@@ -114,13 +115,18 @@ var TableList = /** @class */ (function (_super) {
             ? this.props.dragAndDrop
                 ? React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: this.onDragEnd },
                     React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "droppable" }, function (provided, _snapshot) { return (React.createElement("div", __assign({ role: 'list', className: classes, ref: provided.innerRef }, provided.droppableProps),
-                        _this.state.items.map(function (item, index) { return (React.createElement(react_beautiful_dnd_1.Draggable, { key: index, draggableId: "".concat(index), index: index }, function (provided2, _snapshot2) { return (React.createElement("div", __assign({ ref: provided2.innerRef }, provided2.draggableProps, provided2.dragHandleProps),
-                            React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, onDoubleClick: item.onDoubleClick
-                                    ? item.onDoubleClick
-                                    : undefined, addItem: _this.props.addItem, itemsDropdown: function () { return _this.props.itemsDropdown
+                        _this.state.items.map(function (item, index) { return (React.createElement(react_beautiful_dnd_1.Draggable, { key: index, draggableId: "".concat(index), index: index }, function (provided2, snapshot) { return (_this.props.append
+                            ? React.createElement(PortalItem, { provided: provided2, snapshot: snapshot, item: item, index: index, dragAndDrop: _this.props.dragAndDrop, showDragHandle: _this.props.showDragHandle, addItem: _this.props.addItem, onAddItem: function () { return _this.props.onAddItem
+                                    && _this.props.onAddItem(index, item); }, itemsDropdown: function () { return _this.props.itemsDropdown
                                     ? _this.props.itemsDropdown(index)
-                                    : []; }, hexColor: item.hexColor, locked: item.locked, positionLocked: item.positionLocked, onAddItem: function () { return _this.props.onAddItem
-                                    && _this.props.onAddItem(index, item); }, showDragHandle: _this.props.showDragHandle }))); })); }),
+                                    : []; } })
+                            : React.createElement("div", __assign({ ref: provided2.innerRef }, provided2.draggableProps, provided2.dragHandleProps),
+                                React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, onDoubleClick: item.onDoubleClick
+                                        ? item.onDoubleClick
+                                        : undefined, addItem: _this.props.addItem, itemsDropdown: function () { return _this.props.itemsDropdown
+                                        ? _this.props.itemsDropdown(index)
+                                        : []; }, hexColor: item.hexColor, locked: item.locked, positionLocked: item.positionLocked, onAddItem: function () { return _this.props.onAddItem
+                                        && _this.props.onAddItem(index, item); }, showDragHandle: _this.props.showDragHandle }))); })); }),
                         provided.placeholder,
                         (_this.props.addItem && !_this.props.readOnly) &&
                             React.createElement("div", { className: "table-list__add-item table-list__item--margin" },
@@ -206,3 +212,25 @@ var TableListItem = /** @class */ (function (_super) {
     return TableListItem;
 }(React.PureComponent));
 exports.TableListItem = TableListItem;
+var PortalItem = /** @class */ (function (_super) {
+    __extends(PortalItem, _super);
+    function PortalItem() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    PortalItem.prototype.render = function () {
+        var _this = this;
+        var provided = this.props.provided;
+        var snapshot = this.props.snapshot;
+        var usePortal = snapshot.isDragging;
+        var child = (React.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps),
+            React.createElement(TableListItem, { dragAndDrop: this.props.dragAndDrop, start: this.props.item.start, center: this.props.item.center, end: this.props.item.end, action: this.props.item.action, onClick: this.props.item.onClick ? this.props.item.onClick : undefined, onDoubleClick: this.props.item.onDoubleClick
+                    ? this.props.item.onDoubleClick
+                    : undefined, addItem: this.props.addItem, itemsDropdown: this.props.itemsDropdown, hexColor: this.props.item.hexColor, locked: this.props.item.locked, positionLocked: this.props.item.positionLocked, onAddItem: function () { return _this.props.onAddItem; }, showDragHandle: this.props.showDragHandle })));
+        if (!usePortal) {
+            return child;
+        }
+        // if dragging - put the item in a portal
+        return react_dom_1.default.createPortal(child, document.body);
+    };
+    return PortalItem;
+}(React.PureComponent));

package/react/components/Menu.js

@@ -104,7 +104,7 @@ var Menu = /** @class */ (function (_super) {
     Menu.prototype.render = function () {
         var _this = this;
         var _a;
-        return (React.createElement("div", null,
+        return (React.createElement(React.Fragment, null,
             this.props.children(this.toggle),
             React.createElement("div", { onKeyDown: function (event) {
                     if (event.key === 'Escape') {

package/react/components/TreeSelect.d.ts

@@ -34,8 +34,10 @@ interface IPropsBase<T> {
     disabled?: boolean;
     getLabel(item: T): string;
     getId(item: T): string;
+    getBackgroundColor?(item: T): string;
+    getBorderColor?(item: T): string;
     optionTemplate?(item: T): React.ComponentType<T> | JSX.Element;
-    valueTemplate?(item: T): React.ComponentType<T> | JSX.Element;
+    valueTemplate?(item: T, Wrapper: any): React.ComponentType<T> | JSX.Element;
     onChange(e: Array<T>): void;
 }
 interface IPropsSync<T> extends IPropsBase<T> {