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
@@ -3,8 +3,8 @@ import { Icon } from "./Icon";
|
|
3
3
|
import { createPopper, Instance } from '@popperjs/core';
|
4
4
|
import {getPrefixedItemId, TreeSelectItem} from './TreeSelect/TreeSelectItem';
|
5
5
|
import {keyboardNavigation} from './TreeSelect/KeyboardNavigation';
|
6
|
-
import {createPortal} from 'react-dom';
|
7
6
|
import {WithPortal} from './WithPortal';
|
7
|
+
import {nameof} from '../helpers';
|
8
8
|
|
9
9
|
interface IState<T> {
|
10
10
|
options: Array<ITreeMenuNode<T>>;
|
@@ -48,11 +48,27 @@ interface IChildren<T> {
|
|
48
48
|
export type ITreeMenuNode<T> = IParent<T> | IChildren<T>;
|
49
49
|
|
50
50
|
function nodeHasChildren<T>(item: IParent<T> | IChildren<T>): item is IParent<T> {
|
51
|
-
return item['children'] != null;
|
51
|
+
return (item as unknown as any)[nameof<IParent<T>>('children')] != null;
|
52
52
|
}
|
53
53
|
|
54
54
|
function nodeCanBeSelected<T>(item: IParent<T> | IChildren<T>): item is IChildren<T> {
|
55
|
-
return item['onSelect'] != null;
|
55
|
+
return (item as unknown as any)[nameof<IChildren<T>>('onSelect')] != null;
|
56
|
+
}
|
57
|
+
|
58
|
+
function onSelect<T>(item: ITreeMenuNode<T>) {
|
59
|
+
if (nodeCanBeSelected(item)) {
|
60
|
+
return item.onSelect;
|
61
|
+
}
|
62
|
+
|
63
|
+
return undefined;
|
64
|
+
}
|
65
|
+
|
66
|
+
function disabledItem<T>(item: ITreeMenuNode<T>) {
|
67
|
+
if (nodeCanBeSelected(item)) {
|
68
|
+
return item.disabled;
|
69
|
+
}
|
70
|
+
|
71
|
+
return undefined;
|
56
72
|
}
|
57
73
|
|
58
74
|
export class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
|
@@ -163,7 +179,7 @@ export class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
|
|
163
179
|
document.addEventListener("keydown", this.onPressEsc);
|
164
180
|
}
|
165
181
|
|
166
|
-
componentDidUpdate(
|
182
|
+
componentDidUpdate(_prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void {
|
167
183
|
if (prevState.openDropdown !== this.state.openDropdown) {
|
168
184
|
this.toggleMenu();
|
169
185
|
}
|
@@ -208,7 +224,7 @@ export class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
|
|
208
224
|
}
|
209
225
|
}
|
210
226
|
|
211
|
-
toggle(event) {
|
227
|
+
toggle(event: React.SyntheticEvent) {
|
212
228
|
event.stopPropagation();
|
213
229
|
|
214
230
|
this.setState({
|
@@ -238,7 +254,7 @@ export class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
|
|
238
254
|
});
|
239
255
|
}
|
240
256
|
|
241
|
-
handleTree(
|
257
|
+
handleTree(_event: React.MouseEvent<HTMLLIElement, MouseEvent>, option: ITreeMenuNode<T>) {
|
242
258
|
if (nodeHasChildren(option)) {
|
243
259
|
this.handleButton(option);
|
244
260
|
this.handleMultiLevel(option);
|
@@ -305,40 +321,29 @@ export class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
|
|
305
321
|
if (filteredArr.length === 0) {
|
306
322
|
return <li className="suggestion-item--nothing-found">Nothing found</li>;
|
307
323
|
} else {
|
308
|
-
return filteredArr.map((option, i) =>
|
309
|
-
|
310
|
-
|
311
|
-
|
312
|
-
}
|
313
|
-
|
314
|
-
|
315
|
-
|
316
|
-
|
317
|
-
|
318
|
-
}
|
319
|
-
|
320
|
-
|
321
|
-
return (
|
322
|
-
<TreeSelectItem
|
323
|
-
key={i}
|
324
|
-
option={option}
|
325
|
-
handleTree={this.handleTree}
|
326
|
-
disabledItem={disabledItem(option)}
|
327
|
-
getBorderColor={this.props.getBorderColor}
|
328
|
-
getBackgroundColor={this.props.getBackgroundColor}
|
329
|
-
getId={this.props.getId}
|
330
|
-
optionTemplate={this.props.optionTemplate}
|
331
|
-
getLabel={this.props.getLabel}
|
332
|
-
onClick={() => {
|
324
|
+
return filteredArr.map((option, i) => (
|
325
|
+
<TreeSelectItem
|
326
|
+
key={i}
|
327
|
+
option={option}
|
328
|
+
handleTree={this.handleTree}
|
329
|
+
disabledItem={disabledItem(option)}
|
330
|
+
getBorderColor={this.props.getBorderColor}
|
331
|
+
getBackgroundColor={this.props.getBackgroundColor}
|
332
|
+
getId={this.props.getId}
|
333
|
+
optionTemplate={this.props.optionTemplate}
|
334
|
+
getLabel={this.props.getLabel}
|
335
|
+
onClick={() => {
|
336
|
+
if (onSelect != null) {
|
333
337
|
onSelect(option);
|
334
338
|
|
335
339
|
this.setState({
|
336
340
|
searchFieldValue: '',
|
337
341
|
});
|
338
|
-
}
|
339
|
-
|
340
|
-
|
341
|
-
|
342
|
+
}
|
343
|
+
|
344
|
+
}}
|
345
|
+
/>
|
346
|
+
));
|
342
347
|
}
|
343
348
|
}
|
344
349
|
|
@@ -410,40 +415,26 @@ export class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
|
|
410
415
|
ref={this.ref}
|
411
416
|
className="suggestion-list suggestion-list--multi-select"
|
412
417
|
>
|
413
|
-
{this.state.options.map((option, i: React.Key | undefined) =>
|
414
|
-
|
415
|
-
|
416
|
-
|
417
|
-
}
|
418
|
-
|
419
|
-
|
420
|
-
|
421
|
-
|
422
|
-
|
423
|
-
}
|
424
|
-
|
425
|
-
|
426
|
-
|
427
|
-
|
428
|
-
|
429
|
-
|
430
|
-
|
431
|
-
|
432
|
-
|
433
|
-
getBorderColor={this.props.getBorderColor}
|
434
|
-
getBackgroundColor={this.props.getBackgroundColor}
|
435
|
-
getId={this.props.getId}
|
436
|
-
optionTemplate={this.props.optionTemplate}
|
437
|
-
getLabel={this.props.getLabel}
|
438
|
-
onKeyDown={() => this.setState({
|
439
|
-
buttonTarget: [
|
440
|
-
...this.state.buttonTarget,
|
441
|
-
this.props.getId(option.value),
|
442
|
-
],
|
443
|
-
})}
|
444
|
-
/>
|
445
|
-
);
|
446
|
-
})}
|
418
|
+
{this.state.options.map((option, i: React.Key | undefined) => (
|
419
|
+
<TreeSelectItem
|
420
|
+
key={i}
|
421
|
+
option={option}
|
422
|
+
handleTree={this.handleTree}
|
423
|
+
onClick={onSelect(option)}
|
424
|
+
disabledItem={disabledItem(option)}
|
425
|
+
getBorderColor={this.props.getBorderColor}
|
426
|
+
getBackgroundColor={this.props.getBackgroundColor}
|
427
|
+
getId={this.props.getId}
|
428
|
+
optionTemplate={this.props.optionTemplate}
|
429
|
+
getLabel={this.props.getLabel}
|
430
|
+
onKeyDown={() => this.setState({
|
431
|
+
buttonTarget: [
|
432
|
+
...this.state.buttonTarget,
|
433
|
+
this.props.getId(option.value),
|
434
|
+
],
|
435
|
+
})}
|
436
|
+
/>
|
437
|
+
))}
|
447
438
|
</ul>
|
448
439
|
: null
|
449
440
|
: <ul
|
package/app-typescript/index.ts
CHANGED
@@ -93,6 +93,7 @@ export { Time } from './components/Text/Time';
|
|
93
93
|
export { Heading } from './components/Text/Heading';
|
94
94
|
export { BottomNav } from './components/Navigation/BottomNav';
|
95
95
|
export { TreeSelect } from './components/TreeSelect/TreeSelect';
|
96
|
+
export { TreeMenu } from './components/TreeMenu';
|
96
97
|
export { TableList, TableListItem } from './components/Lists/TableList';
|
97
98
|
export { ContentListItem } from './components/Lists/ContentList';
|
98
99
|
export { MultiSelect } from './components/MultiSelect';
|