alm
Version:
The best IDE for TypeScript
104 lines (103 loc) • 4.45 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
/**
* The main dialog
*/
var React = require("react");
var ReactDOM = require("react-dom");
var csx = require("../base/csx");
var ui_1 = require("../ui");
var Modal = require("react-modal");
var styles = require("../styles/styles");
var utils_1 = require("../../common/utils");
var commands = require("../commands/commands");
var typestyle = require("typestyle");
var inputClassName = typestyle.style(styles.modal.inputStyleBase);
var InputDialog = /** @class */ (function (_super) {
__extends(InputDialog, _super);
function InputDialog(props) {
var _this = _super.call(this, props) || this;
_this.onOk = function () { return null; };
_this.onEsc = function () { return null; };
_this.handleClose = function () {
_this.onEsc();
_this.setState({ isOpen: false });
_this.clearHandlers();
};
_this.onChangeFilter = utils_1.debounce(function (e) {
var filterValue = _this.refs.mainInput.value;
// TODO:
}, 50);
_this.onChangeSelected = function (e) {
if (e.key == 'Enter') {
e.preventDefault();
_this.onOk(_this.refs.mainInput.value);
_this.setState({ isOpen: false });
_this.clearHandlers();
}
};
_this.clearHandlers = function () {
_this.onEsc = function () { return null; };
_this.onOk = function () { return null; };
};
_this.state = {};
return _this;
}
/**
* The main public API from the component
*/
InputDialog.prototype.open = function (options) {
var _this = this;
this.setState({
isOpen: true,
header: options.header,
hideInput: !!options.hideInput
});
this.onOk = options.onOk;
this.onEsc = options.onEsc;
/** When we come here from another modal the input takes a while to load */
setTimeout(function () {
_this.refs.mainInput.focus();
_this.refs.mainInput.value = options.filterValue || '';
});
};
InputDialog.prototype.componentDidMount = function () {
var _this = this;
/** setup singleton */
exports.inputDialog = this;
commands.esc.on(function () {
_this.handleClose();
});
};
InputDialog.prototype.render = function () {
var inputStyle = this.state.hideInput ? { height: '0px', opacity: 0 } : { opacity: 1 };
return React.createElement(Modal, { ref: "modal", isOpen: this.state.isOpen, onRequestClose: this.handleClose,
/** We want the modal to be auto fitting in height for this case */
style: {
content: { bottom: 'auto' }
} },
React.createElement("div", { style: csx.extend(csx.vertical, csx.flex) },
React.createElement("div", { style: csx.horizontal },
React.createElement("h4", null, this.state.header),
React.createElement("div", { style: csx.flex }),
React.createElement("div", { style: { fontSize: '0.9rem', color: 'grey' } },
React.createElement("code", { style: styles.modal.keyStrokeStyle }, "Esc"),
" to exit ",
React.createElement("code", { style: styles.modal.keyStrokeStyle }, "Enter"),
" to commit")),
React.createElement("div", { style: csx.extend(styles.padded1TopBottom, csx.vertical) },
React.createElement("input", { type: "text", ref: "mainInput", style: inputStyle, className: inputClassName, onChange: this.onChangeFilter, onKeyDown: this.onChangeSelected }))));
};
return InputDialog;
}(ui_1.BaseComponent));
exports.InputDialog = InputDialog;