@hitachivantara/uikit-react-pentaho
Version:
UI Kit Pentaho React components.
77 lines (76 loc) • 2.49 kB
JavaScript
;
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const react = require("react");
const uikitReactCore = require("@hitachivantara/uikit-react-core");
const useResizable = (resizableOptions) => {
const { ref, initialWidth, minWidth, maxWidth, onResize } = resizableOptions;
const [width, setWidth] = react.useState(initialWidth);
const [isHover, setIsHover] = react.useState(false);
const [isDragging, setIsDragging] = react.useState(false);
const panelRef = react.useRef(null);
const forkedRef = uikitReactCore.useForkRef(ref, panelRef);
const mouseMove = (event) => {
if (panelRef.current) {
const rect = panelRef.current.getBoundingClientRect();
const newWidth = event.clientX - rect.left;
if (newWidth >= minWidth && newWidth <= maxWidth) {
setWidth(newWidth);
onResize?.(newWidth);
}
}
};
const handleMouseMove = (event) => {
if (panelRef.current) {
const rect = panelRef.current.getBoundingClientRect();
const isHoverBorder = event.clientX >= rect.right - 5 && event.clientX <= rect.right + 5;
setIsHover(isHoverBorder);
}
};
const handleMouseUp = () => {
if (!panelRef.current) return;
panelRef.current.style.userSelect = "";
panelRef.current?.parentElement?.removeEventListener(
"mousemove",
mouseMove
);
panelRef.current?.parentElement?.removeEventListener(
"mouseup",
handleMouseUp
);
setIsDragging(false);
};
const startResizing = () => {
if (!panelRef.current) return;
panelRef.current.style.userSelect = "none";
panelRef.current.parentElement?.addEventListener("mousemove", mouseMove);
panelRef.current.parentElement?.addEventListener("mouseup", handleMouseUp);
setIsDragging(true);
};
const getContainerProps = (overrides = {}) => ({
ref: forkedRef,
style: {
width,
transition: isDragging ? "none" : void 0,
...overrides.style
}
});
const getSeparatorProps = (overrides = {}) => ({
style: {
left: width,
position: "absolute",
top: 0,
bottom: 0,
width: 5,
cursor: "col-resize",
...overrides.style
},
onMouseMove: handleMouseMove,
onMouseLeave: () => setIsHover(false),
onMouseDown: () => {
if (isHover) startResizing();
},
role: "separator"
});
return { width, isDragging, getContainerProps, getSeparatorProps };
};
exports.useResizable = useResizable;