@kwiz/fluentui
Version:
KWIZ common controls for FluentUI
52 lines • 3.35 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Dialog, DialogActions, DialogBody, DialogContent, DialogSurface, DialogTitle, DialogTrigger, useId } from '@fluentui/react-components';
import { DismissRegular } from '@fluentui/react-icons';
import { isNotEmptyArray, isNullOrEmptyString, noops, PushNoDuplicate, RemoveItemFromArr, stopEvent } from '@kwiz/common';
import React from 'react';
import { useKWIZFluentContext } from '../helpers/context-internal';
import { useKeyDown } from '../helpers/hooks-events';
import { ButtonEX, ButtonEXSecondary } from './button';
const dialogsOrder = [];
export const Prompter = React.forwardRef((props, ref) => {
const ctx = useKWIZFluentContext();
const disableKeyboardActions = React.useRef(props.disableKeyboardActions);
disableKeyboardActions.current = props.disableKeyboardActions;
const myId = useId();
React.useEffect(() => {
PushNoDuplicate(dialogsOrder, myId);
//cleanup
return () => RemoveItemFromArr(dialogsOrder, myId);
}, [myId]);
const onOK = props.onOK || noops;
const onCancel = props.onCancel || noops;
let okProps = Object.assign(Object.assign({}, (props.okButtonProps || {})), { onClick: () => onOK(), title: props.okButtonText || 'OK' });
let cancelProps = Object.assign(Object.assign({}, (props.cancelButtonProps || {})), { onClick: () => onCancel(), title: props.cancelButtonText || 'Cancel' });
useKeyDown({
onEnter: (e) => {
const topMost = dialogsOrder.indexOf(myId) === dialogsOrder.length - 1;
if (topMost && !disableKeyboardActions.current) {
stopEvent(e);
onOK();
}
},
onEscape: (e) => {
const topMost = dialogsOrder.indexOf(myId) === dialogsOrder.length - 1;
if (topMost && !disableKeyboardActions.current) {
stopEvent(e);
onCancel();
}
}
});
const actions = [];
if (!props.hideOk)
actions.push(_jsx(DialogTrigger, { disableButtonEnhancement: true, children: _jsx(ButtonEXSecondary, Object.assign({}, okProps)) }, 'ok'));
if (!props.hideCancel)
actions.push(_jsx(DialogTrigger, { disableButtonEnhancement: true, children: _jsx(ButtonEXSecondary, Object.assign({}, cancelProps)) }, 'cancel'));
if (isNotEmptyArray(props.actions))
actions.push(...props.actions);
const titleActions = props.titleActions ? [...props.titleActions] : [];
if (props.showCancelInTitle)
titleActions.push(_jsx(DialogTrigger, { disableButtonEnhancement: true, children: _jsx(ButtonEX, Object.assign({}, cancelProps, { icon: _jsx(DismissRegular, {}) })) }, 'cancel'));
return (_jsx(Dialog, { open: true, modalType: props.modalType, children: _jsx(DialogSurface, { mountNode: props.mountNode || ctx.mountNode, style: !isNullOrEmptyString(props.maxWidth) ? { maxWidth: props.maxWidth } : undefined, children: _jsxs(DialogBody, { children: [(!isNullOrEmptyString(props.title) || isNotEmptyArray(titleActions)) && _jsx(DialogTitle, { action: titleActions, children: props.title }), _jsx(DialogContent, { ref: ref, children: props.children }), isNotEmptyArray(actions) && _jsx(DialogActions, { fluid: actions.length > 2, children: actions })] }) }) }));
});
//# sourceMappingURL=prompt.js.map