react-photo-album - npm Package Compare versions

Comparing version 1.10.1 to 1.10.2

dist/index.cjs.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react/jsx-runtime"),t=require("react");function o(){return o=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(n[r]=o[r])}return n},o.apply(this,arguments)}function r(n,t){if(null==n)return{};var o,r,e={},i=Object.keys(n);for(r=0;r<i.length;r++)o=i[r],t.indexOf(o)>=0||(e[o]=n[o]);return e}var e=function(n){return n.width/n.height},i=function(n,t){void 0===t&&(t=0);var o=Math.pow(10,t);return Math.round((n+Number.EPSILON)*o)/o},u=function(n){var t=[],o=n,r=0,e=function(n,r){return o(t[n],t[r])<0},i=function(n,o){var r=t[n];t[n]=t[o],t[o]=r};return{push:function(n){t[r+=1]=n,function(n){for(var t=n>>1;n>1&&e(t,n);)i(t,n),t=(n=t)>>1}(r)},pop:function(){if(0!==r){i(1,r),r-=1;var n=t.pop();return function(n){for(var t=n<<1;t<=r&&(t<r&&e(t,t+1)&&t++,e(n,t));)i(n,t),t=(n=t)<<1}(1),n}},size:function(){return r}}},a=function(n,t,o){var r=function(n,t,o){var r={},e={},i={};i[t]=0;var a,s,l=u((a=function(n){return n.weight},function(n,t){return a(t)-a(n)}));for(l.push({id:t,weight:0});void 0!==(s=l.pop());){var c=s.id;if(!e[c]){var p=n(c);for(var d in e[c]=1,p){var h=s.weight+p[d];(void 0===i[d]||i[d]>h&&(i[d]/h>1.005||r[d]<c))&&(i[d]=h,l.push({id:d,weight:h}),r[d]=c)}}}if(void 0!==i[o])return r}(n,t,o);return void 0!==r?function(n,t){for(var o=[],r=t;r;)o.push(r),r=n[r];return o.reverse()}(r,o):void 0},s=function(n,t,o,r){return(t-(n.length-1)*o-2*r*n.length)/n.reduce((function(n,t){return n+e(t)}),0)},l=function(n,t,o,r,e,i,u){var a=n.slice(t,o),l=s(a,r,i,u);return l>0?Math.pow(l-e,2)*a.length:void 0},c=function(n){var t,o,r=n.photos,u=n.layoutOptions,c=n.instrumentation,p=u.spacing,d=u.padding,h=u.containerWidth,f=u.targetRowHeight,m=u.rowConstraints;null===(t=null==c?void 0:c.onStartLayoutComputation)||void 0===t||t.call(c);var v=function(n){var t=n.photos,o=n.targetRowHeight,r=n.containerWidth,u=t.reduce((function(n,t){return Math.min(e(t),n)}),Number.MAX_VALUE);return i(r/o/u)+2}({photos:r,containerWidth:h,targetRowHeight:f}),g=function(n){var t=n.photos,o=n.layoutOptions,r=n.targetRowHeight,e=n.limitNodeSearch,i=n.rowConstraints,u=n.instrumentation;return function(n){var a,s,c=o.containerWidth,p=o.spacing,d=o.padding,h={},f=+n;h[+f]=0;for(var m=null!==(a=null==i?void 0:i.minPhotos)&&void 0!==a?a:1,v=Math.min(e,null!==(s=null==i?void 0:i.maxPhotos)&&void 0!==s?s:1/0),g=f+m;g<t.length+1&&(!(g-f>v)||(null==u?void 0:u.fullGraphSearch));g+=1){var y=l(t,f,g,c,r,p,d);if(void 0===y)break;h[g.toString()]=y}return h}}({photos:r,layoutOptions:u,targetRowHeight:f,limitNodeSearch:v,rowConstraints:m,instrumentation:c}),y=a(g,"0",""+r.length);if(void 0!==y){for(var w=[],C=function(n){var t=r.map((function(n,t){return{photo:n,index:t}})).slice(+y[n-1],+y[n]),o=s(t.map((function(n){return n.photo})),h,p,d);w.push(t.map((function(n,r){var i=n.photo,u=n.index;return{photo:i,layout:{height:o,width:o*e(i),index:u,photoIndex:r,photosCount:t.length}}})))},x=1;x<y.length;x+=1)C(x);return null===(o=null==c?void 0:c.onFinishLayoutComputation)||void 0===o||o.call(c,w),w}},p=["src","alt","srcSet","sizes"],d=["style"],h=function(n,t,o){var r=t.width,e=t.photosCount,u=o.spacing,a=o.padding,s=o.containerWidth,l=u*(e-1)+2*a*e;return"calc(("+n+" - "+l+"px) / "+i((s-l)/r,5)+")"},f=function(n,t){return"rows"!==t.layout?"calc(100% - "+2*t.padding+"px)":h("100%",n,t)},m=function(n,t,o){var r,e;return h(null!==(e=null===(r=n.match(/calc\((.*)\)/))||void 0===r?void 0:r[1])&&void 0!==e?e:n,t,o)},v=function(t){var e=t.imageProps,i=e.src,u=e.alt,a=e.srcSet,s=e.sizes,l=r(e,p);return n.jsx("img",o({src:i,alt:u},a?{srcSet:a,sizes:s}:null,l))},g=function(n){var t,e=n.photo,i=n.layout,u=n.layoutOptions,a=n.imageProps,s=(a=void 0===a?{}:a).style,l=r(a,d),c=n.renderPhoto,p=u.onClick,h=o({display:"block",boxSizing:"content-box",width:f(i,u),height:"auto",aspectRatio:e.width+" / "+e.height},u.padding?{padding:u.padding+"px"}:null,("columns"===u.layout||"masonry"===u.layout)&&i.photoIndex<i.photosCount-1?{marginBottom:u.spacing+"px"}:null,p?{cursor:"pointer"}:null,s),g=p?function(n){p(n,e,i.index)}:void 0,y=o({src:e.src,alt:null!==(t=e.alt)&&void 0!==t?t:"",title:e.title,onClick:g,style:h,className:"react-photo-album--photo"},function(n,t,o){var r;return n.images&&n.images.length>0&&(r=n.images.concat([{src:n.src,width:n.width,height:n.height}]).sort((function(n,t){return n.width-t.width})).map((function(n){return n.src+" "+n.width+"w"})).join(", ")),{srcSet:r,sizes:o.sizes?(o.sizes.sizes||[]).map((function(n){var r=n.viewport,e=n.size;return r+" "+m(e,t,o)})).concat(m(o.sizes.size,t,o)).join(", "):Math.ceil(t.width/(o.viewportWidth||o.containerWidth)*100)+"vw"}}(e,i,u),l);return(null!=c?c:v)({photo:e,layout:i,layoutOptions:u,imageProps:y})},y=["style"],w=function(t){var r=t.rowContainerProps,e=t.children;return n.jsx("div",o({},r,{children:e}))},C=function(n){var t=n.layoutOptions,e=n.rowIndex,i=n.rowsCount,u=n.renderRowContainer,a=n.rowContainerProps,s=(a=void 0===a?{}:a).style,l=r(a,y),c=n.children,p=o({className:"react-photo-album--row",style:o({display:"flex",flexDirection:"row",flexWrap:"nowrap",alignItems:"flex-start",justifyContent:"space-between"},e<i-1?{marginBottom:t.spacing+"px"}:null,s)},l);return(null!=u?u:w)({layoutOptions:t,rowIndex:e,rowsCount:i,rowContainerProps:p,children:c})},x=function(t){var o=t.photos,r=t.layoutOptions,e=t.renderPhoto,i=t.renderRowContainer,u=t.componentsProps,a=t.instrumentation,s=c({photos:o,layoutOptions:r,instrumentation:a});return void 0===s?n.jsx(n.Fragment,{}):n.jsx(n.Fragment,{children:s.map((function(t,o){return n.jsx(C,{layoutOptions:r,rowIndex:o,rowsCount:s.length,renderRowContainer:i,rowContainerProps:null==u?void 0:u.rowContainerProps,children:t.map((function(t){var o=t.photo,i=t.layout;return n.jsx(g,{photo:o,layout:i,layoutOptions:r,renderPhoto:e,imageProps:null==u?void 0:u.imageProps},o.key||o.src)}))},"row-"+o)}))})},O=function(n,t,o,r){return function(n,t,o){for(var r=[o],e=o,i=t;i>0;i-=1)e=n[e][i][0],r.push(e);return r.reverse()}(function(n,t,o,r){for(var e,i=[],u={0:(e={},e[o]=null,e)},a=function(o){Object.keys(u[o]).forEach((function(e){var a=+e,s=o>0&&i[a][o]?i[a][o][1]:0;n(a).forEach((function(n){var e=n.neighbor,l=n.weight;i[e]||(i[e]=[]);var c=s+l;(!i[e][o+1]||i[e][o+1][1]>c&&(i[e][o+1][1]/c>1.0001||a<i[e][o+1][0]))&&(i[e][o+1]=[a,c]),o<t-1&&e!==r&&(u[o+1]||(u[o+1]={}),u[o+1][e]=null)}))}))},s=0;s<t;s+=1)a(s);return i}(n,t,o,r),t,r)},P=function(n){for(var t=n.path,o=n.photos,r=n.containerWidth,i=n.columnsGaps,u=n.columnsRatios,a=n.spacing,s=n.padding,l=[],c=u.reduce((function(n,t){return n+t}),0),p=function(n){var p=o.map((function(n,t){return{photo:n,index:t}})).slice(t[n],t[n+1]),d=u.reduce((function(t,o,r){return t+(i[n]-i[r])*o}),0),h=(r-(t.length-2)*a-2*(t.length-1)*s-d)*u[n]/c;l.push(p.map((function(n,t){var o=n.photo,r=n.index;return{photo:o,layout:{width:h,height:h/e(o),index:r,photoIndex:t,photosCount:p.length}}})))},d=0;d<t.length-1;d+=1)p(d);return l},j=function(n){var t=n.photos,o=n.layoutOptions,r=n.targetColumnWidth,i=n.instrumentation,u=o.columns,a=o.spacing,s=o.padding,l=o.containerWidth,c=[],p=[];if(t.length<=u){for(var d=0;d<t.length;d+=1)c[d]=2*s,p[d]=e(t[d]);var h=P({path:Array.from({length:t.length+1}).map((function(n,t){return t})),photos:t,columnsRatios:p,columnsGaps:c,containerWidth:l,spacing:a,padding:s});return{columnsGaps:c,columnsRatios:p,columnsModel:h}}for(var f=(t.reduce((function(n,t){return n+r/e(t)}),0)+a*(t.length-u)+2*s*t.length)/u,m=function(n){var t=n.photos,o=n.spacing,r=n.padding,i=n.targetColumnWidth,u=n.targetColumnHeight,a=n.instrumentation;return function(n){for(var s=[],l=1.5*u,c=i/e(t[n])+2*r,p=n+1;p<t.length+1&&(s.push({neighbor:p,weight:Math.pow(u-c,2)}),!(c>l&&!(null==a?void 0:a.fullGraphSearch)||p===t.length));p+=1)c+=i/e(t[p])+o+2*r;return s}}({photos:t,targetColumnWidth:r,targetColumnHeight:f,spacing:a,padding:s,instrumentation:i}),v=O(m,u,0,t.length).map((function(n){return+n})),g=0;g<v.length-1;g+=1){var y=t.slice(v[g],v[g+1]);c[g]=a*(y.length-1)+2*s*y.length,p[g]=1/y.reduce((function(n,t){return n+1/e(t)}),0)}return{columnsGaps:c,columnsRatios:p,columnsModel:P({path:v,photos:t,columnsRatios:p,columnsGaps:c,containerWidth:l,spacing:a,padding:s})}},R=function n(t){var r=t.photos,e=t.layoutOptions,i=t.instrumentation,u=e.columns,a=e.spacing,s=e.padding,l=e.containerWidth,c=j({photos:r,layoutOptions:e,targetColumnWidth:(l-a*(u-1)-2*s*u)/u,instrumentation:i}),p=c.columnsGaps,d=c.columnsRatios,h=c.columnsModel;return h.findIndex((function(n){return n.findIndex((function(n){var t=n.layout,o=t.width,r=t.height;return o<0||r<0}))>=0}))>=0?u>1?n({photos:r,layoutOptions:o({},e,{columns:u-1}),instrumentation:i}):void 0:{columnsModel:h,columnsGaps:p,columnsRatios:d}},W=function(n){var t,r,e=n.photos,i=n.layoutOptions,u=n.instrumentation;null===(t=null==u?void 0:u.onStartLayoutComputation)||void 0===t||t.call(u);var a=R({photos:e,layoutOptions:o({},i,{columns:Math.min(i.columns,e.length)}),instrumentation:u});return null===(r=null==u?void 0:u.onFinishLayoutComputation)||void 0===r||r.call(u,a),a},b=["style"],z=["layoutOptions","renderColumnContainer","children","columnContainerProps"],M=function(t){var r=t.columnContainerProps,e=t.children;return n.jsx("div",o({},r,{children:e}))},I=function(n){var t=n.layoutOptions,o=n.columnIndex,r=n.columnsCount,e=n.columnsGaps,u=n.columnsRatios,a=t.layout,s=t.spacing,l=t.padding;if("masonry"===a||!e||!u)return"calc((100% - "+s*(r-1)+"px) / "+r+")";var c=u.reduce((function(n,t){return n+t}),0),p=u.reduce((function(n,t,r){return n+(e[o]-e[r])*t}),0);return"calc((100% - "+i((r-1)*s+2*r*l+p,3)+"px) * "+i(u[o]/c,5)+" + "+2*l+"px)"},S=function(n){var t=n.layoutOptions,e=n.renderColumnContainer,i=n.children,u=n.columnContainerProps,a=(u=void 0===u?{}:u).style,s=r(u,b),l=r(n,z),c=o({className:"react-photo-album--column",style:o({display:"flex",flexDirection:"column",flexWrap:"nowrap",alignItems:"flex-start",width:I(n),justifyContent:"columns"===t.layout?"space-between":"flex-start"},a)},s);return(null!=e?e:M)(o({layoutOptions:t,columnContainerProps:c,children:i},l))},k=function(t){var o=t.photos,r=t.layoutOptions,e=t.renderPhoto,i=t.renderColumnContainer,u=t.componentsProps,a=t.instrumentation,s=W({photos:o,layoutOptions:r,instrumentation:a});if(void 0===s)return n.jsx(n.Fragment,{});var l=s.columnsModel,c=s.columnsRatios,p=s.columnsGaps;return n.jsx(n.Fragment,{children:l.map((function(t,o){return n.jsx(S,{layoutOptions:r,columnIndex:o,columnsCount:l.length,columnsGaps:p,columnsRatios:c,renderColumnContainer:i,columnContainerProps:null==u?void 0:u.columnContainerProps,children:t.map((function(t){var o=t.photo,i=t.layout;return n.jsx(g,{photo:o,layout:i,layoutOptions:r,renderPhoto:e,imageProps:null==u?void 0:u.imageProps},o.key||o.src)}))},"column-"+o)}))})},G=function n(t){var r,i,u=t.photos,a=t.layoutOptions,s=t.instrumentation,l=a.spacing,c=a.padding,p=a.containerWidth,d=Math.min(a.columns,u.length);null===(r=null==s?void 0:s.onStartLayoutComputation)||void 0===r||r.call(s);var h=(p-l*(d-1)-2*c*d)/d;if(h<=0)return d>1?n(o({},t,{layoutOptions:o({},a,{columns:d-1})})):void 0;for(var f=[],m=0;m<d;m+=1)f[m]=0;var v=u.reduce((function(n,t,o){var r=f.reduce((function(n,t,o){return t<f[n]-1?o:n}),0);return f[r]=f[r]+h/e(t)+l+2*c,n[r]||(n[r]=[]),n[r].push({photo:t,index:o}),n}),[]),g=v.map((function(n){return n.map((function(t,o){var r=t.photo,i=t.index;return{photo:r,layout:{width:h,height:h/e(r),index:i,photoIndex:o,photosCount:n.length}}}))}));return null===(i=null==s?void 0:s.onFinishLayoutComputation)||void 0===i||i.call(s,g),g},F=function(t){var o=t.photos,r=t.layoutOptions,e=t.renderPhoto,i=t.renderColumnContainer,u=t.componentsProps,a=t.instrumentation,s=G({photos:o,layoutOptions:r,instrumentation:a});return void 0===s?n.jsx(n.Fragment,{}):n.jsx(n.Fragment,{children:s.map((function(t,o){return n.jsx(S,{layoutOptions:r,columnsCount:s.length,columnIndex:o,renderColumnContainer:i,columnContainerProps:null==u?void 0:u.columnContainerProps,children:t.map((function(t){var o=t.photo,i=t.layout;return n.jsx(g,{photo:o,layout:i,layoutOptions:r,renderPhoto:e,imageProps:null==u?void 0:u.imageProps},o.key||o.src)}))},"masonry-column-"+o)}))})},H=["style"],L=function(t){var r=t.containerProps,e=t.children,i=t.containerRef;return n.jsx("div",o({ref:i},r,{children:e}))},N=function(t){var e=t.layoutOptions,i=t.renderContainer,u=t.children,a=t.containerRef,s=t.containerProps,l=(s=void 0===s?{}:s).style,c=r(s,H),p=e.layout,d=o({className:"react-photo-album react-photo-album--"+p,style:o({display:"flex",flexWrap:"nowrap",justifyContent:"space-between",flexDirection:"rows"===p?"column":"row"},l)},c);if(i&&"object"==typeof i){var h=i;return n.jsx(h,{ref:a,layoutOptions:e,containerProps:d,children:u})}return(null!=i?i:L)({containerProps:d,containerRef:a,layoutOptions:e,children:u})},A="undefined"!=typeof document?t.useLayoutEffect:t.useEffect,E=Object.freeze([1200,600,300,0]),D=function(n,t){return"function"==typeof n?n(t):n},_=function(n,t,o){var r=function(n,t){return void 0!==n?D(n,t):void 0}(n,t);return void 0===r?function(n,t){var o=E.findIndex((function(n){return n<=t}));return D(n[o>=0?o:0],t)}(o,t):r},q=function(r){var e=r.photos,i=r.layout,u=r.renderPhoto,a=r.renderContainer,s=r.renderRowContainer,l=r.renderColumnContainer,c=r.defaultContainerWidth,p=r.resizeObserverProvider,d=r.componentsProps,h=r.breakpoints,f=r.instrumentation,m=function(){var n=t.useState(!1),o=n[0],r=n[1];return A((function(){return r(!0),function(){return r(!1)}}),[]),o}(),v=function(n,o){var r=t.useRef(),e=t.useState(),i=e[0],u=e[1],a=t.useCallback((function(t){var e;r.current&&(r.current.disconnect(),r.current=void 0);var i=function(){var n=null==t?void 0:t.clientWidth;if(void 0!==n&&o&&o.length>0){var r=[].concat(o.filter((function(n){return n>0}))).sort((function(n,t){return t-n}));r.push(Math.floor(r[r.length-1]/2)),n=r.find((function(t,o){return t<=n||o===r.length-1}))}u(n)};i(),t&&(r.current="undefined"!=typeof ResizeObserver?new ResizeObserver(i):null==n?void 0:n(i),null===(e=r.current)||void 0===e||e.observe(t))}),[n,o]);return t.useMemo((function(){return{containerRef:a,containerWidth:i}}),[a,i])}(p,h),g=v.containerRef,y=v.containerWidth;if(!i||!["rows","columns","masonry"].includes(i)||!Array.isArray(e))return n.jsx(n.Fragment,{});var w=function(n){var t=n.layout,o=n.onClick,r=n.viewportWidth,e=n.containerWidth,i=n.targetRowHeight,u=n.rowConstraints,a=n.columns,s=n.spacing,l=n.padding,c=n.sizes;return{layout:t,onClick:o,viewportWidth:r,containerWidth:e,columns:_(a,e,[5,4,3,2]),spacing:_(s,e,[20,15,10,5]),padding:_(l,e,[0,0,0,0,0]),targetRowHeight:_(i,e,[function(n){return n/5},function(n){return n/4},function(n){return n/3},function(n){return n/2}]),sizes:c,rowConstraints:u}}(o({containerWidth:m&&y||c||800,viewportWidth:m&&window.innerWidth||void 0},r)),C={photos:e,renderPhoto:u,componentsProps:d,instrumentation:f};return n.jsx(N,{containerRef:g,layoutOptions:w,renderContainer:a,containerProps:null==d?void 0:d.containerProps,children:"rows"===i?n.jsx(x,o({layoutOptions:w,renderRowContainer:s},C)):"columns"===i?n.jsx(k,o({layoutOptions:w,renderColumnContainer:l},C)):n.jsx(F,o({layoutOptions:w,renderColumnContainer:l},C))})};exports.PhotoAlbum=q,exports.default=q;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react/jsx-runtime"),t=require("react");function o(){return o=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(n[r]=o[r])}return n},o.apply(this,arguments)}function r(n,t){if(null==n)return{};var o,r,e={},i=Object.keys(n);for(r=0;r<i.length;r++)o=i[r],t.indexOf(o)>=0||(e[o]=n[o]);return e}var e=function(n){return n.width/n.height},i=function(n,t){void 0===t&&(t=0);var o=Math.pow(10,t);return Math.round((n+Number.EPSILON)*o)/o},u=function(n){var t=[],o=n,r=0,e=function(n,r){return o(t[n],t[r])<0},i=function(n,o){var r=t[n];t[n]=t[o],t[o]=r};return{push:function(n){t[r+=1]=n,function(n){for(var t=n>>1;n>1&&e(t,n);)i(t,n),t=(n=t)>>1}(r)},pop:function(){if(0!==r){i(1,r),r-=1;var n=t.pop();return function(n){for(var t=n<<1;t<=r&&(t<r&&e(t,t+1)&&t++,e(n,t));)i(n,t),t=(n=t)<<1}(1),n}},size:function(){return r}}},a=function(n,t,o){var r=function(n,t,o){var r={},e={},i={};i[t]=0;var a,s,l=u((a=function(n){return n.weight},function(n,t){return a(t)-a(n)}));for(l.push({id:t,weight:0});void 0!==(s=l.pop());){var c=s.id;if(!e[c]){var p=n(c);for(var d in e[c]=1,p){var h=s.weight+p[d];(void 0===i[d]||i[d]>h&&(i[d]/h>1.005||r[d]<c))&&(i[d]=h,l.push({id:d,weight:h}),r[d]=c)}}}if(void 0!==i[o])return r}(n,t,o);return void 0!==r?function(n,t){for(var o=[],r=t;r;)o.push(r),r=n[r];return o.reverse()}(r,o):void 0},s=function(n,t,o,r){return(t-(n.length-1)*o-2*r*n.length)/n.reduce((function(n,t){return n+e(t)}),0)},l=function(n,t,o,r,e,i,u){var a=n.slice(t,o),l=s(a,r,i,u);return l>0?Math.pow(l-e,2)*a.length:void 0},c=function(n){var t,o,r=n.photos,u=n.layoutOptions,c=n.instrumentation,p=u.spacing,d=u.padding,h=u.containerWidth,f=u.targetRowHeight,m=u.rowConstraints;null===(t=null==c?void 0:c.onStartLayoutComputation)||void 0===t||t.call(c);var v=function(n){var t=n.photos,o=n.targetRowHeight,r=n.containerWidth,u=t.reduce((function(n,t){return Math.min(e(t),n)}),Number.MAX_VALUE);return i(r/o/u)+2}({photos:r,containerWidth:h,targetRowHeight:f}),g=function(n){var t=n.photos,o=n.layoutOptions,r=n.targetRowHeight,e=n.limitNodeSearch,i=n.rowConstraints,u=n.instrumentation;return function(n){var a,s,c=o.containerWidth,p=o.spacing,d=o.padding,h={},f=+n;h[+f]=0;for(var m=null!==(a=null==i?void 0:i.minPhotos)&&void 0!==a?a:1,v=Math.min(e,null!==(s=null==i?void 0:i.maxPhotos)&&void 0!==s?s:1/0),g=f+m;g<t.length+1&&(!(g-f>v)||(null==u?void 0:u.fullGraphSearch));g+=1){var y=l(t,f,g,c,r,p,d);if(void 0===y)break;h[g.toString()]=y}return h}}({photos:r,layoutOptions:u,targetRowHeight:f,limitNodeSearch:v,rowConstraints:m,instrumentation:c}),y=a(g,"0",""+r.length);if(void 0!==y){for(var w=[],C=function(n){var t=r.map((function(n,t){return{photo:n,index:t}})).slice(+y[n-1],+y[n]),o=s(t.map((function(n){return n.photo})),h,p,d);w.push(t.map((function(n,r){var i=n.photo,u=n.index;return{photo:i,layout:{height:o,width:o*e(i),index:u,photoIndex:r,photosCount:t.length}}})))},x=1;x<y.length;x+=1)C(x);return null===(o=null==c?void 0:c.onFinishLayoutComputation)||void 0===o||o.call(c,w),w}},p=["src","alt","srcSet","sizes"],d=["style"],h=function(n,t,o){var r=t.width,e=t.photosCount,u=o.spacing,a=o.padding,s=o.containerWidth,l=u*(e-1)+2*a*e;return"calc(("+n+" - "+l+"px) / "+i((s-l)/r,5)+")"},f=function(n,t){return"rows"!==t.layout?"calc(100% - "+2*t.padding+"px)":h("100%",n,t)},m=function(n,t,o){var r,e;return h(null!==(e=null===(r=n.match(/calc\((.*)\)/))||void 0===r?void 0:r[1])&&void 0!==e?e:n,t,o)},v=function(t){var e=t.imageProps,i=e.src,u=e.alt,a=e.srcSet,s=e.sizes,l=r(e,p);return n.jsx("img",o({src:i,alt:u},a?{srcSet:a,sizes:s}:null,l))},g=function(n){var t,e=n.photo,i=n.layout,u=n.layoutOptions,a=n.imageProps,s=(a=void 0===a?{}:a).style,l=r(a,d),c=n.renderPhoto,p=u.onClick,h=o({display:"block",boxSizing:"content-box",width:f(i,u),height:"auto",aspectRatio:e.width+" / "+e.height},u.padding?{padding:u.padding+"px"}:null,("columns"===u.layout||"masonry"===u.layout)&&i.photoIndex<i.photosCount-1?{marginBottom:u.spacing+"px"}:null,p?{cursor:"pointer"}:null,s),g=p?function(n){p(n,e,i.index)}:void 0,y=o({src:e.src,alt:null!==(t=e.alt)&&void 0!==t?t:"",title:e.title,onClick:g,style:h,className:"react-photo-album--photo"},function(n,t,o){var r;return n.images&&n.images.length>0&&(r=n.images.concat([{src:n.src,width:n.width,height:n.height}]).sort((function(n,t){return n.width-t.width})).map((function(n){return n.src+" "+n.width+"w"})).join(", ")),{srcSet:r,sizes:o.sizes?(o.sizes.sizes||[]).map((function(n){var r=n.viewport,e=n.size;return r+" "+m(e,t,o)})).concat(m(o.sizes.size,t,o)).join(", "):Math.ceil(t.width/(o.viewportWidth||o.containerWidth)*100)+"vw"}}(e,i,u),l);return(null!=c?c:v)({photo:e,layout:i,layoutOptions:u,imageProps:y})},y=["style"],w=function(t){var r=t.rowContainerProps,e=t.children;return n.jsx("div",o({},r,{children:e}))},C=function(n){var t=n.layoutOptions,e=n.rowIndex,i=n.rowsCount,u=n.renderRowContainer,a=n.rowContainerProps,s=(a=void 0===a?{}:a).style,l=r(a,y),c=n.children,p=o({className:"react-photo-album--row",style:o({display:"flex",flexDirection:"row",flexWrap:"nowrap",alignItems:"flex-start",justifyContent:"space-between"},e<i-1?{marginBottom:t.spacing+"px"}:null,s)},l);return(null!=u?u:w)({layoutOptions:t,rowIndex:e,rowsCount:i,rowContainerProps:p,children:c})},x=function(t){var o=t.photos,r=t.layoutOptions,e=t.renderPhoto,i=t.renderRowContainer,u=t.componentsProps,a=t.instrumentation,s=c({photos:o,layoutOptions:r,instrumentation:a});return void 0===s?n.jsx(n.Fragment,{}):n.jsx(n.Fragment,{children:s.map((function(t,o){return n.jsx(C,{layoutOptions:r,rowIndex:o,rowsCount:s.length,renderRowContainer:i,rowContainerProps:null==u?void 0:u.rowContainerProps,children:t.map((function(t){var o=t.photo,i=t.layout;return n.jsx(g,{photo:o,layout:i,layoutOptions:r,renderPhoto:e,imageProps:null==u?void 0:u.imageProps},o.key||o.src)}))},"row-"+o)}))})},O=function(n,t,o,r){return function(n,t,o){for(var r=[o],e=o,i=t;i>0;i-=1)e=n[e][i][0],r.push(e);return r.reverse()}(function(n,t,o,r){for(var e,i=[],u={0:(e={},e[o]=null,e)},a=function(o){Object.keys(u[o]).forEach((function(e){var a=+e,s=o>0&&i[a][o]?i[a][o][1]:0;n(a).forEach((function(n){var e=n.neighbor,l=n.weight;i[e]||(i[e]=[]);var c=s+l;(!i[e][o+1]||i[e][o+1][1]>c&&(i[e][o+1][1]/c>1.0001||a<i[e][o+1][0]))&&(i[e][o+1]=[a,c]),o<t-1&&e!==r&&(u[o+1]||(u[o+1]={}),u[o+1][e]=null)}))}))},s=0;s<t;s+=1)a(s);return i}(n,t,o,r),t,r)},P=function(n){for(var t=n.path,o=n.photos,r=n.containerWidth,i=n.columnsGaps,u=n.columnsRatios,a=n.spacing,s=n.padding,l=[],c=u.reduce((function(n,t){return n+t}),0),p=function(n){var p=o.map((function(n,t){return{photo:n,index:t}})).slice(t[n],t[n+1]),d=u.reduce((function(t,o,r){return t+(i[n]-i[r])*o}),0),h=(r-(t.length-2)*a-2*(t.length-1)*s-d)*u[n]/c;l.push(p.map((function(n,t){var o=n.photo,r=n.index;return{photo:o,layout:{width:h,height:h/e(o),index:r,photoIndex:t,photosCount:p.length}}})))},d=0;d<t.length-1;d+=1)p(d);return l},j=function(n){var t=n.photos,o=n.layoutOptions,r=n.targetColumnWidth,i=n.instrumentation,u=o.columns,a=o.spacing,s=o.padding,l=o.containerWidth,c=[],p=[];if(t.length<=u){for(var d=0;d<t.length;d+=1)c[d]=2*s,p[d]=e(t[d]);var h=P({path:Array.from({length:t.length+1}).map((function(n,t){return t})),photos:t,columnsRatios:p,columnsGaps:c,containerWidth:l,spacing:a,padding:s});return{columnsGaps:c,columnsRatios:p,columnsModel:h}}for(var f=(t.reduce((function(n,t){return n+r/e(t)}),0)+a*(t.length-u)+2*s*t.length)/u,m=function(n){var t=n.photos,o=n.spacing,r=n.padding,i=n.targetColumnWidth,u=n.targetColumnHeight,a=n.instrumentation;return function(n){for(var s=[],l=1.5*u,c=i/e(t[n])+2*r,p=n+1;p<t.length+1&&(s.push({neighbor:p,weight:Math.pow(u-c,2)}),!(c>l&&!(null==a?void 0:a.fullGraphSearch)||p===t.length));p+=1)c+=i/e(t[p])+o+2*r;return s}}({photos:t,targetColumnWidth:r,targetColumnHeight:f,spacing:a,padding:s,instrumentation:i}),v=O(m,u,0,t.length).map((function(n){return+n})),g=0;g<v.length-1;g+=1){var y=t.slice(v[g],v[g+1]);c[g]=a*(y.length-1)+2*s*y.length,p[g]=1/y.reduce((function(n,t){return n+1/e(t)}),0)}return{columnsGaps:c,columnsRatios:p,columnsModel:P({path:v,photos:t,columnsRatios:p,columnsGaps:c,containerWidth:l,spacing:a,padding:s})}},R=function n(t){var r=t.photos,e=t.layoutOptions,i=t.instrumentation,u=e.columns,a=e.spacing,s=e.padding,l=e.containerWidth,c=j({photos:r,layoutOptions:e,targetColumnWidth:(l-a*(u-1)-2*s*u)/u,instrumentation:i}),p=c.columnsGaps,d=c.columnsRatios,h=c.columnsModel;return h.findIndex((function(n){return n.findIndex((function(n){var t=n.layout,o=t.width,r=t.height;return o<0||r<0}))>=0}))>=0?u>1?n({photos:r,layoutOptions:o({},e,{columns:u-1}),instrumentation:i}):void 0:{columnsModel:h,columnsGaps:p,columnsRatios:d}},W=function(n){var t,r,e=n.photos,i=n.layoutOptions,u=n.instrumentation;null===(t=null==u?void 0:u.onStartLayoutComputation)||void 0===t||t.call(u);var a=R({photos:e,layoutOptions:o({},i,{columns:Math.min(i.columns,e.length)}),instrumentation:u});return null===(r=null==u?void 0:u.onFinishLayoutComputation)||void 0===r||r.call(u,a),a},b=["style"],z=["layoutOptions","renderColumnContainer","children","columnContainerProps"],M=function(t){var r=t.columnContainerProps,e=t.children;return n.jsx("div",o({},r,{children:e}))},I=function(n){var t=n.layoutOptions,o=n.columnIndex,r=n.columnsCount,e=n.columnsGaps,u=n.columnsRatios,a=t.layout,s=t.spacing,l=t.padding;if("masonry"===a||!e||!u)return"calc((100% - "+s*(r-1)+"px) / "+r+")";var c=u.reduce((function(n,t){return n+t}),0),p=u.reduce((function(n,t,r){return n+(e[o]-e[r])*t}),0);return"calc((100% - "+i((r-1)*s+2*r*l+p,3)+"px) * "+i(u[o]/c,5)+" + "+2*l+"px)"},S=function(n){var t=n.layoutOptions,e=n.renderColumnContainer,i=n.children,u=n.columnContainerProps,a=(u=void 0===u?{}:u).style,s=r(u,b),l=r(n,z),c=o({className:"react-photo-album--column",style:o({display:"flex",flexDirection:"column",flexWrap:"nowrap",alignItems:"flex-start",width:I(n),justifyContent:"columns"===t.layout?"space-between":"flex-start"},a)},s);return(null!=e?e:M)(o({layoutOptions:t,columnContainerProps:c,children:i},l))},k=function(t){var o=t.photos,r=t.layoutOptions,e=t.renderPhoto,i=t.renderColumnContainer,u=t.componentsProps,a=t.instrumentation,s=W({photos:o,layoutOptions:r,instrumentation:a});if(void 0===s)return n.jsx(n.Fragment,{});var l=s.columnsModel,c=s.columnsRatios,p=s.columnsGaps;return n.jsx(n.Fragment,{children:l.map((function(t,o){return n.jsx(S,{layoutOptions:r,columnIndex:o,columnsCount:l.length,columnsGaps:p,columnsRatios:c,renderColumnContainer:i,columnContainerProps:null==u?void 0:u.columnContainerProps,children:t.map((function(t){var o=t.photo,i=t.layout;return n.jsx(g,{photo:o,layout:i,layoutOptions:r,renderPhoto:e,imageProps:null==u?void 0:u.imageProps},o.key||o.src)}))},"column-"+o)}))})},G=function n(t){var r,i,u=t.photos,a=t.layoutOptions,s=t.instrumentation,l=a.spacing,c=a.padding,p=a.containerWidth,d=Math.min(a.columns,u.length);null===(r=null==s?void 0:s.onStartLayoutComputation)||void 0===r||r.call(s);var h=(p-l*(d-1)-2*c*d)/d;if(h<=0)return d>1?n(o({},t,{layoutOptions:o({},a,{columns:d-1})})):void 0;for(var f=[],m=0;m<d;m+=1)f[m]=0;var v=u.reduce((function(n,t,o){var r=f.reduce((function(n,t,o){return t<f[n]-1?o:n}),0);return f[r]=f[r]+h/e(t)+l+2*c,n[r]||(n[r]=[]),n[r].push({photo:t,index:o}),n}),[]),g=v.map((function(n){return n.map((function(t,o){var r=t.photo,i=t.index;return{photo:r,layout:{width:h,height:h/e(r),index:i,photoIndex:o,photosCount:n.length}}}))}));return null===(i=null==s?void 0:s.onFinishLayoutComputation)||void 0===i||i.call(s,g),g},F=function(t){var o=t.photos,r=t.layoutOptions,e=t.renderPhoto,i=t.renderColumnContainer,u=t.componentsProps,a=t.instrumentation,s=G({photos:o,layoutOptions:r,instrumentation:a});return void 0===s?n.jsx(n.Fragment,{}):n.jsx(n.Fragment,{children:s.map((function(t,o){return n.jsx(S,{layoutOptions:r,columnsCount:s.length,columnIndex:o,renderColumnContainer:i,columnContainerProps:null==u?void 0:u.columnContainerProps,children:t.map((function(t){var o=t.photo,i=t.layout;return n.jsx(g,{photo:o,layout:i,layoutOptions:r,renderPhoto:e,imageProps:null==u?void 0:u.imageProps},o.key||o.src)}))},"masonry-column-"+o)}))})},H=["style"],L=function(t){var r=t.containerProps,e=t.children,i=t.containerRef;return n.jsx("div",o({ref:i},r,{children:e}))},N=function(t){var e=t.layoutOptions,i=t.renderContainer,u=t.children,a=t.containerRef,s=t.containerProps,l=(s=void 0===s?{}:s).style,c=r(s,H),p=e.layout,d=o({className:"react-photo-album react-photo-album--"+p,style:o({display:"flex",flexWrap:"nowrap",justifyContent:"space-between",flexDirection:"rows"===p?"column":"row"},l)},c);if(i&&"object"==typeof i){var h=i;return n.jsx(h,{ref:a,layoutOptions:e,containerProps:d,children:u})}return(null!=i?i:L)({containerProps:d,containerRef:a,layoutOptions:e,children:u})},A="undefined"!=typeof document?t.useLayoutEffect:t.useEffect,E=Object.freeze([1200,600,300,0]),D=function(n,t){return"function"==typeof n?n(t):n},_=function(n,t,o){var r=function(n,t){return void 0!==n?D(n,t):void 0}(n,t);return void 0===r?function(n,t){var o=E.findIndex((function(n){return n<=t}));return D(n[o>=0?o:0],t)}(o,t):r},q=function(r){var e=r.photos,i=r.layout,u=r.renderPhoto,a=r.renderContainer,s=r.renderRowContainer,l=r.renderColumnContainer,c=r.defaultContainerWidth,p=r.resizeObserverProvider,d=r.breakpoints,h=r.instrumentation,f=function(){var n=t.useState(!1),o=n[0],r=n[1];return A((function(){return r(!0),function(){return r(!1)}}),[]),o}(),m=function(n,o){var r=t.useRef(),e=t.useState(),i=e[0],u=e[1],a=t.useCallback((function(t){var e;r.current&&(r.current.disconnect(),r.current=void 0);var i=function(){var n=null==t?void 0:t.clientWidth;if(void 0!==n&&o&&o.length>0){var r=[].concat(o.filter((function(n){return n>0}))).sort((function(n,t){return t-n}));r.push(Math.floor(r[r.length-1]/2)),n=r.find((function(t,o){return t<=n||o===r.length-1}))}u(n)};i(),t&&(r.current="undefined"!=typeof ResizeObserver?new ResizeObserver(i):null==n?void 0:n(i),null===(e=r.current)||void 0===e||e.observe(t))}),[n,o]);return t.useMemo((function(){return{containerRef:a,containerWidth:i}}),[a,i])}(p,d),v=m.containerRef,g=m.containerWidth;if(!i||!["rows","columns","masonry"].includes(i)||!Array.isArray(e))return n.jsx(n.Fragment,{});var y=function(n){var t=n.layout,o=n.onClick,r=n.viewportWidth,e=n.containerWidth,i=n.targetRowHeight,u=n.rowConstraints,a=n.columns,s=n.spacing,l=n.padding,c=n.sizes;return{layout:t,onClick:o,viewportWidth:r,containerWidth:e,columns:_(a,e,[5,4,3,2]),spacing:_(s,e,[20,15,10,5]),padding:_(l,e,[0,0,0,0,0]),targetRowHeight:_(i,e,[function(n){return n/5},function(n){return n/4},function(n){return n/3},function(n){return n/2}]),sizes:c,rowConstraints:u}}(o({containerWidth:f&&g||c||800,viewportWidth:f&&window.innerWidth||void 0},r)),w=function(n,t){return"function"==typeof n?n(t):n}(r.componentsProps,y.containerWidth),C={photos:e,renderPhoto:u,componentsProps:w,instrumentation:h};return n.jsx(N,{containerRef:v,layoutOptions:y,renderContainer:a,containerProps:null==w?void 0:w.containerProps,children:"rows"===i?n.jsx(x,o({layoutOptions:y,renderRowContainer:s},C)):"columns"===i?n.jsx(k,o({layoutOptions:y,renderColumnContainer:l},C)):n.jsx(F,o({layoutOptions:y,renderColumnContainer:l},C))})};exports.PhotoAlbum=q,exports.default=q;
 //# sourceMappingURL=index.cjs.js.map

