@pnp/spfx-controls-react/lib-commonjs/controls/iFrameDialog/IFrameDialog.js

Reusable React controls for SharePoint Framework solutions

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.IFrameDialog = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var Dialog_1 = require("@fluentui/react/lib/Dialog");
var IFrameDialogContent_1 = require("./IFrameDialogContent");
var telemetry = tslib_1.__importStar(require("../../common/telemetry"));
var sp_core_library_1 = require("@microsoft/sp-core-library");
var omit_1 = tslib_1.__importDefault(require("lodash/omit"));
var merge_1 = tslib_1.__importDefault(require("lodash/merge"));
/**
 * Dialog component to display content in iframe
 */
var IFrameDialog = /** @class */ (function (_super) {
    tslib_1.__extends(IFrameDialog, _super);
    function IFrameDialog(props, state) {
        var _this = _super.call(this, props, state) || this;
        telemetry.track('IFrameDialog', {});
        _this.state = {
            dialogId: null
        };
        return _this;
    }
    /**
     * componentWillMount lifecycle hook
     */
    IFrameDialog.prototype.UNSAFE_componentWillMount = function () {
        this.setState({
            dialogId: "dialog-".concat(sp_core_library_1.Guid.newGuid().toString())
        });
    };
    /**
     * componentDidMount lifecycle hook
     */
    IFrameDialog.prototype.componentDidMount = function () {
        this.setDialogStyling();
    };
    IFrameDialog.prototype.UNSAFE_componentWillReceiveProps = function (nextProps) {
        if (nextProps.hidden && nextProps.hidden !== this.props.hidden) {
            this.setState({
                isStylingSet: false
            });
        }
    };
    IFrameDialog.prototype.componentDidUpdate = function (prevProps, prevState) {
        this.setDialogStyling();
    };
    IFrameDialog.prototype.render = function () {
        var _this = this;
        var _a = this.props, iframeOnLoad = _a.iframeOnLoad, height = _a.height, width = _a.width, allowFullScreen = _a.allowFullScreen, allowTransparency = _a.allowTransparency, marginHeight = _a.marginHeight, marginWidth = _a.marginWidth, name = _a.name, sandbox = _a.sandbox, scrolling = _a.scrolling, seamless = _a.seamless, modalProps = _a.modalProps, dialogContentProps = _a.dialogContentProps, className = _a.className;
        var dlgModalProps = tslib_1.__assign(tslib_1.__assign({}, modalProps), { onLayerDidMount: function () { _this.setDialogStyling(); } });
        var dlgContentProps = (0, merge_1.default)({}, dialogContentProps, {
            styles: {
                content: {
                    display: 'flex',
                    flexDirection: 'column',
                    height: '100%'
                },
                inner: {
                    flexGrow: 1
                },
                innerContent: {
                    height: '100%'
                }
            }
        });
        var dlgStyles = {
            main: {
                width: width,
                maxWidth: width,
                minWidth: width,
                height: height
            }
        };
        return (React.createElement(Dialog_1.Dialog, tslib_1.__assign({ className: "".concat(this.state.dialogId, " ").concat(className || ''), styles: dlgStyles, modalProps: dlgModalProps, dialogContentProps: dlgContentProps }, (0, omit_1.default)(this.props, 'className', 'modalProps', 'dialogContentProps')),
            React.createElement(IFrameDialogContent_1.IFrameDialogContent, { src: this.props.url, iframeOnLoad: iframeOnLoad, close: this.props.onDismiss, height: height, allowFullScreen: allowFullScreen, allowTransparency: allowTransparency, marginHeight: marginHeight, marginWidth: marginWidth, name: name, sandbox: sandbox, scrolling: scrolling, seamless: seamless })));
    };
    /**
     * Set the dialog style
     */
    IFrameDialog.prototype.setDialogStyling = function () {
        if (!this.state.isStylingSet && !this.props.hidden && this.state.dialogId) {
            var element = document.querySelector(".".concat(this.state.dialogId, " .ms-Dialog-main"));
            var width = this.props.width;
            if (element && width) {
                element.style.width = width;
                element.style.minWidth = width;
                element.style.maxWidth = width;
                this.setState({
                    isStylingSet: true
                });
            }
        }
    };
    return IFrameDialog;
}(React.Component));
exports.IFrameDialog = IFrameDialog;
//# sourceMappingURL=IFrameDialog.js.map