@microsoft/sp-dialog/lib/V9DialogWrapper.js

SharePoint Framework support for displaying dialog boxes

import { __assign } from "tslib";
import * as React from 'react';
import { AnimationVariables } from '@fluentui/react';
import { Dialog, DialogSurface, makeStyles, mergeClasses, shorthands } from '@fluentui/react-components';
import { IdPrefixProvider, FluentProvider } from '@fluentui/react-components';
import { createV9Theme } from '@fluentui/react-migration-v8-v9';
import { getTheme } from '@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 = makeStyles({
    dialogSurface: __assign({ maxHeight: 'calc(100% - 32px)', maxWidth: 'calc(100% - 32px)', minWidth: '288px', width: 'fit-content' }, shorthands.padding(0))
});
var MODAL_DISMISS_DELAY = parseFloat(AnimationVariables.durationValue2) * 1000;
export 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 = createV9Theme(getTheme());
    return (React.createElement(IdPrefixProvider, { value: 'ms-sp-dialog-' },
        React.createElement(FluentProvider, { theme: fluentV9Theme },
            React.createElement(Dialog, { open: isOpen, onOpenChange: onOpenChange, modalType: isBlocking ? 'alert' : 'modal' },
                React.createElement(DialogSurface, __assign({}, popupProps, { className: mergeClasses(styles.dialogSurface, popupProps === null || popupProps === void 0 ? void 0 : popupProps.className) }), props.children)))));
};
//# sourceMappingURL=V9DialogWrapper.js.map