blob: 1a71f8081723654109c331c416a27a9a9e52f631 (
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
|
import { colors } from '@0x/react-shared';
import { addressUtils } from '@0x/utils';
import * as _ from 'lodash';
import TextField from 'material-ui/TextField';
import * as React from 'react';
import { RequiredLabel } from 'ts/components/ui/required_label';
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): void {
if (nextProps.shouldShowIncompleteErrs && this.props.isRequired && this.state.address === '') {
this.setState({
errMsg: 'Address is required',
});
}
}
public render(): React.ReactNode {
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): void {
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);
}
}
|
