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

package/react/components/Dropdown.js

@@ -25,7 +25,7 @@ var ReactDOM = __importStar(require("react-dom"));
 var core_1 = require("@popperjs/core");
 var react_id_generator_1 = require("react-id-generator");
 var Dropdown = function (_a) {
-    var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align;
+    var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, onChange = _a.onChange;
     var _b = React.useState(false), open = _b[0], setOpen = _b[1];
     var _c = React.useState(false), change = _c[0], setChange = _c[1];
     var menuID = (0, react_id_generator_1.useId)()[0];
@@ -181,7 +181,7 @@ var Dropdown = function (_a) {
             return (React.createElement("li", { className: "dropdown__menu-divider", key: index }));
         }
         else {
-            return (React.createElement(DropdownItem, { key: index, label: item['label'], icon: item['icon'], active: item['active'], onSelect: item['onSelect'] }));
+            return (React.createElement(DropdownItem, { key: index, label: item['label'], icon: item['icon'], active: item['active'], onSelect: item['onSelect'], onChange: onChange }));
         }
     }
     return (React.createElement("div", { className: 'dropdown ' + (open ? 'open' : '') },
@@ -223,9 +223,14 @@ var Dropdown = function (_a) {
 };
 exports.Dropdown = Dropdown;
 var DropdownItem = function (_a) {
-    var label = _a.label, icon = _a.icon, active = _a.active, onSelect = _a.onSelect;
+    var label = _a.label, icon = _a.icon, active = _a.active, onSelect = _a.onSelect, onChange = _a.onChange;
     return (React.createElement("li", { role: 'none', className: active ? 'dropdown__menu-item--active' : '' },
-        React.createElement("button", { tabIndex: 0, role: 'menuitem', onClick: onSelect },
+        React.createElement("button", { tabIndex: 0, role: 'menuitem', onClick: function () {
+                onSelect();
+                if (onChange) {
+                    onChange();
+                }
+            } },
             React.createElement("i", { className: icon ? ('icon-' + icon) : '' }),
             label)));
 };

package/react/components/DurationInput.js

@@ -330,6 +330,14 @@ function getDurationString(seconds) {
     var hour = zeroPad(Math.floor(seconds / 3600));
     var minute = zeroPad(Math.floor((seconds % 3600) / 60));
     var second = zeroPad(Math.floor(seconds % 60));
-    return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
+    if (Number(hour) === 0 && Number(minute) > 0) {
+        return "".concat(minute, "m ").concat(second, "s");
+    }
+    else if (Number(hour) === 0 && Number(minute) === 0) {
+        return "".concat(second, "s");
+    }
+    else {
+        return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
+    }
 }
 exports.getDurationString = getDurationString;

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

@@ -12,6 +12,7 @@ interface IProps {
     menuId?: string;
     ariaControls?: string;
     buttonAnimation?: 'spin' | 'squeeze' | 'none';
+    editorFullWidth?: boolean;
 }
 export declare class CoreLayout extends React.PureComponent<IProps> {
     render(): JSX.Element;

package/react/components/Layouts/CoreLayout.js

@@ -46,7 +46,7 @@ var CoreLayout = /** @class */ (function (_super) {
         return (React.createElement(_1.CoreLayoutContainer, null,
             this.props.slideInMenu && (React.createElement(_1.CoreLayoutSlideInMenu, { menuId: this.props.menuId, menuOpen: this.props.menuOpen }, this.props.slideInMenu)),
             this.props.topMenu && (React.createElement(_1.CoreLayoutTopMenu, { buttonAnimation: this.props.buttonAnimation, heading: this.props.heading, onClick: this.props.onClick, active: this.props.active, ariaControls: this.props.ariaControls }, this.props.topMenu)),
-            React.createElement(_1.CoreLayoutMain, null, this.props.children),
+            React.createElement(_1.CoreLayoutMain, { editorFullWidth: this.props.editorFullWidth }, this.props.children),
             this.props.footer && (React.createElement(_1.CoreLayoutFooter, null, this.props.footer)),
             this.props.overlay && (React.createElement(_1.CoreLayoutOverlay, null, this.props.overlay))));
     };

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 interface IProps {
     children?: React.ReactNode;
     id?: string;
+    editorFullWidth?: boolean;
 }
 export declare class CoreLayoutMain extends React.PureComponent<IProps> {
     render(): JSX.Element;

package/react/components/Layouts/CoreLayoutMain.js

@@ -33,16 +33,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CoreLayoutMain = void 0;
 var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
 var CoreLayoutMain = /** @class */ (function (_super) {
     __extends(CoreLayoutMain, _super);
     function CoreLayoutMain() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     CoreLayoutMain.prototype.render = function () {
-        return (React.createElement("section", { id: this.props.id, className: 'sd-content sd-content-wrapper' }, this.props.children));
+        var classes = (0, classnames_1.default)('sd-content sd-content-wrapper', {
+            'sd-content-wrapper--editor-full': this.props.editorFullWidth,
+        });
+        return (React.createElement("section", { id: this.props.id, className: classes }, this.props.children));
     };
     return CoreLayoutMain;
 }(React.PureComponent));

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

@@ -2,13 +2,15 @@ import * as React from 'react';
 import { DropResult } from "react-beautiful-dnd";
 import { IMenuItem, ISubmenu, IMenuGroup } from '../Dropdown';
 export interface IProps {
-    children?: React.ReactNode;
     array: Array<IPropsArrayItem>;
     addItem?: boolean;
     dragAndDrop?: boolean;
     itemsDropdown?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
     className?: string;
+    readOnly?: boolean;
+    showDragHandle?: 'always' | 'onHover' | 'none';
     onDrag?(start: number, end: number): void;
+    onAddItem?(index: number, item?: IPropsArrayItem): void;
 }
 export interface IPropsArrayItem {
     start?: React.ReactNode;
@@ -16,15 +18,19 @@ export interface IPropsArrayItem {
     end?: React.ReactNode;
     action?: React.ReactNode;
     onClick?(): void;
+    onDoubleClick?(): void;
+    hexColor?: string;
 }
-declare class TableList extends React.PureComponent<IProps, {
+interface IState {
     items: Array<IPropsArrayItem>;
-}> {
-    constructor(props: Readonly<IProps>);
+}
+declare class TableList extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps);
     componentDidMount(): void;
-    componentDidUpdate(prevProps: Readonly<IProps>): void;
+    componentDidUpdate(prevProps: IProps): void;
     onDragEnd(result: DropResult): void | null;
-    render(): false | "" | 0 | JSX.Element | null | undefined;
+    dropDown(): JSX.Element;
+    render(): JSX.Element | null;
 }
 export interface IPropsItem {
     start?: React.ReactNode;
@@ -35,8 +41,18 @@ export interface IPropsItem {
     itemsDropdown?: any;
     dragAndDrop?: boolean;
     onClick?(): void;
+    onDoubleClick?(): void;
+    onSelect?(): void;
+    onAddItem?(e: number): void;
+    hexColor?: string;
+    showDragHandle?: 'always' | 'onHover' | 'none';
 }
 declare class TableListItem extends React.PureComponent<IPropsItem> {
+    private timer;
+    private delay;
+    private prevent;
+    onSingleClick: () => void;
+    onDoubleClick: () => void;
     render(): JSX.Element;
 }
 export { TableList, TableListItem };

package/react/components/Lists/TableList.js

@@ -69,16 +69,21 @@ var TableList = /** @class */ (function (_super) {
             items: [],
         };
         _this.onDragEnd = _this.onDragEnd.bind(_this);
+        _this.dropDown = _this.dropDown.bind(_this);
         return _this;
     }
     TableList.prototype.componentDidMount = function () {
-        this.setState({ items: this.props.array });
+        if (this.props.array) {
+            this.setState({ items: this.props.array });
+        }
     };
     TableList.prototype.componentDidUpdate = function (prevProps) {
-        if (prevProps.array !== this.props.array) {
-            this.setState({
-                items: this.props.array,
-            });
+        if (this.props.array) {
+            if (prevProps.array !== this.props.array) {
+                this.setState({
+                    items: this.props.array,
+                });
+            }
         }
     };
     TableList.prototype.onDragEnd = function (result) {
@@ -92,24 +97,47 @@ var TableList = /** @class */ (function (_super) {
         return this.props.onDrag ?
             this.props.onDrag(result.source.index, result.destination.index) : null;
     };
+    TableList.prototype.dropDown = function () {
+        return (React.createElement(Dropdown_1.Dropdown, { items: this.props.itemsDropdown ? this.props.itemsDropdown : [] },
+            React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } })));
+    };
     TableList.prototype.render = function () {
         var _a;
         var _this = this;
-        var classes = (0, classnames_1.default)((_a = {
-                'table-list': !this.props.addItem
+        var classes = (0, classnames_1.default)('', (_a = {
+                'table-list': !this.props.addItem,
+                'table-list--read-only': this.props.readOnly
             },
             _a["".concat(this.props.className)] = this.props.className,
             _a));
-        return (this.props.array ?
-            this.props.dragAndDrop ?
-                React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: this.onDragEnd },
+        return (this.state.items.length > 0
+            ? 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("ul", __assign({ 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, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown }))); })); }),
-                        provided.placeholder)); }))
-                : React.createElement("ul", { className: classes }, this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown })); }))
-            : this.props.children &&
-                React.createElement("ul", { className: classes }, this.props.children));
+                            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: _this.props.itemsDropdown, hexColor: item.hexColor, 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("li", { className: "table-list__add-item table-list__item--margin" },
+                                React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
+                                    React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, _this.dropDown()))))); }))
+                : React.createElement("ul", { className: classes },
+                    this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, 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: _this.props.itemsDropdown, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
+                            && _this.props.onAddItem(index, item); } })); }),
+                    (this.props.addItem && !this.props.readOnly) &&
+                        React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
+                            React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
+                                React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, this.dropDown()))))
+            : (this.props.addItem && !this.props.readOnly) ? React.createElement("ul", { className: classes },
+                React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
+                    React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
+                        React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, this.dropDown()))))
+                : null);
     };
     return TableList;
 }(React.PureComponent));
@@ -117,12 +145,42 @@ exports.TableList = TableList;
 var TableListItem = /** @class */ (function (_super) {
     __extends(TableListItem, _super);
     function TableListItem() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.delay = 200;
+        _this.prevent = false;
+        _this.onSingleClick = function () {
+            _this.timer = setTimeout(function () {
+                if (!_this.prevent) {
+                    if (_this.props.onClick) {
+                        _this.props.onClick();
+                    }
+                }
+            }, _this.delay);
+        };
+        _this.onDoubleClick = function () {
+            clearTimeout(_this.timer);
+            _this.prevent = true;
+            if (_this.props.onDoubleClick) {
+                _this.props.onDoubleClick();
+            }
+            setTimeout(function () {
+                _this.prevent = false;
+            }, _this.delay);
+        };
+        return _this;
     }
     TableListItem.prototype.render = function () {
+        var _this = this;
+        var classes = (0, classnames_1.default)('table-list__item', {
+            'table-list__item--clickable': this.props.onClick,
+            'table-list__item--draggable': this.props.dragAndDrop,
+            'table-list__item--drag-handles-always': !this.props.showDragHandle,
+            'table-list__item--drag-handles-none': this.props.showDragHandle === 'none',
+        });
         return (this.props.addItem ?
             React.createElement("li", { className: 'table-list__item-container' },
-                React.createElement("div", { onClick: this.props.onClick, className: "table-list__item ".concat(this.props.onClick && 'table-list__item--clickable', " ").concat(this.props.dragAndDrop && 'table-list__item--draggable') },
+                React.createElement("div", { onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); }, className: classes },
+                    React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
                     React.createElement("div", { className: 'table-list__item-content' },
                         React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
                         React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' }, this.props.center && this.props.center),
@@ -131,9 +189,10 @@ var TableListItem = /** @class */ (function (_super) {
                 React.createElement("div", { className: 'table-list__add-bar-container' },
                     React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
                         React.createElement("div", { className: 'table-list__add-bar' },
-                            React.createElement(Dropdown_1.Dropdown, { items: this.props.itemsDropdown },
+                            React.createElement(Dropdown_1.Dropdown, { onChange: this.props.onAddItem, items: this.props.itemsDropdown ? this.props.itemsDropdown : [] },
                                 React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } }))))))
-            : React.createElement("li", { className: "table-list__item ".concat(this.props.onClick && 'table-list__item--clickable', " ").concat(this.props.dragAndDrop && 'table-list__item--draggable', " table-list__item--margin"), onClick: this.props.onClick },
+            : React.createElement("li", { className: "".concat(classes, " table-list__item--margin"), onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); } },
+                React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
                 React.createElement("div", { className: 'table-list__item-content' },
                     React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
                     React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' }, this.props.center && this.props.center),

package/react/components/SearchBar.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 interface IProps {
-    value?: string | number;
+    value?: string;
     type?: 'expanded' | 'collapsed' | 'boxed';
     placeholder: string;
     focused?: boolean;

package/react/components/SearchBar.js

@@ -91,14 +91,22 @@ var SearchBar = /** @class */ (function (_super) {
                     }
                 }, onChange: function (event) { return _this.setState({ inputValue: event.target.value }); }, onFocus: function () { return _this.setState({ focused: true }); } }),
             this.state.inputValue &&
-                React.createElement("button", { className: "sd-searchbar__cancel", onClick: function () { return _this.setState({ inputValue: '' }); } },
+                React.createElement("button", { className: "sd-searchbar__cancel", onClick: function () {
+                        _this.setState({ inputValue: '' });
+                        setTimeout(function () {
+                            if (_this.props.onSubmit) {
+                                _this.props.onSubmit(_this.state.inputValue);
+                            }
+                        });
+                    } },
                     React.createElement(Icon_1.Icon, { name: 'remove-sign' })),
-            React.createElement("button", { id: "sd-searchbar__search-btn", className: "sd-searchbar__search-btn ".concat(this.state.keyDown ? 'sd-searchbar__search-btn--active' : ''), onClick: function () {
-                    if (_this.props.onSubmit) {
-                        _this.props.onSubmit(_this.state.inputValue);
-                    }
-                } },
-                React.createElement(Icon_1.Icon, { name: 'chevron-right-thin' }))));
+            this.state.inputValue &&
+                React.createElement("button", { id: "sd-searchbar__search-btn", className: "sd-searchbar__search-btn ".concat(this.state.keyDown ? 'sd-searchbar__search-btn--active' : ''), onClick: function () {
+                        if (_this.props.onSubmit) {
+                            _this.props.onSubmit(_this.state.inputValue);
+                        }
+                    } },
+                    React.createElement(Icon_1.Icon, { name: 'chevron-right-thin' }))));
     };
     return SearchBar;
 }(React.PureComponent));

