fix slider again...
This commit is contained in:
parent
a55ea4ed74
commit
c3d168086f
|
@ -31,6 +31,8 @@ const StyledButton = styled.button<StyledButtonProps>`
|
|||
${tw`ring-4 ring-secondary-2-light ring-opacity-40`}
|
||||
}
|
||||
}
|
||||
|
||||
${({ secondary }) => secondary && tw`bg-none`}
|
||||
`
|
||||
|
||||
interface ButtonProps {
|
||||
|
@ -52,13 +54,7 @@ const Button: FunctionComponent<ButtonProps> = ({
|
|||
<StyledButton
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
className={`${className} ${
|
||||
secondary || disabled
|
||||
? 'bg-bkg-4'
|
||||
: 'bg-gradient-to-br from-secondary-1-light via-secondary-1-dark to-secondary-2-light'
|
||||
} relative z-10 bg-bkg-4 border-none default-transition px-6 py-2 rounded-lg text-fgd-1
|
||||
active:border-primary hover:bg-bkg-3 focus:outline-none
|
||||
disabled:cursor-not-allowed`}
|
||||
className={`${className} bg-gradient-to-br from-secondary-1-light via-secondary-1-dark to-secondary-2-light relative z-10 default-transition px-6 py-2 rounded-lg text-fgd-1 hover:bg-bkg-3 focus:outline-none disabled:cursor-not-allowed`}
|
||||
secondary={secondary}
|
||||
{...props}
|
||||
>
|
||||
|
|
|
@ -1,11 +1,8 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import styled from '@emotion/styled'
|
||||
import tw from 'twin.macro'
|
||||
import {
|
||||
LinkIcon,
|
||||
LockClosedIcon,
|
||||
LockOpenIcon,
|
||||
} from '@heroicons/react/outline'
|
||||
import { LockClosedIcon, LockOpenIcon } from '@heroicons/react/outline'
|
||||
import { LinkIcon } from '@heroicons/react/solid'
|
||||
import useWalletStore from '../stores/useWalletStore'
|
||||
import { getUsdcBalance } from '../utils'
|
||||
import Input from './Input'
|
||||
|
@ -26,16 +23,18 @@ const ContributionModal = () => {
|
|||
const wallet = useWalletStore((s) => s.current)
|
||||
const usdcBalance = getUsdcBalance()
|
||||
|
||||
const [contributionAmount, setContributionAmount] = useState(null)
|
||||
const [sliderPercentage, setSliderPercentage] = useState(null)
|
||||
const [contributionAmount, setContributionAmount] = useState(0)
|
||||
const [sliderPercentage, setSliderPercentage] = useState(0)
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [submitted, setSubmitted] = useState(false)
|
||||
const [editContribution, setEditContribution] = useState(false)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [maxButtonTransition, setMaxButtonTransition] = useState(false)
|
||||
|
||||
const handleConnectDisconnect = () => {
|
||||
if (connected) {
|
||||
setContributionAmount(null)
|
||||
// setContributionAmount(0)
|
||||
// setSliderPercentage(0)
|
||||
setSubmitted(false)
|
||||
setEditContribution(false)
|
||||
wallet.disconnect()
|
||||
|
@ -67,8 +66,15 @@ const ContributionModal = () => {
|
|||
const handleMax = () => {
|
||||
setContributionAmount(usdcBalance)
|
||||
setSliderPercentage(100)
|
||||
setMaxButtonTransition(true)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (maxButtonTransition) {
|
||||
setMaxButtonTransition(false)
|
||||
}
|
||||
}, [maxButtonTransition])
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true)
|
||||
if (usdcBalance) {
|
||||
|
@ -86,6 +92,8 @@ const ContributionModal = () => {
|
|||
}
|
||||
}, [submitting])
|
||||
|
||||
const disableFormInputs = submitted || !connected || loading
|
||||
|
||||
return (
|
||||
<StyledModalWrapper>
|
||||
<div className="pb-4 text-center">
|
||||
|
@ -153,7 +161,7 @@ const ContributionModal = () => {
|
|||
<div className="flex">
|
||||
{submitted ? (
|
||||
<Button
|
||||
className="bg-secondary-2-light hover:bg-secondary-2-dark font-normal rounded text-fgd-1 text-xs py-0.5 px-1.5 mr-2"
|
||||
className="ring-1 ring-secondary-1-light ring-inset hover:ring-secondary-1-dark hover:bg-transparent hover:text-secondary-1-dark font-normal rounded text-secondary-1-light text-xs py-0.5 px-1.5 mr-2"
|
||||
disabled={!connected}
|
||||
onClick={() => handleEditContribution()}
|
||||
secondary
|
||||
|
@ -165,7 +173,7 @@ const ContributionModal = () => {
|
|||
className={`${
|
||||
submitted && 'opacity-30'
|
||||
} bg-bkg-4 font-normal rounded text-fgd-3 text-xs py-0.5 px-1.5`}
|
||||
disabled={!connected || submitted}
|
||||
disabled={disableFormInputs}
|
||||
onClick={() => handleMax()}
|
||||
secondary
|
||||
>
|
||||
|
@ -182,7 +190,7 @@ const ContributionModal = () => {
|
|||
) : null}
|
||||
<Input
|
||||
className={(submitted || editContribution) && 'pl-7'}
|
||||
disabled={!connected || submitted || loading}
|
||||
disabled={disableFormInputs}
|
||||
type="text"
|
||||
onChange={(e) => onChangeAmountInput(e.target.value)}
|
||||
value={loading ? '' : contributionAmount}
|
||||
|
@ -196,16 +204,17 @@ const ContributionModal = () => {
|
|||
>
|
||||
<div className="pb-20">
|
||||
<Slider
|
||||
disabled={submitted || !connected || loading}
|
||||
disabled={disableFormInputs}
|
||||
value={sliderPercentage}
|
||||
onChange={(v) => onChangeSlider(v)}
|
||||
step={1}
|
||||
maxButtonTransition={maxButtonTransition}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => handleSetContribution()}
|
||||
className="w-full py-2.5"
|
||||
disabled={!connected || submitted}
|
||||
disabled={disableFormInputs}
|
||||
>
|
||||
<div className={`flex items-center justify-center`}>
|
||||
Set Contribution
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { FunctionComponent, useState } from 'react'
|
||||
import { FunctionComponent, useEffect, useState } from 'react'
|
||||
import tw from 'twin.macro'
|
||||
import styled from '@emotion/styled'
|
||||
import Slider from 'rc-slider'
|
||||
|
@ -55,20 +55,56 @@ const StyledSlider = styled(Slider)<StyledSliderProps>`
|
|||
${({ disabled }) => disabled && 'background-color: transparent'}
|
||||
`
|
||||
|
||||
const StyledSliderButtonWrapper = styled.div`
|
||||
${tw`absolute left-0 top-4 w-full`}
|
||||
`
|
||||
|
||||
type StyledSliderButtonProps = {
|
||||
styleValue: number
|
||||
sliderValue: number
|
||||
}
|
||||
|
||||
const StyledSliderButton = styled.button<StyledSliderButtonProps>`
|
||||
${tw`bg-none font-display transition-all duration-300 hover:text-primary-light focus:outline-none`}
|
||||
font-size: 0.6rem;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
left: 0%;
|
||||
|
||||
:nth-of-type(2) {
|
||||
left: 23%;
|
||||
transform: translateX(-23%);
|
||||
}
|
||||
|
||||
:nth-of-type(3) {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
:nth-of-type(4) {
|
||||
left: 76%;
|
||||
transform: translateX(-76%);
|
||||
}
|
||||
|
||||
:nth-of-type(5) {
|
||||
left: 100%;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
${({ styleValue, sliderValue }) => styleValue < sliderValue && tw`opacity-40`}
|
||||
${({ styleValue, sliderValue }) =>
|
||||
styleValue === sliderValue && tw`animate-pulse text-primary-light`}
|
||||
`
|
||||
|
||||
type SliderProps = {
|
||||
onChange: (...args: any[]) => any
|
||||
step: number
|
||||
value: number
|
||||
disabled: boolean
|
||||
max?: number
|
||||
}
|
||||
|
||||
const marks = {
|
||||
0: '0%',
|
||||
25: '25%',
|
||||
50: '50%',
|
||||
75: '75%',
|
||||
100: '100%',
|
||||
maxButtonTransition?: boolean
|
||||
}
|
||||
|
||||
const AmountSlider: FunctionComponent<SliderProps> = ({
|
||||
|
@ -77,22 +113,79 @@ const AmountSlider: FunctionComponent<SliderProps> = ({
|
|||
value,
|
||||
disabled,
|
||||
max,
|
||||
maxButtonTransition,
|
||||
}) => {
|
||||
const [enableTransition, setEnableTransition] = useState(true)
|
||||
const [enableTransition, setEnableTransition] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (maxButtonTransition) {
|
||||
setEnableTransition(true)
|
||||
}
|
||||
}, [maxButtonTransition])
|
||||
|
||||
useEffect(() => {
|
||||
if (enableTransition) {
|
||||
const transitionTimer = setTimeout(() => {
|
||||
setEnableTransition(false)
|
||||
}, 500)
|
||||
return () => clearTimeout(transitionTimer)
|
||||
}
|
||||
}, [enableTransition])
|
||||
|
||||
const handleSliderButtonClick = (value) => {
|
||||
onChange(value)
|
||||
setEnableTransition(true)
|
||||
}
|
||||
|
||||
return (
|
||||
<StyledSlider
|
||||
min={0}
|
||||
max={max}
|
||||
value={value || 0}
|
||||
onChange={onChange}
|
||||
step={step}
|
||||
marks={marks}
|
||||
enableTransition={enableTransition}
|
||||
onBeforeChange={() => setEnableTransition(false)}
|
||||
onAfterChange={() => setEnableTransition(true)}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<div className="relative">
|
||||
<StyledSlider
|
||||
min={0}
|
||||
max={max}
|
||||
value={value || 0}
|
||||
onChange={onChange}
|
||||
step={step}
|
||||
enableTransition={enableTransition}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<StyledSliderButtonWrapper>
|
||||
<StyledSliderButton
|
||||
onClick={() => handleSliderButtonClick(0)}
|
||||
styleValue={0}
|
||||
sliderValue={value}
|
||||
>
|
||||
0%
|
||||
</StyledSliderButton>
|
||||
<StyledSliderButton
|
||||
onClick={() => handleSliderButtonClick(25)}
|
||||
styleValue={25}
|
||||
sliderValue={value}
|
||||
>
|
||||
25%
|
||||
</StyledSliderButton>
|
||||
<StyledSliderButton
|
||||
onClick={() => handleSliderButtonClick(50)}
|
||||
styleValue={50}
|
||||
sliderValue={value}
|
||||
>
|
||||
50%
|
||||
</StyledSliderButton>
|
||||
<StyledSliderButton
|
||||
onClick={() => handleSliderButtonClick(75)}
|
||||
styleValue={75}
|
||||
sliderValue={value}
|
||||
>
|
||||
75%
|
||||
</StyledSliderButton>
|
||||
<StyledSliderButton
|
||||
onClick={() => handleSliderButtonClick(100)}
|
||||
styleValue={100}
|
||||
sliderValue={value}
|
||||
>
|
||||
100%
|
||||
</StyledSliderButton>
|
||||
</StyledSliderButtonWrapper>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue