@pnp/spfx-controls-react/lib-commonjs/controls/fields/fieldLookupRenderer/FieldLookupRenderer.js

Reusable React controls for SharePoint Framework solutions

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FieldLookupRenderer = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var Utilities_1 = require("@fluentui/react/lib/Utilities");
var Dialog_1 = require("@fluentui/react/lib/Dialog");
var Link_1 = require("@fluentui/react/lib/Link");
var Spinner_1 = require("@fluentui/react/lib/Spinner");
var telemetry = tslib_1.__importStar(require("../../../common/telemetry"));
var FieldLookupRenderer_module_scss_1 = tslib_1.__importDefault(require("./FieldLookupRenderer.module.scss"));
var IFrameDialog_1 = require("../../iFrameDialog/IFrameDialog");
var Utilities_2 = require("../../../Utilities");
/**
 * Field Lookup Renderer.
 * Used for:
 *   - Lookup, LookupMulti
 */
var FieldLookupRenderer = /** @class */ (function (_super) {
    tslib_1.__extends(FieldLookupRenderer, _super);
    function FieldLookupRenderer(props, state) {
        var _this = _super.call(this, props, state) || this;
        telemetry.track('FieldLookupRenderer', {});
        _this.state = {
            hideDialog: true,
            dispFormUrl: props.dispFormUrl
        };
        return _this;
    }
    FieldLookupRenderer.prototype.render = function () {
        var _this = this;
        var lookupLinks = this.props.lookups.map(function (lookup) {
            return React.createElement(Link_1.Link, { key: lookup.lookupId, onClick: _this._onClick.bind(_this, lookup), className: FieldLookupRenderer_module_scss_1.default.lookup, style: _this.props.cssProps }, lookup.lookupValue);
        });
        return (React.createElement("div", { style: this.props.cssProps, className: (0, Utilities_1.css)(this.props.className) },
            lookupLinks,
            !this.state.hideDialog && this.state.dispFormUrl && React.createElement(IFrameDialog_1.IFrameDialog, { url: this.state.lookupDispFormUrl, iframeOnLoad: this._onIframeLoaded.bind(this), hidden: this.state.hideDialog, onDismiss: this._onDialogDismiss.bind(this), modalProps: {
                    isBlocking: true,
                    containerClassName: FieldLookupRenderer_module_scss_1.default.dialogContainer
                }, dialogContentProps: {
                    type: Dialog_1.DialogType.close,
                    showCloseButton: true
                }, width: '570px', height: '250px' }),
            !this.state.hideDialog && !this.state.dispFormUrl && React.createElement(Dialog_1.Dialog, { onDismiss: this._onDialogDismiss.bind(this), modalProps: {
                    isBlocking: true,
                    containerClassName: FieldLookupRenderer_module_scss_1.default.dialogContainer
                }, dialogContentProps: {
                    type: Dialog_1.DialogType.close,
                    showCloseButton: true
                } },
                React.createElement(Spinner_1.Spinner, { size: Spinner_1.SpinnerSize.large }))));
    };
    FieldLookupRenderer.prototype._onClick = function (lookup) {
        var _this = this;
        if (this.props.onClick) {
            var args = {
                lookup: lookup
            };
            this.props.onClick(args);
            return;
        }
        //
        // showing Display Form in the dialog
        //
        var dispFormUrl = this.state.dispFormUrl;
        if (dispFormUrl) {
            this.setState({
                lookupDispFormUrl: "".concat(dispFormUrl).concat((dispFormUrl.indexOf('?') === -1 ? '?' : '&'), "ID=").concat(lookup.lookupId, "&RootFolder=*&IsDlg=1"),
                hideDialog: false
            });
        }
        else if (this.props.fieldId) {
            this.setState({
                hideDialog: false
            });
            Utilities_2.SPHelper.getLookupFieldListDispFormUrl(this.props.fieldId, this.props.context).then(function (dispFormUrlValue) {
                var listDispFormUrl = dispFormUrlValue.toString();
                _this.setState(function (prevState, props) {
                    if (prevState.hideDialog) {
                        return;
                    }
                    return {
                        dispFormUrl: listDispFormUrl,
                        lookupDispFormUrl: "".concat(listDispFormUrl, "&ID=").concat(lookup.lookupId, "&RootFolder=*&IsDlg=1")
                    };
                });
            })
                .catch(function () {
                // no-op;
            });
        }
    };
    FieldLookupRenderer.prototype._onIframeLoaded = function (iframe) {
        //
        // some additional configuration to beutify content of the iframe
        //
        var iframeWindow = iframe.contentWindow;
        var iframeDocument = iframeWindow.document;
        var s4Workspace = iframeDocument.getElementById('s4-workspace');
        s4Workspace.style.height = iframe.style.height;
        s4Workspace.scrollIntoView();
    };
    FieldLookupRenderer.prototype._onDialogDismiss = function () {
        this.setState({
            hideDialog: true
        });
    };
    return FieldLookupRenderer;
}(React.Component));
exports.FieldLookupRenderer = FieldLookupRenderer;
//# sourceMappingURL=FieldLookupRenderer.js.map