@kwiz/fluentui 1.0.36 → 1.0.38
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/controls/accordion.js +3 -7
- package/dist/controls/accordion.js.map +1 -1
- package/dist/controls/dropdown.js +8 -2
- package/dist/controls/dropdown.js.map +1 -1
- package/dist/controls/menu.d.ts +4 -4
- package/dist/controls/menu.js +16 -7
- package/dist/controls/menu.js.map +1 -1
- package/dist/controls/search.js +10 -2
- package/dist/controls/search.js.map +1 -1
- package/dist/styles/styles.d.ts +0 -1
- package/dist/styles/styles.js +0 -1
- package/dist/styles/styles.js.map +1 -1
- package/package.json +1 -1
- package/src/controls/accordion.tsx +1 -6
- package/src/controls/dropdown.tsx +10 -2
- package/src/controls/menu.tsx +20 -9
- package/src/controls/search.tsx +11 -3
- package/src/styles/styles.ts +0 -1
|
@@ -1,12 +1,11 @@
|
|
|
1
|
-
import { jsx as _jsx,
|
|
2
|
-
import { makeStyles
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { makeStyles } from "@fluentui/react-components";
|
|
3
3
|
import { ChevronRightRegular } from "@fluentui/react-icons";
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import { KnownClassNames } from "../styles/styles";
|
|
6
6
|
import { ButtonEX } from "./button";
|
|
7
7
|
import { DividerEX } from "./divider";
|
|
8
8
|
import { Horizontal } from "./horizontal";
|
|
9
|
-
import { Section } from "./section";
|
|
10
9
|
import { Vertical } from "./vertical";
|
|
11
10
|
const useStyles = makeStyles({
|
|
12
11
|
opened: {
|
|
@@ -24,14 +23,11 @@ const useStyles = makeStyles({
|
|
|
24
23
|
},
|
|
25
24
|
body: {
|
|
26
25
|
overflow: "auto",
|
|
27
|
-
},
|
|
28
|
-
indent: {
|
|
29
|
-
width: tokens.spacingHorizontalL
|
|
30
26
|
}
|
|
31
27
|
});
|
|
32
28
|
export const AccordionEX = (props) => {
|
|
33
29
|
const classes = useStyles();
|
|
34
30
|
const [opened, setOpened] = React.useState(props.opened || props.groups[0].key);
|
|
35
|
-
return (_jsx(Vertical, { main: true, css: [classes.root, props.fillHeight && classes.rootFill, KnownClassNames.accordion], children: props.groups.map(group => _jsxs(React.Fragment, { children: [_jsx(ButtonEX, { className: `${classes.header} ${KnownClassNames.accordionHeader} ${opened === group.key ? ` ${KnownClassNames.isOpen}` : ''}`, icon: _jsx(ChevronRightRegular, { className: opened === group.key ? classes.opened : '' }), title: group.title, showTitleWithIcon: true, dontCenterText: true, onClick: () => setOpened(group.key) }), _jsx(DividerEX, {}), group.key === opened && _jsxs(_Fragment, { children: [
|
|
31
|
+
return (_jsx(Vertical, { main: true, css: [classes.root, props.fillHeight && classes.rootFill, KnownClassNames.accordion], children: props.groups.map(group => _jsxs(React.Fragment, { children: [_jsx(ButtonEX, { className: `${classes.header} ${KnownClassNames.accordionHeader} ${opened === group.key ? ` ${KnownClassNames.isOpen}` : ''}`, icon: _jsx(ChevronRightRegular, { className: opened === group.key ? classes.opened : '' }), title: group.title, showTitleWithIcon: true, dontCenterText: true, onClick: () => setOpened(group.key) }), _jsx(DividerEX, {}), group.key === opened && _jsxs(_Fragment, { children: [_jsx(Horizontal, { main: true, css: [classes.body, KnownClassNames.accordionBodyWrapper], children: _jsx(Vertical, { main: true, css: [KnownClassNames.accordionBody], children: group.content }) }), _jsx(DividerEX, {})] })] }, group.key)) }));
|
|
36
32
|
};
|
|
37
33
|
//# sourceMappingURL=accordion.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../src/controls/accordion.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../src/controls/accordion.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,MAAM,EAAE;QACJ,SAAS,EAAE,eAAe;QAC1B,UAAU,EAAE,0BAA0B;KACzC;IACD,MAAM,EAAE;QACJ,WAAW,EAAE,CAAC;KACjB;IACD,IAAI,EAAE;QACF,SAAS,EAAE,MAAM;KACpB;IACD,QAAQ,EAAE;QACN,SAAS,EAAE,MAAM;KACpB;IACD,IAAI,EAAE;QACF,QAAQ,EAAE,MAAM;KACnB;CACJ,CAAC,CAAC;AAaH,MAAM,CAAC,MAAM,WAAW,GAAoC,CAAC,KAAK,EAAE,EAAE;IAClE,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAC5B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;IAChF,OAAO,CAAC,KAAC,QAAQ,IAAC,IAAI,QAAC,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,UAAU,IAAI,OAAO,CAAC,QAAQ,EAAE,eAAe,CAAC,SAAS,CAAC,YACtG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,MAAC,KAAK,CAAC,QAAQ,eACtC,KAAC,QAAQ,IAAC,SAAS,EAAE,GAAG,OAAO,CAAC,MAAM,IAAI,eAAe,CAAC,eAAe,IAAI,MAAM,KAAK,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,eAAe,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,EACnI,IAAI,EAAE,KAAC,mBAAmB,IAAC,SAAS,EAAE,MAAM,KAAK,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,GAAI,EACpF,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,iBAAiB,QAAC,cAAc,QACpD,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,GACrC,EACF,KAAC,SAAS,KAAG,EACZ,KAAK,CAAC,GAAG,KAAK,MAAM,IAAI,8BACrB,KAAC,UAAU,IAAC,IAAI,QAAC,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,eAAe,CAAC,oBAAoB,CAAC,YACtE,KAAC,QAAQ,IAAC,IAAI,QAAC,GAAG,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,YAC9C,KAAK,CAAC,OAAO,GACP,GACF,EACb,KAAC,SAAS,KAAG,IACd,KAdyC,KAAK,CAAC,GAAG,CAexC,CAAC,GACX,CACV,CAAC;AACN,CAAC,CAAA"}
|
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Dropdown, Option } from '@fluentui/react-components';
|
|
2
|
+
import { Dropdown, makeStyles, mergeClasses, Option } from '@fluentui/react-components';
|
|
3
3
|
import { filterEmptyEntries, firstOrNull, isNullOrUndefined } from '@kwiz/common';
|
|
4
4
|
import React from 'react';
|
|
5
5
|
import { useKWIZFluentContext } from '../helpers/context';
|
|
6
|
+
const useStyles = makeStyles({
|
|
7
|
+
root: {
|
|
8
|
+
minWidth: "auto"
|
|
9
|
+
},
|
|
10
|
+
});
|
|
6
11
|
/** get a DropdownEX typed with forward ref. Usage:
|
|
7
12
|
* const MyDropdownEX = DropdownEX3<myKeyType, myDataType>();
|
|
8
13
|
* ...
|
|
@@ -10,6 +15,7 @@ import { useKWIZFluentContext } from '../helpers/context';
|
|
|
10
15
|
*/
|
|
11
16
|
export function getDropdownEX() {
|
|
12
17
|
return React.forwardRef((props, ref) => {
|
|
18
|
+
const classes = useStyles();
|
|
13
19
|
const ctx = useKWIZFluentContext();
|
|
14
20
|
const selected = Array.isArray(props.selected) ? props.selected : isNullOrUndefined(props.selected) ? [] : [props.selected];
|
|
15
21
|
//sometimes control will lose value when re-rendered
|
|
@@ -19,7 +25,7 @@ export function getDropdownEX() {
|
|
|
19
25
|
let v = firstOrNull(props.items, i => i.key === s);
|
|
20
26
|
return v ? v.value : '';
|
|
21
27
|
})).join(', ');
|
|
22
|
-
return (_jsx(Dropdown, Object.assign({}, props, { onSelect: undefined, ref: ref, clearable: !props.required && !props.multiselect, appearance: ctx.inputAppearance, mountNode: ctx.mountNode, selectedOptions: selected, value: text, onOptionSelect: (e, data) => {
|
|
28
|
+
return (_jsx(Dropdown, Object.assign({}, props, { onSelect: undefined, className: mergeClasses(classes.root, props.className), ref: ref, clearable: !props.required && !props.multiselect, appearance: ctx.inputAppearance, mountNode: ctx.mountNode, selectedOptions: selected, value: text, onOptionSelect: (e, data) => {
|
|
23
29
|
let o = firstOrNull(props.items, i => i.key === data.optionValue);
|
|
24
30
|
if (props.multiselect) {
|
|
25
31
|
let current = data.selectedOptions.map(s => firstOrNull(props.items, i => i.key === s));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../src/controls/dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../src/controls/dropdown.tsx"],"names":[],"mappings":"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"}
|
package/dist/controls/menu.d.ts
CHANGED
|
@@ -25,10 +25,10 @@ interface IProps {
|
|
|
25
25
|
menuListProps?: MenuListProps;
|
|
26
26
|
trigger: JSX.Element | string | ButtonEXProps;
|
|
27
27
|
items: iMenuItemEX[];
|
|
28
|
-
/** default 8
|
|
29
|
-
filterThreshold?: number;
|
|
30
|
-
/** default 8,
|
|
31
|
-
pageSize?: number;
|
|
28
|
+
/** default 8 null/false to disable */
|
|
29
|
+
filterThreshold?: number | false;
|
|
30
|
+
/** default 8, null/false to disable */
|
|
31
|
+
pageSize?: number | false;
|
|
32
32
|
}
|
|
33
33
|
export declare const MenuEx: React.FunctionComponent<React.PropsWithChildren<IProps>>;
|
|
34
34
|
export {};
|
package/dist/controls/menu.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Menu, MenuDivider, MenuGroup, MenuGroupHeader, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-components';
|
|
2
|
+
import { Menu, MenuDivider, MenuGroup, MenuGroupHeader, MenuItem, MenuList, MenuPopover, menuPopoverClassNames, MenuTrigger } from '@fluentui/react-components';
|
|
3
3
|
import { ChevronLeftRegular, ChevronRightRegular } from '@fluentui/react-icons';
|
|
4
4
|
import { isNotEmptyArray, isNotEmptyString, isNullOrEmptyString, isNullOrUndefined, isNumber, isString, isUndefined, jsonClone } from '@kwiz/common';
|
|
5
|
+
import React from 'react';
|
|
5
6
|
import { useKWIZFluentContext } from '../helpers/context';
|
|
6
7
|
import { useStateEX } from '../helpers/hooks';
|
|
7
8
|
import { ButtonEX } from './button';
|
|
@@ -12,15 +13,23 @@ export const MenuEx = (props) => {
|
|
|
12
13
|
const ctx = useKWIZFluentContext();
|
|
13
14
|
const [startIndexPerLevel, setStartIndexPerLevel] = useStateEX({});
|
|
14
15
|
const [filterPerLevel, setFilterPerLevel] = useStateEX({});
|
|
15
|
-
let pageSize = isUndefined(props.pageSize) ? 8 : props.pageSize;
|
|
16
|
-
let filterThreshold = isUndefined(props.filterThreshold) ? 8 : props.filterThreshold;
|
|
17
|
-
if (!isNumber(pageSize))
|
|
18
|
-
pageSize = 99999999999;
|
|
19
|
-
if (!isNumber(filterThreshold))
|
|
20
|
-
filterThreshold = 99999999999;
|
|
16
|
+
let pageSize = isUndefined(props.pageSize) ? 8 : isNumber(props.pageSize) ? props.pageSize : 99999999999;
|
|
17
|
+
let filterThreshold = isUndefined(props.filterThreshold) ? 8 : isNumber(props.filterThreshold) ? props.filterThreshold : 99999999999;
|
|
21
18
|
//when hovering over sub menu the parent would close - have menu trigger keep open on the parent level
|
|
22
19
|
const [keepOpen, setKeepOpen] = useStateEX({});
|
|
23
20
|
const [opened, setOpened] = useStateEX({});
|
|
21
|
+
React.useEffect(() => {
|
|
22
|
+
window.setTimeout(() => {
|
|
23
|
+
var menus = document.querySelectorAll(`.${menuPopoverClassNames.root}`);
|
|
24
|
+
menus.forEach((menu) => {
|
|
25
|
+
var rect = menu.getBoundingClientRect();
|
|
26
|
+
if (rect.bottom > document.documentElement.clientHeight) {
|
|
27
|
+
menu.style.overflow = "auto";
|
|
28
|
+
menu.style.height = `${rect.height - (rect.bottom - document.documentElement.clientHeight)}px`;
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
}, 100);
|
|
32
|
+
}, [opened]);
|
|
24
33
|
function renderItems(items, level) {
|
|
25
34
|
const myLevelFilter = filterPerLevel[level];
|
|
26
35
|
//get rid of empty/null items
|
|
@@ -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,EAA+B,WAAW,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../src/controls/menu.tsx"],"names":[],"mappings":"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"}
|
package/dist/controls/search.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Input, makeStyles } from '@fluentui/react-components';
|
|
2
|
+
import { Input, makeStyles, mergeClasses } from '@fluentui/react-components';
|
|
3
3
|
import { DismissRegular, SearchRegular } from "@fluentui/react-icons";
|
|
4
4
|
import { debounce, isFunction, isNullOrEmptyString, isUndefined } from '@kwiz/common';
|
|
5
5
|
import React, { useState } from 'react';
|
|
@@ -10,6 +10,14 @@ const logger = GetLogger("Search");
|
|
|
10
10
|
const useStyles = makeStyles({
|
|
11
11
|
main: mixins.main,
|
|
12
12
|
clickable: mixins.clickable,
|
|
13
|
+
root: {
|
|
14
|
+
paddingLeft: 0
|
|
15
|
+
},
|
|
16
|
+
searchIcon: {
|
|
17
|
+
position: "absolute",
|
|
18
|
+
left: '5px',
|
|
19
|
+
top: '5px'
|
|
20
|
+
},
|
|
13
21
|
});
|
|
14
22
|
/** value is set on first load. to change the value after it was first set - change the compoenet's key. */
|
|
15
23
|
export const Search = (props) => {
|
|
@@ -37,7 +45,7 @@ export const Search = (props) => {
|
|
|
37
45
|
//todo: bug: setting value does not sync into the text box
|
|
38
46
|
setResetKey(resetKey + 1);
|
|
39
47
|
}, [props.resetValue]);
|
|
40
|
-
return (_jsx(Input, Object.assign({}, props, { value: value, onChange: (e, data) => setValue(data.value), className: props.main
|
|
48
|
+
return (_jsx(Input, Object.assign({}, props, { value: value, onChange: (e, data) => setValue(data.value), className: mergeClasses(cssNames.root, props.main && cssNames.main), contentBefore: !isNullOrEmptyString(value) ? undefined : _jsx(SearchRegular, { className: cssNames.searchIcon }), contentAfter: isNullOrEmptyString(value)
|
|
41
49
|
? undefined
|
|
42
50
|
: _jsx(DismissRegular, { className: cssNames.clickable, onClick: () => {
|
|
43
51
|
setValue("");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"search.js","sourceRoot":"","sources":["../../src/controls/search.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAc,UAAU,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"search.js","sourceRoot":"","sources":["../../src/controls/search.tsx"],"names":[],"mappings":"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"}
|
package/dist/styles/styles.d.ts
CHANGED
|
@@ -18,7 +18,6 @@ export declare const KnownClassNames: {
|
|
|
18
18
|
accordionHeader: string;
|
|
19
19
|
accordionBody: string;
|
|
20
20
|
accordionBodyWrapper: string;
|
|
21
|
-
accordionBodyIndent: string;
|
|
22
21
|
isOpen: string;
|
|
23
22
|
};
|
|
24
23
|
export declare const useCommonStyles: () => Record<"printShow" | "printHide", string>;
|
package/dist/styles/styles.js
CHANGED
|
@@ -58,7 +58,6 @@ export const KnownClassNames = {
|
|
|
58
58
|
accordionHeader: 'kfui-accordion-header',
|
|
59
59
|
accordionBody: 'kfui-accordion-body',
|
|
60
60
|
accordionBodyWrapper: 'kfui-accordion-body-wrapper',
|
|
61
|
-
accordionBodyIndent: 'kfui-accordion-indent',
|
|
62
61
|
isOpen: 'is-opened',
|
|
63
62
|
};
|
|
64
63
|
export const useCommonStyles = makeStyles({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/styles/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAE9E,MAAM,KAAQ,MAAM,CAsDnB;AAtDD,WAAc,MAAM;IACH,WAAI,GAAiB;QAC9B,UAAU,EAAE,CAAC;QACb,QAAQ,EAAE,CAAC;KACd,CAAC;IACW,gBAAS,GAAiB;QACnC,MAAM,EAAE,SAAS;QACjB,CAAC,SAAS,CAAC,EAAE;YACT,MAAM,EAAE,SAAS;SACpB;KACJ,CAAA;IACD,MAAM,GAAG,GAAiB;QACtB,OAAO,EAAE,MAAM,CAAC,kBAAkB;QAClC,YAAY,EAAE,MAAM,CAAC,kBAAkB;QACvC,SAAS,EAAE,MAAM,CAAC,OAAO;QACzB,MAAM,EAAE,MAAM,CAAC,oBAAoB;KACtC,CAAA;IACY,YAAK,mCACX,GAAG;QACN,wBAAwB;QACxB,QAAQ,EAAE,UAAU;QACpB,wBAAwB;QACxB,QAAQ,EAAE,KAAK;QACf,8BAA8B;QAC9B,SAAS,EAAE,QAAQ,EAEnB,CAAC,OAAO,CAAC,EAAE;YACP,QAAQ,EAAE,MAAM;SACnB,GACJ,CAAA;IAEY,WAAI,GAAiB;QAC9B,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,QAAQ;QAClB,MAAM,EAAE,MAAM,CAAC,gBAAgB;QAC/B,SAAS,EAAE,MAAM,CAAC,gBAAgB;KACrC,CAAA;IAEY,WAAI,GAAiB;QAC9B,QAAQ,EAAE,MAAM;KACnB,CAAA;IACY,YAAK,GAAiB;QAC/B,MAAM,EAAE,CAAC;QACT,SAAS,EAAE,CAAC;KACf,CAAA;IACY,eAAQ,GAAiB;QAClC,UAAU,EAAE,QAAQ;QACpB,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;KAC3B,CAAA;IAED,qCAAqC;IACrC,IAAI;AACR,CAAC,EAtDa,MAAM,KAAN,MAAM,QAsDnB;AAED,MAAM,CAAC,MAAM,eAAe,GAAG;IAC3B,KAAK,EAAE,YAAY;IACnB,OAAO,EAAE,cAAc;IACvB,QAAQ,EAAE,eAAe;IACzB,UAAU,EAAE,iBAAiB;IAC7B,IAAI,EAAE,WAAW;IACjB,SAAS,EAAE,gBAAgB;IAC3B,eAAe,EAAE,uBAAuB;IACxC,aAAa,EAAE,qBAAqB;IACpC,oBAAoB,EAAE,6BAA6B;IACnD,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/styles/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAE9E,MAAM,KAAQ,MAAM,CAsDnB;AAtDD,WAAc,MAAM;IACH,WAAI,GAAiB;QAC9B,UAAU,EAAE,CAAC;QACb,QAAQ,EAAE,CAAC;KACd,CAAC;IACW,gBAAS,GAAiB;QACnC,MAAM,EAAE,SAAS;QACjB,CAAC,SAAS,CAAC,EAAE;YACT,MAAM,EAAE,SAAS;SACpB;KACJ,CAAA;IACD,MAAM,GAAG,GAAiB;QACtB,OAAO,EAAE,MAAM,CAAC,kBAAkB;QAClC,YAAY,EAAE,MAAM,CAAC,kBAAkB;QACvC,SAAS,EAAE,MAAM,CAAC,OAAO;QACzB,MAAM,EAAE,MAAM,CAAC,oBAAoB;KACtC,CAAA;IACY,YAAK,mCACX,GAAG;QACN,wBAAwB;QACxB,QAAQ,EAAE,UAAU;QACpB,wBAAwB;QACxB,QAAQ,EAAE,KAAK;QACf,8BAA8B;QAC9B,SAAS,EAAE,QAAQ,EAEnB,CAAC,OAAO,CAAC,EAAE;YACP,QAAQ,EAAE,MAAM;SACnB,GACJ,CAAA;IAEY,WAAI,GAAiB;QAC9B,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,QAAQ;QAClB,MAAM,EAAE,MAAM,CAAC,gBAAgB;QAC/B,SAAS,EAAE,MAAM,CAAC,gBAAgB;KACrC,CAAA;IAEY,WAAI,GAAiB;QAC9B,QAAQ,EAAE,MAAM;KACnB,CAAA;IACY,YAAK,GAAiB;QAC/B,MAAM,EAAE,CAAC;QACT,SAAS,EAAE,CAAC;KACf,CAAA;IACY,eAAQ,GAAiB;QAClC,UAAU,EAAE,QAAQ;QACpB,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;KAC3B,CAAA;IAED,qCAAqC;IACrC,IAAI;AACR,CAAC,EAtDa,MAAM,KAAN,MAAM,QAsDnB;AAED,MAAM,CAAC,MAAM,eAAe,GAAG;IAC3B,KAAK,EAAE,YAAY;IACnB,OAAO,EAAE,cAAc;IACvB,QAAQ,EAAE,eAAe;IACzB,UAAU,EAAE,iBAAiB;IAC7B,IAAI,EAAE,WAAW;IACjB,SAAS,EAAE,gBAAgB;IAC3B,eAAe,EAAE,uBAAuB;IACxC,aAAa,EAAE,qBAAqB;IACpC,oBAAoB,EAAE,6BAA6B;IACnD,MAAM,EAAE,WAAW;CACtB,CAAA;AACD,MAAM,CAAC,MAAM,eAAe,GAAG,UAAU,CAAC;IACtC,SAAS,EAAE;QACP,OAAO,EAAE,MAAM;QACf,CAAC,gBAAgB,eAAe,CAAC,KAAK,GAAG,CAAC,EAAE;YACxC,OAAO,EAAE,OAAO;SACnB;QACD,cAAc,EAAE;YACZ,OAAO,EAAE,OAAO;SACnB;KACJ;IACD,SAAS,EAAE;QACP,CAAC,gBAAgB,eAAe,CAAC,KAAK,GAAG,CAAC,EAAE;YACxC,OAAO,EAAE,iBAAiB;SAC7B;QACD,cAAc,EAAE;YACZ,OAAO,EAAE,iBAAiB;SAC7B;KACJ;CACJ,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG;IACvB,WAAW,EAAE,GAAG;IAChB,SAAS,EAAE,GAAG;IACd,cAAc,EAAE,GAAG;CACtB,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
|
-
import { makeStyles
|
|
1
|
+
import { makeStyles } from "@fluentui/react-components";
|
|
2
2
|
import { ChevronRightRegular } from "@fluentui/react-icons";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { KnownClassNames } from "../styles/styles";
|
|
5
5
|
import { ButtonEX } from "./button";
|
|
6
6
|
import { DividerEX } from "./divider";
|
|
7
7
|
import { Horizontal } from "./horizontal";
|
|
8
|
-
import { Section } from "./section";
|
|
9
8
|
import { Vertical } from "./vertical";
|
|
10
9
|
|
|
11
10
|
const useStyles = makeStyles({
|
|
@@ -24,9 +23,6 @@ const useStyles = makeStyles({
|
|
|
24
23
|
},
|
|
25
24
|
body: {
|
|
26
25
|
overflow: "auto",
|
|
27
|
-
},
|
|
28
|
-
indent: {
|
|
29
|
-
width: tokens.spacingHorizontalL
|
|
30
26
|
}
|
|
31
27
|
});
|
|
32
28
|
|
|
@@ -54,7 +50,6 @@ export const AccordionEX: React.FunctionComponent<iProps> = (props) => {
|
|
|
54
50
|
<DividerEX />
|
|
55
51
|
{group.key === opened && <>
|
|
56
52
|
<Horizontal main css={[classes.body, KnownClassNames.accordionBodyWrapper]}>
|
|
57
|
-
<Section css={[classes.indent, KnownClassNames.accordionBodyIndent]}></Section>
|
|
58
53
|
<Vertical main css={[KnownClassNames.accordionBody]}>
|
|
59
54
|
{group.content}
|
|
60
55
|
</Vertical>
|
|
@@ -1,8 +1,15 @@
|
|
|
1
|
-
import { Dropdown, DropdownProps, Option } from '@fluentui/react-components';
|
|
1
|
+
import { Dropdown, DropdownProps, makeStyles, mergeClasses, Option } from '@fluentui/react-components';
|
|
2
2
|
import { filterEmptyEntries, firstOrNull, isNullOrUndefined } from '@kwiz/common';
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { useKWIZFluentContext } from '../helpers/context';
|
|
5
5
|
|
|
6
|
+
const useStyles = makeStyles({
|
|
7
|
+
root: {
|
|
8
|
+
minWidth: "auto"
|
|
9
|
+
},
|
|
10
|
+
});
|
|
11
|
+
|
|
12
|
+
|
|
6
13
|
type ForwardProps = Omit<DropdownProps, "onSelect" | "selectedOptions" | "clearable">;
|
|
7
14
|
|
|
8
15
|
interface IProps<dataType, keyType extends string = string> extends ForwardProps {
|
|
@@ -27,6 +34,7 @@ interface IProps<dataType, keyType extends string = string> extends ForwardProps
|
|
|
27
34
|
*/
|
|
28
35
|
export function getDropdownEX<keyType extends string = string, dataType = never>() {
|
|
29
36
|
return React.forwardRef<HTMLButtonElement, (IProps<dataType, keyType>)>((props, ref) => {
|
|
37
|
+
const classes = useStyles();
|
|
30
38
|
const ctx = useKWIZFluentContext();
|
|
31
39
|
const selected: keyType[] = Array.isArray(props.selected) ? props.selected : isNullOrUndefined(props.selected) ? [] : [props.selected];
|
|
32
40
|
|
|
@@ -39,7 +47,7 @@ export function getDropdownEX<keyType extends string = string, dataType = never>
|
|
|
39
47
|
})).join(', ');
|
|
40
48
|
|
|
41
49
|
return (
|
|
42
|
-
<Dropdown {...{ ...props, onSelect: undefined }} ref={ref} clearable={!props.required && !props.multiselect}
|
|
50
|
+
<Dropdown {...{ ...props, onSelect: undefined }} className={mergeClasses(classes.root, props.className)} ref={ref} clearable={!props.required && !props.multiselect}
|
|
43
51
|
appearance={ctx.inputAppearance} mountNode={ctx.mountNode}
|
|
44
52
|
selectedOptions={selected} value={text} onOptionSelect={(e, data) => {
|
|
45
53
|
let o = firstOrNull(props.items, i => i.key === data.optionValue);
|
package/src/controls/menu.tsx
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Menu, MenuDivider, MenuGroup, MenuGroupHeader, MenuItem, MenuList, MenuListProps, MenuPopover, MenuPopoverProps, MenuProps, MenuTrigger } from '@fluentui/react-components';
|
|
1
|
+
import { Menu, MenuDivider, MenuGroup, MenuGroupHeader, MenuItem, MenuList, MenuListProps, MenuPopover, menuPopoverClassNames, MenuPopoverProps, MenuProps, MenuTrigger } from '@fluentui/react-components';
|
|
2
2
|
import { ChevronLeftRegular, ChevronRightRegular } from '@fluentui/react-icons';
|
|
3
3
|
import { IDictionary, isNotEmptyArray, isNotEmptyString, isNullOrEmptyString, isNullOrUndefined, isNumber, isString, isUndefined, jsonClone } from '@kwiz/common';
|
|
4
4
|
import React from 'react';
|
|
@@ -34,24 +34,35 @@ interface IProps {
|
|
|
34
34
|
menuListProps?: MenuListProps;
|
|
35
35
|
trigger: JSX.Element | string | ButtonEXProps;
|
|
36
36
|
items: iMenuItemEX[];
|
|
37
|
-
/** default 8
|
|
38
|
-
filterThreshold?: number;
|
|
39
|
-
/** default 8,
|
|
40
|
-
pageSize?: number;
|
|
37
|
+
/** default 8 null/false to disable */
|
|
38
|
+
filterThreshold?: number | false;
|
|
39
|
+
/** default 8, null/false to disable */
|
|
40
|
+
pageSize?: number | false;
|
|
41
41
|
}
|
|
42
42
|
export const MenuEx: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
|
|
43
43
|
const ctx = useKWIZFluentContext();
|
|
44
44
|
const [startIndexPerLevel, setStartIndexPerLevel] = useStateEX<IDictionary<number>>({});
|
|
45
45
|
const [filterPerLevel, setFilterPerLevel] = useStateEX<IDictionary<string>>({});
|
|
46
|
-
let pageSize = isUndefined(props.pageSize) ? 8 : props.pageSize;
|
|
47
|
-
let filterThreshold = isUndefined(props.filterThreshold) ? 8 : props.filterThreshold;
|
|
48
|
-
if (!isNumber(pageSize)) pageSize = 99999999999;
|
|
49
|
-
if (!isNumber(filterThreshold)) filterThreshold = 99999999999;
|
|
46
|
+
let pageSize: number = isUndefined(props.pageSize) ? 8 : isNumber(props.pageSize) ? props.pageSize : 99999999999;
|
|
47
|
+
let filterThreshold: number = isUndefined(props.filterThreshold) ? 8 : isNumber(props.filterThreshold) ? props.filterThreshold : 99999999999;
|
|
50
48
|
|
|
51
49
|
//when hovering over sub menu the parent would close - have menu trigger keep open on the parent level
|
|
52
50
|
const [keepOpen, setKeepOpen] = useStateEX<IDictionary<boolean>>({});
|
|
53
51
|
const [opened, setOpened] = useStateEX<IDictionary<boolean>>({});
|
|
54
52
|
|
|
53
|
+
React.useEffect(() => {
|
|
54
|
+
window.setTimeout(() => {
|
|
55
|
+
var menus = document.querySelectorAll(`.${menuPopoverClassNames.root}`);
|
|
56
|
+
menus.forEach((menu: HTMLDivElement) => {
|
|
57
|
+
var rect = menu.getBoundingClientRect();
|
|
58
|
+
if (rect.bottom > document.documentElement.clientHeight) {
|
|
59
|
+
menu.style.overflow = "auto";
|
|
60
|
+
menu.style.height = `${rect.height - (rect.bottom - document.documentElement.clientHeight)}px`;
|
|
61
|
+
}
|
|
62
|
+
});
|
|
63
|
+
}, 100);
|
|
64
|
+
}, [opened]);
|
|
65
|
+
|
|
55
66
|
function renderItems(items: iMenuItemEX[], level: number) {
|
|
56
67
|
const myLevelFilter = filterPerLevel[level];
|
|
57
68
|
//get rid of empty/null items
|
package/src/controls/search.tsx
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Input, InputProps, makeStyles } from '@fluentui/react-components';
|
|
1
|
+
import { Input, InputProps, makeStyles, mergeClasses } from '@fluentui/react-components';
|
|
2
2
|
import { DismissRegular, SearchRegular } from "@fluentui/react-icons";
|
|
3
3
|
import { debounce, isFunction, isNullOrEmptyString, isUndefined } from '@kwiz/common';
|
|
4
4
|
import React, { useState } from 'react';
|
|
@@ -10,6 +10,14 @@ const logger = GetLogger("Search");
|
|
|
10
10
|
const useStyles = makeStyles({
|
|
11
11
|
main: mixins.main,
|
|
12
12
|
clickable: mixins.clickable,
|
|
13
|
+
root: {
|
|
14
|
+
paddingLeft: 0
|
|
15
|
+
},
|
|
16
|
+
searchIcon: {
|
|
17
|
+
position: "absolute",
|
|
18
|
+
left: '5px',
|
|
19
|
+
top: '5px'
|
|
20
|
+
},
|
|
13
21
|
})
|
|
14
22
|
|
|
15
23
|
interface IProps extends InputProps {
|
|
@@ -53,8 +61,8 @@ export const Search: React.FunctionComponent<React.PropsWithChildren<IProps>> =
|
|
|
53
61
|
|
|
54
62
|
return (
|
|
55
63
|
<Input key={resetKey} {...props} value={value} onChange={(e, data) => setValue(data.value)}
|
|
56
|
-
className={props.main
|
|
57
|
-
contentBefore={!isNullOrEmptyString(value) ? undefined : <SearchRegular />}
|
|
64
|
+
className={mergeClasses(cssNames.root, props.main && cssNames.main)}
|
|
65
|
+
contentBefore={!isNullOrEmptyString(value) ? undefined : <SearchRegular className={cssNames.searchIcon} />}
|
|
58
66
|
contentAfter={isNullOrEmptyString(value)
|
|
59
67
|
? undefined
|
|
60
68
|
: <DismissRegular className={cssNames.clickable} onClick={() => {
|
package/src/styles/styles.ts
CHANGED
|
@@ -66,7 +66,6 @@ export const KnownClassNames = {
|
|
|
66
66
|
accordionHeader: 'kfui-accordion-header',
|
|
67
67
|
accordionBody: 'kfui-accordion-body',
|
|
68
68
|
accordionBodyWrapper: 'kfui-accordion-body-wrapper',
|
|
69
|
-
accordionBodyIndent: 'kfui-accordion-indent',
|
|
70
69
|
isOpen: 'is-opened',
|
|
71
70
|
}
|
|
72
71
|
export const useCommonStyles = makeStyles({
|