react-pic-gallery 1.5.10 → 1.5.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1804,7 +1804,9 @@ const ImgLazyLoading = (props) => {
|
|
|
1804
1804
|
setLoadingState(true);
|
|
1805
1805
|
const ac = new AbortController();
|
|
1806
1806
|
if (props.imgSrc) {
|
|
1807
|
-
fetch(props.imgSrc
|
|
1807
|
+
fetch(props.imgSrc, {
|
|
1808
|
+
mode: "cors"
|
|
1809
|
+
}).then((response) => response.blob()).then((blob) => {
|
|
1808
1810
|
setImgSrcUrl(URL.createObjectURL(blob));
|
|
1809
1811
|
setLoadingState(false);
|
|
1810
1812
|
});
|
|
@@ -64,4 +64,4 @@ object-assign
|
|
|
64
64
|
transform: rotate(360deg);
|
|
65
65
|
}
|
|
66
66
|
}
|
|
67
|
-
`;function ln(){return p.useEffect(()=>{const i=document.querySelector("#react-pic-style");if(i)i.innerHTML=i.innerHTML+Oi;else{const t=document.createElement("style");t.id="react-pic-style",t.innerHTML=Oi,document.body.appendChild(t)}return()=>{var t;(t=document.querySelector("#react-pic-style"))==null||t.remove()}},[]),g("div",{className:"lds-dual-ring"})}const zi=i=>{var a;const[t,e]=b.default.useState(""),n=((a=i.options)==null?void 0:a.customLoadComponent)!==void 0?i.options.customLoadComponent:ln,[r,o]=p.useState(!0);return b.default.useEffect(()=>{o(!0);const s=new AbortController;return i.imgSrc&&fetch(i.imgSrc).then(l=>l.blob()).then(l=>{e(URL.createObjectURL(l)),o(!1)}),()=>{s.abort()}},[i.imgSrc]),r?g("div",{style:{height:"100%",width:"100%",display:"flex",alignItems:"center",alignContent:"center",justifyContent:"center",background:i.lightboxMode?"":"rgba(0, 0, 0, 0.157)",border:i.lightboxMode?"":"1px solid rgba(0, 0, 0,0.3)"},children:g(n,{})}):g("img",{src:t,alt:"",id:i.id,style:k({},i.style),onClick:i.onClick})},Ei=i=>{var o,a,s,l,u,d;const[t,e]=p.useState(""),[n,r]=p.useState(i.currentImgIndex);return p.useCallback(()=>r(n+1),[n]),p.useCallback(()=>r(n-1),[n]),b.default.useEffect(()=>{var m,v;const f=((m=i.imgList[n])==null?void 0:m.fullSrc)?i.imgList[n].fullSrc:((v=i.imgList[n])==null?void 0:v.thumbnailSrc)?i.imgList[n].thumbnailSrc:null;f&&e(f),document.body.style.overflow="hidden"},[n]),q("div",{className:"reactPic-lightbox",style:T.lightbox,onClick:f=>{document.body.style.overflow="",f.target.className==="reactPic-lightbox"&&i.onClose()},children:[g("div",{style:T.topCustomContent,className:"reactPic-topCustomContent",children:(o=i.topCustomContent)==null?void 0:o.call(i,{closeLightbox:i.onClose,imgObject:i.imgList[n]})}),q("div",{children:[g(rn,{children:g(sn,{wrapperStyle:{overflow:"visible"},children:g(zi,{lightboxMode:!0,imgSrc:t,id:"lightboxImg",style:{maxWidth:"80vw",maxHeight:"calc(80vh - 20px)",margin:"auto",zIndex:99999999999}})})}),n-1>=0&&!((a=i.options)==null?void 0:a.hidePagination)&&g("div",{className:"react-lightbox-prevBtn",style:{position:"absolute",left:20,height:50,top:"calc(50% - 50px)",fontSize:50,cursor:"pointer",color:"white",display:((s=i.options)==null?void 0:s.hidePagination)?"none":"inherit"},onClick:n-1>=0?()=>r(n-1):void 0,children:"\u2039"}),n+1<i.imgList.length&&!((l=i.options)==null?void 0:l.hidePagination)&&g("div",{className:"react-lightbox-nextBtn",style:{position:"absolute",right:20,height:50,top:"calc(50% - 50px)",fontSize:50,cursor:"pointer",color:"white",display:((u=i.options)==null?void 0:u.hidePagination)?"none":"inherit"},onClick:n+1<i.imgList.length?()=>r(n+1):void 0,children:"\u203A"})]}),g("div",{style:T.bottomCustomContent,className:"reactPic-bottomCustomContent",children:(d=i.bottomCustomContent)==null?void 0:d.call(i,{closeLightbox:i.onClose,imgObject:i.imgList[n]})})]})};function un(i){var e;const t=p.useCallback(n=>()=>i.onOpen(n),[]);return g("div",{className:"reactPic-grid",style:Zi(k({},T.Grid),{gridTemplateColumns:`repeat(${((e=i.options)==null?void 0:e.picsPerRow)?i.options.picsPerRow:"3"}, 1fr)`}),children:i.imgList.map((n,r)=>{var o;return g("div",{className:"reactPic-imgDiv",style:{overflow:"hidden",width:"100%",height:"100%",minHeight:"150px"},children:g("div",{className:"reactPic-innerImgDiv",style:{display:"flex",justifyContent:"center",alignItems:"center",overflow:"hidden !important",width:"100%",height:((o=i.options)==null?void 0:o.rowHeight)?i.options.rowHeight:"150px",cursor:"pointer"},children:g(zi,{options:i.options,imgSrc:n.thumbnailSrc?n.thumbnailSrc:n.fullSrc,style:{flexShrink:0,minWidth:"100%",minHeight:"100%"},onClick:t(r)})})},n.thumbnailSrc?n.thumbnailSrc:n.fullSrc)})})}var dn=b.default.memo(un);const fn={downloadBtnDisplay:!0,descriptionBoxDisplay:!0,navigation:!0};function mn(i){var l;const[t,e]=p.useState(!1),[n,r]=p.useState(0),o=k(k({},fn),i.options);p.useEffect(()=>{typeof i.setExtLightboxChildren=="function"&&(t?i.setExtLightboxChildren(g(Ei,{open:t,currentImgIndex:n,imgList:i.imgList,topCustomContent:i.topCustomContent,bottomCustomContent:i.bottomCustomContent,options:o,onClose:()=>e(!1)})):i.setExtLightboxChildren(void 0))},[t]);const a=p.useCallback(u=>{r(u),e(!0)},[]),s=p.useCallback(()=>{e(!1)},[]);return q("div",{className:"reactPic-wrapper",style:T.Wrapper,children:[t&&!((l=i.options)==null?void 0:l.externalLightbox)?g(Ei,{open:t,currentImgIndex:n,imgList:i.imgList,topCustomContent:i.topCustomContent,bottomCustomContent:i.bottomCustomContent,options:o,onClose:s}):null,g(dn,{options:i.options,imgList:i.imgList,onOpen:a})]})}return mn});
|
|
67
|
+
`;function ln(){return p.useEffect(()=>{const i=document.querySelector("#react-pic-style");if(i)i.innerHTML=i.innerHTML+Oi;else{const t=document.createElement("style");t.id="react-pic-style",t.innerHTML=Oi,document.body.appendChild(t)}return()=>{var t;(t=document.querySelector("#react-pic-style"))==null||t.remove()}},[]),g("div",{className:"lds-dual-ring"})}const zi=i=>{var a;const[t,e]=b.default.useState(""),n=((a=i.options)==null?void 0:a.customLoadComponent)!==void 0?i.options.customLoadComponent:ln,[r,o]=p.useState(!0);return b.default.useEffect(()=>{o(!0);const s=new AbortController;return i.imgSrc&&fetch(i.imgSrc,{mode:"cors"}).then(l=>l.blob()).then(l=>{e(URL.createObjectURL(l)),o(!1)}),()=>{s.abort()}},[i.imgSrc]),r?g("div",{style:{height:"100%",width:"100%",display:"flex",alignItems:"center",alignContent:"center",justifyContent:"center",background:i.lightboxMode?"":"rgba(0, 0, 0, 0.157)",border:i.lightboxMode?"":"1px solid rgba(0, 0, 0,0.3)"},children:g(n,{})}):g("img",{src:t,alt:"",id:i.id,style:k({},i.style),onClick:i.onClick})},Ei=i=>{var o,a,s,l,u,d;const[t,e]=p.useState(""),[n,r]=p.useState(i.currentImgIndex);return p.useCallback(()=>r(n+1),[n]),p.useCallback(()=>r(n-1),[n]),b.default.useEffect(()=>{var m,v;const f=((m=i.imgList[n])==null?void 0:m.fullSrc)?i.imgList[n].fullSrc:((v=i.imgList[n])==null?void 0:v.thumbnailSrc)?i.imgList[n].thumbnailSrc:null;f&&e(f),document.body.style.overflow="hidden"},[n]),q("div",{className:"reactPic-lightbox",style:T.lightbox,onClick:f=>{document.body.style.overflow="",f.target.className==="reactPic-lightbox"&&i.onClose()},children:[g("div",{style:T.topCustomContent,className:"reactPic-topCustomContent",children:(o=i.topCustomContent)==null?void 0:o.call(i,{closeLightbox:i.onClose,imgObject:i.imgList[n]})}),q("div",{children:[g(rn,{children:g(sn,{wrapperStyle:{overflow:"visible"},children:g(zi,{lightboxMode:!0,imgSrc:t,id:"lightboxImg",style:{maxWidth:"80vw",maxHeight:"calc(80vh - 20px)",margin:"auto",zIndex:99999999999}})})}),n-1>=0&&!((a=i.options)==null?void 0:a.hidePagination)&&g("div",{className:"react-lightbox-prevBtn",style:{position:"absolute",left:20,height:50,top:"calc(50% - 50px)",fontSize:50,cursor:"pointer",color:"white",display:((s=i.options)==null?void 0:s.hidePagination)?"none":"inherit"},onClick:n-1>=0?()=>r(n-1):void 0,children:"\u2039"}),n+1<i.imgList.length&&!((l=i.options)==null?void 0:l.hidePagination)&&g("div",{className:"react-lightbox-nextBtn",style:{position:"absolute",right:20,height:50,top:"calc(50% - 50px)",fontSize:50,cursor:"pointer",color:"white",display:((u=i.options)==null?void 0:u.hidePagination)?"none":"inherit"},onClick:n+1<i.imgList.length?()=>r(n+1):void 0,children:"\u203A"})]}),g("div",{style:T.bottomCustomContent,className:"reactPic-bottomCustomContent",children:(d=i.bottomCustomContent)==null?void 0:d.call(i,{closeLightbox:i.onClose,imgObject:i.imgList[n]})})]})};function un(i){var e;const t=p.useCallback(n=>()=>i.onOpen(n),[]);return g("div",{className:"reactPic-grid",style:Zi(k({},T.Grid),{gridTemplateColumns:`repeat(${((e=i.options)==null?void 0:e.picsPerRow)?i.options.picsPerRow:"3"}, 1fr)`}),children:i.imgList.map((n,r)=>{var o;return g("div",{className:"reactPic-imgDiv",style:{overflow:"hidden",width:"100%",height:"100%",minHeight:"150px"},children:g("div",{className:"reactPic-innerImgDiv",style:{display:"flex",justifyContent:"center",alignItems:"center",overflow:"hidden !important",width:"100%",height:((o=i.options)==null?void 0:o.rowHeight)?i.options.rowHeight:"150px",cursor:"pointer"},children:g(zi,{options:i.options,imgSrc:n.thumbnailSrc?n.thumbnailSrc:n.fullSrc,style:{flexShrink:0,minWidth:"100%",minHeight:"100%"},onClick:t(r)})})},n.thumbnailSrc?n.thumbnailSrc:n.fullSrc)})})}var dn=b.default.memo(un);const fn={downloadBtnDisplay:!0,descriptionBoxDisplay:!0,navigation:!0};function mn(i){var l;const[t,e]=p.useState(!1),[n,r]=p.useState(0),o=k(k({},fn),i.options);p.useEffect(()=>{typeof i.setExtLightboxChildren=="function"&&(t?i.setExtLightboxChildren(g(Ei,{open:t,currentImgIndex:n,imgList:i.imgList,topCustomContent:i.topCustomContent,bottomCustomContent:i.bottomCustomContent,options:o,onClose:()=>e(!1)})):i.setExtLightboxChildren(void 0))},[t]);const a=p.useCallback(u=>{r(u),e(!0)},[]),s=p.useCallback(()=>{e(!1)},[]);return q("div",{className:"reactPic-wrapper",style:T.Wrapper,children:[t&&!((l=i.options)==null?void 0:l.externalLightbox)?g(Ei,{open:t,currentImgIndex:n,imgList:i.imgList,topCustomContent:i.topCustomContent,bottomCustomContent:i.bottomCustomContent,options:o,onClose:s}):null,g(dn,{options:i.options,imgList:i.imgList,onOpen:a})]})}return mn});
|