@kingteza/crud-component 1.16.0 → 1.17.1

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

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

@@ -1,11 +1,14 @@
 import { FormItemProps } from 'antd';
 import { UploadFile } from 'antd/lib/upload/interface';
 import { FC, ReactElement } from 'react';
-import { UploadListType } from 'antd/es/upload/interface';
+import { UploadFileStatus, UploadListType } from 'antd/es/upload/interface';
 export declare function dataURLtoFile({ url, name }: {
     url: any;
     name: any;
 }): File;
+export interface UploadFileExtended<T = any> extends UploadFile<T> {
+    status?: UploadFileStatus;
+}
 interface Props extends FormItemProps {
     values?: string[] | string;
     maxCount?: number;
@@ -20,10 +23,11 @@ interface Props extends FormItemProps {
     icon?: ReactElement;
     loading?: boolean;
     buttonType?: string;
-    onAdd?: (file?: UploadFile) => Promise<void>;
-    onRemove?: (file?: UploadFile) => void;
+    onAdd?: (file?: UploadFileExtended) => Promise<void>;
+    onRemove?: (file?: UploadFileExtended) => void;
     showSkipCropButton?: boolean;
     skipResize?: boolean;
+    asyncUpload?: boolean;
 }
 /**
  * When submitting Uploader