62 lines
1.6 KiB
TypeScript
Executable File
62 lines
1.6 KiB
TypeScript
Executable File
import {BaseSlider} from './base-slider';
|
|
import {useSlider, UseSliderProps} from './use-slider';
|
|
import React, {Ref} from 'react';
|
|
import {SliderThumb} from './slider-thumb';
|
|
import {useController} from 'react-hook-form';
|
|
import {mergeProps} from '@react-aria/utils';
|
|
|
|
interface SliderProps extends UseSliderProps<number> {
|
|
inputRef?: Ref<HTMLInputElement>;
|
|
onBlur?: React.FocusEventHandler;
|
|
}
|
|
export function Slider({inputRef, onBlur, ...props}: SliderProps) {
|
|
const {onChange, onChangeEnd, value, defaultValue, ...otherProps} = props;
|
|
|
|
const baseProps: UseSliderProps = {
|
|
...otherProps,
|
|
// Normalize `value: number[]` to `value: number`
|
|
value: value != null ? [value] : undefined,
|
|
defaultValue: defaultValue != null ? [defaultValue] : undefined,
|
|
onChange: (v: number[]): void => {
|
|
onChange?.(v[0]);
|
|
},
|
|
onChangeEnd: (v: number[]): void => {
|
|
onChangeEnd?.(v[0]);
|
|
},
|
|
};
|
|
|
|
const slider = useSlider(baseProps);
|
|
|
|
return (
|
|
<BaseSlider {...baseProps} slider={slider}>
|
|
<SliderThumb
|
|
fillColor={props.fillColor}
|
|
index={0}
|
|
slider={slider}
|
|
inputRef={inputRef}
|
|
onBlur={onBlur}
|
|
/>
|
|
</BaseSlider>
|
|
);
|
|
}
|
|
|
|
export interface FormSliderProps extends SliderProps {
|
|
name: string;
|
|
}
|
|
|
|
export function FormSlider({name, ...props}: FormSliderProps) {
|
|
const {
|
|
field: {onChange, onBlur, value = '', ref},
|
|
} = useController({
|
|
name,
|
|
});
|
|
|
|
const formProps: SliderProps = {
|
|
onChange,
|
|
onBlur,
|
|
value: value || '', // avoid issues with "null" value when setting form defaults from backend model
|
|
};
|
|
|
|
return <Slider inputRef={ref} {...mergeProps(formProps, props)} />;
|
|
}
|