diff --git a/js/src/ui/Form/AddressSelect/addressSelect.js b/js/src/ui/Form/AddressSelect/addressSelect.js index 7ff9002d621..9be4225716a 100644 --- a/js/src/ui/Form/AddressSelect/addressSelect.js +++ b/js/src/ui/Form/AddressSelect/addressSelect.js @@ -15,8 +15,9 @@ // along with Parity. If not, see . import React, { Component, PropTypes } from 'react'; -import { MenuItem, AutoComplete } from 'material-ui'; +import { MenuItem } from 'material-ui'; +import AutoComplete from '../AutoComplete'; import IdentityIcon from '../../IdentityIcon'; import IdentityName from '../../IdentityName'; @@ -53,26 +54,21 @@ export default class AddressSelect extends Component { render () { const { disabled, error, hint, label } = this.props; + const { entries } = this.state; return (
{ this.renderIdentityIcon() } @@ -81,7 +77,9 @@ export default class AddressSelect extends Component { } renderIdentityIcon () { - if (this.props.error) return null; + if (this.props.error) { + return null; + } const { value } = this.props; @@ -93,17 +91,11 @@ export default class AddressSelect extends Component { ); } - renderSelectEntries () { - const values = Object.values(this.state.entries); - - if (!values.length) { - return null; - } - - return values.map(entry => ({ + renderItem = (entry) => { + return { text: entry.address, value: this.renderSelectEntry(entry) - })); + }; } renderSelectEntry = (entry) => { @@ -134,10 +126,9 @@ export default class AddressSelect extends Component { getSearchText () { const { value } = this.props; - const entries = this.state.entries; - if (!value) return ''; + const { entries } = this.state; const entry = entries[value]; if (!entry) return ''; @@ -152,25 +143,8 @@ export default class AddressSelect extends Component { .some(text => text.toLowerCase().indexOf(lowCaseSearch) !== -1); } - onChange = (item, idx) => { - if (idx === -1) { - this.props.onChange(null, ''); - return null; - } - - const entries = Object.values(this.state.entries); - const address = entries[idx].address; - + onChange = (entry) => { + const address = entry ? entry.address : ''; this.props.onChange(null, address); } - - onFocus = () => { - this.props.onChange(null, ''); - } - - onBlur = () => { - if (this.props.error) { - this.props.onChange(null, ''); - } - } } diff --git a/js/src/ui/Form/AutoComplete/autocomplete.js b/js/src/ui/Form/AutoComplete/autocomplete.js new file mode 100644 index 00000000000..c5d405eaabc --- /dev/null +++ b/js/src/ui/Form/AutoComplete/autocomplete.js @@ -0,0 +1,95 @@ +// Copyright 2015, 2016 Ethcore (UK) Ltd. +// This file is part of Parity. + +// Parity is free software: you can redistribute it and/or modify +// it under the terms of the GNU General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. + +// Parity is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU General Public License for more details. + +// You should have received a copy of the GNU General Public License +// along with Parity. If not, see . + +import React, { Component, PropTypes } from 'react'; +import { MenuItem, AutoComplete as MUIAutoComplete } from 'material-ui'; + +export default class AutoComplete extends Component { + static propTypes = { + onChange: PropTypes.func.isRequired, + disabled: PropTypes.bool, + label: PropTypes.string, + hint: PropTypes.string, + error: PropTypes.string, + value: PropTypes.string, + className: PropTypes.string, + filter: PropTypes.func, + renderItem: PropTypes.func, + entries: PropTypes.oneOfType([ + PropTypes.array, + PropTypes.object + ]) + } + + render () { + const { disabled, error, hint, label, value, className, filter } = this.props; + + return ( + + ); + } + + getDataSource () { + const { renderItem, entries } = this.props; + const entriesArray = (entries instanceof Array) + ? entries + : Object.values(entries); + + if (renderItem && typeof renderItem === 'function') { + return entriesArray.map(entry => renderItem(entry)); + } + + return entriesArray.map(entry => ({ + text: entry, + value: ( + + ) + })); + } + + onChange = (item, idx) => { + const { onChange, entries } = this.props; + const entriesArray = (entries instanceof Array) + ? entries + : Object.values(entries); + + const entry = (idx === -1) ? null : entriesArray[idx]; + + onChange(entry); + } + + onFocus = () => { + this.props.onChange(null); + } + +} diff --git a/js/src/ui/Form/AutoComplete/index.js b/js/src/ui/Form/AutoComplete/index.js new file mode 100644 index 00000000000..509a99444f3 --- /dev/null +++ b/js/src/ui/Form/AutoComplete/index.js @@ -0,0 +1,17 @@ +// Copyright 2015, 2016 Ethcore (UK) Ltd. +// This file is part of Parity. + +// Parity is free software: you can redistribute it and/or modify +// it under the terms of the GNU General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. + +// Parity is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU General Public License for more details. + +// You should have received a copy of the GNU General Public License +// along with Parity. If not, see . + +export default from './autocomplete'; diff --git a/js/src/ui/Form/InputAddress/inputAddress.js b/js/src/ui/Form/InputAddress/inputAddress.js index d44c90042b4..c3e2bb4ab31 100644 --- a/js/src/ui/Form/InputAddress/inputAddress.js +++ b/js/src/ui/Form/InputAddress/inputAddress.js @@ -95,7 +95,7 @@ class InputAddress extends Component { } handleInputChange = (event, value) => { - let isEmpty = (value.length === 0); + const isEmpty = (value.length === 0); this.setState({ isEmpty }); this.props.onChange(event, value);