React Grid Layout automatic detection
Hi. I'm working with React Grid Layout in a responsive way where I need to compute the correct layout based on some "type" of widget. Here is an example.
Input:
Output:
Input:
[
{ id: "1", type: "simple-value" },
{ id: "2", type: "simple-value" },
{ id: "3", type: "simple-value" },
{ id: "4", type: "list" },
{ id: "5", type: "table" },
][
{ id: "1", type: "simple-value" },
{ id: "2", type: "simple-value" },
{ id: "3", type: "simple-value" },
{ id: "4", type: "list" },
{ id: "5", type: "table" },
]Output:
{
xs: [
{ w: 1, h: 1, x: 0, y: 0, i: "1" },
{ w: 1, h: 1, x: 0, y: 1, i: "2" },
{ w: 1, h: 1, x: 0, y: 2, i: "3" },
{ w: 1, h: 2, x: 0, y: 3, i: "4" },
{ w: 1, h: 2, x: 0, y: 5, i: "5" },
],
sm: [
{ w: 1, h: 1, x: 0, y: 0, i: "1" },
{ w: 1, h: 1, x: 1, y: 0, i: "2" },
{ w: 1, h: 1, x: 0, y: 1, i: "3" },
{ w: 2, h: 1, x: 0, y: 2, i: "4" },
{ w: 1, h: 1, x: 1, y: 1, i: "5" },
],
md: [
{ w: 1, h: 1, x: 0, y: 0, i: "1" },
{ w: 1, h: 1, x: 1, y: 0, i: "2" },
{ w: 1, h: 1, x: 2, y: 0, i: "3" },
{ w: 2, h: 1, x: 0, y: 1, i: "4" },
{ w: 1, h: 2, x: 2, y: 1, i: "5" },
],
lg: [
{ w: 2, h: 1, x: 0, y: 0, i: "1" },
{ w: 2, h: 1, x: 2, y: 0, i: "2" },
{ w: 2, h: 1, x: 4, y: 0, i: "3" },
{ w: 4, h: 1, x: 0, y: 1, i: "4" },
{ w: 2, h: 2, x: 4, y: 1, i: "5" },
],
xl: [
{ w: 3, h: 1, x: 0, y: 0, i: "1" },
{ w: 3, h: 1, x: 3, y: 0, i: "2" },
{ w: 3, h: 1, x: 6, y: 0, i: "3" },
{ w: 6, h: 1, x: 0, y: 1, i: "4" },
{ w: 3, h: 2, x: 6, y: 1, i: "5" },
],
"2xl": [
{ w: 3, h: 1, x: 0, y: 0, i: "1" },
{ w: 3, h: 1, x: 3, y: 0, i: "2" },
{ w: 3, h: 2, x: 9, y: 0, i: "3" },
{ w: 9, h: 1, x: 0, y: 1, i: "4" },
{ w: 3, h: 1, x: 6, y: 0, i: "5" },
],
}{
xs: [
{ w: 1, h: 1, x: 0, y: 0, i: "1" },
{ w: 1, h: 1, x: 0, y: 1, i: "2" },
{ w: 1, h: 1, x: 0, y: 2, i: "3" },
{ w: 1, h: 2, x: 0, y: 3, i: "4" },
{ w: 1, h: 2, x: 0, y: 5, i: "5" },
],
sm: [
{ w: 1, h: 1, x: 0, y: 0, i: "1" },
{ w: 1, h: 1, x: 1, y: 0, i: "2" },
{ w: 1, h: 1, x: 0, y: 1, i: "3" },
{ w: 2, h: 1, x: 0, y: 2, i: "4" },
{ w: 1, h: 1, x: 1, y: 1, i: "5" },
],
md: [
{ w: 1, h: 1, x: 0, y: 0, i: "1" },
{ w: 1, h: 1, x: 1, y: 0, i: "2" },
{ w: 1, h: 1, x: 2, y: 0, i: "3" },
{ w: 2, h: 1, x: 0, y: 1, i: "4" },
{ w: 1, h: 2, x: 2, y: 1, i: "5" },
],
lg: [
{ w: 2, h: 1, x: 0, y: 0, i: "1" },
{ w: 2, h: 1, x: 2, y: 0, i: "2" },
{ w: 2, h: 1, x: 4, y: 0, i: "3" },
{ w: 4, h: 1, x: 0, y: 1, i: "4" },
{ w: 2, h: 2, x: 4, y: 1, i: "5" },
],
xl: [
{ w: 3, h: 1, x: 0, y: 0, i: "1" },
{ w: 3, h: 1, x: 3, y: 0, i: "2" },
{ w: 3, h: 1, x: 6, y: 0, i: "3" },
{ w: 6, h: 1, x: 0, y: 1, i: "4" },
{ w: 3, h: 2, x: 6, y: 1, i: "5" },
],
"2xl": [
{ w: 3, h: 1, x: 0, y: 0, i: "1" },
{ w: 3, h: 1, x: 3, y: 0, i: "2" },
{ w: 3, h: 2, x: 9, y: 0, i: "3" },
{ w: 9, h: 1, x: 0, y: 1, i: "4" },
{ w: 3, h: 1, x: 6, y: 0, i: "5" },
],
}
