@grafana/ui/dist/esm/components/Layout/utils/responsiveness.mjs.map

Grafana Components Library

{"version":3,"file":"responsiveness.mjs","sources":["../../../../../src/components/Layout/utils/responsiveness.tsx"],"sourcesContent":["import { CSSInterpolation } from '@emotion/serialize';\n\nimport { GrafanaTheme2, ThemeBreakpointsKey } from '@grafana/data';\n\n/**\n * Type that represents a prop that can be responsive.\n *\n * @example To turn a prop like `margin: number` responsive, change it to `margin: ResponsiveProp<number>`.\n */\nexport type ResponsiveProp<T> = T | Responsive<T>;\n\ntype Responsive<T> = {\n  xs: T;\n  sm?: T;\n  md?: T;\n  lg?: T;\n  xl?: T;\n  xxl?: T;\n};\n\nfunction breakpointCSS<T>(\n  theme: GrafanaTheme2,\n  prop: Responsive<T>,\n  getCSS: (val: T) => CSSInterpolation,\n  key: ThemeBreakpointsKey\n) {\n  const value = prop[key];\n  if (value !== undefined && value !== null) {\n    return {\n      [theme.breakpoints.up(key)]: getCSS(value),\n    };\n  }\n  return;\n}\n/**\n * Function that converts a ResponsiveProp object into CSS\n *\n * @param theme Grafana theme object\n * @param prop Prop as it is passed to the component\n * @param getCSS Function that returns the css block for the prop\n * @returns The CSS block repeated for each breakpoint\n *\n * @example To get the responsive css equivalent of `margin && { margin }`, you can write `getResponsiveStyle(theme, margin, (val) => { margin: val })`\n */\nexport function getResponsiveStyle<T>(\n  theme: GrafanaTheme2,\n  prop: ResponsiveProp<T> | undefined,\n  getCSS: (val: T) => CSSInterpolation\n): CSSInterpolation {\n  if (prop === undefined || prop === null) {\n    return null;\n  }\n  if (typeof prop !== 'object' || !('xs' in prop)) {\n    return getCSS(prop);\n  }\n\n  return [\n    breakpointCSS(theme, prop, getCSS, 'xs'),\n    breakpointCSS(theme, prop, getCSS, 'sm'),\n    breakpointCSS(theme, prop, getCSS, 'md'),\n    breakpointCSS(theme, prop, getCSS, 'lg'),\n    breakpointCSS(theme, prop, getCSS, 'xl'),\n    breakpointCSS(theme, prop, getCSS, 'xxl'),\n  ];\n}\n"],"names":[],"mappings":"AAoBA,SAAS,aACP,CAAA,KAAA,EACA,IACA,EAAA,MAAA,EACA,GACA,EAAA;AACA,EAAM,MAAA,KAAA,GAAQ,KAAK,GAAG,CAAA;AACtB,EAAI,IAAA,KAAA,KAAU,KAAa,CAAA,IAAA,KAAA,KAAU,IAAM,EAAA;AACzC,IAAO,OAAA;AAAA,MACL,CAAC,MAAM,WAAY,CAAA,EAAA,CAAG,GAAG,CAAC,GAAG,OAAO,KAAK;AAAA,KAC3C;AAAA;AAEF,EAAA;AACF;AAWgB,SAAA,kBAAA,CACd,KACA,EAAA,IAAA,EACA,MACkB,EAAA;AAClB,EAAI,IAAA,IAAA,KAAS,KAAa,CAAA,IAAA,IAAA,KAAS,IAAM,EAAA;AACvC,IAAO,OAAA,IAAA;AAAA;AAET,EAAA,IAAI,OAAO,IAAA,KAAS,QAAY,IAAA,EAAE,QAAQ,IAAO,CAAA,EAAA;AAC/C,IAAA,OAAO,OAAO,IAAI,CAAA;AAAA;AAGpB,EAAO,OAAA;AAAA,IACL,aAAc,CAAA,KAAA,EAAO,IAAM,EAAA,MAAA,EAAQ,IAAI,CAAA;AAAA,IACvC,aAAc,CAAA,KAAA,EAAO,IAAM,EAAA,MAAA,EAAQ,IAAI,CAAA;AAAA,IACvC,aAAc,CAAA,KAAA,EAAO,IAAM,EAAA,MAAA,EAAQ,IAAI,CAAA;AAAA,IACvC,aAAc,CAAA,KAAA,EAAO,IAAM,EAAA,MAAA,EAAQ,IAAI,CAAA;AAAA,IACvC,aAAc,CAAA,KAAA,EAAO,IAAM,EAAA,MAAA,EAAQ,IAAI,CAAA;AAAA,IACvC,aAAc,CAAA,KAAA,EAAO,IAAM,EAAA,MAAA,EAAQ,KAAK;AAAA,GAC1C;AACF;;;;"}