more generic component
This commit is contained in:
parent
31600d3677
commit
35a0fe760c
|
@ -1,12 +1,12 @@
|
|||
.eth-address {
|
||||
padding: 3px;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
min-width: 170px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 1px 1px 1px 1px #CCC;
|
||||
border-top: solid 1px #FFF;
|
||||
border-left: solid 1px #FFF;
|
||||
margin: -2px 0 0 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.eth-address .blocky .identicon {
|
||||
|
@ -14,63 +14,63 @@
|
|||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.eth-address .address-err,
|
||||
.eth-address .address-bg {
|
||||
.eth-address .err,
|
||||
.eth-address .bg {
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.eth-address .address-bg {
|
||||
.eth-address .bg {
|
||||
background-color:#FFF;
|
||||
}
|
||||
|
||||
.eth-address .address-err {
|
||||
.eth-address .err {
|
||||
background-color:#f8d7da;
|
||||
}
|
||||
|
||||
.eth-address .address-text {
|
||||
.eth-address .text {
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.eth-address .address-indicator,
|
||||
.eth-address .address-control
|
||||
.eth-address .indicator,
|
||||
.eth-address .control
|
||||
{
|
||||
color: #000;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.eth-address .address-indicator,
|
||||
.eth-address .address-control,
|
||||
.eth-address .address-text {
|
||||
.eth-address .indicator,
|
||||
.eth-address .control,
|
||||
.eth-address .text {
|
||||
overflow: hidden;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.eth-address .address-indicator,
|
||||
.eth-address .address-text {
|
||||
.eth-address .indicator,
|
||||
.eth-address .text {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.eth-address .address-control {
|
||||
.eth-address .control {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.eth-address:focus-within .address-control,
|
||||
.eth-address:hover .address-control {
|
||||
.eth-address:focus-within .control,
|
||||
.eth-address:hover .control {
|
||||
display: flow-root;
|
||||
}
|
||||
|
||||
.eth-address:focus-within .address-indicator,
|
||||
.eth-address:hover .address-indicator {
|
||||
.eth-address:focus-within .indicator,
|
||||
.eth-address:hover .indicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.eth-address .address-indicator small,
|
||||
.eth-address .address-text small {
|
||||
.eth-address .indicator small,
|
||||
.eth-address .text small {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
|
|
@ -6,8 +6,8 @@ import './EthAddress.css';
|
|||
class EthAddress extends React.Component {
|
||||
static propTypes = {
|
||||
className: PropTypes.string,
|
||||
defaultValue: PropTypes.string,
|
||||
value: PropTypes.string,
|
||||
defaultValue: PropTypes.string,
|
||||
colors: PropTypes.bool,
|
||||
blocky: PropTypes.bool,
|
||||
blockySize: PropTypes.number,
|
||||
|
@ -18,7 +18,7 @@ class EthAddress extends React.Component {
|
|||
};
|
||||
|
||||
static defaultProps = {
|
||||
className: 'text-monospace',
|
||||
className: 'text-monospace eth-address',
|
||||
defaultValue: "0x0000000000000000000000000000000000000000",
|
||||
colors: true,
|
||||
control: false,
|
||||
|
@ -34,19 +34,18 @@ class EthAddress extends React.Component {
|
|||
this.controlRef = React.createRef();
|
||||
this.state = {
|
||||
value: props.value != undefined ? props.value : props.defaultValue,
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
componentDidMount() {
|
||||
if(this.props.control)
|
||||
this.controlRef.current.textContent = this.props.value;
|
||||
this.controlRef.current.textContent = this.state.value;
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
if (prevProps.value != this.props.value && this.props.value != this.state.address) {
|
||||
this.setState({address: this.props.value});
|
||||
if (prevProps.value != this.props.value && this.props.value != this.state.value) {
|
||||
this.setState({value: this.props.value});
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -61,7 +60,7 @@ class EthAddress extends React.Component {
|
|||
if(text.length == 0){
|
||||
text = "0x0000000000000000000000000000000000000000";
|
||||
}
|
||||
this.setState({ address: text });
|
||||
this.setState({ value: text });
|
||||
this.notifyListeners(text);
|
||||
}
|
||||
|
||||
|
@ -81,9 +80,9 @@ class EthAddress extends React.Component {
|
|||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
this.controlRef.current.textContent = pastedData;
|
||||
this.setState({ address: pastedData });
|
||||
this.setState({ value: pastedData });
|
||||
} else {
|
||||
this.setState({ address: this.controlRef.current.textContent });
|
||||
this.setState({ value: this.controlRef.current.textContent });
|
||||
}
|
||||
this.notifyListeners(this.controlRef.current.textContent);
|
||||
}
|
||||
|
@ -102,24 +101,24 @@ class EthAddress extends React.Component {
|
|||
blockyScale,
|
||||
control
|
||||
} = this.props;
|
||||
const { address } = this.state;
|
||||
let valid = /^(0x)?[0-9a-f]{40}$/i.test(address);
|
||||
const { value } = this.state;
|
||||
let valid = /^(0x)?[0-9a-f]{40}$/i.test(value);
|
||||
const colorStyle = colors && valid ? {
|
||||
backgroundImage: `linear-gradient(90deg, #${address.substr(6, 6)} 0% 15%, #${address.substr(12, 6)} 17% 32%, #${address.substr(18, 6)} 34% 49%, #${address.substr(24, 6)} 51% 66%, #${address.substr(30, 6)} 68% 83%, #${address.substr(36, 6)} 85% 100%)`
|
||||
backgroundImage: `linear-gradient(90deg, #${value.substr(6, 6)} 0% 15%, #${value.substr(12, 6)} 17% 32%, #${value.substr(18, 6)} 34% 49%, #${value.substr(24, 6)} 51% 66%, #${value.substr(30, 6)} 68% 83%, #${value.substr(36, 6)} 85% 100%)`
|
||||
} : {}
|
||||
return (
|
||||
<span style={colorStyle} className={`${className} eth-address`} >
|
||||
<span className={valid ? "address-bg" : "address-err"}>
|
||||
<span style={colorStyle} className={`${className}`} >
|
||||
<span className={valid ? "bg" : "err"}>
|
||||
{blocky &&
|
||||
<span className="blocky">
|
||||
<Blockies seed={address.toLowerCase()} size={blockySize} scale={blockyScale} />
|
||||
<Blockies seed={value.toLowerCase()} size={blockySize} scale={blockyScale} />
|
||||
</span>}
|
||||
<span className={control ? "address-indicator" : "address-text" } >
|
||||
<strong>{address.substr(0, 6)}</strong><small>{address.substr(6, 36)}</small><strong>{address.substr(36, 6)}</strong>
|
||||
<span className={control ? "indicator" : "text" } >
|
||||
<strong>{value.substr(0, 6)}</strong><small>{value.substr(6, 36)}</small><strong>{value.substr(36, 6)}</strong>
|
||||
</span>
|
||||
{ control ?
|
||||
<span
|
||||
className="address-control"
|
||||
className="control"
|
||||
ref={this.controlRef}
|
||||
placeholder="0x0000000000000000000000000000000000000000"
|
||||
onKeyPress={(event) => this.onKeyPress(event)}
|
||||
|
|
Loading…
Reference in New Issue