Add slider style (#48)

This commit is contained in:
Maria Rushkova 2021-06-22 09:28:59 +02:00 committed by GitHub
parent e0bf0efb00
commit 78cf8e1187
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 61 additions and 22 deletions

View File

@ -1,4 +1,4 @@
import React from 'react' import React, { useState } from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import { getCommunityDetails } from '../../helpers/apiMock' import { getCommunityDetails } from '../../helpers/apiMock'
import { ButtonPrimary } from '../Button' import { ButtonPrimary } from '../Button'
@ -16,6 +16,7 @@ interface ProposeModalProps {
} }
export function ProposeModal({ availableAmount, setShowConfirmModal, setPublicKey, publicKey }: ProposeModalProps) { export function ProposeModal({ availableAmount, setShowConfirmModal, setPublicKey, publicKey }: ProposeModalProps) {
const [proposingAmount, setProposingAmount] = useState(availableAmount)
const communityFound = getCommunityDetails(publicKey) const communityFound = getCommunityDetails(publicKey)
return ( return (
@ -36,7 +37,11 @@ export function ProposeModal({ availableAmount, setShowConfirmModal, setPublicKe
<CardCommunity community={communityFound} /> <CardCommunity community={communityFound} />
{communityFound.validForAddition ? ( {communityFound.validForAddition ? (
<VoteProposeWrap> <VoteProposeWrap>
<VotePropose availableAmount={availableAmount} /> <VotePropose
availableAmount={availableAmount}
setProposingAmount={setProposingAmount}
proposingAmount={proposingAmount}
/>
</VoteProposeWrap> </VoteProposeWrap>
) : ( ) : (
<WarningWrap> <WarningWrap>

View File

@ -1,4 +1,4 @@
import React from 'react' import React, { useState } from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import { timespan } from '../../helpers/timespan' import { timespan } from '../../helpers/timespan'
import { CommunityDetail } from '../../models/community' import { CommunityDetail } from '../../models/community'
@ -14,6 +14,7 @@ interface RemoveAmountPickerProps {
} }
export function RemoveAmountPicker({ community, availableAmount, setShowConfirmModal }: RemoveAmountPickerProps) { export function RemoveAmountPicker({ community, availableAmount, setShowConfirmModal }: RemoveAmountPickerProps) {
const [proposingAmount, setProposingAmount] = useState(availableAmount)
const lastVote = community.votingHistory[community.votingHistory.length - 1] const lastVote = community.votingHistory[community.votingHistory.length - 1]
const lastVoteDate = lastVote.date const lastVoteDate = lastVote.date
@ -55,14 +56,12 @@ export function RemoveAmountPicker({ community, availableAmount, setShowConfirmM
} }
return ( return (
<VoteProposeWrap> <VoteProposeWrap>
<VotePropose availableAmount={availableAmount} /> <VotePropose
<VoteConfirmBtn availableAmount={availableAmount}
type="submit" setProposingAmount={setProposingAmount}
onSubmit={() => setShowConfirmModal(true)} proposingAmount={proposingAmount}
onClick={() => setShowConfirmModal(true)} />
> <VoteConfirmBtn onClick={() => setShowConfirmModal(true)}>Confirm vote to remove community</VoteConfirmBtn>
Confirm vote to remove community
</VoteConfirmBtn>
</VoteProposeWrap> </VoteProposeWrap>
) )
} }

View File

@ -1,4 +1,4 @@
import React from 'react' import React, { useState } from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import { VoteChart } from '../votes/VoteChart' import { VoteChart } from '../votes/VoteChart'
import { ButtonSecondary } from '../Button' import { ButtonSecondary } from '../Button'
@ -18,13 +18,24 @@ export interface VoteModalProps {
} }
export function VoteModal({ vote, selectedVote, availableAmount, setShowConfirmModal }: VoteModalProps) { export function VoteModal({ vote, selectedVote, availableAmount, setShowConfirmModal }: VoteModalProps) {
const [proposingAmount, setProposingAmount] = useState(availableAmount)
const disabled = proposingAmount === 0
return ( return (
<CardProposing> <CardProposing>
<VoteChart vote={vote} /> <VoteChart vote={vote} />
<VotePropose vote={vote} selectedVote={selectedVote} availableAmount={availableAmount} /> <VotePropose
vote={vote}
selectedVote={selectedVote}
availableAmount={availableAmount}
setProposingAmount={setProposingAmount}
proposingAmount={proposingAmount}
disabled={disabled}
/>
<VoteConfirmBtn <VoteConfirmBtn
onClick={() => setShowConfirmModal(true)} onClick={() => setShowConfirmModal(true)}
disabled={disabled}
>{`Vote ${selectedVote.verb} community ${selectedVote.icon}`}</VoteConfirmBtn> >{`Vote ${selectedVote.verb} community ${selectedVote.icon}`}</VoteConfirmBtn>
</CardProposing> </CardProposing>
) )

View File

@ -13,10 +13,19 @@ export interface VoteProposingProps {
noun: string noun: string
} }
availableAmount: number availableAmount: number
setProposingAmount: (show: number) => void
proposingAmount: number
disabled?: boolean
} }
export function VotePropose({ vote, selectedVote, availableAmount }: VoteProposingProps) { export function VotePropose({
const [proposingAmount, setProposingAmount] = useState(availableAmount) vote,
selectedVote,
availableAmount,
proposingAmount,
disabled,
setProposingAmount,
}: VoteProposingProps) {
const [displayAmount, setDisplayAmount] = useState(`${addCommas(availableAmount)} SNT`) const [displayAmount, setDisplayAmount] = useState(`${addCommas(availableAmount)} SNT`)
let step = 10 ** (Math.floor(Math.log10(availableAmount)) - 2) let step = 10 ** (Math.floor(Math.log10(availableAmount)) - 2)
@ -24,10 +33,14 @@ export function VotePropose({ vote, selectedVote, availableAmount }: VoteProposi
step = 1 step = 1
} }
const sliderChange = (e: React.ChangeEvent<HTMLInputElement>) => { const setAvailableAmount = () => {
if (Number(e.target.value) == step * Math.floor(availableAmount / step)) {
setProposingAmount(availableAmount) setProposingAmount(availableAmount)
setDisplayAmount(addCommas(availableAmount) + ' SNT') setDisplayAmount(addCommas(availableAmount) + ' SNT')
}
const sliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {
if (Number(e.target.value) == step * Math.floor(availableAmount / step)) {
setAvailableAmount()
} else { } else {
setProposingAmount(Number(e.target.value)) setProposingAmount(Number(e.target.value))
setDisplayAmount(addCommas(Number(e.target.value)) + ' SNT') setDisplayAmount(addCommas(Number(e.target.value)) + ' SNT')
@ -36,6 +49,14 @@ export function VotePropose({ vote, selectedVote, availableAmount }: VoteProposi
const progress = (proposingAmount / availableAmount) * 100 + '%' const progress = (proposingAmount / availableAmount) * 100 + '%'
const onInputAmountBlur = () => {
if (proposingAmount > availableAmount) {
setAvailableAmount()
} else {
setDisplayAmount(addCommas(proposingAmount) + ' SNT')
}
}
return ( return (
<VoteProposing> <VoteProposing>
<VoteProposingInfo> <VoteProposingInfo>
@ -48,7 +69,7 @@ export function VotePropose({ vote, selectedVote, availableAmount }: VoteProposi
setProposingAmount(Number(e.currentTarget.value)) setProposingAmount(Number(e.currentTarget.value))
setDisplayAmount(e.currentTarget.value) setDisplayAmount(e.currentTarget.value)
}} }}
onBlur={() => setDisplayAmount(addCommas(proposingAmount) + ' SNT')} onBlur={onInputAmountBlur}
onFocus={() => setDisplayAmount(proposingAmount.toString())} onFocus={() => setDisplayAmount(proposingAmount.toString())}
/> />
<VoteProposingRangeWrap> <VoteProposingRangeWrap>
@ -59,8 +80,11 @@ export function VotePropose({ vote, selectedVote, availableAmount }: VoteProposi
step={step} step={step}
value={proposingAmount} value={proposingAmount}
onChange={sliderChange} onChange={sliderChange}
isDisabled={disabled}
style={{ style={{
background: `linear-gradient(90deg, ${Colors.VioletDark} 0% ${progress}, ${Colors.VioletSecondary} ${progress} 100%)`, background: disabled
? Colors.GrayDisabledLight
: `linear-gradient(90deg, ${Colors.VioletDark} 0% ${progress}, ${Colors.VioletSecondary} ${progress} 100%)`,
}} }}
/> />
</VoteProposingRangeWrap> </VoteProposingRangeWrap>
@ -107,7 +131,7 @@ const VoteProposingRangeWrap = styled.div`
margin-bottom: 32px; margin-bottom: 32px;
` `
const VoteProposingRange = styled.input` const VoteProposingRange = styled.input<{ isDisabled?: boolean }>`
appearance: none; appearance: none;
width: 100%; width: 100%;
height: 4px; height: 4px;
@ -122,14 +146,14 @@ const VoteProposingRange = styled.input`
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 50%; border-radius: 50%;
background: ${Colors.Violet}; background: ${({ isDisabled }) => (isDisabled ? Colors.GrayDisabledDark : Colors.Violet)};
cursor: pointer; cursor: pointer;
} }
&::-moz-range-thumb { &::-moz-range-thumb {
width: 20px; width: 20px;
height: 20px; height: 20px;
background: ${Colors.Violet}; background: ${({ isDisabled }) => (isDisabled ? Colors.GrayDisabledDark : Colors.Violet)};
border: 0.5px solid rgba(0, 0, 0, 0); border: 0.5px solid rgba(0, 0, 0, 0);
border-radius: 50px; border-radius: 50px;
cursor: pointer; cursor: pointer;