@situaction/traq-ui-ste 1.2.13 → 1.2.15

package/dist/components/drag-and-drop/DragAndDrop.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+
+export type DragAndDropErrorCode = "FILE_TOO_LARGE" | "FILE_TYPE_NOT_ALLOWED";
+export type DragAndDropError = {
+    /** Stable code to translate on the consumer side (i18n) */
+    code: DragAndDropErrorCode;
+    /** Optional dynamic values to build a translated message */
+    meta?: {
+        maxSizeLabel?: string;
+        maxBytes?: number | null;
+        receivedBytes?: number;
+        accept?: string;
+        fileName?: string;
+        fileType?: string;
+    };
+};
+export interface DragAndDropProps {
+    /** Maximum allowed file size (display + validation). Example: "10 Mo", "500 Ko", "1 Go". */
+    sizeFile: string;
+    /** Accepted file types (input accept format). Example: "image/*,.pdf" or "application/pdf,.pdf". */
+    typeFile: string;
+    /** Content rendered inside the dropzone (icon, title, hint, etc.). */
+    children: ReactNode;
+    /** Called when a file is successfully selected/dropped and validated. */
+    onFile: (file: File) => void;
+    /** Optional fixed width for the dropzone container (CSS value). Example: "420px", "100%". */
+    width?: string;
+    /** Called when validation fails (size/type). Translate outside using error.code + error.meta. */
+    onError?: (error: DragAndDropError) => void;
+}
+export declare const DragAndDrop: ({ sizeFile, typeFile, children, onFile, onError, width }: DragAndDropProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/drag-and-drop/DragAndDrop.js

@@ -0,0 +1,143 @@
+import { jsx as y, jsxs as k } from "react/jsx-runtime";
+import { useId as x, useRef as O, useState as j, useMemo as w, useCallback as r } from "react";
+import '../../styles/DragAndDrop.css';const C = "_dropzone_jj8g2_30", I = "_dropzoneActive_jj8g2_48", E = "_input_jj8g2_53", h = {
+  dropzone: C,
+  dropzoneActive: I,
+  input: E
+}, P = (n) => {
+  const a = n.trim().replace(",", ".").match(/^(\d+(?:\.\d+)?)\s*([a-zA-Z]+)$/);
+  if (!a) return null;
+  const i = Number(a[1]), t = a[2].toLowerCase();
+  if (Number.isNaN(i)) return null;
+  const o = {
+    b: 1,
+    ko: 1024,
+    kb: 1e3,
+    mo: 1024 ** 2,
+    mb: 1e3 ** 2,
+    go: 1024 ** 3,
+    gb: 1e3 ** 3,
+    mib: 1024 ** 2,
+    gib: 1024 ** 3
+  };
+  return o[t] ? Math.round(i * o[t]) : null;
+}, W = (n, u) => {
+  const a = u.split(",").map((o) => o.trim()).filter(Boolean);
+  if (a.length === 0) return !0;
+  const i = n.name.toLowerCase(), t = (n.type || "").toLowerCase();
+  return a.some((o) => {
+    const s = o.toLowerCase();
+    if (s.startsWith(".")) return i.endsWith(s);
+    if (s.endsWith("/*")) {
+      const d = s.slice(0, s.indexOf("/"));
+      return t.startsWith(d + "/");
+    }
+    return t === s;
+  });
+}, S = ({
+  sizeFile: n,
+  typeFile: u,
+  children: a,
+  onFile: i,
+  onError: t,
+  width: o = "auto"
+}) => {
+  const s = x(), d = O(null), [b, g] = j(!1), f = w(() => P(n), [n]), p = u ?? "", v = r(
+    (e) => {
+      t == null || t(e);
+    },
+    [t]
+  ), D = r(() => {
+    var e;
+    (e = d.current) == null || e.click();
+  }, []), m = r(
+    (e) => {
+      if (f != null && e.size > f) {
+        v({
+          code: "FILE_TOO_LARGE",
+          meta: {
+            maxSizeLabel: n,
+            maxBytes: f,
+            receivedBytes: e.size,
+            fileName: e.name,
+            fileType: e.type
+          }
+        });
+        return;
+      }
+      if (p.trim() && !W(e, p)) {
+        v({
+          code: "FILE_TYPE_NOT_ALLOWED",
+          meta: {
+            accept: p,
+            fileName: e.name,
+            fileType: e.type
+          }
+        });
+        return;
+      }
+      i(e);
+    },
+    [v, f, i, p, n]
+  ), _ = r(
+    (e) => {
+      var l;
+      e.preventDefault(), e.stopPropagation(), g(!1);
+      const c = (l = e.dataTransfer.files) == null ? void 0 : l[0];
+      c && m(c);
+    },
+    [m]
+  ), L = r((e) => {
+    e.preventDefault(), e.stopPropagation(), e.dataTransfer.dropEffect = "copy";
+  }, []), T = r((e) => {
+    e.preventDefault(), e.stopPropagation(), g(!0);
+  }, []), z = r((e) => {
+    e.preventDefault(), e.stopPropagation();
+    const c = e.relatedTarget;
+    c && e.currentTarget.contains(c) || g(!1);
+  }, []), A = r(
+    (e) => {
+      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), D());
+    },
+    [D]
+  ), N = r(
+    (e) => {
+      var l;
+      const c = (l = e.target.files) == null ? void 0 : l[0];
+      c && (m(c), e.target.value = "");
+    },
+    [m]
+  );
+  return /* @__PURE__ */ y("div", { style: { width: o }, children: /* @__PURE__ */ k(
+    "div",
+    {
+      className: `${h.dropzone} ${b ? h.dropzoneActive : ""}`,
+      role: "button",
+      tabIndex: 0,
+      "aria-label": "Upload file",
+      onClick: D,
+      onKeyDown: A,
+      onDrop: _,
+      onDragOver: L,
+      onDragEnter: T,
+      onDragLeave: z,
+      children: [
+        a,
+        /* @__PURE__ */ y(
+          "input",
+          {
+            id: s,
+            ref: d,
+            className: h.input,
+            type: "file",
+            accept: p,
+            onChange: N
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  S as DragAndDrop
+};