@kingteza/crud-component 1.13.0 → 1.13.2

package/README.md

@@ -16,6 +16,16 @@ This library has the following peer dependencies that need to be installed:
 npm install antd@^5.22.6 react@^18.3.1 react-dom@^18.3.1 react-router-dom@^7.0.0
 ```
 
+## CSS Styles
+
+**Important:** You need to import the CSS styles manually in your application entry point:
+
+```typescript
+import '@kingteza/crud-component/styles';
+```
+
+This should be imported once at the root of your application (e.g., in your `main.tsx`, `index.tsx`, or `App.tsx` file).
+
 ## Setup
 
 ### Option 1: Using CrudComponentProvider (Recommended)
@@ -23,6 +33,7 @@ npm install antd@^5.22.6 react@^18.3.1 react-dom@^18.3.1 react-router-dom@^7.0.0
 Wrap your app with `CrudComponentProvider` to automatically initialize the library:
 
 ```typescript
+import '@kingteza/crud-component/styles';
 import { CrudComponentProvider } from '@kingteza/crud-component';
 
 function App() {
@@ -66,6 +77,7 @@ function App() {
 If you prefer to initialize manually, you can still use `setupI18n()`:
 
 ```typescript
+import '@kingteza/crud-component/styles';
 import { setupI18n } from '@kingteza/crud-component';
 
 // Basic setup with default English translations
@@ -88,6 +100,7 @@ setupI18n({
 ### Usage
 
 ```typescript
+import '@kingteza/crud-component/styles';
 import { CrudComponentProvider, CrudComponent } from '@kingteza/crud-component';
 import { Button } from '@kingteza/crud-component/common';
 
@@ -115,6 +128,9 @@ function App() {
 The library provides several entry points for importing components:
 
 ```typescript
+// CSS styles (required - import once at your app entry point)
+import '@kingteza/crud-component/styles';
+
 // Main CRUD component
 import { CrudComponent } from '@kingteza/crud-component';
 

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

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

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

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

package/package.json

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