@grafana/ui/dist/esm/components/EmptyState/EmptyState.mjs.map

Grafana Components Library

{"version":3,"file":"EmptyState.mjs","sources":["../../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { AriaRole, ReactNode } from 'react';\nimport * as React from 'react';\nimport SVG from 'react-inlinesvg';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Box } from '../Layout/Box/Box';\nimport { Stack } from '../Layout/Stack/Stack';\nimport { Text } from '../Text/Text';\n\nimport { GrotCTA } from './GrotCTA/GrotCTA';\nimport { GrotNotFound } from './GrotNotFound/GrotNotFound';\nimport GrotCompleted from './grot-completed.svg';\n\ninterface Props {\n  /**\n   * Provide a button to render below the message\n   */\n  button?: ReactNode;\n  hideImage?: boolean;\n  /**\n   * Override the default image for the variant\n   */\n  image?: ReactNode;\n  /**\n   * Message to display to the user\n   */\n  message: string;\n  /**\n   * Which variant to use. Affects the default image shown.\n   */\n  variant: 'call-to-action' | 'not-found' | 'completed';\n  /**\n   * Use to set `alert` when needed. See documentation for the use case\n   */\n  role?: AriaRole;\n}\n\n/**\n * The EmptyState component consists of a message and optionally an image, button, and additional information.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/information-emptystate--docs\n */\nexport const EmptyState = ({\n  button,\n  children,\n  image,\n  message,\n  hideImage = false,\n  variant,\n  role,\n}: React.PropsWithChildren<Props>) => {\n  const styles = useStyles2(getStyles);\n  const imageToShow = image ?? getDefaultImageForVariant(variant);\n\n  return (\n    <Box paddingY={4} display=\"flex\" direction=\"column\" alignItems=\"center\" role={role}>\n      <div className={styles.container}>\n        {!hideImage && imageToShow}\n        <Stack direction=\"column\" alignItems=\"center\">\n          <Text variant=\"h4\" textAlignment=\"center\">\n            {message}\n          </Text>\n          {children && (\n            <Text color=\"secondary\" textAlignment=\"center\">\n              {children}\n            </Text>\n          )}\n        </Stack>\n        {button}\n      </div>\n    </Box>\n  );\n};\n\nfunction getDefaultImageForVariant(variant: Props['variant']) {\n  switch (variant) {\n    case 'call-to-action': {\n      return <GrotCTA width={300} />;\n    }\n    case 'not-found': {\n      return <GrotNotFound width={300} />;\n    }\n    case 'completed': {\n      return <SVG src={GrotCompleted} width={300} />;\n    }\n    default: {\n      throw new Error(`Unknown variant: ${variant}`);\n    }\n  }\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  container: css({\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    gap: theme.spacing(4),\n    maxWidth: '600px',\n  }),\n});\n"],"names":[],"mappings":";;;;;;;;;;;;AA6CO,MAAM,aAAa,CAAC;AAAA,EACzB,MAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,OAAA;AAAA,EACA;AACF,CAAA,KAAsC;AACpC,EAAA,MAAM,MAAA,GAAS,WAAW,SAAS,CAAA;AACnC,EAAA,MAAM,WAAA,GAAc,KAAA,IAAA,IAAA,GAAA,KAAA,GAAS,yBAAA,CAA0B,OAAO,CAAA;AAE9D,EAAA,uBACE,GAAA,CAAC,GAAA,EAAA,EAAI,QAAA,EAAU,CAAA,EAAG,SAAQ,MAAA,EAAO,SAAA,EAAU,QAAA,EAAS,UAAA,EAAW,UAAS,IAAA,EACtE,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAO,SAAA,EACpB,QAAA,EAAA;AAAA,IAAA,CAAC,SAAA,IAAa,WAAA;AAAA,oBACf,IAAA,CAAC,KAAA,EAAA,EAAM,SAAA,EAAU,QAAA,EAAS,YAAW,QAAA,EACnC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,IAAA,EAAK,aAAA,EAAc,UAC9B,QAAA,EAAA,OAAA,EACH,CAAA;AAAA,MACC,4BACC,GAAA,CAAC,IAAA,EAAA,EAAK,OAAM,WAAA,EAAY,aAAA,EAAc,UACnC,QAAA,EACH;AAAA,KAAA,EAEJ,CAAA;AAAA,IACC;AAAA,GAAA,EACH,CAAA,EACF,CAAA;AAEJ;AAEA,SAAS,0BAA0B,OAAA,EAA2B;AAC5D,EAAA,QAAQ,OAAA;AAAS,IACf,KAAK,gBAAA,EAAkB;AACrB,MAAA,uBAAO,GAAA,CAAC,OAAA,EAAA,EAAQ,KAAA,EAAO,GAAA,EAAK,CAAA;AAAA,IAC9B;AAAA,IACA,KAAK,WAAA,EAAa;AAChB,MAAA,uBAAO,GAAA,CAAC,YAAA,EAAA,EAAa,KAAA,EAAO,GAAA,EAAK,CAAA;AAAA,IACnC;AAAA,IACA,KAAK,WAAA,EAAa;AAChB,MAAA,uBAAO,GAAA,CAAC,GAAA,EAAA,EAAI,GAAA,EAAK,aAAA,EAAe,OAAO,GAAA,EAAK,CAAA;AAAA,IAC9C;AAAA,IACA,SAAS;AACP,MAAA,MAAM,IAAI,KAAA,CAAM,CAAA,iBAAA,EAAoB,OAAO,CAAA,CAAE,CAAA;AAAA,IAC/C;AAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAA,MAA0B;AAAA,EAC3C,WAAW,GAAA,CAAI;AAAA,IACb,OAAA,EAAS,MAAA;AAAA,IACT,aAAA,EAAe,QAAA;AAAA,IACf,UAAA,EAAY,QAAA;AAAA,IACZ,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,IACpB,QAAA,EAAU;AAAA,GACX;AACH,CAAA,CAAA;;;;"}