@microsoft/sp-dialog
Version:
SharePoint Framework support for displaying dialog boxes
99 lines • 4.89 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var Dialog_1 = require("@fluentui/react/lib/Dialog");
var react_components_1 = require("@fluentui/react-components");
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"));
var KillSwitches_1 = require("./common/KillSwitches");
var Dialog_module_scss_1 = tslib_1.__importDefault(require("./styles/Dialog.module.scss"));
/**
* 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;
if (!(0, KillSwitches_1.isUsingV9ForSPDialogKSActivated)()) {
return (React.createElement(react_components_1.DialogBody, { className: Dialog_module_scss_1.default.dialogBody },
React.createElement(react_components_1.DialogTitle, { className: Dialog_module_scss_1.default.dialogTitle }, "Prompt"),
React.createElement(react_components_1.DialogContent, { id: 'sp-dialog-content-message' },
this.props.message,
React.createElement(office_ui_fabric_react_bundle_1.TextField, { componentRef: this._textRef, onChange: this._onValueChanged, defaultValue: this.props.defaultValue, onKeyDown: this._onKeyDown, autoFocus: true })),
React.createElement(react_components_1.DialogActions, null,
React.createElement(react_components_1.Button, { onClick: this.props.close }, "Cancel"),
React.createElement(react_components_1.Button, { appearance: 'primary', onClick: this._ok }, "OK"))));
}
// 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, { componentRef: this._textRef, onChange: this._onValueChanged, defaultValue: this.props.defaultValue, onKeyDown: this._onKeyDown, autoFocus: true }),
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