+ );
+ }
+
renderCurrentInput () {
const { inputValue } = this.state;
@@ -304,7 +319,9 @@ class AddressSelect extends Component {
return (
-
{ label }
+
+
{ label }
+
{ content }
);
diff --git a/js/src/ui/Form/AddressSelect/addressSelectStore.js b/js/src/ui/Form/AddressSelect/addressSelectStore.js
index e04f8b55d..5025564a0 100644
--- a/js/src/ui/Form/AddressSelect/addressSelectStore.js
+++ b/js/src/ui/Form/AddressSelect/addressSelectStore.js
@@ -15,7 +15,7 @@
// along with Parity. If not, see
.
import React from 'react';
-import { observable, action } from 'mobx';
+import { observable, action, transaction } from 'mobx';
import { flatMap, uniqBy } from 'lodash';
import { FormattedMessage } from 'react-intl';
@@ -26,6 +26,7 @@ const ZERO = /^(0x)?0*$/;
export default class AddressSelectStore {
+ @observable loading = false;
@observable values = [];
@observable registryValues = [];
@@ -224,21 +225,28 @@ export default class AddressSelectStore {
};
});
- // Registries Lookup
- this.registryValues = [];
+ // Clear the previous results after 50ms
+ // if still fetching
+ const timeoutId = setTimeout(() => {
+ transaction(() => {
+ this.registryValues = [];
+ this.loading = true;
+ });
+ }, 50);
const lookups = this.regLookups.map((regLookup) => regLookup(value));
- Promise
+ // Registries Lookup
+ return Promise
.all(lookups)
.then((results) => {
return results
.filter((result) => result && !ZERO.test(result.address));
})
.then((results) => {
- results = uniqBy(results, (result) => result.address);
+ clearTimeout(timeoutId);
- this.registryValues = results
+ const registryValues = uniqBy(results, (result) => result.address)
.map((result) => {
const lowercaseAddress = result.address.toLowerCase();
@@ -253,6 +261,11 @@ export default class AddressSelectStore {
return result;
});
+
+ transaction(() => {
+ this.loading = false;
+ this.registryValues = registryValues;
+ });
});
}
diff --git a/js/src/ui/Form/InputAddress/inputAddress.js b/js/src/ui/Form/InputAddress/inputAddress.js
index 3cdac2a2e..4673634c8 100644
--- a/js/src/ui/Form/InputAddress/inputAddress.js
+++ b/js/src/ui/Form/InputAddress/inputAddress.js
@@ -76,7 +76,7 @@ class InputAddress extends Component {
const props = {};
- if (!readOnly && !disabled) {
+ if (!disabled) {
props.focused = focused;
}
diff --git a/js/src/ui/Loading/loading.js b/js/src/ui/Loading/loading.js
index 507c84bf9..6e8faaf8e 100644
--- a/js/src/ui/Loading/loading.js
+++ b/js/src/ui/Loading/loading.js
@@ -21,15 +21,22 @@ import styles from './loading.css';
export default class Loading extends Component {
static propTypes = {
+ className: PropTypes.string,
size: PropTypes.number
};
+ static defaultProps = {
+ className: '',
+ size: 2
+ };
+
render () {
- const size = (this.props.size || 2) * 60;
+ const { className, size } = this.props;
+ const computedSize = size * 60;
return (
-
-
+
+
);
}
diff --git a/js/src/ui/Portal/portal.css b/js/src/ui/Portal/portal.css
index 65c3b0103..37c57b712 100644
--- a/js/src/ui/Portal/portal.css
+++ b/js/src/ui/Portal/portal.css
@@ -68,6 +68,9 @@ $top: 20vh;
opacity: 0;
z-index: -10;
+ padding: 1em;
+ box-sizing: border-box;
+
* {
min-width: 0;
}
@@ -83,6 +86,7 @@ $top: 20vh;
top: 0.5rem;
right: 1rem;
font-size: 4em;
+ z-index: 100;
transition-property: opacity;
transition-duration: 0.25s;