PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Implement join button appearing

Browse source 
Also switch input to controlled so we re-render when it changes so we can show/hide the join button
This commit is contained in:
David Baker 2016-09-23 16:34:47 +01:00
parent eb5b175213
commit fa193e775a
1 changed files with 18 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/components/views/elements/DirectorySearchBox.js
View file

@ -27,6 +27,10 @@ export default class DirectorySearchBox extends React.Component {
this.onJoinButtonClick = this.onJoinButtonClick.bind(this); this.onJoinButtonClick = this.onJoinButtonClick.bind(this);
this.input = null; this.input = null;
this.state = {
value: '',
};
} }
collectInput(e) { collectInput(e) {
@ -34,8 +38,9 @@ export default class DirectorySearchBox extends React.Component {
} }
onClearClick() { onClearClick() {
this.setState({value: ''});
if (this.input) { if (this.input) {
this.input.value = '';
this.input.focus(); this.input.focus();
if (this.props.onClear) { if (this.props.onClear) {
@ -44,27 +49,34 @@ export default class DirectorySearchBox extends React.Component {
} }
} }
onChange() { onChange(ev) {
if (!this.input) return; if (!this.input) return;
this.setState({value: ev.target.value});
if (this.props.onChange) { if (this.props.onChange) {
this.props.onChange(this.input.value); this.props.onChange(this.state.value);
} }
} }
onKeyUp(ev) { onKeyUp(ev) {
if (ev.key == 'Enter') { if (ev.key == 'Enter') {
if (this.props.onJoinClick) { if (this.props.onJoinClick) {
this.props.onJoinClick(this.input.value); this.props.onJoinClick(this.state.value);
} }
} }
} }
onJoinButtonClick() { onJoinButtonClick() {
if (this.props.onJoinClick) {
this.props.onJoinClick(this.state.value);
}
} }
_contentLooksLikeAlias() { _contentLooksLikeAlias() {
return true; if (!this.input) return false;
// liberal test for things that look like room aliases
return /#.+:.+/.test(this.state.value);
} }
render() { render() {
@ -84,7 +96,7 @@ export default class DirectorySearchBox extends React.Component {
return <span className={classnames(searchbox_classes)}> return <span className={classnames(searchbox_classes)}>
<div className="mx_DirectorySearchBox_container"> <div className="mx_DirectorySearchBox_container">
<input type="text" size="64" <input type="text" value={this.state.value}
className="mx_DirectorySearchBox_input" className="mx_DirectorySearchBox_input"
ref={this.collectInput} ref={this.collectInput}
onChange={this.onChange} onKeyUp={this.onKeyUp} onChange={this.onChange} onKeyUp={this.onKeyUp}