You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
1.1 KiB
42 lines
1.1 KiB
import InputRange from "react-input-range";
|
|
import {useEffect, useState} from "react";
|
|
import {PriceRange} from "../../libs/utils";
|
|
import {isEmpty} from "radash";
|
|
|
|
/* eslint-disable-next-line */
|
|
export interface ShopAmountRangeProps {
|
|
range?: PriceRange;
|
|
onChange?: (range: PriceRange) => void;
|
|
}
|
|
|
|
export function ShopAmountRange({range = {min: 10, max: 599}, onChange}: ShopAmountRangeProps) {
|
|
const [value, setValue] = useState(!isEmpty(range) ? range : {min: 10, max: 599});
|
|
|
|
useEffect(() => {
|
|
setValue(!isEmpty(range) ? range : {min: 10, max: 599});
|
|
}, [range]);
|
|
const inputRangeChange = (value) => setValue(value);
|
|
const inputRangeChangeComplete = (value) => {
|
|
if (onChange) {
|
|
onChange(value);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="px-5 pb-4">
|
|
<section className="my-3 p-3 h-[40px]">
|
|
<InputRange
|
|
onChange={inputRangeChange}
|
|
onChangeComplete={inputRangeChangeComplete}
|
|
value={value}
|
|
minValue={10}
|
|
step={15}
|
|
formatLabel={value => `${value} €`}
|
|
maxValue={600} />
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ShopAmountRange;
|