@kingteza/crud-component 1.23.1 → 1.25.0

package/dist/crud/FileCrudDragNDropField.cjs.js

@@ -0,0 +1 @@
+"use strict";const s=require("react/jsx-runtime"),c=require("@ant-design/icons"),f=require("antd"),L=require("mime"),o=require("react"),Z=require("../util/ValidationUtil.cjs.js"),{Dragger:_}=f.Upload;function G({name:S,label:M,required:N,provider:a,onUploading:m,onRemoved:p,fieldClassName:W,accept:i,rules:k,maxCount:r=1,block:B,showInGrid:$=!1,gridConfig:q={draggerSpan:12,previewSpan:12},fieldHelper:R,formLayoutProps:C,...I}){const u=f.Form.useFormInstance(),n=o.useMemo(()=>S,[S]),y=f.Form.useWatch(n,u),[A,H]=o.useState(!1),[j,h]=o.useState([]),T=o.useCallback(async e=>{var x,w;const l=e.file,t=(l==null?void 0:l.name)??"",d=`${Date.now()}-${Math.random().toString(36).substring(2,9)}`;h(F=>[...F,{uid:d,name:t,status:"uploading",originFileObj:l}]);try{H(!0),m==null||m(!0);const F=t??"",V=F.split("."),O=V[V.length-1],Q=a.generateFileName(F),X=`${await a.getInitialPath()}/${Q}.${O}`,g=await a.upload({...l,originFileObj:l},X),D=await a.getRealUrl(g),Y=L.getType(g),P=u.getFieldValue(n);if(r>1){const b=[...Array.isArray(P)?P:P?[P]:[],g].filter(Boolean);u.setFieldValue(n,b)}else u.setFieldValue(n,g);h(E=>E.map(b=>b.uid===d?{uid:g,url:D,type:Y,name:F,status:"done",response:g,thumbUrl:D}:b)),(x=e.onSuccess)==null||x.call(e,g)}catch(F){(w=e.onError)==null||w.call(e,F),h(V=>V.filter(O=>O.uid!==d))}finally{m==null||m(!1)}},[u,r,m,a,n]);o.useEffect(()=>{!A&&y&&Promise.all((Array.isArray(y)?y:[y]).map(async e=>{const l=L.getType(e),t=e.split("/").pop(),d=await a.getRealUrl(e);return{uid:e,url:d,type:l,name:t,response:e,thumbUrl:d}})).then(e=>h(e))},[y,A,a]);const z=o.useCallback(async e=>{const l=e.response??e.uid;await a.delete(l),p==null||p();const t=u.getFieldValue(n);if(r>1){const x=(Array.isArray(t)?t:t?[t]:[]).filter(w=>w!==l);u.setFieldValue(n,x.length?x:void 0)}else u.setFieldValue(n,void 0);h(d=>d.filter(x=>x.uid!==e.uid))},[u,r,p,a,n]),U=o.useMemo(()=>{if(!i)return"all files";const e=i.split(",").map(l=>{const t=l.trim().toLowerCase();return t.startsWith("image/")?"images":t===".pdf"||t==="application/pdf"?"PDF files":t.includes("excel")||t.includes(".xls")?"Excel files":t.includes("word")||t.includes(".doc")?"Word files":t.includes("text")||t===".txt"?"text files":t.includes("presentation")||t.includes(".ppt")?"PowerPoint files":t.replace(".","").toUpperCase()});return[...new Set(e)].join(", ")},[i]),J=o.useMemo(()=>i?i.includes("image")?s.jsx(c.FileImageOutlined,{}):i.includes("pdf")?s.jsx(c.FilePdfOutlined,{}):i.includes("word")||i.includes(".doc")?s.jsx(c.FileWordOutlined,{}):i.includes("text")||i.includes(".txt")?s.jsx(c.FileTextOutlined,{}):i.includes("excel")||i.includes(".xls")?s.jsx(c.FileExcelOutlined,{}):i.includes("presentation")||i.includes(".ppt")?s.jsx(c.FilePptOutlined,{}):s.jsx(c.FileOutlined,{}):s.jsx(c.InboxOutlined,{}),[i]),K=((j==null?void 0:j.length)??0)>=r;return s.jsxs(f.Form.Item,{label:M,required:N,name:n,...C,className:W,rules:[...N?Z.required(M):[],...k??[]],help:R,children:[s.jsx("input",{hidden:!0}),s.jsxs(f.Row,{gutter:[8,8],align:"top",style:{width:"100%",margin:0},children:[s.jsx(f.Col,{span:$?q.draggerSpan:24,xs:24,sm:24,children:s.jsxs(_,{...I,accept:i,disabled:K,fileList:[],multiple:r>1,maxCount:r,customRequest:T,onRemove:z,onChange:({file:e})=>{e.status==="error"&&h(l=>l.filter(t=>t.uid!==e.uid))},style:B?{width:"100%"}:void 0,children:[s.jsx("p",{className:"ant-upload-drag-icon",children:J}),s.jsx("p",{className:"ant-upload-text",children:"Click or drag file to this area to upload"}),s.jsx("p",{className:"ant-upload-hint",children:`Maximum file size: 10 MB. Supported formats: ${U}. ${r>1?`Maximum number of files: ${r}`:""}`})]})}),j.length>0&&s.jsx(f.Col,{span:$?q.previewSpan:24,xs:24,sm:24,children:s.jsx(f.Upload,{...I,accept:i,fileList:j,maxCount:r,customRequest:T,onRemove:z,listType:"picture",onChange:({fileList:e})=>h(e),style:{width:"100%"}})})]})]})}module.exports=G;

package/dist/crud/FileCrudDragNDropField.d.ts

@@ -0,0 +1,24 @@
+import { UploadProps } from 'antd';
+import { ReactNode } from 'react';
+import { InitialCrudField } from './CrudComponent';
+import { FileUploadProvider } from './ImageCrudField';
+export interface FileCrudDragNDropField<T> extends _FileCrudDragNDropField<T> {
+    type: "file";
+}
+export interface _FileCrudDragNDropField<T> extends InitialCrudField<T> {
+    provider: FileUploadProvider;
+    onUploading?: (isUploading: boolean) => void;
+    onRemoved?: () => void;
+    fieldClassName?: string;
+    accept?: string;
+    maxCount?: number;
+    block?: boolean;
+    fieldHelper?: ReactNode;
+    formLayoutProps?: InitialCrudField<T>["formLayoutProps"];
+    showInGrid?: boolean;
+    gridConfig?: {
+        draggerSpan?: number;
+        previewSpan?: number;
+    };
+}
+export default function FileCrudDragNDropFieldComponent<T>({ name, label, required, provider, onUploading, onRemoved, fieldClassName, accept, rules, maxCount, block, showInGrid, gridConfig, fieldHelper: help, formLayoutProps, ...props }: Readonly<_FileCrudDragNDropField<T>> & Omit<UploadProps, "customRequest">): import("react/jsx-runtime").JSX.Element;

package/dist/crud/FileCrudDragNDropField.es.js

@@ -0,0 +1,162 @@
+import { jsx as s, jsxs as O } from "react/jsx-runtime";
+import { InboxOutlined as ee, FileImageOutlined as te, FilePdfOutlined as ie, FileWordOutlined as le, FileTextOutlined as se, FileExcelOutlined as re, FilePptOutlined as ne, FileOutlined as ae } from "@ant-design/icons";
+import { Form as b, Row as ue, Col as W, Upload as H } from "antd";
+import k from "mime";
+import { useMemo as S, useState as B, useCallback as q, useEffect as de } from "react";
+import ce from "../util/ValidationUtil.es.js";
+const { Dragger: fe } = H;
+function Fe({
+  name: N,
+  label: $,
+  required: A,
+  provider: a,
+  onUploading: c,
+  onRemoved: y,
+  fieldClassName: J,
+  accept: i,
+  rules: K,
+  maxCount: r = 1,
+  block: Q,
+  showInGrid: I = !1,
+  gridConfig: M = {
+    draggerSpan: 12,
+    previewSpan: 12
+  },
+  fieldHelper: R,
+  formLayoutProps: U,
+  ...T
+}) {
+  const u = b.useFormInstance(), n = S(() => N, [N]), p = b.useWatch(n, u), [j, X] = B(!1), [g, f] = B([]), z = q(
+    async (e) => {
+      var o, F;
+      const l = e.file, t = (l == null ? void 0 : l.name) ?? "", d = `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+      f((m) => [
+        ...m,
+        {
+          uid: d,
+          name: t,
+          status: "uploading",
+          originFileObj: l
+        }
+      ]);
+      try {
+        X(!0), c == null || c(!0);
+        const m = t ?? "", w = m.split("."), P = w[w.length - 1], C = a.generateFileName(m), G = `${await a.getInitialPath()}/${C}.${P}`, h = await a.upload(
+          { ...l, originFileObj: l },
+          G
+        ), E = await a.getRealUrl(h), v = k.getType(h), x = u.getFieldValue(n);
+        if (r > 1) {
+          const V = [...Array.isArray(x) ? x : x ? [x] : [], h].filter(Boolean);
+          u.setFieldValue(n, V);
+        } else
+          u.setFieldValue(n, h);
+        f(
+          (L) => L.map(
+            (V) => V.uid === d ? {
+              uid: h,
+              url: E,
+              type: v,
+              name: m,
+              status: "done",
+              response: h,
+              thumbUrl: E
+            } : V
+          )
+        ), (o = e.onSuccess) == null || o.call(e, h);
+      } catch (m) {
+        (F = e.onError) == null || F.call(e, m), f((w) => w.filter((P) => P.uid !== d));
+      } finally {
+        c == null || c(!1);
+      }
+    },
+    [u, r, c, a, n]
+  );
+  de(() => {
+    !j && p && Promise.all(
+      (Array.isArray(p) ? p : [p]).map(async (e) => {
+        const l = k.getType(e), t = e.split("/").pop(), d = await a.getRealUrl(e);
+        return { uid: e, url: d, type: l, name: t, response: e, thumbUrl: d };
+      })
+    ).then((e) => f(e));
+  }, [p, j, a]);
+  const D = q(
+    async (e) => {
+      const l = e.response ?? e.uid;
+      await a.delete(l), y == null || y();
+      const t = u.getFieldValue(n);
+      if (r > 1) {
+        const o = (Array.isArray(t) ? t : t ? [t] : []).filter((F) => F !== l);
+        u.setFieldValue(n, o.length ? o : void 0);
+      } else
+        u.setFieldValue(n, void 0);
+      f((d) => d.filter((o) => o.uid !== e.uid));
+    },
+    [u, r, y, a, n]
+  ), Y = S(() => {
+    if (!i) return "all files";
+    const e = i.split(",").map((l) => {
+      const t = l.trim().toLowerCase();
+      return t.startsWith("image/") ? "images" : t === ".pdf" || t === "application/pdf" ? "PDF files" : t.includes("excel") || t.includes(".xls") ? "Excel files" : t.includes("word") || t.includes(".doc") ? "Word files" : t.includes("text") || t === ".txt" ? "text files" : t.includes("presentation") || t.includes(".ppt") ? "PowerPoint files" : t.replace(".", "").toUpperCase();
+    });
+    return [...new Set(e)].join(", ");
+  }, [i]), Z = S(() => i ? i.includes("image") ? /* @__PURE__ */ s(te, {}) : i.includes("pdf") ? /* @__PURE__ */ s(ie, {}) : i.includes("word") || i.includes(".doc") ? /* @__PURE__ */ s(le, {}) : i.includes("text") || i.includes(".txt") ? /* @__PURE__ */ s(se, {}) : i.includes("excel") || i.includes(".xls") ? /* @__PURE__ */ s(re, {}) : i.includes("presentation") || i.includes(".ppt") ? /* @__PURE__ */ s(ne, {}) : /* @__PURE__ */ s(ae, {}) : /* @__PURE__ */ s(ee, {}), [i]), _ = ((g == null ? void 0 : g.length) ?? 0) >= r;
+  return /* @__PURE__ */ O(
+    b.Item,
+    {
+      label: $,
+      required: A,
+      name: n,
+      ...U,
+      className: J,
+      rules: [
+        ...A ? ce.required($) : [],
+        ...K ?? []
+      ],
+      help: R,
+      children: [
+        /* @__PURE__ */ s("input", { hidden: !0 }),
+        /* @__PURE__ */ O(ue, { gutter: [8, 8], align: "top", style: { width: "100%", margin: 0 }, children: [
+          /* @__PURE__ */ s(W, { span: I ? M.draggerSpan : 24, xs: 24, sm: 24, children: /* @__PURE__ */ O(
+            fe,
+            {
+              ...T,
+              accept: i,
+              disabled: _,
+              fileList: [],
+              multiple: r > 1,
+              maxCount: r,
+              customRequest: z,
+              onRemove: D,
+              onChange: ({ file: e }) => {
+                e.status === "error" && f((l) => l.filter((t) => t.uid !== e.uid));
+              },
+              style: Q ? { width: "100%" } : void 0,
+              children: [
+                /* @__PURE__ */ s("p", { className: "ant-upload-drag-icon", children: Z }),
+                /* @__PURE__ */ s("p", { className: "ant-upload-text", children: "Click or drag file to this area to upload" }),
+                /* @__PURE__ */ s("p", { className: "ant-upload-hint", children: `Maximum file size: 10 MB. Supported formats: ${Y}. ${r > 1 ? `Maximum number of files: ${r}` : ""}` })
+              ]
+            }
+          ) }),
+          g.length > 0 && /* @__PURE__ */ s(W, { span: I ? M.previewSpan : 24, xs: 24, sm: 24, children: /* @__PURE__ */ s(
+            H,
+            {
+              ...T,
+              accept: i,
+              fileList: g,
+              maxCount: r,
+              customRequest: z,
+              onRemove: D,
+              listType: "picture",
+              onChange: ({ fileList: e }) => f(e),
+              style: { width: "100%" }
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  Fe as default
+};

package/dist/crud/ImageCrudField.cjs.js

@@ -1 +1 @@
-"use strict";var D=Object.defineProperty;var H=(s,e,t)=>e in s?D(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var g=(s,e,t)=>H(s,typeof e!="symbol"?e+"":e,t);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),R=require("@ant-design/icons"),f=require("antd"),q=require("path-browserify"),i=require("react"),T=require("../util/NumberUtil.cjs.js"),W=require("../util/ValidationUtil.cjs.js"),v=require("uuid"),z=require("../common/picker/ImagePicker.cjs.js"),G=require("../util/ImageUtil.cjs.js");class V{}class J extends V{constructor(t="",a=""){super();g(this,"rootPath");g(this,"subPath");this.rootPath=t,this.subPath=a}cloneFilePath(t){const a=q.parse(t),r=`${a.name}_cloned_${T.default.randInt(1e5)}`;return q.format({dir:a.dir,ext:a.ext,name:r})}generateFileName(t){return`${t.split(".")[0]}_${v.v4().replace("-","")}`}}function K({formLayoutProps:s,name:e,label:t,required:a,provider:r,onUploading:u,aspectRatio:C,onRemoved:d,fieldClassName:x,hideLabel:N=!1,listType:b,fieldHelper:S,showSkipCropButton:$=!1,skipResize:p=!1,asyncUpload:O=!1},_){const m=f.Form.useFormInstance(),I=f.Form.useWatch(e,m),[w,k]=i.useState(!1),h=i.useCallback(async(l,F)=>{if(F){u==null||u(!0);const c=l.name,o=c.split("."),E=o[o.length-1],M=r.generateFileName(c),A=`${await r.getInitialPath()}/${M}.${E}`,B=await r.upload(l,A);k(!0),u==null||u(!1),m.setFieldValue(e,B)}else{const c=m.getFieldsValue(),o=await r.delete(c[e]);d==null||d(),o&&m.setFieldsValue({[e]:null})}},[m,e,d,u,r]),[P,j]=i.useState();return i.useEffect(()=>{!w&&I?r.getRealUrl(I).then(j):j(P)},[I,w,r,P]),i.useImperativeHandle(_,()=>({async uploadBlob(l,F){const c=await G.getBase64(l),o={name:F,uid:F+Math.random().toString(36).substring(2,15),url:c,originFileObj:l};return h(o,!0)}}),[h]),n.jsxs(f.Form.Item,{rules:a?W.required(t):[],label:N?null:t,required:a,name:e,help:S,...s,className:x,children:[n.jsx(z.default,{noStyle:!0,asyncUpload:O,listType:b,aspectRatio:C,values:P,onRemove:l=>{l&&h(l,!1)},onAdd:async l=>{l&&await h(l,!0)},className:x,showSkipCropButton:$,skipResize:p}),n.jsx(f.Input,{hidden:!0})]})}const L=i.forwardRef(K),Q=({provider:s,value:e})=>{const[t,a]=i.useState();return i.useEffect(()=>{e&&s.getRealUrl(e).then(a)},[s,e]),t?n.jsx(y,{url:t}):n.jsx(n.Fragment,{})},y=({url:s})=>n.jsx(f.Avatar,{className:"p-0",children:n.jsx(f.Image,{className:"m-0 p-0 position-relative",src:s,preview:{mask:n.jsx(R.EyeOutlined,{})}})});exports.FileDownloadProvider=V;exports.FileUploadProvider=J;exports.ImageCellValue=y;exports.ImageCrudCellValue=Q;exports.default=L;
+"use strict";var H=Object.defineProperty;var R=(s,e,t)=>e in s?H(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var g=(s,e,t)=>R(s,typeof e!="symbol"?e+"":e,t);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),T=require("@ant-design/icons"),f=require("antd"),q=require("path-browserify"),i=require("react"),W=require("../util/NumberUtil.cjs.js"),v=require("../util/ValidationUtil.cjs.js"),z=require("uuid"),G=require("../common/picker/ImagePicker.cjs.js"),J=require("../util/ImageUtil.cjs.js");class V{}class K extends V{constructor(t="",a=""){super();g(this,"rootPath");g(this,"subPath");this.rootPath=t,this.subPath=a}cloneFilePath(t){const a=q.parse(t),r=`${a.name}_cloned_${W.default.randInt(1e5)}`;return q.format({dir:a.dir,ext:a.ext,name:r})}generateFileName(t){return`${t.split(".")[0]}_${z.v4().replace("-","")}`}}function L({formLayoutProps:s,name:e,label:t,required:a,provider:r,onUploading:u,aspectRatio:C,onRemoved:d,fieldClassName:x,hideLabel:N=!1,listType:b,fieldHelper:S,showSkipCropButton:$=!1,skipResize:p=!1,asyncUpload:O=!1,maxCount:_=1},k){const m=f.Form.useFormInstance(),I=f.Form.useWatch(e,m),[w,E]=i.useState(!1),h=i.useCallback(async(l,F)=>{if(F){u==null||u(!0);const c=l.name,o=c.split("."),M=o[o.length-1],A=r.generateFileName(c),B=`${await r.getInitialPath()}/${A}.${M}`,D=await r.upload(l,B);E(!0),u==null||u(!1),m.setFieldValue(e,D)}else{const c=m.getFieldsValue(),o=await r.delete(c[e]);d==null||d(),o&&m.setFieldsValue({[e]:null})}},[m,e,d,u,r]),[P,j]=i.useState();return i.useEffect(()=>{!w&&I?r.getRealUrl(I).then(j):j(P)},[I,w,r,P]),i.useImperativeHandle(k,()=>({async uploadBlob(l,F){const c=await J.getBase64(l),o={name:F,uid:F+Math.random().toString(36).substring(2,15),url:c,originFileObj:l};return h(o,!0)}}),[h]),n.jsxs(f.Form.Item,{rules:a?v.required(t):[],label:N?null:t,required:a,name:e,help:S,...s,className:x,children:[n.jsx(G.default,{noStyle:!0,asyncUpload:O,listType:b,aspectRatio:C,values:P,onRemove:l=>{l&&h(l,!1)},onAdd:async l=>{l&&await h(l,!0)},className:x,showSkipCropButton:$,skipResize:p,maxCount:_}),n.jsx(f.Input,{hidden:!0})]})}const Q=i.forwardRef(L),U=({provider:s,value:e})=>{const[t,a]=i.useState();return i.useEffect(()=>{e&&s.getRealUrl(e).then(a)},[s,e]),t?n.jsx(y,{url:t}):n.jsx(n.Fragment,{})},y=({url:s})=>n.jsx(f.Avatar,{className:"p-0",children:n.jsx(f.Image,{className:"m-0 p-0 position-relative",src:s,preview:{mask:n.jsx(T.EyeOutlined,{})}})});exports.FileDownloadProvider=V;exports.FileUploadProvider=K;exports.ImageCellValue=y;exports.ImageCrudCellValue=U;exports.default=Q;

package/dist/crud/ImageCrudField.d.ts

@@ -12,6 +12,7 @@ export interface _ImageCrudField<T> extends InitialCrudField<T> {
     showSkipCropButton?: boolean;
     skipResize?: boolean;
     asyncUpload?: boolean;
+    maxCount?: number;
 }
 export interface ImageCrudField<T> extends _ImageCrudField<T> {
     type: "image";

package/dist/crud/ImageCrudField.es.js

@@ -1,19 +1,19 @@
-var D = Object.defineProperty;
-var M = (a, e, t) => e in a ? D(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
-var I = (a, e, t) => M(a, typeof e != "symbol" ? e + "" : e, t);
-import { jsx as i, Fragment as W, jsxs as q } from "react/jsx-runtime";
-import { EyeOutlined as z } from "@ant-design/icons";
-import { Avatar as G, Image as J, Form as d, Input as K } from "antd";
+var M = Object.defineProperty;
+var W = (a, e, t) => e in a ? M(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
+var I = (a, e, t) => W(a, typeof e != "symbol" ? e + "" : e, t);
+import { jsx as i, Fragment as q, jsxs as z } from "react/jsx-runtime";
+import { EyeOutlined as G } from "@ant-design/icons";
+import { Avatar as J, Image as K, Form as d, Input as L } from "antd";
 import y from "path-browserify";
-import L, { useState as P, useEffect as V, useCallback as Q, useImperativeHandle as R } from "react";
-import T from "../util/NumberUtil.es.js";
-import X from "../util/ValidationUtil.es.js";
-import { v4 as Y } from "uuid";
-import Z from "../common/picker/ImagePicker.es.js";
-import U from "../util/ImageUtil.es.js";
-class v {
+import Q, { useState as P, useEffect as V, useCallback as R, useImperativeHandle as T } from "react";
+import X from "../util/NumberUtil.es.js";
+import Y from "../util/ValidationUtil.es.js";
+import { v4 as Z } from "uuid";
+import U from "../common/picker/ImagePicker.es.js";
+import v from "../util/ImageUtil.es.js";
+class ee {
 }
-class he extends v {
+class Fe extends ee {
   constructor(t = "", s = "") {
     super();
     I(this, "rootPath");
@@ -21,7 +21,7 @@ class he extends v {
     this.rootPath = t, this.subPath = s;
   }
   cloneFilePath(t) {
-    const s = y.parse(t), l = `${s.name}_cloned_${T.randInt(1e5)}`;
+    const s = y.parse(t), l = `${s.name}_cloned_${X.randInt(1e5)}`;
     return y.format({
       dir: s.dir,
       ext: s.ext,
@@ -29,10 +29,10 @@ class he extends v {
     });
   }
   generateFileName(t) {
-    return `${t.split(".")[0]}_${Y().replace("-", "")}`;
+    return `${t.split(".")[0]}_${Z().replace("-", "")}`;
   }
 }
-function ee({
+function te({
   formLayoutProps: a,
   name: e,
   label: t,
@@ -47,14 +47,15 @@ function ee({
   fieldHelper: b,
   showSkipCropButton: O = !1,
   skipResize: j = !1,
-  asyncUpload: k = !1
-}, S) {
-  const o = d.useFormInstance(), F = d.useWatch(e, o), [g, _] = P(!1), f = Q(
+  asyncUpload: k = !1,
+  maxCount: S = 1
+}, _) {
+  const o = d.useFormInstance(), F = d.useWatch(e, o), [g, A] = P(!1), f = R(
     async (r, h) => {
       if (h) {
         n == null || n(!0);
-        const c = r.name, u = c.split("."), A = u[u.length - 1], B = l.generateFileName(c), E = `${await l.getInitialPath()}/${B}.${A}`, H = await l.upload(r, E);
-        _(!0), n == null || n(!1), o.setFieldValue(e, H);
+        const c = r.name, u = c.split("."), B = u[u.length - 1], E = l.generateFileName(c), H = `${await l.getInitialPath()}/${E}.${B}`, D = await l.upload(r, H);
+        A(!0), n == null || n(!1), o.setFieldValue(e, D);
       } else {
         const c = o.getFieldsValue(), u = await l.delete(c[e]);
         m == null || m(), u && o.setFieldsValue({ [e]: null });
@@ -64,11 +65,11 @@ function ee({
   ), [p, N] = P();
   return V(() => {
     !g && F ? l.getRealUrl(F).then(N) : N(p);
-  }, [F, g, l, p]), R(
-    S,
+  }, [F, g, l, p]), T(
+    _,
     () => ({
       async uploadBlob(r, h) {
-        const c = await U.getBase64(r), u = {
+        const c = await v.getBase64(r), u = {
           name: h,
           uid: h + Math.random().toString(36).substring(2, 15),
           url: c,
@@ -78,10 +79,10 @@ function ee({
       }
     }),
     [f]
-  ), /* @__PURE__ */ q(
+  ), /* @__PURE__ */ z(
     d.Item,
     {
-      rules: s ? X.required(t) : [],
+      rules: s ? Y.required(t) : [],
       label: $ ? null : t,
       required: s,
       name: e,
@@ -90,7 +91,7 @@ function ee({
       className: w,
       children: [
         /* @__PURE__ */ i(
-          Z,
+          U,
           {
             noStyle: !0,
             asyncUpload: k,
@@ -105,33 +106,34 @@ function ee({
             },
             className: w,
             showSkipCropButton: O,
-            skipResize: j
+            skipResize: j,
+            maxCount: S
           }
         ),
-        /* @__PURE__ */ i(K, { hidden: !0 })
+        /* @__PURE__ */ i(L, { hidden: !0 })
       ]
     }
   );
 }
-const Fe = L.forwardRef(ee), pe = ({ provider: a, value: e }) => {
+const pe = Q.forwardRef(te), Ie = ({ provider: a, value: e }) => {
   const [t, s] = P();
   return V(() => {
     e && a.getRealUrl(e).then(s);
-  }, [a, e]), t ? /* @__PURE__ */ i(te, { url: t }) : /* @__PURE__ */ i(W, {});
-}, te = ({ url: a }) => /* @__PURE__ */ i(G, { className: "p-0", children: /* @__PURE__ */ i(
-  J,
+  }, [a, e]), t ? /* @__PURE__ */ i(ae, { url: t }) : /* @__PURE__ */ i(q, {});
+}, ae = ({ url: a }) => /* @__PURE__ */ i(J, { className: "p-0", children: /* @__PURE__ */ i(
+  K,
   {
     className: "m-0 p-0 position-relative",
     src: a,
     preview: {
-      mask: /* @__PURE__ */ i(z, {})
+      mask: /* @__PURE__ */ i(G, {})
     }
   }
 ) });
 export {
-  v as FileDownloadProvider,
-  he as FileUploadProvider,
-  te as ImageCellValue,
-  pe as ImageCrudCellValue,
-  Fe as default
+  ee as FileDownloadProvider,
+  Fe as FileUploadProvider,
+  ae as ImageCellValue,
+  Ie as ImageCrudCellValue,
+  pe as default
 };

package/dist/crud/index.d.ts

@@ -13,6 +13,8 @@ export { default as ImageCrudField, FileDownloadProvider, FileUploadProvider, Im
 export type { ImageCrudField as ImageCrudFieldProps } from './ImageCrudField';
 export { default as FileCrudField, FileCellValue, FileCrudCellValue, } from './FileCrudField';
 export type { FileCrudField as FileCrudFieldProps } from './FileCrudField';
+export { default as FileCrudDragNDropField } from './FileCrudDragNDropField';
+export type { FileCrudDragNDropField as FileCrudDragNDropFieldProps, } from './FileCrudDragNDropField';
 export { default as CrudTextAreaComponent } from './CrudTextAreaComponent';
 export type { TextAreaBasedFieldProps } from './CrudTextAreaComponent';
 export { default as CrudImportComponent } from './import/CrudImportComponent';

package/dist/crud/view/CrudViewer.cjs.js

@@ -1 +1 @@
-"use strict";const n=require("react/jsx-runtime"),jt=require("antd"),yt=require("@dnd-kit/core"),ht=require("@dnd-kit/modifiers"),qt=require("@dnd-kit/utilities"),d=require("@dnd-kit/sortable"),Ct=require("../../common/button/Button.cjs.js"),lt=require("../../common/button/RefreshButton.cjs.js"),It=require("../../common/button/ViewButtonTable.cjs.js"),St=require("../actions/index.cjs.js"),Rt=require("../../common/table/table.cjs.js"),s=require("react"),Mt=require("../../locale/index.cjs.js"),dt=require("../CrudSearchComponent.cjs.js"),Tt=require("./CrudDecListView.cjs.js"),et=require("./CrudViewerUtil.cjs.js"),Vt=require("@ant-design/icons"),nt=require("../../util/CrudUtil.cjs.js"),Bt=require("../../common/layout/VerticalSpace.cjs.js"),Dt=s.memo(Rt);function Nt({idField:o="id",loadingData:h,fields:m,isDeleting:T,isHiding:R,viewable:c=!1,paginateProps:x,onDelete:q,onHide:V,onUpdate:C,data:l=[],extraAction:B,onClickUpdate:D,minusHeight:k,scroll:O,onClickClone:v,className:z,expandable:$,size:A,bordered:_,descListColumn:st,extraView:E,decListLayout:rt,scrollToTop:Lt,onClickRefresh:G,closeViewOnClickUpdate:J,onExport:K,confirmHiding:Q,confirmDeleting:X,rowClassName:Y,actionWidth:Z=190,draggable:t,rowSelection:W,...ct}){const{t:p}=Mt.useTranslationLib(),P=s.useMemo(()=>m.map(({hideInTable:e,hidden:r,width:u,label:f,halign:I,...S})=>{const N=nt.getRealName(S.name);return{title:f,width:u,key:N,dataIndex:N,hidden:e||r,align:I??(S.type==="number"?"right":void 0),render:et.getRendererValueCrudViewer(S),sorter:S.sorter}}),[m]),[i,M]=s.useState(),[H,U]=s.useState(),[y,w]=s.useState([]),ut=s.useCallback(e=>{M(e)},[]);s.useEffect(()=>{l&&w(l)},[l]),s.useEffect(()=>{l&&M(e=>{if(e)return l.find(r=>r[o]===e[o])})},[l,o,i]);const a=s.useCallback(e=>{var f;const{active:r,over:u}=e;if(t!=null&&t.onDragEnd&&(t==null||t.onDragEnd(e)),r.id!==(u==null?void 0:u.id)){const I=y.findIndex(j=>j[o]===r.id),S=y.findIndex(j=>j[o]===(u==null?void 0:u.id)),N=d.arrayMove(y,I,S);w(j=>{const xt=j.findIndex(L=>L[o]===(r==null?void 0:r.id)),ft=j.findIndex(L=>L[o]===(u==null?void 0:u.id));return d.arrayMove(j,xt,ft)}),(f=t==null?void 0:t.onDrag)==null||f.call(t,{newOrder:N.map(j=>j[o])})}},[y,o,t]),it=s.useMemo(()=>{let e=typeof c=="string"?i==null?void 0:i[c]:void 0;if(typeof e=="object"){const r=m.find(u=>nt.getRealName(u.name)===c);e=et.getRendererValueCrudViewer(r)(e,i,0)}return e},[c,i,m]),F=s.useMemo(()=>({rowSelection:W,rowClassName:Y,className:z,scroll:O??(k?{y:`calc(100vh - ${k})`}:void 0),id:"crud-table",bordered:_,size:A,expandable:$}),[W,Y,z,O,k,_,A,$]),b=s.useMemo(()=>x?{...x,total:x.count,onChange:x.setPage,current:x.page,pageSize:x.pageSize}:void 0,[x]),g=s.useMemo(()=>{const e=C||D||q||B||c,r=[];return t&&r.push({key:"key",align:"center",width:5,title:t==null?void 0:t.columnLabel,render:()=>n.jsx(kt,{tooltip:t==null?void 0:t.tooltip})}),r.push(...P),e&&e&&r.push({title:p("str.action"),fixed:"right",width:Z,render:(u,f)=>n.jsxs(n.Fragment,{children:[c&&n.jsx(It,{value:f,onClick:typeof c=="object"?()=>{var I;return(I=c.onClick)==null?void 0:I.call(c,f)}:ut}),n.jsx(St,{data:f,idField:o,extraAction:B,onUpdate:C,onClickUpdate:D,onClickClone:v,onDelete:q,onHide:V,onExport:K,isHiding:R,isDeleting:T,confirmHiding:Q,confirmDeleting:X,closeViewOnClickUpdate:J,recentUpdateOrDeleteId:H,setRecentUpdateOrDeleteId:U,setOpenView:M})]})}),r},[P,C,D,q,B,c,p,Z]),tt=s.useMemo(()=>y.map(e=>e[o]),[y,o]),mt=s.useCallback(()=>{const e=n.jsx(Dt,{...F,dataSource:y,loading:h,components:t?{body:{row:Et}}:void 0,pagination:b,columns:g});return t?n.jsx(yt.DndContext,{modifiers:[ht.restrictToVerticalAxis],onDragEnd:a,children:n.jsx(d.SortableContext,{items:tt,strategy:d.verticalListSortingStrategy,children:e})}):e},[F,y,h,b,g,t,tt,a]);return n.jsxs("div",{children:[(typeof c=="boolean"||typeof c=="string")&&n.jsx(jt.Modal,{width:"100%",open:!!i,title:it??n.jsx("div",{children:" "}),footer:n.jsx(n.Fragment,{}),closable:!0,onCancel:()=>M(void 0),children:!!i&&n.jsxs("div",{children:[n.jsx(Tt.CrudDecListView,{layout:rt,descListColumn:st,data:i,fields:m,idField:o,extraAction:B,onUpdate:C,onClickUpdate:D,onClickClone:v,onDelete:q,onHide:V,onExport:K,isHiding:R,isDeleting:T,confirmHiding:Q,confirmDeleting:X,closeViewOnClickUpdate:J,recentUpdateOrDeleteId:H,setRecentUpdateOrDeleteId:U,setOpenView:M}),E==null?void 0:E(i)]},i==null?void 0:i[o])}),n.jsx(dt,{fields:m,...ct}),n.jsxs(Bt,{children:[!!G&&n.jsx(lt.RefreshButton,{onClick:G}),mt()]})]})}const ot=s.createContext({}),kt=({tooltip:o})=>{const{setActivatorNodeRef:h,listeners:m}=s.useContext(ot);return n.jsx(Ct,{type:"text",size:"small",tooltip:o,icon:n.jsx(Vt.HolderOutlined,{}),style:{cursor:"move",border:"none"},ref:h,...m})},Et=o=>{const{attributes:h,listeners:m,setNodeRef:T,setActivatorNodeRef:R,transform:c,transition:x,isDragging:q}=d.useSortable({id:o["data-row-key"]}),V={...o.style,transform:qt.CSS.Translate.toString(c),transition:x,...q?{position:"relative",zIndex:9999}:{}},C=s.useMemo(()=>({setActivatorNodeRef:R,listeners:m}),[R,m]);return n.jsx(ot.Provider,{value:C,children:n.jsx("tr",{...o,ref:T,style:V,...h})})};module.exports=Nt;
+"use strict";const n=require("react/jsx-runtime"),ht=require("antd"),yt=require("@dnd-kit/core"),qt=require("@dnd-kit/modifiers"),Ct=require("@dnd-kit/utilities"),d=require("@dnd-kit/sortable"),lt=require("../../common/button/Button.cjs.js"),It=require("../../common/button/RefreshButton.cjs.js"),St=require("../../common/button/ViewButtonTable.cjs.js"),Rt=require("../actions/index.cjs.js"),Mt=require("../../common/table/table.cjs.js"),s=require("react"),dt=require("../../locale/index.cjs.js"),Tt=require("../CrudSearchComponent.cjs.js"),Vt=require("./CrudDecListView.cjs.js"),nt=require("./CrudViewerUtil.cjs.js"),Bt=require("@ant-design/icons"),ot=require("../../util/CrudUtil.cjs.js"),Dt=require("../../common/layout/VerticalSpace.cjs.js"),Nt=s.memo(Mt);function kt({summary:j,idField:o="id",loadingData:q,fields:h,isDeleting:R,isHiding:T,viewable:c=!1,paginateProps:m,onDelete:C,onHide:V,onUpdate:B,data:l=[],extraAction:D,onClickUpdate:N,minusHeight:E,scroll:v,onClickClone:z,className:$,expandable:A,size:_,bordered:G,descListColumn:rt,extraView:L,decListLayout:ct,scrollToTop:Ot,onClickRefresh:J,closeViewOnClickUpdate:K,onExport:Q,confirmHiding:X,confirmDeleting:Y,rowClassName:Z,actionWidth:W=190,draggable:t,rowSelection:p,...ut}){const{t:P}=dt.useTranslationLib(),H=s.useMemo(()=>h.map(({hideInTable:e,hidden:r,width:u,label:x,halign:I,...S})=>{const k=ot.getRealName(S.name);return{title:x,width:u,key:k,dataIndex:k,hidden:e||r,align:I??(S.type==="number"?"right":void 0),render:nt.getRendererValueCrudViewer(S),sorter:S.sorter}}),[h]),[i,M]=s.useState(),[U,w]=s.useState(),[y,F]=s.useState([]),it=s.useCallback(e=>{M(e)},[]);s.useEffect(()=>{l&&F(l)},[l]),s.useEffect(()=>{l&&M(e=>{if(e)return l.find(r=>r[o]===e[o])})},[l,o,i]);const a=s.useCallback(e=>{var x;const{active:r,over:u}=e;if(t!=null&&t.onDragEnd&&(t==null||t.onDragEnd(e)),r.id!==(u==null?void 0:u.id)){const I=y.findIndex(f=>f[o]===r.id),S=y.findIndex(f=>f[o]===(u==null?void 0:u.id)),k=d.arrayMove(y,I,S);F(f=>{const ft=f.findIndex(O=>O[o]===(r==null?void 0:r.id)),jt=f.findIndex(O=>O[o]===(u==null?void 0:u.id));return d.arrayMove(f,ft,jt)}),(x=t==null?void 0:t.onDrag)==null||x.call(t,{newOrder:k.map(f=>f[o])})}},[y,o,t]),mt=s.useMemo(()=>{let e=typeof c=="string"?i==null?void 0:i[c]:void 0;if(typeof e=="object"){const r=h.find(u=>ot.getRealName(u.name)===c);e=nt.getRendererValueCrudViewer(r)(e,i,0)}return e},[c,i,h]),b=s.useMemo(()=>({rowSelection:p,rowClassName:Z,className:$,scroll:v??(E?{y:`calc(100vh - ${E})`}:void 0),id:"crud-table",bordered:G,size:_,expandable:A}),[p,Z,$,v,E,G,_,A]),g=s.useMemo(()=>m?{...m,total:m.count,onChange:m.setPage,current:m.page,pageSize:m.pageSize}:void 0,[m]),tt=s.useMemo(()=>{const e=B||N||C||D||c,r=[];return t&&r.push({key:"key",align:"center",width:5,title:t==null?void 0:t.columnLabel,render:()=>n.jsx(Et,{tooltip:t==null?void 0:t.tooltip})}),r.push(...H),e&&e&&r.push({title:P("str.action"),fixed:"right",width:W,render:(u,x)=>n.jsxs(n.Fragment,{children:[c&&n.jsx(St,{value:x,onClick:typeof c=="object"?()=>{var I;return(I=c.onClick)==null?void 0:I.call(c,x)}:it}),n.jsx(Rt,{data:x,idField:o,extraAction:D,onUpdate:B,onClickUpdate:N,onClickClone:z,onDelete:C,onHide:V,onExport:Q,isHiding:T,isDeleting:R,confirmHiding:X,confirmDeleting:Y,closeViewOnClickUpdate:K,recentUpdateOrDeleteId:U,setRecentUpdateOrDeleteId:w,setOpenView:M})]})}),r},[H,B,N,C,D,c,P,W]),et=s.useMemo(()=>y.map(e=>e[o]),[y,o]),xt=s.useCallback(()=>{const e=n.jsx(Nt,{...b,summary:j,dataSource:y,loading:q,components:t?{body:{row:Lt}}:void 0,pagination:g,columns:tt});return t?n.jsx(yt.DndContext,{modifiers:[qt.restrictToVerticalAxis],onDragEnd:a,children:n.jsx(d.SortableContext,{items:et,strategy:d.verticalListSortingStrategy,children:e})}):e},[b,y,q,g,tt,j,t,et,a]);return n.jsxs("div",{children:[(typeof c=="boolean"||typeof c=="string")&&n.jsx(ht.Modal,{width:"100%",open:!!i,title:mt??n.jsx("div",{children:" "}),footer:n.jsx(n.Fragment,{}),closable:!0,onCancel:()=>M(void 0),children:!!i&&n.jsxs("div",{children:[n.jsx(Vt.CrudDecListView,{layout:ct,descListColumn:rt,data:i,fields:h,idField:o,extraAction:D,onUpdate:B,onClickUpdate:N,onClickClone:z,onDelete:C,onHide:V,onExport:Q,isHiding:T,isDeleting:R,confirmHiding:X,confirmDeleting:Y,closeViewOnClickUpdate:K,recentUpdateOrDeleteId:U,setRecentUpdateOrDeleteId:w,setOpenView:M}),L==null?void 0:L(i)]},i==null?void 0:i[o])}),n.jsx(Tt,{fields:h,...ut}),n.jsxs(Dt,{children:[!!J&&n.jsx(It.RefreshButton,{onClick:J}),xt()]})]})}const st=s.createContext({}),Et=({tooltip:j})=>{const{setActivatorNodeRef:o,listeners:q}=s.useContext(st);return n.jsx(lt,{type:"text",size:"small",tooltip:j,icon:n.jsx(Bt.HolderOutlined,{}),style:{cursor:"move",border:"none"},ref:o,...q})},Lt=j=>{const{attributes:o,listeners:q,setNodeRef:h,setActivatorNodeRef:R,transform:T,transition:c,isDragging:m}=d.useSortable({id:j["data-row-key"]}),C={...j.style,transform:Ct.CSS.Translate.toString(T),transition:c,...m?{position:"relative",zIndex:9999}:{}},V=s.useMemo(()=>({setActivatorNodeRef:R,listeners:q}),[R,q]);return n.jsx(st.Provider,{value:V,children:n.jsx("tr",{...j,ref:h,style:C,...o})})};module.exports=kt;

package/dist/crud/view/CrudViewer.d.ts

@@ -20,6 +20,7 @@ export type CrudViewableProps<T> = boolean | keyof T | {
     onClick: (t: T) => void;
 };
 export type CrudViewerProps<T, FormType> = {
+    summary?: TableProps<T>["summary"];
     fields: CrudFieldProps<T>[];
     decListLayout?: "horizontal" | "vertical";
     viewable?: CrudViewableProps<T>;
@@ -41,5 +42,5 @@ export type CrudViewerProps<T, FormType> = {
     actionWidth?: string | number;
     draggable?: CrudDragableProps<T>;
 } & CrudActionsProps<T, FormType> & CrudSearchComponentProps<T, FormType>;
-declare function CrudViewer<T, FormType = T>({ idField, loadingData, fields, isDeleting, isHiding, viewable, paginateProps, onDelete, onHide, onUpdate, data, extraAction, onClickUpdate, minusHeight, scroll, onClickClone, className, expandable, size, bordered, descListColumn, extraView, decListLayout, scrollToTop, onClickRefresh, closeViewOnClickUpdate, onExport, confirmHiding, confirmDeleting, rowClassName, actionWidth, draggable, rowSelection, ...props }: CrudViewerProps<T, FormType>): import("react/jsx-runtime").JSX.Element;
+declare function CrudViewer<T, FormType = T>({ summary, idField, loadingData, fields, isDeleting, isHiding, viewable, paginateProps, onDelete, onHide, onUpdate, data, extraAction, onClickUpdate, minusHeight, scroll, onClickClone, className, expandable, size, bordered, descListColumn, extraView, decListLayout, scrollToTop, onClickRefresh, closeViewOnClickUpdate, onExport, confirmHiding, confirmDeleting, rowClassName, actionWidth, draggable, rowSelection, ...props }: CrudViewerProps<T, FormType>): import("react/jsx-runtime").JSX.Element;
 export default CrudViewer;

package/dist/crud/view/CrudViewer.es.js

@@ -1,319 +1,322 @@
-import { jsx as e, jsxs as E, Fragment as rt } from "react/jsx-runtime";
-import { Modal as Tt } from "antd";
-import { DndContext as Rt } from "@dnd-kit/core";
-import { restrictToVerticalAxis as lt } from "@dnd-kit/modifiers";
-import { CSS as Bt } from "@dnd-kit/utilities";
-import { arrayMove as et, SortableContext as Dt, verticalListSortingStrategy as Nt, useSortable as Ot } from "@dnd-kit/sortable";
-import dt from "../../common/button/Button.es.js";
-import { RefreshButton as jt } from "../../common/button/RefreshButton.es.js";
-import Et from "../../common/button/ViewButtonTable.es.js";
-import Lt from "../actions/index.es.js";
-import Mt from "../../common/table/table.es.js";
-import ut, { useMemo as p, useState as k, useCallback as z, useEffect as ct, useContext as Vt } from "react";
-import { useTranslationLib as kt } from "../../locale/index.es.js";
-import zt from "../CrudSearchComponent.es.js";
-import { CrudDecListView as vt } from "./CrudDecListView.es.js";
-import { getRendererValueCrudViewer as st } from "./CrudViewerUtil.es.js";
-import { HolderOutlined as At } from "@ant-design/icons";
-import mt from "../../util/CrudUtil.es.js";
-import _t from "../../common/layout/VerticalSpace.es.js";
-const $t = ut.memo(Mt);
-function co({
+import { jsx as e, jsxs as L, Fragment as et } from "react/jsx-runtime";
+import { Modal as Rt } from "antd";
+import { DndContext as lt } from "@dnd-kit/core";
+import { restrictToVerticalAxis as Bt } from "@dnd-kit/modifiers";
+import { CSS as Dt } from "@dnd-kit/utilities";
+import { arrayMove as ct, SortableContext as Nt, verticalListSortingStrategy as Ot, useSortable as dt } from "@dnd-kit/sortable";
+import jt from "../../common/button/Button.es.js";
+import { RefreshButton as Et } from "../../common/button/RefreshButton.es.js";
+import Lt from "../../common/button/ViewButtonTable.es.js";
+import Mt from "../actions/index.es.js";
+import Vt from "../../common/table/table.es.js";
+import ft, { useMemo as x, useState as z, useCallback as v, useEffect as st, useContext as kt } from "react";
+import { useTranslationLib as zt } from "../../locale/index.es.js";
+import vt from "../CrudSearchComponent.es.js";
+import { CrudDecListView as At } from "./CrudDecListView.es.js";
+import { getRendererValueCrudViewer as mt } from "./CrudViewerUtil.es.js";
+import { HolderOutlined as _t } from "@ant-design/icons";
+import ut from "../../util/CrudUtil.es.js";
+import $t from "../../common/layout/VerticalSpace.es.js";
+const qt = ft.memo(Vt);
+function so({
+  summary: h,
   idField: n = "id",
   loadingData: C,
-  fields: u,
-  isDeleting: D,
-  isHiding: l,
+  fields: p,
+  isDeleting: l,
+  isHiding: D,
   viewable: c = !1,
-  paginateProps: f,
-  onDelete: x,
+  paginateProps: u,
+  onDelete: I,
   onHide: N,
-  onUpdate: I,
+  onUpdate: O,
   data: S = [],
-  extraAction: O,
-  onClickUpdate: d,
-  minusHeight: L,
-  scroll: v,
-  onClickClone: A,
-  className: _,
-  expandable: $,
-  size: q,
-  bordered: G,
-  descListColumn: it,
-  extraView: M,
-  decListLayout: yt,
-  scrollToTop: Jt,
-  onClickRefresh: J,
-  closeViewOnClickUpdate: K,
-  onExport: Q,
-  confirmHiding: X,
-  confirmDeleting: Y,
-  rowClassName: Z,
-  actionWidth: W = 190,
+  extraAction: d,
+  onClickUpdate: j,
+  minusHeight: M,
+  scroll: A,
+  onClickClone: _,
+  className: $,
+  expandable: q,
+  size: G,
+  bordered: J,
+  descListColumn: ht,
+  extraView: V,
+  decListLayout: pt,
+  scrollToTop: Kt,
+  onClickRefresh: K,
+  closeViewOnClickUpdate: Q,
+  onExport: X,
+  confirmHiding: Y,
+  confirmDeleting: Z,
+  rowClassName: W,
+  actionWidth: P = 190,
   draggable: t,
-  rowSelection: P,
-  ...ht
+  rowSelection: H,
+  ...yt
 }) {
-  const { t: H } = kt(), U = p(
-    () => u.map(({ hideInTable: o, hidden: r, width: s, label: i, halign: T, ...R }) => {
-      const j = mt.getRealName(R.name);
+  const { t: U } = zt(), w = x(
+    () => p.map(({ hideInTable: o, hidden: r, width: s, label: f, halign: T, ...R }) => {
+      const E = ut.getRealName(R.name);
       return {
-        title: i,
+        title: f,
         width: s,
-        key: j,
-        dataIndex: j,
+        key: E,
+        dataIndex: E,
         hidden: o || r,
         align: T ?? (R.type === "number" ? "right" : void 0),
-        render: st(R),
+        render: mt(R),
         sorter: R.sorter
       };
     }),
-    [u]
-  ), [m, B] = k(), [w, F] = k(), [h, a] = k([]), pt = z((o) => {
+    [p]
+  ), [m, B] = z(), [F, a] = z(), [y, b] = z([]), Ct = v((o) => {
     B(o);
   }, []);
-  ct(() => {
-    S && a(S);
-  }, [S]), ct(() => {
+  st(() => {
+    S && b(S);
+  }, [S]), st(() => {
     S && B((o) => {
       if (o)
         return S.find((r) => r[n] === o[n]);
     });
   }, [S, n, m]);
-  const b = z(
+  const g = v(
     (o) => {
-      var i;
+      var f;
       const { active: r, over: s } = o;
       if (t != null && t.onDragEnd && (t == null || t.onDragEnd(o)), r.id !== (s == null ? void 0 : s.id)) {
-        const T = h.findIndex(
-          (y) => y[n] === r.id
-        ), R = h.findIndex(
-          (y) => y[n] === (s == null ? void 0 : s.id)
-        ), j = et(h, T, R);
-        a((y) => {
-          const It = y.findIndex(
-            (V) => V[n] === (r == null ? void 0 : r.id)
-          ), St = y.findIndex(
-            (V) => V[n] === (s == null ? void 0 : s.id)
+        const T = y.findIndex(
+          (i) => i[n] === r.id
+        ), R = y.findIndex(
+          (i) => i[n] === (s == null ? void 0 : s.id)
+        ), E = ct(y, T, R);
+        b((i) => {
+          const St = i.findIndex(
+            (k) => k[n] === (r == null ? void 0 : r.id)
+          ), Tt = i.findIndex(
+            (k) => k[n] === (s == null ? void 0 : s.id)
           );
-          return et(y, It, St);
-        }), (i = t == null ? void 0 : t.onDrag) == null || i.call(t, {
-          newOrder: j.map((y) => y[n])
+          return ct(i, St, Tt);
+        }), (f = t == null ? void 0 : t.onDrag) == null || f.call(t, {
+          newOrder: E.map((i) => i[n])
         });
       }
     },
-    [h, n, t]
-  ), Ct = p(() => {
+    [y, n, t]
+  ), xt = x(() => {
     let o = typeof c == "string" ? m == null ? void 0 : m[c] : void 0;
     if (typeof o == "object") {
-      const r = u.find((s) => mt.getRealName(s.name) === c);
-      o = st(r)(
+      const r = p.find((s) => ut.getRealName(s.name) === c);
+      o = mt(r)(
         o,
         m,
         0
       );
     }
     return o;
-  }, [c, m, u]), g = p(
+  }, [c, m, p]), tt = x(
     () => ({
-      rowSelection: P,
-      rowClassName: Z,
-      className: _,
-      scroll: v ?? (L ? { y: `calc(100vh - ${L})` } : void 0),
+      rowSelection: H,
+      rowClassName: W,
+      className: $,
+      scroll: A ?? (M ? { y: `calc(100vh - ${M})` } : void 0),
       id: "crud-table",
-      bordered: G,
-      size: q,
-      expandable: $
+      bordered: J,
+      size: G,
+      expandable: q
     }),
     [
-      P,
-      Z,
-      _,
-      v,
-      L,
+      H,
+      W,
+      $,
+      A,
+      M,
+      J,
       G,
-      q,
-      $
+      q
     ]
-  ), tt = p(
-    () => f ? {
-      ...f,
-      total: f.count,
-      onChange: f.setPage,
-      current: f.page,
-      pageSize: f.pageSize
+  ), ot = x(
+    () => u ? {
+      ...u,
+      total: u.count,
+      onChange: u.setPage,
+      current: u.page,
+      pageSize: u.pageSize
     } : void 0,
-    [f]
-  ), ot = p(() => {
-    const o = I || d || x || O || c, r = [];
+    [u]
+  ), nt = x(() => {
+    const o = O || j || I || d || c, r = [];
     return t && r.push({
       key: "key",
       align: "center",
       width: 5,
       title: t == null ? void 0 : t.columnLabel,
-      render: () => /* @__PURE__ */ e(qt, { tooltip: t == null ? void 0 : t.tooltip })
-    }), r.push(...U), o && o && r.push({
-      title: H("str.action"),
+      render: () => /* @__PURE__ */ e(Gt, { tooltip: t == null ? void 0 : t.tooltip })
+    }), r.push(...w), o && o && r.push({
+      title: U("str.action"),
       fixed: "right",
-      width: W,
-      render: (s, i) => /* @__PURE__ */ E(rt, { children: [
+      width: P,
+      render: (s, f) => /* @__PURE__ */ L(et, { children: [
         c && /* @__PURE__ */ e(
-          Et,
+          Lt,
           {
-            value: i,
+            value: f,
             onClick: typeof c == "object" ? () => {
               var T;
-              return (T = c.onClick) == null ? void 0 : T.call(c, i);
-            } : pt
+              return (T = c.onClick) == null ? void 0 : T.call(c, f);
+            } : Ct
           }
         ),
         /* @__PURE__ */ e(
-          Lt,
+          Mt,
           {
-            data: i,
+            data: f,
             idField: n,
-            extraAction: O,
-            onUpdate: I,
-            onClickUpdate: d,
-            onClickClone: A,
-            onDelete: x,
+            extraAction: d,
+            onUpdate: O,
+            onClickUpdate: j,
+            onClickClone: _,
+            onDelete: I,
             onHide: N,
-            onExport: Q,
-            isHiding: l,
-            isDeleting: D,
-            confirmHiding: X,
-            confirmDeleting: Y,
-            closeViewOnClickUpdate: K,
-            recentUpdateOrDeleteId: w,
-            setRecentUpdateOrDeleteId: F,
+            onExport: X,
+            isHiding: D,
+            isDeleting: l,
+            confirmHiding: Y,
+            confirmDeleting: Z,
+            closeViewOnClickUpdate: Q,
+            recentUpdateOrDeleteId: F,
+            setRecentUpdateOrDeleteId: a,
             setOpenView: B
           }
         )
       ] })
     }), r;
   }, [
-    U,
+    w,
+    O,
+    j,
     I,
     d,
-    x,
-    O,
     c,
-    H,
-    W
-  ]), nt = p(
-    () => h.map((o) => o[n]),
-    [h, n]
-  ), xt = z(() => {
+    U,
+    P
+  ]), rt = x(
+    () => y.map((o) => o[n]),
+    [y, n]
+  ), It = v(() => {
     const o = /* @__PURE__ */ e(
-      $t,
+      qt,
       {
-        ...g,
-        dataSource: h,
+        ...tt,
+        summary: h,
+        dataSource: y,
         loading: C,
-        components: t ? { body: { row: Gt } } : void 0,
-        pagination: tt,
-        columns: ot
+        components: t ? { body: { row: Jt } } : void 0,
+        pagination: ot,
+        columns: nt
       }
     );
-    return t ? /* @__PURE__ */ e(Rt, { modifiers: [lt], onDragEnd: b, children: /* @__PURE__ */ e(
-      Dt,
+    return t ? /* @__PURE__ */ e(lt, { modifiers: [Bt], onDragEnd: g, children: /* @__PURE__ */ e(
+      Nt,
       {
-        items: nt,
-        strategy: Nt,
+        items: rt,
+        strategy: Ot,
         children: o
       }
     ) }) : o;
   }, [
-    g,
-    h,
-    C,
     tt,
+    y,
+    C,
     ot,
-    t,
     nt,
-    b
+    h,
+    t,
+    rt,
+    g
   ]);
-  return /* @__PURE__ */ E("div", { children: [
+  return /* @__PURE__ */ L("div", { children: [
     (typeof c == "boolean" || typeof c == "string") && /* @__PURE__ */ e(
-      Tt,
+      Rt,
       {
         width: "100%",
         open: !!m,
-        title: Ct ?? /* @__PURE__ */ e("div", { children: " " }),
-        footer: /* @__PURE__ */ e(rt, {}),
+        title: xt ?? /* @__PURE__ */ e("div", { children: " " }),
+        footer: /* @__PURE__ */ e(et, {}),
         closable: !0,
         onCancel: () => B(void 0),
-        children: !!m && /* @__PURE__ */ E("div", { children: [
+        children: !!m && /* @__PURE__ */ L("div", { children: [
           /* @__PURE__ */ e(
-            vt,
+            At,
             {
-              layout: yt,
-              descListColumn: it,
+              layout: pt,
+              descListColumn: ht,
               data: m,
-              fields: u,
+              fields: p,
               idField: n,
-              extraAction: O,
-              onUpdate: I,
-              onClickUpdate: d,
-              onClickClone: A,
-              onDelete: x,
+              extraAction: d,
+              onUpdate: O,
+              onClickUpdate: j,
+              onClickClone: _,
+              onDelete: I,
               onHide: N,
-              onExport: Q,
-              isHiding: l,
-              isDeleting: D,
-              confirmHiding: X,
-              confirmDeleting: Y,
-              closeViewOnClickUpdate: K,
-              recentUpdateOrDeleteId: w,
-              setRecentUpdateOrDeleteId: F,
+              onExport: X,
+              isHiding: D,
+              isDeleting: l,
+              confirmHiding: Y,
+              confirmDeleting: Z,
+              closeViewOnClickUpdate: Q,
+              recentUpdateOrDeleteId: F,
+              setRecentUpdateOrDeleteId: a,
               setOpenView: B
             }
           ),
-          M == null ? void 0 : M(m)
+          V == null ? void 0 : V(m)
         ] }, m == null ? void 0 : m[n])
       }
     ),
-    /* @__PURE__ */ e(zt, { fields: u, ...ht }),
-    /* @__PURE__ */ E(_t, { children: [
-      !!J && /* @__PURE__ */ e(jt, { onClick: J }),
-      xt()
+    /* @__PURE__ */ e(vt, { fields: p, ...yt }),
+    /* @__PURE__ */ L($t, { children: [
+      !!K && /* @__PURE__ */ e(Et, { onClick: K }),
+      It()
     ] })
   ] });
 }
-const ft = ut.createContext({}), qt = ({ tooltip: n }) => {
-  const { setActivatorNodeRef: C, listeners: u } = Vt(ft);
+const it = ft.createContext({}), Gt = ({ tooltip: h }) => {
+  const { setActivatorNodeRef: n, listeners: C } = kt(it);
   return /* @__PURE__ */ e(
-    dt,
+    jt,
     {
       type: "text",
       size: "small",
-      tooltip: n,
-      icon: /* @__PURE__ */ e(At, {}),
+      tooltip: h,
+      icon: /* @__PURE__ */ e(_t, {}),
       style: { cursor: "move", border: "none" },
-      ref: C,
-      ...u
+      ref: n,
+      ...C
     }
   );
-}, Gt = (n) => {
+}, Jt = (h) => {
   const {
-    attributes: C,
-    listeners: u,
-    setNodeRef: D,
+    attributes: n,
+    listeners: C,
+    setNodeRef: p,
     setActivatorNodeRef: l,
-    transform: c,
-    transition: f,
-    isDragging: x
-  } = Ot({ id: n["data-row-key"] }), N = {
-    ...n.style,
-    transform: Bt.Translate.toString(c),
-    transition: f,
-    ...x ? { position: "relative", zIndex: 9999 } : {}
-  }, I = p(
-    () => ({ setActivatorNodeRef: l, listeners: u }),
-    [l, u]
+    transform: D,
+    transition: c,
+    isDragging: u
+  } = dt({ id: h["data-row-key"] }), I = {
+    ...h.style,
+    transform: Dt.Translate.toString(D),
+    transition: c,
+    ...u ? { position: "relative", zIndex: 9999 } : {}
+  }, N = x(
+    () => ({ setActivatorNodeRef: l, listeners: C }),
+    [l, C]
   );
-  return /* @__PURE__ */ e(ft.Provider, { value: I, children: /* @__PURE__ */ e("tr", { ...n, ref: D, style: N, ...C }) });
+  return /* @__PURE__ */ e(it.Provider, { value: N, children: /* @__PURE__ */ e("tr", { ...h, ref: p, style: I, ...n }) });
 };
 export {
-  co as default
+  so as default
 };

package/dist/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css               */const t=require("./locale/hooks/translation-constants.cjs.js"),u=require("./locale/index.cjs.js"),C=require("./crud/CrudComponent.cjs.js"),r=require("./crud/CrudField.cjs.js"),n=require("./crud/CrudFormWizard.cjs.js"),i=require("./crud/CrudReportComponent.cjs.js"),l=require("./crud/CrudSearchComponent.cjs.js"),e=require("./crud/ImageCrudField.cjs.js"),o=require("./crud/FileCrudField.cjs.js"),a=require("./crud/CrudTextAreaComponent.cjs.js"),s=require("./crud/import/CrudImportComponent.cjs.js"),m=require("./crud/import/CrudImportButton.cjs.js"),p=require("./crud/actions/index.cjs.js"),c=require("./crud/view/CrudViewer.cjs.js"),F=require("./context/CrudComponentProvider.cjs.js"),d=require("./crud/CrudForm.cjs.js"),q=require("./crud/modal/index.cjs.js"),V=require("./crud/view/CrudDecListView.cjs.js"),I=require("./crud/view/CrudViewerUtil.cjs.js");exports.TRANSLATION_NAMESPACE=t.TRANSLATION_NAMESPACE;exports.setupI18n=u.setupI18n;exports.updateTranslations=u.updateTranslations;exports.CrudComponent=C;exports.ColorCrudFieldComponent=r.ColorCrudFieldComponent;exports.CrudField=r.default;exports.SelectCrudFieldComponent=r.SelectCrudFieldComponent;exports.CrudFormWizard=n;exports.CrudReportComponent=i;exports.CrudSearchComponent=l;exports.FileDownloadProvider=e.FileDownloadProvider;exports.FileUploadProvider=e.FileUploadProvider;exports.ImageCellValue=e.ImageCellValue;exports.ImageCrudCellValue=e.ImageCrudCellValue;exports.ImageCrudField=e.default;exports.FileCellValue=o.FileCellValue;exports.FileCrudCellValue=o.FileCrudCellValue;exports.FileCrudField=o.default;exports.CrudTextAreaComponent=a;exports.CrudImportComponent=s;exports.CrudImportButton=m;exports.CrudActions=p;exports.CrudViewer=c;exports.CrudComponentProvider=F.CrudComponentProvider;exports.CrudForm=d.CrudForm;exports.CrudFormFields=d.CrudFormFields;exports.CrudModal=q;exports.CrudDecListView=V.CrudDecListView;exports.getRendererValueCrudViewer=I.getRendererValueCrudViewer;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css               */const i=require("./locale/hooks/translation-constants.cjs.js"),u=require("./locale/index.cjs.js"),C=require("./crud/CrudComponent.cjs.js"),r=require("./crud/CrudField.cjs.js"),t=require("./crud/CrudFormWizard.cjs.js"),n=require("./crud/CrudReportComponent.cjs.js"),l=require("./crud/CrudSearchComponent.cjs.js"),e=require("./crud/ImageCrudField.cjs.js"),o=require("./crud/FileCrudField.cjs.js"),a=require("./crud/FileCrudDragNDropField.cjs.js"),s=require("./crud/CrudTextAreaComponent.cjs.js"),m=require("./crud/import/CrudImportComponent.cjs.js"),F=require("./crud/import/CrudImportButton.cjs.js"),p=require("./crud/actions/index.cjs.js"),c=require("./crud/view/CrudViewer.cjs.js"),q=require("./context/CrudComponentProvider.cjs.js"),d=require("./crud/CrudForm.cjs.js"),V=require("./crud/modal/index.cjs.js"),I=require("./crud/view/CrudDecListView.cjs.js"),g=require("./crud/view/CrudViewerUtil.cjs.js");exports.TRANSLATION_NAMESPACE=i.TRANSLATION_NAMESPACE;exports.setupI18n=u.setupI18n;exports.updateTranslations=u.updateTranslations;exports.CrudComponent=C;exports.ColorCrudFieldComponent=r.ColorCrudFieldComponent;exports.CrudField=r.default;exports.SelectCrudFieldComponent=r.SelectCrudFieldComponent;exports.CrudFormWizard=t;exports.CrudReportComponent=n;exports.CrudSearchComponent=l;exports.FileDownloadProvider=e.FileDownloadProvider;exports.FileUploadProvider=e.FileUploadProvider;exports.ImageCellValue=e.ImageCellValue;exports.ImageCrudCellValue=e.ImageCrudCellValue;exports.ImageCrudField=e.default;exports.FileCellValue=o.FileCellValue;exports.FileCrudCellValue=o.FileCrudCellValue;exports.FileCrudField=o.default;exports.FileCrudDragNDropField=a;exports.CrudTextAreaComponent=s;exports.CrudImportComponent=m;exports.CrudImportButton=F;exports.CrudActions=p;exports.CrudViewer=c;exports.CrudComponentProvider=q.CrudComponentProvider;exports.CrudForm=d.CrudForm;exports.CrudFormFields=d.CrudFormFields;exports.CrudModal=V;exports.CrudDecListView=I.CrudDecListView;exports.getRendererValueCrudViewer=g.getRendererValueCrudViewer;

package/dist/index.es.js

@@ -2,50 +2,52 @@
 import { TRANSLATION_NAMESPACE as t } from "./locale/hooks/translation-constants.es.js";
 import { setupI18n as a, updateTranslations as l } from "./locale/index.es.js";
 import { default as m } from "./crud/CrudComponent.es.js";
-import { ColorCrudFieldComponent as p, default as f, SelectCrudFieldComponent as n } from "./crud/CrudField.es.js";
+import { ColorCrudFieldComponent as p, default as f, SelectCrudFieldComponent as i } from "./crud/CrudField.es.js";
 import { default as x } from "./crud/CrudFormWizard.es.js";
 import { default as F } from "./crud/CrudReportComponent.es.js";
 import { default as I } from "./crud/CrudSearchComponent.es.js";
-import { FileDownloadProvider as c, FileUploadProvider as g, ImageCellValue as w, ImageCrudCellValue as P, default as S } from "./crud/ImageCrudField.es.js";
-import { FileCellValue as v, FileCrudCellValue as N, default as R } from "./crud/FileCrudField.es.js";
-import { default as E } from "./crud/CrudTextAreaComponent.es.js";
-import { default as M } from "./crud/import/CrudImportComponent.es.js";
-import { default as z } from "./crud/import/CrudImportButton.es.js";
-import { default as O } from "./crud/actions/index.es.js";
-import { default as W } from "./crud/view/CrudViewer.es.js";
-import { CrudComponentProvider as b } from "./context/CrudComponentProvider.es.js";
-import { CrudForm as k, CrudFormFields as q } from "./crud/CrudForm.es.js";
-import { default as G } from "./crud/modal/index.es.js";
-import { CrudDecListView as J } from "./crud/view/CrudDecListView.es.js";
-import { getRendererValueCrudViewer as Q } from "./crud/view/CrudViewerUtil.es.js";
+import { FileDownloadProvider as g, FileUploadProvider as c, ImageCellValue as w, ImageCrudCellValue as D, default as N } from "./crud/ImageCrudField.es.js";
+import { FileCellValue as S, FileCrudCellValue as T, default as v } from "./crud/FileCrudField.es.js";
+import { default as E } from "./crud/FileCrudDragNDropField.es.js";
+import { default as M } from "./crud/CrudTextAreaComponent.es.js";
+import { default as z } from "./crud/import/CrudImportComponent.es.js";
+import { default as O } from "./crud/import/CrudImportButton.es.js";
+import { default as W } from "./crud/actions/index.es.js";
+import { default as b } from "./crud/view/CrudViewer.es.js";
+import { CrudComponentProvider as k } from "./context/CrudComponentProvider.es.js";
+import { CrudForm as y, CrudFormFields as G } from "./crud/CrudForm.es.js";
+import { default as J } from "./crud/modal/index.es.js";
+import { CrudDecListView as Q } from "./crud/view/CrudDecListView.es.js";
+import { getRendererValueCrudViewer as Y } from "./crud/view/CrudViewerUtil.es.js";
 export {
   p as ColorCrudFieldComponent,
-  O as CrudActions,
+  W as CrudActions,
   m as CrudComponent,
-  b as CrudComponentProvider,
-  J as CrudDecListView,
+  k as CrudComponentProvider,
+  Q as CrudDecListView,
   f as CrudField,
-  k as CrudForm,
-  q as CrudFormFields,
+  y as CrudForm,
+  G as CrudFormFields,
   x as CrudFormWizard,
-  z as CrudImportButton,
-  M as CrudImportComponent,
-  G as CrudModal,
+  O as CrudImportButton,
+  z as CrudImportComponent,
+  J as CrudModal,
   F as CrudReportComponent,
   I as CrudSearchComponent,
-  E as CrudTextAreaComponent,
-  W as CrudViewer,
-  v as FileCellValue,
-  N as FileCrudCellValue,
-  R as FileCrudField,
-  c as FileDownloadProvider,
-  g as FileUploadProvider,
+  M as CrudTextAreaComponent,
+  b as CrudViewer,
+  S as FileCellValue,
+  T as FileCrudCellValue,
+  E as FileCrudDragNDropField,
+  v as FileCrudField,
+  g as FileDownloadProvider,
+  c as FileUploadProvider,
   w as ImageCellValue,
-  P as ImageCrudCellValue,
-  S as ImageCrudField,
-  n as SelectCrudFieldComponent,
+  D as ImageCrudCellValue,
+  N as ImageCrudField,
+  i as SelectCrudFieldComponent,
   t as TRANSLATION_NAMESPACE,
-  Q as getRendererValueCrudViewer,
+  Y as getRendererValueCrudViewer,
   a as setupI18n,
   l as updateTranslations
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kingteza/crud-component",
   "private": false,
-  "version": "1.23.1",
+  "version": "1.25.0",
   "description": "React CRUD component library with Ant Design",
   "keywords": [
     "react",