@kwiz/fluentui 1.0.7 → 1.0.9
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/controls/button.d.ts +1 -0
- package/dist/controls/button.js +10 -0
- package/dist/controls/button.js.map +1 -1
- package/dist/controls/dropdown.js +4 -6
- package/dist/controls/dropdown.js.map +1 -1
- package/dist/controls/kwizoverflow.d.ts +13 -0
- package/dist/controls/kwizoverflow.js +45 -0
- package/dist/controls/kwizoverflow.js.map +1 -0
- package/dist/controls/please-wait.d.ts +1 -0
- package/dist/controls/please-wait.js +1 -1
- package/dist/controls/please-wait.js.map +1 -1
- package/dist/controls/toolbar.d.ts +12 -0
- package/dist/controls/toolbar.js +23 -0
- package/dist/controls/toolbar.js.map +1 -0
- package/dist/helpers/hooks.d.ts +10 -0
- package/dist/helpers/hooks.js +76 -1
- package/dist/helpers/hooks.js.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/controls/button.tsx +13 -0
- package/src/controls/dropdown.tsx +4 -6
- package/src/controls/kwizoverflow.tsx +103 -0
- package/src/controls/please-wait.tsx +2 -1
- package/src/controls/toolbar.tsx +49 -0
- package/src/helpers/{hooks.ts → hooks.tsx} +80 -1
- package/src/index.ts +2 -0
@@ -20,6 +20,7 @@ export declare const ButtonEXPrimary: React.ForwardRefExoticComponent<ButtonEXPr
|
|
20
20
|
export declare const ButtonEXDanger: React.ForwardRefExoticComponent<ButtonEXProps & React.RefAttributes<HTMLButtonElement>>;
|
21
21
|
export declare const ButtonEXSuccess: React.ForwardRefExoticComponent<ButtonEXProps & React.RefAttributes<HTMLButtonElement>>;
|
22
22
|
export declare const ButtonEXPrimarySubtle: React.ForwardRefExoticComponent<ButtonEXProps & React.RefAttributes<HTMLButtonElement>>;
|
23
|
+
export declare const ButtonEXDangerSubtle: React.ForwardRefExoticComponent<ButtonEXProps & React.RefAttributes<HTMLButtonElement>>;
|
23
24
|
export declare const CompoundButtonEX: React.ForwardRefExoticComponent<CompoundButtonEXProps & React.RefAttributes<HTMLButtonElement>>;
|
24
25
|
export declare const CompoundButtonEXSecondary: React.ForwardRefExoticComponent<CompoundButtonEXProps & React.RefAttributes<HTMLButtonElement>>;
|
25
26
|
export declare const CompoundButtonEXPrimary: React.ForwardRefExoticComponent<CompoundButtonEXProps & React.RefAttributes<HTMLButtonElement>>;
|
package/dist/controls/button.js
CHANGED
@@ -31,6 +31,12 @@ const useStyles = makeStyles({
|
|
31
31
|
color: tokens.colorBrandForeground1,
|
32
32
|
}
|
33
33
|
},
|
34
|
+
dangerSubtle: {
|
35
|
+
color: tokens.colorStatusWarningForeground2,
|
36
|
+
[`& .${compoundButtonClassNames.secondaryContent}`]: {
|
37
|
+
color: tokens.colorStatusWarningForeground1
|
38
|
+
}
|
39
|
+
}
|
34
40
|
});
|
35
41
|
export const ButtonEX = React.forwardRef((props, ref) => {
|
36
42
|
const [hover, setHover] = React.useState(false);
|
@@ -83,6 +89,10 @@ export const ButtonEXPrimarySubtle = React.forwardRef((props, ref) => {
|
|
83
89
|
const cssNames = useStyles();
|
84
90
|
return (_jsx(ButtonEX, Object.assign({ ref: ref, className: props.disabled ? undefined : cssNames.primarySubtle }, props, { children: props.children })));
|
85
91
|
});
|
92
|
+
export const ButtonEXDangerSubtle = React.forwardRef((props, ref) => {
|
93
|
+
const cssNames = useStyles();
|
94
|
+
return (_jsx(ButtonEX, Object.assign({ ref: ref, className: props.disabled ? undefined : cssNames.dangerSubtle }, props, { children: props.children })));
|
95
|
+
});
|
86
96
|
export const CompoundButtonEX = React.forwardRef((props, ref) => {
|
87
97
|
let title = props.title || props['aria-label'];
|
88
98
|
let tooltip = isString(props.secondaryContent) ? props.secondaryContent : title;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/controls/button.tsx"],"names":[],"mappings":"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"}
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/controls/button.tsx"],"names":[],"mappings":"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"}
|
@@ -9,12 +9,10 @@ function $DropdownEX(props, ref) {
|
|
9
9
|
//sometimes control will lose value when re-rendered
|
10
10
|
//use case: public forms when editing other fields after the dropdown was set
|
11
11
|
//re-set the text value manually to fix
|
12
|
-
let text = Array.isArray(props.selected)
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
})).join(', ')
|
17
|
-
: props.selected || "";
|
12
|
+
let text = filterEmptyEntries((Array.isArray(props.selected) ? props.selected : [props.selected]).map(s => {
|
13
|
+
let v = firstOrNull(props.items, i => i.key === s);
|
14
|
+
return v ? v.value : '';
|
15
|
+
})).join(', ');
|
18
16
|
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) => {
|
19
17
|
let o = firstOrNull(props.items, i => i.key === data.optionValue);
|
20
18
|
if (props.multiselect) {
|
@@ -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;AAC7E,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAClF,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,2BAA2B,EAAE,MAAM,oBAAoB,CAAC;AAmBjE,SAAS,WAAW,CAAoD,KAAgC,EAAE,GAA0C;IAChJ,MAAM,GAAG,GAAG,2BAA2B,EAAE,CAAC;IAC1C,MAAM,QAAQ,GAAc,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAEvI,oDAAoD;IACpD,6EAA6E;IAC7E,uCAAuC;IACvC,IAAI,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC
|
1
|
+
{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../src/controls/dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAClF,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,2BAA2B,EAAE,MAAM,oBAAoB,CAAC;AAmBjE,SAAS,WAAW,CAAoD,KAAgC,EAAE,GAA0C;IAChJ,MAAM,GAAG,GAAG,2BAA2B,EAAE,CAAC;IAC1C,MAAM,QAAQ,GAAc,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAEvI,oDAAoD;IACpD,6EAA6E;IAC7E,uCAAuC;IACvC,IAAI,IAAI,GAAG,kBAAkB,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;QACtG,IAAI,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC;QACnD,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;IAC3B,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEf,OAAO,CACH,KAAC,QAAQ,oBAAU,KAAK,IAAE,QAAQ,EAAE,SAAS,EAAI,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,WAAW,EACvG,UAAU,EAAE,GAAG,CAAC,eAAe,EAAE,SAAS,EAAE,GAAG,CAAC,SAAS,EACzD,eAAe,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE;YAChE,IAAI,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC;YAClE,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;gBACpB,IAAI,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;gBACxF,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;YAC/B,CAAC;;gBACI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;QAC3B,CAAC,YACA,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAC,MAAM,IAAa,KAAK,EAAE,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC,KAAK,YAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,IAAlE,CAAC,CAAC,GAAG,CAAuE,CAAC,IACzG,CAEd,CAAC;AACN,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC"}
|
@@ -0,0 +1,13 @@
|
|
1
|
+
interface IProps<ItemType> {
|
2
|
+
items: ItemType[];
|
3
|
+
getKey: (item: ItemType, index: number) => string;
|
4
|
+
getPriority?: (item: ItemType, index: number) => number;
|
5
|
+
renderItem: (item: ItemType, index: number, overflow?: boolean) => JSX.Element;
|
6
|
+
groupWrapper?: (children: React.ReactNode) => JSX.Element;
|
7
|
+
menuRef?: React.RefObject<HTMLButtonElement>;
|
8
|
+
menuWrapper?: (children: React.ReactNode) => JSX.Element;
|
9
|
+
menuTrigger?: (ref: React.RefObject<HTMLButtonElement>, overflowCount: number) => JSX.Element;
|
10
|
+
className?: string;
|
11
|
+
}
|
12
|
+
export declare const KWIZOverflow: <ItemType>(props: IProps<ItemType>) => import("react/jsx-runtime").JSX.Element;
|
13
|
+
export {};
|
@@ -0,0 +1,45 @@
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
+
import { Menu, MenuButton, MenuItem, MenuList, MenuPopover, MenuTrigger, Overflow, OverflowItem, useIsOverflowItemVisible, useOverflowMenu } from "@fluentui/react-components";
|
3
|
+
import { isNumber } from '@kwiz/common';
|
4
|
+
import { MoreHorizontalFilled } from "@fluentui/react-icons";
|
5
|
+
const OverflowMenu = (props) => {
|
6
|
+
const { ref, isOverflowing, overflowCount } = useOverflowMenu();
|
7
|
+
if (!isOverflowing) {
|
8
|
+
return null;
|
9
|
+
}
|
10
|
+
let menu = _jsxs(Menu, { children: [_jsx(MenuTrigger, { disableButtonEnhancement: true, children: props.menuTrigger
|
11
|
+
? props.menuTrigger(props.menuRef || ref, overflowCount)
|
12
|
+
: _jsx(MenuButton, { icon: _jsx(MoreHorizontalFilled, {}), ref: props.menuRef || ref, "aria-label": "More items", appearance: "subtle" }) }), _jsx(MenuPopover, { children: _jsx(MenuList, { children: props.items.map((item, index) => (_jsx(OverflowMenuItem, Object.assign({}, props, { item: item, index: index }), props.getKey(item, index)))) }) })] });
|
13
|
+
return (props.menuWrapper
|
14
|
+
? props.menuWrapper(menu)
|
15
|
+
: menu);
|
16
|
+
};
|
17
|
+
const OverflowMenuItem = (props) => {
|
18
|
+
const isVisible = useIsOverflowItemVisible(props.getKey(props.item, props.index));
|
19
|
+
if (isVisible) {
|
20
|
+
return null;
|
21
|
+
}
|
22
|
+
return (_jsx(MenuItem, { children: props.renderItem(props.item, props.index, true) }, props.getKey(props.item, props.index)));
|
23
|
+
};
|
24
|
+
export const KWIZOverflow = (props) => {
|
25
|
+
let content = [];
|
26
|
+
let addMenu = () => {
|
27
|
+
if (menuIndex >= 0)
|
28
|
+
content.splice(menuIndex, 0, _jsx(OverflowMenu, Object.assign({}, props), "overflow_menu"));
|
29
|
+
else
|
30
|
+
content.push(_jsx(OverflowMenu, Object.assign({}, props), "overflow_menu"));
|
31
|
+
};
|
32
|
+
let menuIndex = -1;
|
33
|
+
props.items.forEach((item, index) => {
|
34
|
+
//add the menu before the first item with priority
|
35
|
+
let priority = props.getPriority ? props.getPriority(item, index) : undefined;
|
36
|
+
if (isNumber(priority) && priority > 0)
|
37
|
+
menuIndex = index;
|
38
|
+
content.push(_jsx(OverflowItem, { id: props.getKey(item, index), priority: priority, children: props.renderItem(item, index) }, props.getKey(item, index)));
|
39
|
+
});
|
40
|
+
addMenu();
|
41
|
+
return (_jsx(Overflow, { minimumVisible: 2, padding: 60, children: _jsx("div", { style: { overflow: "hidden" }, className: props.className, children: props.groupWrapper
|
42
|
+
? props.groupWrapper(content)
|
43
|
+
: content }) }, `overflow_${props.items.length}`));
|
44
|
+
};
|
45
|
+
//# sourceMappingURL=kwizoverflow.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"kwizoverflow.js","sourceRoot":"","sources":["../../src/controls/kwizoverflow.tsx"],"names":[],"mappings":"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"}
|
@@ -3,7 +3,7 @@ import { Field, ProgressBar } from '@fluentui/react-components';
|
|
3
3
|
import { isFunction } from '@kwiz/common';
|
4
4
|
import { Prompter } from './prompt';
|
5
5
|
export const PleaseWait = (props) => {
|
6
|
-
const field = _jsx(Field, { validationMessage: "please wait...", validationState: "none", children: _jsx(ProgressBar, { value: props.step, max: props.max }) });
|
6
|
+
const field = _jsx(Field, { validationMessage: props.label || "please wait...", validationState: "none", children: _jsx(ProgressBar, { value: props.step, max: props.max }) });
|
7
7
|
return (props.contentOnly
|
8
8
|
? field
|
9
9
|
: _jsx(Prompter, { hideOk: true, hideCancel: !isFunction(props.onCancel), cancelButtonText: props.cancelText || 'cancel', onCancel: props.onCancel, children: field }));
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"please-wait.js","sourceRoot":"","sources":["../../src/controls/please-wait.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAkB,QAAQ,EAAE,MAAM,UAAU,CAAC;
|
1
|
+
{"version":3,"file":"please-wait.js","sourceRoot":"","sources":["../../src/controls/please-wait.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAkB,QAAQ,EAAE,MAAM,UAAU,CAAC;AAUpD,MAAM,CAAC,MAAM,UAAU,GAA6D,CAAC,KAAK,EAAE,EAAE;IAC1F,MAAM,KAAK,GAAG,KAAC,KAAK,IAAC,iBAAiB,EAAE,KAAK,CAAC,KAAK,IAAI,gBAAgB,EAAE,eAAe,EAAC,MAAM,YAC3F,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,GAAI,GAC9C,CAAC;IACT,OAAO,CAAC,KAAK,CAAC,WAAW;QACrB,CAAC,CAAC,KAAK;QACP,CAAC,CAAC,KAAC,QAAQ,IAAC,MAAM,QACd,UAAU,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC,EACvC,gBAAgB,EAAE,KAAK,CAAC,UAAU,IAAI,QAAQ,EAC9C,QAAQ,EAAE,KAAK,CAAC,QAAQ,YAAG,KAAK,GAAY,CACnD,CAAC;AACN,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAwD,EAAkB,EAAE,CAAC,CAAC;IAC3G,0BAA0B;IAC1B,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI;IAC9B,QAAQ,EAAE,KAAC,KAAK,IAAC,iBAAiB,EAAE,KAAK,CAAC,OAAO,EAAE,eAAe,EAAC,MAAM,YACrE,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,GAAI,GAC9C;CACX,CAAC,CAAC"}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
interface IProps {
|
3
|
+
/** toolbar buttons that may render or render in overflow */
|
4
|
+
buttonGroups: {
|
5
|
+
elm: JSX.Element;
|
6
|
+
overflowElement?: JSX.Element;
|
7
|
+
}[][];
|
8
|
+
/** side buttons that will always render, never overflow */
|
9
|
+
sideButtons?: JSX.Element;
|
10
|
+
}
|
11
|
+
export declare const ToolbarEX: React.FunctionComponent<IProps>;
|
12
|
+
export {};
|
@@ -0,0 +1,23 @@
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
+
import { Toolbar, ToolbarDivider, ToolbarGroup } from '@fluentui/react-components';
|
3
|
+
import { useCommonStyles } from '../styles/styles';
|
4
|
+
import { KWIZOverflow } from './kwizoverflow';
|
5
|
+
export const ToolbarEX = (props) => {
|
6
|
+
const commonCssNames = useCommonStyles();
|
7
|
+
let elements = [];
|
8
|
+
props.buttonGroups.forEach((group, groupIndex) => {
|
9
|
+
group.forEach((button, buttonIndex) => {
|
10
|
+
const mapped = Object.assign(Object.assign({}, button), { id: `m${groupIndex}-${buttonIndex}` });
|
11
|
+
if (buttonIndex === 0 && groupIndex > 0 && props.buttonGroups[groupIndex - 1].length > 0) {
|
12
|
+
//first button, not first group, and previous group was not empty
|
13
|
+
//add divider
|
14
|
+
mapped.overflowElement = mapped.overflowElement || mapped.elm;
|
15
|
+
//this way if button rendes it is with the divider, but if it is in overflow - there will be no divider
|
16
|
+
mapped.elm = _jsxs("span", { children: [_jsx(ToolbarDivider, { style: { display: 'inline-flex' } }), mapped.elm] });
|
17
|
+
}
|
18
|
+
elements.push(mapped);
|
19
|
+
});
|
20
|
+
});
|
21
|
+
return (_jsx(KWIZOverflow, { className: commonCssNames.printHide, items: elements, getKey: e => e.id, renderItem: (e, i, overflow) => overflow && e.overflowElement || e.elm, getPriority: e => e.priority || -1, groupWrapper: children => _jsxs(Toolbar, { "aria-label": "Default", style: { justifyContent: "space-between" }, children: [_jsx(ToolbarGroup, { role: "presentation", children: children }), _jsx(ToolbarGroup, { role: "presentation", children: props.sideButtons })] }) }));
|
22
|
+
};
|
23
|
+
//# sourceMappingURL=toolbar.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"toolbar.js","sourceRoot":"","sources":["../../src/controls/toolbar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAEnF,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQ9C,MAAM,CAAC,MAAM,SAAS,GAAoC,CAAC,KAAK,EAAE,EAAE;IAChE,MAAM,cAAc,GAAG,eAAe,EAAE,CAAC;IAEzC,IAAI,QAAQ,GAAyF,EAAE,CAAC;IACxG,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,UAAU,EAAE,EAAE;QAC7C,KAAK,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE;YAClC,MAAM,MAAM,mCAAQ,MAAM,KAAE,EAAE,EAAE,IAAI,UAAU,IAAI,WAAW,EAAE,GAAE,CAAC;YAClE,IAAI,WAAW,KAAK,CAAC,IAAI,UAAU,GAAG,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACvF,iEAAiE;gBACjE,aAAa;gBACb,MAAM,CAAC,eAAe,GAAG,MAAM,CAAC,eAAe,IAAI,MAAM,CAAC,GAAG,CAAC;gBAC9D,uGAAuG;gBACvG,MAAM,CAAC,GAAG,GAAG,2BACT,KAAC,cAAc,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,GAAI,EACpD,MAAM,CAAC,GAAG,IACR,CAAC;YAEZ,CAAC;YACD,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC1B,CAAC,CAAC,CAAA;IACN,CAAC,CAAC,CAAC;IAEH,OAAO,CACH,KAAC,YAAY,IAAC,SAAS,EAAE,cAAc,CAAC,SAAS,EAC7C,KAAK,EAAE,QAAQ,EACf,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EACjB,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,CAAC,QAAQ,IAAI,CAAC,CAAC,eAAe,IAAI,CAAC,CAAC,GAAG,EACtE,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,EAClC,YAAY,EAAE,QAAQ,CAAC,EAAE,CAAC,MAAC,OAAO,kBAAY,SAAS,EAAC,KAAK,EAAE,EAAE,cAAc,EAAE,eAAe,EAAE,aAC9F,KAAC,YAAY,IAAC,IAAI,EAAC,cAAc,YAC5B,QAAQ,GACE,EACf,KAAC,YAAY,IAAC,IAAI,EAAC,cAAc,YAC5B,KAAK,CAAC,WAAW,GACP,IACT,GACZ,CAAC,CAAC;AACZ,CAAC,CAAA"}
|
package/dist/helpers/hooks.d.ts
CHANGED
@@ -21,3 +21,13 @@ export declare function useWindowSize(): {
|
|
21
21
|
height: number;
|
22
22
|
};
|
23
23
|
export declare function useIsInPrint(): boolean;
|
24
|
+
/** set block message if you want to block nav.
|
25
|
+
* - call setMessage to add a blocker message
|
26
|
+
* - call onNav when you have internal navigation (open / close popups)
|
27
|
+
* - render the navPrompt control to your page
|
28
|
+
* FYI for page unload, most modern browsers won't show your message but a generic one instead. */
|
29
|
+
export declare function useBlockNav(): {
|
30
|
+
setMessage: (id: string, message?: string) => void;
|
31
|
+
onNav: (nav: () => void) => void;
|
32
|
+
navPrompt: import("react/jsx-runtime").JSX.Element;
|
33
|
+
};
|
package/dist/helpers/hooks.js
CHANGED
@@ -1,6 +1,8 @@
|
|
1
|
-
import {
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
+
import { isDebug, isFunction, isNotEmptyArray, isNullOrEmptyString, 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 { Prompter } from "../controls/prompt";
|
4
6
|
import { KnownClassNames } from "../styles/styles";
|
5
7
|
const logger = GetLogger("helpers/hooks");
|
6
8
|
/** Empty array ensures that effect is only run on mount */
|
@@ -170,4 +172,77 @@ export function useIsInPrint() {
|
|
170
172
|
}, useEffectOnlyOnMount);
|
171
173
|
return printMode;
|
172
174
|
}
|
175
|
+
/** set block message if you want to block nav.
|
176
|
+
* - call setMessage to add a blocker message
|
177
|
+
* - call onNav when you have internal navigation (open / close popups)
|
178
|
+
* - render the navPrompt control to your page
|
179
|
+
* FYI for page unload, most modern browsers won't show your message but a generic one instead. */
|
180
|
+
export function useBlockNav() {
|
181
|
+
const [, setBlockNavMessages, blockNavMessagesRef] = useStateEX({});
|
182
|
+
const [prompt, setPrompt] = useStateEX(null);
|
183
|
+
const getMessagesArr = useCallback(() => {
|
184
|
+
return Object.keys(blockNavMessagesRef.current).map(id => blockNavMessagesRef.current[id]);
|
185
|
+
}, useEffectOnlyOnMount);
|
186
|
+
const getMessages = useCallback(() => {
|
187
|
+
return getMessagesArr().join();
|
188
|
+
}, useEffectOnlyOnMount);
|
189
|
+
const onNav = useCallback((nav) => {
|
190
|
+
let messages = getMessagesArr();
|
191
|
+
if (isNotEmptyArray(messages)) {
|
192
|
+
//need to release react to re-render the prompt
|
193
|
+
window.setTimeout(() => {
|
194
|
+
//prompt, if ok - clear messages and nav.
|
195
|
+
setPrompt({
|
196
|
+
okButtonText: "Leave",
|
197
|
+
cancelButtonText: "Cancel",
|
198
|
+
title: "Leave page?",
|
199
|
+
children: messages.length > 1
|
200
|
+
? _jsx("ul", { children: messages.map((m, i) => _jsx("li", { children: m }, `m${i}`)) })
|
201
|
+
: _jsx("p", { children: messages[0] }),
|
202
|
+
onCancel: () => setPrompt(null),
|
203
|
+
onOK: () => {
|
204
|
+
setPrompt(null);
|
205
|
+
setBlockNavMessages({}); //clear messages
|
206
|
+
nav();
|
207
|
+
}
|
208
|
+
});
|
209
|
+
}, 1);
|
210
|
+
}
|
211
|
+
else
|
212
|
+
nav();
|
213
|
+
}, useEffectOnlyOnMount);
|
214
|
+
useEffect(() => {
|
215
|
+
function handleBeforeUnload(e) {
|
216
|
+
//todo: use blockMessageRef.current so that we don't have to re-register every time message changes.
|
217
|
+
//otherwise we would have to add blockMessage as a dependency for this useEffect
|
218
|
+
const message = getMessages();
|
219
|
+
if (!isNullOrEmptyString(message)) {
|
220
|
+
e.preventDefault();
|
221
|
+
e.returnValue = message;
|
222
|
+
}
|
223
|
+
}
|
224
|
+
// Add event listener
|
225
|
+
window.addEventListener("beforeunload", handleBeforeUnload);
|
226
|
+
// Remove event listener on cleanup
|
227
|
+
return () => window.removeEventListener("beforeunload", handleBeforeUnload);
|
228
|
+
}, useEffectOnlyOnMount);
|
229
|
+
return {
|
230
|
+
setMessage: (id, message) => {
|
231
|
+
let current = jsonClone(blockNavMessagesRef.current);
|
232
|
+
if (isNullOrEmptyString(message))
|
233
|
+
delete current[id];
|
234
|
+
else
|
235
|
+
current[id] = message;
|
236
|
+
if (!objectsEqual(current, blockNavMessagesRef.current))
|
237
|
+
setBlockNavMessages(current);
|
238
|
+
},
|
239
|
+
// clearMessages: () => {
|
240
|
+
// setBlockNavMessages({});
|
241
|
+
// },
|
242
|
+
// getMessages,
|
243
|
+
// getMessagesArr,
|
244
|
+
onNav,
|
245
|
+
navPrompt: prompt ? _jsx(Prompter, Object.assign({}, prompt)) : undefined
|
246
|
+
};
|
247
|
+
}
|
173
248
|
//# sourceMappingURL=hooks.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../src/helpers/hooks.
|
1
|
+
{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../src/helpers/hooks.tsx"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
@@ -7,6 +7,7 @@ export * from './controls/field-editor';
|
|
7
7
|
export * from './controls/file-upload';
|
8
8
|
export * from './controls/horizontal';
|
9
9
|
export * from './controls/input';
|
10
|
+
export * from './controls/kwizoverflow';
|
10
11
|
export * from './controls/list';
|
11
12
|
export * from './controls/loading';
|
12
13
|
export * from './controls/please-wait';
|
@@ -14,6 +15,7 @@ export * from './controls/prompt';
|
|
14
15
|
export * from './controls/search';
|
15
16
|
export * from './controls/section';
|
16
17
|
export * from './controls/svg';
|
18
|
+
export * from './controls/toolbar';
|
17
19
|
export * from './controls/vertical';
|
18
20
|
export * from './controls/vertical-content';
|
19
21
|
export { KWIZFluentContext } from './helpers/context';
|
package/dist/index.js
CHANGED
@@ -7,6 +7,7 @@ export * from './controls/field-editor';
|
|
7
7
|
export * from './controls/file-upload';
|
8
8
|
export * from './controls/horizontal';
|
9
9
|
export * from './controls/input';
|
10
|
+
export * from './controls/kwizoverflow';
|
10
11
|
export * from './controls/list';
|
11
12
|
export * from './controls/loading';
|
12
13
|
export * from './controls/please-wait';
|
@@ -14,6 +15,7 @@ export * from './controls/prompt';
|
|
14
15
|
export * from './controls/search';
|
15
16
|
export * from './controls/section';
|
16
17
|
export * from './controls/svg';
|
18
|
+
export * from './controls/toolbar';
|
17
19
|
export * from './controls/vertical';
|
18
20
|
export * from './controls/vertical-content';
|
19
21
|
export { KWIZFluentContext } from './helpers/context';
|
package/dist/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC"}
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC"}
|
package/package.json
CHANGED
package/src/controls/button.tsx
CHANGED
@@ -50,6 +50,13 @@ const useStyles = makeStyles({
|
|
50
50
|
color: tokens.colorBrandForeground1,
|
51
51
|
}
|
52
52
|
},
|
53
|
+
dangerSubtle: {
|
54
|
+
color: tokens.colorStatusWarningForeground2,
|
55
|
+
|
56
|
+
[`& .${compoundButtonClassNames.secondaryContent}`]: {
|
57
|
+
color: tokens.colorStatusWarningForeground1
|
58
|
+
}
|
59
|
+
}
|
53
60
|
})
|
54
61
|
|
55
62
|
|
@@ -126,6 +133,12 @@ export const ButtonEXPrimarySubtle = React.forwardRef<HTMLButtonElement, (Button
|
|
126
133
|
<ButtonEX ref={ref} className={props.disabled ? undefined : cssNames.primarySubtle} {...props}>{props.children}</ButtonEX>
|
127
134
|
);
|
128
135
|
});
|
136
|
+
export const ButtonEXDangerSubtle = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
|
137
|
+
const cssNames = useStyles();
|
138
|
+
return (
|
139
|
+
<ButtonEX ref={ref} className={props.disabled ? undefined : cssNames.dangerSubtle} {...props}>{props.children}</ButtonEX>
|
140
|
+
);
|
141
|
+
});
|
129
142
|
|
130
143
|
export const CompoundButtonEX = React.forwardRef<HTMLButtonElement, (CompoundButtonEXProps)>((props, ref) => {
|
131
144
|
let title = props.title || props['aria-label'];
|
@@ -27,12 +27,10 @@ function $DropdownEX<keyType extends string = string, dataType = never>(props: I
|
|
27
27
|
//sometimes control will lose value when re-rendered
|
28
28
|
//use case: public forms when editing other fields after the dropdown was set
|
29
29
|
//re-set the text value manually to fix
|
30
|
-
let text = Array.isArray(props.selected)
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
})).join(', ')
|
35
|
-
: props.selected || "";
|
30
|
+
let text = filterEmptyEntries((Array.isArray(props.selected) ? props.selected : [props.selected]).map(s => {
|
31
|
+
let v = firstOrNull(props.items, i => i.key === s);
|
32
|
+
return v ? v.value : ''
|
33
|
+
})).join(', ');
|
36
34
|
|
37
35
|
return (
|
38
36
|
<Dropdown {...{ ...props, onSelect: undefined }} ref={ref} clearable={!props.required && !props.multiselect}
|
@@ -0,0 +1,103 @@
|
|
1
|
+
import {
|
2
|
+
Menu, MenuButton, MenuItem, MenuList, MenuPopover, MenuTrigger, Overflow, OverflowItem,
|
3
|
+
useIsOverflowItemVisible, useOverflowMenu
|
4
|
+
} from "@fluentui/react-components";
|
5
|
+
import { isNumber } from '@kwiz/common';
|
6
|
+
import { MoreHorizontalFilled } from "@fluentui/react-icons";
|
7
|
+
|
8
|
+
interface IProps<ItemType> {
|
9
|
+
items: ItemType[];
|
10
|
+
getKey: (item: ItemType, index: number) => string;
|
11
|
+
getPriority?: (item: ItemType, index: number) => number;
|
12
|
+
renderItem: (item: ItemType, index: number, overflow?: boolean) => JSX.Element;
|
13
|
+
groupWrapper?: (children: React.ReactNode) => JSX.Element;
|
14
|
+
menuRef?: React.RefObject<HTMLButtonElement>;
|
15
|
+
menuWrapper?: (children: React.ReactNode) => JSX.Element;
|
16
|
+
menuTrigger?: (ref: React.RefObject<HTMLButtonElement>, overflowCount: number) => JSX.Element;
|
17
|
+
className?: string;
|
18
|
+
}
|
19
|
+
const OverflowMenu = <ItemType,>(props: IProps<ItemType>) => {
|
20
|
+
const { ref, isOverflowing, overflowCount } =
|
21
|
+
useOverflowMenu<HTMLButtonElement>();
|
22
|
+
|
23
|
+
if (!isOverflowing) {
|
24
|
+
return null;
|
25
|
+
}
|
26
|
+
|
27
|
+
let menu = <Menu>
|
28
|
+
<MenuTrigger disableButtonEnhancement>
|
29
|
+
{props.menuTrigger
|
30
|
+
? props.menuTrigger(props.menuRef || ref, overflowCount)
|
31
|
+
: <MenuButton
|
32
|
+
icon={<MoreHorizontalFilled/>}
|
33
|
+
ref={props.menuRef || ref}
|
34
|
+
aria-label="More items"
|
35
|
+
appearance="subtle"
|
36
|
+
/>}
|
37
|
+
</MenuTrigger>
|
38
|
+
<MenuPopover>
|
39
|
+
<MenuList>
|
40
|
+
{props.items.map((item, index) => (
|
41
|
+
<OverflowMenuItem key={props.getKey(item, index)} {...props} item={item} index={index} />
|
42
|
+
))}
|
43
|
+
</MenuList>
|
44
|
+
</MenuPopover>
|
45
|
+
</Menu>;
|
46
|
+
|
47
|
+
return (
|
48
|
+
props.menuWrapper
|
49
|
+
? props.menuWrapper(menu)
|
50
|
+
: menu
|
51
|
+
);
|
52
|
+
}
|
53
|
+
|
54
|
+
const OverflowMenuItem = <ItemType,>(props: IProps<ItemType> & { item: ItemType, index: number }) => {
|
55
|
+
const isVisible = useIsOverflowItemVisible(props.getKey(props.item, props.index));
|
56
|
+
|
57
|
+
if (isVisible) {
|
58
|
+
return null;
|
59
|
+
}
|
60
|
+
|
61
|
+
return (
|
62
|
+
<MenuItem key={props.getKey(props.item, props.index)}>
|
63
|
+
{props.renderItem(props.item, props.index, true)}
|
64
|
+
</MenuItem>
|
65
|
+
);
|
66
|
+
};
|
67
|
+
export const KWIZOverflow = <ItemType,>(props: IProps<ItemType>) => {
|
68
|
+
let content: JSX.Element[] = [];
|
69
|
+
let addMenu = () => {
|
70
|
+
if (menuIndex >= 0)
|
71
|
+
content.splice(menuIndex, 0, <OverflowMenu key="overflow_menu" {...props} />);
|
72
|
+
else
|
73
|
+
content.push(<OverflowMenu key="overflow_menu" {...props} />);
|
74
|
+
};
|
75
|
+
|
76
|
+
let menuIndex = -1;
|
77
|
+
|
78
|
+
props.items.forEach((item, index) => {
|
79
|
+
//add the menu before the first item with priority
|
80
|
+
let priority = props.getPriority ? props.getPriority(item, index) : undefined;
|
81
|
+
if (isNumber(priority) && priority > 0)
|
82
|
+
menuIndex = index;
|
83
|
+
|
84
|
+
content.push(<OverflowItem key={props.getKey(item, index)} id={props.getKey(item, index)}
|
85
|
+
priority={priority}>
|
86
|
+
{props.renderItem(item, index)}
|
87
|
+
</OverflowItem>);
|
88
|
+
});
|
89
|
+
|
90
|
+
addMenu();
|
91
|
+
|
92
|
+
return (
|
93
|
+
<Overflow minimumVisible={2} padding={60} key={`overflow_${props.items.length}`}>
|
94
|
+
<div style={{ overflow: "hidden" }} className={props.className}>
|
95
|
+
{
|
96
|
+
props.groupWrapper
|
97
|
+
? props.groupWrapper(content)
|
98
|
+
: content
|
99
|
+
}
|
100
|
+
</div>
|
101
|
+
</Overflow>
|
102
|
+
)
|
103
|
+
};
|
@@ -9,9 +9,10 @@ interface IProps {
|
|
9
9
|
contentOnly?: boolean;
|
10
10
|
cancelText?: string;
|
11
11
|
onCancel?: () => void;
|
12
|
+
label?: string;
|
12
13
|
}
|
13
14
|
export const PleaseWait: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
|
14
|
-
const field = <Field validationMessage="please wait..." validationState="none">
|
15
|
+
const field = <Field validationMessage={props.label || "please wait..."} validationState="none">
|
15
16
|
<ProgressBar value={props.step} max={props.max} />
|
16
17
|
</Field>;
|
17
18
|
return (props.contentOnly
|
@@ -0,0 +1,49 @@
|
|
1
|
+
import { Toolbar, ToolbarDivider, ToolbarGroup } from '@fluentui/react-components';
|
2
|
+
import React from 'react';
|
3
|
+
import { useCommonStyles } from '../styles/styles';
|
4
|
+
import { KWIZOverflow } from './kwizoverflow';
|
5
|
+
|
6
|
+
interface IProps {
|
7
|
+
/** toolbar buttons that may render or render in overflow */
|
8
|
+
buttonGroups: { elm: JSX.Element, overflowElement?: JSX.Element }[][];
|
9
|
+
/** side buttons that will always render, never overflow */
|
10
|
+
sideButtons?: JSX.Element;
|
11
|
+
}
|
12
|
+
export const ToolbarEX: React.FunctionComponent<IProps> = (props) => {
|
13
|
+
const commonCssNames = useCommonStyles();
|
14
|
+
|
15
|
+
let elements: { id: string, priority?: number, elm: JSX.Element, overflowElement?: JSX.Element }[] = [];
|
16
|
+
props.buttonGroups.forEach((group, groupIndex) => {
|
17
|
+
group.forEach((button, buttonIndex) => {
|
18
|
+
const mapped = { ...button, id: `m${groupIndex}-${buttonIndex}` };
|
19
|
+
if (buttonIndex === 0 && groupIndex > 0 && props.buttonGroups[groupIndex - 1].length > 0) {
|
20
|
+
//first button, not first group, and previous group was not empty
|
21
|
+
//add divider
|
22
|
+
mapped.overflowElement = mapped.overflowElement || mapped.elm;
|
23
|
+
//this way if button rendes it is with the divider, but if it is in overflow - there will be no divider
|
24
|
+
mapped.elm = <span>
|
25
|
+
<ToolbarDivider style={{ display: 'inline-flex' }} />
|
26
|
+
{mapped.elm}
|
27
|
+
</span>;
|
28
|
+
|
29
|
+
}
|
30
|
+
elements.push(mapped);
|
31
|
+
})
|
32
|
+
});
|
33
|
+
|
34
|
+
return (
|
35
|
+
<KWIZOverflow className={commonCssNames.printHide}
|
36
|
+
items={elements}
|
37
|
+
getKey={e => e.id}
|
38
|
+
renderItem={(e, i, overflow) => overflow && e.overflowElement || e.elm}
|
39
|
+
getPriority={e => e.priority || -1}
|
40
|
+
groupWrapper={children => <Toolbar aria-label="Default" style={{ justifyContent: "space-between" }}>
|
41
|
+
<ToolbarGroup role="presentation">
|
42
|
+
{children}
|
43
|
+
</ToolbarGroup>
|
44
|
+
<ToolbarGroup role="presentation">
|
45
|
+
{props.sideButtons}
|
46
|
+
</ToolbarGroup>
|
47
|
+
</Toolbar>}
|
48
|
+
/>);
|
49
|
+
}
|
@@ -1,6 +1,7 @@
|
|
1
|
-
import { isDebug, isFunction, isNotEmptyArray, isNullOrEmptyString, jsonStringify, LoggerLevel, objectsEqual, wrapFunction } from "@kwiz/common";
|
1
|
+
import { IDictionary, isDebug, isFunction, isNotEmptyArray, isNullOrEmptyString, jsonClone, jsonStringify, LoggerLevel, objectsEqual, wrapFunction } from "@kwiz/common";
|
2
2
|
import { MutableRefObject, SetStateAction, useCallback, useEffect, useRef, useState } from "react";
|
3
3
|
import { GetLogger } from "../_modules/config";
|
4
|
+
import { IPrompterProps, Prompter } from "../controls/prompt";
|
4
5
|
import { KnownClassNames } from "../styles/styles";
|
5
6
|
|
6
7
|
const logger = GetLogger("helpers/hooks");
|
@@ -187,3 +188,81 @@ export function useIsInPrint() {
|
|
187
188
|
}, useEffectOnlyOnMount);
|
188
189
|
return printMode;
|
189
190
|
}
|
191
|
+
/** set block message if you want to block nav.
|
192
|
+
* - call setMessage to add a blocker message
|
193
|
+
* - call onNav when you have internal navigation (open / close popups)
|
194
|
+
* - render the navPrompt control to your page
|
195
|
+
* FYI for page unload, most modern browsers won't show your message but a generic one instead. */
|
196
|
+
export function useBlockNav() {
|
197
|
+
const [, setBlockNavMessages, blockNavMessagesRef] = useStateEX<IDictionary<string>>({});
|
198
|
+
const [prompt, setPrompt] = useStateEX<IPrompterProps>(null);
|
199
|
+
|
200
|
+
const getMessagesArr = useCallback(() => {
|
201
|
+
return Object.keys(blockNavMessagesRef.current).map(id => blockNavMessagesRef.current[id]);
|
202
|
+
}, useEffectOnlyOnMount);
|
203
|
+
|
204
|
+
const getMessages = useCallback(() => {
|
205
|
+
return getMessagesArr().join();
|
206
|
+
}, useEffectOnlyOnMount);
|
207
|
+
|
208
|
+
const onNav = useCallback((nav: () => void) => {
|
209
|
+
let messages = getMessagesArr();
|
210
|
+
if (isNotEmptyArray(messages)) {
|
211
|
+
//need to release react to re-render the prompt
|
212
|
+
window.setTimeout(() => {
|
213
|
+
//prompt, if ok - clear messages and nav.
|
214
|
+
setPrompt({
|
215
|
+
okButtonText: "Leave",
|
216
|
+
cancelButtonText: "Cancel",
|
217
|
+
title: "Leave page?",
|
218
|
+
children: messages.length > 1
|
219
|
+
? <ul>
|
220
|
+
{messages.map((m, i) => <li key={`m${i}`}>{m}</li>)}
|
221
|
+
</ul>
|
222
|
+
: <p>{messages[0]}</p>,
|
223
|
+
onCancel: () => setPrompt(null),
|
224
|
+
onOK: () => {
|
225
|
+
setPrompt(null);
|
226
|
+
setBlockNavMessages({});//clear messages
|
227
|
+
nav();
|
228
|
+
}
|
229
|
+
});
|
230
|
+
}, 1);
|
231
|
+
}
|
232
|
+
else nav();
|
233
|
+
}, useEffectOnlyOnMount);
|
234
|
+
|
235
|
+
|
236
|
+
useEffect(() => {
|
237
|
+
function handleBeforeUnload(e: BeforeUnloadEvent) {
|
238
|
+
//todo: use blockMessageRef.current so that we don't have to re-register every time message changes.
|
239
|
+
//otherwise we would have to add blockMessage as a dependency for this useEffect
|
240
|
+
const message = getMessages();
|
241
|
+
if (!isNullOrEmptyString(message)) {
|
242
|
+
e.preventDefault();
|
243
|
+
e.returnValue = message;
|
244
|
+
}
|
245
|
+
}
|
246
|
+
// Add event listener
|
247
|
+
window.addEventListener("beforeunload", handleBeforeUnload);
|
248
|
+
// Remove event listener on cleanup
|
249
|
+
return () => window.removeEventListener("beforeunload", handleBeforeUnload);
|
250
|
+
}, useEffectOnlyOnMount);
|
251
|
+
return {
|
252
|
+
setMessage: (id: string, message?: string) => {
|
253
|
+
let current = jsonClone(blockNavMessagesRef.current);
|
254
|
+
if (isNullOrEmptyString(message))
|
255
|
+
delete current[id];
|
256
|
+
else current[id] = message;
|
257
|
+
if (!objectsEqual(current, blockNavMessagesRef.current))
|
258
|
+
setBlockNavMessages(current);
|
259
|
+
},
|
260
|
+
// clearMessages: () => {
|
261
|
+
// setBlockNavMessages({});
|
262
|
+
// },
|
263
|
+
// getMessages,
|
264
|
+
// getMessagesArr,
|
265
|
+
onNav,
|
266
|
+
navPrompt: prompt ? <Prompter {...prompt} /> : undefined
|
267
|
+
};
|
268
|
+
}
|
package/src/index.ts
CHANGED
@@ -7,6 +7,7 @@ export * from './controls/field-editor';
|
|
7
7
|
export * from './controls/file-upload';
|
8
8
|
export * from './controls/horizontal';
|
9
9
|
export * from './controls/input';
|
10
|
+
export * from './controls/kwizoverflow';
|
10
11
|
export * from './controls/list';
|
11
12
|
export * from './controls/loading';
|
12
13
|
export * from './controls/please-wait';
|
@@ -14,6 +15,7 @@ export * from './controls/prompt';
|
|
14
15
|
export * from './controls/search';
|
15
16
|
export * from './controls/section';
|
16
17
|
export * from './controls/svg';
|
18
|
+
export * from './controls/toolbar';
|
17
19
|
export * from './controls/vertical';
|
18
20
|
export * from './controls/vertical-content';
|
19
21
|
export { KWIZFluentContext } from './helpers/context';
|