@lanaco/lnc-react-ui/dist/UploadedFile.js

React component library

import { jsxs as a, jsx as t } from "react/jsx-runtime";
import { forwardRef as T } from "react";
import { s as o } from "./emotion-styled.browser.esm-DfbrHHed.js";
import p from "./Icon.js";
import b from "./ProgressBar.js";
import { c as S, d as y } from "./utils-BUdHa0nB.js";
import { u as O } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const z = {
  small: "1.5rem",
  medium: "1.75rem",
  large: "2rem"
}, w = {
  small: "2.25rem",
  medium: "2.5rem",
  large: "2.75rem"
}, R = o.div`
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  width: 100%;

  height: ${(e) => e.progress ? w[e.size] : z[e.size]};
  height: ${(e) => e.progress ? w[e.size] : z[e.size]};
`, W = o.div`
  color: ${(e) => S(
  e.theme,
  "UploadedFile",
  e.color,
  "enabled",
  "color"
)};

  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  min-width: 0;
  flex-shrink: 1;
  min-height: 0;
`, E = o.div`
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  ${(e) => y(
  e.theme,
  "UploadedFile",
  e.size,
  "enabled"
)};
`, G = o.span`
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ${(e) => e.onCancel ? "pointer" : "default"};
`, K = o.span`
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: ${(e) => e.hasOnClick ? "pointer" : "default"};

  ${(e) => y(
  e.theme,
  "UploadedFile",
  e.size,
  "enabled"
)};
`, L = T((e, C) => {
  const {
    id: x,
    fileName: n = "file",
    fileSize: m = null,
    showFileSize: B = !1,
    progressPercentage: i,
    onFileClick: s = () => {
    },
    onCancel: c = () => {
    },
    size: F = "small",
    color: v = "primary",
    className: $ = "",
    style: k = {},
    fileIcon: P = "file",
    cancelIcon: U = "times",
    ...d
  } = e;
  var l = {
    theme: O(),
    size: F,
    color: v,
    progress: i && i > 0
  };
  const I = () => n && m && B ? `${n} (${M(m, 2)})` : n || "";
  function M(r, h = 2) {
    if (r === 0) return "0 Bytes";
    const u = 1024, N = h < 0 ? 0 : h, j = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"], g = Math.floor(Math.log(r) / Math.log(u));
    return parseFloat((r / Math.pow(u, g)).toFixed(N)) + " " + j[g];
  }
  const f = {
    small: "1rem",
    medium: "1.25rem",
    large: "1.5rem"
  };
  return /* @__PURE__ */ a(
    R,
    {
      ref: C,
      id: x,
      ...l,
      className: "lnc-ui-uploaded-file " + $,
      style: k,
      ...d,
      children: [
        /* @__PURE__ */ t(
          p,
          {
            ...l,
            icon: P,
            sizeInUnits: f[e.size],
            style: { cursor: s ? "pointer" : "default" },
            onClick: (r) => s ? s(r) : null
          }
        ),
        /* @__PURE__ */ a(W, { ...l, children: [
          /* @__PURE__ */ a(E, { ...l, children: [
            /* @__PURE__ */ t(
              K,
              {
                ...l,
                hasOnClick: !!s,
                onClick: (r) => s ? s(r) : null,
                children: I()
              }
            ),
            i && /* @__PURE__ */ a("div", { children: [
              i,
              "%"
            ] })
          ] }),
          (i || i == 0) && /* @__PURE__ */ t(
            b,
            {
              progressPercentage: i,
              style: { height: "0.5rem" },
              ...l
            }
          )
        ] }),
        /* @__PURE__ */ t(G, { onCancel: c, onClick: c || null, children: /* @__PURE__ */ t(
          p,
          {
            ...l,
            icon: U,
            sizeInUnits: f[e.size],
            ...d
          }
        ) })
      ]
    }
  );
});
export {
  L as default
};