@grafana/ui/dist/esm/components/FileDropzone/FileListItem.mjs.map

Grafana Components Library

{"version":3,"file":"FileListItem.mjs","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":[],"mappings":"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"}