77 lines
1.5 KiB
TypeScript
77 lines
1.5 KiB
TypeScript
import React, { useRef } from 'react'
|
|
import { useClickAway } from 'react-use'
|
|
import NumberInput from '../shared/NumberInput'
|
|
import SettingBlock from './SettingBlock'
|
|
|
|
interface NumberInputSettingProps {
|
|
title: string
|
|
allowFloat?: boolean
|
|
desc?: string
|
|
value: string
|
|
suffix?: string
|
|
width?: number
|
|
widthUnit?: string
|
|
disable?: boolean
|
|
onValue: (val: string) => void
|
|
}
|
|
|
|
function NumberInputSetting(props: NumberInputSettingProps) {
|
|
const {
|
|
title,
|
|
allowFloat,
|
|
desc,
|
|
value,
|
|
suffix,
|
|
onValue,
|
|
width,
|
|
widthUnit,
|
|
disable,
|
|
} = props
|
|
|
|
const ref = useRef(null)
|
|
|
|
useClickAway<MouseEvent>(ref, () => {
|
|
if (ref?.current) {
|
|
const input = ref.current as HTMLInputElement
|
|
input.blur()
|
|
}
|
|
})
|
|
|
|
return (
|
|
<SettingBlock
|
|
className="sub-setting-block"
|
|
title={title}
|
|
desc={desc}
|
|
input={
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
gap: '8px',
|
|
}}
|
|
>
|
|
<NumberInput
|
|
allowFloat={allowFloat}
|
|
style={{ width: `${width}${widthUnit}` }}
|
|
value={value}
|
|
disabled={disable}
|
|
onValue={onValue}
|
|
ref={ref}
|
|
/>
|
|
{suffix && <span>{suffix}</span>}
|
|
</div>
|
|
}
|
|
/>
|
|
)
|
|
}
|
|
|
|
NumberInputSetting.defaultProps = {
|
|
allowFloat: false,
|
|
width: 80,
|
|
widthUnit: 'px',
|
|
disable: false,
|
|
}
|
|
|
|
export default NumberInputSetting
|