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