@kingteza/crud-component 1.10.4 → 1.12.0

package/README.md

@@ -18,9 +18,52 @@ 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
+### Option 1: Using CrudComponentProvider (Recommended)
 
-The library uses i18next for internationalization. You need to set it up before using the components:
+Wrap your app with `CrudComponentProvider` to automatically initialize the library:
+
+```typescript
+import { CrudComponentProvider } from '@kingteza/crud-component';
+
+function App() {
+  return (
+    <CrudComponentProvider>
+      {/* Your app components */}
+      <YourComponents />
+    </CrudComponentProvider>
+  );
+}
+```
+
+With custom i18n options:
+
+```typescript
+import { CrudComponentProvider } from '@kingteza/crud-component';
+
+function App() {
+  return (
+    <CrudComponentProvider
+      i18nOptions={{
+        language: 'en',
+        translations: {
+          en: {
+            'crud-component': {
+              // your custom translations
+            }
+          }
+        },
+        i18nInstance: existingI18nInstance // optional: use your existing i18n instance
+      }}
+    >
+      <YourComponents />
+    </CrudComponentProvider>
+  );
+}
+```
+
+### Option 2: Manual Setup (Legacy)
+
+If you prefer to initialize manually, you can still use `setupI18n()`:
 
 ```typescript
 import { setupI18n } from '@kingteza/crud-component';
@@ -30,7 +73,7 @@ setupI18n();
 
 // Or with custom options
 setupI18n({
-  language: 'en', // default language
+  language: 'en',
   translations: {
     en: {
       'crud-component': {
@@ -42,30 +85,32 @@ setupI18n({
 });
 ```
 
-### 2. Usage
+### Usage
 
 ```typescript
-import { CrudComponent } from '@kingteza/crud-component';
+import { CrudComponentProvider, CrudComponent } from '@kingteza/crud-component';
 import { Button } from '@kingteza/crud-component/common';
 
 function App() {
   return (
-    <CrudComponent
-      fields={[
-        { type: "text", name: "name", label: "Name", required: true },
-        { type: "select", name: "status", label: "Status", options: [
-          { value: "active", label: "Active" },
-          { value: "inactive", label: "Inactive" }
+    <CrudComponentProvider>
+      <CrudComponent
+        fields={[
+          { 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)}
-    />
+        data={[]}
+        onSave={(data) => console.log(data)}
+      />
+    </CrudComponentProvider>
   );
 }
 ```
 
-### 3. Available Imports
+### Available Imports
 
 The library provides several entry points for importing components:
 
@@ -73,6 +118,9 @@ The library provides several entry points for importing components:
 // Main CRUD component
 import { CrudComponent } from '@kingteza/crud-component';
 
+// Provider component
+import { CrudComponentProvider } from '@kingteza/crud-component';
+
 // Common components
 import { Button, Select, DatePicker } from '@kingteza/crud-component/common';
 

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

