106 lines
3.2 KiB
TypeScript
106 lines
3.2 KiB
TypeScript
import { useRef, useEffect } from "react";
|
|
import RangeSlider from "react-range-slider-input";
|
|
import { NumericFormat } from "react-number-format";
|
|
import "./multiRangeSlider.css";
|
|
import { IMultirangeSlider } from "../types/multirangeSlider";
|
|
|
|
interface MultiRangeSliderProps {
|
|
onChange: (sliderId: string, e: [a: number, b: number]) => void;
|
|
multirangeSlider: IMultirangeSlider;
|
|
}
|
|
|
|
const MultiRangeSlider = ({
|
|
onChange,
|
|
multirangeSlider,
|
|
}: MultiRangeSliderProps) => {
|
|
const firstInputRef = useRef(null);
|
|
const secondInputRef = useRef(null);
|
|
const { isDisabled } = multirangeSlider;
|
|
|
|
const handleOnRangeInputChange = (e: [a: number, b: number]) => {
|
|
onChange(multirangeSlider.id, e);
|
|
};
|
|
|
|
const handleOnFirstInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const value = Number(e.target.value.split(",").join(""));
|
|
if (
|
|
value >= multirangeSlider.minValue &&
|
|
value <= multirangeSlider.maxValue
|
|
) {
|
|
const rangeValue: [a: number, b: number] = [
|
|
value,
|
|
multirangeSlider.endValue,
|
|
];
|
|
onChange(multirangeSlider.id, rangeValue);
|
|
}
|
|
};
|
|
|
|
const handleOnSecondInputChange = (
|
|
e: React.ChangeEvent<HTMLInputElement>
|
|
) => {
|
|
const value = Number(e.target.value.split(",").join(""));
|
|
if (
|
|
value >= multirangeSlider.minValue &&
|
|
value <= multirangeSlider.maxValue
|
|
) {
|
|
const rangeValue: [a: number, b: number] = [
|
|
multirangeSlider.startValue,
|
|
value,
|
|
];
|
|
onChange(multirangeSlider.id, rangeValue);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (
|
|
!firstInputRef.current ||
|
|
multirangeSlider.startValue === multirangeSlider.minValue
|
|
)
|
|
return;
|
|
(firstInputRef.current as HTMLInputElement).focus();
|
|
}, [multirangeSlider.startValue]);
|
|
|
|
useEffect(() => {
|
|
if (
|
|
!secondInputRef.current ||
|
|
multirangeSlider.maxValue === multirangeSlider.endValue
|
|
)
|
|
return;
|
|
(secondInputRef.current as HTMLInputElement).focus();
|
|
}, [multirangeSlider.endValue]);
|
|
|
|
return (
|
|
<div className="">
|
|
<div className="flex justify-between p-3 bg-white rounded-lg relative flex-col">
|
|
<div className="flex justify-between">
|
|
<NumericFormat
|
|
thousandSeparator=","
|
|
key={multirangeSlider.startValue}
|
|
onChange={handleOnFirstInputChange}
|
|
defaultValue={multirangeSlider.startValue}
|
|
className="focus:outline-none input_number w-1/2"
|
|
/>
|
|
<NumericFormat
|
|
thousandSeparator=","
|
|
key={multirangeSlider.endValue}
|
|
onChange={handleOnSecondInputChange}
|
|
defaultValue={multirangeSlider.endValue}
|
|
className="focus:outline-none input_number w-1/2 text-right"
|
|
/>
|
|
</div>
|
|
<RangeSlider
|
|
min={multirangeSlider.minValue}
|
|
max={multirangeSlider.maxValue}
|
|
value={[multirangeSlider.startValue, multirangeSlider.endValue]}
|
|
className={`${
|
|
isDisabled ? "pointer-events-none text disabled" : ""
|
|
} absolute -bottom-3 left-0 w-[calc(100%-16px)] z-20`}
|
|
onInput={handleOnRangeInputChange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MultiRangeSlider;
|