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

React component library

import { jsxs as c, jsx as o } from "react/jsx-runtime";
import { forwardRef as j } from "react";
import { P as i } from "./index-S5Cd7WrG.js";
import { n as t } from "./emotion-styled.browser.esm-CjCaF13H.js";
import y from "./Icon.js";
import M from "./ProgressBar.js";
import { b as O, c as C } from "./utils-DtRLzzTZ.js";
import { u as R } 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"
}, W = t.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]};
`, E = t.div`
  color: ${(e) => O(
  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;
`, G = t.div`
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

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

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