@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\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":";;;;;;;;;;;AAwCO,MAAM,aAAa,CAAC;AAAA,EACzB,MAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAY,GAAA,KAAA;AAAA,EACZ,OAAA;AAAA,EACA;AACF,CAAsC,KAAA;AACpC,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AACnC,EAAM,MAAA,WAAA,GAAc,KAAS,IAAA,IAAA,GAAA,KAAA,GAAA,yBAAA,CAA0B,OAAO,CAAA;AAE9D,EAAA,uBACG,GAAA,CAAA,GAAA,EAAA,EAAI,QAAU,EAAA,CAAA,EAAG,SAAQ,MAAO,EAAA,SAAA,EAAU,QAAS,EAAA,UAAA,EAAW,UAAS,IACtE,EAAA,QAAA,kBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,OAAO,SACpB,EAAA,QAAA,EAAA;AAAA,IAAA,CAAC,SAAa,IAAA,WAAA;AAAA,oBACd,IAAA,CAAA,KAAA,EAAA,EAAM,SAAU,EAAA,QAAA,EAAS,YAAW,QACnC,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,IAAK,EAAA,aAAA,EAAc,UAC9B,QACH,EAAA,OAAA,EAAA,CAAA;AAAA,MACC,4BACE,GAAA,CAAA,IAAA,EAAA,EAAK,OAAM,WAAY,EAAA,aAAA,EAAc,UACnC,QACH,EAAA;AAAA,KAEJ,EAAA,CAAA;AAAA,IACC;AAAA,GAAA,EACH,CACF,EAAA,CAAA;AAEJ;AAEA,SAAS,0BAA0B,OAA2B,EAAA;AAC5D,EAAA,QAAQ,OAAS;AAAA,IACf,KAAK,gBAAkB,EAAA;AACrB,MAAO,uBAAA,GAAA,CAAC,OAAQ,EAAA,EAAA,KAAA,EAAO,GAAK,EAAA,CAAA;AAAA;AAC9B,IACA,KAAK,WAAa,EAAA;AAChB,MAAO,uBAAA,GAAA,CAAC,YAAa,EAAA,EAAA,KAAA,EAAO,GAAK,EAAA,CAAA;AAAA;AACnC,IACA,KAAK,WAAa,EAAA;AAChB,MAAA,uBAAQ,GAAA,CAAA,GAAA,EAAA,EAAI,GAAK,EAAA,aAAA,EAAe,OAAO,GAAK,EAAA,CAAA;AAAA;AAC9C,IACA,SAAS;AACP,MAAA,MAAM,IAAI,KAAA,CAAM,CAAoB,iBAAA,EAAA,OAAO,CAAE,CAAA,CAAA;AAAA;AAC/C;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAA0B,MAAA;AAAA,EAC3C,WAAW,GAAI,CAAA;AAAA,IACb,OAAS,EAAA,MAAA;AAAA,IACT,aAAe,EAAA,QAAA;AAAA,IACf,UAAY,EAAA,QAAA;AAAA,IACZ,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IACpB,QAAU,EAAA;AAAA,GACX;AACH,CAAA,CAAA;;;;"}