@kwiz/fluentui 1.0.12 → 1.0.13
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -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
|
+
});
|