TTC
Theo's Typesafe Cult•4mo ago
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" },
]
[
  { 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" },
  ],
}
1 Reply
Gary, el Pingüino Artefacto
Gary, el Pingüino Artefacto•4mo ago
The is to calculate the height and the width based on the type. For example: simple-value uses 1 row and 1 column on xs. On sm uses 1 row and 2 columns. And on large viewports it uses 1/3 of the total columns and 1 row. Tables use 100% of the columns but on larger viewports, uses 2/3 of the columns. Finally, lists use 100% of the columns but on larger, use 1/3 and always 2 rows. Before coding the logic, I prefer to ask if there is an exists function to archive this Some like this maybe:
type Widget = {
  id: string
  type: "data" | "chart" | "list" | "table"
}

type Layout = {
  i: string
  x: number
  y: number
  w: number
  h: number
}

type Layouts = {
  xs: Layout[]
  sm: Layout[]
  md: Layout[]
  lg: Layout[]
  xl: Layout[]
  "2xl": Layout[]
}

export const widgetsToLayout = (widgets: Widget[]): Layouts => {
  // Magic here...
}
type Widget = {
  id: string
  type: "data" | "chart" | "list" | "table"
}

type Layout = {
  i: string
  x: number
  y: number
  w: number
  h: number
}

type Layouts = {
  xs: Layout[]
  sm: Layout[]
  md: Layout[]
  lg: Layout[]
  xl: Layout[]
  "2xl": Layout[]
}

export const widgetsToLayout = (widgets: Widget[]): Layouts => {
  // Magic here...
}
Want results from more Discord servers?
Add your server
More Posts
useSuspenseQuery will get "UNAUTHORIZED" tRPC errorI described the question in detail here: https://github.com/t3-oss/create-t3-app/issues/1765App router tRPC client side query not working with nextjs basePathHi, I'm using basePath option with nextJS, which can't be avoided for my project, and it appears toruntime environment variables with app routerI am currently tasked with preparing our application to run in multiple deployments on different serJson-server + Next.js 14 deploy to VercelHey Guys, Need help with deploying Next.js 14 app with json-server to vercel. I found some article How to call tRPC on the client?Hi, I have a new t3 app set up, however I can't seem to figure out how to call tRPC functions on thShadcn Toast not showing using useEffectHello. I am trying to render a shadcn toast after a redirect from a server action, but first, I needGenerate a dynamic zod schema for a user created formIf a user is creating a form we output this: ```{ "sections": [ { "id": "8fNot understanding best practicesHey, I am having a bit of trouble with my app. Here is the list: 1. Any time I do any basic crud opInput components for log searching / multiselectDoes anyone know of any good or just know of some libraries outside of react-select that could help DJANGO HELP!!!!!!Can I create a django app with SQL and angular as frontend the er diagram is shown . SQL not SQL lit