dist/index.d.ts

@@ -82,3 +82,3 @@ import { MouseEvent, ImgHTMLAttributes, ReactElement, HTMLAttributes, PropsWithChildren, RefCallback, ForwardRefExoticComponent, RefAttributes } from 'react';
     /** Additional HTML attributes to be passed to the rendered elements */
-    componentsProps?: ComponentsProps;
+    componentsProps?: ComponentsPropsParameter;
     /** Custom photo rendering function. */
@@ -137,2 +137,3 @@ renderPhoto?: RenderPhoto<T>;
 };
+declare type ComponentsPropsParameter = ComponentsProps | ((containerWidth: number) => ComponentsProps);
 declare type ContainerProps = {
@@ -190,2 +191,2 @@ /** layout options */
 
-export { ClickHandler, ColumnContainerProps, ColumnsLayoutOptions, ComponentsProps, ContainerProps, GenericLayoutOptions, Image, Instrumentation, LayoutOptions, LayoutType, Photo, PhotoAlbum, PhotoAlbumProps, PhotoLayout, PhotoProps, RenderColumnContainer, RenderContainer, RenderContainerProps, RenderPhoto, RenderRowContainer, ResizeObserverProvider, ResponsiveParameter, ResponsiveParameterProvider, ResponsiveSizes, RowConstraints, RowContainerProps, RowsLayoutOptions, PhotoAlbum as default };
+export { ClickHandler, ColumnContainerProps, ColumnsLayoutOptions, ComponentsProps, ComponentsPropsParameter, ContainerProps, GenericLayoutOptions, Image, Instrumentation, LayoutOptions, LayoutType, Photo, PhotoAlbum, PhotoAlbumProps, PhotoLayout, PhotoProps, RenderColumnContainer, RenderContainer, RenderContainerProps, RenderPhoto, RenderRowContainer, ResizeObserverProvider, ResponsiveParameter, ResponsiveParameterProvider, ResponsiveSizes, RowConstraints, RowContainerProps, RowsLayoutOptions, PhotoAlbum as default };

dist/index.esm.js

@@ -1228,2 +1228,6 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 
+var resolveComponentsProps = function resolveComponentsProps(componentsProps, containerWidth) {
+  return typeof componentsProps === "function" ? componentsProps(containerWidth) : componentsProps;
+};
+
 var PhotoAlbum = function PhotoAlbum(props) {
@@ -1238,3 +1242,2 @@ var photos = props.photos,
       resizeObserverProvider = props.resizeObserverProvider,
-      componentsProps = props.componentsProps,
       breakpoints = props.breakpoints,
@@ -1254,2 +1257,3 @@ instrumentation = props.instrumentation;
   }, props));
