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

React component library

import { jsx as t, jsxs as B } from "react/jsx-runtime";
import { forwardRef as G, useState as M, useEffect as U, useCallback as p } from "react";
import { s as V } from "./emotion-styled.browser.esm-DfbrHHed.js";
import E from "./DragAndDropFile.js";
import P from "./UploadedFile.js";
import { c as W, b as q } from "./utils-BUdHa0nB.js";
import H from "./FlexGrid.js";
import h from "./FlexGridItem.js";
import { u as J } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const K = V.div`
  display: flex;
  flex-direction: column;
  gap: 1rem;

  border: ${(l) => `1px solid ${W(
  l.theme,
  "DragDropFiles",
  l.color,
  "enabled",
  "border"
)}`};
  border-radius: ${(l) => q(l.theme, "regular")};
  padding: 1.25rem 2.5rem;

  & .file-item-lnc {
    padding: 0.5rem 0.813rem;
    height: 100%;
  }
`, te = G((l, g) => {
  const {
    id: D = "",
    disabled: u = !1,
    preventDefault: x = !1,
    acceptDropzone: b = {},
    acceptInput: C,
    multiple: F = !0,
    selectFileText: z = "Select file",
    dndFileText: A = "Drag and drop file here or",
    control: R,
    showFileSize: s = !0,
    files: S = [],
    // ----------------------------------------
    onChange: d = () => {
    },
    onFocus: v = () => {
    },
    onBlur: w = () => {
    },
    onDropAccepted: c = () => {
    },
    onDrop: m = () => {
    },
    fileClick: y = () => {
    },
    onCancel: k = () => {
    },
    // ----------------------------------------
    color: a = "primary",
    size: n = "small",
    dragAndDropFileProps: I,
    uploadedFileProps: i,
    ...N
  } = l;
  var O = { theme: J(), size: n, color: a };
  const [r, f] = M([]);
  U(() => {
  }, [S]);
  const T = p((e, o) => {
    m && m(e, o);
  }, []), $ = p((e) => {
    c && c(e);
  }, []), j = (e) => {
    var o;
    (o = e.target) != null && o.files ? f([...r, ...e.target.files]) : e && f([...r, ...e]), d && d(e);
  };
  return /* @__PURE__ */ t(K, { ref: g, ...O, ...N, children: /* @__PURE__ */ B(H, { direction: "RowReverse", children: [
    /* @__PURE__ */ t(h, { M: (r == null ? void 0 : r.length) > 0 ? 6 : 12, children: /* @__PURE__ */ t(
      E,
      {
        id: D,
        disabled: u,
        preventDefault: x,
        acceptDropzone: b,
        acceptInput: C,
        multiple: F,
        selectFileText: z,
        dndFileText: A,
        control: R,
        showFileSize: s,
        showDnD: !((r == null ? void 0 : r.length) > 0),
        onChange: j,
        onFocus: v,
        onBlur: w,
        onDrop: T,
        onDropAccepted: $,
        color: a,
        size: n,
        ...I
      }
    ) }),
    r == null ? void 0 : r.map((e, o) => /* @__PURE__ */ t(h, { M: 6, children: /* @__PURE__ */ t(
      P,
      {
        fileName: e.name,
        fileSize: e.size,
        showFileSize: s,
        color: a,
        size: n,
        onFileClick: y,
        onCancel: k,
        ...i,
        className: "file-item-lnc " + (i == null ? void 0 : i.className)
      },
      o
    ) }, o))
  ] }) });
});
export {
  te as default
};