Spaces:
Configuration error
Configuration error
File size: 1,518 Bytes
74aacd5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
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
|