{"version":3,"file":"FileListItem.cjs","sources":["../../../../src/components/FileDropzone/FileListItem.tsx"],"sourcesContent":["import { css } from '@emotion/css';\n\nimport { formattedValueToString, getValueFormat, GrafanaTheme2 } from '@grafana/data';\nimport { t, Trans } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { trimFileName } from '../../utils/file';\nimport { Button } from '../Button/Button';\nimport { Icon } from '../Icon/Icon';\nimport { IconButton } from '../IconButton/IconButton';\n\nimport { DropzoneFile } from './FileDropzone';\n\nexport const REMOVE_FILE = 'Remove file';\nexport interface FileListItemProps {\n  file: DropzoneFile;\n  removeFile?: (file: DropzoneFile) => void;\n}\n\n/**\n * A FileListItem component used for the FileDropzone component to show uploaded files.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-filelistitem--docs\n */\nexport function FileListItem({ file: customFile, removeFile }: FileListItemProps) {\n  const styles = useStyles2(getStyles);\n  const { file, progress, error, abortUpload, retryUpload } = customFile;\n\n  const renderRightSide = () => {\n    if (error) {\n      return (\n        <>\n          <span className={styles.error}>{error.message}</span>\n          {retryUpload && (\n            <IconButton\n              name=\"sync\"\n              tooltip={t('grafana-ui.file-dropzone.item-retry', 'Retry')}\n              tooltipPlacement=\"top\"\n              onClick={retryUpload}\n            />\n          )}\n          {removeFile && (\n            <IconButton\n              className={retryUpload ? styles.marginLeft : ''}\n              name=\"trash-alt\"\n              onClick={() => removeFile(customFile)}\n              tooltip={REMOVE_FILE}\n            />\n          )}\n        </>\n      );\n    }\n\n    if (progress && file.size > progress) {\n      return (\n        <>\n          <progress className={styles.progressBar} max={file.size} value={progress} />\n          <span className={styles.paddingLeft}>\n            {Math.round((progress / file.size) * 100)}\n            {'%'}\n          </span>\n          {abortUpload && (\n            <Button variant=\"secondary\" type=\"button\" fill=\"text\" onClick={abortUpload}>\n              <Trans i18nKey=\"grafana-ui.file-dropzone.cancel-upload\">Cancel upload</Trans>\n            </Button>\n          )}\n        </>\n      );\n    }\n    return (\n      removeFile && (\n        <IconButton\n          name=\"trash-alt\"\n          onClick={() => removeFile(customFile)}\n          tooltip={REMOVE_FILE}\n          tooltipPlacement=\"top\"\n        />\n      )\n    );\n  };\n\n  const valueFormat = getValueFormat('decbytes')(file.size);\n\n  return (\n    <div className={styles.fileListContainer}>\n      <span className={styles.fileNameWrapper}>\n        <Icon name=\"file-blank\" size=\"lg\" aria-hidden={true} />\n        <span className={styles.padding}>{trimFileName(file.name)}</span>\n        <span>{formattedValueToString(valueFormat)}</span>\n      </span>\n\n      <div className={styles.fileNameWrapper}>{renderRightSide()}</div>\n    </div>\n  );\n}\n\nfunction getStyles(theme: GrafanaTheme2) {\n  return {\n    fileListContainer: css({\n      width: '100%',\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      padding: theme.spacing(2),\n      border: `1px dashed ${theme.colors.border.medium}`,\n      backgroundColor: `${theme.colors.background.secondary}`,\n      marginTop: theme.spacing(1),\n    }),\n    fileNameWrapper: css({\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n    }),\n    padding: css({\n      padding: theme.spacing(0, 1),\n    }),\n    paddingLeft: css({\n      paddingLeft: theme.spacing(2),\n    }),\n    marginLeft: css({\n      marginLeft: theme.spacing(1),\n    }),\n    error: css({\n      paddingRight: theme.spacing(2),\n      color: theme.colors.error.text,\n    }),\n    progressBar: css({\n      borderRadius: theme.shape.radius.default,\n      height: '4px',\n      '::-webkit-progress-bar': {\n        backgroundColor: theme.colors.border.weak,\n        borderRadius: theme.shape.radius.default,\n      },\n      '::-webkit-progress-value': {\n        backgroundColor: theme.colors.primary.main,\n        borderRadius: theme.shape.radius.default,\n      },\n    }),\n  };\n}\n"],"names":["useStyles2","file","jsxs","Fragment","jsx","IconButton","t","Button","Trans","getValueFormat","Icon","trimFileName","formattedValueToString","css"],"mappings":"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"}