implement multiline input

pull/21833/head
Matthew Hodgson 2015-11-15 03:36:59 +00:00
parent a082a24f9a
commit 999bb9a206
1 changed files with 44 additions and 6 deletions

View File

@ -22,6 +22,8 @@ var sdk = require('../../index');
var dis = require("../../dispatcher"); var dis = require("../../dispatcher");
var KeyCode = { var KeyCode = {
ENTER: 13, ENTER: 13,
BACKSPACE: 8,
DELETE: 46,
TAB: 9, TAB: 9,
SHIFT: 16, SHIFT: 16,
UP: 38, UP: 38,
@ -149,7 +151,7 @@ module.exports = {
}, },
onKeyDown: function (ev) { onKeyDown: function (ev) {
if (ev.keyCode === KeyCode.ENTER) { if (ev.keyCode === KeyCode.ENTER && !ev.shiftKey) {
var input = this.refs.textarea.value; var input = this.refs.textarea.value;
if (input.length === 0) { if (input.length === 0) {
ev.preventDefault(); ev.preventDefault();
@ -165,11 +167,23 @@ module.exports = {
} }
this.onTab(ev, members); this.onTab(ev, members);
} }
else if (ev.keyCode === KeyCode.UP || ev.keyCode === KeyCode.DOWN) { else if (ev.keyCode === KeyCode.UP) {
this.sentHistory.next( var input = this.refs.textarea.value;
ev.keyCode === KeyCode.UP ? 1 : -1 var offset = this.refs.textarea.selectionStart || 0;
); if (ev.ctrlKey || !input.substr(0, offset).match(/\n/)) {
ev.preventDefault(); this.sentHistory.next(1);
ev.preventDefault();
this.resizeInput();
}
}
else if (ev.keyCode === KeyCode.DOWN) {
var input = this.refs.textarea.value;
var offset = this.refs.textarea.selectionStart || 0;
if (ev.ctrlKey || !input.substr(offset).match(/\n/)) {
this.sentHistory.next(-1);
ev.preventDefault();
this.resizeInput();
}
} }
else if (ev.keyCode !== KeyCode.SHIFT && this.tabStruct.completing) { else if (ev.keyCode !== KeyCode.SHIFT && this.tabStruct.completing) {
// they're resuming typing; reset tab complete state vars. // they're resuming typing; reset tab complete state vars.
@ -187,6 +201,30 @@ module.exports = {
}, 10); // XXX: what is this 10ms setTimeout doing? Looks hacky :( }, 10); // XXX: what is this 10ms setTimeout doing? Looks hacky :(
}, },
resizeInput: function() {
// scrollHeight is at least equal to clientHeight, so we have to
// temporarily crimp clientHeight to 0 to get an accurate scrollHeight value
this.refs.textarea.style.height = "0px";
var newHeight = this.refs.textarea.scrollHeight < 100 ? this.refs.textarea.scrollHeight : 100;
this.refs.textarea.style.height = newHeight + "px";
if (this.props.roomView) {
// kick gemini-scrollbar to re-layout
this.props.roomView.forceUpdate();
}
},
onKeyUp: function(ev) {
if (ev.keyCode === KeyCode.ENTER ||
ev.keyCode === KeyCode.DELETE ||
ev.keyCode === KeyCode.BACKSPACE)
{
// resize to fit.
// XXX: ideally we should fire this onChange, but as it's fairly heavy we
// optimise and only resie on enter or delete/backspace.
this.resizeInput();
}
},
onEnter: function(ev) { onEnter: function(ev) {
var contentText = this.refs.textarea.value; var contentText = this.refs.textarea.value;