@kingteza/crud-component 1.0.63 → 1.0.65

package/crud/view/CrudDecListView.cjs.js

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

package/crud/view/CrudDecListView.d.ts

@@ -1,14 +1,15 @@
 import { Breakpoint } from 'antd';
-import { default as React } from 'react';
 import { CrudFieldProps } from '../CrudComponent';
+import { CrudActionsProps } from '../actions';
+import { CrudModalProps } from '../modal';
 export type DescListColumn = number | Partial<Record<Breakpoint, number>> | undefined;
-export interface CrudDecListViewProps<T> {
+export interface CrudDecListViewProps<T, FormType = T> extends CrudActionsProps<T, FormType> {
     fields: CrudFieldProps<T>[];
     data: T | undefined;
     className?: string;
     descListColumn?: DescListColumn;
     layout?: "horizontal" | "vertical";
-    action?: React.JSX.Element;
     keepEmptyValues?: boolean;
+    inBuiltModalProps?: CrudModalProps<T, FormType>;
 }
-export declare function CrudDecListView<T>({ className, fields, data, descListColumn, layout, action, keepEmptyValues, }: Readonly<CrudDecListViewProps<T>>): import("react/jsx-runtime").JSX.Element;
+export declare function CrudDecListView<T, FormType = T>({ className, fields, data, descListColumn, layout, keepEmptyValues, inBuiltModalProps, ...crudActionsProps }: Readonly<CrudDecListViewProps<T, FormType>>): import("react/jsx-runtime").JSX.Element;

package/crud/view/CrudDecListView.es.js

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

package/crud/view/CrudViewer.cjs.js

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

package/crud/view/CrudViewer.d.ts

@@ -2,8 +2,8 @@ import { SizeType } from 'antd/es/config-provider/SizeContext';
 import { ExpandableConfig } from 'antd/es/table/interface';
 import { DragEndEvent } from '@dnd-kit/core';
 import { TableProps } from 'antd/lib';
-import { default as React, ReactElement } from 'react';
-import { default as IdProps } from '../../types/Id';
+import { CrudActionsProps } from '../actions';
+import { default as React } from 'react';
 import { CrudFieldProps, CrudPaginateProps } from '../CrudComponent';
 import { CrudSearchComponentProps } from '../CrudSearchComponent';
 import { DescListColumn } from './CrudDecListView';
@@ -15,31 +15,21 @@ export type CrudDragableProps<T> = {
     columnLabel?: string;
     tooltip?: string;
 };
+export type CrudViewableProps<T> = boolean | keyof T | {
+    onClick: (t: T) => void;
+};
 export type CrudViewerProps<T, FormType> = {
     fields: CrudFieldProps<T>[];
     decListLayout?: "horizontal" | "vertical";
-    viewable?: boolean | keyof T;
+    viewable?: CrudViewableProps<T>;
     paginateProps?: CrudPaginateProps;
-    onDelete?: (id: any) => Promise<any>;
-    confirmDeleting?: boolean;
-    confirmHiding?: boolean;
-    onHide?: (id: any) => Promise<any>;
-    onUpdate?: (t: FormType & IdProps) => Promise<any>;
-    onExport?: (t: T) => Promise<any>;
     data: T[] | undefined;
-    extraAction?: (t: T) => ReactElement | undefined | ReactElement[];
-    onClickUpdate?: (t: T) => void;
-    closeViewOnClickUpdate?: boolean;
-    isHiding?: boolean;
-    isDeleting?: boolean;
-    idField?: string;
     loadingData?: boolean;
     minusHeight?: string;
     scroll?: TableProps<T>["scroll"];
     className?: string;
     bordered?: boolean;
     size?: SizeType;
-    onClickClone?: (t: T) => Promise<any>;
     onClickRefresh?: () => void;
     expandable?: ExpandableConfig<T>;
     descListColumn?: DescListColumn;
@@ -48,6 +38,6 @@ export type CrudViewerProps<T, FormType> = {
     rowClassName?: TableProps<T>["rowClassName"];
     actionWidth?: string | number;
     draggable?: CrudDragableProps<T>;
-} & CrudSearchComponentProps<T, FormType>;
+} & 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, ...props }: CrudViewerProps<T, FormType>): import("react/jsx-runtime").JSX.Element;
 export default CrudViewer;