superdesk-ui-framework 3.1.0 → 3.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app-typescript/components/Menu.tsx +0 -1
- package/app-typescript/components/TreeMenu.tsx +60 -69
- package/app-typescript/helpers.tsx +4 -0
- package/app-typescript/index.ts +1 -0
- package/dist/examples.bundle.js +1717 -1720
- package/dist/superdesk-ui.bundle.js +1296 -944
- package/dist/vendor.bundle.js +14 -14
- package/package.json +1 -1
- package/react/components/Menu.js +1 -1
- package/react/components/TreeMenu.d.ts +62 -0
- package/react/components/TreeMenu.js +340 -0
- package/react/helpers.d.ts +1 -0
- package/react/helpers.js +5 -1
- package/react/index.d.ts +1 -0
- package/react/index.js +3 -1
package/dist/vendor.bundle.js
CHANGED
@@ -70,7 +70,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|
70
70
|
/******/ __webpack_require__.p = "";
|
71
71
|
/******/
|
72
72
|
/******/ // Load entry module and return exports
|
73
|
-
/******/ return __webpack_require__(__webpack_require__.s =
|
73
|
+
/******/ return __webpack_require__(__webpack_require__.s = 576);
|
74
74
|
/******/ })
|
75
75
|
/************************************************************************/
|
76
76
|
/******/ ({
|
@@ -28246,7 +28246,7 @@ module.exports = function(module) {
|
|
28246
28246
|
|
28247
28247
|
/***/ }),
|
28248
28248
|
|
28249
|
-
/***/
|
28249
|
+
/***/ 576:
|
28250
28250
|
/***/ (function(module, exports, __webpack_require__) {
|
28251
28251
|
|
28252
28252
|
"use strict";
|
@@ -28256,11 +28256,11 @@ __webpack_require__(21);
|
|
28256
28256
|
|
28257
28257
|
__webpack_require__(44);
|
28258
28258
|
|
28259
|
-
__webpack_require__(
|
28259
|
+
__webpack_require__(577);
|
28260
28260
|
|
28261
|
-
__webpack_require__(
|
28261
|
+
__webpack_require__(579);
|
28262
28262
|
|
28263
|
-
__webpack_require__(
|
28263
|
+
__webpack_require__(581);
|
28264
28264
|
|
28265
28265
|
__webpack_require__(0);
|
28266
28266
|
|
@@ -28268,7 +28268,7 @@ __webpack_require__(8);
|
|
28268
28268
|
|
28269
28269
|
/***/ }),
|
28270
28270
|
|
28271
|
-
/***/
|
28271
|
+
/***/ 577:
|
28272
28272
|
/***/ (function(module, exports, __webpack_require__) {
|
28273
28273
|
|
28274
28274
|
var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
|
@@ -28292,7 +28292,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
|
|
28292
28292
|
if ( true ) {
|
28293
28293
|
|
28294
28294
|
// AMD. Register as an anonymous module.
|
28295
|
-
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(44), __webpack_require__(
|
28295
|
+
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(44), __webpack_require__(578) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
|
28296
28296
|
__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
|
28297
28297
|
(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
|
28298
28298
|
__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
|
@@ -29030,7 +29030,7 @@ return $.widget;
|
|
29030
29030
|
|
29031
29031
|
/***/ }),
|
29032
29032
|
|
29033
|
-
/***/
|
29033
|
+
/***/ 578:
|
29034
29034
|
/***/ (function(module, exports, __webpack_require__) {
|
29035
29035
|
|
29036
29036
|
var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;( function( factory ) {
|
@@ -29060,16 +29060,16 @@ return $.ui.version = "1.13.0";
|
|
29060
29060
|
|
29061
29061
|
/***/ }),
|
29062
29062
|
|
29063
|
-
/***/
|
29063
|
+
/***/ 579:
|
29064
29064
|
/***/ (function(module, exports, __webpack_require__) {
|
29065
29065
|
|
29066
|
-
__webpack_require__(
|
29066
|
+
__webpack_require__(580);
|
29067
29067
|
module.exports = angular;
|
29068
29068
|
|
29069
29069
|
|
29070
29070
|
/***/ }),
|
29071
29071
|
|
29072
|
-
/***/
|
29072
|
+
/***/ 580:
|
29073
29073
|
/***/ (function(module, exports, __webpack_require__) {
|
29074
29074
|
|
29075
29075
|
/* WEBPACK VAR INJECTION */(function(__webpack_provided_window_dot_jQuery) {/**
|
@@ -65676,16 +65676,16 @@ $provide.value("$locale", {
|
|
65676
65676
|
|
65677
65677
|
/***/ }),
|
65678
65678
|
|
65679
|
-
/***/
|
65679
|
+
/***/ 581:
|
65680
65680
|
/***/ (function(module, exports, __webpack_require__) {
|
65681
65681
|
|
65682
|
-
__webpack_require__(
|
65682
|
+
__webpack_require__(582);
|
65683
65683
|
module.exports = 'ngAnimate';
|
65684
65684
|
|
65685
65685
|
|
65686
65686
|
/***/ }),
|
65687
65687
|
|
65688
|
-
/***/
|
65688
|
+
/***/ 582:
|
65689
65689
|
/***/ (function(module, exports) {
|
65690
65690
|
|
65691
65691
|
/**
|
package/package.json
CHANGED
package/react/components/Menu.js
CHANGED
@@ -119,7 +119,7 @@ var Menu = /** @class */ (function (_super) {
|
|
119
119
|
}
|
120
120
|
}
|
121
121
|
} },
|
122
|
-
React.createElement(tieredmenu_1.TieredMenu, {
|
122
|
+
React.createElement(tieredmenu_1.TieredMenu, { popup: true, model: this.toPrimeReactInterface(this.props.items), ref: function (el) { return _this.menu = el; }, appendTo: document.body, onShow: function () {
|
123
123
|
_this.focusedBefore = document.activeElement;
|
124
124
|
var firstMenuItem = document.querySelectorAll('.p-tieredmenu [role="menuitem"]')[0];
|
125
125
|
if (firstMenuItem instanceof HTMLElement) {
|
@@ -0,0 +1,62 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
interface IState<T> {
|
3
|
+
options: Array<ITreeMenuNode<T>>;
|
4
|
+
openDropdown: boolean;
|
5
|
+
activeTree: Array<Array<ITreeMenuNode<T>>>;
|
6
|
+
buttonTree: Array<ITreeMenuNode<T>>;
|
7
|
+
buttonValue: ITreeMenuNode<T> | null;
|
8
|
+
filterArr: Array<ITreeMenuNode<T>>;
|
9
|
+
searchFieldValue: string;
|
10
|
+
firstBranchOptions: Array<ITreeMenuNode<T>>;
|
11
|
+
buttonTarget: Array<string>;
|
12
|
+
}
|
13
|
+
interface IProps<T> {
|
14
|
+
zIndex?: number;
|
15
|
+
searchPlaceholder?: string;
|
16
|
+
singleLevelSearch?: boolean;
|
17
|
+
'data-test-id'?: string;
|
18
|
+
getOptions?(): Array<ITreeMenuNode<T>>;
|
19
|
+
getLabel(item: T): string;
|
20
|
+
getId(item: T): string;
|
21
|
+
getBackgroundColor?(item: T): string;
|
22
|
+
getBorderColor?(item: T): string;
|
23
|
+
optionTemplate?(item: T): React.ComponentType<T> | JSX.Element;
|
24
|
+
children: (toggle: (event: React.SyntheticEvent) => void) => JSX.Element;
|
25
|
+
}
|
26
|
+
interface IParent<T> {
|
27
|
+
value: T;
|
28
|
+
children: Array<ITreeMenuNode<T>>;
|
29
|
+
}
|
30
|
+
interface IChildren<T> {
|
31
|
+
value: T;
|
32
|
+
disabled?: boolean;
|
33
|
+
onSelect(): void;
|
34
|
+
}
|
35
|
+
export type ITreeMenuNode<T> = IParent<T> | IChildren<T>;
|
36
|
+
export declare class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
|
37
|
+
private dropdownRef;
|
38
|
+
private ref;
|
39
|
+
private openDropdownRef;
|
40
|
+
private treeMenuRef;
|
41
|
+
private inputRef;
|
42
|
+
private popperInstance;
|
43
|
+
constructor(props: IProps<T>);
|
44
|
+
inputFocus: () => void;
|
45
|
+
listNavigation: () => void;
|
46
|
+
onMouseDown: (event: MouseEvent) => void;
|
47
|
+
onKeyDown: (e: KeyboardEvent) => void;
|
48
|
+
onPressEsc: (event: KeyboardEvent) => void;
|
49
|
+
componentDidMount: () => void;
|
50
|
+
componentWillUnmount(): void;
|
51
|
+
componentDidUpdate(_prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void;
|
52
|
+
toggleMenu(): void;
|
53
|
+
toggle(event: React.SyntheticEvent): void;
|
54
|
+
handleMultiLevel(item: ITreeMenuNode<T>): void;
|
55
|
+
handleButton(item: ITreeMenuNode<T>): void;
|
56
|
+
handleTree(_event: React.MouseEvent<HTMLLIElement, MouseEvent>, option: ITreeMenuNode<T>): void;
|
57
|
+
backButton(): void;
|
58
|
+
recursion(arr: Array<ITreeMenuNode<T>>): void;
|
59
|
+
filteredItem(arr: Array<ITreeMenuNode<T>>): JSX.Element | JSX.Element[];
|
60
|
+
render(): JSX.Element;
|
61
|
+
}
|
62
|
+
export {};
|
@@ -0,0 +1,340 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __extends = (this && this.__extends) || (function () {
|
3
|
+
var extendStatics = function (d, b) {
|
4
|
+
extendStatics = Object.setPrototypeOf ||
|
5
|
+
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
6
|
+
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
7
|
+
return extendStatics(d, b);
|
8
|
+
};
|
9
|
+
return function (d, b) {
|
10
|
+
if (typeof b !== "function" && b !== null)
|
11
|
+
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
12
|
+
extendStatics(d, b);
|
13
|
+
function __() { this.constructor = d; }
|
14
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
15
|
+
};
|
16
|
+
})();
|
17
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
18
|
+
if (k2 === undefined) k2 = k;
|
19
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
20
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
21
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
22
|
+
}
|
23
|
+
Object.defineProperty(o, k2, desc);
|
24
|
+
}) : (function(o, m, k, k2) {
|
25
|
+
if (k2 === undefined) k2 = k;
|
26
|
+
o[k2] = m[k];
|
27
|
+
}));
|
28
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
29
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
30
|
+
}) : function(o, v) {
|
31
|
+
o["default"] = v;
|
32
|
+
});
|
33
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
34
|
+
if (mod && mod.__esModule) return mod;
|
35
|
+
var result = {};
|
36
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
37
|
+
__setModuleDefault(result, mod);
|
38
|
+
return result;
|
39
|
+
};
|
40
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
41
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
42
|
+
if (ar || !(i in from)) {
|
43
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
44
|
+
ar[i] = from[i];
|
45
|
+
}
|
46
|
+
}
|
47
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
48
|
+
};
|
49
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
50
|
+
exports.TreeMenu = void 0;
|
51
|
+
var React = __importStar(require("react"));
|
52
|
+
var Icon_1 = require("./Icon");
|
53
|
+
var core_1 = require("@popperjs/core");
|
54
|
+
var TreeSelectItem_1 = require("./TreeSelect/TreeSelectItem");
|
55
|
+
var KeyboardNavigation_1 = require("./TreeSelect/KeyboardNavigation");
|
56
|
+
var WithPortal_1 = require("./WithPortal");
|
57
|
+
var helpers_1 = require("../helpers");
|
58
|
+
function nodeHasChildren(item) {
|
59
|
+
return item[(0, helpers_1.nameof)('children')] != null;
|
60
|
+
}
|
61
|
+
function nodeCanBeSelected(item) {
|
62
|
+
return item[(0, helpers_1.nameof)('onSelect')] != null;
|
63
|
+
}
|
64
|
+
function onSelect(item) {
|
65
|
+
if (nodeCanBeSelected(item)) {
|
66
|
+
return item.onSelect;
|
67
|
+
}
|
68
|
+
return undefined;
|
69
|
+
}
|
70
|
+
function disabledItem(item) {
|
71
|
+
if (nodeCanBeSelected(item)) {
|
72
|
+
return item.disabled;
|
73
|
+
}
|
74
|
+
return undefined;
|
75
|
+
}
|
76
|
+
var TreeMenu = /** @class */ (function (_super) {
|
77
|
+
__extends(TreeMenu, _super);
|
78
|
+
function TreeMenu(props) {
|
79
|
+
var _this = _super.call(this, props) || this;
|
80
|
+
_this.inputFocus = function () {
|
81
|
+
var _a;
|
82
|
+
(_a = _this.inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
83
|
+
};
|
84
|
+
_this.listNavigation = function () {
|
85
|
+
var element = document.querySelector('.suggestion-item--btn:not([disabled])');
|
86
|
+
element.focus();
|
87
|
+
};
|
88
|
+
_this.onMouseDown = function (event) {
|
89
|
+
var _a, _b;
|
90
|
+
if ((((_a = _this.dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) !== true)
|
91
|
+
&& (((_b = _this.treeMenuRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)) !== true)
|
92
|
+
&& _this.state.openDropdown) {
|
93
|
+
_this.setState({
|
94
|
+
openDropdown: false,
|
95
|
+
searchFieldValue: '',
|
96
|
+
});
|
97
|
+
}
|
98
|
+
};
|
99
|
+
_this.onKeyDown = function (e) {
|
100
|
+
if (_this.state.openDropdown && _this.ref.current) {
|
101
|
+
(0, KeyboardNavigation_1.keyboardNavigation)(e, _this.ref.current, _this.inputFocus);
|
102
|
+
if (e.key === 'Backspace' && _this.state.activeTree.length > 0) {
|
103
|
+
_this.backButton();
|
104
|
+
var lastElement = _this.state.buttonTarget.pop();
|
105
|
+
if (lastElement != null) {
|
106
|
+
var className = (0, TreeSelectItem_1.getPrefixedItemId)(lastElement);
|
107
|
+
var element = document.getElementsByClassName(className)[0];
|
108
|
+
element.focus();
|
109
|
+
}
|
110
|
+
}
|
111
|
+
}
|
112
|
+
};
|
113
|
+
_this.onPressEsc = function (event) {
|
114
|
+
if (event.key === 'Escape' && _this.state.openDropdown) {
|
115
|
+
_this.setState({
|
116
|
+
openDropdown: false,
|
117
|
+
searchFieldValue: '',
|
118
|
+
});
|
119
|
+
}
|
120
|
+
};
|
121
|
+
_this.componentDidMount = function () {
|
122
|
+
_this.recursion(_this.state.options);
|
123
|
+
document.addEventListener("mousedown", _this.onMouseDown);
|
124
|
+
document.addEventListener("keydown", _this.onKeyDown);
|
125
|
+
document.addEventListener("keydown", _this.onPressEsc);
|
126
|
+
};
|
127
|
+
_this.state = {
|
128
|
+
options: _this.props.getOptions ? _this.props.getOptions() : [],
|
129
|
+
firstBranchOptions: _this.props.getOptions ? _this.props.getOptions() : [],
|
130
|
+
searchFieldValue: '',
|
131
|
+
activeTree: [],
|
132
|
+
buttonTree: [],
|
133
|
+
buttonTarget: [],
|
134
|
+
filterArr: [],
|
135
|
+
buttonValue: null,
|
136
|
+
openDropdown: false,
|
137
|
+
};
|
138
|
+
_this.handleMultiLevel = _this.handleMultiLevel.bind(_this);
|
139
|
+
_this.backButton = _this.backButton.bind(_this);
|
140
|
+
_this.handleButton = _this.handleButton.bind(_this);
|
141
|
+
_this.handleTree = _this.handleTree.bind(_this);
|
142
|
+
_this.toggleMenu = _this.toggleMenu.bind(_this);
|
143
|
+
_this.toggle = _this.toggle.bind(_this);
|
144
|
+
_this.onMouseDown = _this.onMouseDown.bind(_this);
|
145
|
+
_this.onKeyDown = _this.onKeyDown.bind(_this);
|
146
|
+
_this.onPressEsc = _this.onPressEsc.bind(_this);
|
147
|
+
_this.dropdownRef = React.createRef();
|
148
|
+
_this.ref = React.createRef();
|
149
|
+
_this.openDropdownRef = React.createRef();
|
150
|
+
_this.treeMenuRef = React.createRef();
|
151
|
+
_this.inputRef = React.createRef();
|
152
|
+
_this.popperInstance = null;
|
153
|
+
return _this;
|
154
|
+
}
|
155
|
+
TreeMenu.prototype.componentWillUnmount = function () {
|
156
|
+
document.removeEventListener("mousedown", this.onMouseDown);
|
157
|
+
document.removeEventListener("keydown", this.onKeyDown);
|
158
|
+
document.addEventListener("keydown", this.onPressEsc);
|
159
|
+
};
|
160
|
+
TreeMenu.prototype.componentDidUpdate = function (_prevProps, prevState) {
|
161
|
+
var _a;
|
162
|
+
if (prevState.openDropdown !== this.state.openDropdown) {
|
163
|
+
this.toggleMenu();
|
164
|
+
}
|
165
|
+
if ((prevState.activeTree !== this.state.activeTree)
|
166
|
+
|| (prevState.filterArr !== this.state.filterArr)
|
167
|
+
|| (prevState.options !== this.state.options)) {
|
168
|
+
(_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
|
169
|
+
}
|
170
|
+
};
|
171
|
+
TreeMenu.prototype.toggleMenu = function () {
|
172
|
+
var _this = this;
|
173
|
+
var _a, _b;
|
174
|
+
if (this.state.openDropdown) {
|
175
|
+
if (this.openDropdownRef.current && this.dropdownRef.current) {
|
176
|
+
this.popperInstance = (0, core_1.createPopper)(this.openDropdownRef.current, this.dropdownRef.current, {
|
177
|
+
placement: 'bottom-start',
|
178
|
+
});
|
179
|
+
}
|
180
|
+
(_a = this.inputRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', function (e) {
|
181
|
+
if (e.key === 'ArrowDown') {
|
182
|
+
e.preventDefault();
|
183
|
+
e.stopPropagation();
|
184
|
+
setTimeout(function () {
|
185
|
+
_this.listNavigation();
|
186
|
+
});
|
187
|
+
}
|
188
|
+
});
|
189
|
+
if (this.inputRef.current) {
|
190
|
+
this.inputFocus();
|
191
|
+
}
|
192
|
+
else {
|
193
|
+
var element = document.querySelector('.suggestion-item--btn:not([disabled])');
|
194
|
+
element.focus();
|
195
|
+
}
|
196
|
+
}
|
197
|
+
else {
|
198
|
+
(_b = this.openDropdownRef.current) === null || _b === void 0 ? void 0 : _b.focus();
|
199
|
+
}
|
200
|
+
};
|
201
|
+
TreeMenu.prototype.toggle = function (event) {
|
202
|
+
event.stopPropagation();
|
203
|
+
this.setState({
|
204
|
+
openDropdown: !this.state.openDropdown,
|
205
|
+
});
|
206
|
+
};
|
207
|
+
TreeMenu.prototype.handleMultiLevel = function (item) {
|
208
|
+
if (nodeHasChildren(item)) {
|
209
|
+
this.setState({
|
210
|
+
activeTree: __spreadArray(__spreadArray([], this.state.activeTree, true), [this.state.options], false),
|
211
|
+
options: item.children,
|
212
|
+
});
|
213
|
+
}
|
214
|
+
};
|
215
|
+
TreeMenu.prototype.handleButton = function (item) {
|
216
|
+
var buttonTreeNext = this.state.buttonTree;
|
217
|
+
if (this.state.buttonValue != null) {
|
218
|
+
buttonTreeNext = buttonTreeNext.concat(this.state.buttonValue);
|
219
|
+
}
|
220
|
+
this.setState({
|
221
|
+
buttonTree: buttonTreeNext,
|
222
|
+
buttonValue: item,
|
223
|
+
});
|
224
|
+
};
|
225
|
+
TreeMenu.prototype.handleTree = function (_event, option) {
|
226
|
+
if (nodeHasChildren(option)) {
|
227
|
+
this.handleButton(option);
|
228
|
+
this.handleMultiLevel(option);
|
229
|
+
}
|
230
|
+
else {
|
231
|
+
this.setState({
|
232
|
+
openDropdown: false,
|
233
|
+
options: this.state.firstBranchOptions,
|
234
|
+
activeTree: [],
|
235
|
+
buttonTarget: [],
|
236
|
+
});
|
237
|
+
}
|
238
|
+
setTimeout(function () {
|
239
|
+
var element = document.querySelectorAll('.suggestion-item--btn:not([disabled])')[0];
|
240
|
+
element.focus();
|
241
|
+
});
|
242
|
+
};
|
243
|
+
TreeMenu.prototype.backButton = function () {
|
244
|
+
var items = this.state.activeTree.pop();
|
245
|
+
if (items != null) {
|
246
|
+
this.setState({
|
247
|
+
options: items,
|
248
|
+
});
|
249
|
+
}
|
250
|
+
var item = this.state.buttonTree.pop();
|
251
|
+
if (item != null) {
|
252
|
+
this.setState({
|
253
|
+
buttonValue: item,
|
254
|
+
});
|
255
|
+
}
|
256
|
+
};
|
257
|
+
TreeMenu.prototype.recursion = function (arr) {
|
258
|
+
var _this = this;
|
259
|
+
arr.map(function (item) {
|
260
|
+
_this.state.filterArr.push(item);
|
261
|
+
if (nodeHasChildren(item)) {
|
262
|
+
_this.recursion(item.children);
|
263
|
+
}
|
264
|
+
});
|
265
|
+
};
|
266
|
+
TreeMenu.prototype.filteredItem = function (arr) {
|
267
|
+
var _this = this;
|
268
|
+
var filteredArr = arr.filter(function (item) {
|
269
|
+
if (_this.state.searchFieldValue) {
|
270
|
+
if (_this.props.getLabel(item.value)
|
271
|
+
.toLowerCase()
|
272
|
+
.includes(_this.state.searchFieldValue.toLowerCase())) {
|
273
|
+
return item.value;
|
274
|
+
}
|
275
|
+
else {
|
276
|
+
return;
|
277
|
+
}
|
278
|
+
}
|
279
|
+
else {
|
280
|
+
return item.value;
|
281
|
+
}
|
282
|
+
});
|
283
|
+
if (filteredArr.length === 0) {
|
284
|
+
return React.createElement("li", { className: "suggestion-item--nothing-found" }, "Nothing found");
|
285
|
+
}
|
286
|
+
else {
|
287
|
+
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 () {
|
288
|
+
if (onSelect != null) {
|
289
|
+
onSelect(option);
|
290
|
+
_this.setState({
|
291
|
+
searchFieldValue: '',
|
292
|
+
});
|
293
|
+
}
|
294
|
+
} })); });
|
295
|
+
}
|
296
|
+
};
|
297
|
+
TreeMenu.prototype.render = function () {
|
298
|
+
var _this = this;
|
299
|
+
return (React.createElement("div", { ref: this.treeMenuRef },
|
300
|
+
React.createElement("div", { ref: this.openDropdownRef }, this.props.children(this.toggle)),
|
301
|
+
React.createElement(WithPortal_1.WithPortal, { active: this.state.openDropdown, "data-test-id": "tree-menu-popover" },
|
302
|
+
React.createElement("div", { ref: this.dropdownRef, className: "autocomplete autocomplete--multi-select autocomplete--fixed-width", style: {
|
303
|
+
zIndex: this.props.zIndex,
|
304
|
+
} },
|
305
|
+
React.createElement("div", { className: 'autocomplete__header' },
|
306
|
+
React.createElement("div", { className: "autocomplete__icon", onClick: function () {
|
307
|
+
_this.backButton();
|
308
|
+
} },
|
309
|
+
React.createElement(Icon_1.Icon, { name: "search", className: "search" })),
|
310
|
+
React.createElement("div", { className: 'autocomplete__filter' },
|
311
|
+
React.createElement("input", { className: "autocomplete__input", type: "text", placeholder: this.props.searchPlaceholder, ref: this.inputRef, value: this.state.searchFieldValue, onChange: function (event) {
|
312
|
+
var _a;
|
313
|
+
_this.setState({ searchFieldValue: event.target.value });
|
314
|
+
(_a = _this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
|
315
|
+
} }))),
|
316
|
+
(this.state.activeTree.length > 0 && this.state.buttonValue != null)
|
317
|
+
&& React.createElement("div", { className: 'autocomplete__category-header' },
|
318
|
+
React.createElement("div", { className: "autocomplete__icon", onClick: function () {
|
319
|
+
_this.backButton();
|
320
|
+
} },
|
321
|
+
React.createElement(Icon_1.Icon, { name: "arrow-left", className: "arrow-left" })),
|
322
|
+
React.createElement("div", { className: 'autocomplete__filter' },
|
323
|
+
React.createElement("button", { className: 'autocomplete__category-title' }, this.props.optionTemplate
|
324
|
+
? this.props.optionTemplate(this.state.buttonValue.value)
|
325
|
+
: this.props.getLabel(this.state.buttonValue.value)))),
|
326
|
+
this.state.searchFieldValue === '' ?
|
327
|
+
this.props.getOptions ?
|
328
|
+
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({
|
329
|
+
buttonTarget: __spreadArray(__spreadArray([], _this.state.buttonTarget, true), [
|
330
|
+
_this.props.getId(option.value),
|
331
|
+
], false),
|
332
|
+
}); } })); }))
|
333
|
+
: null
|
334
|
+
: React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch
|
335
|
+
? this.state.options
|
336
|
+
: this.state.filterArr))))));
|
337
|
+
};
|
338
|
+
return TreeMenu;
|
339
|
+
}(React.Component));
|
340
|
+
exports.TreeMenu = TreeMenu;
|
package/react/helpers.d.ts
CHANGED
package/react/helpers.js
CHANGED
@@ -1,7 +1,11 @@
|
|
1
1
|
"use strict";
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
-
exports.assertNever = void 0;
|
3
|
+
exports.nameof = exports.assertNever = void 0;
|
4
4
|
function assertNever(x) {
|
5
5
|
throw new Error('Unexpected object: ' + x);
|
6
6
|
}
|
7
7
|
exports.assertNever = assertNever;
|
8
|
+
function nameof(name) {
|
9
|
+
return name.toString();
|
10
|
+
}
|
11
|
+
exports.nameof = nameof;
|
package/react/index.d.ts
CHANGED
@@ -85,6 +85,7 @@ export { Time } from './components/Text/Time';
|
|
85
85
|
export { Heading } from './components/Text/Heading';
|
86
86
|
export { BottomNav } from './components/Navigation/BottomNav';
|
87
87
|
export { TreeSelect } from './components/TreeSelect/TreeSelect';
|
88
|
+
export { TreeMenu } from './components/TreeMenu';
|
88
89
|
export { TableList, TableListItem } from './components/Lists/TableList';
|
89
90
|
export { ContentListItem } from './components/Lists/ContentList';
|
90
91
|
export { MultiSelect } from './components/MultiSelect';
|
package/react/index.js
CHANGED
@@ -18,7 +18,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
18
18
|
Object.defineProperty(exports, "__esModule", { value: true });
|
19
19
|
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;
|
20
20
|
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;
|
21
|
-
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;
|
21
|
+
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;
|
22
22
|
var HelloWorld_1 = require("./components/HelloWorld");
|
23
23
|
Object.defineProperty(exports, "HelloWorld", { enumerable: true, get: function () { return HelloWorld_1.HelloWorld; } });
|
24
24
|
var Button_1 = require("./components/Button");
|
@@ -207,6 +207,8 @@ var BottomNav_1 = require("./components/Navigation/BottomNav");
|
|
207
207
|
Object.defineProperty(exports, "BottomNav", { enumerable: true, get: function () { return BottomNav_1.BottomNav; } });
|
208
208
|
var TreeSelect_1 = require("./components/TreeSelect/TreeSelect");
|
209
209
|
Object.defineProperty(exports, "TreeSelect", { enumerable: true, get: function () { return TreeSelect_1.TreeSelect; } });
|
210
|
+
var TreeMenu_1 = require("./components/TreeMenu");
|
211
|
+
Object.defineProperty(exports, "TreeMenu", { enumerable: true, get: function () { return TreeMenu_1.TreeMenu; } });
|
210
212
|
var TableList_1 = require("./components/Lists/TableList");
|
211
213
|
Object.defineProperty(exports, "TableList", { enumerable: true, get: function () { return TableList_1.TableList; } });
|
212
214
|
Object.defineProperty(exports, "TableListItem", { enumerable: true, get: function () { return TableList_1.TableListItem; } });
|