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

React component library

import { jsx as t, jsxs as $ } from "react/jsx-runtime";
import { forwardRef as G, useState as M, useEffect as U, useCallback as u } from "react";
import { P as e } from "./index-S5Cd7WrG.js";
import { n as V } from "./emotion-styled.browser.esm-CjCaF13H.js";
import E from "./DragAndDropFile.js";
import W from "./UploadedFile.js";
import { b as q, a as H } from "./utils-DtRLzzTZ.js";
import J from "./FlexGrid.js";
import h from "./FlexGridItem.js";
import { u as K } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const L = V.div`
  display: flex;
  flex-direction: column;
  gap: 1rem;

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

  & .file-item-lnc {
    padding: 0.5rem 0.813rem;
    height: 100%;
  }
`, Q = G((n, D) => {
  const {
    id: y = "",
    disabled: b = !1,
    preventDefault: F = !1,
    acceptDropzone: x = {},
    acceptInput: C,
    multiple: z = !0,
    selectFileText: T = "Select file",
    dndFileText: w = "Drag and drop file here or",
    control: A,
    showFileSize: d = !0,
    files: p = [],
    // ----------------------------------------
    onChange: m = () => {
    },
    onFocus: S = () => {
    },
    onBlur: O = () => {
    },
    onDropAccepted: f = () => {
    },
    onDrop: g = () => {
    },
    fileClick: v = () => {
    },
    onCancel: N = () => {
    },
    // ----------------------------------------
    className: X = "",
    style: Y = {},
    color: i = "primary",
    size: s = "small",
    dragAndDropFileProps: P,
    uploadedFileProps: a,
    ...R
  } = n;
  var j = { theme: K(), size: s, color: i };
  const [r, c] = M([]);
  U(() => {
    c(p);
  }, [p]);
  const k = u((o, l) => {
    g && g(o, l);
  }, []), I = u((o) => {
    f && f(o);
  }, []), B = (o) => {
    var l;
    (l = o.target) != null && l.files ? c([...r, ...o.target.files]) : o && c([...r, ...o]), m && m(o);
  };
  return /* @__PURE__ */ t(L, { ref: D, ...j, ...R, children: /* @__PURE__ */ $(J, { direction: "RowReverse", children: [
    /* @__PURE__ */ t(h, { M: (r == null ? void 0 : r.length) > 0 ? 6 : 12, children: /* @__PURE__ */ t(
      E,
      {
        id: y,
        disabled: b,
        preventDefault: F,
        acceptDropzone: x,
        acceptInput: C,
        multiple: z,
        selectFileText: T,
        dndFileText: w,
        control: A,
        showFileSize: d,
        showDnD: !((r == null ? void 0 : r.length) > 0),
        onChange: B,
        onFocus: S,
        onBlur: O,
        onDrop: k,
        onDropAccepted: I,
        color: i,
        size: s,
        ...P
      }
    ) }),
    r == null ? void 0 : r.map((o, l) => /* @__PURE__ */ t(h, { M: 6, children: /* @__PURE__ */ t(
      W,
      {
        fileName: o.name,
        fileSize: o.size,
        showFileSize: d,
        color: i,
        size: s,
        onFileClick: v,
        onCancel: N,
        ...a,
        className: "file-item-lnc " + (a == null ? void 0 : a.className)
      },
      l
    ) }, l))
  ] }) });
});
Q.propTypes = {
  id: e.any,
  disabled: e.bool,
  preventDefault: e.bool,
  /**
   * Type of: { \[key: string]: string[] }
   *
   * Ex: {
   *
   *   'image/png': ['.png'],
   *
   *   'text/html': ['.html', '.htm']
   *
   * }
   */
  acceptDropzone: e.object,
  acceptInput: e.string,
  multiple: e.bool,
  selectFileText: e.string,
  dndFileText: e.oneOfType([e.string, e.element]),
  /**
   * Custom control which opens file explorer on click
   */
  control: e.element,
  showFileSize: e.bool,
  files: e.array,
  //-------------------------
  onChange: e.func,
  onFocus: e.func,
  onBlur: e.func,
  onDropAccepted: e.func,
  onDrop: e.func,
  fileClick: e.func,
  onCancel: e.func,
  //-------------------------
  className: e.string,
  style: e.object,
  size: e.oneOf(["small", "medium", "large"]),
  color: e.oneOf([
    "primary",
    "secondary",
    "success",
    "danger",
    "warning",
    "information",
    "neutral",
    "gray"
  ]),
  dragAndDropFileProps: e.any,
  uploadedFileProps: e.any
};
export {
  Q as default
};