sccoreui
Version:
ui-sccore
101 lines (100 loc) • 6.71 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const CustomSlider = (props) => {
const { min, max, orientation, range, value, indicator = true } = props;
const [rangeValues, setRangeValues] = (0, react_1.useState)(value);
const [sliderValue, setSliderValue] = (0, react_1.useState)(value);
const sliderRef = (0, react_1.useRef)(null);
if (range && typeof value === "number") {
throw new Error(`For a range slider value should be [number, number]. Make sure to provide a proper value.`);
}
const finalWidthValue = !range
? `${sliderValue}%`
: `${rangeValues[0] > rangeValues[1]
? rangeValues[0] - rangeValues[1]
: rangeValues[1] > rangeValues[0]
? rangeValues[1] - rangeValues[0]
: 0}%`;
const finalLeftValue = rangeValues[0] < rangeValues[1]
? `${rangeValues[0]}%`
: `${rangeValues[1]}%`;
const rangeStyles = range
? {
[orientation === "horizontal" ? "width" : "height"]: finalWidthValue,
[orientation === "horizontal" ? "left" : "top"]: finalLeftValue,
}
: {
[orientation === "horizontal" ? "width" : "height"]: `${sliderValue}%`,
[orientation === "vertical" ? "top" : null]: 0,
};
const handleStyles = !range
? { [orientation === "horizontal" ? "left" : "top"]: `${sliderValue}%` }
: null;
const mouseMoveController = (e, index) => {
const sliderRect = sliderRef.current.getBoundingClientRect();
const currentRange = Math.round((e[orientation === "horizontal" ? "clientX" : "clientY"] -
sliderRect[orientation === "horizontal" ? "left" : "top"]) /
4);
if (min && max) {
if (e[orientation === "horizontal" ? "clientX" : "clientY"] -
sliderRect[orientation === "horizontal" ? "left" : "top"] <
0 ||
e[orientation === "horizontal" ? "clientX" : "clientY"] -
sliderRect[orientation === "horizontal" ? "left" : "top"] >
sliderRect[orientation === "horizontal" ? "width" : "height"])
return;
}
else {
if (currentRange < 0 || currentRange > 100)
return;
}
if (range) {
if (index) {
setRangeValues((prevRanges) => [prevRanges[0], currentRange]);
}
else {
setRangeValues((prevRanges) => [currentRange, prevRanges[1]]);
}
}
else {
setSliderValue(currentRange);
}
};
const handleMovement = (index) => {
const handler = (e) => {
mouseMoveController(e, index);
};
document.addEventListener("mousemove", handler);
document.addEventListener("mouseup", () => {
document.removeEventListener("mousemove", handler);
});
};
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ "data-pc-name": "slider", "data-pc-section": "root", className: `p-slider ${orientation === "horizontal" ? "w" : "h"}-25rem p-component p-slider-${orientation}${props.className ? ` ${props.className}` : ""}`, ref: sliderRef }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-slider-range", "data-pc-section": "range", style: rangeStyles }), range && typeof value !== "number" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-slider-handle p-slider-handle-start", tabIndex: 0, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": rangeValues[0], "aria-orientation": orientation, style: {
[orientation === "horizontal"
? "left"
: "top"]: `${rangeValues[0]}%`,
}, onMouseDown: () => handleMovement(0) }, { children: indicator && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
position: "absolute",
height: "40px",
[orientation === "vertical" ? "left" : "top"]: orientation === "horizontal" ? "-50px" : "-70px",
transform: `translate${orientation === "horizontal" ? "X" : "Y"}(-30%)`,
}, className: "px-3 bg-white border-1 border-gray-300 border-round-lg shadow-4 py-2 text-center text-lg" }, { children: [rangeValues[0], "%"] }))) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-slider-handle p-slider-handle-end p-slider-handle-active", tabIndex: 0, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": rangeValues[1], "aria-orientation": orientation, style: {
[orientation === "horizontal"
? "left"
: "top"]: `${rangeValues[1]}%`,
}, onMouseDown: () => handleMovement(1) }, { children: indicator && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
position: "absolute",
height: "40px",
[orientation === "vertical" ? "left" : "top"]: orientation === "horizontal" ? "-50px" : "-70px",
transform: `translate${orientation === "horizontal" ? "X" : "Y"}(-30%)`,
}, className: "px-3 bg-white border-1 border-gray-300 border-round-lg shadow-4 py-2 text-center text-lg" }, { children: [rangeValues[1], "%"] }))) }))] })) : ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-slider-handle", role: "slider", "aria-valuenow": typeof value === "number" ? value : undefined, "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": orientation, style: handleStyles, onMouseDown: () => handleMovement() }, { children: indicator && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
position: "absolute",
height: "40px",
width: "60px",
[orientation === "vertical" ? "left" : "top"]: "-50px",
transform: "translateX(-30%)",
}, className: "px-3 bg-white border-1 border-gray-300 border-round-lg shadow-4 py-2 text-center text-lg" }, { children: [sliderValue, "%"] }))) })))] })));
};
exports.default = CustomSlider;