@kwiz/fluentui 1.0.31 → 1.0.33
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/controls/button.d.ts +14 -13
- package/dist/controls/button.js +8 -7
- package/dist/controls/button.js.map +1 -1
- package/dist/controls/divider.js +2 -2
- package/dist/controls/divider.js.map +1 -1
- package/dist/controls/horizontal.d.ts +1 -0
- package/dist/controls/horizontal.js +6 -1
- package/dist/controls/horizontal.js.map +1 -1
- package/dist/controls/menu.d.ts +34 -0
- package/dist/controls/menu.js +96 -0
- package/dist/controls/menu.js.map +1 -0
- package/dist/controls/prompt.d.ts +2 -0
- package/dist/controls/prompt.js +27 -6
- package/dist/controls/prompt.js.map +1 -1
- package/dist/controls/search.js +4 -3
- package/dist/controls/search.js.map +1 -1
- package/dist/helpers/drag-drop/drag-drop-container.js +3 -3
- package/dist/helpers/drag-drop/drag-drop-container.js.map +1 -1
- package/dist/helpers/hooks.d.ts +19 -5
- package/dist/helpers/hooks.js +45 -4
- package/dist/helpers/hooks.js.map +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/dist/index.js.map +1 -1
- package/dist/styles/styles.d.ts +5 -1
- package/dist/styles/styles.js +5 -2
- package/dist/styles/styles.js.map +1 -1
- package/package.json +4 -4
- package/src/controls/button.tsx +15 -10
- package/src/controls/divider.tsx +3 -3
- package/src/controls/horizontal.tsx +7 -1
- package/src/controls/menu.tsx +159 -0
- package/src/controls/prompt.tsx +33 -8
- package/src/controls/search.tsx +4 -3
- package/src/helpers/drag-drop/drag-drop-container.tsx +3 -3
- package/src/helpers/hooks.tsx +65 -5
- package/src/index.ts +2 -1
- package/src/styles/styles.ts +5 -2
|
@@ -8,21 +8,22 @@ interface IProps {
|
|
|
8
8
|
dontCenterText?: boolean;
|
|
9
9
|
hoverIcon?: JSX.Element;
|
|
10
10
|
hoverTitle?: string;
|
|
11
|
+
onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => void | undefined;
|
|
11
12
|
}
|
|
12
13
|
interface IPropsCompound extends IProps {
|
|
13
14
|
width?: string | number;
|
|
14
15
|
}
|
|
15
|
-
export type ButtonEXProps = IProps & ButtonProps
|
|
16
|
-
export type CompoundButtonEXProps = IPropsCompound & CompoundButtonProps
|
|
17
|
-
export declare const ButtonEX: React.ForwardRefExoticComponent<
|
|
18
|
-
export declare const ButtonEXSecondary: React.ForwardRefExoticComponent<
|
|
19
|
-
export declare const ButtonEXPrimary: React.ForwardRefExoticComponent<
|
|
20
|
-
export declare const ButtonEXDanger: React.ForwardRefExoticComponent<
|
|
21
|
-
export declare const ButtonEXSuccess: React.ForwardRefExoticComponent<
|
|
22
|
-
export declare const ButtonEXPrimarySubtle: React.ForwardRefExoticComponent<
|
|
23
|
-
export declare const ButtonEXDangerSubtle: React.ForwardRefExoticComponent<
|
|
24
|
-
export declare const CompoundButtonEX: React.ForwardRefExoticComponent<
|
|
25
|
-
export declare const CompoundButtonEXSecondary: React.ForwardRefExoticComponent<
|
|
26
|
-
export declare const CompoundButtonEXPrimary: React.ForwardRefExoticComponent<
|
|
27
|
-
export declare const CompoundButtonEXDanger: React.ForwardRefExoticComponent<
|
|
16
|
+
export type ButtonEXProps = IProps & Omit<ButtonProps, "onClick" | "title">;
|
|
17
|
+
export type CompoundButtonEXProps = IPropsCompound & Omit<CompoundButtonProps, "onClick" | "title">;
|
|
18
|
+
export declare const ButtonEX: React.ForwardRefExoticComponent<IProps & Omit<ButtonProps, "title" | "onClick"> & React.RefAttributes<HTMLButtonElement>>;
|
|
19
|
+
export declare const ButtonEXSecondary: React.ForwardRefExoticComponent<IProps & Omit<ButtonProps, "title" | "onClick"> & React.RefAttributes<HTMLButtonElement>>;
|
|
20
|
+
export declare const ButtonEXPrimary: React.ForwardRefExoticComponent<IProps & Omit<ButtonProps, "title" | "onClick"> & React.RefAttributes<HTMLButtonElement>>;
|
|
21
|
+
export declare const ButtonEXDanger: React.ForwardRefExoticComponent<IProps & Omit<ButtonProps, "title" | "onClick"> & React.RefAttributes<HTMLButtonElement>>;
|
|
22
|
+
export declare const ButtonEXSuccess: React.ForwardRefExoticComponent<IProps & Omit<ButtonProps, "title" | "onClick"> & React.RefAttributes<HTMLButtonElement>>;
|
|
23
|
+
export declare const ButtonEXPrimarySubtle: React.ForwardRefExoticComponent<IProps & Omit<ButtonProps, "title" | "onClick"> & React.RefAttributes<HTMLButtonElement>>;
|
|
24
|
+
export declare const ButtonEXDangerSubtle: React.ForwardRefExoticComponent<IProps & Omit<ButtonProps, "title" | "onClick"> & React.RefAttributes<HTMLButtonElement>>;
|
|
25
|
+
export declare const CompoundButtonEX: React.ForwardRefExoticComponent<IPropsCompound & Omit<CompoundButtonProps, "title" | "onClick"> & React.RefAttributes<HTMLButtonElement>>;
|
|
26
|
+
export declare const CompoundButtonEXSecondary: React.ForwardRefExoticComponent<IPropsCompound & Omit<CompoundButtonProps, "title" | "onClick"> & React.RefAttributes<HTMLButtonElement>>;
|
|
27
|
+
export declare const CompoundButtonEXPrimary: React.ForwardRefExoticComponent<IPropsCompound & Omit<CompoundButtonProps, "title" | "onClick"> & React.RefAttributes<HTMLButtonElement>>;
|
|
28
|
+
export declare const CompoundButtonEXDanger: React.ForwardRefExoticComponent<IPropsCompound & Omit<CompoundButtonProps, "title" | "onClick"> & React.RefAttributes<HTMLButtonElement>>;
|
|
28
29
|
export {};
|
package/dist/controls/button.js
CHANGED
|
@@ -3,7 +3,8 @@ import { Button, CompoundButton, compoundButtonClassNames, makeStyles, mergeClas
|
|
|
3
3
|
import { capitalizeFirstLetter, isFunction, isNullOrEmptyString, isNullOrUndefined, isString, PushNoDuplicate } from '@kwiz/common';
|
|
4
4
|
import React from 'react';
|
|
5
5
|
import { useKWIZFluentContext } from '../helpers/context';
|
|
6
|
-
import {
|
|
6
|
+
import { commonSizes, useCommonStyles } from '../styles/styles';
|
|
7
|
+
;
|
|
7
8
|
const useStyles = makeStyles({
|
|
8
9
|
buttonNoCenter: {
|
|
9
10
|
justifyContent: 'flex-start',
|
|
@@ -39,6 +40,7 @@ const useStyles = makeStyles({
|
|
|
39
40
|
}
|
|
40
41
|
});
|
|
41
42
|
export const ButtonEX = React.forwardRef((props, ref) => {
|
|
43
|
+
const ctx = useKWIZFluentContext();
|
|
42
44
|
const [hover, setHover] = React.useState(false);
|
|
43
45
|
const trackHover = !isNullOrEmptyString(props.hoverTitle) || !isNullOrUndefined(props.hoverIcon);
|
|
44
46
|
const title = hover && !isNullOrEmptyString(props.hoverTitle) ? props.hoverTitle
|
|
@@ -53,9 +55,7 @@ export const ButtonEX = React.forwardRef((props, ref) => {
|
|
|
53
55
|
PushNoDuplicate(css, commonCssNames.printHide);
|
|
54
56
|
if (props.dontCenterText)
|
|
55
57
|
PushNoDuplicate(css, cssNames.buttonNoCenter);
|
|
56
|
-
|
|
57
|
-
css.push(...props.className.split(' '));
|
|
58
|
-
let btn = _jsx(Button, Object.assign({ ref: ref, appearance: 'subtle' }, props, { className: mergeClasses(...css), "aria-label": title, title: undefined, icon: icon, onMouseEnter: trackHover ? (e) => {
|
|
58
|
+
let btn = _jsx(Button, Object.assign({ ref: ref, appearance: 'subtle' }, props, { className: mergeClasses(...css, props.className), "aria-label": title, title: undefined, icon: icon, onMouseEnter: trackHover ? (e) => {
|
|
59
59
|
setHover(true);
|
|
60
60
|
if (isFunction(props.onMouseEnter))
|
|
61
61
|
props.onMouseEnter(e);
|
|
@@ -67,7 +67,7 @@ export const ButtonEX = React.forwardRef((props, ref) => {
|
|
|
67
67
|
//no icon? will show the title by default
|
|
68
68
|
(hasText && capitalizeFirstLetter(title)) }));
|
|
69
69
|
if (!hasText || props.children) //icon only or when content is different than props.title
|
|
70
|
-
btn = _jsx(Tooltip, { showDelay: 1000, relationship: 'label', withArrow: true, appearance: 'inverted', content: title, children: btn });
|
|
70
|
+
btn = _jsx(Tooltip, { showDelay: 1000, relationship: 'label', withArrow: true, appearance: 'inverted', content: title, mountNode: ctx.mountNode, children: btn });
|
|
71
71
|
return (props.dontStretch ? _jsx("div", { children: btn }) : btn);
|
|
72
72
|
});
|
|
73
73
|
export const ButtonEXSecondary = React.forwardRef((props, ref) => {
|
|
@@ -94,10 +94,11 @@ export const ButtonEXDangerSubtle = React.forwardRef((props, ref) => {
|
|
|
94
94
|
return (_jsx(ButtonEX, Object.assign({ ref: ref, className: props.disabled ? undefined : cssNames.dangerSubtle }, props, { children: props.children })));
|
|
95
95
|
});
|
|
96
96
|
export const CompoundButtonEX = React.forwardRef((props, ref) => {
|
|
97
|
+
const ctx = useKWIZFluentContext();
|
|
97
98
|
let title = props.title || props['aria-label'];
|
|
98
99
|
let tooltip = isString(props.secondaryContent) ? props.secondaryContent : title;
|
|
99
|
-
let max = typeof (props.width) === "undefined" ? widthMedium : props.width;
|
|
100
|
-
return (_jsx(Tooltip, { showDelay: 1000, relationship: 'label', withArrow: true, appearance: 'inverted', content: tooltip, children: _jsx(CompoundButton, Object.assign({ ref: ref, appearance: 'subtle', style: { justifyContent: "flex-start", maxWidth: max } }, props, { "aria-label": tooltip, title: undefined, children: props.children || capitalizeFirstLetter(title) })) }));
|
|
100
|
+
let max = typeof (props.width) === "undefined" ? commonSizes.widthMedium : props.width;
|
|
101
|
+
return (_jsx(Tooltip, { showDelay: 1000, relationship: 'label', withArrow: true, appearance: 'inverted', content: tooltip, mountNode: ctx.mountNode, children: _jsx(CompoundButton, Object.assign({ ref: ref, appearance: 'subtle', style: { justifyContent: "flex-start", maxWidth: max } }, props, { "aria-label": tooltip, title: undefined, children: props.children || capitalizeFirstLetter(title) })) }));
|
|
101
102
|
});
|
|
102
103
|
export const CompoundButtonEXSecondary = React.forwardRef((props, ref) => {
|
|
103
104
|
const ctx = useKWIZFluentContext();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/controls/button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAe,cAAc,EAAE,wBAAwB,EAAuB,UAAU,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAC3K,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpI,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/controls/button.tsx"],"names":[],"mappings":"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"}
|
package/dist/controls/divider.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Divider, makeStyles } from '@fluentui/react-components';
|
|
2
|
+
import { Divider, makeStyles, mergeClasses } from '@fluentui/react-components';
|
|
3
3
|
import React from 'react';
|
|
4
4
|
const useStyles = makeStyles({
|
|
5
5
|
separator: {
|
|
@@ -8,6 +8,6 @@ const useStyles = makeStyles({
|
|
|
8
8
|
});
|
|
9
9
|
export const DividerEX = React.forwardRef((props, ref) => {
|
|
10
10
|
const cssNames = useStyles();
|
|
11
|
-
return (_jsx(Divider, Object.assign({ ref: ref }, props, { className: cssNames.separator })));
|
|
11
|
+
return (_jsx(Divider, Object.assign({ ref: ref }, props, { className: mergeClasses(cssNames.separator, props.className) })));
|
|
12
12
|
});
|
|
13
13
|
//# sourceMappingURL=divider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../src/controls/divider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAgB,UAAU,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../src/controls/divider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAgB,UAAU,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC7F,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,SAAS,EAAE;QACP,QAAQ,EAAE,CAAC;KACd;CACJ,CAAC,CAAC;AAGH,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAoD,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACxG,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,OAAO,CACH,KAAC,OAAO,kBAAC,GAAG,EAAE,GAAG,IAAM,KAAK,IAAE,SAAS,EAAE,YAAY,CAAC,QAAQ,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CACjG,CAAC;AACN,CAAC,CAAC,CAAC"}
|
|
@@ -7,7 +7,10 @@ import { Section } from './section';
|
|
|
7
7
|
const useStyles = makeStyles({
|
|
8
8
|
horizontal: Object.assign(Object.assign({}, mixins.flex), { flexDirection: 'row' }),
|
|
9
9
|
wrap: mixins.wrap,
|
|
10
|
-
nogap: mixins.nogap
|
|
10
|
+
nogap: mixins.nogap,
|
|
11
|
+
centered: {
|
|
12
|
+
alignItems: "center"
|
|
13
|
+
}
|
|
11
14
|
});
|
|
12
15
|
export const Horizontal = React.forwardRef((props, ref) => {
|
|
13
16
|
const cssNames = useStyles();
|
|
@@ -17,6 +20,8 @@ export const Horizontal = React.forwardRef((props, ref) => {
|
|
|
17
20
|
css.push(cssNames.wrap);
|
|
18
21
|
if (props.nogap)
|
|
19
22
|
css.push(cssNames.nogap);
|
|
23
|
+
if (props.centered)
|
|
24
|
+
css.push(cssNames.centered);
|
|
20
25
|
if (isNotEmptyArray(props.css))
|
|
21
26
|
css.push(...props.css);
|
|
22
27
|
return (_jsx(Section, Object.assign({}, props, { css: css })));
|
|
@@ -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;
|
|
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;CACJ,CAAC,CAAA;AAOF,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;IAEhC,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,CACnC,CAAC;AACN,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { MenuListProps, MenuPopoverProps, MenuProps } from '@fluentui/react-components';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { ButtonEXProps } from './button';
|
|
4
|
+
interface iMenuItemEXItem {
|
|
5
|
+
type?: "item";
|
|
6
|
+
title: string;
|
|
7
|
+
onClick: () => void;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
icon?: JSX.Element;
|
|
10
|
+
items?: iMenuItemEX[];
|
|
11
|
+
checked?: boolean;
|
|
12
|
+
}
|
|
13
|
+
interface iMenuItemEXSeparator {
|
|
14
|
+
type: "separator";
|
|
15
|
+
}
|
|
16
|
+
interface iMenuItemEXGroup {
|
|
17
|
+
type: "group";
|
|
18
|
+
title: string;
|
|
19
|
+
items: iMenuItemEX[];
|
|
20
|
+
}
|
|
21
|
+
export type iMenuItemEX = iMenuItemEXItem | iMenuItemEXSeparator | iMenuItemEXGroup;
|
|
22
|
+
interface IProps {
|
|
23
|
+
menuProps?: MenuProps;
|
|
24
|
+
menuPopOverProps?: MenuPopoverProps;
|
|
25
|
+
menuListProps?: MenuListProps;
|
|
26
|
+
trigger: JSX.Element | string | ButtonEXProps;
|
|
27
|
+
items: iMenuItemEX[];
|
|
28
|
+
/** default 8 0/null to disable */
|
|
29
|
+
filterThreshold?: number;
|
|
30
|
+
/** default 8, 0/null to disable */
|
|
31
|
+
pageSize?: number;
|
|
32
|
+
}
|
|
33
|
+
export declare const MenuEx: React.FunctionComponent<React.PropsWithChildren<IProps>>;
|
|
34
|
+
export {};
|
|
@@ -0,0 +1,96 @@
|
|
|
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';
|
|
3
|
+
import { ChevronLeftRegular, ChevronRightRegular } from '@fluentui/react-icons';
|
|
4
|
+
import { isNotEmptyArray, isNotEmptyString, isNullOrEmptyString, isNullOrUndefined, isNumber, isString, isUndefined, jsonClone } from '@kwiz/common';
|
|
5
|
+
import { useKWIZFluentContext } from '../helpers/context';
|
|
6
|
+
import { useStateEX } from '../helpers/hooks';
|
|
7
|
+
import { ButtonEX } from './button';
|
|
8
|
+
import { Horizontal } from './horizontal';
|
|
9
|
+
import { Search } from './search';
|
|
10
|
+
import { Section } from './section';
|
|
11
|
+
export const MenuEx = (props) => {
|
|
12
|
+
const ctx = useKWIZFluentContext();
|
|
13
|
+
const [startIndexPerLevel, setStartIndexPerLevel] = useStateEX({});
|
|
14
|
+
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;
|
|
21
|
+
//when hovering over sub menu the parent would close - have menu trigger keep open on the parent level
|
|
22
|
+
const [keepOpen, setKeepOpen] = useStateEX({});
|
|
23
|
+
const [opened, setOpened] = useStateEX({});
|
|
24
|
+
function renderItems(items, level) {
|
|
25
|
+
const myLevelFilter = filterPerLevel[level];
|
|
26
|
+
//get rid of empty/null items
|
|
27
|
+
items = items.filter(i => !isNullOrUndefined(i) && (isNotEmptyString(i.type) || isNotEmptyString(i.title)));
|
|
28
|
+
if (isNotEmptyString(myLevelFilter)) {
|
|
29
|
+
items = items.filter(i => i.type !== "separator" && i.title.toLowerCase().indexOf(myLevelFilter) >= 0);
|
|
30
|
+
}
|
|
31
|
+
let menuItems = items.map((item, index) => {
|
|
32
|
+
switch (item.type) {
|
|
33
|
+
case "group":
|
|
34
|
+
return _jsxs(MenuGroup, { children: [_jsx(MenuGroupHeader, { children: item.title }), renderItems(item.items, level + 1)] }, index);
|
|
35
|
+
case "separator":
|
|
36
|
+
return _jsx(MenuDivider, {}, index);
|
|
37
|
+
case "item":
|
|
38
|
+
default:
|
|
39
|
+
const openKey = `${level}|${index}`;
|
|
40
|
+
const menuItem = _jsx(MenuItem, { icon: item.icon, disabled: item.disabled, onClick: item.onClick, children: item.title }, index);
|
|
41
|
+
return isNotEmptyArray(item.items)
|
|
42
|
+
? _jsxs(Menu, { mountNode: ctx.mountNode, open: opened[openKey] || false, onOpenChange: (e, data) => {
|
|
43
|
+
if (data.open) {
|
|
44
|
+
setOpened(Object.assign(Object.assign({}, opened), { [openKey]: true }));
|
|
45
|
+
setKeepOpen(Object.assign(Object.assign({}, keepOpen), { [level]: true }));
|
|
46
|
+
}
|
|
47
|
+
else if (!keepOpen[openKey]) {
|
|
48
|
+
setOpened(Object.assign(Object.assign({}, opened), { [openKey]: false }));
|
|
49
|
+
setKeepOpen(Object.assign(Object.assign({}, keepOpen), { [level]: false }));
|
|
50
|
+
}
|
|
51
|
+
}, children: [_jsx(MenuTrigger, { disableButtonEnhancement: true, children: menuItem }), _jsx(MenuPopover, { children: _jsx(MenuList, { children: renderItems(item.items, level + 1) }) })] }, index)
|
|
52
|
+
: menuItem;
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
const paged = menuItems.length > pageSize;
|
|
56
|
+
const filtered = menuItems.length > filterThreshold || !isNullOrEmptyString(myLevelFilter);
|
|
57
|
+
const filterControl = filtered && _jsx(Search, { value: myLevelFilter || "", onChangeDeferred: (newValue) => {
|
|
58
|
+
const s = jsonClone(filterPerLevel);
|
|
59
|
+
s[level] = newValue ? newValue.toLowerCase() : "";
|
|
60
|
+
setFilterPerLevel(s);
|
|
61
|
+
} });
|
|
62
|
+
if (paged) {
|
|
63
|
+
let start = startIndexPerLevel[level];
|
|
64
|
+
if (isNullOrUndefined(start))
|
|
65
|
+
start = 0;
|
|
66
|
+
let hasMore = menuItems.length > start + pageSize;
|
|
67
|
+
menuItems = menuItems.slice(start, start + pageSize);
|
|
68
|
+
if (start > 0 || hasMore)
|
|
69
|
+
menuItems.splice(0, 0, _jsxs(Horizontal, { children: [_jsx(ButtonEX, { disabled: start < 1, icon: _jsx(ChevronLeftRegular, {}), title: 'previous', onClick: () => {
|
|
70
|
+
const s = jsonClone(startIndexPerLevel);
|
|
71
|
+
s[level] = start - pageSize;
|
|
72
|
+
setStartIndexPerLevel(s);
|
|
73
|
+
} }), _jsx(Section, { main: true, children: filterControl }), _jsx(ButtonEX, { disabled: !hasMore, icon: _jsx(ChevronRightRegular, {}), title: 'next', onClick: () => {
|
|
74
|
+
const s = jsonClone(startIndexPerLevel);
|
|
75
|
+
s[level] = start + pageSize;
|
|
76
|
+
setStartIndexPerLevel(s);
|
|
77
|
+
} })] }, '$next'));
|
|
78
|
+
}
|
|
79
|
+
else if (filtered) {
|
|
80
|
+
//just filter - no paging
|
|
81
|
+
menuItems.splice(0, 0, _jsx(Horizontal, { children: filterControl }, '$next'));
|
|
82
|
+
}
|
|
83
|
+
return menuItems;
|
|
84
|
+
}
|
|
85
|
+
return (_jsxs(Menu, Object.assign({ mountNode: ctx.mountNode }, props.menuProps, { open: opened[0] || false, onOpenChange: (e, data) => {
|
|
86
|
+
if (data.open)
|
|
87
|
+
setOpened(Object.assign(Object.assign({}, opened), { 0: true }));
|
|
88
|
+
else if (!keepOpen[0])
|
|
89
|
+
setOpened(Object.assign(Object.assign({}, opened), { 0: false }));
|
|
90
|
+
}, children: [_jsx(MenuTrigger, { disableButtonEnhancement: true, children: isString(props.trigger)
|
|
91
|
+
? _jsx(ButtonEX, { title: props.trigger })
|
|
92
|
+
: isString(props.trigger.title)
|
|
93
|
+
? _jsx(ButtonEX, Object.assign({}, props.trigger))
|
|
94
|
+
: props.trigger }), _jsx(MenuPopover, Object.assign({}, props.menuPopOverProps, { children: _jsx(MenuList, Object.assign({}, props.menuListProps, { children: renderItems(props.items, 0) })) }))] })));
|
|
95
|
+
};
|
|
96
|
+
//# sourceMappingURL=menu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../src/controls/menu.tsx"],"names":[],"mappings":"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"}
|
|
@@ -8,7 +8,9 @@ export interface IPrompterProps {
|
|
|
8
8
|
/** return false to prevent closing the dialog. */
|
|
9
9
|
onOK?: () => Promise<void> | void;
|
|
10
10
|
onCancel?: () => void;
|
|
11
|
+
/** OK */
|
|
11
12
|
okButtonText?: string;
|
|
13
|
+
/** Cancel */
|
|
12
14
|
cancelButtonText?: string;
|
|
13
15
|
title?: string | JSX.Element;
|
|
14
16
|
okButtonProps?: Partial<ButtonEXProps>;
|
package/dist/controls/prompt.js
CHANGED
|
@@ -1,20 +1,41 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Dialog, DialogActions, DialogBody, DialogContent, DialogSurface, DialogTitle, DialogTrigger } from '@fluentui/react-components';
|
|
2
|
+
import { Dialog, DialogActions, DialogBody, DialogContent, DialogSurface, DialogTitle, DialogTrigger, useId } from '@fluentui/react-components';
|
|
3
3
|
import { DismissRegular } from '@fluentui/react-icons';
|
|
4
|
-
import { isNotEmptyArray, isNullOrEmptyString } from '@kwiz/common';
|
|
4
|
+
import { isNotEmptyArray, isNullOrEmptyString, noops, PushNoDuplicate, RemoveItemFromArr, stopEvent } from '@kwiz/common';
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import { useKWIZFluentContext } from '../helpers/context';
|
|
7
7
|
import { useKeyDown } from '../helpers/hooks';
|
|
8
8
|
import { ButtonEX, ButtonEXSecondary } from './button';
|
|
9
|
+
const dialogsOrder = [];
|
|
9
10
|
export const Prompter = React.forwardRef((props, ref) => {
|
|
10
11
|
const ctx = useKWIZFluentContext();
|
|
11
12
|
const disableKeyboardActions = React.useRef(props.disableKeyboardActions);
|
|
12
13
|
disableKeyboardActions.current = props.disableKeyboardActions;
|
|
13
|
-
|
|
14
|
-
|
|
14
|
+
const myId = useId();
|
|
15
|
+
React.useEffect(() => {
|
|
16
|
+
PushNoDuplicate(dialogsOrder, myId);
|
|
17
|
+
//cleanup
|
|
18
|
+
return () => RemoveItemFromArr(dialogsOrder, myId);
|
|
19
|
+
}, [myId]);
|
|
20
|
+
const onOK = props.onOK || noops;
|
|
21
|
+
const onCancel = props.onCancel || noops;
|
|
22
|
+
let okProps = Object.assign(Object.assign({}, (props.okButtonProps || {})), { onClick: () => onOK(), title: props.okButtonText || 'OK' });
|
|
23
|
+
let cancelProps = Object.assign(Object.assign({}, (props.cancelButtonProps || {})), { onClick: () => onCancel(), title: props.cancelButtonText || 'Cancel' });
|
|
15
24
|
useKeyDown({
|
|
16
|
-
onEnter: () =>
|
|
17
|
-
|
|
25
|
+
onEnter: (e) => {
|
|
26
|
+
const topMost = dialogsOrder.indexOf(myId) === dialogsOrder.length - 1;
|
|
27
|
+
if (topMost && !disableKeyboardActions.current) {
|
|
28
|
+
stopEvent(e);
|
|
29
|
+
onOK();
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
onEscape: (e) => {
|
|
33
|
+
const topMost = dialogsOrder.indexOf(myId) === dialogsOrder.length - 1;
|
|
34
|
+
if (topMost && !disableKeyboardActions.current) {
|
|
35
|
+
stopEvent(e);
|
|
36
|
+
onCancel();
|
|
37
|
+
}
|
|
38
|
+
}
|
|
18
39
|
});
|
|
19
40
|
const actions = [];
|
|
20
41
|
if (!props.hideOk)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"prompt.js","sourceRoot":"","sources":["../../src/controls/prompt.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,aAAa,EAAmB,aAAa,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"prompt.js","sourceRoot":"","sources":["../../src/controls/prompt.tsx"],"names":[],"mappings":"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"}
|
package/dist/controls/search.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Input, makeStyles } from '@fluentui/react-components';
|
|
3
3
|
import { DismissRegular, SearchRegular } from "@fluentui/react-icons";
|
|
4
|
-
import { debounce, isFunction, isNullOrEmptyString } from '@kwiz/common';
|
|
4
|
+
import { debounce, isFunction, isNullOrEmptyString, isUndefined } from '@kwiz/common';
|
|
5
5
|
import React, { useState } from 'react';
|
|
6
6
|
import { GetLogger } from '../_modules/config';
|
|
7
7
|
import { useStateEX } from '../helpers/hooks';
|
|
@@ -21,7 +21,7 @@ export const Search = (props) => {
|
|
|
21
21
|
logger.log(`Set: ${v}`);
|
|
22
22
|
props.onChangeDeferred(v);
|
|
23
23
|
}, delay * 1000), [delay]);
|
|
24
|
-
let [value, setValue] = useStateEX(props.value, {
|
|
24
|
+
let [value, setValue] = useStateEX(props.value || "", {
|
|
25
25
|
onChange: newValue => {
|
|
26
26
|
if (isFunction(props.onChangeSync))
|
|
27
27
|
props.onChangeSync(newValue);
|
|
@@ -32,7 +32,8 @@ export const Search = (props) => {
|
|
|
32
32
|
});
|
|
33
33
|
//once props change, reset this control value to match
|
|
34
34
|
React.useEffect(() => {
|
|
35
|
-
|
|
35
|
+
if (!isUndefined(props.resetValue))
|
|
36
|
+
setValue(props.resetValue);
|
|
36
37
|
//todo: bug: setting value does not sync into the text box
|
|
37
38
|
setResetKey(resetKey + 1);
|
|
38
39
|
}, [props.resetValue]);
|
|
@@ -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;AAC3E,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"search.js","sourceRoot":"","sources":["../../src/controls/search.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { mergeClasses } from "@fluentui/react-components";
|
|
3
3
|
import { useDragDropContext } from "./drag-drop-context";
|
|
4
4
|
export function DragDropContainer(props) {
|
|
5
5
|
const { drag, drop, dragDropRef } = useDragDropContext(props);
|
|
6
|
-
const classNames =
|
|
6
|
+
const classNames = [];
|
|
7
7
|
if (drag.isDragging && props.onDraggingClassName)
|
|
8
8
|
classNames.push(props.onDraggingClassName);
|
|
9
9
|
if (drop.isOver && props.onDragOverClassName)
|
|
@@ -13,6 +13,6 @@ export function DragDropContainer(props) {
|
|
|
13
13
|
delete propsWithoutExtras.dropInfo;
|
|
14
14
|
delete propsWithoutExtras.onDraggingClassName;
|
|
15
15
|
delete propsWithoutExtras.onDragOverClassName;
|
|
16
|
-
return _jsx("div", Object.assign({}, propsWithoutExtras, { ref: dragDropRef, className: classNames.
|
|
16
|
+
return _jsx("div", Object.assign({}, propsWithoutExtras, { ref: dragDropRef, className: mergeClasses(...classNames, props.className), children: props.children }));
|
|
17
17
|
}
|
|
18
18
|
//# sourceMappingURL=drag-drop-container.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drag-drop-container.js","sourceRoot":"","sources":["../../../src/helpers/drag-drop/drag-drop-container.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"drag-drop-container.js","sourceRoot":"","sources":["../../../src/helpers/drag-drop/drag-drop-container.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAgCzD,MAAM,UAAU,iBAAiB,CAI/B,KAAsF;IAEpF,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAE9D,MAAM,UAAU,GAAa,EAAE,CAAC;IAChC,IAAI,IAAI,CAAC,UAAU,IAAI,KAAK,CAAC,mBAAmB;QAAE,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;IAC7F,IAAI,IAAI,CAAC,MAAM,IAAI,KAAK,CAAC,mBAAmB;QAAE,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;IAEzF,MAAM,kBAAkB,qBACjB,KAAK,CACX,CAAC;IACF,OAAO,kBAAkB,CAAC,QAAQ,CAAC;IACnC,OAAO,kBAAkB,CAAC,QAAQ,CAAC;IACnC,OAAO,kBAAkB,CAAC,mBAAmB,CAAC;IAC9C,OAAO,kBAAkB,CAAC,mBAAmB,CAAC;IAE9C,OAAO,8BAAS,kBAAkB,IAAE,GAAG,EAAE,WAAW,EAAE,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,YAAG,KAAK,CAAC,QAAQ,IAAO,CAAC;AAC1I,CAAC"}
|
package/dist/helpers/hooks.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ToastIntent } from "@fluentui/react-components";
|
|
2
2
|
import { MutableRefObject, SetStateAction } from "react";
|
|
3
|
+
import { IPrompterProps } from "../controls/prompt";
|
|
3
4
|
import { iKWIZFluentContext } from "./context";
|
|
4
5
|
/** Empty array ensures that effect is only run on mount */
|
|
5
6
|
export declare const useEffectOnlyOnMount: any[];
|
|
@@ -23,16 +24,17 @@ export declare function useWindowSize(): {
|
|
|
23
24
|
height: number;
|
|
24
25
|
};
|
|
25
26
|
export declare function useIsInPrint(): boolean;
|
|
27
|
+
export interface iBlockNav {
|
|
28
|
+
setMessage: (id: string, message?: string) => void;
|
|
29
|
+
onNav: (nav: () => void) => void;
|
|
30
|
+
navPrompt?: JSX.Element;
|
|
31
|
+
}
|
|
26
32
|
/** set block message if you want to block nav.
|
|
27
33
|
* - call setMessage to add a blocker message
|
|
28
34
|
* - call onNav when you have internal navigation (open / close popups)
|
|
29
35
|
* - render the navPrompt control to your page
|
|
30
36
|
* FYI for page unload, most modern browsers won't show your message but a generic one instead. */
|
|
31
|
-
export declare function useBlockNav():
|
|
32
|
-
setMessage: (id: string, message?: string) => void;
|
|
33
|
-
onNav: (nav: () => void) => void;
|
|
34
|
-
navPrompt: import("react/jsx-runtime").JSX.Element;
|
|
35
|
-
};
|
|
37
|
+
export declare function useBlockNav(): iBlockNav;
|
|
36
38
|
export declare function useKeyDown(options: {
|
|
37
39
|
elm?: HTMLElement | Document;
|
|
38
40
|
onEnter?: (e: KeyboardEvent) => void;
|
|
@@ -60,3 +62,15 @@ export declare function useKWIZFluentContextProvider(options: {
|
|
|
60
62
|
root?: React.MutableRefObject<HTMLDivElement>;
|
|
61
63
|
ctx?: iKWIZFluentContext;
|
|
62
64
|
}): iKWIZFluentContext;
|
|
65
|
+
export interface iAlerts {
|
|
66
|
+
promptEX: (info: IPrompterProps) => void;
|
|
67
|
+
confirmEX: (message: string, onOK: () => void, onCancel?: () => void) => void;
|
|
68
|
+
alertEX: (message: string, onOK: () => void) => void;
|
|
69
|
+
alertPrompt?: JSX.Element;
|
|
70
|
+
}
|
|
71
|
+
/** set block message if you want to block nav.
|
|
72
|
+
* - call setMessage to add a blocker message
|
|
73
|
+
* - call onNav when you have internal navigation (open / close popups)
|
|
74
|
+
* - render the navPrompt control to your page
|
|
75
|
+
* FYI for page unload, most modern browsers won't show your message but a generic one instead. */
|
|
76
|
+
export declare function useAlerts(): iAlerts;
|
package/dist/helpers/hooks.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Link, Toast, ToastBody, Toaster, ToastFooter, ToastTitle, useId, useToastController } from "@fluentui/react-components";
|
|
2
|
+
import { Label, Link, Toast, ToastBody, Toaster, ToastFooter, ToastTitle, useId, useToastController } from "@fluentui/react-components";
|
|
3
3
|
import { isDebug, isFunction, isNotEmptyArray, isNullOrEmptyString, jsonClone, jsonStringify, LoggerLevel, objectsEqual, wrapFunction } from "@kwiz/common";
|
|
4
4
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
5
5
|
import { GetLogger } from "../_modules/config";
|
|
@@ -181,7 +181,7 @@ export function useIsInPrint() {
|
|
|
181
181
|
* FYI for page unload, most modern browsers won't show your message but a generic one instead. */
|
|
182
182
|
export function useBlockNav() {
|
|
183
183
|
const [, setBlockNavMessages, blockNavMessagesRef] = useStateEX({});
|
|
184
|
-
const [
|
|
184
|
+
const [_prompt, setPrompt] = useStateEX(null);
|
|
185
185
|
const getMessagesArr = useCallback(() => {
|
|
186
186
|
return Object.keys(blockNavMessagesRef.current).map(id => blockNavMessagesRef.current[id]);
|
|
187
187
|
}, useEffectOnlyOnMount);
|
|
@@ -244,7 +244,7 @@ export function useBlockNav() {
|
|
|
244
244
|
// getMessages,
|
|
245
245
|
// getMessagesArr,
|
|
246
246
|
onNav,
|
|
247
|
-
navPrompt:
|
|
247
|
+
navPrompt: _prompt ? _jsx(Prompter, Object.assign({}, _prompt)) : undefined
|
|
248
248
|
};
|
|
249
249
|
}
|
|
250
250
|
export function useKeyDown(options) {
|
|
@@ -260,7 +260,7 @@ export function useKeyDown(options) {
|
|
|
260
260
|
};
|
|
261
261
|
elm.addEventListener("keydown", handler);
|
|
262
262
|
return () => elm.removeEventListener("keydown", handler);
|
|
263
|
-
}, [elm]);
|
|
263
|
+
}, [elm, options.onEnter, options.onEscape, options.onKeyDown]);
|
|
264
264
|
}
|
|
265
265
|
export function useToast() {
|
|
266
266
|
const ctx = useKWIZFluentContext();
|
|
@@ -284,4 +284,45 @@ export function useKWIZFluentContextProvider(options) {
|
|
|
284
284
|
}, [options.root]);
|
|
285
285
|
return kwizFluentContext;
|
|
286
286
|
}
|
|
287
|
+
/** set block message if you want to block nav.
|
|
288
|
+
* - call setMessage to add a blocker message
|
|
289
|
+
* - call onNav when you have internal navigation (open / close popups)
|
|
290
|
+
* - render the navPrompt control to your page
|
|
291
|
+
* FYI for page unload, most modern browsers won't show your message but a generic one instead. */
|
|
292
|
+
export function useAlerts() {
|
|
293
|
+
const [_prompt, _setPrompt] = useStateEX(null);
|
|
294
|
+
const promptEX = useCallback((info) => {
|
|
295
|
+
//need to release react to re-render the prompt
|
|
296
|
+
window.setTimeout(() => {
|
|
297
|
+
//prompt, if ok - clear messages and nav.
|
|
298
|
+
_setPrompt(Object.assign(Object.assign({}, info), { onCancel: () => {
|
|
299
|
+
_setPrompt(null);
|
|
300
|
+
if (isFunction(info.onCancel))
|
|
301
|
+
info.onCancel();
|
|
302
|
+
}, onOK: () => {
|
|
303
|
+
_setPrompt(null);
|
|
304
|
+
if (isFunction(info.onOK))
|
|
305
|
+
info.onOK();
|
|
306
|
+
} }));
|
|
307
|
+
}, 1);
|
|
308
|
+
}, useEffectOnlyOnMount);
|
|
309
|
+
const confirmEX = useCallback((message, onOK, onCancel) => {
|
|
310
|
+
promptEX({
|
|
311
|
+
children: _jsx(Label, { children: message }),
|
|
312
|
+
onCancel,
|
|
313
|
+
onOK
|
|
314
|
+
});
|
|
315
|
+
}, useEffectOnlyOnMount);
|
|
316
|
+
const alertEX = useCallback((message, onOK) => {
|
|
317
|
+
promptEX({
|
|
318
|
+
children: _jsx(Label, { children: message }),
|
|
319
|
+
hideCancel: true,
|
|
320
|
+
onOK
|
|
321
|
+
});
|
|
322
|
+
}, useEffectOnlyOnMount);
|
|
323
|
+
return {
|
|
324
|
+
promptEX, confirmEX, alertEX,
|
|
325
|
+
alertPrompt: _prompt ? _jsx(Prompter, Object.assign({}, _prompt)) : undefined
|
|
326
|
+
};
|
|
327
|
+
}
|
|
287
328
|
//# sourceMappingURL=hooks.js.map
|