Account selector close operations (#4728)

* Close when clicking anywhere on body pane

* Allow click to propagate on address click

* Rename noCopy -> allowAddressClick

* Handle i18n strings in input

* Close on pasted addresses (valid entry)

* allowAddressClick default

* Don't do onClick on AccountCard if text is selected

* Reset filter value on close for address selection

* Better close on click for AccountSelection
This commit is contained in:
Jaco Greeff 2017-03-03 14:38:40 +01:00 committed by GitHub
parent 5559374676
commit 6760ae0e84
4 changed files with 56 additions and 9 deletions

View File

@ -28,12 +28,17 @@ import styles from './accountCard.css';
export default class AccountCard extends Component {
static propTypes = {
account: PropTypes.object.isRequired,
allowAddressClick: PropTypes.bool,
balance: PropTypes.object,
className: PropTypes.string,
onClick: PropTypes.func,
onFocus: PropTypes.func
};
static defaultProps = {
allowAddressClick: false
};
state = {
copied: false
};
@ -122,7 +127,7 @@ export default class AccountCard extends Component {
<div className={ styles.addressContainer }>
<span
className={ styles.address }
onClick={ this.preventEvent }
onClick={ this.handleAddressClick }
ref={ `address` }
title={ address }
>
@ -132,6 +137,17 @@ export default class AccountCard extends Component {
);
}
handleAddressClick = (event) => {
const { allowAddressClick } = this.props;
// Don't stop the event if address click is allowed
if (allowAddressClick) {
return this.onClick(event);
}
return this.preventEvent(event);
}
handleKeyDown = (event) => {
const codeName = keycode(event);
@ -172,9 +188,14 @@ export default class AccountCard extends Component {
}
}
onClick = () => {
onClick = (event) => {
const { account, onClick } = this.props;
// Stop the default event if text is selected
if (window.getSelection && window.getSelection().type === 'Range') {
return this.preventEvent(event);
}
onClick && onClick(account.address);
}
@ -184,9 +205,9 @@ export default class AccountCard extends Component {
onFocus && onFocus(account.index);
}
preventEvent = (e) => {
e.preventDefault();
e.stopPropagation();
preventEvent = (event) => {
event.preventDefault();
event.stopPropagation();
}
setTagRef = (tagRef) => {

View File

@ -23,6 +23,7 @@ import { observer } from 'mobx-react';
import TextFieldUnderline from 'material-ui/TextField/TextFieldUnderline';
import apiutil from '~/api/util';
import AccountCard from '~/ui/AccountCard';
import InputAddress from '~/ui/Form/InputAddress';
import Loading from '~/ui/Loading';
@ -177,6 +178,7 @@ class AddressSelect extends Component {
<Portal
className={ styles.inputContainer }
isChildModal
onClick={ this.handleClose }
onClose={ this.handleClose }
onKeyDown={ this.handleKeyDown }
open={ expanded }
@ -191,6 +193,7 @@ class AddressSelect extends Component {
className={ styles.input }
placeholder={ ilHint }
onBlur={ this.handleInputBlur }
onClick={ this.stopEvent }
onFocus={ this.handleInputFocus }
onChange={ this.handleChange }
ref={ this.setInputRef }
@ -345,6 +348,7 @@ class AddressSelect extends Component {
return (
<AccountCard
account={ account }
allowAddressClick
balance={ balance }
className={ styles.account }
key={ `account_${index}` }
@ -377,6 +381,10 @@ class AddressSelect extends Component {
}
}
stopEvent = (event) => {
event.stopPropagation();
}
handleInputAddresKeydown = (event) => {
const code = keycode(event);
@ -588,6 +596,7 @@ class AddressSelect extends Component {
}
this.store.resetRegistryValues();
this.store.handleChange('');
this.setState({
expanded: false,
@ -613,6 +622,10 @@ class AddressSelect extends Component {
focusedItem: null,
inputValue: value
});
if (apiutil.isAddressValid(value)) {
this.handleClick(value);
}
}
}

View File

@ -17,6 +17,8 @@
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { nodeOrStringProptype } from '~/util/proptypes';
import AddressSelect from '../AddressSelect';
class InputAddressSelect extends Component {
@ -27,9 +29,9 @@ class InputAddressSelect extends Component {
allowCopy: PropTypes.bool,
className: PropTypes.string,
error: PropTypes.string,
hint: PropTypes.string,
label: PropTypes.string,
error: nodeOrStringProptype(),
hint: nodeOrStringProptype(),
label: nodeOrStringProptype(),
onChange: PropTypes.func,
readOnly: PropTypes.bool,
value: PropTypes.string

View File

@ -44,6 +44,7 @@ export default class Portal extends Component {
hideClose: PropTypes.bool,
isChildModal: PropTypes.bool,
isSmallModal: PropTypes.bool,
onClick: PropTypes.func,
onKeyDown: PropTypes.func,
steps: PropTypes.array,
title: nodeOrStringProptype()
@ -89,7 +90,7 @@ export default class Portal extends Component {
className
].join(' ')
}
onClick={ this.stopEvent }
onClick={ this.handleContainerClick }
onKeyDown={ this.handleKeyDown }
>
<EventListener
@ -149,6 +150,16 @@ export default class Portal extends Component {
event.stopPropagation();
}
handleContainerClick = (event) => {
const { onClick } = this.props;
if (!onClick) {
return this.stopEvent(event);
}
return onClick(event);
}
handleClose = () => {
const { hideClose, onClose } = this.props;