@kingteza/crud-component 1.30.0 → 1.31.0

package/dist/common/report/SelectFieldInReport.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),o=require("antd"),u=require("react"),f=require("../select/SelectComponent.cjs.js"),b=({className:a,onSelect:d,label:S,required:p,name:l,mode:c,items:t})=>{const r=o.Form.useFormInstance(),[s,F]=u.useState(!0);return u.useEffect(()=>{if(t&&s){const e=t.filter(i=>i.alreadySelected).map(i=>i.id);r==null||r.setFieldsValue({[l]:c==="multiple"?e:e==null?void 0:e[0]}),F(!1)}},[s,r,t,c,l]),n.jsx(f,{required:p,label:S,mode:c,className:a,name:l,onSelect:d,items:t,itemBuilder:e=>n.jsx(o.Select.Option,{value:e.id,disabled:e.lock,children:e.label},e.id)})};exports.SelectFieldInReport=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("antd"),i=require("react"),I=require("../select/SelectComponent.cjs.js"),v=require("../../util/ValidationUtil.cjs.js"),V=({className:x,onSelect:p,label:r,required:a,name:l,mode:d,items:n,selectingMode:k})=>{const o=s.Form.useFormInstance(),[b,S]=i.useState(!0);i.useEffect(()=>{if(n&&b){const e=n.filter(h=>h.alreadySelected).map(h=>h.id);o==null||o.setFieldsValue({[l]:d==="multiple"?e:e==null?void 0:e[0]}),S(!1)}},[b,o,n,d,l]);const[F,u]=i.useState(!1),[f,C]=i.useState(void 0),O=i.useCallback(()=>{u(!1),o.setFieldsValue({[l]:f})},[f,o,l]),g=i.useCallback(()=>{u(!1),C(void 0)},[]),j=i.useCallback(()=>{C(o.getFieldValue(l)),u(!0)},[o,l]),c=k==="checkbox",y=i.useCallback(e=>{c&&e&&j()},[c,j]);return t.jsxs(t.Fragment,{children:[c&&t.jsx(s.Modal,{open:F,onCancel:O,onOk:g,destroyOnHidden:!0,title:r,children:t.jsx(s.Form.Item,{name:l,required:a,rules:[...a?v.required(r):[]],className:x,children:t.jsx(s.Checkbox.Group,{onChange:p,style:{width:"100%"},children:t.jsx(s.List,{size:"small",style:{width:"100%"},dataSource:n,renderItem:e=>t.jsx(s.List.Item,{style:{width:"100%"},children:t.jsx(s.List.Item.Meta,{avatar:t.jsx(s.Checkbox,{value:e.id,disabled:e.lock}),title:e.label})},e.id)})})})}),t.jsx(I,{required:a,label:r,mode:d,className:x,name:l,onSelect:p,items:n,showSearch:!1,...c?{open:!1,onOpenChange:y}:{},itemBuilder:e=>t.jsx(s.Select.Option,{value:e.id,disabled:e.lock,children:e.label},e.id)})]})};exports.SelectFieldInReport=V;

package/dist/common/report/SelectFieldInReport.d.ts

@@ -5,6 +5,7 @@ export interface ReportSelectFieldItems {
     lock?: boolean;
     alreadySelected?: boolean;
 }
