@kwiz/fluentui 1.0.12 → 1.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -8,9 +8,20 @@ export interface IPrompterProps {
|
|
|
8
8
|
onCancel?: () => void;
|
|
9
9
|
okButtonText?: string;
|
|
10
10
|
cancelButtonText?: string;
|
|
11
|
-
title?: string;
|
|
11
|
+
title?: string | JSX.Element;
|
|
12
12
|
okButtonProps?: Partial<ButtonEXProps>;
|
|
13
13
|
cancelButtonProps?: Partial<ButtonEXProps>;
|
|
14
14
|
children?: JSX.Element;
|
|
15
|
+
/** allow to epand the dialog to be wider */
|
|
16
|
+
maxWidth?: number | string;
|
|
17
|
+
/** additional button actions at the bottom */
|
|
18
|
+
actions?: JSX.Element[];
|
|
19
|
+
/** dialog title action (send multiple ones inside <></>) */
|
|
20
|
+
titleAction?: JSX.Element;
|
|
21
|
+
/** specify a specific mount node for this dialog */
|
|
22
|
+
mountNode?: HTMLElement | null | {
|
|
23
|
+
element?: HTMLElement | null;
|
|
24
|
+
className?: string;
|
|
25
|
+
};
|
|
15
26
|
}
|
|
16
27
|
export declare const Prompter: React.FunctionComponent<React.PropsWithChildren<IPrompterProps>>;
|
package/dist/controls/prompt.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Dialog, DialogActions, DialogBody, DialogContent, DialogSurface, DialogTitle, DialogTrigger } from '@fluentui/react-components';
|
|
3
|
-
import { isNullOrEmptyString } from '@kwiz/common';
|
|
3
|
+
import { isNotEmptyArray, isNullOrEmptyString } from '@kwiz/common';
|
|
4
4
|
import React from 'react';
|
|
5
5
|
import { useKWIZFluentContext } from '../helpers/context';
|
|
6
6
|
import { ButtonEXSecondary } from './button';
|
|
@@ -18,6 +18,13 @@ export const Prompter = (props) => {
|
|
|
18
18
|
document.addEventListener("keydown", handler);
|
|
19
19
|
return () => document.removeEventListener("keydown", handler);
|
|
20
20
|
});
|
|
21
|
-
|
|
21
|
+
const actions = [];
|
|
22
|
+
if (!props.hideOk)
|
|
23
|
+
actions.push(_jsx(DialogTrigger, { disableButtonEnhancement: true, children: _jsx(ButtonEXSecondary, Object.assign({}, okProps)) }, 'ok'));
|
|
24
|
+
if (!props.hideCancel)
|
|
25
|
+
actions.push(_jsx(DialogTrigger, { disableButtonEnhancement: true, children: _jsx(ButtonEXSecondary, Object.assign({}, cancelProps)) }, 'cancel'));
|
|
26
|
+
if (isNotEmptyArray(props.actions))
|
|
27
|
+
actions.push(...props.actions);
|
|
28
|
+
return (_jsx(Dialog, { open: true, children: _jsxs(DialogSurface, { mountNode: props.mountNode || ctx.mountNode, style: !isNullOrEmptyString(props.maxWidth) ? { maxWidth: props.maxWidth } : undefined, children: [!isNullOrEmptyString(props.title) && _jsx(DialogTitle, { action: props.titleAction, children: props.title }), _jsxs(DialogBody, { children: [_jsx(DialogContent, { children: props.children }), isNotEmptyArray(actions) && _jsx(DialogActions, { fluid: actions.length > 2, children: actions })] })] }) }));
|
|
22
29
|
};
|
|
23
30
|
//# sourceMappingURL=prompt.js.map
|
|
@@ -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,EAAE,aAAa,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACzI,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"prompt.js","sourceRoot":"","sources":["../../src/controls/prompt.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/controls/prompt.tsx
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Dialog, DialogActions, DialogBody, DialogContent, DialogSurface, DialogTitle, DialogTrigger } from '@fluentui/react-components';
|
|
2
|
-
import { isNullOrEmptyString } from '@kwiz/common';
|
|
2
|
+
import { isNotEmptyArray, isNullOrEmptyString } from '@kwiz/common';
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { useKWIZFluentContext } from '../helpers/context';
|
|
5
5
|
import { ButtonEXProps, ButtonEXSecondary } from './button';
|
|
@@ -12,12 +12,27 @@ export interface IPrompterProps {
|
|
|
12
12
|
onCancel?: () => void;
|
|
13
13
|
okButtonText?: string;
|
|
14
14
|
cancelButtonText?: string;
|
|
15
|
-
title?: string;
|
|
15
|
+
title?: string | JSX.Element;
|
|
16
16
|
okButtonProps?: Partial<ButtonEXProps>;
|
|
17
17
|
cancelButtonProps?: Partial<ButtonEXProps>;
|
|
18
18
|
children?: JSX.Element;
|
|
19
|
+
|
|
20
|
+
/** allow to epand the dialog to be wider */
|
|
21
|
+
maxWidth?: number | string;
|
|
22
|
+
|
|
23
|
+
/** additional button actions at the bottom */
|
|
24
|
+
actions?: JSX.Element[];
|
|
25
|
+
|
|
26
|
+
/** dialog title action (send multiple ones inside <></>) */
|
|
27
|
+
titleAction?: JSX.Element;
|
|
28
|
+
|
|
29
|
+
/** specify a specific mount node for this dialog */
|
|
30
|
+
mountNode?: HTMLElement | null | {
|
|
31
|
+
element?: HTMLElement | null;
|
|
32
|
+
className?: string;
|
|
33
|
+
}
|
|
19
34
|
}
|
|
20
|
-
export const Prompter
|
|
35
|
+
export const Prompter = React.forwardRef<HTMLDivElement, (IPrompterProps)>((props, ref) => {
|
|
21
36
|
const ctx = useKWIZFluentContext();
|
|
22
37
|
|
|
23
38
|
let okProps: ButtonEXProps = {
|
|
@@ -39,24 +54,34 @@ export const Prompter: React.FunctionComponent<React.PropsWithChildren<IPrompter
|
|
|
39
54
|
document.addEventListener("keydown", handler);
|
|
40
55
|
return () => document.removeEventListener("keydown", handler);
|
|
41
56
|
});
|
|
57
|
+
|
|
58
|
+
const actions: JSX.Element[] = [];
|
|
59
|
+
if (!props.hideOk) actions.push(<DialogTrigger key='ok' disableButtonEnhancement>
|
|
60
|
+
<ButtonEXSecondary {...okProps} />
|
|
61
|
+
</DialogTrigger>);
|
|
62
|
+
if (!props.hideCancel) actions.push(<DialogTrigger key='cancel' disableButtonEnhancement>
|
|
63
|
+
<ButtonEXSecondary {...cancelProps} />
|
|
64
|
+
</DialogTrigger>);
|
|
65
|
+
if (isNotEmptyArray(props.actions))
|
|
66
|
+
actions.push(...props.actions);
|
|
67
|
+
|
|
68
|
+
|
|
42
69
|
return (
|
|
43
70
|
<Dialog open>
|
|
44
|
-
<DialogSurface mountNode={ctx.mountNode}
|
|
45
|
-
{!isNullOrEmptyString(props.
|
|
71
|
+
<DialogSurface mountNode={props.mountNode || ctx.mountNode}
|
|
72
|
+
style={!isNullOrEmptyString(props.maxWidth) ? { maxWidth: props.maxWidth } : undefined}>
|
|
73
|
+
{!isNullOrEmptyString(props.title) && <DialogTitle
|
|
74
|
+
action={props.titleAction}
|
|
75
|
+
>{props.title}</DialogTitle>}
|
|
46
76
|
<DialogBody>
|
|
47
|
-
<DialogContent>
|
|
77
|
+
<DialogContent ref={ref}>
|
|
48
78
|
{props.children}
|
|
49
79
|
</DialogContent>
|
|
50
|
-
<DialogActions>
|
|
51
|
-
{
|
|
52
|
-
|
|
53
|
-
</DialogTrigger>}
|
|
54
|
-
{props.hideCancel ? undefined : <DialogTrigger disableButtonEnhancement>
|
|
55
|
-
<ButtonEXSecondary {...cancelProps} />
|
|
56
|
-
</DialogTrigger>}
|
|
57
|
-
</DialogActions>
|
|
80
|
+
{isNotEmptyArray(actions) && <DialogActions fluid={actions.length > 2}>
|
|
81
|
+
{actions}
|
|
82
|
+
</DialogActions>}
|
|
58
83
|
</DialogBody>
|
|
59
84
|
</DialogSurface>
|
|
60
85
|
</Dialog>
|
|
61
86
|
);
|
|
62
|
-
}
|
|
87
|
+
});
|