fix slider
This commit is contained in:
parent
c0e378b65a
commit
e9d323e47d
|
@ -1,11 +1,18 @@
|
|||
import Decimal from 'decimal.js'
|
||||
import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react'
|
||||
import {
|
||||
ChangeEvent,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react'
|
||||
import { floorToDecimal } from 'utils/numbers'
|
||||
|
||||
const PERCENTAGE_SHORTCUTS = [10, 25, 50, 75, 100]
|
||||
|
||||
const LeverageSlider = ({
|
||||
amount,
|
||||
amount = 0,
|
||||
decimals,
|
||||
handleStartDrag,
|
||||
handleEndDrag,
|
||||
|
@ -21,10 +28,14 @@ const LeverageSlider = ({
|
|||
onChange: (x: string) => void
|
||||
step: number
|
||||
}) => {
|
||||
const [value, setValue] = useState(0)
|
||||
const [percent, setPercent] = useState(0)
|
||||
const inputEl = useRef<HTMLInputElement>(null)
|
||||
|
||||
const sliderValue = useMemo(() => {
|
||||
if (!amount || isNaN(amount)) return 0
|
||||
return amount
|
||||
}, [amount])
|
||||
|
||||
useEffect(() => {
|
||||
if (inputEl.current) {
|
||||
const target = inputEl.current
|
||||
|
@ -34,9 +45,9 @@ const LeverageSlider = ({
|
|||
target.style.backgroundSize =
|
||||
max - min === 0
|
||||
? '0% 100%'
|
||||
: ((value - min) * 100) / (max - min) + '% 100%'
|
||||
: ((sliderValue - min) * 100) / (max - min) + '% 100%'
|
||||
}
|
||||
}, [leverageMax, value])
|
||||
}, [leverageMax, sliderValue])
|
||||
|
||||
const handleShortcutButtons = useCallback(
|
||||
(percent: number) => {
|
||||
|
@ -49,7 +60,6 @@ const LeverageSlider = ({
|
|||
amount = floorToDecimal(amountDecimal, decimals).toFixed()
|
||||
}
|
||||
onChange(amount)
|
||||
setValue(parseFloat(amount))
|
||||
},
|
||||
[decimals, leverageMax],
|
||||
)
|
||||
|
@ -57,10 +67,9 @@ const LeverageSlider = ({
|
|||
useEffect(() => {
|
||||
if (amount) {
|
||||
const percent = ((amount - leverageMax) / leverageMax) * 100 + 100
|
||||
setValue(amount)
|
||||
onChange(amount.toString())
|
||||
setPercent(Math.ceil(percent))
|
||||
} else {
|
||||
setValue(0)
|
||||
setPercent(0)
|
||||
}
|
||||
}, [amount, leverageMax])
|
||||
|
@ -74,7 +83,6 @@ const LeverageSlider = ({
|
|||
target.style.backgroundSize = percent + '% 100%'
|
||||
|
||||
onChange(e.target.value)
|
||||
setValue(parseFloat(e.target.value))
|
||||
setPercent(Math.round(percent))
|
||||
}
|
||||
|
||||
|
@ -90,7 +98,7 @@ const LeverageSlider = ({
|
|||
step={step}
|
||||
className="w-full focus:outline-none"
|
||||
onChange={handleSliderChange}
|
||||
value={value}
|
||||
value={sliderValue}
|
||||
onMouseDown={handleStartDrag}
|
||||
onMouseUp={handleEndDrag}
|
||||
onKeyDown={handleStartDrag}
|
||||
|
|
Loading…
Reference in New Issue