+export type SelectFieldInReportSelectingMode = "checkbox" | "select";
 export declare const SelectFieldInReport: FC<{
     mode?: "multiple" | "tags" | undefined;
     name: string;
@@ -13,4 +14,5 @@ export declare const SelectFieldInReport: FC<{
     required?: boolean;
     onSelect?: (val: any) => void;
     items: ReportSelectFieldItems[];
+    selectingMode?: SelectFieldInReportSelectingMode;
 }>;

package/dist/common/report/SelectFieldInReport.es.js

@@ -1,30 +1,93 @@
-import { jsx as s } from "react/jsx-runtime";
-import { Form as f, Select as m } from "antd";
-import { useState as F, useEffect as S } from "react";
-import b from "../select/SelectComponent.es.js";
-const k = ({ className: n, onSelect: p, label: u, required: a, name: l, mode: o, items: e }) => {
-  const r = f.useFormInstance(), [c, d] = F(!0);
-  return S(() => {
-    if (e && c) {
-      const t = e.filter((i) => i.alreadySelected).map((i) => i.id);
-      r == null || r.setFieldsValue({
-        [l]: o === "multiple" ? t : t == null ? void 0 : t[0]
-      }), d(!1);
-    }
-  }, [c, r, e, o, l]), /* @__PURE__ */ s(
-    b,
-    {
-      required: a,
-      label: u,
-      mode: o,
-      className: n,
-      name: l,
-      onSelect: p,
-      items: e,
-      itemBuilder: (t) => /* @__PURE__ */ s(m.Option, { value: t.id, disabled: t.lock, children: t.label }, t.id)
+import { jsxs as w, Fragment as M, jsx as t } from "react/jsx-runtime";
+import { Form as O, Modal as j, Checkbox as S, List as p, Select as B } from "antd";
+import { useState as f, useEffect as z, useCallback as r } from "react";
+import E from "../select/SelectComponent.es.js";
+import G from "../../util/ValidationUtil.es.js";
+const D = ({
+  className: h,
+  onSelect: C,
+  label: n,
+  required: c,
+  name: l,
+  mode: d,
+  items: i,
+  selectingMode: x
+}) => {
+  const o = O.useFormInstance(), [k, I] = f(!0);
+  z(() => {
+    if (i && k) {
+      const e = i.filter((u) => u.alreadySelected).map((u) => u.id);
+      o == null || o.setFieldsValue({
+        [l]: d === "multiple" ? e : e == null ? void 0 : e[0]
+      }), I(!1);
     }
+  }, [k, o, i, d, l]);
+  const [V, a] = f(!1), [F, b] = f(void 0), g = r(() => {
+    a(!1), o.setFieldsValue({
+      [l]: F
+    });
+  }, [F, o, l]), v = r(() => {
+    a(!1), b(void 0);
+  }, []), m = r(() => {
+    b(o.getFieldValue(l)), a(!0);
+  }, [o, l]), s = x === "checkbox", y = r(
+    (e) => {
+      s && e && m();
+    },
+    [s, m]
   );
+  return /* @__PURE__ */ w(M, { children: [
+    s && /* @__PURE__ */ t(
+      j,
+      {
+        open: V,
+        onCancel: g,
+        onOk: v,
+        destroyOnHidden: !0,
+        title: n,
+        children: /* @__PURE__ */ t(
+          O.Item,
+          {
+            name: l,
+            required: c,
+            rules: [...c ? G.required(n) : []],
+            className: h,
+            children: /* @__PURE__ */ t(S.Group, { onChange: C, style: { width: "100%" }, children: /* @__PURE__ */ t(
+              p,
+              {
+                size: "small",
+                style: { width: "100%" },
+                dataSource: i,
+                renderItem: (e) => /* @__PURE__ */ t(p.Item, { style: { width: "100%" }, children: /* @__PURE__ */ t(
+                  p.Item.Meta,
+                  {
+                    avatar: /* @__PURE__ */ t(S, { value: e.id, disabled: e.lock }),
+                    title: e.label
+                  }
+                ) }, e.id)
+              }
+            ) })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ t(
+      E,
+      {
+        required: c,
+        label: n,
+        mode: d,
+        className: h,
+        name: l,
+        onSelect: C,
+        items: i,
+        showSearch: !1,
+        ...s ? { open: !1, onOpenChange: y } : {},
+        itemBuilder: (e) => /* @__PURE__ */ t(B.Option, { value: e.id, disabled: e.lock, children: e.label }, e.id)
+      }
+    )
+  ] });
 };
 export {
-  k as SelectFieldInReport
+  D as SelectFieldInReport
 };

package/dist/crud/CrudReportComponent.cjs.js

@@ -1 +1 @@
-"use strict";const t=require("react/jsx-runtime"),J=require("@ant-design/icons"),s=require("antd"),i=require("react"),x=require("./CrudField.cjs.js"),K=require("./view/CrudViewer.cjs.js"),M=require("../common/report/SelectFieldInReport.cjs.js"),V=require("./view/CrudViewerUtil.cjs.js"),Q=require("../common/select/SelectComponent.cjs.js"),v=require("../common/button/Button.cjs.js"),W=require("../common/button/PrintButton.cjs.js"),A={lg:6,md:8,sm:12,xs:24},X={lg:12,md:16,sm:24,xs:24};function Y({fields:d,data:u,idField:L,loadingData:f,onSubmit:g,paginateProps:G,size:O,onClickPrint:h,onClickExcelExport:y,minusHeight:U,extraSearchFields:R,searchOnMount:B,summary:_}){const{searchable:$,selectable:c,sortable:F,defaultSort:p}=i.useMemo(()=>{var b,m,N,I,T;const e=[],r=[],o=[];let n;for(const l of d.filter(H=>!H.hidden))l.type==="image"||!l.report||((b=l.report)!=null&&b.searchable&&e.push(l),(m=l.report)!=null&&m.sortable&&(r.push(l),!n&&((N=l.report)!=null&&N.defaultSort)&&(n=l)),l.hideInTable||o.push({id:l.name,label:l.label,lock:(I=l.report)==null?void 0:I.lock,alreadySelected:(T=l.report)==null?void 0:T.alreadySelected}));return{defaultSort:n,searchable:e,sortable:r,selectable:o}},[d]),[S,q]=i.useState([]),j=i.useCallback(async({sortBy:e,sortByType:r,showFields:o=[],...n})=>{const b=[];e&&b.push({field:e,sort:r??"DESC"}),q(d.filter(m=>o.includes(m.name)).map(m=>({...m,hideInTable:!1}))),g({showFields:o,sortBy:b,...n})},[d,g]),[a]=s.Form.useForm(),[w,z]=i.useState(!1),[C,D]=i.useState(!0);return i.useEffect(()=>{if(B&&C){const e=setTimeout(()=>{a.validateFields().then(r=>{j(r)}),D(!1)},200);return()=>clearTimeout(e)}},[j,a,C,B]),i.useEffect(()=>{var r,o;!a.getFieldValue("sortBy")&&p&&a.setFieldsValue({sortBy:p.name,sortByType:typeof((r=p.report)==null?void 0:r.defaultSort)=="string"?(o=p.report)==null?void 0:o.defaultSort:"ASC"})},[p,a]),i.useEffect(()=>{if(w){const e=c.filter(r=>r.alreadySelected).map(r=>r.id);q(d.filter(r=>e.includes(r.name)).map(r=>({...r,hideInTable:!1}))),z(!1)}},[d,w,c]),t.jsxs(s.Space,{className:"w-100",direction:"vertical",children:[t.jsxs(s.Form,{form:a,layout:"vertical",onFinish:j,children:[t.jsxs(s.Row,{gutter:[8,8],children:[$.map(e=>{var r,o,n;return t.jsx(s.Col,{...e.grid??A,style:{alignSelf:"end"},children:(r=e.report)!=null&&r.customRender?e.report.customRender(a):e.type==="date"?t.jsx(x.default,{...e,type:"date",range:(o=e.report)==null?void 0:o.range,required:!!((n=e.report)!=null&&n.required),readonly:!1,fieldClassName:"mb-0"}):e.type==="select"?t.jsx(x.default,{...e,type:"select",multiple:!0,required:!1,readonly:!1,fieldClassName:"mb-0"}):t.jsx(x.default,{...e,readonly:!1,required:!1,fieldClassName:"mb-0"})},e.name)}),!!(c!=null&&c.length)&&t.jsx(s.Col,{...X,children:t.jsx(M.SelectFieldInReport,{items:c,name:"showFields",mode:"multiple",label:"Show Fields",className:"mb-0"})}),!!F.length&&t.jsx(s.Col,{...A,children:t.jsx(Q,{label:"Sort By",name:"sortBy",items:F.map(e=>({id:e.name,label:e.label})),nameFieldInArray:"label",fieldId:"id",className:"mb-0",dropdownRender:e=>t.jsxs(t.Fragment,{children:[e,t.jsx(s.Form.Item,{name:"sortByType",noStyle:!0,className:"mt-3",children:t.jsx(s.Radio.Group,{className:"w-100",defaultValue:"DESC",optionType:"button",children:t.jsxs(s.Row,{children:[t.jsx(s.Col,{xs:12,children:t.jsx(s.Radio,{className:"w-100",style:{borderTopRightRadius:0,borderBottomRightRadius:0},value:"ASC",children:"Ascending"})}),t.jsx(s.Col,{xs:12,children:t.jsx(s.Radio,{className:"w-100",style:{borderTopLeftRadius:0,borderBottomLeftRadius:0},value:"DESC",children:"Descending"})})]})})})]})})}),R?R(a):null]}),t.jsx(v,{className:"mt-3",type:"primary",block:!0,htmlType:"submit",disabled:f,children:"Submit"})]}),t.jsxs(s.Space,{children:[!!h&&t.jsx(W.PrintButton,{disabled:f||!u.length,onClick:()=>h==null?void 0:h({tableId:"#crud-table table",data:u,fields:S.map(e=>({...e,render:V.getRendererValueCrudViewer(e)}))})}),!!y&&t.jsx(v,{disabled:f||!u.length,onClick:()=>y==null?void 0:y({tableId:"#crud-table table",data:u,fields:S.map(e=>({...e,render:V.getRendererValueCrudViewer(e)}))}),icon:t.jsx(J.FileExcelOutlined,{}),className:`group ${f||!u.length?"":"crud-excel-export-btn"}`,children:"Excel"})]}),_,t.jsx(K,{minusHeight:U,data:u,size:O,fields:S,idField:L,loadingData:f,paginateProps:G,viewable:!1})]})}module.exports=Y;
+"use strict";const t=require("react/jsx-runtime"),K=require("@ant-design/icons"),s=require("antd"),i=require("react"),x=require("./CrudField.cjs.js"),Q=require("./view/CrudViewer.cjs.js"),W=require("../common/report/SelectFieldInReport.cjs.js"),V=require("./view/CrudViewerUtil.cjs.js"),X=require("../locale/index.cjs.js"),Y=require("../common/select/SelectComponent.cjs.js"),v=require("../common/button/Button.cjs.js"),Z=require("../common/button/PrintButton.cjs.js"),A={lg:6,md:8,sm:12,xs:24},E={lg:12,md:16,sm:24,xs:24};function k({fields:d,data:u,idField:L,loadingData:f,onSubmit:g,paginateProps:G,size:M,onClickPrint:h,onClickExcelExport:y,minusHeight:O,extraSearchFields:R,searchOnMount:B,summary:U,showFieldsSelectingMode:_="checkbox"}){const{t:$}=X.useTranslationLib(),{searchable:z,selectable:c,sortable:q,defaultSort:p}=i.useMemo(()=>{var b,m,N,T,I;const e=[],r=[],o=[];let n;for(const l of d.filter(J=>!J.hidden))l.type==="image"||!l.report||((b=l.report)!=null&&b.searchable&&e.push(l),(m=l.report)!=null&&m.sortable&&(r.push(l),!n&&((N=l.report)!=null&&N.defaultSort)&&(n=l)),l.hideInTable||o.push({id:l.name,label:l.label,lock:(T=l.report)==null?void 0:T.lock,alreadySelected:(I=l.report)==null?void 0:I.alreadySelected}));return{defaultSort:n,searchable:e,sortable:r,selectable:o}},[d]),[S,F]=i.useState([]),j=i.useCallback(async({sortBy:e,sortByType:r,showFields:o=[],...n})=>{const b=[];e&&b.push({field:e,sort:r??"DESC"}),F(d.filter(m=>o.includes(m.name)).map(m=>({...m,hideInTable:!1}))),g({showFields:o,sortBy:b,...n})},[d,g]),[a]=s.Form.useForm(),[w,D]=i.useState(!1),[C,H]=i.useState(!0);return i.useEffect(()=>{if(B&&C){const e=setTimeout(()=>{a.validateFields().then(r=>{j(r)}),H(!1)},200);return()=>clearTimeout(e)}},[j,a,C,B]),i.useEffect(()=>{var r,o;!a.getFieldValue("sortBy")&&p&&a.setFieldsValue({sortBy:p.name,sortByType:typeof((r=p.report)==null?void 0:r.defaultSort)=="string"?(o=p.report)==null?void 0:o.defaultSort:"ASC"})},[p,a]),i.useEffect(()=>{if(w){const e=c.filter(r=>r.alreadySelected).map(r=>r.id);F(d.filter(r=>e.includes(r.name)).map(r=>({...r,hideInTable:!1}))),D(!1)}},[d,w,c]),t.jsxs(s.Space,{className:"w-100",direction:"vertical",children:[t.jsxs(s.Form,{form:a,layout:"vertical",onFinish:j,children:[t.jsxs(s.Row,{gutter:[8,8],children:[z.map(e=>{var r,o,n;return t.jsx(s.Col,{...e.grid??A,style:{alignSelf:"end"},children:(r=e.report)!=null&&r.customRender?e.report.customRender(a):e.type==="date"?t.jsx(x.default,{...e,type:"date",range:(o=e.report)==null?void 0:o.range,required:!!((n=e.report)!=null&&n.required),readonly:!1,fieldClassName:"mb-0"}):e.type==="select"?t.jsx(x.default,{...e,type:"select",multiple:!0,required:!1,readonly:!1,fieldClassName:"mb-0"}):t.jsx(x.default,{...e,readonly:!1,required:!1,fieldClassName:"mb-0"})},e.name)}),!!(c!=null&&c.length)&&t.jsx(s.Col,{...E,children:t.jsx(W.SelectFieldInReport,{items:c,name:"showFields",mode:"multiple",label:$("str.showFields"),className:"mb-0",selectingMode:_})}),!!q.length&&t.jsx(s.Col,{...A,children:t.jsx(Y,{label:"Sort By",name:"sortBy",items:q.map(e=>({id:e.name,label:e.label})),nameFieldInArray:"label",fieldId:"id",className:"mb-0",dropdownRender:e=>t.jsxs(t.Fragment,{children:[e,t.jsx(s.Form.Item,{name:"sortByType",noStyle:!0,className:"mt-3",children:t.jsx(s.Radio.Group,{className:"w-100",defaultValue:"DESC",optionType:"button",children:t.jsxs(s.Row,{children:[t.jsx(s.Col,{xs:12,children:t.jsx(s.Radio,{className:"w-100",style:{borderTopRightRadius:0,borderBottomRightRadius:0},value:"ASC",children:"Ascending"})}),t.jsx(s.Col,{xs:12,children:t.jsx(s.Radio,{className:"w-100",style:{borderTopLeftRadius:0,borderBottomLeftRadius:0},value:"DESC",children:"Descending"})})]})})})]})})}),R?R(a):null]}),t.jsx(v,{className:"mt-3",type:"primary",block:!0,htmlType:"submit",disabled:f,children:"Submit"})]}),t.jsxs(s.Space,{children:[!!h&&t.jsx(Z.PrintButton,{disabled:f||!u.length,onClick:()=>h==null?void 0:h({tableId:"#crud-table table",data:u,fields:S.map(e=>({...e,render:V.getRendererValueCrudViewer(e)}))})}),!!y&&t.jsx(v,{disabled:f||!u.length,onClick:()=>y==null?void 0:y({tableId:"#crud-table table",data:u,fields:S.map(e=>({...e,render:V.getRendererValueCrudViewer(e)}))}),icon:t.jsx(K.FileExcelOutlined,{}),className:`group ${f||!u.length?"":"crud-excel-export-btn"}`,children:"Excel"})]}),U,t.jsx(Q,{minusHeight:O,data:u,size:M,fields:S,idField:L,loadingData:f,paginateProps:G,viewable:!1})]})}module.exports=k;

package/dist/crud/CrudReportComponent.d.ts

@@ -2,6 +2,7 @@ import { SizeType } from 'antd/es/config-provider/SizeContext';
 import { FormInstance } from 'antd/lib';
 import { default as React, ReactElement } from 'react';
 import { CrudFieldProps, CrudPaginateProps } from './CrudComponent';
+import { SelectFieldInReportSelectingMode } from '../common/report/SelectFieldInReport';
 export type CrudReportSubmitForm<T> = {
     sortBy: {
         field: keyof T;
@@ -39,6 +40,7 @@ export interface CrudReportComponentProps<T_Data, F_Search> {
     minusHeight?: string;
     extraSearchFields?: (form: FormInstance<any>) => ReactElement;
     searchOnMount?: boolean;
+    showFieldsSelectingMode?: SelectFieldInReportSelectingMode;
 }
-declare function CrudReportComponent<T, F = T>({ fields, data, idField, loadingData, onSubmit, paginateProps, size, onClickPrint, onClickExcelExport, minusHeight, extraSearchFields, searchOnMount, summary, }: Readonly<CrudReportComponentProps<T, F>>): import("react/jsx-runtime").JSX.Element;
+declare function CrudReportComponent<T, F = T>({ fields, data, idField, loadingData, onSubmit, paginateProps, size, onClickPrint, onClickExcelExport, minusHeight, extraSearchFields, searchOnMount, summary, showFieldsSelectingMode, }: Readonly<CrudReportComponentProps<T, F>>): import("react/jsx-runtime").JSX.Element;
 export default CrudReportComponent;

package/dist/crud/CrudReportComponent.es.js

@@ -1,40 +1,42 @@
-import { jsxs as u, jsx as t, Fragment as Y } from "react/jsx-runtime";
-import { FileExcelOutlined as Z } from "@ant-design/icons";
-import { Form as B, Space as O, Row as _, Col as b, Radio as R } from "antd";
-import { useMemo as k, useState as F, useCallback as E, useEffect as w } from "react";
+import { jsxs as c, jsx as t, Fragment as k } from "react/jsx-runtime";
+import { FileExcelOutlined as E } from "@ant-design/icons";
+import { Form as B, Space as G, Row as M, Col as b, Radio as R } from "antd";
+import { useMemo as P, useState as F, useCallback as ee, useEffect as w } from "react";
 import N from "./CrudField.es.js";
-import P from "./view/CrudViewer.es.js";
-import { SelectFieldInReport as ee } from "../common/report/SelectFieldInReport.es.js";
-import { getRendererValueCrudViewer as $ } from "./view/CrudViewerUtil.es.js";
-import re from "../common/select/SelectComponent.es.js";
-import x from "../common/button/Button.es.js";
-import { PrintButton as te } from "../common/button/PrintButton.es.js";
-const z = { lg: 6, md: 8, sm: 12, xs: 24 }, le = { lg: 12, md: 16, sm: 24, xs: 24 };
-function be({
+import re from "./view/CrudViewer.es.js";
+import { SelectFieldInReport as te } from "../common/report/SelectFieldInReport.es.js";
+import { getRendererValueCrudViewer as O } from "./view/CrudViewerUtil.es.js";
+import { useTranslationLib as le } from "../locale/index.es.js";
+import oe from "../common/select/SelectComponent.es.js";
+import _ from "../common/button/Button.es.js";
+import { PrintButton as se } from "../common/button/PrintButton.es.js";
+const $ = { lg: 6, md: 8, sm: 12, xs: 24 }, ae = { lg: 12, md: 16, sm: 24, xs: 24 };
+function ge({
   fields: i,
-  data: d,
-  idField: D,
-  loadingData: c,
+  data: n,
+  idField: z,
+  loadingData: u,
   onSubmit: T,
-  paginateProps: H,
-  size: J,
+  paginateProps: D,
+  size: H,
   onClickPrint: h,
   onClickExcelExport: y,
-  minusHeight: K,
+  minusHeight: J,
   extraSearchFields: C,
   searchOnMount: I,
-  summary: M
+  summary: K,
+  showFieldsSelectingMode: Q = "checkbox"
 }) {
-  const { searchable: Q, selectable: n, sortable: v, defaultSort: p } = k(() => {
-    var f, m, j, L, G;
+  const { t: U } = le(), { searchable: W, selectable: d, sortable: v, defaultSort: p } = P(() => {
+    var f, m, L, j, x;
     const e = [], r = [], o = [];
     let a;
-    for (const l of i.filter((X) => !X.hidden))
-      l.type === "image" || !l.report || ((f = l.report) != null && f.searchable && e.push(l), (m = l.report) != null && m.sortable && (r.push(l), !a && ((j = l.report) != null && j.defaultSort) && (a = l)), l.hideInTable || o.push({
+    for (const l of i.filter((Z) => !Z.hidden))
+      l.type === "image" || !l.report || ((f = l.report) != null && f.searchable && e.push(l), (m = l.report) != null && m.sortable && (r.push(l), !a && ((L = l.report) != null && L.defaultSort) && (a = l)), l.hideInTable || o.push({
         id: l.name,
         label: l.label,
-        lock: (L = l.report) == null ? void 0 : L.lock,
-        alreadySelected: (G = l.report) == null ? void 0 : G.alreadySelected
+        lock: (j = l.report) == null ? void 0 : j.lock,
+        alreadySelected: (x = l.report) == null ? void 0 : x.alreadySelected
       }));
     return {
       defaultSort: a,
@@ -44,7 +46,7 @@ function be({
     };
   }, [i]), [S, V] = F(
     []
-  ), g = E(
+  ), g = ee(
     async ({
       sortBy: e,
       sortByType: r,
@@ -60,13 +62,13 @@ function be({
       ), T({ showFields: o, sortBy: f, ...a });
     },
     [i, T]
-  ), [s] = B.useForm(), [q, U] = F(!1), [A, W] = F(!0);
+  ), [s] = B.useForm(), [q, X] = F(!1), [A, Y] = F(!0);
   return w(() => {
     if (I && A) {
       const e = setTimeout(() => {
         s.validateFields().then((r) => {
           g(r);
-        }), W(!1);
+        }), Y(!1);
       }, 200);
       return () => clearTimeout(e);
     }
@@ -78,20 +80,20 @@ function be({
     });
   }, [p, s]), w(() => {
     if (q) {
-      const e = n.filter((r) => r.alreadySelected).map((r) => r.id);
+      const e = d.filter((r) => r.alreadySelected).map((r) => r.id);
       V(
         i.filter((r) => e.includes(r.name)).map((r) => ({ ...r, hideInTable: !1 }))
-      ), U(!1);
+      ), X(!1);
     }
-  }, [i, q, n]), /* @__PURE__ */ u(O, { className: "w-100", direction: "vertical", children: [
-    /* @__PURE__ */ u(B, { form: s, layout: "vertical", onFinish: g, children: [
-      /* @__PURE__ */ u(_, { gutter: [8, 8], children: [
-        Q.map((e) => {
+  }, [i, q, d]), /* @__PURE__ */ c(G, { className: "w-100", direction: "vertical", children: [
+    /* @__PURE__ */ c(B, { form: s, layout: "vertical", onFinish: g, children: [
+      /* @__PURE__ */ c(M, { gutter: [8, 8], children: [
+        W.map((e) => {
           var r, o, a;
           return /* @__PURE__ */ t(
             b,
             {
-              ...e.grid ?? z,
+              ...e.grid ?? $,
               style: { alignSelf: "end" },
               children: (r = e.report) != null && r.customRender ? e.report.customRender(s) : e.type === "date" ? /* @__PURE__ */ t(
                 N,
@@ -126,18 +128,19 @@ function be({
             e.name
           );
         }),
-        !!(n != null && n.length) && /* @__PURE__ */ t(b, { ...le, children: /* @__PURE__ */ t(
-          ee,
+        !!(d != null && d.length) && /* @__PURE__ */ t(b, { ...ae, children: /* @__PURE__ */ t(
+          te,
           {
-            items: n,
+            items: d,
             name: "showFields",
             mode: "multiple",
-            label: "Show Fields",
-            className: "mb-0"
+            label: U("str.showFields"),
+            className: "mb-0",
+            selectingMode: Q
           }
         ) }),
-        !!v.length && /* @__PURE__ */ t(b, { ...z, children: /* @__PURE__ */ t(
-          re,
+        !!v.length && /* @__PURE__ */ t(b, { ...$, children: /* @__PURE__ */ t(
+          oe,
           {
             label: "Sort By",
             name: "sortBy",
@@ -145,7 +148,7 @@ function be({
             nameFieldInArray: "label",
             fieldId: "id",
             className: "mb-0",
-            dropdownRender: (e) => /* @__PURE__ */ u(Y, { children: [
+            dropdownRender: (e) => /* @__PURE__ */ c(k, { children: [
               e,
               /* @__PURE__ */ t(B.Item, { name: "sortByType", noStyle: !0, className: "mt-3", children: /* @__PURE__ */ t(
                 R.Group,
@@ -153,7 +156,7 @@ function be({
                   className: "w-100",
                   defaultValue: "DESC",
                   optionType: "button",
-                  children: /* @__PURE__ */ u(_, { children: [
+                  children: /* @__PURE__ */ c(M, { children: [
                     /* @__PURE__ */ t(b, { xs: 12, children: /* @__PURE__ */ t(
                       R,
                       {
@@ -187,66 +190,66 @@ function be({
         C ? C(s) : null
       ] }),
       /* @__PURE__ */ t(
-        x,
+        _,
         {
           className: "mt-3",
           type: "primary",
           block: !0,
           htmlType: "submit",
-          disabled: c,
+          disabled: u,
           children: "Submit"
         }
       )
     ] }),
-    /* @__PURE__ */ u(O, { children: [
+    /* @__PURE__ */ c(G, { children: [
       !!h && /* @__PURE__ */ t(
-        te,
+        se,
         {
-          disabled: c || !d.length,
+          disabled: u || !n.length,
           onClick: () => h == null ? void 0 : h({
             tableId: "#crud-table table",
-            data: d,
+            data: n,
             fields: S.map((e) => ({
               ...e,
-              render: $(e)
+              render: O(e)
             }))
           })
         }
       ),
       !!y && /* @__PURE__ */ t(
-        x,
+        _,
         {
-          disabled: c || !d.length,
+          disabled: u || !n.length,
           onClick: () => y == null ? void 0 : y({
             tableId: "#crud-table table",
-            data: d,
+            data: n,
             fields: S.map((e) => ({
               ...e,
-              render: $(e)
+              render: O(e)
             }))
           }),
-          icon: /* @__PURE__ */ t(Z, {}),
-          className: `group ${c || !d.length ? "" : "crud-excel-export-btn"}`,
+          icon: /* @__PURE__ */ t(E, {}),
+          className: `group ${u || !n.length ? "" : "crud-excel-export-btn"}`,
           children: "Excel"
         }
       )
     ] }),
-    M,
+    K,
     /* @__PURE__ */ t(
-      P,
+      re,
       {
-        minusHeight: K,
-        data: d,
-        size: J,
+        minusHeight: J,
+        data: n,
+        size: H,
         fields: S,
-        idField: D,
-        loadingData: c,
-        paginateProps: H,
+        idField: z,
+        loadingData: u,
+        paginateProps: D,
         viewable: !1
       }
     )
   ] });
 }
 export {
-  be as default
+  ge as default
 };

package/dist/locale/translations/en.cjs.js

@@ -1 +1 @@
-"use strict";const e={str:{delete:"Delete",clone:"Clone",update:"Update",new:"New",back:"Back",next:"Next",save:"Save",import:"Import",cancel:"Cancel",print:"Print",hide:"Hide",no:"No",action:"Action",remove:"Remove",view:"View",ok:"Ok",yes:"Yes",warning:"Warning",success:"Success",error:"Error",retry:"Retry",previous:"Previous",unhide:"Unhide",downloadCsvTemplate:"Download CSV Template",importCsvFile:"Import CSV File",export:"Export",goBack:"Go Back",refresh:"Refresh",fileUploadMessage1:"Drag file here or ",fileUploadMessage2:"Click to Upload",rotateLeft:"Rotate Left",rotateRight:"Rotate Right",flipHorizontal:"Flip Horizontal",flipVertical:"Flip Vertical",skipCrop:"Skip Crop"},err:{save:"An error occurred while saving",validation:{required:"is required",minLength8:"must be at least 8 characters",percentage:"must be a percentage",maximumValueExceeded:"must be less than %maxValue%",invalidNic:"must be a valid NIC",invalid:"must be a valid"},notFound:"Not Found"},message:{loading:{saving:"Saving"},uploadButtonText:"Click to Upload"},qus:{importWithIssues:"Some fields have issues. Do you want to proceed with the import?",doYouWantToDelete:"Do you want to delete?",doYouWantToHide:"Do you want to hide?",doYouWantToUnhide:"Do you want to unhide?"}};module.exports=e;
+"use strict";const e={str:{delete:"Delete",clone:"Clone",update:"Update",new:"New",back:"Back",next:"Next",save:"Save",import:"Import",cancel:"Cancel",print:"Print",hide:"Hide",no:"No",action:"Action",remove:"Remove",view:"View",ok:"Ok",yes:"Yes",warning:"Warning",success:"Success",error:"Error",retry:"Retry",previous:"Previous",unhide:"Unhide",downloadCsvTemplate:"Download CSV Template",importCsvFile:"Import CSV File",export:"Export",goBack:"Go Back",refresh:"Refresh",fileUploadMessage1:"Drag file here or ",fileUploadMessage2:"Click to Upload",rotateLeft:"Rotate Left",rotateRight:"Rotate Right",flipHorizontal:"Flip Horizontal",flipVertical:"Flip Vertical",skipCrop:"Skip Crop",showFields:"Show Fields"},err:{save:"An error occurred while saving",validation:{required:"is required",minLength8:"must be at least 8 characters",percentage:"must be a percentage",maximumValueExceeded:"must be less than %maxValue%",invalidNic:"must be a valid NIC",invalid:"must be a valid"},notFound:"Not Found"},message:{loading:{saving:"Saving"},uploadButtonText:"Click to Upload"},qus:{importWithIssues:"Some fields have issues. Do you want to proceed with the import?",doYouWantToDelete:"Do you want to delete?",doYouWantToHide:"Do you want to hide?",doYouWantToUnhide:"Do you want to unhide?"}};module.exports=e;

package/dist/locale/translations/en.d.ts

@@ -35,6 +35,7 @@ declare const _default: {
         flipHorizontal: string;
         flipVertical: string;
         skipCrop: string;
+        showFields: string;
     };
     err: {
         save: string;

package/dist/locale/translations/en.es.js

@@ -34,7 +34,8 @@ const e = {
     rotateRight: "Rotate Right",
     flipHorizontal: "Flip Horizontal",
     flipVertical: "Flip Vertical",
-    skipCrop: "Skip Crop"
+    skipCrop: "Skip Crop",
+    showFields: "Show Fields"
   },
   err: {
     save: "An error occurred while saving",

package/package.json

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