superdesk-ui-framework 3.0.0-beta.0 → 3.0.0

package/react/components/Dropdown.js

@@ -14,7 +14,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
     return result;
 };
@@ -24,16 +24,14 @@ var React = __importStar(require("react"));
 var ReactDOM = __importStar(require("react-dom"));
 var core_1 = require("@popperjs/core");
 var react_id_generator_1 = require("react-id-generator");
-exports.Dropdown = function (_a) {
-    var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align;
+var DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
+var Dropdown = function (_a) {
+    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 = react_id_generator_1.useId()[0];
-    var DROPDOWN_ID = "react-placeholder";
+    var menuID = (0, react_id_generator_1.useId)()[0];
     var ref = React.useRef(null);
-    var refSubMenu = React.useRef(null);
     var buttonRef = React.useRef(null);
-    var refButtonSubMenu = React.useRef(null);
     var headerElements = header === null || header === void 0 ? void 0 : header.map(function (el, index) {
         return each(el, index);
     });
@@ -44,11 +42,10 @@ exports.Dropdown = function (_a) {
         return each(el, index);
     });
     React.useEffect(function () {
-        var existingElement = document.getElementById(DROPDOWN_ID);
+        var existingElement = document.getElementById(DROPDOWN_ID_CONTAINER);
         if (!existingElement) {
             var el = document.createElement("div");
-            el.id = DROPDOWN_ID;
-            // style placeholder
+            el.id = DROPDOWN_ID_CONTAINER;
             el.style.position = 'absolute';
             el.style.top = '0';
             el.style.left = '0';
@@ -63,7 +60,6 @@ exports.Dropdown = function (_a) {
         }
         setChange(true);
     }, [open]);
-    // structure for append menu
     function createAppendMenu() {
         if (header && footer) {
             return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', id: menuID, role: 'menu', ref: ref },
@@ -85,7 +81,6 @@ exports.Dropdown = function (_a) {
             return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref }, dropdownElements));
         }
     }
