47 lines
1.3 KiB
JavaScript
47 lines
1.3 KiB
JavaScript
import { useState, useMemo, useEffect } from "react";
|
|
import { loadFromStorage, saveToStorage } from "../utils/localStorageUtils";
|
|
import { rowBaseOffset } from "../constants/tableConfig";
|
|
|
|
export const useTableScale = () => {
|
|
const [sizeMult, setSizeMult] = useState(() =>
|
|
loadFromStorage("sizeMult", 1),
|
|
);
|
|
|
|
useEffect(() => {
|
|
saveToStorage("sizeMult", sizeMult);
|
|
}, [sizeMult]);
|
|
|
|
const tableScaleStyle = useMemo(
|
|
() => ({
|
|
transform: `scale(${sizeMult})`,
|
|
transformOrigin: "top left",
|
|
transition: "transform 0.2s ease-in-out",
|
|
willChange: "transform",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
flex: 1,
|
|
width: `${100 / sizeMult}%`,
|
|
height: `${100 / sizeMult}%`,
|
|
maxHeight: `${100 / sizeMult}%`,
|
|
minHeight: `${100 / sizeMult}%`,
|
|
}),
|
|
[sizeMult],
|
|
);
|
|
|
|
const tableWrapperStyle = useMemo(() => {
|
|
return {
|
|
overflow: "visible",
|
|
overflowX: sizeMult > 1.2 ? "auto" : "visible",
|
|
overflowY: sizeMult > 1.2 ? "auto" : "visible",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
height: "92%",
|
|
maxHeight: "92%",
|
|
minHeight: "92%",
|
|
padding: "1rem",
|
|
};
|
|
}, [sizeMult]);
|
|
|
|
return { sizeMult, setSizeMult, tableScaleStyle, tableWrapperStyle };
|
|
};
|