package/react/components/TimePicker.d.ts

@@ -14,12 +14,8 @@ interface IProps {
     info?: string;
     error?: string;
 }
-interface IState {
-    invalid: boolean;
-}
-export declare class TimePicker extends React.PureComponent<IProps, IState> {
+export declare class TimePicker extends React.PureComponent<IProps> {
     private htmlId;
-    constructor(props: IProps);
     render(): JSX.Element;
 }
 export {};

package/react/components/TimePicker.js

@@ -39,22 +39,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimePicker = void 0;
 var React = __importStar(require("react"));
-// import classNames from 'classnames';
 var react_id_generator_1 = __importDefault(require("react-id-generator"));
 var Form_1 = require("./Form");
 var TimePicker = /** @class */ (function (_super) {
     __extends(TimePicker, _super);
-    function TimePicker(props) {
-        var _this = _super.call(this, props) || this;
+    function TimePicker() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.htmlId = (0, react_id_generator_1.default)();
-        _this.state = {
-            invalid: _this.props.invalid ? _this.props.invalid : false,
-        };
         return _this;
     }
     TimePicker.prototype.render = function () {
         var _this = this;
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.state.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.props.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
             React.createElement("input", { id: this.htmlId, "aria-labelledby": this.htmlId + 'label', type: "time", step: this.props.allowSeconds ? 1 : undefined, className: "sd-input__input", value: this.props.value, required: this.props.required, disabled: this.props.disabled, onChange: function (event) {
                     _this.props.onChange(event.target.value);
                 } })));

package/react/components/TreeSelect.d.ts

@@ -11,7 +11,6 @@ interface IState<T> {
     buttonValue: any;
     buttonMouseEvent: boolean;
     loading: boolean;
-    invalid: boolean;
 }
 interface IPropsBase<T> {
     value?: Array<T>;
@@ -22,6 +21,7 @@ interface IPropsBase<T> {
     loading?: boolean;
     singleLevelSearch?: boolean;
     placeholder?: string;
+    searchPlaceholder?: string;
     invalid?: boolean;
     inlineLabel?: boolean;
     labelHidden?: boolean;
@@ -56,7 +56,11 @@ export declare class TreeSelect<T> extends React.Component<IProps<T>, IState<T>>
     private dropdownRef;
     private openDropdownRef;
     private htmlId;
+    private popperInstance;
     constructor(props: IProps<T>);
+    componentDidMount: () => void;
+    componentDidUpdate(prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void;
+    toggleMenu(): void;
     removeClick(i: number): void;
     handleMultiLevel(item: ITreeNode<T>): void;
     handleButton(item: ITreeNode<T>): void;
@@ -66,10 +70,11 @@ export declare class TreeSelect<T> extends React.Component<IProps<T>, IState<T>>
     backButton: () => false | undefined;
     backButtonValue: () => void;
     recursion(arr: Array<ITreeNode<T>>): void;
-    componentDidMount: () => void;
-    componentDidUpdate(prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void;
-    filteredItem(arr: Array<ITreeNode<T>>): JSX.Element[] | undefined;
+    filteredItem(arr: Array<ITreeNode<T>>): JSX.Element | JSX.Element[] | undefined;
     banchButton(): JSX.Element;
+    private debounceFn;
+    private ICancelFn;
+    handleDebounce(): void;
     render(): JSX.Element;
 }
 export {};