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

SharePoint Framework support for displaying dialog boxes

import { __extends } from "tslib";
import { DialogContent as DialogContentV8, DialogFooter } from '@fluentui/react/lib/Dialog';
import { DialogBody, DialogContent, DialogActions, DialogTitle, Button } from '@fluentui/react-components';
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { PrimaryButton, Button as ButtonV8, TextField } from '@ms/office-ui-fabric-react-bundle';
import BaseDialog from './BaseDialog';
import { isUsingV9ForSPDialogKSActivated } from './common/KillSwitches';
import styles from './styles/Dialog.module.scss';
/**
 * The React wrapper to use Fabric React components to render the prompt dialog
 */
var PromptDialogReact = /** @class */ (function (_super) {
    __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;
        if (!isUsingV9ForSPDialogKSActivated()) {
            return (React.createElement(DialogBody, { className: styles.dialogBody },
                React.createElement(DialogTitle, { className: styles.dialogTitle }, "Prompt"),
                React.createElement(DialogContent, { id: 'sp-dialog-content-message' },
                    this.props.message,
                    React.createElement(TextField, { componentRef: this._textRef, onChange: this._onValueChanged, defaultValue: this.props.defaultValue, onKeyDown: this._onKeyDown, autoFocus: true })),
                React.createElement(DialogActions, null,
                    React.createElement(Button, { onClick: this.props.close }, "Cancel"),
                    React.createElement(Button, { appearance: 'primary', onClick: this._ok }, "OK"))));
        }
        // Return the content of the dialog
        return (React.createElement(DialogContentV8, { title: 'Prompt', subText: this.props.message, subTextId: 'sp-dialog-content-message' },
            React.createElement(TextField, { componentRef: this._textRef, onChange: this._onValueChanged, defaultValue: this.props.defaultValue, onKeyDown: this._onKeyDown, autoFocus: true }),
            React.createElement(DialogFooter, null,
                React.createElement(ButtonV8, { onClick: this.props.close, text: 'Cancel' }),
                React.createElement(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) {
    __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));
export default PromptDialog;
//# sourceMappingURL=PromptDialog.js.map