64 lines
2.1 KiB
React
64 lines
2.1 KiB
React
|
// @flow
|
||
|
|
import React from 'react';
|
||
|
|
import translate from 'translations';
|
||
|
|
import { isValidHex } from 'eth/validators';
|
||
|
|
|
||
|
|
export default class DataField extends React.Component {
|
||
|
|
props: {
|
||
|
|
value: string,
|
||
|
|
onChange?: (e: string) => void
|
||
|
|
};
|
||
|
|
state = {
|
||
|
|
expanded: false
|
||
|
|
};
|
||
|
|
render() {
|
||
|
|
const { value } = this.props;
|
||
|
|
const { expanded } = this.state;
|
||
|
|
const valid = isValidHex(value || '');
|
||
|
|
const readOnly = !this.props.onChange;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="row form-group">
|
||
|
|
<div className="col-sm-11 clearfix">
|
||
|
|
{!expanded &&
|
||
|
|
<a onClick={this.expand}>
|
||
|
|
<p className="strong">
|
||
|
|
{translate('TRANS_advanced')}
|
||
|
|
</p>
|
||
|
|
</a>}
|
||
|
|
{expanded &&
|
||
|
|
<section>
|
||
|
|
<div className="form-group">
|
||
|
|
<label>
|
||
|
|
{translate('TRANS_data')}
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
className={`form-control ${valid ? 'is-valid' : 'is-invalid'}`}
|
||
|
|
type="text"
|
||
|
|
placeholder={
|
||
|
|
readOnly
|
||
|
|
? ''
|
||
|
|
: '0x6d79657468657277616c6c65742e636f6d20697320746865206265737421'
|
||
|
|
}
|
||
|
|
value={value || ''}
|
||
|
|
disabled={readOnly}
|
||
|
|
onChange={this.onChange}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</section>}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
expand = () => {
|
||
|
|
this.setState({ expanded: true });
|
||
|
|
};
|
||
|
|
|
||
|
|
onChange = (e: SyntheticInputEvent) => {
|
||
|
|
if (this.props.onChange) {
|
||
|
|
this.props.onChange(e.target.value);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|