status-im
/
topic-democracy
mirror of https://github.com/status-im/topic-democracy.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

more generic component

This commit is contained in:
Ricardo Guilherme Schmidt 2019-04-26 05:32:39 -03:00
parent 31600d3677
commit 35a0fe760c
No known key found for this signature in database
GPG Key ID: 3F95A3AD0B607030
2 changed files with 39 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
app/components/EthAddress.css
View File

@ -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;

35
app/components/EthAddress.jsx
View File

@ -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)}