(move) ballot info container to individual component
This commit is contained in:
parent
8959a819e8
commit
b59b4ab8da
|
@ -7,6 +7,7 @@
|
||||||
padding-left: #{ $desktop-indent };
|
padding-left: #{ $desktop-indent };
|
||||||
padding-right: #{ $desktop-indent };
|
padding-right: #{ $desktop-indent };
|
||||||
padding-top: #{ $desktop-indent };
|
padding-top: #{ $desktop-indent };
|
||||||
|
|
||||||
@media screen and (max-width: $breakpoint-md) {
|
@media screen and (max-width: $breakpoint-md) {
|
||||||
margin-left: -#{ $tablet-indent };
|
margin-left: -#{ $tablet-indent };
|
||||||
margin-right: -#{ $tablet-indent };
|
margin-right: -#{ $tablet-indent };
|
||||||
|
@ -49,4 +50,15 @@
|
||||||
height: 90px;
|
height: 90px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bc-BallotInfoContainer_ToggleShow {
|
||||||
|
color: $poa-purple;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 5px;
|
||||||
|
|
||||||
|
.sokol & {
|
||||||
|
color: $sokol-cyan;
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -1,10 +0,0 @@
|
||||||
.tg-ToggleShow {
|
|
||||||
color: $poa-purple;
|
|
||||||
cursor: pointer;
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: 5px;
|
|
||||||
|
|
||||||
.sokol & {
|
|
||||||
color: $sokol-cyan;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -25,5 +25,4 @@
|
||||||
@import "MobileMenuLinks";
|
@import "MobileMenuLinks";
|
||||||
@import "NavigationLinks";
|
@import "NavigationLinks";
|
||||||
@import "SearchBar";
|
@import "SearchBar";
|
||||||
@import "SocialIcons";
|
@import "SocialIcons";
|
||||||
@import "ToggleShow";
|
|
File diff suppressed because one or more lines are too long
|
@ -1,11 +1,12 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import moment from 'moment'
|
import moment from 'moment'
|
||||||
import { observable, action, computed } from 'mobx'
|
import swal from 'sweetalert2'
|
||||||
|
import { BallotDataPair } from '../BallotDataPair'
|
||||||
|
import { BallotInfoContainer } from '../BallotInfoContainer'
|
||||||
import { inject, observer } from 'mobx-react'
|
import { inject, observer } from 'mobx-react'
|
||||||
import { messages } from '../../utils/messages'
|
import { messages } from '../../utils/messages'
|
||||||
import { BallotDataPair } from '../BallotDataPair'
|
import { observable, action, computed } from 'mobx'
|
||||||
import { sendTransactionByVotingKey } from '../../utils/helpers'
|
import { sendTransactionByVotingKey } from '../../utils/helpers'
|
||||||
import swal from 'sweetalert2'
|
|
||||||
|
|
||||||
const ACCEPT = 1
|
const ACCEPT = 1
|
||||||
const REJECT = 2
|
const REJECT = 2
|
||||||
|
@ -13,8 +14,6 @@ const SEND = 1
|
||||||
const BURN = 2
|
const BURN = 2
|
||||||
const FREEZE = 3
|
const FREEZE = 3
|
||||||
const USDateTimeFormat = 'MM/DD/YYYY h:mm:ss A'
|
const USDateTimeFormat = 'MM/DD/YYYY h:mm:ss A'
|
||||||
const maxDetailsLength = 500
|
|
||||||
|
|
||||||
const zeroTimeTo = '00:00'
|
const zeroTimeTo = '00:00'
|
||||||
|
|
||||||
@inject('commonStore', 'contractsStore', 'routing', 'ballotsStore')
|
@inject('commonStore', 'contractsStore', 'routing', 'ballotsStore')
|
||||||
|
@ -572,42 +571,41 @@ export class BallotCard extends React.Component {
|
||||||
this.sendVotes = Number(votingState.sendVotes)
|
this.sendVotes = Number(votingState.sendVotes)
|
||||||
this.totalVoters = this.burnVotes + this.freezeVotes + this.sendVotes
|
this.totalVoters = this.burnVotes + this.freezeVotes + this.sendVotes
|
||||||
}
|
}
|
||||||
|
|
||||||
// getProgress
|
// getProgress
|
||||||
if (votingState.hasOwnProperty('progress')) {
|
if (votingState.hasOwnProperty('progress')) {
|
||||||
this.progress = Number(votingState.progress)
|
this.progress = Number(votingState.progress)
|
||||||
}
|
}
|
||||||
|
|
||||||
// getIsFinalized
|
// getIsFinalized
|
||||||
this.isFinalized = votingState.isFinalized
|
this.isFinalized = votingState.isFinalized
|
||||||
|
|
||||||
// getIsCanceled
|
// getIsCanceled
|
||||||
if (votingState.hasOwnProperty('isCanceled')) {
|
if (votingState.hasOwnProperty('isCanceled')) {
|
||||||
this.isCanceled = votingState.isCanceled
|
this.isCanceled = votingState.isCanceled
|
||||||
}
|
}
|
||||||
this.calcTimeTo()
|
this.calcTimeTo()
|
||||||
|
|
||||||
// canBeFinalizedNow
|
// canBeFinalizedNow
|
||||||
if (votingState.hasOwnProperty('canBeFinalizedNow')) {
|
if (votingState.hasOwnProperty('canBeFinalizedNow')) {
|
||||||
this.canBeFinalized = votingState.canBeFinalizedNow
|
this.canBeFinalized = votingState.canBeFinalizedNow
|
||||||
} else {
|
} else {
|
||||||
this.canBeFinalizedNow()
|
this.canBeFinalizedNow()
|
||||||
}
|
}
|
||||||
|
|
||||||
// getMemo
|
// getMemo
|
||||||
this.memo = votingState.memo
|
this.memo = votingState.memo
|
||||||
|
|
||||||
// hasAlreadyVoted
|
// hasAlreadyVoted
|
||||||
if (votingState.hasOwnProperty('alreadyVoted')) {
|
if (votingState.hasOwnProperty('alreadyVoted')) {
|
||||||
this.hasAlreadyVoted = votingState.alreadyVoted
|
this.hasAlreadyVoted = votingState.alreadyVoted
|
||||||
} else {
|
} else {
|
||||||
this.getHasAlreadyVoted()
|
this.getHasAlreadyVoted()
|
||||||
}
|
}
|
||||||
|
|
||||||
if (votingType === 'votingToManageEmissionFunds') {
|
if (votingType === 'votingToManageEmissionFunds') {
|
||||||
// getQuorumState
|
|
||||||
this.getQuorumState()
|
this.getQuorumState()
|
||||||
}
|
}
|
||||||
this.state = {
|
|
||||||
detailsCollapsed: this.memo.length > maxDetailsLength
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
toggleDetails = () => {
|
|
||||||
this.setState(prevState => ({ detailsCollapsed: !prevState.detailsCollapsed }))
|
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
|
@ -657,14 +655,6 @@ export class BallotCard extends React.Component {
|
||||||
)
|
)
|
||||||
let showHasAlreadyVotedLabel = this.hasAlreadyVoted ? hasAlreadyVotedLabel : ''
|
let showHasAlreadyVotedLabel = this.hasAlreadyVoted ? hasAlreadyVotedLabel : ''
|
||||||
const threshold = this.getThreshold(contractsStore, votingType)
|
const threshold = this.getThreshold(contractsStore, votingType)
|
||||||
let toggleShowMore =
|
|
||||||
this.memo.length > maxDetailsLength ? (
|
|
||||||
<span className="tg-ToggleShow" onClick={this.toggleDetails}>
|
|
||||||
{this.state.detailsCollapsed ? 'More...' : 'Less'}
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
''
|
|
||||||
)
|
|
||||||
let votingScale
|
let votingScale
|
||||||
|
|
||||||
if (votingType === 'votingToManageEmissionFunds') {
|
if (votingType === 'votingToManageEmissionFunds') {
|
||||||
|
@ -787,21 +777,11 @@ export class BallotCard extends React.Component {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{votingScale}
|
{votingScale}
|
||||||
<div className="bc-BallotInfoContainer">
|
<BallotInfoContainer
|
||||||
<div className="bc-BallotInfoContainer_Info bc-BallotInfoContainer_Info-minimum">
|
memo={this.memo}
|
||||||
Minimum {threshold} from {contractsStore.validatorsLength} validators are required to pass the proposal
|
threshold={threshold}
|
||||||
</div>
|
validatorsLength={contractsStore.validatorsLength}
|
||||||
<div
|
/>
|
||||||
className={`bc-BallotInfoContainer_Info bc-BallotInfoContainer_Info-details ${
|
|
||||||
this.state.detailsCollapsed ? 'bc-BallotInfoContainer_Info-collapsed' : ''
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{this.state.detailsCollapsed
|
|
||||||
? this.memo.substr(0, this.memo.lastIndexOf(' ', maxDetailsLength))
|
|
||||||
: this.memo}
|
|
||||||
{toggleShowMore}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="ballots-footer">
|
<div className="ballots-footer">
|
||||||
<div className="ballots-footer-left">
|
<div className="ballots-footer-left">
|
||||||
<button type="button" onClick={e => this.cancelOrFinalize(e)} className={this.cancelOrFinalizeButtonClass}>
|
<button type="button" onClick={e => this.cancelOrFinalize(e)} className={this.cancelOrFinalizeButtonClass}>
|
||||||
|
|
|
@ -0,0 +1,47 @@
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
const MAX_DETAILS_LENGTH = 500
|
||||||
|
|
||||||
|
export class BallotInfoContainer extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
|
||||||
|
const { memo } = this.props
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
detailsCollapsed: memo.length > MAX_DETAILS_LENGTH
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleDetails = () => {
|
||||||
|
this.setState(prevState => ({ detailsCollapsed: !prevState.detailsCollapsed }))
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
let { memo = '', threshold, validatorsLength } = this.props
|
||||||
|
let toggleShowMore =
|
||||||
|
memo.length > MAX_DETAILS_LENGTH ? (
|
||||||
|
<span className="bc-BallotInfoContainer_ToggleShow" onClick={this.toggleDetails}>
|
||||||
|
{this.state.detailsCollapsed ? 'More...' : 'Less'}
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
''
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bc-BallotInfoContainer">
|
||||||
|
<div className="bc-BallotInfoContainer_Info bc-BallotInfoContainer_Info-minimum">
|
||||||
|
Minimum {threshold} from {validatorsLength} validators are required to pass the proposal
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={`bc-BallotInfoContainer_Info bc-BallotInfoContainer_Info-details ${
|
||||||
|
this.state.detailsCollapsed ? 'bc-BallotInfoContainer_Info-collapsed' : ''
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{this.state.detailsCollapsed ? memo.substr(0, memo.lastIndexOf(' ', MAX_DETAILS_LENGTH)) : memo}
|
||||||
|
{toggleShowMore}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue