@kingteza/crud-component 1.27.3 → 1.29.1

package/dist/crud/modal/index.es.js

@@ -1,149 +1,154 @@
-import { jsx as S, jsxs as J } from "react/jsx-runtime";
-import { Form as K, Modal as Q, Spin as X } from "antd";
-import { forwardRef as Y, useState as u, useCallback as m, useImperativeHandle as Z, useEffect as z } from "react";
-import { CrudForm as ee } from "../CrudForm.es.js";
-import te from "../CrudFormWizard.es.js";
-import { useTranslationLib as oe } from "../../locale/index.es.js";
-import R from "../../util/CrudUtil.es.js";
-import ne from "dayjs";
-const se = ({
+import { jsx as P, jsxs as K } from "react/jsx-runtime";
+import { Form as Q, Modal as X, Spin as Y } from "antd";
+import { forwardRef as Z, useState as u, useCallback as F, useImperativeHandle as z, useEffect as ee } from "react";
+import { CrudForm as te } from "../CrudForm.es.js";
+import oe from "../CrudFormWizard.es.js";
+import { useTranslationLib as ne } from "../../locale/index.es.js";
+import T from "../../util/CrudUtil.es.js";
+import se from "dayjs";
+import { setValueByPath as p, getValueByPath as ae } from "../../util/ObjectUtil.es.js";
+const le = ({
   fields: c,
-  wizard: l,
-  grid: T,
-  fullWidthModal: W,
-  isCreating: x,
-  isUpdating: C,
-  onCreate: v,
-  onUpdate: b,
-  idField: B = "id",
-  formBuilder: _,
-  onValuesChange: V
-}, A) => {
-  const [t] = K.useForm(), { t: h } = oe(), [k, F] = u(!1), [p, j] = u("new"), [f, y] = u(), [L, g] = u(), [E, P] = u(!1), [$, N] = u(!1), [q, U] = u(!1), O = m(
+  wizard: a,
+  grid: W,
+  fullWidthModal: _,
+  isCreating: S,
+  isUpdating: x,
+  onCreate: b,
+  onUpdate: B,
+  idField: h = "id",
+  formBuilder: A,
+  onValuesChange: C
+}, L) => {
+  const [t] = Q.useForm(), { t: k } = ne(), [V, y] = u(!1), [f, j] = u("new"), [m, g] = u(), [E, v] = u(), [$, U] = u(!1), [q, N] = u(!1), [w, O] = u(!1), D = F(
     async (i) => {
       var o;
-      const d = l ? i : await t.validateFields(), a = c.filter((s) => s.type === "color"), n = {};
-      for (const s of a) {
-        const e = R.getRealName(s.name, "upsertFieldName"), r = t.getFieldValue(e);
-        n[e] = typeof r == "string" ? r : (o = r == null ? void 0 : r.toHexString()) == null ? void 0 : o.toUpperCase();
+      const d = a ? i : await t.validateFields(), l = c.filter((s) => s.type === "color"), n = {};
+      for (const s of l) {
+        const e = T.getRealName(s.name, "upsertFieldName"), r = t.getFieldValue(e);
+        p(
+          n,
+          e,
+          typeof r == "string" ? r : (o = r == null ? void 0 : r.toHexString()) == null ? void 0 : o.toUpperCase()
+        );
       }
-      Object.assign(d, n), f && b ? (await b({
+      Object.assign(d, n), m && B ? (await B({
         ...d,
-        [B]: f[B]
-      }), y(void 0)) : !f && v && await v(d), g(void 0), t.resetFields(), F(!1);
+        [h]: m[h]
+      }), g(void 0)) : !m && b && await b(d), v(void 0), t.resetFields(), y(!1);
     },
-    [c, t, B, v, b, f, l]
-  ), D = m(async (i) => {
-    P(i), N(!0);
-  }, []), H = m(async () => {
+    [c, t, h, b, B, m, a]
+  ), H = F(async (i) => {
+    U(i), N(!0);
+  }, []), I = F(async () => {
     N(!0);
-  }, []), I = m(() => {
-    F(!0), j("new"), t.resetFields(), y(void 0), g(void 0);
-  }, [t]), M = m(
-    async (i, d = !0, a = !1) => {
+  }, []), M = F(() => {
+    y(!0), j("new"), t.resetFields(), g(void 0), v(void 0);
+  }, [t]), R = F(
+    async (i, d = !0, l = !1) => {
       try {
-        U(!0), F(!0), j(a ? "clone" : "update");
+        O(!0), y(!0), j(l ? "clone" : "update");
         const n = {};
         for (const o of c) {
-          const s = R.getRealName(
+          const s = T.getRealName(
             o.name,
             "upsertFieldName"
-          ), e = i[s];
-          if (a && o.type === "image") {
+          ), e = ae(i, s);
+          if (l && o.type === "image") {
             const r = e;
             try {
-              const G = await o.provider.clone(r);
-              n[s] = G;
+              const J = await o.provider.clone(r);
+              p(n, s, J);
               continue;
             } catch {
               continue;
             }
           }
-          o.type === "date" || o.type === "time" ? e && (n[s] = ne(e)) : o.type === "select" ? o.multiple && Array.isArray(e) ? n[s] = e.map(
+          o.type === "date" || o.type === "time" ? e && p(n, s, se(e)) : o.type === "select" ? o.multiple && Array.isArray(e) ? p(n, s, e.map(
             (r) => r[o.innerFieldId ?? "id"]
-          ) : e && typeof e == "object" ? n[s] = e[o.innerFieldId ?? "id"] : (e && typeof e == "string" || typeof e == "number") && (n[s] = e) : n[s] = e;
+          )) : e && typeof e == "object" ? p(n, s, e[o.innerFieldId ?? "id"]) : (e && typeof e == "string" || typeof e == "number") && p(n, s, e) : p(n, s, e);
         }
-        t.setFieldsValue(n), g(n), d && y(i);
+        t.setFieldsValue(n), v(n), d && g(i);
       } finally {
-        U(!1);
+        O(!1);
       }
     },
     [c, t]
   );
-  Z(
-    A,
+  z(
+    L,
     () => ({
-      create: I,
-      update: M
+      create: M,
+      update: R
     }),
-    [I, M]
-  ), z(() => {
-    k && (P(!1), N(!1));
-  }, [k]);
-  const w = m(async () => {
+    [M, R]
+  ), ee(() => {
+    V && (U(!1), N(!1));
+  }, [V]);
+  const G = F(async () => {
     try {
-      if (p === "clone") {
-        const i = l ? f : t.getFieldsValue(), d = c.filter((a) => a.type === "image");
-        for (const a of d)
-          i[a.name] && a.provider.delete(i[a.name]);
+      if (f === "clone") {
+        const i = a ? m : t.getFieldsValue(), d = c.filter((l) => l.type === "image");
+        for (const l of d)
+          i[l.name] && l.provider.delete(i[l.name]);
       }
     } finally {
     }
-    l || t.resetFields(), g(void 0), y(void 0), F(!1);
-  }, [p, l, t, f, c]);
-  return /* @__PURE__ */ S(
-    Q,
+    a || t.resetFields(), v(void 0), g(void 0), y(!1);
+  }, [f, a, t, m, c]);
+  return /* @__PURE__ */ P(
+    X,
     {
-      width: W ? "100%" : void 0,
-      title: h("str." + (p ?? "new")),
-      open: k,
-      confirmLoading: x || C,
-      okText: h("str." + (p === "update" ? "update" : "save")),
-      cancelText: h("str.cancel"),
+      width: _ ? "100%" : void 0,
+      title: k("str." + (f ?? "new")),
+      open: V,
+      confirmLoading: S || x,
+      okText: k("str." + (f === "update" ? "update" : "save")),
+      cancelText: k("str.cancel"),
       cancelButtonProps: {
-        disabled: $,
-        hidden: !!l
+        disabled: q,
+        hidden: !!a
       },
       okButtonProps: {
-        disabled: E,
-        hidden: !!l
+        disabled: $,
+        hidden: !!a
       },
-      onCancel: w,
-      onOk: () => O(),
+      onCancel: G,
+      onOk: () => D(),
       destroyOnHidden: !0,
-      children: /* @__PURE__ */ J(X, { spinning: q, children: [
-        l ? null : /* @__PURE__ */ S(
-          ee,
+      children: /* @__PURE__ */ K(Y, { spinning: w, children: [
+        a ? null : /* @__PURE__ */ P(
+          te,
           {
-            purpose: p,
+            purpose: f,
             fields: c,
             form: t,
-            formBuilder: _,
-            grid: T,
-            onDeleteFile: H,
-            onUploadFile: D,
-            onValuesChange: V
+            formBuilder: A,
+            grid: W,
+            onDeleteFile: I,
+            onUploadFile: H,
+            onValuesChange: C
           }
         ),
-        l && /* @__PURE__ */ S(
-          te,
+        a && /* @__PURE__ */ P(
+          oe,
           {
-            submitting: x || C,
+            submitting: S || x,
             className: "mt-2",
-            onSave: O,
-            updatingValue: L,
+            onSave: D,
+            updatingValue: E,
             fields: c,
-            onDeleteFile: H,
-            onUploadFile: D,
-            purpose: p,
-            wizard: l,
-            onValuesChange: V
+            onDeleteFile: I,
+            onUploadFile: H,
+            purpose: f,
+            wizard: a,
+            onValuesChange: C
           }
         )
       ] })
     }
   );
-}, fe = Y(se);
+}, ye = Z(le);
 export {
-  fe as default
+  ye as default
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),d=require("../../common/description/DescList.cjs.js"),j=require("react"),v=require("../../locale/index.cjs.js"),V=require("./CrudViewerUtil.cjs.js"),f=require("../../util/CrudUtil.cjs.js"),p=require("../actions/index.cjs.js");function w({className:m,fields:i,data:e,descListColumn:b={xs:1,md:3,sm:2,lg:4},layout:g,keepEmptyValues:q,inBuiltModalProps:u,...s}){const{t:o}=v.useTranslationLib(),x=j.useMemo(()=>{const l=i.filter(({hidden:r,hideInDescList:n})=>!r&&!n).map((r,n)=>{const C=f.getRealName(r.name);return{label:r.label,noFormatting:!0,value:V.getRendererValueCrudViewer(r)(e==null?void 0:e[C],e,n)}}),c=e?t.jsx(p,{data:e,...s,inBuiltModalProps:u?{...u,fields:i}:void 0}):void 0;return c&&l.push({label:o("str.action"),value:c}),l},[e,i,o,s]);return e?t.jsx(d,{keepEmptyValues:q,bordered:!0,column:b,className:m,layout:g,list:x}):t.jsx(t.Fragment,{})}exports.CrudDecListView=w;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),x=require("../../common/description/DescList.cjs.js"),j=require("react"),C=require("../../locale/index.cjs.js"),V=require("./CrudViewerUtil.cjs.js"),v=require("../../util/CrudUtil.cjs.js"),f=require("../actions/index.cjs.js"),p=require("../../util/ObjectUtil.cjs.js");function w({className:m,fields:i,data:e,descListColumn:a={xs:1,md:3,sm:2,lg:4},layout:d,keepEmptyValues:b,inBuiltModalProps:u,...s}){const{t:o}=C.useTranslationLib(),g=j.useMemo(()=>{const l=i.filter(({hidden:t,hideInDescList:n})=>!t&&!n).map((t,n)=>{const q=v.getRealName(t.name);return{label:t.label,noFormatting:!0,value:V.getRendererValueCrudViewer(t)(p.getValueByPath(e,q),e,n)}}),c=e?r.jsx(f,{data:e,...s,inBuiltModalProps:u?{...u,fields:i}:void 0}):void 0;return c&&l.push({label:o("str.action"),value:c}),l},[e,i,o,s]);return e?r.jsx(x,{keepEmptyValues:b,bordered:!0,column:a,className:m,layout:d,list:g}):r.jsx(r.Fragment,{})}exports.CrudDecListView=w;

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

@@ -1,10 +1,10 @@
 import { Breakpoint } from 'antd';
-import { CrudFieldProps } from '../CrudComponent';
+import { ReadonlyCrudFields } from '../CrudComponent';
 import { CrudActionsProps } from '../actions';
 import { CrudModalProps } from '../modal';
 export type DescListColumn = number | Partial<Record<Breakpoint, number>> | undefined;
 export interface CrudDecListViewProps<T, FormType = T> extends Omit<CrudActionsProps<T, FormType>, "inBuiltModalProps"> {
-    fields: CrudFieldProps<T>[];
+    fields: ReadonlyCrudFields<T>;
     data: T | undefined;
     className?: string;
     descListColumn?: DescListColumn;

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

@@ -1,57 +1,58 @@
-import { jsx as i, Fragment as v } from "react/jsx-runtime";
-import x from "../../common/description/DescList.es.js";
-import { useMemo as F } from "react";
-import { useTranslationLib as L } from "../../locale/index.es.js";
-import { getRendererValueCrudViewer as V } from "./CrudViewerUtil.es.js";
-import w from "../../util/CrudUtil.es.js";
-import D from "../actions/index.es.js";
-function _({
+import { jsx as m, Fragment as C } from "react/jsx-runtime";
+import d from "../../common/description/DescList.es.js";
+import { useMemo as v } from "react";
+import { useTranslationLib as V } from "../../locale/index.es.js";
+import { getRendererValueCrudViewer as x } from "./CrudViewerUtil.es.js";
+import F from "../../util/CrudUtil.es.js";
+import L from "../actions/index.es.js";
+import { getValueByPath as h } from "../../util/ObjectUtil.es.js";
+function T({
   className: p,
-  fields: o,
+  fields: t,
   data: r,
-  descListColumn: c = { xs: 1, md: 3, sm: 2, lg: 4 },
-  layout: f,
-  keepEmptyValues: b,
-  inBuiltModalProps: m,
+  descListColumn: f = { xs: 1, md: 3, sm: 2, lg: 4 },
+  layout: c,
+  keepEmptyValues: a,
+  inBuiltModalProps: i,
   ...n
 }) {
-  const { t: u } = L(), g = F(() => {
-    const l = o.filter(({ hidden: e, hideInDescList: t }) => !e && !t).map((e, t) => {
-      const C = w.getRealName(e.name);
+  const { t: u } = V(), g = v(() => {
+    const l = t.filter(({ hidden: e, hideInDescList: o }) => !e && !o).map((e, o) => {
+      const b = F.getRealName(e.name);
       return {
         label: e.label,
         noFormatting: !0,
-        value: V(e)(
-          r == null ? void 0 : r[C],
+        value: x(e)(
+          h(r, b),
           r,
-          t
+          o
         )
       };
-    }), s = r ? /* @__PURE__ */ i(
-      D,
+    }), s = r ? /* @__PURE__ */ m(
+      L,
       {
         data: r,
         ...n,
-        inBuiltModalProps: m ? { ...m, fields: o } : void 0
+        inBuiltModalProps: i ? { ...i, fields: t } : void 0
       }
     ) : void 0;
     return s && l.push({
       label: u("str.action"),
       value: s
     }), l;
-  }, [r, o, u, n]);
-  return r ? /* @__PURE__ */ i(
-    x,
+  }, [r, t, u, n]);
+  return r ? /* @__PURE__ */ m(
+    d,
     {
-      keepEmptyValues: b,
+      keepEmptyValues: a,
       bordered: !0,
-      column: c,
+      column: f,
       className: p,
-      layout: f,
+      layout: c,
       list: g
     }
-  ) : /* @__PURE__ */ i(v, {});
+  ) : /* @__PURE__ */ m(C, {});
 }
 export {
-  _ as CrudDecListView
+  T as CrudDecListView
 };

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

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

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

@@ -4,7 +4,7 @@ import { DragEndEvent } from '@dnd-kit/core';
 import { TableProps } from 'antd/lib';
 import { CrudActionsProps } from '../actions';
 import { default as React } from 'react';
-import { CrudFieldProps, CrudPaginateProps } from '../CrudComponent';
+import { CrudPaginateProps, ReadonlyCrudFields } from '../CrudComponent';
 import { CrudSearchComponentProps } from '../CrudSearchComponent';
 import { DescListColumn } from './CrudDecListView';
 type TableRowSelection<T> = TableProps<T>["rowSelection"];
@@ -21,7 +21,7 @@ export type CrudViewableProps<T> = boolean | keyof T | {
 };
 export type CrudViewerProps<T, FormType> = {
     summary?: TableProps<T>["summary"];
-    fields: CrudFieldProps<T>[];
+    fields: ReadonlyCrudFields<T>;
     decListLayout?: "horizontal" | "vertical";
     viewable?: CrudViewableProps<T>;
     paginateProps?: CrudPaginateProps;
@@ -42,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>({ 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;
+declare function CrudViewer<T, FormType = T>({ summary, idField, loadingData, fields, isDeleting, isHiding, viewable, paginateProps, onDelete, deletable, updatable, 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;