diff --git a/web/app/components/input/__field/input__field.scss b/web/app/components/input/__field/input__field.scss index a801f542..0e8b5a1a 100644 --- a/web/app/components/input/__field/input__field.scss +++ b/web/app/components/input/__field/input__field.scss @@ -29,4 +29,8 @@ display: block; } } + + &:disabled { + color: #777; + } } diff --git a/web/app/components/input/input.jsx b/web/app/components/input/input.jsx index c4a08be6..b4fd3e02 100644 --- a/web/app/components/input/input.jsx +++ b/web/app/components/input/input.jsx @@ -8,6 +8,7 @@ export default class Input extends Component { this.autoResize = this.autoResize.bind(this); this.send = this.send.bind(this); + this.onKeyDown = this.onKeyDown.bind(this); } componentDidMount() { @@ -16,6 +17,12 @@ export default class Input extends Component { } } + onKeyDown(e) { + if (e.keyCode === 13 && (e.metaKey || e.ctrlKey)) { + this.send(); + } + } + autoResize() { this.fieldNode.style.height = ''; this.setState({ height: this.fieldNode.scrollHeight }); @@ -25,7 +32,12 @@ export default class Input extends Component { const text = this.fieldNode.value; const pid = this.props.pid; - e.preventDefault(); + if (e) e.preventDefault(); + + if (!text || !text.trim()) return; + + this.setState({ isFieldDisabled: true }); + api.send({ text, ...(pid ? { pid } : {}) }) .then(({ id }) => { // TODO: maybe we should run onsubmit before send; like in optimistic ui @@ -37,18 +49,21 @@ export default class Input extends Component { }) .catch(() => { // TODO: do smth? - }); + }) + .finally(() => this.setState({ isFieldDisabled: false })); } - render(props, { height }) { + render(props, { height, isFieldDisabled }) { return (