blob: a17b6e3f501fc04412fde6c0b2c188ce48fef195 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
import {addressUtils} from '@0xproject/utils';
import * as _ from 'lodash';
import TextField from 'material-ui/TextField';
import * as React from 'react';
import {RequiredLabel} from 'ts/components/ui/required_label';
import {colors} from 'ts/utils/colors';
interface AddressInputProps {
disabled?: boolean;
initialAddress: string;
isRequired?: boolean;
hintText?: string;
shouldHideLabel?: boolean;
label?: string;
shouldShowIncompleteErrs?: boolean;
updateAddress: (address?: string) => void;
}
interface AddressInputState {
address: string;
errMsg: string;
}
export class AddressInput extends React.Component<AddressInputProps, AddressInputState> {
constructor(props: AddressInputProps) {
super(props);
this.state = {
address: this.props.initialAddress,
errMsg: '',
};
}
public componentWillReceiveProps(nextProps: AddressInputProps) {
if (nextProps.shouldShowIncompleteErrs && this.props.isRequired &&
this.state.address === '') {
this.setState({
errMsg: 'Address is required',
});
}
}
public render() {
const label = this.props.isRequired ? <RequiredLabel label={this.props.label} /> :
this.props.label;
const labelDisplay = this.props.shouldHideLabel ? 'hidden' : 'block';
const hintText = this.props.hintText ? this.props.hintText : '';
return (
<div className="overflow-hidden">
<TextField
id={`address-field-${this.props.label}`}
disabled={_.isUndefined(this.props.disabled) ? false : this.props.disabled}
fullWidth={true}
hintText={hintText}
floatingLabelFixed={true}
floatingLabelStyle={{color: colors.grey, display: labelDisplay}}
floatingLabelText={label}
errorText={this.state.errMsg}
value={this.state.address}
onChange={this.onOrderTakerAddressUpdated.bind(this)}
/>
</div>
);
}
private onOrderTakerAddressUpdated(e: any) {
const address = e.target.value.toLowerCase();
const isValidAddress = addressUtils.isAddress(address) || address === '';
const errMsg = isValidAddress ? '' : 'Invalid ethereum address';
this.setState({
address,
errMsg,
});
const addressIfValid = isValidAddress ? address : undefined;
this.props.updateAddress(addressIfValid);
}
}
|
