@kingteza/crud-component 1.0.21 → 1.0.23

package/README.md

@@ -8,23 +8,82 @@ React CRUD component library built with Ant Design and TypeScript.
 npm install @kingteza/crud-component
 ```
 
-## Usage
+## Prerequisites
 
-```typescript
-import { CrudComponent } from '@kingteza/crud-component';
-import { Button } from '@kingteza/crud-component/common';
+This library has the following peer dependencies that need to be installed:
+
+```bash
+npm install antd@^5.22.6 react@^18.3.1 react-dom@^18.3.1 react-router-dom@^7.0.0
+```
+
+## Setup
+
+### 1. Initialize translations
 
-// Initialize translations
+The library uses i18next for internationalization. You need to set it up before using the components:
+
+```typescript
 import { setupI18n } from '@kingteza/crud-component';
+
+// Basic setup with default English translations
 setupI18n();
 
+// Or with custom options
+setupI18n({
+  language: 'en', // default language
+  translations: {
+    en: {
+      'crud-component': {
+        // your custom translations
+      }
+    }
+  },
+  i18nInstance: existingI18nInstance // optional: use your existing i18n instance
+});
+```
+
+### 2. Usage
+
+```typescript
+import { CrudComponent } from '@kingteza/crud-component';
+import { Button } from '@kingteza/crud-component/common';
+
 function App() {
   return (
     <CrudComponent
       fields={[
-        { type: "text", name: "name", label: "Name" }
+        { type: "text", name: "name", label: "Name", required: true },
+        { type: "select", name: "status", label: "Status", options: [
+          { value: "active", label: "Active" },
+          { value: "inactive", label: "Inactive" }
+        ]}
       ]}
       data={[]}
+      onSave={(data) => console.log(data)}
     />
   );
-}
+}
+```
+
+### 3. Available Imports
+
+The library provides several entry points for importing components:
+
+```typescript
+// Main CRUD component
+import { CrudComponent } from '@kingteza/crud-component';
+
+// Common components
+import { Button, Select, DatePicker } from '@kingteza/crud-component/common';
+
+// Utility functions
+import { DateUtil } from '@kingteza/crud-component/util';
+```
+
+## Documentation
+
+For detailed documentation of components and their props, please visit our [GitHub repository](https://github.com/kingteza/crud-component).
+
+## License
+
+MIT

package/dist/components/common/button/Button.cjs

@@ -1 +1 @@
-"use strict";const g=require("react/jsx-runtime"),q=require("antd"),A=require("../../../locale/hooks/translation-constants.cjs"),l=require("react"),f=require("react-i18next");;/* empty css            */const d=require("react-router-dom"),x=({className:s,to:n,onClick:t,tooltip:i,ref:y,...e})=>{var o;const{t:a}=f.useTranslation(A.TRANSLATION_NAMESPACE);let r;try{r=(o=d.useNavigate)==null?void 0:o.call(d)}catch(u){console.error(u)}const c=l.useMemo(()=>g.jsx(q.Button,{onClick:t||(n&&r?()=>r(n):void 0),className:s,...e,children:e.children||a(`button.${e.type}`)}),[s,r,t,e,a,n]);return i?g.jsx(q.Tooltip,{title:i,children:c}):c},h=({className:s,to:n,onClick:t,tooltip:i,ref:y,...e})=>{const a=d.useNavigate(),[r,c]=l.useState(!1),o=l.useCallback(async v=>{try{return c(!0),await t(v)}finally{c(!1)}},[t]),u=l.useMemo(()=>g.jsx(q.Button,{loading:r||e.loading,onClick:t?o:n?()=>a(n):void 0,className:s,...e}),[o,s,r,a,t,e,n]);return i?g.jsx(q.Tooltip,{title:i,children:u}):u};x.Async=h;module.exports=x;
+"use strict";const y=require("react/jsx-runtime"),f=require("antd"),g=require("../../../locale/hooks/translation-constants.cjs"),l=require("react"),A=require("react-i18next");;/* empty css            */const d=require("react-router-dom"),q=({className:i,to:t,onClick:n,tooltip:o,ref:x,...r})=>{var a;const{t:e}=A.useTranslation(g.TRANSLATION_NAMESPACE);let s;try{s=(a=d.useNavigate)==null?void 0:a.call(d)}catch(u){console.error(u)}const c=l.useMemo(()=>y.jsx(f.Button,{onClick:n||(t&&s?()=>s(t):void 0),className:i,...r,children:r.children||e(`button.${r.type}`)}),[i,s,n,r,e,t]);return o?y.jsx(f.Tooltip,{title:o,children:c}):c},j=({className:i,to:t,onClick:n,tooltip:o,ref:x,...r})=>{let e;try{e=d.useNavigate()}catch(h){console.error(h)}const[s,c]=l.useState(!1),a=l.useCallback(async h=>{try{return c(!0),await n(h)}finally{c(!1)}},[n]),u=l.useMemo(()=>y.jsx(f.Button,{loading:s||r.loading,onClick:n?a:t?()=>{e?e==null||e(t):window.location.href=t}:void 0,className:i,...r}),[a,i,s,e,n,r,t]);return o?y.jsx(f.Tooltip,{title:o,children:u}):u};q.Async=j;module.exports=q;

package/dist/components/common/button/Button.js

@@ -1,71 +1,79 @@
-import { jsx as m } from "react/jsx-runtime";
-import { Button as u, Tooltip as f } from "antd";
-import { TRANSLATION_NAMESPACE as h } from "../../../locale/hooks/translation-constants.js";
-import { useMemo as d, useState as v, useCallback as b } from "react";
-import { useTranslation as T } from "react-i18next";
+import { jsx as f } from "react/jsx-runtime";
+import { Button as u, Tooltip as d } from "antd";
+import { TRANSLATION_NAMESPACE as g } from "../../../locale/hooks/translation-constants.js";
+import { useMemo as y, useState as b, useCallback as T } from "react";
+import { useTranslation as v } from "react-i18next";
 /* empty css          */
-import { useNavigate as g } from "react-router-dom";
-const S = ({
-  className: o,
-  to: e,
-  onClick: t,
-  tooltip: i,
-  ref: y,
+import { useNavigate as h } from "react-router-dom";
+const w = ({
+  className: i,
+  to: r,
+  onClick: e,
+  tooltip: a,
+  ref: A,
   ...n
 }) => {
   var l;
-  const { t: a } = T(h);
-  let r;
+  const { t } = v(g);
+  let o;
   try {
-    r = (l = g) == null ? void 0 : l();
+    o = (l = h) == null ? void 0 : l();
   } catch (s) {
     console.error(s);
   }
-  const c = d(
-    () => /* @__PURE__ */ m(
+  const c = y(
+    () => /* @__PURE__ */ f(
       u,
       {
-        onClick: t || (e && r ? () => r(e) : void 0),
-        className: o,
+        onClick: e || (r && o ? () => o(r) : void 0),
+        className: i,
         ...n,
-        children: n.children || a(`button.${n.type}`)
+        children: n.children || t(`button.${n.type}`)
       }
     ),
-    [o, r, t, n, a, e]
+    [i, o, e, n, t, r]
   );
-  return i ? /* @__PURE__ */ m(f, { title: i, children: c }) : c;
-}, x = ({
-  className: o,
-  to: e,
-  onClick: t,
-  tooltip: i,
-  ref: y,
+  return a ? /* @__PURE__ */ f(d, { title: a, children: c }) : c;
+}, S = ({
+  className: i,
+  to: r,
+  onClick: e,
+  tooltip: a,
+  ref: A,
   ...n
 }) => {
-  const a = g(), [r, c] = v(!1), l = b(
-    async (A) => {
+  let t;
+  try {
+    t = h();
+  } catch (m) {
+    console.error(m);
+  }
+  const [o, c] = b(!1), l = T(
+    async (m) => {
       try {
-        return c(!0), await t(A);
+        return c(!0), await e(m);
       } finally {
         c(!1);
       }
     },
-    [t]
-  ), s = d(
-    () => /* @__PURE__ */ m(
+    [e]
+  ), s = y(
+    () => /* @__PURE__ */ f(
       u,
       {
-        loading: r || n.loading,
-        onClick: t ? l : e ? () => a(e) : void 0,
-        className: o,
+        loading: o || n.loading,
+        onClick: e ? l : r ? () => {
+          t ? t == null || t(r) : window.location.href = r;
+        } : void 0,
+        className: i,
         ...n
       }
     ),
-    [l, o, r, a, t, n, e]
+    [l, i, o, t, e, n, r]
   );
-  return i ? /* @__PURE__ */ m(f, { title: i, children: s }) : s;
+  return a ? /* @__PURE__ */ f(d, { title: a, children: s }) : s;
 };
-S.Async = x;
+w.Async = S;
 export {
-  S as default
+  w as default
 };

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

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

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),m=require("@ant-design/icons"),s=require("antd"),y=require("../../common/show-more/index.cjs"),C=require("../FileCrudField.cjs"),g=require("../ImageCrudField.cjs"),x=require("../../../locale/hooks/translation-constants.cjs"),d=require("i18next"),r=require("../../../util/DateUtil.cjs"),v=require("../../../util/NumberUtil.cjs");function j({type:a,render:i,...n}){return a==="object"?(t,u,o)=>typeof i=="function"?i(t,u,o):"":a==="select"?(t,u,o)=>{const e=n;let c=e.multiple?Array.isArray(t)?t.map(f=>f==null?void 0:f[e.innerFieldLabel??"name"]):void 0:t==null?void 0:t[e.innerFieldLabel??"name"];return(!c&&typeof t=="string"||typeof t=="number")&&(c=t),typeof i=="function"?i(c,u,o):Array.isArray(c)?c.join(", "):c}:a==="number"?(t,u,o)=>typeof i=="function"?i(t,u,o):n!=null&&n.int?v.default.toInt(t,n.formatted):v.default.toMoney(t):a==="enum"?(t,u,o)=>{var c;const e=d.t(((c=n==null?void 0:n.translation)==null?void 0:c[t??""])??t,{ns:x.TRANSLATION_NAMESPACE});return typeof i=="function"?i(t,u,o):e}:a==="date"?(t,u,o)=>{if(!t)return"-";const e=n!=null&&n.formatTime?r.formatDateTime(t):r.formatDate(t);return typeof i=="function"?i(t,u,o):e}:a==="checkbox"?(t,u,o)=>typeof i=="function"?i(t,u,o):t?l.jsx(m.CheckOutlined,{}):l.jsx(m.CloseOutlined,{}):a==="image"?(t,u,o)=>typeof i=="function"?i(t,u,o):l.jsx(g.ImageCrudCellValue,{value:t,provider:n.provider}):a==="file"?(t,u,o)=>typeof i=="function"?i(t,u,o):l.jsx(C.FileCrudCellValue,{value:t,provider:n.provider}):a==="time"?(t,u,o)=>{if(!t)return"-";const e=n==null?void 0:n.format,c=n==null?void 0:n.use12Hours,f=r.formatTime(t,e||(c?"hh:mm:ss A":void 0));return typeof i=="function"?i(t,u,o):f}:a==="color"?(t,u,o)=>typeof i=="function"?i(t,u,o):typeof t=="string"&&t.startsWith("#")?l.jsx(s.Tooltip,{title:t,children:l.jsx(s.Avatar,{style:{backgroundColor:t}})}):String(t):a==="textarea"?(t,u,o)=>{const e=(n==null?void 0:n.truncated)??1;return typeof i=="function"?i(t,u,o):e?l.jsx(y.ShowMore,{lines:e===!0?1:e,children:t}):t}:typeof i=="function"?i:t=>t}exports.getRendererValueCrudViewer=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),m=require("@ant-design/icons"),s=require("antd"),y=require("../../common/show-more/index.cjs"),C=require("../FileCrudField.cjs"),g=require("../ImageCrudField.cjs"),d=require("../../../locale/hooks/translation-constants.cjs"),j=require("i18next"),r=require("../../../util/DateUtil.cjs"),v=require("../../../util/NumberUtil.cjs");function x({type:a,render:i,...n}){return a==="object"?(t,u,o)=>typeof i=="function"?i(t,u,o):"":a==="select"?(t,u,o)=>{const e=n;let c=e.multiple?Array.isArray(t)?t.map(f=>f==null?void 0:f[e.innerFieldLabel??"name"]):void 0:t==null?void 0:t[e.innerFieldLabel??"name"];return(!c&&typeof t=="string"||typeof t=="number")&&(c=t),typeof i=="function"?i(c,u,o):Array.isArray(c)?c.join(", "):c}:a==="number"?(t,u,o)=>typeof i=="function"?i(t,u,o):n!=null&&n.int?v.default.toInt(t,n.formatted):v.default.toMoney(t):a==="enum"?(t,u,o)=>{var c;const e=j.t(((c=n==null?void 0:n.translation)==null?void 0:c[t??""])??t,{ns:d.TRANSLATION_NAMESPACE});return typeof i=="function"?i(t,u,o):e}:a==="date"?(t,u,o)=>{if(!t)return"-";const e=n!=null&&n.formatTime?r.formatDateTime(t):r.formatDate(t);return typeof i=="function"?i(t,u,o):e}:a==="checkbox"?(t,u,o)=>typeof i=="function"?i(t,u,o):t?l.jsx(m.CheckOutlined,{}):l.jsx(m.CloseOutlined,{}):a==="image"?(t,u,o)=>typeof i=="function"?i(t,u,o):l.jsx(g.ImageCrudCellValue,{value:t,provider:n.provider}):a==="file"?(t,u,o)=>typeof i=="function"?i(t,u,o):l.jsx(C.FileCrudCellValue,{value:t,provider:n.provider}):a==="time"?(t,u,o)=>{if(!t)return"-";const e=n==null?void 0:n.format,c=n==null?void 0:n.use12Hours,f=r.formatTime(t,e||(c?"hh:mm:ss A":void 0));return typeof i=="function"?i(t,u,o):f}:a==="color"?(t,u,o)=>typeof i=="function"?i(t,u,o):typeof t=="string"&&t.startsWith("#")?l.jsx(s.Tooltip,{title:t,children:l.jsx(s.Avatar,{style:{backgroundColor:t}})}):String(t):a==="textarea"?(t,u,o)=>{const e=(n==null?void 0:n.truncated)??1;return typeof i=="function"?i(t,u,o):e?l.jsx(y.ShowMore,{lines:e===!0?1:e,children:t}):t}:typeof i=="function"?i:t=>t}exports.getRendererValueCrudViewer=x;

package/dist/locale/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./hooks/translation-constants.cjs"),o=require("./translations/en.cjs"),t=require("i18next"),u=require("react-i18next"),a={en:{[s.TRANSLATION_NAMESPACE]:o}},i=(e={})=>{const{translations:n=a,language:r="en"}=e;return t.use(u.initReactI18next).init({resources:n,lng:r,fallbackLng:"en",ns:s.TRANSLATION_NAMESPACE,interpolation:{escapeValue:!1}}),t},l=(e,n)=>{t.addResourceBundle(e,s.TRANSLATION_NAMESPACE,n,!0,!0)};exports.defaultTranslations=a;exports.setupI18n=i;exports.updateTranslations=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./hooks/translation-constants.cjs"),d=require("./translations/en.cjs"),n=require("i18next"),A=require("react-i18next"),o={en:{[a.TRANSLATION_NAMESPACE]:d}},I=(t={})=>{const{translations:e=o,language:s="en",i18nInstance:r}=t,i=r||n;return i.isInitialized?Object.entries(e).forEach(([u,c])=>{Object.entries(c).forEach(([l,T])=>{n.addResourceBundle(u,l,T,!0,!0)})}):i.use(A.initReactI18next).init({resources:e,lng:s,fallbackLng:"en",ns:a.TRANSLATION_NAMESPACE,interpolation:{escapeValue:!1}}),n},N=(t,e,s)=>{(s||n).addResourceBundle(t,a.TRANSLATION_NAMESPACE,e,!0,!0)};exports.defaultTranslations=o;exports.setupI18n=I;exports.updateTranslations=N;

package/dist/locale/index.d.ts

@@ -1,4 +1,6 @@
+import { TRANSLATION_NAMESPACE } from 'locale/hooks/translation-constants';
 import { default as en } from './translations/en';
+import { default as i18n } from 'i18next';
 export declare const defaultTranslations: {
     en: {
         "crud-component": {
@@ -62,8 +64,11 @@ export declare const defaultTranslations: {
 };
 export type LibTranslations = typeof en;
 export interface SetupI18nOptions {
-    translations?: typeof defaultTranslations;
+    translations?: Record<string, {
+        [TRANSLATION_NAMESPACE]: LibTranslations;
+    }>;
     language?: string;
+    i18nInstance?: typeof i18n;
 }
 export declare const setupI18n: (options?: SetupI18nOptions) => import('i18next').i18n;
-export declare const updateTranslations: (language: string, translations: Record<string, any>) => void;
+export declare const updateTranslations: (language: string, translations: Record<string, any>, i18nInstance?: typeof i18n) => void;

package/dist/locale/index.js

@@ -1,25 +1,29 @@
 import { TRANSLATION_NAMESPACE as o } from "./hooks/translation-constants.js";
-import a from "./translations/en.js";
-import t from "i18next";
-import { initReactI18next as s } from "react-i18next";
-const i = {
+import f from "./translations/en.js";
+import n from "i18next";
+import { initReactI18next as d } from "react-i18next";
+const p = {
   en: {
-    [o]: a
+    [o]: f
   }
-}, m = (n = {}) => {
-  const { translations: e = i, language: r = "en" } = n;
-  return t.use(s).init({
+}, A = (t = {}) => {
+  const { translations: e = p, language: s = "en", i18nInstance: r } = t, i = r || n;
+  return i.isInitialized ? Object.entries(e).forEach(([a, c]) => {
+    Object.entries(c).forEach(([u, l]) => {
+      n.addResourceBundle(a, u, l, !0, !0);
+    });
+  }) : i.use(d).init({
     resources: e,
-    lng: r,
+    lng: s,
     fallbackLng: "en",
     ns: o,
     interpolation: {
       escapeValue: !1
     }
-  }), t;
-}, f = (n, e) => {
-  t.addResourceBundle(
-    n,
+  }), n;
+}, E = (t, e, s) => {
+  (s || n).addResourceBundle(
+    t,
     o,
     e,
     !0,
@@ -27,7 +31,7 @@ const i = {
   );
 };
 export {
-  i as defaultTranslations,
-  m as setupI18n,
-  f as updateTranslations
+  p as defaultTranslations,
+  A as setupI18n,
+  E as updateTranslations
 };

package/dist/util/DateUtil.js

@@ -1,6 +1,6 @@
-import a from "dayjs";
-import e from "i18next";
-const m = (t) => a(t).locale(e.language).format("YYYY-MM-DD HH:mm"), r = (t) => a(t).locale(e.language).format("YYYY-MM-DD HH:mm:ss"), n = (t) => a(t).locale(e.language).format("YYYY-MM-DD"), l = (t, o = "HH:mm:ss") => a(t).locale(e.language).format(o), s = { formatDateTime: m, formatDate: n, formatDateTimeWithSecond: r, formatTime: l };
+import t from "dayjs";
+import o from "i18next";
+const m = (a) => t(a).locale(o.language).format("YYYY-MM-DD HH:mm"), r = (a) => t(a).locale(o.language).format("YYYY-MM-DD HH:mm:ss"), n = (a) => t(a).locale(o.language).format("YYYY-MM-DD"), l = (a, e = "HH:mm:ss") => t(a).locale(o.language).format(e), s = { formatDateTime: m, formatDate: n, formatDateTimeWithSecond: r, formatTime: l };
 export {
   s as default
 };

package/package.json

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