react-photo-album - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

dist/index.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 import { MouseEvent, ImgHTMLAttributes, HTMLAttributes, ForwardRefExoticComponent, PropsWithoutRef, PropsWithChildren, RefAttributes } from 'react';
@@ -8,2 +7,13 @@
 declare type ResponsiveParameter = number | ResponsiveParameterProvider;
+declare type ResponsiveSizes = {
+    /** default size e.g. 100vw or calc(100vw - 200px) */
+    size: string;
+    /** array of sizes at various breakpoint */
+    sizes?: {
+        /** viewport size media query e.g. (max-width: 600px)  */
+        viewport: string;
+        /** photo album width at given viewport size e.g. calc(100vw - 50px) */
+        size: string;
+    }[];
+};
 interface Image {
@@ -18,3 +28,3 @@ /** image source */
 interface Photo extends Image {
-    /** option photo key */
+    /** optional photo key */
     key?: string;
@@ -46,3 +56,3 @@ /** photo alt text */
     /** pre-populated 'img' element attributes */
-    imageProps: ImgHTMLAttributes<HTMLImageElement>;
+    imageProps: ImgHTMLAttributes<HTMLImageElement> & Required<Pick<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "style">>;
 };
@@ -62,2 +72,4 @@ declare type PhotoAlbumProps<T extends Photo = Photo> = {
     targetRowHeight?: ResponsiveParameter;
+    /** photo album size at various viewport sizes */
+    sizes?: ResponsiveSizes;
     /** photo click handler */
@@ -92,2 +104,4 @@ onClick?: ClickHandler;
     onClick?: ClickHandler;
+    /** photo album size at various viewport sizes */
+    sizes?: ResponsiveSizes;
 };
@@ -133,3 +147,3 @@ declare type RowsLayoutOptions = GenericLayoutOptions & {
     columnsGaps?: number[];
-    /** width adjustment ratio of each column */
+    /** width adjustment ratio for each column */
     columnsRatios?: number[];
@@ -150,2 +164,2 @@ /** pre-populated default column container attributes */
 
-export { ClickHandler, ColumnContainerProps, ColumnsLayoutOptions, ContainerProps, GenericLayoutOptions, Image, Instrumentation, LayoutOptions, LayoutType, Photo, PhotoAlbum, PhotoAlbumProps, PhotoLayout, PhotoProps, RenderColumnContainer, RenderContainer, RenderPhoto, RenderRowContainer, ResizeObserverProvider, ResponsiveParameter, ResponsiveParameterProvider, RowContainerProps, RowsLayoutOptions, PhotoAlbum as default };
+export { ClickHandler, ColumnContainerProps, ColumnsLayoutOptions, ContainerProps, GenericLayoutOptions, Image, Instrumentation, LayoutOptions, LayoutType, Photo, PhotoAlbum, PhotoAlbumProps, PhotoLayout, PhotoProps, RenderColumnContainer, RenderContainer, RenderPhoto, RenderRowContainer, ResizeObserverProvider, ResponsiveParameter, ResponsiveParameterProvider, ResponsiveSizes, RowContainerProps, RowsLayoutOptions, PhotoAlbum as default };

dist/index.js

@@ -1,5 +0,7 @@
-"use strict"
+'use strict'
 
-module.exports = require(process.env.NODE_ENV === "production" ?
-	"./react-photo-album.cjs.production.min.js" :
-	"./react-photo-album.cjs.development.js")
+if (process.env.NODE_ENV === 'production') {
+	module.exports = require('./react-photo-album.cjs.production.min.js');
+} else {
+	module.exports = require('./react-photo-album.cjs.development.js');
+}

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

@@ -73,26 +73,31 @@ 'use strict';
 
-var _excluded$3 = ["alt"];
+var _excluded$3 = ["src", "alt", "srcSet", "sizes"];
 
-var cssWidth$1 = function cssWidth(photoLayout, layoutOptions) {
-  var width = photoLayout.width;
-  var spacing = layoutOptions.spacing,
-      padding = layoutOptions.padding,
-      layout = layoutOptions.layout,
-      containerWidth = layoutOptions.containerWidth;
+var calcWidth = function calcWidth(base, _ref, _ref2) {
+  var width = _ref.width,
+      photosCount = _ref.photosCount;
+  var spacing = _ref2.spacing,
+      padding = _ref2.padding,
+      containerWidth = _ref2.containerWidth;
+  var gaps = spacing * (photosCount - 1) + 2 * padding * photosCount;
+  return "calc((" + base + " - " + gaps + "px) / " + round((containerWidth - gaps) / width, 5) + ")";
+};
 
-  if (layout !== "rows") {
-    return "calc(100% - " + 2 * padding + "px)";
+var cssWidth$1 = function cssWidth(layout, layoutOptions) {
+  if (layoutOptions.layout !== "rows") {
+    return "calc(100% - " + 2 * layoutOptions.padding + "px)";
   }
 
-  var rowSize = photoLayout.photosCount;
-  return "calc((100% - " + (spacing * (rowSize - 1) + 2 * padding * rowSize) + "px) / " + round((containerWidth - spacing * (rowSize - 1) - 2 * padding * rowSize) / width, 5) + ")";
+  return calcWidth("100%", layout, layoutOptions);
 };
 
-var srcSetAndSizes = function srcSetAndSizes(_ref) {
-  var photo = _ref.photo,
-      layout = _ref.layout,
-      layoutOptions = _ref.layoutOptions;
-  var srcSet;
-  var sizes;
+var calculateSizesValue = function calculateSizesValue(size, layout, layoutOptions) {
+  var _a, _b;
 
+  return calcWidth((_b = (_a = size.match(/calc\((.*)\)/)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : size, layout, layoutOptions);
+};
+
+var srcSetAndSizes = function srcSetAndSizes(photo, layout, layoutOptions) {
+  var srcSet, sizes;
+
   if (photo.images && photo.images.length > 0) {
@@ -108,2 +113,11 @@ srcSet = photo.images.concat([{
     }).join(", ");
+  }
+
+  if (!layoutOptions.viewportWidth && layoutOptions.sizes) {
+    sizes = (layoutOptions.sizes.sizes || []).map(function (_ref3) {
+      var viewport = _ref3.viewport,
+          size = _ref3.size;
+      return viewport + " " + calculateSizesValue(size, layout, layoutOptions);
+    }).concat(calculateSizesValue(layoutOptions.sizes.size, layout, layoutOptions)).join(", ");
+  } else {
     sizes = Math.ceil(layout.width / (layoutOptions.viewportWidth || layoutOptions.containerWidth) * 100) + "vw";
@@ -118,14 +132,23 @@ }
 
-var DefaultPhotoRenderer = function DefaultPhotoRenderer(_ref2) {
-  var imageProps = _ref2.imageProps;
+var DefaultPhotoRenderer = function DefaultPhotoRenderer(_ref4) {
+  var imageProps = _ref4.imageProps;
 
-  var alt = imageProps.alt,
+  var src = imageProps.src,
+      alt = imageProps.alt,
+      srcSet = imageProps.srcSet,
+      sizes = imageProps.sizes,
       rest = _objectWithoutPropertiesLoose(imageProps, _excluded$3);
 
   return /*#__PURE__*/React__namespace.createElement("img", _extends({
-    alt: alt || ""
-  }, rest));
+    src: src,
+    alt: alt
+  }, srcSet ? {
+    srcSet: srcSet,
+    sizes: sizes
+  } : null, rest));
 };
 
 var PhotoRenderer = function PhotoRenderer(props) {
+  var _a;
+
   var photo = props.photo,
@@ -155,20 +178,11 @@ layout = props.layout,
 
-  var _srcSetAndSizes = srcSetAndSizes({
-    photo: photo,
-    layout: layout,
-    layoutOptions: layoutOptions
-  }),
-      srcSet = _srcSetAndSizes.srcSet,
-      sizes = _srcSetAndSizes.sizes;
-
-  var imageProps = {
+  var imageProps = _extends({
     src: photo.src,
-    alt: photo.alt,
+    alt: (_a = photo.alt) !== null && _a !== void 0 ? _a : "",
     title: photo.title,
     onClick: handleClick,
     style: style,
-    sizes: sizes,
-    srcSet: srcSet,
     className: "react-photo-album--photo"
-  };
+  }, srcSetAndSizes(photo, layout, layoutOptions));
+
   var Component = renderPhoto || DefaultPhotoRenderer;
@@ -1075,3 +1089,4 @@ return /*#__PURE__*/React__namespace.createElement(Component, {
       spacing = _ref.spacing,
-      padding = _ref.padding;
+      padding = _ref.padding,
+      sizes = _ref.sizes;
   return {
@@ -1093,3 +1108,4 @@ layout: layout,
       return w / 2;
-    }])
+    }]),
+    sizes: sizes
   };
@@ -1104,2 +1120,3 @@ };
       padding = props.padding,
+      sizes = props.sizes,
       onClick = props.onClick,
@@ -1178,3 +1195,4 @@ targetRowHeight = props.targetRowHeight,
     columns: columns,
-    targetRowHeight: targetRowHeight
+    targetRowHeight: targetRowHeight,
+    sizes: sizes
   });
@@ -1181,0 +1199,0 @@ var commonLayoutProps = {

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

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

dist/react-photo-album.esm.js

@@ -47,26 +47,31 @@ import * as React from 'react';
 
-var _excluded$3 = ["alt"];
+var _excluded$3 = ["src", "alt", "srcSet", "sizes"];
 
-var cssWidth$1 = function cssWidth(photoLayout, layoutOptions) {
-  var width = photoLayout.width;
-  var spacing = layoutOptions.spacing,
-      padding = layoutOptions.padding,
-      layout = layoutOptions.layout,
-      containerWidth = layoutOptions.containerWidth;
+var calcWidth = function calcWidth(base, _ref, _ref2) {
+  var width = _ref.width,
+      photosCount = _ref.photosCount;
+  var spacing = _ref2.spacing,
+      padding = _ref2.padding,
+      containerWidth = _ref2.containerWidth;
+  var gaps = spacing * (photosCount - 1) + 2 * padding * photosCount;
+  return "calc((" + base + " - " + gaps + "px) / " + round((containerWidth - gaps) / width, 5) + ")";
+};
 
-  if (layout !== "rows") {
-    return "calc(100% - " + 2 * padding + "px)";
+var cssWidth$1 = function cssWidth(layout, layoutOptions) {
+  if (layoutOptions.layout !== "rows") {
+    return "calc(100% - " + 2 * layoutOptions.padding + "px)";
   }
 
-  var rowSize = photoLayout.photosCount;
-  return "calc((100% - " + (spacing * (rowSize - 1) + 2 * padding * rowSize) + "px) / " + round((containerWidth - spacing * (rowSize - 1) - 2 * padding * rowSize) / width, 5) + ")";
+  return calcWidth("100%", layout, layoutOptions);
 };
 
-var srcSetAndSizes = function srcSetAndSizes(_ref) {
-  var photo = _ref.photo,
-      layout = _ref.layout,
-      layoutOptions = _ref.layoutOptions;
-  var srcSet;
-  var sizes;
+var calculateSizesValue = function calculateSizesValue(size, layout, layoutOptions) {
+  var _a, _b;
 
+  return calcWidth((_b = (_a = size.match(/calc\((.*)\)/)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : size, layout, layoutOptions);
+};
+
+var srcSetAndSizes = function srcSetAndSizes(photo, layout, layoutOptions) {
+  var srcSet, sizes;
+
   if (photo.images && photo.images.length > 0) {
@@ -82,2 +87,11 @@ srcSet = photo.images.concat([{
     }).join(", ");
+  }
+
+  if (!layoutOptions.viewportWidth && layoutOptions.sizes) {
+    sizes = (layoutOptions.sizes.sizes || []).map(function (_ref3) {
+      var viewport = _ref3.viewport,
+          size = _ref3.size;
+      return viewport + " " + calculateSizesValue(size, layout, layoutOptions);
+    }).concat(calculateSizesValue(layoutOptions.sizes.size, layout, layoutOptions)).join(", ");
+  } else {
     sizes = Math.ceil(layout.width / (layoutOptions.viewportWidth || layoutOptions.containerWidth) * 100) + "vw";
@@ -92,14 +106,23 @@ }
 
-var DefaultPhotoRenderer = function DefaultPhotoRenderer(_ref2) {
-  var imageProps = _ref2.imageProps;
+var DefaultPhotoRenderer = function DefaultPhotoRenderer(_ref4) {
+  var imageProps = _ref4.imageProps;
 
-  var alt = imageProps.alt,
+  var src = imageProps.src,
+      alt = imageProps.alt,
+      srcSet = imageProps.srcSet,
+      sizes = imageProps.sizes,
       rest = _objectWithoutPropertiesLoose(imageProps, _excluded$3);
 
   return /*#__PURE__*/React.createElement("img", _extends({
-    alt: alt || ""
-  }, rest));
+    src: src,
+    alt: alt
+  }, srcSet ? {
+    srcSet: srcSet,
+    sizes: sizes
+  } : null, rest));
 };
 
 var PhotoRenderer = function PhotoRenderer(props) {
+  var _a;
+
   var photo = props.photo,
@@ -129,20 +152,11 @@ layout = props.layout,
 
-  var _srcSetAndSizes = srcSetAndSizes({
-    photo: photo,
-    layout: layout,
-    layoutOptions: layoutOptions
-  }),
-      srcSet = _srcSetAndSizes.srcSet,
-      sizes = _srcSetAndSizes.sizes;
-
-  var imageProps = {
+  var imageProps = _extends({
     src: photo.src,
-    alt: photo.alt,
+    alt: (_a = photo.alt) !== null && _a !== void 0 ? _a : "",
     title: photo.title,
     onClick: handleClick,
     style: style,
-    sizes: sizes,
-    srcSet: srcSet,
     className: "react-photo-album--photo"
-  };
+  }, srcSetAndSizes(photo, layout, layoutOptions));
+
   var Component = renderPhoto || DefaultPhotoRenderer;
@@ -1049,3 +1063,4 @@ return /*#__PURE__*/React.createElement(Component, {
       spacing = _ref.spacing,
-      padding = _ref.padding;
+      padding = _ref.padding,
+      sizes = _ref.sizes;
   return {
@@ -1067,3 +1082,4 @@ layout: layout,
       return w / 2;
-    }])
+    }]),
+    sizes: sizes
   };
@@ -1078,2 +1094,3 @@ };
       padding = props.padding,
+      sizes = props.sizes,
       onClick = props.onClick,
@@ -1152,3 +1169,4 @@ targetRowHeight = props.targetRowHeight,
     columns: columns,
-    targetRowHeight: targetRowHeight
+    targetRowHeight: targetRowHeight,
+    sizes: sizes
   });
@@ -1155,0 +1173,0 @@ var commonLayoutProps = {

package.json

 {
     "name": "react-photo-album",
-    "version": "1.3.0",
+    "version": "1.4.0",
     "description": "Responsive photo gallery component for React",
@@ -22,2 +22,5 @@ "license": "MIT",
     },
+    "engines": {
+        "node": ">=12"
+    },
     "scripts": {
@@ -33,5 +36,2 @@ "prepare": "husky install",
     },
-    "engines": {
-        "node": ">=12"
-    },
     "devDependencies": {
@@ -71,3 +71,2 @@ "@babel/core": "^7.16.7",
         "rollup": "^2.63.0",
-        "rollup-plugin-delete": "^2.0.0",
         "rollup-plugin-dts": "^4.1.0",
@@ -74,0 +73,0 @@ "rollup-plugin-peer-deps-external": "^2.2.4",

Fixed alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

348803

increased by1.83%

Dev dependency count

40

decreased by-2.44%

Number of downloads

33544

increased by65.93%

Lines of code

2282

increased by2.06%

Number of low supply chain risk alerts

1

decreased by-50%

No dependency changes