@kingteza/crud-component 1.0.13 → 1.0.15

package/dist/components/crud/FileCrudField.js

@@ -0,0 +1,220 @@
+import { jsxs as f, jsx as s, Fragment as O } from "react/jsx-runtime";
+/* empty css          */
+import { FileOutlined as G, FilePptOutlined as J, FileExcelOutlined as K, FileTextOutlined as Q, FileWordOutlined as X, FilePdfOutlined as Y, FileImageOutlined as Z, ExportOutlined as v } from "@ant-design/icons";
+import { Form as P, Upload as y, Modal as m } from "antd";
+import $ from "mime";
+import { useState as p, useCallback as U, useEffect as j, useMemo as k } from "react";
+import { useTranslation as T } from "react-i18next";
+import { TRANSLATION_NAMESPACE as tt } from "../../locale/hooks/translation-constants.js";
+import et from "../../util/ValidationUtil.js";
+import C from "../common/button/Button.js";
+import st from "../common/layout/VerticalSpace.js";
+function wt({
+  name: n,
+  label: t,
+  required: r,
+  provider: e,
+  onUploading: a,
+  onRemoved: u,
+  fieldClassName: w,
+  accept: I,
+  rules: _,
+  maxCount: V = 1,
+  block: L,
+  ...W
+}) {
+  const d = P.useFormInstance(), h = P.useWatch(n, d), [b, A] = p(!1), [D, q] = p(!1), B = U(
+    async (l) => {
+      var c, o;
+      try {
+        const { file: i } = l, x = i.name;
+        A(!0), q(!0), a == null || a(!0);
+        const g = x ?? "", N = g.split("."), R = N[N.length - 1], z = e.generateFileName(g), M = `${await e.getInitialPath()}/${z}.${R}`;
+        console.log({ filePath: M });
+        const S = await e.upload(
+          { ...i, originFileObj: i },
+          M
+        );
+        a == null || a(!1), d.setFieldValue(n, S), (c = l.onSuccess) == null || c.call(l, S);
+      } catch (i) {
+        (o = l.onError) == null || o.call(l, i);
+      } finally {
+        A(!1);
+      }
+    },
+    [d, n, a, e]
+  ), [F, E] = p([]);
+  j(() => {
+    !D && h && Promise.all(
+      (Array.isArray(h) ? h : [h]).map(
+        async (l) => {
+          const c = $.getType(l), o = l.split("/").pop(), i = await e.getRealUrl(l);
+          return {
+            uid: l,
+            url: i,
+            type: c,
+            name: o
+          };
+        }
+      )
+    ).then((l) => E(() => {
+      const c = l.map(({ url: o, type: i, uid: x, name: g }) => ({ uid: x, url: o, type: i, response: x, thumbUrl: o, name: g }));
+      return console.log(c), c;
+    }));
+  }, [h, D, b, e]);
+  const H = U(
+    async (l) => {
+      const c = l.response, o = c || d.getFieldValue(n);
+      await e.delete(o), u == null || u(), l && d.setFieldsValue({ [n]: null });
+    },
+    [d, n, u, e]
+  );
+  return /* @__PURE__ */ f(
+    P.Item,
+    {
+      label: t,
+      required: r,
+      name: n,
+      className: w,
+      rules: [
+        ...r ? et.required(t) : [],
+        ..._ ?? []
+      ],
+      children: [
+        /* @__PURE__ */ s("input", { hidden: !0 }),
+        /* @__PURE__ */ s(
+          y,
+          {
+            ...W,
+            fileList: F,
+            className: ((F == null ? void 0 : F.length) ?? 0) >= V ? "hide-upload" : "",
+            maxCount: V,
+            customRequest: B,
+            onRemove: H,
+            listType: "picture",
+            onChange: ({ fileList: l }) => {
+              E(l);
+            },
+            style: L ? { width: "100%" } : void 0,
+            children: /* @__PURE__ */ s(C, { loading: b, children: "Upload File" })
+          }
+        )
+      ]
+    }
+  );
+}
+const Ft = ({ provider: n, value: t }) => {
+  const [r, e] = p();
+  return j(() => {
+    t && n.getRealUrl(t).then((a) => {
+      e({
+        mimeType: $.getType(t),
+        url: a,
+        fileName: t.split("/").pop() ?? t
+      });
+    });
+  }, [n, t]), r ? /* @__PURE__ */ s(
+    rt,
+    {
+      fileName: r.fileName,
+      url: r == null ? void 0 : r.url,
+      mimeType: r == null ? void 0 : r.mimeType
+    }
+  ) : /* @__PURE__ */ s(O, {});
+}, rt = ({ url: n, mimeType: t = "", fileName: r }) => {
+  const e = k(() => t != null && t.includes("image") ? "image" : t != null && t.includes("pdf") ? "pdf" : t != null && t.includes("word") ? "word" : t != null && t.includes("text") ? "text" : t != null && t.includes("presentation") ? "presentation" : t != null && t.includes("excel") || t != null && t.includes("spreadsheet") ? "excel" : "file", [t]), a = k(() => {
+    switch (e) {
+      case "image":
+        return /* @__PURE__ */ s(Z, {});
+      case "pdf":
+        return /* @__PURE__ */ s(Y, {});
+      case "word":
+        return /* @__PURE__ */ s(X, {});
+      case "text":
+        return /* @__PURE__ */ s(Q, {});
+      case "excel":
+        return /* @__PURE__ */ s(K, {});
+      case "presentation":
+        return /* @__PURE__ */ s(J, {});
+      default:
+        return /* @__PURE__ */ s(G, {});
+    }
+  }, [e]), [u, w] = p(!1), { t: I } = T(tt);
+  return e !== "file" && e !== "text" ? /* @__PURE__ */ f(O, { children: [
+    /* @__PURE__ */ s(
+      m,
+      {
+        open: u,
+        title: r,
+        onCancel: () => w(!1),
+        footer: /* @__PURE__ */ s(O, {}),
+        width: "100%",
+        style: { top: "8px", minHeight: "700px" },
+        destroyOnClose: !0,
+        children: /* @__PURE__ */ f(st, { children: [
+          /* @__PURE__ */ s(
+            C,
+            {
+              tooltip: r,
+              icon: /* @__PURE__ */ s(v, {}),
+              target: "_blank",
+              href: n,
+              style: { textDecoration: "none" },
+              children: I("str.openInNewTab")
+            }
+          ),
+          e === "image" ? /* @__PURE__ */ s("img", { src: n, alt: r, style: { width: "100%" } }) : e === "pdf" ? /* @__PURE__ */ f("iframe", { title: r, src: n, width: "100%", height: "700px", children: [
+            "This browser does not support PDFs. Please download the PDF to view it:",
+            /* @__PURE__ */ s("a", { href: n, children: "Download PDF" }),
+            "."
+          ] }) : /* @__PURE__ */ f(
+            "iframe",
+            {
+              title: r,
+              src: `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(
+                n
+              )}`,
+              width: "100%",
+              height: "700px",
+              children: [
+                "This browser does not support open ",
+                e.toUpperCase(),
+                ". Please download the",
+                e.toUpperCase(),
+                " to view it:",
+                /* @__PURE__ */ f("a", { href: n, children: [
+                  "Download ",
+                  e.toUpperCase()
+                ] }),
+                "."
+              ]
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ s(
+      C,
+      {
+        tooltip: r,
+        icon: a,
+        shape: "circle",
+        onClick: () => w(!0)
+      }
+    )
+  ] }) : /* @__PURE__ */ s(
+    C,
+    {
+      tooltip: r,
+      icon: a,
+      target: "_blank",
+      href: n,
+      shape: "circle"
+    }
+  );
+};
+export {
+  rt as FileCellValue,
+  Ft as FileCrudCellValue,
+  wt as default
+};

package/dist/components/crud/ImageCrudField.cjs

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

package/dist/components/crud/ImageCrudField.js

@@ -0,0 +1,113 @@
+var A = Object.defineProperty;
+var E = (e, a, t) => a in e ? A(e, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[a] = t;
+var h = (e, a, t) => E(e, typeof a != "symbol" ? a + "" : a, t);
+import { jsx as n, Fragment as V, jsxs as S } from "react/jsx-runtime";
+/* empty css          */
+import { EyeOutlined as D } from "@ant-design/icons";
+import { Form as F, Input as W, Avatar as q, Image as z } from "antd";
+import w from "path-browserify";
+import { useState as P, useCallback as B, useEffect as x } from "react";
+import G from "../../util/NumberUtil.js";
+import H from "../../util/ValidationUtil.js";
+import { v4 as J } from "uuid";
+import K from "../common/picker/ImagePicker.js";
+class L {
+}
+class ae extends L {
+  constructor(t = "", s = "") {
+    super();
+    h(this, "rootPath");
+    h(this, "subPath");
+    this.rootPath = t, this.subPath = s;
+  }
+  cloneFilePath(t) {
+    const s = w.parse(t), l = `${s.name}_cloned_${G.randInt(1e5)}`;
+    return w.format({
+      dir: s.dir,
+      ext: s.ext,
+      name: l
+    });
+  }
+  generateFileName(t) {
+    return `${t.split(".")[0]}_${J().replace("-", "")}`;
+  }
+}
+function le({
+  name: e,
+  label: a,
+  required: t,
+  provider: s,
+  onUploading: l,
+  aspectRatio: I,
+  onRemoved: c,
+  fieldClassName: y,
+  hideLabel: C = !1,
+  listType: $
+}) {
+  const i = F.useFormInstance(), u = F.useWatch(e, i), [p, g] = P(!1), N = B(
+    async (r, b) => {
+      if (b) {
+        l == null || l(!0);
+        const m = r.name, o = m.split("."), k = o[o.length - 1], O = s.generateFileName(m), _ = `${await s.getInitialPath()}/${O}.${k}`, j = await s.upload(r, _);
+        g(!0), l == null || l(!1), i.setFieldValue(e, j);
+      } else {
+        console.log(r);
+        const m = i.getFieldsValue(), o = await s.delete(m[e]);
+        c == null || c(), o && i.setFieldsValue({ [e]: null });
+      }
+    },
+    [i, e, c, l, s]
+  ), [f, d] = P();
+  return x(() => {
+    !p && u ? s.getRealUrl(u).then(d) : d(f);
+  }, [u, p, s, f]), /* @__PURE__ */ n(V, { children: /* @__PURE__ */ S(
+    F.Item,
+    {
+      rules: t ? H.required(a) : [],
+      label: C ? null : a,
+      required: t,
+      name: e,
+      children: [
+        /* @__PURE__ */ n(
+          K,
+          {
+            noStyle: !0,
+            listType: $,
+            aspectRatio: I,
+            values: f,
+            onRemove: (r) => {
+              r && N(r, !1);
+            },
+            onAdd: async (r) => {
+              r && await N(r, !0);
+            },
+            className: y
+          }
+        ),
+        /* @__PURE__ */ n(W, { hidden: !0 })
+      ]
+    }
+  ) });
+}
+const re = ({ provider: e, value: a }) => {
+  const [t, s] = P();
+  return x(() => {
+    a && e.getRealUrl(a).then(s);
+  }, [e, a]), t ? /* @__PURE__ */ n(M, { url: t }) : /* @__PURE__ */ n(V, {});
+}, M = ({ url: e }) => /* @__PURE__ */ n(q, { className: "p-0", children: /* @__PURE__ */ n(
+  z,
+  {
+    className: "m-0 p-0 position-relative",
+    src: e,
+    preview: {
+      mask: /* @__PURE__ */ n(D, {})
+    }
+  }
+) });
+export {
+  L as FileDownloadProvider,
+  ae as FileUploadProvider,
+  M as ImageCellValue,
+  re as ImageCrudCellValue,
+  le as default
+};

package/dist/components/crud/import/CrudImportButton.cjs

@@ -0,0 +1 @@
+"use strict";const t=require("react/jsx-runtime"),s=require("@ant-design/icons"),i=require("react"),u=require("react-i18next"),c=require("../../../locale/hooks/translation-constants.cjs"),p=require("./CrudImportComponent.cjs"),a=require("../../common/button/Button.cjs");function m(n){const{t:r}=u.useTranslation(c.TRANSLATION_NAMESPACE),[o,e]=i.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(p,{open:o,onCloseMethod:e,...n}),t.jsx(a,{icon:t.jsx(s.ImportOutlined,{}),onClick:()=>e(!0),children:r("str.import")})]})}module.exports=m;

package/dist/components/crud/import/CrudImportButton.js

@@ -0,0 +1,31 @@
+import { jsxs as e, Fragment as p, jsx as o } from "react/jsx-runtime";
+import { ImportOutlined as i } from "@ant-design/icons";
+import { useState as s } from "react";
+import { useTranslation as u } from "react-i18next";
+import { TRANSLATION_NAMESPACE as f } from "../../../locale/hooks/translation-constants.js";
+import l from "./CrudImportComponent.js";
+import a from "../../common/button/Button.js";
+function N(r) {
+  const { t: m } = u(f), [n, t] = s(!1);
+  return /* @__PURE__ */ e(p, { children: [
+    /* @__PURE__ */ o(
+      l,
+      {
+        open: n,
+        onCloseMethod: t,
+        ...r
+      }
+    ),
+    /* @__PURE__ */ o(
+      a,
+      {
+        icon: /* @__PURE__ */ o(i, {}),
+        onClick: () => t(!0),
+        children: m("str.import")
+      }
+    )
+  ] });
+}
+export {
+  N as default
+};

package/dist/components/crud/import/CrudImportComponent.cjs

@@ -0,0 +1,2 @@
+"use strict";const r=require("react/jsx-runtime"),T=require("@ant-design/icons"),B=require("papaparse"),d=require("antd"),O=require("file-saver"),a=require("react"),V=require("react-i18next"),R=require("../../../locale/hooks/translation-constants.cjs"),W=require("../view/CrudViewer.cjs"),L=require("../../../util/DateUtil.cjs"),z=require("../../common/button/Button.cjs"),_=require("../../common/button/ImportButton.cjs");function $({onCloseMethod:C,open:h,fields:g,importProps:o}){const[u,v]=a.useState([]),[y,k]=a.useState(!1),[A,N]=a.useState(0);a.useEffect(()=>{h||(v([]),k(!1))},[h]);const x=a.useMemo(()=>new Map(g.filter(e=>{var t;return!e.hidden&&!((t=e.importProps)!=null&&t.hidden)&&!e.readonly}).map(e=>[e.name,e])),[g]),S=a.useMemo(()=>Array.from(x.values()).flatMap(e=>{var t;return[e.name,...((t=e.importProps)==null?void 0:t.extraFields)??[]]}),[x]),E=a.useCallback(async function(){const e=`${S.join(",")}
+`,t=new Blob([e],{type:"text/csv;charset=utf-8;"});O.saveAs(t,(o==null?void 0:o.name)+" - "+L.formatDateTimeWithSecond(new Date).replaceAll(":","-")+".csv")},[S,o==null?void 0:o.name]),{t:i}=V.useTranslation(R.TRANSLATION_NAMESPACE),F=a.useCallback(async e=>{const t=new FileReader;t.onerror=console.error,t.onload=async n=>{var s;const c=(s=n==null?void 0:n.target)==null?void 0:s.result,l=B.parse(c,{header:!0});v(l.data)},t.readAsText(e)},[]),j=a.useMemo(()=>{var t,n,c;let e=!1;for(const l of u)for(const[s,f]of x.entries()){const b=l[s],m=b||!isNaN(b);if(f.required&&!m)if((n=(t=f.importProps)==null?void 0:t.extraFields)!=null&&n.length)for(const w of((c=f.importProps)==null?void 0:c.extraFields)??[])if(l[w]||!isNaN(l[w])){e=!1;break}else return!0;else return!0}return e},[u,x]),p=a.useCallback(e=>(t,n)=>{var l,s,f;const c=t||!isNaN(t);if(e.required&&!c){let b=i("err.validation.required");if((s=(l=e.importProps)==null?void 0:l.extraFields)!=null&&s.length){const m=(f=e.importProps)==null?void 0:f.extraFields;(m==null?void 0:m.find(I=>!n[I]))&&(b="Either one of these fields is required: "+[e.name,...m].join(", "))}return r.jsxs(d.Tooltip,{className:"d-flex",title:b,children:[r.jsx(T.WarningTwoTone,{twoToneColor:"#ee9702"}),t]})}return t},[i]),D=a.useCallback(async e=>{N(e)},[]),q=a.useCallback(async()=>{try{k(!0),await o.onClickImport(u,D),C(!1)}finally{k(!1),N(0)}},[u,o,C,D]),M=a.useCallback(async()=>{j?d.Modal.warn({title:i("str.warning"),content:i("qus.importWithIssues"),okText:i("str.import"),onOk:q,okCancel:!0,closable:!0}):q()},[j,q,i]);return r.jsxs(d.Modal,{title:[i("str.import"),o==null?void 0:o.name].filter(Boolean).join(" "),width:"100%",open:h,onOk:M,destroyOnClose:!0,onCancel:()=>C(!1),okText:i("str.import"),confirmLoading:y,okButtonProps:{disabled:!(u!=null&&u.length)},footer:(e,{OkBtn:t,CancelBtn:n})=>r.jsxs(d.Space,{children:[r.jsx(n,{}),r.jsx(t,{}),j&&r.jsx(d.Tooltip,{className:"d-flex",title:"Some fields have issue. Please review before submit.",children:r.jsx(T.WarningTwoTone,{twoToneColor:"#ee9702"})})]}),children:[r.jsxs(d.Space,{children:[r.jsx(z,{onClick:E,icon:r.jsx(T.DownloadOutlined,{}),children:i("str.downloadCsvTemplate")}),r.jsx(_.ImportButton,{disabled:y,type:"default",onClick:F,accept:".csv",children:i("str.importCsvFile")})]}),r.jsx(d.Spin,{spinning:y,indicator:A?r.jsx(d.Progress,{type:"circle",percent:A*100,size:50,format:e=>`${parseInt(e)}%`}):void 0,children:r.jsx(W,{data:u,bordered:!0,size:"small",fields:Array.from(x.values()).flatMap(e=>{var t,n,c,l;return e.type==="text"?[{...e,label:e.name,render:p(e)},...((n=(t=e.importProps)==null?void 0:t.extraFields)==null?void 0:n.map(s=>({...e,name:s,label:s,render:p(e)})))??[]]:e.type==="select"?[{...e,label:e.name,type:"text",render:p(e)},...((l=(c=e.importProps)==null?void 0:c.extraFields)==null?void 0:l.map(s=>({...e,name:s,label:s,type:"text",render:p(e)})))??[]]:[{...e,label:e.name,render:p(e)}]})})})]})}module.exports=$;

package/dist/components/crud/import/CrudImportComponent.js

@@ -0,0 +1,221 @@
+import { jsxs as y, jsx as s } from "react/jsx-runtime";
+import { WarningTwoTone as q, DownloadOutlined as z } from "@ant-design/icons";
+import R from "papaparse";
+import { Tooltip as B, Modal as O, Space as V, Spin as _, Progress as $ } from "antd";
+import { saveAs as U } from "file-saver";
+import { useState as v, useEffect as G, useMemo as A, useCallback as m } from "react";
+import { useTranslation as H } from "react-i18next";
+import { TRANSLATION_NAMESPACE as J } from "../../../locale/hooks/translation-constants.js";
+import K from "../view/CrudViewer.js";
+import Q from "../../../util/DateUtil.js";
+import X from "../../common/button/Button.js";
+import { ImportButton as Y } from "../../common/button/ImportButton.js";
+function de({
+  onCloseMethod: x,
+  open: b,
+  fields: N,
+  importProps: o
+}) {
+  const [c, D] = v([]), [C, w] = v(!1), [E, F] = v(0);
+  G(() => {
+    b || (D([]), w(!1));
+  }, [b]);
+  const u = A(
+    () => new Map(
+      N.filter((e) => {
+        var t;
+        return !e.hidden && !((t = e.importProps) != null && t.hidden) && !e.readonly;
+      }).map((e) => [e.name, e])
+    ),
+    [N]
+  ), I = A(
+    () => Array.from(u.values()).flatMap((e) => {
+      var t;
+      return [
+        e.name,
+        ...((t = e.importProps) == null ? void 0 : t.extraFields) ?? []
+      ];
+    }),
+    [u]
+  ), M = m(
+    async function() {
+      const e = `${I.join(",")}
+`, t = new Blob([e], { type: "text/csv;charset=utf-8;" });
+      U(
+        t,
+        (o == null ? void 0 : o.name) + " - " + Q.formatDateTimeWithSecond(/* @__PURE__ */ new Date()).replaceAll(":", "-") + ".csv"
+      );
+    },
+    [I, o == null ? void 0 : o.name]
+  ), { t: l } = H(J), L = m(async (e) => {
+    const t = new FileReader();
+    t.onerror = console.error, t.onload = async (r) => {
+      var n;
+      const i = (n = r == null ? void 0 : r.target) == null ? void 0 : n.result, a = R.parse(i, { header: !0 });
+      D(a.data);
+    }, t.readAsText(e);
+  }, []), g = A(() => {
+    var t, r, i;
+    let e = !1;
+    for (const a of c)
+      for (const [n, d] of u.entries()) {
+        const h = a[n], f = h || !isNaN(h);
+        if (d.required && !f)
+          if ((r = (t = d.importProps) == null ? void 0 : t.extraFields) != null && r.length)
+            for (const T of ((i = d.importProps) == null ? void 0 : i.extraFields) ?? [])
+              if (a[T] || !isNaN(a[T])) {
+                e = !1;
+                break;
+              } else return !0;
+          else return !0;
+      }
+    return e;
+  }, [c, u]), p = m(
+    (e) => (t, r) => {
+      var a, n, d;
+      const i = t || !isNaN(t);
+      if (e.required && !i) {
+        let h = l("err.validation.required");
+        if ((n = (a = e.importProps) == null ? void 0 : a.extraFields) != null && n.length) {
+          const f = (d = e.importProps) == null ? void 0 : d.extraFields;
+          (f == null ? void 0 : f.find((j) => !r[j])) && (h = "Either one of these fields is required: " + [e.name, ...f].join(", "));
+        }
+        return /* @__PURE__ */ y(B, { className: "d-flex", title: h, children: [
+          /* @__PURE__ */ s(q, { twoToneColor: "#ee9702" }),
+          t
+        ] });
+      }
+      return t;
+    },
+    [l]
+  ), S = m(async (e) => {
+    F(e);
+  }, []), k = m(async () => {
+    try {
+      w(!0), await o.onClickImport(c, S), x(!1);
+    } finally {
+      w(!1), F(0);
+    }
+  }, [c, o, x, S]), W = m(async () => {
+    g ? O.warn({
+      title: l("str.warning"),
+      content: l("qus.importWithIssues"),
+      okText: l("str.import"),
+      onOk: k,
+      okCancel: !0,
+      closable: !0
+    }) : k();
+  }, [g, k, l]);
+  return /* @__PURE__ */ y(
+    O,
+    {
+      title: [l("str.import"), o == null ? void 0 : o.name].filter(Boolean).join(" "),
+      width: "100%",
+      open: b,
+      onOk: W,
+      destroyOnClose: !0,
+      onCancel: () => x(!1),
+      okText: l("str.import"),
+      confirmLoading: C,
+      okButtonProps: {
+        disabled: !(c != null && c.length)
+      },
+      footer: (e, { OkBtn: t, CancelBtn: r }) => /* @__PURE__ */ y(V, { children: [
+        /* @__PURE__ */ s(r, {}),
+        /* @__PURE__ */ s(t, {}),
+        g && /* @__PURE__ */ s(
+          B,
+          {
+            className: "d-flex",
+            title: "Some fields have issue. Please review before submit.",
+            children: /* @__PURE__ */ s(q, { twoToneColor: "#ee9702" })
+          }
+        )
+      ] }),
+      children: [
+        /* @__PURE__ */ y(V, { children: [
+          /* @__PURE__ */ s(
+            X,
+            {
+              onClick: M,
+              icon: /* @__PURE__ */ s(z, {}),
+              children: l("str.downloadCsvTemplate")
+            }
+          ),
+          /* @__PURE__ */ s(
+            Y,
+            {
+              disabled: C,
+              type: "default",
+              onClick: L,
+              accept: ".csv",
+              children: l("str.importCsvFile")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ s(
+          _,
+          {
+            spinning: C,
+            indicator: E ? /* @__PURE__ */ s(
+              $,
+              {
+                type: "circle",
+                percent: E * 100,
+                size: 50,
+                format: (e) => `${parseInt(e)}%`
+              }
+            ) : void 0,
+            children: /* @__PURE__ */ s(
+              K,
+              {
+                data: c,
+                bordered: !0,
+                size: "small",
+                fields: Array.from(u.values()).flatMap((e) => {
+                  var t, r, i, a;
+                  return e.type === "text" ? [
+                    {
+                      ...e,
+                      label: e.name,
+                      render: p(e)
+                    },
+                    ...((r = (t = e.importProps) == null ? void 0 : t.extraFields) == null ? void 0 : r.map((n) => ({
+                      ...e,
+                      name: n,
+                      label: n,
+                      render: p(e)
+                    }))) ?? []
+                  ] : e.type === "select" ? [
+                    {
+                      ...e,
+                      label: e.name,
+                      type: "text",
+                      render: p(e)
+                    },
+                    ...((a = (i = e.importProps) == null ? void 0 : i.extraFields) == null ? void 0 : a.map((n) => ({
+                      ...e,
+                      name: n,
+                      label: n,
+                      type: "text",
+                      render: p(e)
+                    }))) ?? []
+                  ] : [
+                    {
+                      ...e,
+                      label: e.name,
+                      render: p(e)
+                    }
+                  ];
+                })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  de as default
+};

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

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

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

@@ -0,0 +1,42 @@
+import { jsx as l, Fragment as b } from "react/jsx-runtime";
+import g from "../../common/description/DescList.js";
+import { useMemo as A } from "react";
+import { useTranslation as x } from "react-i18next";
+import { TRANSLATION_NAMESPACE as C } from "../../../locale/hooks/translation-constants.js";
+import { getRendererValueCrudViewer as L } from "./CrudViewerUtil.js";
+function E({
+  className: n,
+  fields: t,
+  data: r,
+  descListColumn: u = { xs: 1, md: 3, sm: 2, lg: 4 },
+  layout: f,
+  action: o,
+  keepEmptyValues: p
+}) {
+  const { t: i } = x(C), c = A(() => {
+    const s = t.filter(({ hidden: e, hideInDescList: m }) => !e && !m).map((e, m) => ({
+      label: e.label,
+      noFormatting: !0,
+      value: L(e)(
+        r == null ? void 0 : r[e.name],
+        r,
+        m
+      )
+    }));
+    return o && s.push({ label: i("str.action"), value: o }), s;
+  }, [o, r, t, i]);
+  return r ? /* @__PURE__ */ l(
+    g,
+    {
+      keepEmptyValues: p,
+      bordered: !0,
+      column: u,
+      className: n,
+      layout: f,
+      list: c
+    }
+  ) : /* @__PURE__ */ l(b, {});
+}
+export {
+  E as CrudDecListView
+};

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

@@ -0,0 +1 @@
+"use strict";const r=require("react/jsx-runtime"),k=require("antd"),H=require("../../common/button/CloneButtonTable.cjs"),p=require("../../common/button/DeleteButtonTable.cjs"),U=require("../../common/button/ExportButton.cjs"),F=require("../../common/button/HideButtonTable.cjs"),rr=require("../../common/button/RefreshButton.cjs"),er=require("../../common/button/UpdateButtonTable.cjs"),tr=require("../../common/button/ViewButtonTable.cjs"),sr=require("../../common/layout/VerticalSpace.cjs"),ur=require("../../common/table/table.cjs"),j=require("react"),nr=require("react-i18next"),or=require("../../../locale/hooks/translation-constants.cjs"),cr=require("../CrudSearchComponent.cjs"),lr=require("./CrudDecListView.cjs"),O=require("./CrudViewerUtil.cjs");function ar({idField:s="id",loadingData:z,fields:l,isDeleting:T,isHiding:m,viewable:o=!1,paginateProps:h,onDelete:q,onHide:y,onUpdate:v,data:x=[],extraAction:i,onClickUpdate:c,minusHeight:R,scroll:_,onClickClone:B,className:$,expandable:w,size:A,bordered:G,descListColumn:J,extraView:S,decListLayout:K,scrollToTop:jr,onClickRefresh:I,closeViewOnClickUpdate:V,onExport:g,confirmHiding:M,confirmDeleting:d,rowClassName:Q,actionWidth:W=190,...X}){const{t:Y}=nr.useTranslation(or.TRANSLATION_NAMESPACE),E=j.useMemo(()=>l.map(({hideInTable:e,hidden:t,width:a,name:n,label:D,halign:P,...N})=>({title:D,width:a,key:n,dataIndex:n,hidden:e||t,align:P??(N.type==="number"?"right":void 0),render:O.getRendererValueCrudViewer(N)})),[l]),[u,f]=j.useState(),[b,C]=j.useState();j.useEffect(()=>{x&&f(e=>{if(e)return x.find(t=>t[s]===e[s])})},[x,s,u]);const L=j.useCallback(e=>{var a;const t=i==null?void 0:i(e);return(Array.isArray(t)?(a=t==null?void 0:t.filter(Boolean))!=null&&a.length:t)||v||c||B||q?r.jsxs(r.Fragment,{children:[t,(v||c)&&r.jsx(er,{value:e,onClick:n=>{C(n[s]),c==null||c(e),V&&f(void 0)}}),B&&r.jsx(H,{value:e,onClick:n=>B(n)}),g&&r.jsx(U.ExportButton,{value:e,onClick:async n=>await g(n)}),y&&r.jsx(F,{value:e,disabled:m,shouldConfirm:M,loading:m&&e[s]===b,onClick:async n=>{C(n[s]),await y({[s]:n[s]})}}),q&&r.jsx(p,{value:e,disabled:T,shouldConfirm:d,loading:T&&e[s]===b,onClick:async n=>{C(n[s]),await q({[s]:n[s]})}})]}):void 0},[V,d,M,i,s,T,m,B,c,q,g,y,v,b]),Z=j.useMemo(()=>{let e=typeof o=="string"?u==null?void 0:u[o]:void 0;if(typeof e=="object"){const t=l.find(a=>a.name===o);e=O.getRendererValueCrudViewer(t)(e,u,0)}return e},[o,u,l]);return r.jsxs("div",{children:[o&&r.jsx(k.Modal,{width:"100%",open:!!u,title:Z??r.jsx("div",{children:" "}),footer:r.jsx(r.Fragment,{}),closable:!0,onCancel:()=>f(void 0),children:!!u&&r.jsxs("div",{children:[r.jsx(lr.CrudDecListView,{layout:K,descListColumn:J,data:u,fields:l,action:L(u)}),S==null?void 0:S(u)]},u==null?void 0:u[s])}),r.jsx(cr,{fields:l,...X}),r.jsxs(sr,{children:[!!I&&r.jsx(rr.RefreshButton,{onClick:I}),r.jsx(ur,{rowClassName:Q,className:$,scroll:_??(R?{y:`calc(100vh - ${R})`}:void 0),id:"crud-table",dataSource:x,loading:z,bordered:G,size:A,expandable:w,pagination:h?{total:h.count,onChange:h.setPage,current:h.page,pageSize:h.pageSize}:void 0,columns:v||c||q||i||o?[...E,{title:Y("str.action"),dataIndex:"",fixed:"right",width:W,render:(e,t)=>r.jsxs(r.Fragment,{children:[o&&r.jsx(tr,{value:t,onClick:f}),L(t)]})}]:E})]})]})}module.exports=ar;