Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: using type text instead number for avoid region issue (#3538)

Browse Source
This commit is contained in:
Faisal Amir 2024-09-04 22:58:01 +07:00 committed by GitHub
parent d4c014da1d
commit 28c6ba10f1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web/containers/SliderRightPanel/index.tsx
View File

@ -28,8 +28,10 @@ const SliderRightPanel = ({
onValueChanged, onValueChanged,
}: Props) => { }: Props) => {
const [showTooltip, setShowTooltip] = useState({ max: false, min: false }) const [showTooltip, setShowTooltip] = useState({ max: false, min: false })
const [val, setVal] = useState(value.toString())
useClickOutside(() => setShowTooltip({ max: false, min: false }), null, []) useClickOutside(() => setShowTooltip({ max: false, min: false }), null, [])
return ( return (
<div className="flex flex-col"> <div className="flex flex-col">
<div className="mb-3 flex items-center gap-x-2"> <div className="mb-3 flex items-center gap-x-2">
@ -48,7 +50,10 @@ const SliderRightPanel = ({
<div className="relative w-full"> <div className="relative w-full">
<Slider <Slider
value={[value]} value={[value]}
onValueChange={(e) => onValueChanged?.(e[0])} onValueChange={(e) => {
onValueChanged?.(e[0])
setVal(e[0].toString())
}}
min={min} min={min}
max={max} max={max}
step={step} step={step}
@ -63,24 +68,29 @@ const SliderRightPanel = ({
open={showTooltip.max || showTooltip.min} open={showTooltip.max || showTooltip.min}
trigger={ trigger={
<Input <Input
type="number" type="text"
className="-mt-4 h-8 w-[60px]" className="-mt-4 h-8 w-[60px]"
min={min} min={min}
max={max} max={max}
value={String(value)} value={val}
disabled={disabled} disabled={disabled}
textAlign="right" textAlign="right"
onBlur={(e) => { onBlur={(e) => {
if (Number(e.target.value) > Number(max)) { if (Number(e.target.value) > Number(max)) {
onValueChanged?.(Number(max)) onValueChanged?.(Number(max))
setVal(max.toString())
setShowTooltip({ max: true, min: false }) setShowTooltip({ max: true, min: false })
} else if (Number(e.target.value) < Number(min)) { } else if (Number(e.target.value) < Number(min)) {
onValueChanged?.(Number(min)) onValueChanged?.(Number(min))
setVal(min.toString())
setShowTooltip({ max: false, min: true }) setShowTooltip({ max: false, min: true })
} }
}} }}
onChange={(e) => { onChange={(e) => {
onValueChanged?.(Number(e.target.value)) onValueChanged?.(e.target.value)
if (/^\d*\.?\d*$/.test(e.target.value)) {
setVal(e.target.value)
}
}} }}
/> />
} }