@microsoft/sp-dialog
Version:
SharePoint Framework support for displaying dialog boxes
46 lines • 2.63 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.V9Dialog = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_1 = require("@fluentui/react");
var react_components_1 = require("@fluentui/react-components");
var react_components_2 = require("@fluentui/react-components");
var react_migration_v8_v9_1 = require("@fluentui/react-migration-v8-v9");
var react_2 = require("@fluentui/react");
// These styles are copied from the Fabric implementation of the dialog
// Since we have support many custom dialog in the SPFX which relies on these style
var useStyles = (0, react_components_1.makeStyles)({
dialogSurface: tslib_1.__assign({ maxHeight: 'calc(100% - 32px)', maxWidth: 'calc(100% - 32px)', minWidth: '288px', width: 'fit-content' }, react_components_1.shorthands.padding(0))
});
var MODAL_DISMISS_DELAY = parseFloat(react_1.AnimationVariables.durationValue2) * 1000;
var V9Dialog = function (props) {
var isOpen = props.isOpen, onDismissed = props.onDismissed, onDismiss = props.onDismiss, isBlocking = props.isBlocking, popupProps = props.popupProps;
var styles = useStyles();
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var onOpenChange = function (ev, data) {
if (data.open === false) {
onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(ev);
}
};
React.useEffect(function () {
var timeoutId;
if (!isOpen) {
timeoutId = setTimeout(function () {
onDismissed === null || onDismissed === void 0 ? void 0 : onDismissed();
}, MODAL_DISMISS_DELAY);
}
return function () {
if (timeoutId) {
clearTimeout(timeoutId);
}
};
}, [isOpen, onDismissed]);
var fluentV9Theme = (0, react_migration_v8_v9_1.createV9Theme)((0, react_2.getTheme)());
return (React.createElement(react_components_2.IdPrefixProvider, { value: 'ms-sp-dialog-' },
React.createElement(react_components_2.FluentProvider, { theme: fluentV9Theme },
React.createElement(react_components_1.Dialog, { open: isOpen, onOpenChange: onOpenChange, modalType: isBlocking ? 'alert' : 'modal' },
React.createElement(react_components_1.DialogSurface, tslib_1.__assign({}, popupProps, { className: (0, react_components_1.mergeClasses)(styles.dialogSurface, popupProps === null || popupProps === void 0 ? void 0 : popupProps.className) }), props.children)))));
};
exports.V9Dialog = V9Dialog;
//# sourceMappingURL=V9DialogWrapper.js.map