99 lines
2.7 KiB
TypeScript
99 lines
2.7 KiB
TypeScript
import { useContext, useEffect, useRef } from "react";
|
|
import { ListContext } from "@/app/components/List";
|
|
import useResizeObserver from "use-resize-observer";
|
|
|
|
interface SlideRangeProps {
|
|
className?: string;
|
|
description?: string;
|
|
range?: {
|
|
start?: number;
|
|
stroke?: number;
|
|
};
|
|
onSlide?: (v: number) => void;
|
|
value?: number;
|
|
step?: number;
|
|
}
|
|
|
|
const margin = 15;
|
|
|
|
export default function SlideRange(props: SlideRangeProps) {
|
|
const {
|
|
className = "",
|
|
description = "",
|
|
range = {},
|
|
value,
|
|
onSlide,
|
|
step,
|
|
} = props;
|
|
const { start = 0, stroke = 1 } = range;
|
|
|
|
const { rangeClassName, update } = useContext(ListContext);
|
|
|
|
const slideRef = useRef<HTMLDivElement>(null);
|
|
|
|
const { ref, width = 1 } = useResizeObserver<HTMLDivElement>();
|
|
|
|
ref(slideRef.current);
|
|
|
|
const transformToWidth = (x: number = start) => {
|
|
const abs = x - start;
|
|
const maxWidth = width - margin * 2;
|
|
const result = (abs / stroke) * maxWidth;
|
|
return result;
|
|
};
|
|
|
|
const setProperty = (value?: number) => {
|
|
const initWidth = transformToWidth(value);
|
|
slideRef.current?.style.setProperty(
|
|
"--slide-value-size",
|
|
`${initWidth + margin}px`,
|
|
);
|
|
};
|
|
useEffect(() => {
|
|
setProperty(value);
|
|
update?.({ type: "range" });
|
|
}, [width]);
|
|
|
|
return (
|
|
<div
|
|
className={`flex flex-col justify-center items-end gap-1 w-[100%] ${className} ${rangeClassName}`}
|
|
>
|
|
{!!description && (
|
|
<div className="text-text-slider-block text-common text-sm ">
|
|
{description}
|
|
</div>
|
|
)}
|
|
<div
|
|
className="flex my-1.5 relative w-[100%] h-1.5 bg-slider rounded-slide cursor-pointer"
|
|
ref={slideRef}
|
|
>
|
|
<div className="cursor-pointer absolute marker:top-0 h-[100%] w-[var(--slide-value-size)] bg-slider-slided-travel rounded-slide">
|
|
|
|
</div>
|
|
<div
|
|
className="cursor-pointer absolute z-1 w-[30px] top-[50%] translate-y-[-50%] left-[var(--slide-value-size)] translate-x-[-50%] h-slide-btn leading-slide-btn text-sm-mobile text-center rounded-slide border border-slider-block bg-slider-block"
|
|
// onPointerDown={onPointerDown}
|
|
>
|
|
{value}
|
|
</div>
|
|
<input
|
|
type="range"
|
|
className="w-[100%] h-[100%] opacity-0 cursor-pointer"
|
|
value={value}
|
|
min={start}
|
|
max={start + stroke}
|
|
step={step}
|
|
onChange={(e) => {
|
|
setProperty(e.target.valueAsNumber);
|
|
onSlide?.(e.target.valueAsNumber);
|
|
}}
|
|
style={{
|
|
marginLeft: margin,
|
|
marginRight: margin,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|