+  var componentsProps = resolveComponentsProps(props.componentsProps, layoutOptions.containerWidth);
   var commonLayoutProps = {
@@ -1256,0 +1260,0 @@ photos: photos,

dist/index.umd.js

@@ -1,2 +0,2 @@
-!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((n="undefined"!=typeof globalThis?globalThis:n||self).ReactPhotoAlbum={},n.React)}(this,(function(n,t){"use strict";function o(n){if(n&&n.__esModule)return n;var t=Object.create(null);return n&&Object.keys(n).forEach((function(o){if("default"!==o){var e=Object.getOwnPropertyDescriptor(n,o);Object.defineProperty(t,o,e.get?e:{enumerable:!0,get:function(){return n[o]}})}})),t.default=n,Object.freeze(t)}var e=o(t);function r(){return r=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var e in o)Object.prototype.hasOwnProperty.call(o,e)&&(n[e]=o[e])}return n},r.apply(this,arguments)}function i(n,t){if(null==n)return{};var o,e,r={},i=Object.keys(n);for(e=0;e<i.length;e++)o=i[e],t.indexOf(o)>=0||(r[o]=n[o]);return r}var u=function(n){return n.width/n.height},a=function(n,t){void 0===t&&(t=0);var o=Math.pow(10,t);return Math.round((n+Number.EPSILON)*o)/o},l=function(n){var t=[],o=n,e=0,r=function(n,e){return o(t[n],t[e])<0},i=function(n,o){var e=t[n];t[n]=t[o],t[o]=e};return{push:function(n){t[e+=1]=n,function(n){for(var t=n>>1;n>1&&r(t,n);)i(t,n),t=(n=t)>>1}(e)},pop:function(){if(0!==e){i(1,e),e-=1;var n=t.pop();return function(n){for(var t=n<<1;t<=e&&(t<e&&r(t,t+1)&&t++,r(n,t));)i(n,t),t=(n=t)<<1}(1),n}},size:function(){return e}}},c=function(n,t,o){var e=function(n,t,o){var e={},r={},i={};i[t]=0;var u,a,c=l((u=function(n){return n.weight},function(n,t){return u(t)-u(n)}));for(c.push({id:t,weight:0});void 0!==(a=c.pop());){var s=a.id;if(!r[s]){var p=n(s);for(var d in r[s]=1,p){var h=a.weight+p[d];(void 0===i[d]||i[d]>h&&(i[d]/h>1.005||e[d]<s))&&(i[d]=h,c.push({id:d,weight:h}),e[d]=s)}}}if(void 0!==i[o])return e}(n,t,o);return void 0!==e?function(n,t){for(var o=[],e=t;e;)o.push(e),e=n[e];return o.reverse()}(e,o):void 0},s=function(n,t,o,e){return(t-(n.length-1)*o-2*e*n.length)/n.reduce((function(n,t){return n+u(t)}),0)},p=function(n,t,o,e,r,i,u){var a=n.slice(t,o),l=s(a,e,i,u);return l>0?Math.pow(l-r,2)*a.length:void 0},d=function(n){var t,o,e=n.photos,r=n.layoutOptions,i=n.instrumentation,l=r.spacing,d=r.padding,h=r.containerWidth,f=r.targetRowHeight,m=r.rowConstraints;null===(t=null==i?void 0:i.onStartLayoutComputation)||void 0===t||t.call(i);var v=function(n){var t=n.photos,o=n.targetRowHeight,e=n.containerWidth,r=t.reduce((function(n,t){return Math.min(u(t),n)}),Number.MAX_VALUE);return a(e/o/r)+2}({photos:e,containerWidth:h,targetRowHeight:f}),g=function(n){var t=n.photos,o=n.layoutOptions,e=n.targetRowHeight,r=n.limitNodeSearch,i=n.rowConstraints,u=n.instrumentation;return function(n){var a,l,c=o.containerWidth,s=o.spacing,d=o.padding,h={},f=+n;h[+f]=0;for(var m=null!==(a=null==i?void 0:i.minPhotos)&&void 0!==a?a:1,v=Math.min(r,null!==(l=null==i?void 0:i.maxPhotos)&&void 0!==l?l:1/0),g=f+m;g<t.length+1&&(!(g-f>v)||(null==u?void 0:u.fullGraphSearch));g+=1){var y=p(t,f,g,c,e,s,d);if(void 0===y)break;h[g.toString()]=y}return h}}({photos:e,layoutOptions:r,targetRowHeight:f,limitNodeSearch:v,rowConstraints:m,instrumentation:i}),y=c(g,"0",""+e.length);if(void 0!==y){for(var w=[],C=function(n){var t=e.map((function(n,t){return{photo:n,index:t}})).slice(+y[n-1],+y[n]),o=s(t.map((function(n){return n.photo})),h,l,d);w.push(t.map((function(n,e){var r=n.photo,i=n.index;return{photo:r,layout:{height:o,width:o*u(r),index:i,photoIndex:e,photosCount:t.length}}})))},O=1;O<y.length;O+=1)C(O);return null===(o=null==i?void 0:i.onFinishLayoutComputation)||void 0===o||o.call(i,w),w}},h=["src","alt","srcSet","sizes"],f=["style"],m=function(n,t,o){var e=t.width,r=t.photosCount,i=o.spacing,u=o.padding,l=o.containerWidth,c=i*(r-1)+2*u*r;return"calc(("+n+" - "+c+"px) / "+a((l-c)/e,5)+")"},v=function(n,t){return"rows"!==t.layout?"calc(100% - "+2*t.padding+"px)":m("100%",n,t)},g=function(n,t,o){var e,r;return m(null!==(r=null===(e=n.match(/calc\((.*)\)/))||void 0===e?void 0:e[1])&&void 0!==r?r:n,t,o)},y=function(n){var t=n.imageProps,o=t.src,u=t.alt,a=t.srcSet,l=t.sizes,c=i(t,h);return e.createElement("img",r({src:o,alt:u},a?{srcSet:a,sizes:l}:null,c))},w=function(n){var t,o=n.photo,e=n.layout,u=n.layoutOptions,a=n.imageProps,l=(a=void 0===a?{}:a).style,c=i(a,f),s=n.renderPhoto,p=u.onClick,d=r({display:"block",boxSizing:"content-box",width:v(e,u),height:"auto",aspectRatio:o.width+" / "+o.height},u.padding?{padding:u.padding+"px"}:null,("columns"===u.layout||"masonry"===u.layout)&&e.photoIndex<e.photosCount-1?{marginBottom:u.spacing+"px"}:null,p?{cursor:"pointer"}:null,l),h=p?function(n){p(n,o,e.index)}:void 0,m=r({src:o.src,alt:null!==(t=o.alt)&&void 0!==t?t:"",title:o.title,onClick:h,style:d,className:"react-photo-album--photo"},function(n,t,o){var e;return n.images&&n.images.length>0&&(e=n.images.concat([{src:n.src,width:n.width,height:n.height}]).sort((function(n,t){return n.width-t.width})).map((function(n){return n.src+" "+n.width+"w"})).join(", ")),{srcSet:e,sizes:o.sizes?(o.sizes.sizes||[]).map((function(n){var e=n.viewport,r=n.size;return e+" "+g(r,t,o)})).concat(g(o.sizes.size,t,o)).join(", "):Math.ceil(t.width/(o.viewportWidth||o.containerWidth)*100)+"vw"}}(o,e,u),c);return(null!=s?s:y)({photo:o,layout:e,layoutOptions:u,imageProps:m})},C=["style"],O=function(n){var t=n.rowContainerProps,o=n.children;return e.createElement("div",r({},t),o)},P=function(n){var t=n.layoutOptions,o=n.rowIndex,e=n.rowsCount,u=n.renderRowContainer,a=n.rowContainerProps,l=(a=void 0===a?{}:a).style,c=i(a,C),s=n.children,p=r({className:"react-photo-album--row",style:r({display:"flex",flexDirection:"row",flexWrap:"nowrap",alignItems:"flex-start",justifyContent:"space-between"},o<e-1?{marginBottom:t.spacing+"px"}:null,l)},c);return(null!=u?u:O)({layoutOptions:t,rowIndex:o,rowsCount:e,rowContainerProps:p,children:s})},x=function(n){var t=n.photos,o=n.layoutOptions,r=n.renderPhoto,i=n.renderRowContainer,u=n.componentsProps,a=n.instrumentation,l=d({photos:t,layoutOptions:o,instrumentation:a});return void 0===l?e.createElement(e.Fragment,null):e.createElement(e.Fragment,null,l.map((function(n,t){return e.createElement(P,{key:"row-"+t,layoutOptions:o,rowIndex:t,rowsCount:l.length,renderRowContainer:i,rowContainerProps:null==u?void 0:u.rowContainerProps},n.map((function(n){var t=n.photo,i=n.layout;return e.createElement(w,{key:t.key||t.src,photo:t,layout:i,layoutOptions:o,renderPhoto:r,imageProps:null==u?void 0:u.imageProps})})))})))},b=function(n,t,o,e){return function(n,t,o){for(var e=[o],r=o,i=t;i>0;i-=1)r=n[r][i][0],e.push(r);return e.reverse()}(function(n,t,o,e){for(var r,i=[],u={0:(r={},r[o]=null,r)},a=function(o){Object.keys(u[o]).forEach((function(r){var a=+r,l=o>0&&i[a][o]?i[a][o][1]:0;n(a).forEach((function(n){var r=n.neighbor,c=n.weight;i[r]||(i[r]=[]);var s=l+c;(!i[r][o+1]||i[r][o+1][1]>s&&(i[r][o+1][1]/s>1.0001||a<i[r][o+1][0]))&&(i[r][o+1]=[a,s]),o<t-1&&r!==e&&(u[o+1]||(u[o+1]={}),u[o+1][r]=null)}))}))},l=0;l<t;l+=1)a(l);return i}(n,t,o,e),t,e)},R=function(n){for(var t=n.path,o=n.photos,e=n.containerWidth,r=n.columnsGaps,i=n.columnsRatios,a=n.spacing,l=n.padding,c=[],s=i.reduce((function(n,t){return n+t}),0),p=function(n){var p=o.map((function(n,t){return{photo:n,index:t}})).slice(t[n],t[n+1]),d=i.reduce((function(t,o,e){return t+(r[n]-r[e])*o}),0),h=(e-(t.length-2)*a-2*(t.length-1)*l-d)*i[n]/s;c.push(p.map((function(n,t){var o=n.photo,e=n.index;return{photo:o,layout:{width:h,height:h/u(o),index:e,photoIndex:t,photosCount:p.length}}})))},d=0;d<t.length-1;d+=1)p(d);return c},W=function(n){var t=n.photos,o=n.layoutOptions,e=n.targetColumnWidth,r=n.instrumentation,i=o.columns,a=o.spacing,l=o.padding,c=o.containerWidth,s=[],p=[];if(t.length<=i){for(var d=0;d<t.length;d+=1)s[d]=2*l,p[d]=u(t[d]);var h=R({path:Array.from({length:t.length+1}).map((function(n,t){return t})),photos:t,columnsRatios:p,columnsGaps:s,containerWidth:c,spacing:a,padding:l});return{columnsGaps:s,columnsRatios:p,columnsModel:h}}for(var f=(t.reduce((function(n,t){return n+e/u(t)}),0)+a*(t.length-i)+2*l*t.length)/i,m=function(n){var t=n.photos,o=n.spacing,e=n.padding,r=n.targetColumnWidth,i=n.targetColumnHeight,a=n.instrumentation;return function(n){for(var l=[],c=1.5*i,s=r/u(t[n])+2*e,p=n+1;p<t.length+1&&(l.push({neighbor:p,weight:Math.pow(i-s,2)}),!(s>c&&!(null==a?void 0:a.fullGraphSearch)||p===t.length));p+=1)s+=r/u(t[p])+o+2*e;return l}}({photos:t,targetColumnWidth:e,targetColumnHeight:f,spacing:a,padding:l,instrumentation:r}),v=b(m,i,0,t.length).map((function(n){return+n})),g=0;g<v.length-1;g+=1){var y=t.slice(v[g],v[g+1]);s[g]=a*(y.length-1)+2*l*y.length,p[g]=1/y.reduce((function(n,t){return n+1/u(t)}),0)}return{columnsGaps:s,columnsRatios:p,columnsModel:R({path:v,photos:t,columnsRatios:p,columnsGaps:s,containerWidth:c,spacing:a,padding:l})}},E=function n(t){var o=t.photos,e=t.layoutOptions,i=t.instrumentation,u=e.columns,a=e.spacing,l=e.padding,c=e.containerWidth,s=W({photos:o,layoutOptions:e,targetColumnWidth:(c-a*(u-1)-2*l*u)/u,instrumentation:i}),p=s.columnsGaps,d=s.columnsRatios,h=s.columnsModel;return h.findIndex((function(n){return n.findIndex((function(n){var t=n.layout,o=t.width,e=t.height;return o<0||e<0}))>=0}))>=0?u>1?n({photos:o,layoutOptions:r({},e,{columns:u-1}),instrumentation:i}):void 0:{columnsModel:h,columnsGaps:p,columnsRatios:d}},k=function(n){var t,o,e=n.photos,i=n.layoutOptions,u=n.instrumentation;null===(t=null==u?void 0:u.onStartLayoutComputation)||void 0===t||t.call(u);var a=E({photos:e,layoutOptions:r({},i,{columns:Math.min(i.columns,e.length)}),instrumentation:u});return null===(o=null==u?void 0:u.onFinishLayoutComputation)||void 0===o||o.call(u,a),a},z=["style"],M=["layoutOptions","renderColumnContainer","children","columnContainerProps"],j=function(n){var t=n.columnContainerProps,o=n.children;return e.createElement("div",r({},t),o)},I=function(n){var t=n.layoutOptions,o=n.columnIndex,e=n.columnsCount,r=n.columnsGaps,i=n.columnsRatios,u=t.layout,l=t.spacing,c=t.padding;if("masonry"===u||!r||!i)return"calc((100% - "+l*(e-1)+"px) / "+e+")";var s=i.reduce((function(n,t){return n+t}),0),p=i.reduce((function(n,t,e){return n+(r[o]-r[e])*t}),0);return"calc((100% - "+a((e-1)*l+2*e*c+p,3)+"px) * "+a(i[o]/s,5)+" + "+2*c+"px)"},S=function(n){var t=n.layoutOptions,o=n.renderColumnContainer,e=n.children,u=n.columnContainerProps,a=(u=void 0===u?{}:u).style,l=i(u,z),c=i(n,M),s=r({className:"react-photo-album--column",style:r({display:"flex",flexDirection:"column",flexWrap:"nowrap",alignItems:"flex-start",width:I(n),justifyContent:"columns"===t.layout?"space-between":"flex-start"},a)},l);return(null!=o?o:j)(r({layoutOptions:t,columnContainerProps:s,children:e},c))},G=function(n){var t=n.photos,o=n.layoutOptions,r=n.renderPhoto,i=n.renderColumnContainer,u=n.componentsProps,a=n.instrumentation,l=k({photos:t,layoutOptions:o,instrumentation:a});if(void 0===l)return e.createElement(e.Fragment,null);var c=l.columnsModel,s=l.columnsRatios,p=l.columnsGaps;return e.createElement(e.Fragment,null,c.map((function(n,t){return e.createElement(S,{key:"column-"+t,layoutOptions:o,columnIndex:t,columnsCount:c.length,columnsGaps:p,columnsRatios:s,renderColumnContainer:i,columnContainerProps:null==u?void 0:u.columnContainerProps},n.map((function(n){var t=n.photo,i=n.layout;return e.createElement(w,{key:t.key||t.src,photo:t,layout:i,layoutOptions:o,renderPhoto:r,imageProps:null==u?void 0:u.imageProps})})))})))},F=function n(t){var o,e,i=t.photos,a=t.layoutOptions,l=t.instrumentation,c=a.spacing,s=a.padding,p=a.containerWidth,d=Math.min(a.columns,i.length);null===(o=null==l?void 0:l.onStartLayoutComputation)||void 0===o||o.call(l);var h=(p-c*(d-1)-2*s*d)/d;if(h<=0)return d>1?n(r({},t,{layoutOptions:r({},a,{columns:d-1})})):void 0;for(var f=[],m=0;m<d;m+=1)f[m]=0;var v=i.reduce((function(n,t,o){var e=f.reduce((function(n,t,o){return t<f[n]-1?o:n}),0);return f[e]=f[e]+h/u(t)+c+2*s,n[e]||(n[e]=[]),n[e].push({photo:t,index:o}),n}),[]),g=v.map((function(n){return n.map((function(t,o){var e=t.photo,r=t.index;return{photo:e,layout:{width:h,height:h/u(e),index:r,photoIndex:o,photosCount:n.length}}}))}));return null===(e=null==l?void 0:l.onFinishLayoutComputation)||void 0===e||e.call(l,g),g},H=function(n){var t=n.photos,o=n.layoutOptions,r=n.renderPhoto,i=n.renderColumnContainer,u=n.componentsProps,a=n.instrumentation,l=F({photos:t,layoutOptions:o,instrumentation:a});return void 0===l?e.createElement(e.Fragment,null):e.createElement(e.Fragment,null,l.map((function(n,t){return e.createElement(S,{key:"masonry-column-"+t,layoutOptions:o,columnsCount:l.length,columnIndex:t,renderColumnContainer:i,columnContainerProps:null==u?void 0:u.columnContainerProps},n.map((function(n){var t=n.photo,i=n.layout;return e.createElement(w,{key:t.key||t.src,photo:t,layout:i,layoutOptions:o,renderPhoto:r,imageProps:null==u?void 0:u.imageProps})})))})))},L=["style"],N=function(n){var t=n.containerProps,o=n.children,i=n.containerRef;return e.createElement("div",r({ref:i},t),o)},A=function(n){var t=n.layoutOptions,o=n.renderContainer,u=n.children,a=n.containerRef,l=n.containerProps,c=(l=void 0===l?{}:l).style,s=i(l,L),p=t.layout,d=r({className:"react-photo-album react-photo-album--"+p,style:r({display:"flex",flexWrap:"nowrap",justifyContent:"space-between",flexDirection:"rows"===p?"column":"row"},c)},s);if(o&&"object"==typeof o){var h=o;return e.createElement(h,{ref:a,layoutOptions:t,containerProps:d},u)}return(null!=o?o:N)({containerProps:d,containerRef:a,layoutOptions:t,children:u})},_="undefined"!=typeof document?t.useLayoutEffect:t.useEffect,D=Object.freeze([1200,600,300,0]),B=function(n,t){return"function"==typeof n?n(t):n},T=function(n,t,o){var e=function(n,t){return void 0!==n?B(n,t):void 0}(n,t);return void 0===e?function(n,t){var o=D.findIndex((function(n){return n<=t}));return B(n[o>=0?o:0],t)}(o,t):e},q=function(n){var o=n.photos,i=n.layout,u=n.renderPhoto,a=n.renderContainer,l=n.renderRowContainer,c=n.renderColumnContainer,s=n.defaultContainerWidth,p=n.resizeObserverProvider,d=n.componentsProps,h=n.breakpoints,f=n.instrumentation,m=function(){var n=t.useState(!1),o=n[0],e=n[1];return _((function(){return e(!0),function(){return e(!1)}}),[]),o}(),v=function(n,o){var e=t.useRef(),r=t.useState(),i=r[0],u=r[1],a=t.useCallback((function(t){var r;e.current&&(e.current.disconnect(),e.current=void 0);var i=function(){var n=null==t?void 0:t.clientWidth;if(void 0!==n&&o&&o.length>0){var e=[].concat(o.filter((function(n){return n>0}))).sort((function(n,t){return t-n}));e.push(Math.floor(e[e.length-1]/2)),n=e.find((function(t,o){return t<=n||o===e.length-1}))}u(n)};i(),t&&(e.current="undefined"!=typeof ResizeObserver?new ResizeObserver(i):null==n?void 0:n(i),null===(r=e.current)||void 0===r||r.observe(t))}),[n,o]);return t.useMemo((function(){return{containerRef:a,containerWidth:i}}),[a,i])}(p,h),g=v.containerRef,y=v.containerWidth;if(!i||!["rows","columns","masonry"].includes(i)||!Array.isArray(o))return e.createElement(e.Fragment,null);var w=function(n){var t=n.layout,o=n.onClick,e=n.viewportWidth,r=n.containerWidth,i=n.targetRowHeight,u=n.rowConstraints,a=n.columns,l=n.spacing,c=n.padding,s=n.sizes;return{layout:t,onClick:o,viewportWidth:e,containerWidth:r,columns:T(a,r,[5,4,3,2]),spacing:T(l,r,[20,15,10,5]),padding:T(c,r,[0,0,0,0,0]),targetRowHeight:T(i,r,[function(n){return n/5},function(n){return n/4},function(n){return n/3},function(n){return n/2}]),sizes:s,rowConstraints:u}}(r({containerWidth:m&&y||s||800,viewportWidth:m&&window.innerWidth||void 0},n)),C={photos:o,renderPhoto:u,componentsProps:d,instrumentation:f};return e.createElement(A,{containerRef:g,layoutOptions:w,renderContainer:a,containerProps:null==d?void 0:d.containerProps},"rows"===i?e.createElement(x,r({layoutOptions:w,renderRowContainer:l},C)):"columns"===i?e.createElement(G,r({layoutOptions:w,renderColumnContainer:c},C)):e.createElement(H,r({layoutOptions:w,renderColumnContainer:c},C)))};n.PhotoAlbum=q,n.default=q,Object.defineProperty(n,"__esModule",{value:!0})}));
+!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((n="undefined"!=typeof globalThis?globalThis:n||self).ReactPhotoAlbum={},n.React)}(this,(function(n,t){"use strict";function o(n){if(n&&n.__esModule)return n;var t=Object.create(null);return n&&Object.keys(n).forEach((function(o){if("default"!==o){var e=Object.getOwnPropertyDescriptor(n,o);Object.defineProperty(t,o,e.get?e:{enumerable:!0,get:function(){return n[o]}})}})),t.default=n,Object.freeze(t)}var e=o(t);function r(){return r=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var e in o)Object.prototype.hasOwnProperty.call(o,e)&&(n[e]=o[e])}return n},r.apply(this,arguments)}function i(n,t){if(null==n)return{};var o,e,r={},i=Object.keys(n);for(e=0;e<i.length;e++)o=i[e],t.indexOf(o)>=0||(r[o]=n[o]);return r}var u=function(n){return n.width/n.height},a=function(n,t){void 0===t&&(t=0);var o=Math.pow(10,t);return Math.round((n+Number.EPSILON)*o)/o},l=function(n){var t=[],o=n,e=0,r=function(n,e){return o(t[n],t[e])<0},i=function(n,o){var e=t[n];t[n]=t[o],t[o]=e};return{push:function(n){t[e+=1]=n,function(n){for(var t=n>>1;n>1&&r(t,n);)i(t,n),t=(n=t)>>1}(e)},pop:function(){if(0!==e){i(1,e),e-=1;var n=t.pop();return function(n){for(var t=n<<1;t<=e&&(t<e&&r(t,t+1)&&t++,r(n,t));)i(n,t),t=(n=t)<<1}(1),n}},size:function(){return e}}},c=function(n,t,o){var e=function(n,t,o){var e={},r={},i={};i[t]=0;var u,a,c=l((u=function(n){return n.weight},function(n,t){return u(t)-u(n)}));for(c.push({id:t,weight:0});void 0!==(a=c.pop());){var s=a.id;if(!r[s]){var p=n(s);for(var d in r[s]=1,p){var h=a.weight+p[d];(void 0===i[d]||i[d]>h&&(i[d]/h>1.005||e[d]<s))&&(i[d]=h,c.push({id:d,weight:h}),e[d]=s)}}}if(void 0!==i[o])return e}(n,t,o);return void 0!==e?function(n,t){for(var o=[],e=t;e;)o.push(e),e=n[e];return o.reverse()}(e,o):void 0},s=function(n,t,o,e){return(t-(n.length-1)*o-2*e*n.length)/n.reduce((function(n,t){return n+u(t)}),0)},p=function(n,t,o,e,r,i,u){var a=n.slice(t,o),l=s(a,e,i,u);return l>0?Math.pow(l-r,2)*a.length:void 0},d=function(n){var t,o,e=n.photos,r=n.layoutOptions,i=n.instrumentation,l=r.spacing,d=r.padding,h=r.containerWidth,f=r.targetRowHeight,m=r.rowConstraints;null===(t=null==i?void 0:i.onStartLayoutComputation)||void 0===t||t.call(i);var v=function(n){var t=n.photos,o=n.targetRowHeight,e=n.containerWidth,r=t.reduce((function(n,t){return Math.min(u(t),n)}),Number.MAX_VALUE);return a(e/o/r)+2}({photos:e,containerWidth:h,targetRowHeight:f}),g=function(n){var t=n.photos,o=n.layoutOptions,e=n.targetRowHeight,r=n.limitNodeSearch,i=n.rowConstraints,u=n.instrumentation;return function(n){var a,l,c=o.containerWidth,s=o.spacing,d=o.padding,h={},f=+n;h[+f]=0;for(var m=null!==(a=null==i?void 0:i.minPhotos)&&void 0!==a?a:1,v=Math.min(r,null!==(l=null==i?void 0:i.maxPhotos)&&void 0!==l?l:1/0),g=f+m;g<t.length+1&&(!(g-f>v)||(null==u?void 0:u.fullGraphSearch));g+=1){var y=p(t,f,g,c,e,s,d);if(void 0===y)break;h[g.toString()]=y}return h}}({photos:e,layoutOptions:r,targetRowHeight:f,limitNodeSearch:v,rowConstraints:m,instrumentation:i}),y=c(g,"0",""+e.length);if(void 0!==y){for(var w=[],C=function(n){var t=e.map((function(n,t){return{photo:n,index:t}})).slice(+y[n-1],+y[n]),o=s(t.map((function(n){return n.photo})),h,l,d);w.push(t.map((function(n,e){var r=n.photo,i=n.index;return{photo:r,layout:{height:o,width:o*u(r),index:i,photoIndex:e,photosCount:t.length}}})))},O=1;O<y.length;O+=1)C(O);return null===(o=null==i?void 0:i.onFinishLayoutComputation)||void 0===o||o.call(i,w),w}},h=["src","alt","srcSet","sizes"],f=["style"],m=function(n,t,o){var e=t.width,r=t.photosCount,i=o.spacing,u=o.padding,l=o.containerWidth,c=i*(r-1)+2*u*r;return"calc(("+n+" - "+c+"px) / "+a((l-c)/e,5)+")"},v=function(n,t){return"rows"!==t.layout?"calc(100% - "+2*t.padding+"px)":m("100%",n,t)},g=function(n,t,o){var e,r;return m(null!==(r=null===(e=n.match(/calc\((.*)\)/))||void 0===e?void 0:e[1])&&void 0!==r?r:n,t,o)},y=function(n){var t=n.imageProps,o=t.src,u=t.alt,a=t.srcSet,l=t.sizes,c=i(t,h);return e.createElement("img",r({src:o,alt:u},a?{srcSet:a,sizes:l}:null,c))},w=function(n){var t,o=n.photo,e=n.layout,u=n.layoutOptions,a=n.imageProps,l=(a=void 0===a?{}:a).style,c=i(a,f),s=n.renderPhoto,p=u.onClick,d=r({display:"block",boxSizing:"content-box",width:v(e,u),height:"auto",aspectRatio:o.width+" / "+o.height},u.padding?{padding:u.padding+"px"}:null,("columns"===u.layout||"masonry"===u.layout)&&e.photoIndex<e.photosCount-1?{marginBottom:u.spacing+"px"}:null,p?{cursor:"pointer"}:null,l),h=p?function(n){p(n,o,e.index)}:void 0,m=r({src:o.src,alt:null!==(t=o.alt)&&void 0!==t?t:"",title:o.title,onClick:h,style:d,className:"react-photo-album--photo"},function(n,t,o){var e;return n.images&&n.images.length>0&&(e=n.images.concat([{src:n.src,width:n.width,height:n.height}]).sort((function(n,t){return n.width-t.width})).map((function(n){return n.src+" "+n.width+"w"})).join(", ")),{srcSet:e,sizes:o.sizes?(o.sizes.sizes||[]).map((function(n){var e=n.viewport,r=n.size;return e+" "+g(r,t,o)})).concat(g(o.sizes.size,t,o)).join(", "):Math.ceil(t.width/(o.viewportWidth||o.containerWidth)*100)+"vw"}}(o,e,u),c);return(null!=s?s:y)({photo:o,layout:e,layoutOptions:u,imageProps:m})},C=["style"],O=function(n){var t=n.rowContainerProps,o=n.children;return e.createElement("div",r({},t),o)},P=function(n){var t=n.layoutOptions,o=n.rowIndex,e=n.rowsCount,u=n.renderRowContainer,a=n.rowContainerProps,l=(a=void 0===a?{}:a).style,c=i(a,C),s=n.children,p=r({className:"react-photo-album--row",style:r({display:"flex",flexDirection:"row",flexWrap:"nowrap",alignItems:"flex-start",justifyContent:"space-between"},o<e-1?{marginBottom:t.spacing+"px"}:null,l)},c);return(null!=u?u:O)({layoutOptions:t,rowIndex:o,rowsCount:e,rowContainerProps:p,children:s})},x=function(n){var t=n.photos,o=n.layoutOptions,r=n.renderPhoto,i=n.renderRowContainer,u=n.componentsProps,a=n.instrumentation,l=d({photos:t,layoutOptions:o,instrumentation:a});return void 0===l?e.createElement(e.Fragment,null):e.createElement(e.Fragment,null,l.map((function(n,t){return e.createElement(P,{key:"row-"+t,layoutOptions:o,rowIndex:t,rowsCount:l.length,renderRowContainer:i,rowContainerProps:null==u?void 0:u.rowContainerProps},n.map((function(n){var t=n.photo,i=n.layout;return e.createElement(w,{key:t.key||t.src,photo:t,layout:i,layoutOptions:o,renderPhoto:r,imageProps:null==u?void 0:u.imageProps})})))})))},b=function(n,t,o,e){return function(n,t,o){for(var e=[o],r=o,i=t;i>0;i-=1)r=n[r][i][0],e.push(r);return e.reverse()}(function(n,t,o,e){for(var r,i=[],u={0:(r={},r[o]=null,r)},a=function(o){Object.keys(u[o]).forEach((function(r){var a=+r,l=o>0&&i[a][o]?i[a][o][1]:0;n(a).forEach((function(n){var r=n.neighbor,c=n.weight;i[r]||(i[r]=[]);var s=l+c;(!i[r][o+1]||i[r][o+1][1]>s&&(i[r][o+1][1]/s>1.0001||a<i[r][o+1][0]))&&(i[r][o+1]=[a,s]),o<t-1&&r!==e&&(u[o+1]||(u[o+1]={}),u[o+1][r]=null)}))}))},l=0;l<t;l+=1)a(l);return i}(n,t,o,e),t,e)},R=function(n){for(var t=n.path,o=n.photos,e=n.containerWidth,r=n.columnsGaps,i=n.columnsRatios,a=n.spacing,l=n.padding,c=[],s=i.reduce((function(n,t){return n+t}),0),p=function(n){var p=o.map((function(n,t){return{photo:n,index:t}})).slice(t[n],t[n+1]),d=i.reduce((function(t,o,e){return t+(r[n]-r[e])*o}),0),h=(e-(t.length-2)*a-2*(t.length-1)*l-d)*i[n]/s;c.push(p.map((function(n,t){var o=n.photo,e=n.index;return{photo:o,layout:{width:h,height:h/u(o),index:e,photoIndex:t,photosCount:p.length}}})))},d=0;d<t.length-1;d+=1)p(d);return c},W=function(n){var t=n.photos,o=n.layoutOptions,e=n.targetColumnWidth,r=n.instrumentation,i=o.columns,a=o.spacing,l=o.padding,c=o.containerWidth,s=[],p=[];if(t.length<=i){for(var d=0;d<t.length;d+=1)s[d]=2*l,p[d]=u(t[d]);var h=R({path:Array.from({length:t.length+1}).map((function(n,t){return t})),photos:t,columnsRatios:p,columnsGaps:s,containerWidth:c,spacing:a,padding:l});return{columnsGaps:s,columnsRatios:p,columnsModel:h}}for(var f=(t.reduce((function(n,t){return n+e/u(t)}),0)+a*(t.length-i)+2*l*t.length)/i,m=function(n){var t=n.photos,o=n.spacing,e=n.padding,r=n.targetColumnWidth,i=n.targetColumnHeight,a=n.instrumentation;return function(n){for(var l=[],c=1.5*i,s=r/u(t[n])+2*e,p=n+1;p<t.length+1&&(l.push({neighbor:p,weight:Math.pow(i-s,2)}),!(s>c&&!(null==a?void 0:a.fullGraphSearch)||p===t.length));p+=1)s+=r/u(t[p])+o+2*e;return l}}({photos:t,targetColumnWidth:e,targetColumnHeight:f,spacing:a,padding:l,instrumentation:r}),v=b(m,i,0,t.length).map((function(n){return+n})),g=0;g<v.length-1;g+=1){var y=t.slice(v[g],v[g+1]);s[g]=a*(y.length-1)+2*l*y.length,p[g]=1/y.reduce((function(n,t){return n+1/u(t)}),0)}return{columnsGaps:s,columnsRatios:p,columnsModel:R({path:v,photos:t,columnsRatios:p,columnsGaps:s,containerWidth:c,spacing:a,padding:l})}},E=function n(t){var o=t.photos,e=t.layoutOptions,i=t.instrumentation,u=e.columns,a=e.spacing,l=e.padding,c=e.containerWidth,s=W({photos:o,layoutOptions:e,targetColumnWidth:(c-a*(u-1)-2*l*u)/u,instrumentation:i}),p=s.columnsGaps,d=s.columnsRatios,h=s.columnsModel;return h.findIndex((function(n){return n.findIndex((function(n){var t=n.layout,o=t.width,e=t.height;return o<0||e<0}))>=0}))>=0?u>1?n({photos:o,layoutOptions:r({},e,{columns:u-1}),instrumentation:i}):void 0:{columnsModel:h,columnsGaps:p,columnsRatios:d}},k=function(n){var t,o,e=n.photos,i=n.layoutOptions,u=n.instrumentation;null===(t=null==u?void 0:u.onStartLayoutComputation)||void 0===t||t.call(u);var a=E({photos:e,layoutOptions:r({},i,{columns:Math.min(i.columns,e.length)}),instrumentation:u});return null===(o=null==u?void 0:u.onFinishLayoutComputation)||void 0===o||o.call(u,a),a},z=["style"],M=["layoutOptions","renderColumnContainer","children","columnContainerProps"],j=function(n){var t=n.columnContainerProps,o=n.children;return e.createElement("div",r({},t),o)},I=function(n){var t=n.layoutOptions,o=n.columnIndex,e=n.columnsCount,r=n.columnsGaps,i=n.columnsRatios,u=t.layout,l=t.spacing,c=t.padding;if("masonry"===u||!r||!i)return"calc((100% - "+l*(e-1)+"px) / "+e+")";var s=i.reduce((function(n,t){return n+t}),0),p=i.reduce((function(n,t,e){return n+(r[o]-r[e])*t}),0);return"calc((100% - "+a((e-1)*l+2*e*c+p,3)+"px) * "+a(i[o]/s,5)+" + "+2*c+"px)"},S=function(n){var t=n.layoutOptions,o=n.renderColumnContainer,e=n.children,u=n.columnContainerProps,a=(u=void 0===u?{}:u).style,l=i(u,z),c=i(n,M),s=r({className:"react-photo-album--column",style:r({display:"flex",flexDirection:"column",flexWrap:"nowrap",alignItems:"flex-start",width:I(n),justifyContent:"columns"===t.layout?"space-between":"flex-start"},a)},l);return(null!=o?o:j)(r({layoutOptions:t,columnContainerProps:s,children:e},c))},G=function(n){var t=n.photos,o=n.layoutOptions,r=n.renderPhoto,i=n.renderColumnContainer,u=n.componentsProps,a=n.instrumentation,l=k({photos:t,layoutOptions:o,instrumentation:a});if(void 0===l)return e.createElement(e.Fragment,null);var c=l.columnsModel,s=l.columnsRatios,p=l.columnsGaps;return e.createElement(e.Fragment,null,c.map((function(n,t){return e.createElement(S,{key:"column-"+t,layoutOptions:o,columnIndex:t,columnsCount:c.length,columnsGaps:p,columnsRatios:s,renderColumnContainer:i,columnContainerProps:null==u?void 0:u.columnContainerProps},n.map((function(n){var t=n.photo,i=n.layout;return e.createElement(w,{key:t.key||t.src,photo:t,layout:i,layoutOptions:o,renderPhoto:r,imageProps:null==u?void 0:u.imageProps})})))})))},F=function n(t){var o,e,i=t.photos,a=t.layoutOptions,l=t.instrumentation,c=a.spacing,s=a.padding,p=a.containerWidth,d=Math.min(a.columns,i.length);null===(o=null==l?void 0:l.onStartLayoutComputation)||void 0===o||o.call(l);var h=(p-c*(d-1)-2*s*d)/d;if(h<=0)return d>1?n(r({},t,{layoutOptions:r({},a,{columns:d-1})})):void 0;for(var f=[],m=0;m<d;m+=1)f[m]=0;var v=i.reduce((function(n,t,o){var e=f.reduce((function(n,t,o){return t<f[n]-1?o:n}),0);return f[e]=f[e]+h/u(t)+c+2*s,n[e]||(n[e]=[]),n[e].push({photo:t,index:o}),n}),[]),g=v.map((function(n){return n.map((function(t,o){var e=t.photo,r=t.index;return{photo:e,layout:{width:h,height:h/u(e),index:r,photoIndex:o,photosCount:n.length}}}))}));return null===(e=null==l?void 0:l.onFinishLayoutComputation)||void 0===e||e.call(l,g),g},H=function(n){var t=n.photos,o=n.layoutOptions,r=n.renderPhoto,i=n.renderColumnContainer,u=n.componentsProps,a=n.instrumentation,l=F({photos:t,layoutOptions:o,instrumentation:a});return void 0===l?e.createElement(e.Fragment,null):e.createElement(e.Fragment,null,l.map((function(n,t){return e.createElement(S,{key:"masonry-column-"+t,layoutOptions:o,columnsCount:l.length,columnIndex:t,renderColumnContainer:i,columnContainerProps:null==u?void 0:u.columnContainerProps},n.map((function(n){var t=n.photo,i=n.layout;return e.createElement(w,{key:t.key||t.src,photo:t,layout:i,layoutOptions:o,renderPhoto:r,imageProps:null==u?void 0:u.imageProps})})))})))},L=["style"],N=function(n){var t=n.containerProps,o=n.children,i=n.containerRef;return e.createElement("div",r({ref:i},t),o)},A=function(n){var t=n.layoutOptions,o=n.renderContainer,u=n.children,a=n.containerRef,l=n.containerProps,c=(l=void 0===l?{}:l).style,s=i(l,L),p=t.layout,d=r({className:"react-photo-album react-photo-album--"+p,style:r({display:"flex",flexWrap:"nowrap",justifyContent:"space-between",flexDirection:"rows"===p?"column":"row"},c)},s);if(o&&"object"==typeof o){var h=o;return e.createElement(h,{ref:a,layoutOptions:t,containerProps:d},u)}return(null!=o?o:N)({containerProps:d,containerRef:a,layoutOptions:t,children:u})},_="undefined"!=typeof document?t.useLayoutEffect:t.useEffect,D=Object.freeze([1200,600,300,0]),B=function(n,t){return"function"==typeof n?n(t):n},T=function(n,t,o){var e=function(n,t){return void 0!==n?B(n,t):void 0}(n,t);return void 0===e?function(n,t){var o=D.findIndex((function(n){return n<=t}));return B(n[o>=0?o:0],t)}(o,t):e},q=function(n){var o=n.photos,i=n.layout,u=n.renderPhoto,a=n.renderContainer,l=n.renderRowContainer,c=n.renderColumnContainer,s=n.defaultContainerWidth,p=n.resizeObserverProvider,d=n.breakpoints,h=n.instrumentation,f=function(){var n=t.useState(!1),o=n[0],e=n[1];return _((function(){return e(!0),function(){return e(!1)}}),[]),o}(),m=function(n,o){var e=t.useRef(),r=t.useState(),i=r[0],u=r[1],a=t.useCallback((function(t){var r;e.current&&(e.current.disconnect(),e.current=void 0);var i=function(){var n=null==t?void 0:t.clientWidth;if(void 0!==n&&o&&o.length>0){var e=[].concat(o.filter((function(n){return n>0}))).sort((function(n,t){return t-n}));e.push(Math.floor(e[e.length-1]/2)),n=e.find((function(t,o){return t<=n||o===e.length-1}))}u(n)};i(),t&&(e.current="undefined"!=typeof ResizeObserver?new ResizeObserver(i):null==n?void 0:n(i),null===(r=e.current)||void 0===r||r.observe(t))}),[n,o]);return t.useMemo((function(){return{containerRef:a,containerWidth:i}}),[a,i])}(p,d),v=m.containerRef,g=m.containerWidth;if(!i||!["rows","columns","masonry"].includes(i)||!Array.isArray(o))return e.createElement(e.Fragment,null);var y=function(n){var t=n.layout,o=n.onClick,e=n.viewportWidth,r=n.containerWidth,i=n.targetRowHeight,u=n.rowConstraints,a=n.columns,l=n.spacing,c=n.padding,s=n.sizes;return{layout:t,onClick:o,viewportWidth:e,containerWidth:r,columns:T(a,r,[5,4,3,2]),spacing:T(l,r,[20,15,10,5]),padding:T(c,r,[0,0,0,0,0]),targetRowHeight:T(i,r,[function(n){return n/5},function(n){return n/4},function(n){return n/3},function(n){return n/2}]),sizes:s,rowConstraints:u}}(r({containerWidth:f&&g||s||800,viewportWidth:f&&window.innerWidth||void 0},n)),w=function(n,t){return"function"==typeof n?n(t):n}(n.componentsProps,y.containerWidth),C={photos:o,renderPhoto:u,componentsProps:w,instrumentation:h};return e.createElement(A,{containerRef:v,layoutOptions:y,renderContainer:a,containerProps:null==w?void 0:w.containerProps},"rows"===i?e.createElement(x,r({layoutOptions:y,renderRowContainer:l},C)):"columns"===i?e.createElement(G,r({layoutOptions:y,renderColumnContainer:c},C)):e.createElement(H,r({layoutOptions:y,renderColumnContainer:c},C)))};n.PhotoAlbum=q,n.default=q,Object.defineProperty(n,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.umd.js.map

package.json

 {
     "name": "react-photo-album",
-    "version": "1.10.1",
+    "version": "1.10.2",
     "description": "Responsive photo gallery component for React",
@@ -5,0 +5,0 @@ "author": "Igor Danchenko",

No alert changes

Improved metrics

Total package byte prevSize

339926

increased by0.6%

Lines of code

1406

increased by0.29%

No dependency changes