-    // toggle menu
     function toggleDisplay() {
         if (!open) {
             var menuRef_1;
@@ -94,7 +89,7 @@ exports.Dropdown = function (_a) {
                 menuRef_1 = ref.current;
                 var toggleRef = buttonRef.current;
                 if (toggleRef && menuRef_1) {
-                    core_1.createPopper(toggleRef, menuRef_1, {
+                    (0, core_1.createPopper)(toggleRef, menuRef_1, {
                         placement: checkAlign() ? 'bottom-end' : 'bottom-start',
                     });
                 }
@@ -104,7 +99,7 @@ exports.Dropdown = function (_a) {
                     menuRef_1 = ref.current;
                     var toggleRef = buttonRef.current;
                     if (toggleRef && menuRef_1) {
-                        core_1.createPopper(toggleRef, menuRef_1, {
+                        (0, core_1.createPopper)(toggleRef, menuRef_1, {
                             placement: checkAlign() ? 'bottom-end' : 'bottom-start',
                             strategy: 'fixed',
                         });
@@ -134,15 +129,14 @@ exports.Dropdown = function (_a) {
         }
     }
     function addInPlaceholder() {
-        var placeholder = document.getElementById(DROPDOWN_ID);
+        var placeholder = document.getElementById(DROPDOWN_ID_CONTAINER);
         var menu = createAppendMenu();
         if (open) {
             return ReactDOM.render(menu, placeholder);
         }
         else {
-            var menuDOM = document.getElementById(menuID);
-            if (menuDOM) {
-                menuDOM.style.display = 'none';
+            if (placeholder) {
+                ReactDOM.unmountComponentAtNode(placeholder);
             }
         }
     }
@@ -152,20 +146,7 @@ exports.Dropdown = function (_a) {
             item['items'].forEach(function (el, key) {
                 submenuItems_1.push(each(el, key));
             });
-            return (React.createElement("li", { key: index },
-                React.createElement("div", { className: 'dropdown' },
-                    React.createElement("button", { ref: refButtonSubMenu, className: 'dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, onMouseOver: function () {
-                            var subMenuRef = refSubMenu.current;
-                            var subToggleRef = refButtonSubMenu.current;
-                            if (subMenuRef && subToggleRef) {
-                                core_1.createPopper(subToggleRef, subMenuRef, {
-                                    placement: 'right-start',
-                                });
-                            }
-                        }, onClick: item['onSelect'] },
-                        item['icon'] ? React.createElement("i", { className: 'icon-' + item['icon'] }) : null,
-                        item['label']),
-                    React.createElement("ul", { ref: refSubMenu, role: 'menu', className: 'dropdown__menu' }, submenuItems_1))));
+            return (React.createElement(DropdownItemWithSubmenu, { key: index, index: index, item: item, menuID: menuID, subMenuItems: submenuItems_1, onChange: onChange }));
         }
         else if (item['type'] === 'group') {
             var groupItems_1 = [];
@@ -181,7 +162,7 @@ exports.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'], 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' : '') },
@@ -221,10 +202,57 @@ exports.Dropdown = function (_a) {
             }
         })()));
 };
+exports.Dropdown = Dropdown;
 var DropdownItem = function (_a) {
-    var label = _a.label, icon = _a.icon, onSelect = _a.onSelect;
-    return (React.createElement("li", { role: 'none' },
-        React.createElement("button", { tabIndex: 0, role: 'menuitem', onClick: 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: function () {
+                setTimeout(function () {
+                    onSelect();
+                });
+                if (onChange) {
+                    onChange();
+                }
+            } },
             React.createElement("i", { className: icon ? ('icon-' + icon) : '' }),
             label)));
 };
+var DropdownItemWithSubmenu = function (_a) {
+    var index = _a.index, item = _a.item, menuID = _a.menuID, subMenuItems = _a.subMenuItems, onChange = _a.onChange;
+    var _b = React.useState(undefined), open = _b[0], setOpen = _b[1];
+    var refButtonSubMenu = React.useRef(null);
+    var refSubMenu = React.useRef(null);
+    var placeholder = document.getElementById(menuID);
+    React.useEffect(function () {
+        var subMenuRef = refSubMenu.current;
+        var subToggleRef = refButtonSubMenu.current;
+        if (open === true) {
+            placeholder === null || placeholder === void 0 ? void 0 : placeholder.appendChild(subMenuRef);
+            subMenuRef.style.display = 'block';
+        }
+        else if (open === false) {
+            placeholder === null || placeholder === void 0 ? void 0 : placeholder.removeChild(subMenuRef);
+            subMenuRef.style.display = 'none';
+        }
+        if (subMenuRef && subToggleRef) {
+            (0, core_1.createPopper)(subToggleRef, subMenuRef, {
+                placement: 'right-start',
+            });
+        }
+    }, [open]);
+    return (React.createElement("li", { key: index, ref: refButtonSubMenu },
+        React.createElement("div", { className: 'dropdown', onMouseLeave: function () { return setOpen(false); } },
+            React.createElement("button", { className: 'dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, onClick: function () {
+                    if (item.onSelect) {
+                        setTimeout(function () {
+                            item.onSelect();
+                        });
+                    }
+                    if (onChange) {
+                        onChange();
+                    }
+                }, onMouseOver: function () { return setOpen(true); } },
+                item['icon'] ? React.createElement("i", { className: 'icon-' + item['icon'] }) : null,
+                item['label']),
+            React.createElement("ul", { role: 'menu', ref: refSubMenu, style: { display: 'none' }, className: 'dropdown__menu' }, subMenuItems))));
+};

package/react/components/DropdownFirst.js

@@ -14,7 +14,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
     return result;
 };
@@ -25,7 +25,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownFooter = exports.DropdownBody = exports.DropdownHeader = exports.DropdownLabel = exports.DropdownDivider = exports.DropdownItem = exports.DropdownFirst = void 0;
 var React = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
-exports.DropdownFirst = function (_a) {
+var DropdownFirst = function (_a) {
     var _b, _c;
     var name = _a.name, align = _a.align, side = _a.side, level = _a.level, icon = _a.icon, headerFooter = _a.headerFooter, navDropdown = _a.navDropdown, children = _a.children;
     var _d = React.useState(false), open = _d[0], setOpen = _d[1];
@@ -60,10 +60,10 @@ exports.DropdownFirst = function (_a) {
             clearTimeout(inDebounce);
         };
     }, [open]);
