From 61b48a5b1a4508f0a030850ed8d0a86ec569bef3 Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 23 Sep 2016 13:48:24 +0100 Subject: [PATCH 1/8] Add component for the directory search box --- .../views/elements/DirectorySearchBox.js | 85 +++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 src/components/views/elements/DirectorySearchBox.js diff --git a/src/components/views/elements/DirectorySearchBox.js b/src/components/views/elements/DirectorySearchBox.js new file mode 100644 index 0000000000..277c90f129 --- /dev/null +++ b/src/components/views/elements/DirectorySearchBox.js @@ -0,0 +1,85 @@ +/* +Copyright 2016 OpenMarket Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from 'react'; +import classnames from 'classnames'; + +export default class DirectorySearchBox extends React.Component { + constructor() { + super(); + this.collectInput = this.collectInput.bind(this); + this.onClearClick = this.onClearClick.bind(this); + this.onChange = this.onChange.bind(this); + this.onKeyUp = this.onKeyUp.bind(this); + + this.input = null; + } + + collectInput(e) { + this.input = e; + } + + onClearClick() { + if (this.input) { + this.input.value = ''; + this.input.focus(); + + if (this.props.onClear) { + this.props.onClear(); + } + } + } + + onChange() { + if (!this.input) return; + + if (this.props.onChange) { + this.props.onChange(this.input.value); + } + } + + onKeyUp(ev) { + if (ev.key == 'Enter') { + if (this.props.onJoinClick) { + this.props.onJoinClick(this.input.value); + } + } + } + + render() { + const searchbox_classes = { + mx_DirectorySearchBox: true, + }; + searchbox_classes[this.props.className] = true; + + return + + + ; + } +} + +DirectorySearchBox.propTypes = { + className: React.PropTypes.string, + onChange: React.PropTypes.func, + onClear: React.PropTypes.func, + onJoinClick: React.PropTypes.func, +}; From eeac0619f4bc9b3557f32eaebb7cd980edfd5e21 Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 23 Sep 2016 13:49:35 +0100 Subject: [PATCH 2/8] reskindex --- src/component-index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/component-index.js b/src/component-index.js index bb2d887e40..4122d0a631 100644 --- a/src/component-index.js +++ b/src/component-index.js @@ -59,6 +59,7 @@ module.exports.components['views.dialogs.TextInputDialog'] = require('./componen module.exports.components['views.elements.AddressSelector'] = require('./components/views/elements/AddressSelector'); module.exports.components['views.elements.AddressTile'] = require('./components/views/elements/AddressTile'); module.exports.components['views.elements.DeviceVerifyButtons'] = require('./components/views/elements/DeviceVerifyButtons'); +module.exports.components['views.elements.DirectorySearchBox'] = require('./components/views/elements/DirectorySearchBox'); module.exports.components['views.elements.EditableText'] = require('./components/views/elements/EditableText'); module.exports.components['views.elements.EditableTextContainer'] = require('./components/views/elements/EditableTextContainer'); module.exports.components['views.elements.EmojiText'] = require('./components/views/elements/EmojiText'); From b1e4c911ebfaa48e0209779f3f34e6a2ea2dd891 Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 23 Sep 2016 15:25:38 +0100 Subject: [PATCH 3/8] WIP omnipresent join button --- .../views/elements/DirectorySearchBox.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/components/views/elements/DirectorySearchBox.js b/src/components/views/elements/DirectorySearchBox.js index 277c90f129..c10295d247 100644 --- a/src/components/views/elements/DirectorySearchBox.js +++ b/src/components/views/elements/DirectorySearchBox.js @@ -24,6 +24,7 @@ export default class DirectorySearchBox extends React.Component { this.onClearClick = this.onClearClick.bind(this); this.onChange = this.onChange.bind(this); this.onKeyUp = this.onKeyUp.bind(this); + this.onJoinButtonClick = this.onJoinButtonClick.bind(this); this.input = null; } @@ -59,12 +60,28 @@ export default class DirectorySearchBox extends React.Component { } } + onJoinButtonClick() { + } + + _contentLooksLikeAlias() { + return true; + } + render() { const searchbox_classes = { mx_DirectorySearchBox: true, }; searchbox_classes[this.props.className] = true; + let join_button; + if (this._contentLooksLikeAlias()) { + join_button = + Join + ; + } + return + {join_button} ; } From eb5b1752138a2ae09d13d03cbb8dd16cfcbe1373 Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 23 Sep 2016 15:58:11 +0100 Subject: [PATCH 4/8] Layout to support less hardcoded CSS --- .../views/elements/DirectorySearchBox.js | 20 +++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/src/components/views/elements/DirectorySearchBox.js b/src/components/views/elements/DirectorySearchBox.js index c10295d247..56f0bfd134 100644 --- a/src/components/views/elements/DirectorySearchBox.js +++ b/src/components/views/elements/DirectorySearchBox.js @@ -83,14 +83,18 @@ export default class DirectorySearchBox extends React.Component { } return - - {join_button} - +
+ + {join_button} + + + +
; } } From fa193e775adfc31818dcd9559b493b2648689a5a Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 23 Sep 2016 16:34:47 +0100 Subject: [PATCH 5/8] Implement join button appearing Also switch input to controlled so we re-render when it changes so we can show/hide the join button --- .../views/elements/DirectorySearchBox.js | 24 ++++++++++++++----- 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/src/components/views/elements/DirectorySearchBox.js b/src/components/views/elements/DirectorySearchBox.js index 56f0bfd134..adca77ff9f 100644 --- a/src/components/views/elements/DirectorySearchBox.js +++ b/src/components/views/elements/DirectorySearchBox.js @@ -27,6 +27,10 @@ export default class DirectorySearchBox extends React.Component { this.onJoinButtonClick = this.onJoinButtonClick.bind(this); this.input = null; + + this.state = { + value: '', + }; } collectInput(e) { @@ -34,8 +38,9 @@ export default class DirectorySearchBox extends React.Component { } onClearClick() { + this.setState({value: ''}); + if (this.input) { - this.input.value = ''; this.input.focus(); if (this.props.onClear) { @@ -44,27 +49,34 @@ export default class DirectorySearchBox extends React.Component { } } - onChange() { + onChange(ev) { if (!this.input) return; + this.setState({value: ev.target.value}); if (this.props.onChange) { - this.props.onChange(this.input.value); + this.props.onChange(this.state.value); } } onKeyUp(ev) { if (ev.key == 'Enter') { if (this.props.onJoinClick) { - this.props.onJoinClick(this.input.value); + this.props.onJoinClick(this.state.value); } } } onJoinButtonClick() { + if (this.props.onJoinClick) { + this.props.onJoinClick(this.state.value); + } } _contentLooksLikeAlias() { - return true; + if (!this.input) return false; + + // liberal test for things that look like room aliases + return /#.+:.+/.test(this.state.value); } render() { @@ -84,7 +96,7 @@ export default class DirectorySearchBox extends React.Component { return
- Date: Mon, 26 Sep 2016 14:24:35 +0100 Subject: [PATCH 6/8] Correct regex for hash at the start --- src/components/views/elements/DirectorySearchBox.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/elements/DirectorySearchBox.js b/src/components/views/elements/DirectorySearchBox.js index adca77ff9f..b0931cfe47 100644 --- a/src/components/views/elements/DirectorySearchBox.js +++ b/src/components/views/elements/DirectorySearchBox.js @@ -76,7 +76,7 @@ export default class DirectorySearchBox extends React.Component { if (!this.input) return false; // liberal test for things that look like room aliases - return /#.+:.+/.test(this.state.value); + return /^#.+:.+/.test(this.state.value); } render() { From 9333f9153341736ef735d6b7927e601ecba10758 Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 26 Sep 2016 14:29:12 +0100 Subject: [PATCH 7/8] Give react callbacks underscores too --- .../views/elements/DirectorySearchBox.js | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/components/views/elements/DirectorySearchBox.js b/src/components/views/elements/DirectorySearchBox.js index b0931cfe47..ac6602f566 100644 --- a/src/components/views/elements/DirectorySearchBox.js +++ b/src/components/views/elements/DirectorySearchBox.js @@ -20,11 +20,11 @@ import classnames from 'classnames'; export default class DirectorySearchBox extends React.Component { constructor() { super(); - this.collectInput = this.collectInput.bind(this); - this.onClearClick = this.onClearClick.bind(this); - this.onChange = this.onChange.bind(this); - this.onKeyUp = this.onKeyUp.bind(this); - this.onJoinButtonClick = this.onJoinButtonClick.bind(this); + this._collectInput = this._collectInput.bind(this); + this._onClearClick = this._onClearClick.bind(this); + this._onChange = this._onChange.bind(this); + this._onKeyUp = this._onKeyUp.bind(this); + this._onJoinButtonClick = this._onJoinButtonClick.bind(this); this.input = null; @@ -33,11 +33,11 @@ export default class DirectorySearchBox extends React.Component { }; } - collectInput(e) { + _collectInput(e) { this.input = e; } - onClearClick() { + _onClearClick() { this.setState({value: ''}); if (this.input) { @@ -49,7 +49,7 @@ export default class DirectorySearchBox extends React.Component { } } - onChange(ev) { + _onChange(ev) { if (!this.input) return; this.setState({value: ev.target.value}); @@ -58,7 +58,7 @@ export default class DirectorySearchBox extends React.Component { } } - onKeyUp(ev) { + _onKeyUp(ev) { if (ev.key == 'Enter') { if (this.props.onJoinClick) { this.props.onJoinClick(this.state.value); @@ -66,7 +66,7 @@ export default class DirectorySearchBox extends React.Component { } } - onJoinButtonClick() { + _onJoinButtonClick() { if (this.props.onJoinClick) { this.props.onJoinClick(this.state.value); } @@ -88,7 +88,7 @@ export default class DirectorySearchBox extends React.Component { let join_button; if (this._contentLooksLikeAlias()) { join_button = Join ; @@ -98,13 +98,13 @@ export default class DirectorySearchBox extends React.Component {
{join_button} - +
; From ba090a1198a660937d0f0bc309f8f5e0bdeb1e50 Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 26 Sep 2016 15:13:57 +0100 Subject: [PATCH 8/8] Trailing .+ was redundant --- src/components/views/elements/DirectorySearchBox.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/elements/DirectorySearchBox.js b/src/components/views/elements/DirectorySearchBox.js index ac6602f566..1cd9748714 100644 --- a/src/components/views/elements/DirectorySearchBox.js +++ b/src/components/views/elements/DirectorySearchBox.js @@ -76,7 +76,7 @@ export default class DirectorySearchBox extends React.Component { if (!this.input) return false; // liberal test for things that look like room aliases - return /^#.+:.+/.test(this.state.value); + return /^#.+:/.test(this.state.value); } render() {