@microsoft/sp-dialog/lib-commonjs/PromptDialog.js

SharePoint Framework support for displaying dialog boxes

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var Dialog_1 = require("@fluentui/react/lib/Dialog");
var React = tslib_1.__importStar(require("react"));
var ReactDom = tslib_1.__importStar(require("react-dom"));
var office_ui_fabric_react_bundle_1 = require("@ms/office-ui-fabric-react-bundle");
var BaseDialog_1 = tslib_1.__importDefault(require("./BaseDialog"));
/**
 * The React wrapper to use Fabric React components to render the prompt dialog
 */
var PromptDialogReact = /** @class */ (function (_super) {
    tslib_1.__extends(PromptDialogReact, _super);
    function PromptDialogReact(props) {
        var _this = _super.call(this, props) || this;
        _this._onKeyDown = function (evt) {
            if (evt.keyCode === 13) {
                // Enter button pressed
                _this._ok();
            }
            if (evt.keyCode === 27) {
                // Esc button pressed
                _this.props.close();
            }
        };
        _this._ok = function () {
            _this.props.resolve(_this._value);
        };
        _this._onValueChanged = function (ev, newValue) {
            _this._value = newValue;
        };
        _this._textRef = React.createRef();
        return _this;
    }
    PromptDialogReact.prototype.render = function () {
        this._value = this.props.defaultValue;
        // Return the content of the dialog
        return (React.createElement(Dialog_1.DialogContent, { title: 'Prompt', subText: this.props.message, subTextId: 'sp-dialog-content-message' },
            React.createElement(office_ui_fabric_react_bundle_1.TextField, tslib_1.__assign({ componentRef: this._textRef, onChange: this._onValueChanged, defaultValue: this.props.defaultValue, onKeyDown: this._onKeyDown }, { autoFocus: true } /* VSO:391730 Remove this workaround */)),
            React.createElement(Dialog_1.DialogFooter, null,
                React.createElement(office_ui_fabric_react_bundle_1.Button, { onClick: this.props.close, text: 'Cancel' }),
                React.createElement(office_ui_fabric_react_bundle_1.PrimaryButton, { onClick: this._ok, text: 'OK' }))));
    };
    PromptDialogReact.prototype.componentDidUpdate = function () {
        if (this._textRef.current) {
            this._textRef.current.focus();
        }
    };
    return PromptDialogReact;
}(React.Component));
/**
 * Internal implementation of a dialog to mimic browser's prompt() behavior.
 * Third-party can use this by calling the static method Dialog.prompt()
 *
 * @internal
 */
var PromptDialog = /** @class */ (function (_super) {
    tslib_1.__extends(PromptDialog, _super);
    function PromptDialog(message, resolve, defaultValue) {
        if (defaultValue === void 0) { defaultValue = ''; }
        var _this = _super.call(this, { isBlocking: true }) || this;
        _this.resolve = function (value) {
            void _this.close().then(function () {
                _this._resolve(value);
            });
        };
        _this._message = message;
        _this._defaultValue = defaultValue;
        _this._resolve = resolve;
        return _this;
    }
    PromptDialog.prototype.render = function () {
        ReactDom.render(React.createElement(PromptDialogReact, {
            message: this._message,
            defaultValue: this._defaultValue,
            close: this.close,
            resolve: this.resolve
        }), this.domElement);
    };
    PromptDialog.prototype.onAfterClose = function () {
        ReactDom.unmountComponentAtNode(this.domElement);
    };
    return PromptDialog;
}(BaseDialog_1.default));
exports.default = PromptDialog;
//# sourceMappingURL=PromptDialog.js.map