forked from rjsf-team/react-jsonschema-form
-
Notifications
You must be signed in to change notification settings - Fork 0
/
RangeWidget.tsx
47 lines (43 loc) · 1.08 KB
/
RangeWidget.tsx
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
import React from "react";
import FormLabel from "@mui/material/FormLabel";
import Slider from "@mui/material/Slider";
import { WidgetProps, rangeSpec } from "@rjsf/utils";
const RangeWidget = ({
value,
readonly,
disabled,
onBlur,
onFocus,
options,
schema,
onChange,
required,
label,
id,
}: WidgetProps) => {
const sliderProps = { value, label, id, name: id, ...rangeSpec(schema) };
const _onChange = (_: any, value?: number | number[]) => {
onChange(value ? value : options.emptyValue);
};
const _onBlur = ({ target: { value } }: React.FocusEvent<HTMLInputElement>) =>
onBlur(id, value);
const _onFocus = ({
target: { value },
}: React.FocusEvent<HTMLInputElement>) => onFocus(id, value);
return (
<>
<FormLabel required={required} htmlFor={id}>
{label || schema.title}
</FormLabel>
<Slider
disabled={disabled || readonly}
onChange={_onChange}
onBlur={_onBlur}
onFocus={_onFocus}
valueLabelDisplay="auto"
{...sliderProps}
/>
</>
);
};
export default RangeWidget;