| 1 |
import * as React from "react"; |
| 2 |
import InputNumber from "rc-input-number"; |
| 3 |
import "rc-input-number/assets/index.css"; |
| 4 |
|
| 5 |
import { ThemeSetting } from "~/providers/Themes"; |
| 6 |
import GalleryContext from "~/context/Gallery"; |
| 7 |
|
| 8 |
type ControlProps = { |
| 9 |
setting: ThemeSetting; |
| 10 |
}; |
| 11 |
|
| 12 |
const NumericControl = (props: ControlProps) => { |
| 13 |
const setting = props.setting; |
| 14 |
const [value, setValue] = React.useState(parseInt(setting.value)); |
| 15 |
const ctx = React.useContext(GalleryContext); |
| 16 |
|
| 17 |
const handleChange = (value: number) => { |
| 18 |
setValue(value); |
| 19 |
ctx.dispatch({ |
| 20 |
type: `UPDATE_GALLERY_APPEARANCE`, |
| 21 |
payload: { ...setting, value }, |
| 22 |
}); |
| 23 |
}; |
| 24 |
|
| 25 |
return ( |
| 26 |
<div> |
| 27 |
<div className="vm-font-semibold vm-mb-2">{setting.label}</div> |
| 28 |
<InputNumber |
| 29 |
value={value} |
| 30 |
defaultValue={setting.value} |
| 31 |
min={setting.min} |
| 32 |
max={setting.max} |
| 33 |
step={setting.step} |
| 34 |
formatter={(val) => `${val}px`} |
| 35 |
onChange={handleChange} |
| 36 |
/> |
| 37 |
</div> |
| 38 |
); |
| 39 |
}; |
| 40 |
|
| 41 |
export default NumericControl; |
| 42 |
|
