@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,aAAA,CACP,KAAA,EACA,IAAA,EACA,MAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,KAAA,GAAQ,KAAK,GAAG,CAAA;AACtB,EAAA,IAAI,KAAA,KAAU,KAAA,CAAA,IAAa,KAAA,KAAU,IAAA,EAAM;AACzC,IAAA,OAAO;AAAA,MACL,CAAC,MAAM,WAAA,CAAY,EAAA,CAAG,GAAG,CAAC,GAAG,OAAO,KAAK;AAAA,KAC3C;AAAA,EACF;AACA,EAAA;AACF;AAWO,SAAS,kBAAA,CACd,KAAA,EACA,IAAA,EACA,MAAA,EACkB;AAClB,EAAA,IAAI,IAAA,KAAS,KAAA,CAAA,IAAa,IAAA,KAAS,IAAA,EAAM;AACvC,IAAA,OAAO,IAAA;AAAA,EACT;AACA,EAAA,IAAI,OAAO,IAAA,KAAS,QAAA,IAAY,EAAE,QAAQ,IAAA,CAAA,EAAO;AAC/C,IAAA,OAAO,OAAO,IAAI,CAAA;AAAA,EACpB;AAEA,EAAA,OAAO;AAAA,IACL,aAAA,CAAc,KAAA,EAAO,IAAA,EAAM,MAAA,EAAQ,IAAI,CAAA;AAAA,IACvC,aAAA,CAAc,KAAA,EAAO,IAAA,EAAM,MAAA,EAAQ,IAAI,CAAA;AAAA,IACvC,aAAA,CAAc,KAAA,EAAO,IAAA,EAAM,MAAA,EAAQ,IAAI,CAAA;AAAA,IACvC,aAAA,CAAc,KAAA,EAAO,IAAA,EAAM,MAAA,EAAQ,IAAI,CAAA;AAAA,IACvC,aAAA,CAAc,KAAA,EAAO,IAAA,EAAM,MAAA,EAAQ,IAAI,CAAA;AAAA,IACvC,aAAA,CAAc,KAAA,EAAO,IAAA,EAAM,MAAA,EAAQ,KAAK;AAAA,GAC1C;AACF;;;;"}