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);