superdesk-ui-framework 3.1.0 → 3.1.2

package/react/components/TreeMenu.js

@@ -0,0 +1,340 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+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.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeMenu = void 0;
+var React = __importStar(require("react"));
+var Icon_1 = require("./Icon");
+var core_1 = require("@popperjs/core");
+var TreeSelectItem_1 = require("./TreeSelect/TreeSelectItem");
+var KeyboardNavigation_1 = require("./TreeSelect/KeyboardNavigation");
+var WithPortal_1 = require("./WithPortal");
+var helpers_1 = require("../helpers");
+function nodeHasChildren(item) {
+    return item[(0, helpers_1.nameof)('children')] != null;
+}
+function nodeCanBeSelected(item) {
+    return item[(0, helpers_1.nameof)('onSelect')] != null;
+}
+function onSelect(item) {
+    if (nodeCanBeSelected(item)) {
+        return item.onSelect;
+    }
+    return undefined;
+}
+function disabledItem(item) {
+    if (nodeCanBeSelected(item)) {
+        return item.disabled;
+    }
+    return undefined;
+}
+var TreeMenu = /** @class */ (function (_super) {
+    __extends(TreeMenu, _super);
+    function TreeMenu(props) {
+        var _this = _super.call(this, props) || this;
+        _this.inputFocus = function () {
+            var _a;
+            (_a = _this.inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        _this.listNavigation = function () {
+            var element = document.querySelector('.suggestion-item--btn:not([disabled])');
+            element === null || element === void 0 ? void 0 : element.focus();
+        };
+        _this.onMouseDown = function (event) {
+            var _a, _b;
+            if ((((_a = _this.dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) !== true)
+                && (((_b = _this.treeMenuRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)) !== true)
+                && _this.state.openDropdown) {
+                _this.setState({
+                    openDropdown: false,
+                    searchFieldValue: '',
+                });
+            }
+        };
+        _this.onKeyDown = function (e) {
+            if (_this.state.openDropdown && _this.ref.current) {
+                (0, KeyboardNavigation_1.keyboardNavigation)(e, _this.ref.current, _this.inputFocus);
+                if (e.key === 'Backspace' && _this.state.activeTree.length > 0) {
+                    _this.backButton();
+                    var lastElement = _this.state.buttonTarget.pop();
+                    if (lastElement != null) {
+                        var className = (0, TreeSelectItem_1.getPrefixedItemId)(lastElement);
+                        var element = document.getElementsByClassName(className)[0];
+                        element === null || element === void 0 ? void 0 : element.focus();
+                    }
+                }
+            }
+        };
+        _this.onPressEsc = function (event) {
+            if (event.key === 'Escape' && _this.state.openDropdown) {
+                _this.setState({
+                    openDropdown: false,
+                    searchFieldValue: '',
+                });
+            }
+        };
+        _this.componentDidMount = function () {
+            _this.recursion(_this.state.options);
+            document.addEventListener("mousedown", _this.onMouseDown);
+            document.addEventListener("keydown", _this.onKeyDown);
+            document.addEventListener("keydown", _this.onPressEsc);
+        };
+        _this.state = {
+            options: _this.props.getOptions ? _this.props.getOptions() : [],
+            firstBranchOptions: _this.props.getOptions ? _this.props.getOptions() : [],
+            searchFieldValue: '',
+            activeTree: [],
+            buttonTree: [],
+            buttonTarget: [],
+            filterArr: [],
+            buttonValue: null,
+            openDropdown: false,
+        };
+        _this.handleMultiLevel = _this.handleMultiLevel.bind(_this);
+        _this.backButton = _this.backButton.bind(_this);
+        _this.handleButton = _this.handleButton.bind(_this);
+        _this.handleTree = _this.handleTree.bind(_this);
+        _this.toggleMenu = _this.toggleMenu.bind(_this);
+        _this.toggle = _this.toggle.bind(_this);
+        _this.onMouseDown = _this.onMouseDown.bind(_this);
+        _this.onKeyDown = _this.onKeyDown.bind(_this);
+        _this.onPressEsc = _this.onPressEsc.bind(_this);
+        _this.dropdownRef = React.createRef();
+        _this.ref = React.createRef();
+        _this.openDropdownRef = React.createRef();
+        _this.treeMenuRef = React.createRef();
+        _this.inputRef = React.createRef();
+        _this.popperInstance = null;
+        return _this;
+    }
+    TreeMenu.prototype.componentWillUnmount = function () {
+        document.removeEventListener("mousedown", this.onMouseDown);
+        document.removeEventListener("keydown", this.onKeyDown);
+        document.addEventListener("keydown", this.onPressEsc);
+    };
+    TreeMenu.prototype.componentDidUpdate = function (_prevProps, prevState) {
+        var _a;
+        if (prevState.openDropdown !== this.state.openDropdown) {
+            this.toggleMenu();
+        }
+        if ((prevState.activeTree !== this.state.activeTree)
+            || (prevState.filterArr !== this.state.filterArr)
+            || (prevState.options !== this.state.options)) {
+            (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
+        }
+    };
+    TreeMenu.prototype.toggleMenu = function () {
+        var _this = this;
+        var _a, _b;
+        if (this.state.openDropdown) {
+            if (this.openDropdownRef.current && this.dropdownRef.current) {
+                this.popperInstance = (0, core_1.createPopper)(this.openDropdownRef.current, this.dropdownRef.current, {
+                    placement: 'bottom-start',
+                });
+            }
+            (_a = this.inputRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', function (e) {
+                if (e.key === 'ArrowDown') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setTimeout(function () {
+                        _this.listNavigation();
+                    });
+                }
+            });
+            if (this.inputRef.current) {
+                this.inputFocus();
+            }
+            else {
+                var element = document.querySelector('.suggestion-item--btn:not([disabled])');
+                element === null || element === void 0 ? void 0 : element.focus();
+            }
+        }
+        else {
+            (_b = this.openDropdownRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    };
+    TreeMenu.prototype.toggle = function (event) {
+        event.stopPropagation();
+        this.setState({
+            openDropdown: !this.state.openDropdown,
+        });
+    };
+    TreeMenu.prototype.handleMultiLevel = function (item) {
+        if (nodeHasChildren(item)) {
+            this.setState({
+                activeTree: __spreadArray(__spreadArray([], this.state.activeTree, true), [this.state.options], false),
+                options: item.children,
+            });
+        }
+    };
+    TreeMenu.prototype.handleButton = function (item) {
+        var buttonTreeNext = this.state.buttonTree;
+        if (this.state.buttonValue != null) {
+            buttonTreeNext = buttonTreeNext.concat(this.state.buttonValue);
+        }
+        this.setState({
+            buttonTree: buttonTreeNext,
+            buttonValue: item,
+        });
+    };
+    TreeMenu.prototype.handleTree = function (_event, option) {
+        if (nodeHasChildren(option)) {
+            this.handleButton(option);
+            this.handleMultiLevel(option);
+        }
+        else {
+            this.setState({
+                openDropdown: false,
+                options: this.state.firstBranchOptions,
+                activeTree: [],
+                buttonTarget: [],
+            });
+        }
+        setTimeout(function () {
+            var element = document.querySelectorAll('.suggestion-item--btn:not([disabled])')[0];
+            element === null || element === void 0 ? void 0 : element.focus();
+        });
+    };
+    TreeMenu.prototype.backButton = function () {
+        var items = this.state.activeTree.pop();
+        if (items != null) {
+            this.setState({
+                options: items,
+            });
+        }
+        var item = this.state.buttonTree.pop();
+        if (item != null) {
+            this.setState({
+                buttonValue: item,
+            });
+        }
+    };
+    TreeMenu.prototype.recursion = function (arr) {
+        var _this = this;
+        arr.map(function (item) {
+            _this.state.filterArr.push(item);
+            if (nodeHasChildren(item)) {
+                _this.recursion(item.children);
+            }
+        });
+    };
+    TreeMenu.prototype.filteredItem = function (arr) {
+        var _this = this;
+        var filteredArr = arr.filter(function (item) {
+            if (_this.state.searchFieldValue) {
+                if (_this.props.getLabel(item.value)
+                    .toLowerCase()
+                    .includes(_this.state.searchFieldValue.toLowerCase())) {
+                    return item.value;
+                }
+                else {
+                    return;
+                }
+            }
+            else {
+                return item.value;
+            }
+        });
+        if (filteredArr.length === 0) {
+            return React.createElement("li", { className: "suggestion-item--nothing-found" }, "Nothing found");
+        }
+        else {
+            return filteredArr.map(function (option, i) { return (React.createElement(TreeSelectItem_1.TreeSelectItem, { key: i, option: option, handleTree: _this.handleTree, disabledItem: disabledItem(option), getBorderColor: _this.props.getBorderColor, getBackgroundColor: _this.props.getBackgroundColor, getId: _this.props.getId, optionTemplate: _this.props.optionTemplate, getLabel: _this.props.getLabel, onClick: function () {
+                    if (onSelect != null) {
+                        onSelect(option);
+                        _this.setState({
+                            searchFieldValue: '',
+                        });
+                    }
+                } })); });
+        }
+    };
+    TreeMenu.prototype.render = function () {
+        var _this = this;
+        return (React.createElement("div", { ref: this.treeMenuRef },
+            React.createElement("div", { ref: this.openDropdownRef }, this.props.children(this.toggle)),
+            React.createElement(WithPortal_1.WithPortal, { active: this.state.openDropdown, "data-test-id": "tree-menu-popover" },
+                React.createElement("div", { ref: this.dropdownRef, className: "autocomplete autocomplete--multi-select autocomplete--fixed-width", style: {
+                        zIndex: this.props.zIndex,
+                    } },
+                    React.createElement("div", { className: 'autocomplete__header' },
+                        React.createElement("div", { className: "autocomplete__icon", onClick: function () {
+                                _this.backButton();
+                            } },
+                            React.createElement(Icon_1.Icon, { name: "search", className: "search" })),
+                        React.createElement("div", { className: 'autocomplete__filter' },
+                            React.createElement("input", { className: "autocomplete__input", type: "text", placeholder: this.props.searchPlaceholder, ref: this.inputRef, value: this.state.searchFieldValue, onChange: function (event) {
+                                    var _a;
+                                    _this.setState({ searchFieldValue: event.target.value });
+                                    (_a = _this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
+                                } }))),
+                    (this.state.activeTree.length > 0 && this.state.buttonValue != null)
+                        && React.createElement("div", { className: 'autocomplete__category-header' },
+                            React.createElement("div", { className: "autocomplete__icon", onClick: function () {
+                                    _this.backButton();
+                                } },
+                                React.createElement(Icon_1.Icon, { name: "arrow-left", className: "arrow-left" })),
+                            React.createElement("div", { className: 'autocomplete__filter' },
+                                React.createElement("button", { className: 'autocomplete__category-title' }, this.props.optionTemplate
+                                    ? this.props.optionTemplate(this.state.buttonValue.value)
+                                    : this.props.getLabel(this.state.buttonValue.value)))),
+                    this.state.searchFieldValue === '' ?
+                        this.props.getOptions ?
+                            React.createElement("ul", { ref: this.ref, className: "suggestion-list suggestion-list--multi-select" }, this.state.options.map(function (option, i) { return (React.createElement(TreeSelectItem_1.TreeSelectItem, { key: i, option: option, handleTree: _this.handleTree, onClick: onSelect(option), disabledItem: disabledItem(option), getBorderColor: _this.props.getBorderColor, getBackgroundColor: _this.props.getBackgroundColor, getId: _this.props.getId, optionTemplate: _this.props.optionTemplate, getLabel: _this.props.getLabel, onKeyDown: function () { return _this.setState({
+                                    buttonTarget: __spreadArray(__spreadArray([], _this.state.buttonTarget, true), [
+                                        _this.props.getId(option.value),
+                                    ], false),
+                                }); } })); }))
+                            : null
+                        : React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch
+                            ? this.state.options
+                            : this.state.filterArr))))));
+    };
+    return TreeMenu;
+}(React.Component));
+exports.TreeMenu = TreeMenu;

package/react/helpers.d.ts

@@ -1 +1,2 @@
 export declare function assertNever(x: never): never;
+export declare function nameof<T>(name: keyof T): string;

package/react/helpers.js

@@ -1,7 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.assertNever = void 0;
+exports.nameof = exports.assertNever = void 0;
 function assertNever(x) {
     throw new Error('Unexpected object: ' + x);
 }
 exports.assertNever = assertNever;
+function nameof(name) {
+    return name.toString();
+}
+exports.nameof = nameof;

package/react/index.d.ts

@@ -85,6 +85,7 @@ export { Time } from './components/Text/Time';
 export { Heading } from './components/Text/Heading';
 export { BottomNav } from './components/Navigation/BottomNav';
 export { TreeSelect } from './components/TreeSelect/TreeSelect';
+export { TreeMenu } from './components/TreeMenu';
 export { TableList, TableListItem } from './components/Lists/TableList';
 export { ContentListItem } from './components/Lists/ContentList';
 export { MultiSelect } from './components/MultiSelect';

package/react/index.js

@@ -18,7 +18,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContentDivider = exports.Divider = exports.Icon = exports.Prop = exports.PropsList = exports.StrechBar = exports.SlidingToolbar = exports.SubNavDivider = exports.SubNav = exports.LeftMenu = exports.TabList = exports.Tab = exports.NavButton = exports.CheckButtonGroup = exports.CheckGroup = exports.CheckboxButton = exports.RadioButtonGroup = exports.Checkbox = exports.RadioGroup = exports.Loader = exports.ButtonGroup = exports.SwitchGroup = exports.Switch = exports.FormLabel = exports.TimePicker = exports.DatePickerISO = exports.DatePicker = exports.getDurationString = exports.DurationInput = exports.Tooltip = exports.IconLabel = exports.IconButton = exports.Rotate = exports.AvatarPlaceholder = exports.Avatar = exports.AvatarGroup = exports.AvatarContentImage = exports.AvatarContentText = exports.AvatarWrapper = exports.Alert = exports.Badge = exports.Label = exports.Popover = exports.WithPagination = exports.SelectWithTemplate = exports.Option = exports.Select = exports.Input = exports.Button = exports.HelloWorld = void 0;
 exports.Heading = exports.Time = exports.Text = exports.LoadingOverlay = exports.Spinner = exports.ListItemLoader = exports.Skeleton = exports.IllustrationButton = exports.SvgIconIllustration = exports.WithSizeObserver = exports.SearchBar = exports.CreateButton = exports.DropZone = exports.ThemeSelector = exports.IconPicker = exports.SelectGrid = exports.ToggleBox = exports.Menu = exports.toasted = exports.GridItemCheckWrapper = exports.GridItemTopActions = exports.GridItemFooterActions = exports.GridItemFooterBlock = exports.GridItemSlug = exports.GridItemText = exports.GridItemTitle = exports.GridItemTime = exports.GridItemContentBlock = exports.GridItemFooter = exports.GridItemMedia = exports.GridItemContent = exports.GridItem = exports.GridList = exports.Modal = exports.Carousel = exports.DonutChart = exports.Autocomplete = exports.EmptyState = exports.Tabs = exports.TabContent = exports.TabPanel = exports.TabLabel = exports.TagInput = exports.Tag = exports.Dropdown = exports.DropdownDivider = exports.DropdownLabel = exports.DropdownItem = exports.DropdownFirst = exports.HeadingText = void 0;
-exports.DragHandle = exports.DragHandleDots = exports.ResizeObserverComponent = exports.SpacerBlock = exports.Spacer = exports.WithPopover = exports.ResizablePanels = exports.MultiSelect = exports.ContentListItem = exports.TableListItem = exports.TableList = exports.TreeSelect = exports.BottomNav = void 0;
+exports.DragHandle = exports.DragHandleDots = exports.ResizeObserverComponent = exports.SpacerBlock = exports.Spacer = exports.WithPopover = exports.ResizablePanels = exports.MultiSelect = exports.ContentListItem = exports.TableListItem = exports.TableList = exports.TreeMenu = exports.TreeSelect = exports.BottomNav = void 0;
 var HelloWorld_1 = require("./components/HelloWorld");
 Object.defineProperty(exports, "HelloWorld", { enumerable: true, get: function () { return HelloWorld_1.HelloWorld; } });
 var Button_1 = require("./components/Button");
@@ -207,6 +207,8 @@ var BottomNav_1 = require("./components/Navigation/BottomNav");
 Object.defineProperty(exports, "BottomNav", { enumerable: true, get: function () { return BottomNav_1.BottomNav; } });
 var TreeSelect_1 = require("./components/TreeSelect/TreeSelect");
 Object.defineProperty(exports, "TreeSelect", { enumerable: true, get: function () { return TreeSelect_1.TreeSelect; } });
+var TreeMenu_1 = require("./components/TreeMenu");
+Object.defineProperty(exports, "TreeMenu", { enumerable: true, get: function () { return TreeMenu_1.TreeMenu; } });
 var TableList_1 = require("./components/Lists/TableList");
 Object.defineProperty(exports, "TableList", { enumerable: true, get: function () { return TableList_1.TableList; } });
 Object.defineProperty(exports, "TableListItem", { enumerable: true, get: function () { return TableList_1.TableListItem; } });