@@ -1 +1 @@
-"use strict";const l=require("react/jsx-runtime"),d=require("antd"),s=require("react"),j=require("../../locale/index.cjs.js");;/* empty css               */const x=require("../../hooks/NavigatorHooks.cjs.js"),y=s.forwardRef(({className:r,to:n,onClick:e,tooltip:a,...t},u)=>{const{t:i}=j.useTranslationLib(),o=x.useNavigateOptional(),c=s.useMemo(()=>l.jsx(d.Button,{ref:u,onClick:e??(n&&o?()=>o(n):void 0),className:r,...t,children:t.children}),[r,o,e,t,i,n]);return a?l.jsx(d.Tooltip,{title:a,children:c}):c}),q=s.forwardRef(({className:r,to:n,onClick:e,tooltip:a,...t},u)=>{const i=x.useNavigateOptional(),[o,c]=s.useState(!1),f=s.useCallback(async h=>{try{return c(!0),await e(h)}finally{c(!1)}},[e]),g=s.useMemo(()=>l.jsx(d.Button,{ref:u,loading:o||t.loading,onClick:e?f:n?()=>{i?i==null||i(n):window.location.href=n}:void 0,className:r,...t}),[f,r,o,i,e,t,n,u]);return a?l.jsx(d.Tooltip,{title:a,children:g}):g});q.displayName="ButtonComponent.Async";y.Async=q;module.exports=y;
+"use strict";const l=require("react/jsx-runtime"),d=require("antd"),s=require("react"),q=require("../../locale/index.cjs.js"),x=require("../../hooks/NavigatorHooks.cjs.js"),y=s.forwardRef(({className:a,to:n,onClick:t,tooltip:r,...e},u)=>{const{t:i}=q.useTranslationLib(),o=x.useNavigateOptional(),c=s.useMemo(()=>l.jsx(d.Button,{ref:u,onClick:t??(n&&o?()=>o(n):void 0),className:a,...e,children:e.children}),[a,o,t,e,i,n]);return r?l.jsx(d.Tooltip,{title:r,children:c}):c}),h=s.forwardRef(({className:a,to:n,onClick:t,tooltip:r,...e},u)=>{const i=x.useNavigateOptional(),[o,c]=s.useState(!1),f=s.useCallback(async j=>{try{return c(!0),await t(j)}finally{c(!1)}},[t]),g=s.useMemo(()=>l.jsx(d.Button,{ref:u,loading:o||e.loading,onClick:t?f:n?()=>{i?i==null||i(n):window.location.href=n}:void 0,className:a,...e}),[f,a,o,i,t,e,n,u]);return r?l.jsx(d.Tooltip,{title:r,children:g}):g});h.displayName="ButtonComponent.Async";y.Async=h;module.exports=y;

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

@@ -1,14 +1,13 @@
 import { jsx as c } from "react/jsx-runtime";
-import { Button as u, Tooltip as f } from "antd";
+import { Button as f, Tooltip as m } from "antd";
 import { forwardRef as y, useMemo as g, useState as v, useCallback as A } from "react";
 import { useTranslationLib as B } from "../../locale/index.es.js";
-/* empty css             */
 import { useNavigateOptional as h } from "../../hooks/NavigatorHooks.es.js";
