@kingteza/crud-component 1.44.1 → 1.44.2

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

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

@@ -10,7 +10,9 @@ export interface UploadFileExtended<T = any> extends UploadFile<T> {
     status?: UploadFileStatus;
 }
 interface Props extends FormItemProps {
-    values?: string[] | string;
+    values?: string | string[];
+    /** Resolve a stored path to a displayable URL. When omitted, `values` are treated as URLs. */
+    getRealUrl?: (path: string) => Promise<string>;
     maxCount?: number;
     onChange?: (file?: UploadFile, allFiles?: UploadFile[]) => void;
     buttonTitle?: string;
@@ -23,7 +25,7 @@ interface Props extends FormItemProps {
     icon?: ReactElement;
     loading?: boolean;
     buttonType?: string;
-    onAdd?: (file?: UploadFileExtended) => Promise<void>;
+    onAdd?: (file?: UploadFileExtended) => Promise<string | void>;
     onRemove?: (file?: UploadFileExtended) => void;
     showSkipCropButton?: boolean;
     skipResize?: boolean;