57 lines
1.7 KiB
JavaScript
57 lines
1.7 KiB
JavaScript
// src/lib/useColumnasAjustables.jsx
|
|
// Hook para columnas redimensionables (arrastrar el borde, estilo Excel).
|
|
import { useState, useEffect } from "react";
|
|
|
|
export function useColumnasAjustables(anchosIniciales) {
|
|
const [anchos, setAnchos] = useState(anchosIniciales);
|
|
|
|
useEffect(() => {
|
|
if (anchos.length !== anchosIniciales.length) {
|
|
setAnchos(anchosIniciales);
|
|
}
|
|
}, [anchosIniciales.length]);
|
|
|
|
function iniciarResize(e, i) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const xInicial = e.clientX;
|
|
const anchoInicial = anchos[i];
|
|
function onMove(ev) {
|
|
const nuevo = Math.max(50, anchoInicial + (ev.clientX - xInicial));
|
|
setAnchos((prev) => { const c = [...prev]; c[i] = nuevo; return c; });
|
|
}
|
|
function onUp() {
|
|
document.removeEventListener("mousemove", onMove);
|
|
document.removeEventListener("mouseup", onUp);
|
|
}
|
|
document.addEventListener("mousemove", onMove);
|
|
document.addEventListener("mouseup", onUp);
|
|
}
|
|
|
|
function ColGroup() {
|
|
return (
|
|
<colgroup>
|
|
{anchos.map((w, i) => <col key={i} style={{ width: w, minWidth: w }} />)}
|
|
</colgroup>
|
|
);
|
|
}
|
|
|
|
function Resizer({ index }) {
|
|
return (
|
|
<span
|
|
onMouseDown={(e) => iniciarResize(e, index)}
|
|
className="col-resizer"
|
|
style={{ position: "absolute", top: 0, right: 0, width: 8, height: "100%",
|
|
cursor: "col-resize", userSelect: "none", zIndex: 5 }}
|
|
/>
|
|
);
|
|
}
|
|
|
|
const anchoTotal = anchos.reduce((a, b) => a + b, 0);
|
|
const tableProps = {
|
|
style: { tableLayout: "fixed", width: "100%", minWidth: anchoTotal },
|
|
};
|
|
|
|
return { anchos, ColGroup, Resizer, anchoTotal, tableProps };
|
|
}
|