Theo's Typesafe CultTTC
Theo's Typesafe Cult•2y ago•
4 replies
Gary, el Pingüino Artefacto

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: 
[
  { 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" },
  ],
}
Was this page helpful?