@kwiz/fluentui
Version:
KWIZ common controls for FluentUI
67 lines • 4.62 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Dialog, DialogActions, DialogBody, DialogContent, DialogSurface, DialogTitle, DialogTrigger, useFocusFinders, 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 { useRefWithState } from '../helpers';
import { useKWIZFluentContext } from '../helpers/context-internal';
import { useKeyDown } from '../helpers/hooks-events';
import { ButtonEX, ButtonEXSecondary } from './button';
const dialogsOrder = []; //can use dialogsDictionary keys but this would be faster and more efficient
const dialogsDictionary = {};
export const Prompter = React.forwardRef((props, ref) => {
var _a, _b, _c, _d, _e, _f;
const ctx = useKWIZFluentContext();
const disableKeyboardActions = React.useRef(props.disableKeyboardActions);
disableKeyboardActions.current = props.disableKeyboardActions;
const bodyRef = useRefWithState(undefined, undefined, ref);
const { findFirstFocusable } = useFocusFinders();
const myId = useId();
React.useEffect(() => {
PushNoDuplicate(dialogsOrder, myId);
dialogsDictionary[myId] = { findFirstFocusable, bodyRef: bodyRef.ref };
//cleanup
return () => {
var _a;
RemoveItemFromArr(dialogsOrder, myId); //cleanup
delete dialogsDictionary[myId]; //cleanup
//find top most dialog and restore focus:
const restore = dialogsDictionary[dialogsOrder[dialogsOrder.length - 1]];
if (restore && restore.bodyRef.current) {
(_a = restore.findFirstFocusable(restore.bodyRef.current)) === null || _a === void 0 ? void 0 : _a.focus();
}
};
}, [myId]);
const onOK = props.onOK || noops;
const onCancel = props.onCancel || noops;
let okProps = Object.assign(Object.assign({}, (props.okButtonProps || {})), { onClick: () => onOK(), title: props.okButtonText || ((_a = props.okButtonProps) === null || _a === void 0 ? void 0 : _a.title) || ((_c = (_b = ctx.strings) === null || _b === void 0 ? void 0 : _b.btn_ok) === null || _c === void 0 ? void 0 : _c.call(_b)) || 'OK' });
let cancelProps = Object.assign(Object.assign({}, (props.cancelButtonProps || {})), { onClick: () => onCancel(), title: props.cancelButtonText || ((_d = props.cancelButtonProps) === null || _d === void 0 ? void 0 : _d.title) || ((_f = (_e = ctx.strings) === null || _e === void 0 ? void 0 : _e.btn_cancel) === null || _f === void 0 ? void 0 : _f.call(_e)) || '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: bodyRef.set, children: props.children }), isNotEmptyArray(actions) && _jsx(DialogActions, { fluid: actions.length > 2, children: actions })] }) }) }));
});
//# sourceMappingURL=prompt.js.map