@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\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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"}