-const p = y(
+const x = y(
   ({ className: r, to: n, onClick: t, tooltip: a, ...o }, l) => {
     const { t: e } = B(), i = h(), s = g(
       () => /* @__PURE__ */ c(
-        u,
+        f,
         {
           ref: l,
           onClick: t ?? (n && i ? () => i(n) : void 0),
@@ -19,7 +18,7 @@ const p = y(
       ),
       [r, i, t, o, e, n]
     );
-    return a ? /* @__PURE__ */ c(f, { title: a, children: s }) : s;
+    return a ? /* @__PURE__ */ c(m, { title: a, children: s }) : s;
   }
 ), b = y(
   ({ className: r, to: n, onClick: t, tooltip: a, ...o }, l) => {
@@ -32,9 +31,9 @@ const p = y(
         }
       },
       [t]
-    ), m = g(
+    ), u = g(
       () => /* @__PURE__ */ c(
-        u,
+        f,
         {
           ref: l,
           loading: i || o.loading,
@@ -47,11 +46,11 @@ const p = y(
       ),
       [d, r, i, e, t, o, n, l]
     );
-    return a ? /* @__PURE__ */ c(f, { title: a, children: m }) : m;
+    return a ? /* @__PURE__ */ c(m, { title: a, children: u }) : u;
   }
 );
 b.displayName = "ButtonComponent.Async";
-p.Async = b;
+x.Async = b;
 export {
-  p as default
+  x as default
 };

package/dist/common/picker/ImagePicker.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),je=require("react-advanced-cropper");;/* empty css                                                                                                                          */;/* empty css               */const O=require("@ant-design/icons"),U=require("antd"),s=require("react"),he=require("../../locale/index.cjs.js"),I=require("../button/Button.cjs.js"),we=require("../../util/ImageUtil.cjs.js"),Ce=require("../../icons/FlipHIcon.cjs.js"),be=require("../../icons/FlipVIcon.cjs.js"),ve=U.Form.Item,Y="crud-component.image-picker.button-state";function Z(n){return new Promise((u,p)=>{const o=new FileReader;o.readAsDataURL(n),o.onload=()=>u(o.result),o.onerror=m=>p(m)})}const Se=({values:n=[],required:u,buttonType:p,label:o,name:m,onChange:f,aspectRatio:h,buttonTitle:w,hidePreview:C,buttonSize:g="large",showButtonText:x=!0,showOnlyIcon:E=!1,icon:k=t.jsx(O.UploadOutlined,{}),loading:F,maxCount:b=1,onAdd:a,onRemove:R,listType:q,..._})=>{const[te,re]=s.useState(""),[se,ne]=s.useState(""),[oe,A]=s.useState(!1),T=s.useRef(),l=s.useRef(null),[i,z]=s.useState([]),[j,P]=s.useState(),ie=s.useRef(),ae=()=>A(!1),ce=async e=>{!e.url&&!e.preview&&(e.preview=await Z(e.originFileObj)),ne(e.url||e.preview),A(!0),re(e.name)},[B,N]=s.useState(!1),D=e=>{var r;(r=l.current)==null||r.rotateImage(e?-90:90)},H=s.useCallback(e=>{var r;l.current&&((r=l.current)==null||r.flipImage(e==="h",e==="v"))},[]);s.useEffect(()=>{f==null||f(i[0],i)},[i,f]);const le=async()=>{var y;const e=(y=l.current)==null?void 0:y.getCanvas(),{type:r,size:c,name:v,uid:S}=T.current;N(!0),e==null||e.toBlob(async ge=>{const xe=Object.assign(new File([ge],v,{type:r}),{uid:S}),K=await we.resizeImage(xe),Q=await Z(K),X={url:Q,name:v,uid:S,type:r,size:c,thumbUrl:Q,originFileObj:K};if(a)try{N(!0),await a(X)}finally{N(!1)}z([X,...i]),N(!1)}),P(void 0)},ue=()=>{P(void 0),T.current=void 0},L=s.useCallback(e=>{const r=e;if(r){T.current=r;const c=new FileReader;c.addEventListener("load",()=>{var v;if(typeof c.result=="string"){P(c.result);const S=localStorage.getItem(Y),y=S?JSON.parse(S):void 0;y&&((v=l.current)==null||v.setState(y)),setTimeout(()=>{G(l.current)},100)}}),c.readAsDataURL(r)}},[]);s.useEffect(()=>{if(n!=null&&n.length||typeof n=="string"){const e=Array.isArray(n)?n.map(r=>[{uid:n,url:r}]):[{uid:n,url:n}];z(e)}},[n]);const{t:d}=he.useTranslationLib(),de=s.useMemo(()=>u?{required:u,validator:(e,r,c)=>{j||i!=null&&i.length?c():c(`${o??""} ${d("err.validation.required")}`)}}:void 0,[u,j,i==null?void 0:i.length,o,d]),V=w??d("message.uploadButtonText"),J=s.useMemo(()=>t.jsx(ee,{showLoadingIndicator:B,_buttonTitle:V,buttonSize:g,buttonType:p,fileList:i,hidePreview:C,icon:k,loading:F,listType:q,maxCount:b,onChangeFile:L,onRemove:R,showButtonText:x,handlePreview:ce,setFileList:z}),[B,V,g,p,i,C,k,F,q,b,L,R,x]);ie.current=J.props.beforeUpload;const[pe,W]=s.useState(0),[me,$]=s.useState(0),[M,fe]=s.useState();s.useEffect(()=>{const e=setTimeout(()=>{M&&localStorage.setItem(Y,JSON.stringify(M))},400);return()=>clearTimeout(e)},[M]),s.useEffect(()=>{if(!j){W(0),$(0);const e=setTimeout(()=>{var r;(r=l.current)==null||r.reset()},1500);return()=>clearTimeout(e)}},[j]);const G=s.useCallback(async e=>{if(e){const r=e.getCoordinates();fe(e.getState()),W((r==null?void 0:r.width)??10),$((r==null?void 0:r.height)??10)}},[]);return t.jsxs(t.Fragment,{children:[t.jsx(ve,{label:o,..._,name:m,className:"mb-0",rules:[de,..._.rules??[]],children:J}),t.jsxs(U.Modal,{open:!!j,maskClosable:!1,onOk:le,closable:!1,onCancel:ue,destroyOnHidden:!0,children:[t.jsx(je.Cropper,{ref:l,stencilProps:{grid:!0},style:{border:"1px solid black"},src:j,onChange:e=>{G(e)},aspectRatio:h?{minimum:h,maximum:h}:void 0}),t.jsx("p",{className:"text-center",children:[pe,me].join(" ⨉ ")}),t.jsx("div",{className:"mt-2 d-flex justify-content-center",children:t.jsxs(U.Space.Compact,{children:[t.jsx(I,{size:"large",tooltip:d("str.rotateLeft"),icon:t.jsx(O.RotateLeftOutlined,{}),onClick:()=>D(!0)}),t.jsx(I,{size:"large",icon:t.jsx(O.RotateRightOutlined,{}),tooltip:d("str.rotateRight"),onClick:()=>D(!1)}),t.jsx(I,{size:"large",icon:t.jsx(Ce,{}),tooltip:d("str.flipHorizontal"),onClick:()=>H("h")}),t.jsx(I,{size:"large",icon:t.jsx(be,{}),tooltip:d("str.flipVertical"),onClick:()=>H("v")})]})})]}),t.jsx(U.Modal,{open:oe,title:te,footer:null,onCancel:ae,children:t.jsx("div",{className:"text-center",children:t.jsx("img",{alt:"example",style:{maxWidth:"400px"},src:se})})})]})},ee=({_buttonTitle:n,buttonSize:u,buttonType:p,fileList:o,hidePreview:m,icon:f,loading:h,maxCount:w,onChangeFile:C,onRemove:g,showButtonText:x,handlePreview:E,setFileList:k,showLoadingIndicator:F,listType:b="picture"})=>t.jsxs(U.Upload,{accept:"image/x-png,image/gif,image/jpeg",fileList:o,defaultFileList:o,onChange:()=>{},className:(o.length>=w?" hide-upload ":"")+" mb-0",multiple:!1,onPreview:m?void 0:E,onDrop:a=>(C(a.dataTransfer.files.item(0)),!1),listType:b,showUploadList:!m,onRemove:a=>{const R=o.filter(q=>a.uid!==q.uid);g==null||g(a),k(R)},beforeUpload:async a=>(C(a),!1),maxCount:w,children:[F&&t.jsx(O.LoadingOutlined,{}),t.jsx("div",{className:"d-flex flex-column",children:o.length<w&&(b==="picture-circle"?t.jsx(O.UploadOutlined,{}):t.jsx(I,{loading:h,tooltip:x?void 0:n,size:u,icon:f,type:x?p:"text",children:x?n:void 0}))})]},o.length);exports.UploadComponent=ee;exports.default=Se;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),be=require("react-advanced-cropper"),q=require("@ant-design/icons"),v=require("antd"),s=require("react"),ye=require("../../locale/index.cjs.js"),y=require("../button/Button.cjs.js"),ne=require("../../util/ImageUtil.cjs.js"),ve=require("../../icons/FlipHIcon.cjs.js"),Se=require("../../icons/FlipVIcon.cjs.js"),Ie=v.Form.Item,ie="crud-component.image-picker.button-state";function H(n){return new Promise((d,f)=>{const i=new FileReader;i.readAsDataURL(n),i.onload=()=>d(i.result),i.onerror=m=>f(m)})}const Fe=({values:n=[],required:d,buttonType:f,label:i,name:m,onChange:g,aspectRatio:S,buttonTitle:I,hidePreview:F,buttonSize:x="large",showButtonText:j=!0,showOnlyIcon:L=!1,icon:z=e.jsx(q.UploadOutlined,{}),loading:N,maxCount:O=1,onAdd:l,onRemove:T,listType:P,showSkipCropButton:ae,skipResize:V,...A})=>{const[le,ce]=s.useState(""),[ue,de]=s.useState(""),[pe,J]=s.useState(!1),M=s.useRef(),c=s.useRef(null),[o,E]=s.useState([]),[h,_]=s.useState(),fe=s.useRef(),me=()=>J(!1),ge=async t=>{!t.url&&!t.preview&&(t.preview=await H(t.originFileObj)),de(t.url||t.preview),J(!0),ce(t.name)},[W,p]=s.useState(!1),$=t=>{var r;(r=c.current)==null||r.rotateImage(t?-90:90)},G=s.useCallback(t=>{var r;c.current&&((r=c.current)==null||r.flipImage(t==="h",t==="v"))},[]);s.useEffect(()=>{g==null||g(o[0],o)},[o,g]);const K=s.useCallback(async t=>{var k;const{type:r,size:a,name:w,uid:C}=M.current;if(p(!0),t){const b=M.current,B=V?b:await ne.resizeImage(b),U=await H(B),R={url:U,name:w,uid:C,type:r,size:a,thumbUrl:U,originFileObj:B};if(l)try{p(!0),await l(R)}finally{p(!1)}E([R,...o]),p(!1),_(void 0)}else{const b=(k=c.current)==null?void 0:k.getCanvas();b==null||b.toBlob(async B=>{const U=Object.assign(new File([B],w,{type:r}),{uid:C}),R=V?U:await ne.resizeImage(U),re=await H(R),se={url:re,name:w,uid:C,type:r,size:a,thumbUrl:re,originFileObj:R};if(l)try{p(!0),await l(se)}finally{p(!1)}E([se,...o]),p(!1)}),_(void 0)}},[]),xe=()=>{_(void 0),M.current=void 0},Q=s.useCallback(t=>{const r=t;if(r){M.current=r;const a=new FileReader;a.addEventListener("load",()=>{var w;if(typeof a.result=="string"){_(a.result);const C=localStorage.getItem(ie),k=C?JSON.parse(C):void 0;k&&((w=c.current)==null||w.setState(k)),setTimeout(()=>{te(c.current)},100)}}),a.readAsDataURL(r)}},[]);s.useEffect(()=>{if(n!=null&&n.length||typeof n=="string"){const t=Array.isArray(n)?n.map(r=>[{uid:n,url:r}]):[{uid:n,url:n}];E(t)}},[n]);const{t:u}=ye.useTranslationLib(),je=s.useMemo(()=>d?{required:d,validator:(t,r,a)=>{h||o!=null&&o.length?a():a(`${i??""} ${u("err.validation.required")}`)}}:void 0,[d,h,o==null?void 0:o.length,i,u]),X=I??u("message.uploadButtonText"),Y=s.useMemo(()=>e.jsx(oe,{showLoadingIndicator:W,_buttonTitle:X,buttonSize:x,buttonType:f,fileList:o,hidePreview:F,icon:z,loading:N,listType:P,maxCount:O,onChangeFile:Q,onRemove:T,showButtonText:j,handlePreview:ge,setFileList:E}),[W,X,x,f,o,F,z,N,P,O,Q,T,j]);fe.current=Y.props.beforeUpload;const[he,Z]=s.useState(0),[we,ee]=s.useState(0),[D,Ce]=s.useState();s.useEffect(()=>{const t=setTimeout(()=>{D&&localStorage.setItem(ie,JSON.stringify(D))},400);return()=>clearTimeout(t)},[D]),s.useEffect(()=>{if(!h){Z(0),ee(0);const t=setTimeout(()=>{var r;(r=c.current)==null||r.reset()},1500);return()=>clearTimeout(t)}},[h]);const te=s.useCallback(async t=>{if(t){const r=t.getCoordinates();Ce(t.getState()),Z((r==null?void 0:r.width)??10),ee((r==null?void 0:r.height)??10)}},[]);return e.jsxs(e.Fragment,{children:[e.jsx(Ie,{label:i,...A,name:m,className:"mb-0",rules:[je,...A.rules??[]],children:Y}),e.jsxs(v.Modal,{open:!!h,maskClosable:!1,onOk:()=>K(!1),closable:!1,onCancel:xe,footer:(t,{CancelBtn:r,OkBtn:a})=>ae?e.jsxs(v.Space,{children:[e.jsx(r,{}),e.jsx(y,{type:"primary",onClick:()=>K(!0),children:u("str.skipCrop")}),e.jsx(a,{})]}):e.jsx(e.Fragment,{children:t}),destroyOnHidden:!0,children:[e.jsx(be.Cropper,{ref:c,stencilProps:{grid:!0},style:{border:"1px solid black"},src:h,onChange:t=>{te(t)},aspectRatio:S?{minimum:S,maximum:S}:void 0}),e.jsx("p",{className:"text-center",children:[he,we].join(" ⨉ ")}),e.jsx("div",{className:"mt-2 d-flex justify-content-center",children:e.jsxs(v.Space.Compact,{children:[e.jsx(y,{size:"large",tooltip:u("str.rotateLeft"),icon:e.jsx(q.RotateLeftOutlined,{}),onClick:()=>$(!0)}),e.jsx(y,{size:"large",icon:e.jsx(q.RotateRightOutlined,{}),tooltip:u("str.rotateRight"),onClick:()=>$(!1)}),e.jsx(y,{size:"large",icon:e.jsx(ve,{}),tooltip:u("str.flipHorizontal"),onClick:()=>G("h")}),e.jsx(y,{size:"large",icon:e.jsx(Se,{}),tooltip:u("str.flipVertical"),onClick:()=>G("v")})]})})]}),e.jsx(v.Modal,{open:pe,title:le,footer:null,onCancel:me,children:e.jsx("div",{className:"text-center",children:e.jsx("img",{alt:"example",style:{maxWidth:"400px"},src:ue})})})]})},oe=({_buttonTitle:n,buttonSize:d,buttonType:f,fileList:i,hidePreview:m,icon:g,loading:S,maxCount:I,onChangeFile:F,onRemove:x,showButtonText:j,handlePreview:L,setFileList:z,showLoadingIndicator:N,listType:O="picture"})=>e.jsxs(v.Upload,{accept:"image/x-png,image/gif,image/jpeg",fileList:i,defaultFileList:i,onChange:()=>{},className:(i.length>=I?" hide-upload ":"")+" mb-0",multiple:!1,onPreview:m?void 0:L,onDrop:l=>(F(l.dataTransfer.files.item(0)),!1),listType:O,showUploadList:!m,onRemove:l=>{const T=i.filter(P=>l.uid!==P.uid);x==null||x(l),z(T)},beforeUpload:async l=>(F(l),!1),maxCount:I,children:[N&&e.jsx(q.LoadingOutlined,{}),e.jsx("div",{className:"d-flex flex-column",children:i.length<I&&(O==="picture-circle"?e.jsx(q.UploadOutlined,{}):e.jsx(y,{loading:S,tooltip:j?void 0:n,size:d,icon:g,type:j?f:"text",children:j?n:void 0}))})]},i.length);exports.UploadComponent=oe;exports.default=Fe;

package/dist/common/picker/ImagePicker.d.ts

@@ -22,6 +22,8 @@ interface Props extends FormItemProps {
     buttonType?: string;
     onAdd?: (file?: UploadFile) => Promise<void>;
     onRemove?: (file?: UploadFile) => void;
+    showSkipCropButton?: boolean;
+    skipResize?: boolean;
 }
 /**
  * When submitting Uploader