tldraw
Version:
A tiny little drawing editor.
72 lines (71 loc) • 2.11 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { Slider as _Slider } from "radix-ui";
import { memo, useCallback, useEffect, useState } from "react";
import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
const TldrawUiSlider = memo(function Slider({
onHistoryMark,
title,
steps,
value,
label,
onValueChange,
["data-testid"]: testId
}) {
const msg = useTranslation();
const [tabIndex, setTabIndex] = useState(-1);
useEffect(() => {
setTabIndex(0);
}, []);
const handleValueChange = useCallback(
(value2) => {
onValueChange(value2[0]);
},
[onValueChange]
);
const handlePointerDown = useCallback(() => {
onHistoryMark("click slider");
}, [onHistoryMark]);
const handlePointerUp = useCallback(() => {
if (!value) return;
onValueChange(value);
}, [value, onValueChange]);
const handleKeyEvent = useCallback((event) => {
if (event.key === "Tab") {
event.stopPropagation();
}
}, []);
return /* @__PURE__ */ jsx("div", { className: "tlui-slider__container", children: /* @__PURE__ */ jsxs(
_Slider.Root,
{
"data-testid": testId,
className: "tlui-slider",
dir: "ltr",
min: 0,
max: steps,
step: 1,
value: value ? [value] : void 0,
onPointerDown: handlePointerDown,
onValueChange: handleValueChange,
onPointerUp: handlePointerUp,
onKeyDownCapture: handleKeyEvent,
onKeyUpCapture: handleKeyEvent,
title: title + " \u2014 " + msg(label),
children: [
/* @__PURE__ */ jsx(_Slider.Track, { className: "tlui-slider__track", dir: "ltr", children: value !== null && /* @__PURE__ */ jsx(_Slider.Range, { className: "tlui-slider__range", dir: "ltr" }) }),
value !== null && /* @__PURE__ */ jsx(
_Slider.Thumb,
{
"aria-label": msg("style-panel.opacity"),
className: "tlui-slider__thumb",
dir: "ltr",
tabIndex
}
)
]
}
) });
});
export {
TldrawUiSlider
};
//# sourceMappingURL=TldrawUiSlider.mjs.map