import { useEffect, useState } from "react";
import { Button } from "../button";
import { GridArea, ResizeableGrid, useGridState } from "./resizeable-grid";
export default {
title: "Component/Grid",
};
export let Default = {
render: () => {
return (
Column 1
Column 2
Column 3
Row 2
);
},
};
export let Controlled = {
render: () => {
let [state, setState] = useGridState({
defaultColumns: [{ size: 200, mode: "static" }, "1fr", 200],
defaultRows: ["auto", 300]
});
let toggleCol = (colIndex) => {
setState(current => {
let columns = current.columns.map((entry, index) => {
if (index === colIndex) {
return {
...entry,
size: entry.size === 0 ? 200 : 0,
};
}
return entry;
});
return {
...current,
columns,
};
});
};
let toggleRow = () => {
setState(current => {
let rows = current.rows.map((entry, index) => {
if (index === 1) {
return {
...entry,
size: entry.size === 0 ? 200 : 0,
};
}
return entry;
});
return {
...current,
rows,
};
});
};
let [count, setCount] = useState(0);
useEffect(() => {
setInterval(() => {
setCount(c => c + 1);
}, 100);
}, []);
return (
Column 1
Column 2
{count}
Column 3
Bottom Row
);
},
};