-    var classes = classnames_1.default('dropdown', (_b = {},
+    var classes = (0, classnames_1.default)('dropdown', (_b = {},
         _b['open'] = open,
         _b['dropdown--align-right'] = align === 'right',
-        _b["dropdown--drop" + side] = side,
+        _b["dropdown--drop".concat(side)] = side,
         _b['dropdown--dropup'] = height,
         _b));
     function isOpen() {
@@ -112,7 +112,7 @@ exports.DropdownFirst = function (_a) {
     }
     else {
         if (level) {
-            var classesMenu = classnames_1.default('dropdown__menu', (_c = {},
+            var classesMenu = (0, classnames_1.default)('dropdown__menu', (_c = {},
                 _c['dropdown__menu--submenu-left'] = align === 'left',
                 _c));
             return (React.createElement("li", null,
@@ -133,7 +133,8 @@ exports.DropdownFirst = function (_a) {
         }
     }
 };
-exports.DropdownItem = function (_a) {
+exports.DropdownFirst = DropdownFirst;
+var DropdownItem = function (_a) {
     var text = _a.text, icon = _a.icon, noLink = _a.noLink, onSelect = _a.onSelect;
     if (noLink) {
         return React.createElement("li", { className: 'dropdown__menu-item--no-link' }, text);
@@ -145,32 +146,38 @@ exports.DropdownItem = function (_a) {
                 text)));
     }
 };
-exports.DropdownDivider = function (_a) {
+exports.DropdownItem = DropdownItem;
+var DropdownDivider = function (_a) {
     return (React.createElement("li", { className: "dropdown__menu-divider" }));
 };
-exports.DropdownLabel = function (_a) {
+exports.DropdownDivider = DropdownDivider;
+var DropdownLabel = function (_a) {
     var text = _a.text;
     return (React.createElement("li", null,
         React.createElement("div", { className: "dropdown__menu-label" }, text)));
 };
-exports.DropdownHeader = function (_a) {
+exports.DropdownLabel = DropdownLabel;
+var DropdownHeader = function (_a) {
     var title = _a.title, children = _a.children;
     return (React.createElement("ul", { className: 'dropdown__menu-header' },
         React.createElement(exports.DropdownLabel, { text: title }),
         children));
 };
-exports.DropdownBody = function (_a) {
+exports.DropdownHeader = DropdownHeader;
+var DropdownBody = function (_a) {
     var title = _a.title, children = _a.children;
     return (React.createElement("ul", { className: 'dropdown__menu-body' },
         React.createElement(exports.DropdownLabel, { text: title }),
         children));
 };
-exports.DropdownFooter = function (_a) {
+exports.DropdownBody = DropdownBody;
+var DropdownFooter = function (_a) {
     var title = _a.title, children = _a.children;
     return (React.createElement("ul", { className: 'dropdown__menu-footer dropdown__menu-footer--has-list' },
         React.createElement(exports.DropdownLabel, { text: title }),
         children));
 };
+exports.DropdownFooter = DropdownFooter;
 exports.DropdownFirst.Item = exports.DropdownItem;
 exports.DropdownFirst.Divider = exports.DropdownDivider;
 exports.DropdownFirst.Label = exports.DropdownLabel;

package/react/components/DurationInput.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+interface IProps {
+    hours?: number;
+    minutes?: number;
+    seconds?: number;
+    disabled?: boolean;
+    inlineLabel?: boolean;
+    required?: boolean;
+    fullWidth?: boolean;
+    invalid?: boolean;
+    labelHidden?: boolean;
+    tabindex?: number;
+    label?: string;
+    info?: string;
+    error?: string;
+    onChange(e: number): void;
+}
+interface IState {
+    hours?: any;
+    minutes?: any;
+    seconds?: any;
+    blink?: string;
+}
+export declare class DurationInput extends React.PureComponent<IProps, IState> {
+    hourRef: React.RefObject<HTMLInputElement>;
+    minuteRef: React.RefObject<HTMLInputElement>;
+    secondRef: React.RefObject<HTMLInputElement>;
+    private htmlId;
+    constructor(props: IProps);
+    stateUpdate(state: string, parametar1?: number, parametar2?: number, parametar3?: number): string | number;
+    componentDidUpdate(prevProps: any, prevState: IState): void;
+    valueUpdate(): void;
+    handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void;
+    handleKeyValue(event: React.KeyboardEvent<HTMLInputElement>, state: 'hours' | 'minutes' | 'seconds'): void;
+    zeroPad(value: number | string): string | number;
+    handleChange(event: React.ChangeEvent<HTMLInputElement>, state: 'hours' | 'minutes' | 'seconds'): void;
+    handleFocus(ref: HTMLInputElement | null, state: 'hours' | 'minutes' | 'seconds'): void;
+    handleFocusOnKeyUp(event: React.KeyboardEvent<HTMLInputElement>, ref: HTMLInputElement | null): void;
+    render(): JSX.Element;
+}
+export declare function getDurationString(seconds: number, minSections?: 1 | 2 | 3): string;
+export {};