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

Attempt to sanitize ChatInviteDialog a bit

Browse source 
* Use binds rather than onFoo functions which aren't actually
   handler functions themselves but return them
 * Rename onKeyUp to moveSelectionDown etc,, reserving onKeyUp
   for "a key has been released" rather than, "the up arrow key
   has been pressed"
This commit is contained in:
David Baker 2017-01-18 17:51:39 +00:00
parent 4d7ed9a58f
commit f105ec2794
2 changed files with 12 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/views/dialogs/ChatInviteDialog.js
View file

@ -119,15 +119,15 @@ module.exports = React.createClass({
} else if (e.keyCode === 38) { // up arrow } else if (e.keyCode === 38) { // up arrow
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
this.addressSelector.onKeyUp(); this.addressSelector.moveSelectionUp();
} else if (e.keyCode === 40) { // down arrow } else if (e.keyCode === 40) { // down arrow
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
this.addressSelector.onKeyDown(); this.addressSelector.moveSelectionDown();
} else if (this.state.queryList.length > 0 && (e.keyCode === 188, e.keyCode === 13 || e.keyCode === 9)) { // comma or enter or tab } else if (this.state.queryList.length > 0 && (e.keyCode === 188, e.keyCode === 13 || e.keyCode === 9)) { // comma or enter or tab
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
this.addressSelector.onKeySelect(); this.addressSelector.chooseSelection();
} else if (this.refs.textinput.value.length === 0 && this.state.inviteList.length && e.keyCode === 8) { // backspace } else if (this.refs.textinput.value.length === 0 && this.state.inviteList.length && e.keyCode === 8) { // backspace
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();

18
src/components/views/elements/AddressSelector.js
View file

@ -55,7 +55,7 @@ module.exports = React.createClass({
} }
}, },
onKeyUp: function() { moveSelectionUp: function() {
if (this.state.selected > 0) { if (this.state.selected > 0) {
this.setState({ this.setState({
selected: this.state.selected - 1, selected: this.state.selected - 1,
@ -64,7 +64,7 @@ module.exports = React.createClass({
} }
}, },
onKeyDown: function() { moveSelectionDown: function() {
if (this.state.selected < this._maxSelected(this.props.addressList)) { if (this.state.selected < this._maxSelected(this.props.addressList)) {
this.setState({ this.setState({
selected: this.state.selected + 1, selected: this.state.selected + 1,
@ -73,25 +73,19 @@ module.exports = React.createClass({
} }
}, },
onKeySelect: function() { chooseSelection: function() {
this.selectAddress(this.state.selected); this.selectAddress(this.state.selected);
}, },
onClick: function(index) { onClick: function(index) {
var self = this; this.selectAddress(index);
return function() {
self.selectAddress(index);
};
}, },
onMouseEnter: function(index) { onMouseEnter: function(index) {
var self = this; this.setState({
return function() {
self.setState({
selected: index, selected: index,
hover: true, hover: true,
}); });
};
}, },
onMouseLeave: function() { onMouseLeave: function() {
@ -124,7 +118,7 @@ module.exports = React.createClass({
// Saving the addressListElement so we can use it to work out, in the componentDidUpdate // Saving the addressListElement so we can use it to work out, in the componentDidUpdate
// method, how far to scroll when using the arrow keys // method, how far to scroll when using the arrow keys
addressList.push( addressList.push(
<div className={classes} onClick={this.onClick(i)} onMouseEnter={this.onMouseEnter(i)} onMouseLeave={this.onMouseLeave} key={i} ref={(ref) => { this.addressListElement = ref; }} > <div className={classes} onClick={this.onClick.bind(this, i)} onMouseEnter={this.onMouseEnter.bind(this, i)} onMouseLeave={this.onMouseLeave} key={i} ref={(ref) => { this.addressListElement = ref; }} >
<AddressTile address={this.props.addressList[i].userId} justified={true} networkName="vector" networkUrl="img/search-icon-vector.svg" /> <AddressTile address={this.props.addressList[i].userId} justified={true} networkName="vector" networkUrl="img/search-icon-vector.svg" />
</div> </div>
); );