react-photo-album - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

dist/index.d.ts

@@ -77,2 +77,4 @@ /// <reference types="react" />
     renderColumnContainer?: RenderColumnContainer;
+    /** ResizeObserver factory to be used when global ResizeObserver is unavailable */
+    resizeObserverProvider?: ResizeObserverProvider;
     /** internal instrumentation - use on your own risk */
@@ -139,2 +141,3 @@ instrumentation?: Instrumentation;
 declare type RenderColumnContainer = (props: PropsWithChildren<ColumnContainerProps>) => JSX.Element;
+declare type ResizeObserverProvider = (callback: (entries: ResizeObserverEntry[], observer: ResizeObserver) => void) => ResizeObserver;
 /** internal instrumentation for research and performance testing purposes, subject to change without notice */
@@ -149,2 +152,2 @@ declare type Instrumentation = {
 
-export { ClickHandler, ColumnContainerProps, ColumnsLayoutOptions, ContainerProps, GenericLayoutOptions, Image, Instrumentation, Layout, LayoutOptions, LayoutType, Photo, PhotoAlbum, PhotoAlbumProps, PhotoLayout, PhotoProps, RenderColumnContainer, RenderContainer, RenderPhoto, RenderRowContainer, ResponsiveParameter, ResponsiveParameterProvider, RowContainerProps, RowsLayoutOptions, PhotoAlbum as default };
+export { ClickHandler, ColumnContainerProps, ColumnsLayoutOptions, ContainerProps, GenericLayoutOptions, Image, Instrumentation, Layout, LayoutOptions, LayoutType, Photo, PhotoAlbum, PhotoAlbumProps, PhotoLayout, PhotoProps, RenderColumnContainer, RenderContainer, RenderPhoto, RenderRowContainer, ResizeObserverProvider, ResponsiveParameter, ResponsiveParameterProvider, RowContainerProps, RowsLayoutOptions, PhotoAlbum as default };

dist/react-photo-album.cjs.development.js

@@ -6,3 +6,2 @@ 'use strict';
 var React = require('react');
-var ResizeObserver = require('resize-observer-polyfill');
 
@@ -31,3 +30,2 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var ResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(ResizeObserver);
 
@@ -545,4 +543,7 @@ var Layout;
       padding = layoutOptions.padding;
-  if (layout === Layout$1.Masonry) return "calc((100% - " + spacing * (columnsCount - 1) + "px) / " + columnsCount + ")";
-  if (!columnsGaps || !columnsRatios) return "0";
+
+  if (layout === Layout$1.Masonry || !columnsGaps || !columnsRatios) {
+    return "calc((100% - " + spacing * (columnsCount - 1) + "px) / " + columnsCount + ")";
+  }
+
   var totalRatio = columnsRatios.reduce(function (acc, ratio) {
@@ -1061,2 +1062,4 @@ return acc + ratio;
 
+/* istanbul ignore next */
+
 var useLayoutEffect = typeof document !== "undefined" ? React.useLayoutEffect : React.useEffect;
@@ -1099,2 +1102,3 @@
       renderColumnContainer = props.renderColumnContainer,
+      resizeObserverProvider = props.resizeObserverProvider,
       instrumentation = props.instrumentation;
@@ -1128,21 +1132,30 @@
 
-    if (node) {
-      if (!observerRef.current) {
-        observerRef.current = new ResizeObserver__default["default"](function () {
-          return updateDimensions();
-        });
-      }
-
+    if (node && observerRef.current) {
       observerRef.current.observe(node);
     }
-  }, [updateDimensions]);
+  }, []);
   useLayoutEffect(function () {
     updateDimensions();
-    return function () {
-      var _observerRef$current;
 
-      (_observerRef$current = observerRef.current) == null ? void 0 : _observerRef$current.disconnect();
-      observerRef.current = null;
+    var observerCallback = function observerCallback() {
+      return updateDimensions();
     };
-  }, [updateDimensions]);
+
+    if (typeof ResizeObserver !== "undefined") {
+      observerRef.current = new ResizeObserver(observerCallback);
+    } else if (resizeObserverProvider) {
+      observerRef.current = resizeObserverProvider(observerCallback);
+    }
+
+    if (observerRef.current && containerRef.current) {
+      observerRef.current.observe(containerRef.current);
+    }
+
+    return function () {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+    };
+  }, [updateDimensions, resizeObserverProvider]);
   var layoutOptions = resolveLayoutOptions({
@@ -1149,0 +1162,0 @@ containerWidth: containerWidth || defaultContainerWidth,

dist/react-photo-album.cjs.production.min.js

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

dist/react-photo-album.esm.js

 import * as React from 'react';
 import React__default, { useLayoutEffect as useLayoutEffect$1, useEffect } from 'react';
-import ResizeObserver from 'resize-observer-polyfill';
 
@@ -516,4 +515,7 @@ var Layout;
       padding = layoutOptions.padding;
-  if (layout === Layout$1.Masonry) return "calc((100% - " + spacing * (columnsCount - 1) + "px) / " + columnsCount + ")";
-  if (!columnsGaps || !columnsRatios) return "0";
+
+  if (layout === Layout$1.Masonry || !columnsGaps || !columnsRatios) {
+    return "calc((100% - " + spacing * (columnsCount - 1) + "px) / " + columnsCount + ")";
+  }
+
   var totalRatio = columnsRatios.reduce(function (acc, ratio) {
@@ -1032,2 +1034,4 @@ return acc + ratio;
 
+/* istanbul ignore next */
+
 var useLayoutEffect = typeof document !== "undefined" ? useLayoutEffect$1 : useEffect;
@@ -1070,2 +1074,3 @@
       renderColumnContainer = props.renderColumnContainer,
+      resizeObserverProvider = props.resizeObserverProvider,
       instrumentation = props.instrumentation;
@@ -1099,21 +1104,30 @@
 
-    if (node) {
-      if (!observerRef.current) {
-        observerRef.current = new ResizeObserver(function () {
-          return updateDimensions();
-        });
-      }
-
+    if (node && observerRef.current) {
       observerRef.current.observe(node);
     }
-  }, [updateDimensions]);
+  }, []);
   useLayoutEffect(function () {
     updateDimensions();
-    return function () {
-      var _observerRef$current;
 
-      (_observerRef$current = observerRef.current) == null ? void 0 : _observerRef$current.disconnect();
-      observerRef.current = null;
+    var observerCallback = function observerCallback() {
+      return updateDimensions();
     };
-  }, [updateDimensions]);
+
+    if (typeof ResizeObserver !== "undefined") {
+      observerRef.current = new ResizeObserver(observerCallback);
+    } else if (resizeObserverProvider) {
+      observerRef.current = resizeObserverProvider(observerCallback);
+    }
+
+    if (observerRef.current && containerRef.current) {
+      observerRef.current.observe(containerRef.current);
+    }
+
+    return function () {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+    };
+  }, [updateDimensions, resizeObserverProvider]);
   var layoutOptions = resolveLayoutOptions({
@@ -1120,0 +1134,0 @@ containerWidth: containerWidth || defaultContainerWidth,

package.json

 {
     "name": "react-photo-album",
-    "version": "1.1.1",
+    "version": "1.2.0",
     "description": "Responsive photo album component for React",
@@ -35,5 +35,2 @@ "license": "MIT",
     },
-    "dependencies": {
-        "resize-observer-polyfill": "^1.5.1"
-    },
     "devDependencies": {
@@ -44,2 +41,3 @@ "@commitlint/cli": "^16.0.1",
         "@semantic-release/github": "^8.0.2",
+        "@testing-library/react": "^12.1.2",
         "@tsconfig/create-react-app": "^1.0.2",
@@ -46,0 +44,0 @@ "@tsconfig/recommended": "^1.0.1",

README.md

@@ -14,4 +14,6 @@ # React Photo Album
 - **SSR friendly:** produces server-side rendered markup that looks pixel perfect on the client even before hydration.
+- **Responsive images:** responsive images with automatic resolution switching are supported out of the box.
 - **Feature packed:** supports 3 layout options (rows, columns and masonry), responsive images, custom data attributes
-  and is fully customizable.
+  and is fully configurable and customizable.
+- **TypeScript:** type definitions come built-in in the package.
 - **Performance:** it was built with performance in mind in order to support large photo albums and silky smooth layout
@@ -34,2 +36,6 @@ adjustments.
 
+## Documentation
+
+[https://react-photo-album.com/](https://react-photo-album.com/)
+
 ## Installation
@@ -47,6 +53,2 @@
 
-## Documentation
-
-[https://react-photo-album.com/](https://react-photo-album.com/)
-
 ## Minimal Setup Example
@@ -61,3 +63,3 @@
         width: 800,
-        height: 600,
+        height: 600
     },
@@ -67,9 +69,7 @@ {
         width: 1600,
-        height: 900,
-    },
+        height: 900
+    }
 ];
 
-const MinimalSetup = () => <PhotoAlbum layout="rows" photos={photos} />;
-
-export default MinimalSetup;
+<PhotoAlbum layout="rows" photos={photos} />
 ```
@@ -104,2 +104,8 @@
 
+### Responsive Images
+
+React Photo Album automatically generates `sizes` and `srcset` image attributes. In the case of SSR, React Photo Album
+includes `sizes` and `srcset` image attributes in the server-rendered markup, allowing browsers to pick images of the
+most appropriate resolution depending on their viewport size.
+
 ### SSR
@@ -116,2 +122,11 @@
 
+### ResizeObserver
+
+React Photo Album relies on [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to respond
+to container size changes (i.e., when the browser window gets resized, device orientation changes or page layout causes
+a shift in container dimensions). React Photo Album no longer bundles ResizeObserver polyfill as part of the library
+since, as of January 2022, over 91% of browsers support it natively. If your use case requires you to support some older
+browsers, you can accomplish this by either installing a global ResizeObserver polyfill or by supplying a ponyfill via
+the `resizeObserverProvider` parameter.
+
 ## Credits
@@ -118,0 +133,0 @@

No alert changes

Improved metrics

Total package byte prevSize

341151

increased by1.19%

Dependency count

1

decreased by-50%

Lines of code

2231

increased by0.9%

Number of lines in readme file

130

increased by13.04%

Worsened metrics

Dev dependency count

18

increased by5.88%

Dependency changes

• - Removedresize-observer-polyfill@^1.5.1

• - Removedresize-observer-polyfill@1.5.1(transitive)