@grafana/ui/dist/cjs/components/FileDropzone/FileListItem.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var data = require('@grafana/data');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var file = require('../../utils/file.cjs');
var Button = require('../Button/Button.cjs');
var Icon = require('../Icon/Icon.cjs');
var IconButton = require('../IconButton/IconButton.cjs');

"use strict";
const REMOVE_FILE = "Remove file";
function FileListItem({ file: customFile, removeFile }) {
  const styles = ThemeContext.useStyles2(getStyles);
  const { file: file$1, progress, error, abortUpload, retryUpload } = customFile;
  const renderRightSide = () => {
    if (error) {
      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.error, children: error.message }),
        retryUpload && /* @__PURE__ */ jsxRuntime.jsx(
          IconButton.IconButton,
          {
            name: "sync",
            tooltip: i18n.t("grafana-ui.file-dropzone.item-retry", "Retry"),
            tooltipPlacement: "top",
            onClick: retryUpload
          }
        ),
        removeFile && /* @__PURE__ */ jsxRuntime.jsx(
          IconButton.IconButton,
          {
            className: retryUpload ? styles.marginLeft : "",
            name: "trash-alt",
            onClick: () => removeFile(customFile),
            tooltip: REMOVE_FILE
          }
        )
      ] });
    }
    if (progress && file$1.size > progress) {
      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
        /* @__PURE__ */ jsxRuntime.jsx("progress", { className: styles.progressBar, max: file$1.size, value: progress }),
        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.paddingLeft, children: [
          Math.round(progress / file$1.size * 100),
          "%"
        ] }),
        abortUpload && /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "secondary", type: "button", fill: "text", onClick: abortUpload, children: /* @__PURE__ */ jsxRuntime.jsx(i18n.Trans, { i18nKey: "grafana-ui.file-dropzone.cancel-upload", children: "Cancel upload" }) })
      ] });
    }
    return removeFile && /* @__PURE__ */ jsxRuntime.jsx(
      IconButton.IconButton,
      {
        name: "trash-alt",
        onClick: () => removeFile(customFile),
        tooltip: REMOVE_FILE,
        tooltipPlacement: "top"
      }
    );
  };
  const valueFormat = data.getValueFormat("decbytes")(file$1.size);
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.fileListContainer, children: [
    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.fileNameWrapper, children: [
      /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "file-blank", size: "lg", "aria-hidden": true }),
      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.padding, children: file.trimFileName(file$1.name) }),
      /* @__PURE__ */ jsxRuntime.jsx("span", { children: data.formattedValueToString(valueFormat) })
    ] }),
    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.fileNameWrapper, children: renderRightSide() })
  ] });
}
function getStyles(theme) {
  return {
    fileListContainer: css.css({
      width: "100%",
      display: "flex",
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "space-between",
      padding: theme.spacing(2),
      border: `1px dashed ${theme.colors.border.medium}`,
      backgroundColor: `${theme.colors.background.secondary}`,
      marginTop: theme.spacing(1)
    }),
    fileNameWrapper: css.css({
      display: "flex",
      flexDirection: "row",
      alignItems: "center"
    }),
    padding: css.css({
      padding: theme.spacing(0, 1)
    }),
    paddingLeft: css.css({
      paddingLeft: theme.spacing(2)
    }),
    marginLeft: css.css({
      marginLeft: theme.spacing(1)
    }),
    error: css.css({
      paddingRight: theme.spacing(2),
      color: theme.colors.error.text
    }),
    progressBar: css.css({
      borderRadius: theme.shape.radius.default,
      height: "4px",
      "::-webkit-progress-bar": {
        backgroundColor: theme.colors.border.weak,
        borderRadius: theme.shape.radius.default
      },
      "::-webkit-progress-value": {
        backgroundColor: theme.colors.primary.main,
        borderRadius: theme.shape.radius.default
      }
    })
  };
}

exports.FileListItem = FileListItem;
exports.REMOVE_FILE = REMOVE_FILE;
//# sourceMappingURL=FileListItem.cjs.map