@kwiz/fluentui 1.0.75 → 1.0.77
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/dist/controls/horizontal.js +1 -1
- package/dist/controls/horizontal.js.map +1 -1
- package/dist/controls/menu.d.ts +3 -1
- package/dist/controls/menu.js +44 -26
- package/dist/controls/menu.js.map +1 -1
- package/dist/controls/search.js.map +1 -1
- package/dist/controls/vertical.js +1 -1
- package/dist/controls/vertical.js.map +1 -1
- package/dist/helpers/hooks.d.ts +3 -1
- package/dist/helpers/hooks.js +18 -0
- package/dist/helpers/hooks.js.map +1 -1
- package/package.json +1 -1
- package/src/controls/horizontal.tsx +1 -1
- package/src/controls/menu.tsx +54 -32
- package/src/controls/search.tsx +1 -1
- package/src/controls/vertical.tsx +1 -1
- package/src/helpers/hooks.tsx +22 -1
|
@@ -29,6 +29,6 @@ export const Horizontal = React.forwardRef((props, ref) => {
|
|
|
29
29
|
css.push(cssNames.hCentered);
|
|
30
30
|
if (isNotEmptyArray(props.css))
|
|
31
31
|
css.push(...props.css);
|
|
32
|
-
return (_jsx(Section, Object.assign({}, props, { css: css })));
|
|
32
|
+
return (_jsx(Section, Object.assign({}, props, { css: css, ref: ref })));
|
|
33
33
|
});
|
|
34
34
|
//# sourceMappingURL=horizontal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"horizontal.js","sourceRoot":"","sources":["../../src/controls/horizontal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAiB,OAAO,EAAE,MAAM,WAAW,CAAC;AAEnD,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,UAAU,kCACH,MAAM,CAAC,IAAI,KACd,aAAa,EAAE,KAAK,GACvB;IACD,IAAI,EAAE,MAAM,CAAC,IAAI;IACjB,KAAK,EAAE,MAAM,CAAC,KAAK;IACnB,QAAQ,EAAE;QACN,UAAU,EAAE,QAAQ;KACvB;IACD,SAAS,EAAE;QACP,cAAc,EAAE,QAAQ;KAC3B;CACJ,CAAC,CAAA;AAUF,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAkD,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACvG,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,IAAI,GAAG,GAAa,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;IAEjD,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC9B,IAAI,KAAK,CAAC,IAAI;QACV,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC5B,IAAI,KAAK,CAAC,KAAK;QACX,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC7B,IAAI,KAAK,CAAC,QAAQ;QACd,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAChC,IAAI,KAAK,CAAC,SAAS;QACf,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;IAEjC,IAAI,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC;QAAE,GAAG,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEvD,OAAO,CACH,KAAC,OAAO,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,IAAI,
|
|
1
|
+
{"version":3,"file":"horizontal.js","sourceRoot":"","sources":["../../src/controls/horizontal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAiB,OAAO,EAAE,MAAM,WAAW,CAAC;AAEnD,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,UAAU,kCACH,MAAM,CAAC,IAAI,KACd,aAAa,EAAE,KAAK,GACvB;IACD,IAAI,EAAE,MAAM,CAAC,IAAI;IACjB,KAAK,EAAE,MAAM,CAAC,KAAK;IACnB,QAAQ,EAAE;QACN,UAAU,EAAE,QAAQ;KACvB;IACD,SAAS,EAAE;QACP,cAAc,EAAE,QAAQ;KAC3B;CACJ,CAAC,CAAA;AAUF,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAkD,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACvG,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,IAAI,GAAG,GAAa,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;IAEjD,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC9B,IAAI,KAAK,CAAC,IAAI;QACV,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC5B,IAAI,KAAK,CAAC,KAAK;QACX,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC7B,IAAI,KAAK,CAAC,QAAQ;QACd,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAChC,IAAI,KAAK,CAAC,SAAS;QACf,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;IAEjC,IAAI,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC;QAAE,GAAG,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEvD,OAAO,CACH,KAAC,OAAO,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAC7C,CAAC;AACN,CAAC,CAAC,CAAC"}
|
package/dist/controls/menu.d.ts
CHANGED
|
@@ -16,7 +16,9 @@ interface iMenuItemEXSeparator {
|
|
|
16
16
|
interface iMenuItemEXGroup {
|
|
17
17
|
type: "group";
|
|
18
18
|
title: string;
|
|
19
|
-
items: iMenuItemEX
|
|
19
|
+
items: (iMenuItemEX & {
|
|
20
|
+
type?: "separator" | "item";
|
|
21
|
+
})[];
|
|
20
22
|
}
|
|
21
23
|
export type iMenuItemEX = iMenuItemEXItem | iMenuItemEXSeparator | iMenuItemEXGroup;
|
|
22
24
|
interface IProps {
|
package/dist/controls/menu.js
CHANGED
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Menu, MenuDivider, MenuGroup, MenuGroupHeader, MenuItem, MenuList, MenuPopover, menuPopoverClassNames, MenuTrigger } from '@fluentui/react-components';
|
|
3
|
-
import { ChevronLeftRegular, ChevronRightRegular } from '@fluentui/react-icons';
|
|
4
3
|
import { isNotEmptyArray, isNotEmptyString, isNullOrEmptyString, isNullOrUndefined, isNumber, isString, isUndefined, jsonClone, stopEvent } from '@kwiz/common';
|
|
5
4
|
import React from 'react';
|
|
6
|
-
import { useStateEX } from '../helpers';
|
|
5
|
+
import { useClickableDiv, useStateEX } from '../helpers';
|
|
7
6
|
import { useKWIZFluentContext } from '../helpers/context-internal';
|
|
8
7
|
import { ButtonEX } from './button';
|
|
8
|
+
import { DividerEX } from './divider';
|
|
9
9
|
import { Horizontal } from './horizontal';
|
|
10
10
|
import { Search } from './search';
|
|
11
|
-
import { Section } from './section';
|
|
12
11
|
export const MenuEx = (props) => {
|
|
13
12
|
const ctx = useKWIZFluentContext();
|
|
14
13
|
const [startIndexPerLevel, setStartIndexPerLevel] = useStateEX({});
|
|
@@ -18,6 +17,7 @@ export const MenuEx = (props) => {
|
|
|
18
17
|
//when hovering over sub menu the parent would close - have menu trigger keep open on the parent level
|
|
19
18
|
const [keepOpen, setKeepOpen] = useStateEX({});
|
|
20
19
|
const [opened, setOpened] = useStateEX({});
|
|
20
|
+
const clickableDiv = useClickableDiv();
|
|
21
21
|
React.useEffect(() => {
|
|
22
22
|
window.setTimeout(() => {
|
|
23
23
|
var menus = document.querySelectorAll(`.${menuPopoverClassNames.root}`);
|
|
@@ -32,15 +32,31 @@ export const MenuEx = (props) => {
|
|
|
32
32
|
}, [opened]);
|
|
33
33
|
function renderItems(items, level) {
|
|
34
34
|
const myLevelFilter = filterPerLevel[level];
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
35
|
+
const showItem = (i) => {
|
|
36
|
+
//get rid of empty/null items
|
|
37
|
+
let show = !isNullOrUndefined(i) && (isNotEmptyString(i.type) || isNotEmptyString(i.title));
|
|
38
|
+
if (show && isNotEmptyString(myLevelFilter)) {
|
|
39
|
+
if (i.type === "separator")
|
|
40
|
+
show = false;
|
|
41
|
+
else if (i.type === "group") {
|
|
42
|
+
//only show group if 1 or more results are in it
|
|
43
|
+
return i.items.filter(sub => showItem(sub)).length > 0;
|
|
44
|
+
}
|
|
45
|
+
else
|
|
46
|
+
show = i.title.toLowerCase().indexOf(myLevelFilter) >= 0;
|
|
47
|
+
}
|
|
48
|
+
return show;
|
|
49
|
+
};
|
|
50
|
+
//inject group items into this level - so we share the filter/next functionality. it looks wierd if filter/paging is done per group if they are displayed inline.
|
|
51
|
+
items = items.map(i => i.type === "group" && isNotEmptyArray(i.items) ? [i, ...i.items] : i)
|
|
52
|
+
.flat()
|
|
53
|
+
//filter empty item or based on text filter
|
|
54
|
+
.filter(i => showItem(i));
|
|
40
55
|
let menuItems = items.map((item, index) => {
|
|
41
56
|
switch (item.type) {
|
|
42
57
|
case "group":
|
|
43
|
-
|
|
58
|
+
//todo: technically group items should be nested inside the group for better screen reder support
|
|
59
|
+
return _jsx(MenuGroup, { children: _jsx(MenuGroupHeader, { children: item.title }) }, index);
|
|
44
60
|
case "separator":
|
|
45
61
|
return _jsx(MenuDivider, {}, index);
|
|
46
62
|
case "item":
|
|
@@ -63,31 +79,33 @@ export const MenuEx = (props) => {
|
|
|
63
79
|
});
|
|
64
80
|
const paged = menuItems.length > pageSize;
|
|
65
81
|
const filtered = menuItems.length > filterThreshold || !isNullOrEmptyString(myLevelFilter);
|
|
66
|
-
const filterControl = filtered && _jsx(Search, { defaultValue: myLevelFilter || "", onChangeDeferred: (newValue) => {
|
|
67
|
-
const s = jsonClone(filterPerLevel);
|
|
68
|
-
s[level] = newValue ? newValue.toLowerCase() : "";
|
|
69
|
-
setFilterPerLevel(s);
|
|
70
|
-
} });
|
|
71
82
|
if (paged) {
|
|
72
83
|
let start = startIndexPerLevel[level];
|
|
73
84
|
if (isNullOrUndefined(start))
|
|
74
85
|
start = 0;
|
|
75
86
|
let hasMore = menuItems.length > start + pageSize;
|
|
76
87
|
menuItems = menuItems.slice(start, start + pageSize);
|
|
77
|
-
if (start > 0
|
|
78
|
-
menuItems.splice(0, 0,
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
88
|
+
if (start > 0) {
|
|
89
|
+
menuItems.splice(0, 0, _jsx(DividerEX, Object.assign({ title: 'Previous' }, clickableDiv, { onClick: () => {
|
|
90
|
+
const s = jsonClone(startIndexPerLevel);
|
|
91
|
+
s[level] = start - pageSize;
|
|
92
|
+
setStartIndexPerLevel(s);
|
|
93
|
+
}, children: "previous" }), "$prev"));
|
|
94
|
+
}
|
|
95
|
+
if (hasMore)
|
|
96
|
+
menuItems.push(_jsx(DividerEX, Object.assign({ title: 'Next' }, clickableDiv, { onClick: () => {
|
|
97
|
+
const s = jsonClone(startIndexPerLevel);
|
|
98
|
+
s[level] = start + pageSize;
|
|
99
|
+
setStartIndexPerLevel(s);
|
|
100
|
+
}, children: "next" }), "$next"));
|
|
87
101
|
}
|
|
88
|
-
|
|
102
|
+
if (filtered) {
|
|
89
103
|
//just filter - no paging
|
|
90
|
-
menuItems.splice(0, 0, _jsx(Horizontal, { children:
|
|
104
|
+
menuItems.splice(0, 0, _jsx(Horizontal, { children: _jsx(Search, { defaultValue: myLevelFilter || "", onChangeDeferred: (newValue) => {
|
|
105
|
+
const s = jsonClone(filterPerLevel);
|
|
106
|
+
s[level] = newValue ? newValue.toLowerCase() : "";
|
|
107
|
+
setFilterPerLevel(s);
|
|
108
|
+
} }) }, '$search'));
|
|
91
109
|
}
|
|
92
110
|
return menuItems;
|
|
93
111
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../src/controls/menu.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,EAAiB,WAAW,EAAE,qBAAqB,EAA+B,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAC5M,OAAO,
|
|
1
|
+
{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../src/controls/menu.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"search.js","sourceRoot":"","sources":["../../src/controls/search.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAc,UAAU,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACzF,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAChF,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,MAAM,MAAM,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC;AAEnC,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC,IAAI;IACjB,SAAS,EAAE,MAAM,CAAC,SAAS;IAC3B,IAAI,EAAE,EACL;IACD,UAAU,EAAE,EACX;CACJ,CAAC,
|
|
1
|
+
{"version":3,"file":"search.js","sourceRoot":"","sources":["../../src/controls/search.tsx"],"names":[],"mappings":"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"}
|
|
@@ -24,6 +24,6 @@ export const Vertical = React.forwardRef((props, ref) => {
|
|
|
24
24
|
css.push(cssNames.vCentered);
|
|
25
25
|
if (isNotEmptyArray(props.css))
|
|
26
26
|
css.push(...props.css);
|
|
27
|
-
return (_jsx(Section, Object.assign({}, props, { css: css })));
|
|
27
|
+
return (_jsx(Section, Object.assign({}, props, { css: css, ref: ref })));
|
|
28
28
|
});
|
|
29
29
|
//# sourceMappingURL=vertical.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vertical.js","sourceRoot":"","sources":["../../src/controls/vertical.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAiB,OAAO,EAAE,MAAM,WAAW,CAAC;AAEnD,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,QAAQ,kCACD,MAAM,CAAC,IAAI,KACd,aAAa,EAAE,QAAQ,GAC1B;IACD,IAAI,EAAE,MAAM,CAAC,IAAI;IACjB,KAAK,EAAE,MAAM,CAAC,KAAK;IACnB,SAAS,EAAE;QACP,cAAc,EAAE,QAAQ;KAC3B;CAEJ,CAAC,CAAA;AAQF,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAkD,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACrG,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,IAAI,GAAG,GAAa,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;IAE/C,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,IAAI,KAAK,CAAC,IAAI;QACV,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC5B,IAAI,KAAK,CAAC,KAAK;QACX,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC7B,IAAI,KAAK,CAAC,SAAS;QACf,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;IAEjC,IAAI,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC;QAAE,GAAG,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEvD,OAAO,CACH,KAAC,OAAO,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,IAAI,
|
|
1
|
+
{"version":3,"file":"vertical.js","sourceRoot":"","sources":["../../src/controls/vertical.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAiB,OAAO,EAAE,MAAM,WAAW,CAAC;AAEnD,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,QAAQ,kCACD,MAAM,CAAC,IAAI,KACd,aAAa,EAAE,QAAQ,GAC1B;IACD,IAAI,EAAE,MAAM,CAAC,IAAI;IACjB,KAAK,EAAE,MAAM,CAAC,KAAK;IACnB,SAAS,EAAE;QACP,cAAc,EAAE,QAAQ;KAC3B;CAEJ,CAAC,CAAA;AAQF,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAkD,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACrG,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,IAAI,GAAG,GAAa,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;IAE/C,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,IAAI,KAAK,CAAC,IAAI;QACV,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC5B,IAAI,KAAK,CAAC,KAAK;QACX,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC7B,IAAI,KAAK,CAAC,SAAS;QACf,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;IAEjC,IAAI,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC;QAAE,GAAG,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEvD,OAAO,CACH,KAAC,OAAO,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAC7C,CAAC;AACN,CAAC,CAAC,CAAC"}
|
package/dist/helpers/hooks.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { MutableRefObject, SetStateAction } from "react";
|
|
1
|
+
import { HTMLAttributes, MutableRefObject, SetStateAction } from "react";
|
|
2
2
|
/** Empty array ensures that effect is only run on mount */
|
|
3
3
|
export declare const useEffectOnlyOnMount: any[];
|
|
4
4
|
type stateExOptions<ValueType> = {
|
|
@@ -21,4 +21,6 @@ export declare function useRefWithState<T>(initialValue?: T, stateOptions?: stat
|
|
|
21
21
|
/** for setting on element: ref={e.set} */
|
|
22
22
|
set: (newValue: T) => void;
|
|
23
23
|
};
|
|
24
|
+
/** return props to make div appear as clickable, and accept enter key as click */
|
|
25
|
+
export declare function useClickableDiv(): HTMLAttributes<HTMLDivElement>;
|
|
24
26
|
export {};
|
package/dist/helpers/hooks.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
|
+
import { makeStyles } from "@fluentui/react-components";
|
|
1
2
|
import { isFunction, isNotEmptyArray, isNullOrEmptyString, isPrimitiveValue, jsonClone, jsonStringify, LoggerLevel, objectsEqual, wrapFunction } from "@kwiz/common";
|
|
2
3
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
3
4
|
import { GetLogger } from "../_modules/config";
|
|
5
|
+
import { mixins } from "../styles/styles";
|
|
4
6
|
/** Empty array ensures that effect is only run on mount */
|
|
5
7
|
export const useEffectOnlyOnMount = [];
|
|
6
8
|
function extractStringValue(e) {
|
|
@@ -123,4 +125,20 @@ export function useRefWithState(initialValue, stateOptions = { skipUpdateIfSame:
|
|
|
123
125
|
set: setRef
|
|
124
126
|
};
|
|
125
127
|
}
|
|
128
|
+
const useStyles = makeStyles({
|
|
129
|
+
clickable: mixins.clickable,
|
|
130
|
+
});
|
|
131
|
+
/** return props to make div appear as clickable, and accept enter key as click */
|
|
132
|
+
export function useClickableDiv() {
|
|
133
|
+
const cssNames = useStyles();
|
|
134
|
+
const props = {
|
|
135
|
+
className: cssNames.clickable,
|
|
136
|
+
tabIndex: 0,
|
|
137
|
+
onKeyDown: e => {
|
|
138
|
+
if (e.key === "Enter")
|
|
139
|
+
e.target.click();
|
|
140
|
+
}
|
|
141
|
+
};
|
|
142
|
+
return props;
|
|
143
|
+
}
|
|
126
144
|
//# sourceMappingURL=hooks.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../src/helpers/hooks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,SAAS,EAAE,aAAa,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACrK,OAAO,
|
|
1
|
+
{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../src/helpers/hooks.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/controls/menu.tsx
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import { Menu, MenuDivider, MenuGroup, MenuGroupHeader, MenuItem, MenuList, MenuListProps, MenuPopover, menuPopoverClassNames, MenuPopoverProps, MenuProps, MenuTrigger } from '@fluentui/react-components';
|
|
2
|
-
import { ChevronLeftRegular, ChevronRightRegular } from '@fluentui/react-icons';
|
|
3
2
|
import { IDictionary, isNotEmptyArray, isNotEmptyString, isNullOrEmptyString, isNullOrUndefined, isNumber, isString, isUndefined, jsonClone, stopEvent } from '@kwiz/common';
|
|
4
3
|
import React from 'react';
|
|
5
|
-
import { useStateEX } from '../helpers';
|
|
4
|
+
import { useClickableDiv, useStateEX } from '../helpers';
|
|
6
5
|
import { useKWIZFluentContext } from '../helpers/context-internal';
|
|
7
6
|
import { ButtonEX, ButtonEXProps } from './button';
|
|
7
|
+
import { DividerEX } from './divider';
|
|
8
8
|
import { Horizontal } from './horizontal';
|
|
9
9
|
import { Search } from './search';
|
|
10
|
-
import { Section } from './section';
|
|
11
10
|
|
|
12
11
|
interface iMenuItemEXItem {
|
|
13
12
|
type?: "item";
|
|
@@ -24,7 +23,8 @@ interface iMenuItemEXSeparator {
|
|
|
24
23
|
interface iMenuItemEXGroup {
|
|
25
24
|
type: "group";
|
|
26
25
|
title: string;
|
|
27
|
-
|
|
26
|
+
//can't nest groups
|
|
27
|
+
items: (iMenuItemEX & { type?: "separator" | "item" })[];
|
|
28
28
|
}
|
|
29
29
|
export type iMenuItemEX = iMenuItemEXItem | iMenuItemEXSeparator | iMenuItemEXGroup;
|
|
30
30
|
|
|
@@ -50,6 +50,8 @@ export const MenuEx: React.FunctionComponent<React.PropsWithChildren<IProps>> =
|
|
|
50
50
|
const [keepOpen, setKeepOpen] = useStateEX<IDictionary<boolean>>({});
|
|
51
51
|
const [opened, setOpened] = useStateEX<IDictionary<boolean>>({});
|
|
52
52
|
|
|
53
|
+
const clickableDiv = useClickableDiv();
|
|
54
|
+
|
|
53
55
|
React.useEffect(() => {
|
|
54
56
|
window.setTimeout(() => {
|
|
55
57
|
var menus = document.querySelectorAll(`.${menuPopoverClassNames.root}`);
|
|
@@ -65,18 +67,34 @@ export const MenuEx: React.FunctionComponent<React.PropsWithChildren<IProps>> =
|
|
|
65
67
|
|
|
66
68
|
function renderItems(items: iMenuItemEX[], level: number) {
|
|
67
69
|
const myLevelFilter = filterPerLevel[level];
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
70
|
+
|
|
71
|
+
const showItem = (i: iMenuItemEX) => {
|
|
72
|
+
//get rid of empty/null items
|
|
73
|
+
let show = !isNullOrUndefined(i) && (isNotEmptyString(i.type) || isNotEmptyString((i as iMenuItemEXItem).title));
|
|
74
|
+
if (show && isNotEmptyString(myLevelFilter)) {
|
|
75
|
+
if (i.type === "separator") show = false;
|
|
76
|
+
else if (i.type === "group") {
|
|
77
|
+
//only show group if 1 or more results are in it
|
|
78
|
+
return i.items.filter(sub => showItem(sub)).length > 0;
|
|
79
|
+
}
|
|
80
|
+
else
|
|
81
|
+
show = i.title.toLowerCase().indexOf(myLevelFilter) >= 0;
|
|
82
|
+
}
|
|
83
|
+
return show;
|
|
72
84
|
}
|
|
73
85
|
|
|
86
|
+
//inject group items into this level - so we share the filter/next functionality. it looks wierd if filter/paging is done per group if they are displayed inline.
|
|
87
|
+
items = items.map(i => i.type === "group" && isNotEmptyArray(i.items) ? [i, ...i.items] : i)
|
|
88
|
+
.flat()
|
|
89
|
+
//filter empty item or based on text filter
|
|
90
|
+
.filter(i => showItem(i));
|
|
91
|
+
|
|
74
92
|
let menuItems = items.map((item, index) => {
|
|
75
93
|
switch (item.type) {
|
|
76
94
|
case "group":
|
|
95
|
+
//todo: technically group items should be nested inside the group for better screen reder support
|
|
77
96
|
return <MenuGroup key={index}>
|
|
78
97
|
<MenuGroupHeader>{item.title}</MenuGroupHeader>
|
|
79
|
-
{renderItems(item.items, level + 1)}
|
|
80
98
|
</MenuGroup>;
|
|
81
99
|
case "separator":
|
|
82
100
|
return <MenuDivider key={index} />;
|
|
@@ -113,36 +131,40 @@ export const MenuEx: React.FunctionComponent<React.PropsWithChildren<IProps>> =
|
|
|
113
131
|
|
|
114
132
|
const paged = menuItems.length > pageSize;
|
|
115
133
|
const filtered = menuItems.length > filterThreshold || !isNullOrEmptyString(myLevelFilter);
|
|
116
|
-
|
|
117
|
-
const s = jsonClone(filterPerLevel);
|
|
118
|
-
s[level] = newValue ? newValue.toLowerCase() : "";
|
|
119
|
-
setFilterPerLevel(s);
|
|
120
|
-
}} />;
|
|
134
|
+
|
|
121
135
|
if (paged) {
|
|
122
136
|
let start = startIndexPerLevel[level];
|
|
123
137
|
if (isNullOrUndefined(start)) start = 0;
|
|
124
138
|
let hasMore = menuItems.length > start + pageSize;
|
|
125
139
|
menuItems = menuItems.slice(start, start + pageSize);
|
|
126
|
-
if (start > 0
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
</
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
140
|
+
if (start > 0) {
|
|
141
|
+
menuItems.splice(0, 0, <DividerEX key="$prev" title='Previous'
|
|
142
|
+
{...clickableDiv}
|
|
143
|
+
onClick={() => {
|
|
144
|
+
const s = jsonClone(startIndexPerLevel);
|
|
145
|
+
s[level] = start - pageSize;
|
|
146
|
+
setStartIndexPerLevel(s);
|
|
147
|
+
}}
|
|
148
|
+
>previous</DividerEX>);
|
|
149
|
+
}
|
|
150
|
+
if (hasMore)
|
|
151
|
+
menuItems.push(<DividerEX key="$next" title='Next'
|
|
152
|
+
{...clickableDiv}
|
|
153
|
+
onClick={() => {
|
|
154
|
+
const s = jsonClone(startIndexPerLevel);
|
|
155
|
+
s[level] = start + pageSize;
|
|
156
|
+
setStartIndexPerLevel(s);
|
|
157
|
+
}}
|
|
158
|
+
>next</DividerEX>);
|
|
141
159
|
}
|
|
142
|
-
|
|
160
|
+
if (filtered) {
|
|
143
161
|
//just filter - no paging
|
|
144
|
-
menuItems.splice(0, 0, <Horizontal key='$
|
|
145
|
-
{
|
|
162
|
+
menuItems.splice(0, 0, <Horizontal key='$search'>
|
|
163
|
+
<Search defaultValue={myLevelFilter || ""} onChangeDeferred={(newValue) => {
|
|
164
|
+
const s = jsonClone(filterPerLevel);
|
|
165
|
+
s[level] = newValue ? newValue.toLowerCase() : "";
|
|
166
|
+
setFilterPerLevel(s);
|
|
167
|
+
}} />
|
|
146
168
|
</Horizontal>);
|
|
147
169
|
}
|
|
148
170
|
return menuItems;
|
package/src/controls/search.tsx
CHANGED
package/src/helpers/hooks.tsx
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
|
+
import { makeStyles } from "@fluentui/react-components";
|
|
1
2
|
import { isFunction, isNotEmptyArray, isNullOrEmptyString, isPrimitiveValue, jsonClone, jsonStringify, LoggerLevel, objectsEqual, wrapFunction } from "@kwiz/common";
|
|
2
|
-
import { MutableRefObject, SetStateAction, useCallback, useEffect, useRef, useState } from "react";
|
|
3
|
+
import { HTMLAttributes, MutableRefObject, SetStateAction, useCallback, useEffect, useRef, useState } from "react";
|
|
3
4
|
import { GetLogger } from "../_modules/config";
|
|
5
|
+
import { mixins } from "../styles/styles";
|
|
4
6
|
|
|
5
7
|
/** Empty array ensures that effect is only run on mount */
|
|
6
8
|
export const useEffectOnlyOnMount = [];
|
|
@@ -139,4 +141,23 @@ export function useRefWithState<T>(initialValue?: T, stateOptions: stateExOption
|
|
|
139
141
|
/** for setting on element: ref={e.set} */
|
|
140
142
|
set: setRef
|
|
141
143
|
};
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
const useStyles = makeStyles({
|
|
147
|
+
clickable: mixins.clickable,
|
|
148
|
+
});
|
|
149
|
+
|
|
150
|
+
/** return props to make div appear as clickable, and accept enter key as click */
|
|
151
|
+
export function useClickableDiv() {
|
|
152
|
+
const cssNames = useStyles();
|
|
153
|
+
|
|
154
|
+
const props: HTMLAttributes<HTMLDivElement> = {
|
|
155
|
+
className: cssNames.clickable,
|
|
156
|
+
tabIndex: 0,
|
|
157
|
+
onKeyDown: e => {
|
|
158
|
+
if (e.key === "Enter") (e.target as HTMLDivElement).click();
|
|
159
|
+
}
|
|
160
|
+
};
|
|
161
|
+
|
|
162
|
+
return props;
|
|
142
163
|
}
|