react-flex-images/dist/index.js

A lightweight react wrapper for creating fluid galleries as seen on Flickr and Google Images.

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react/jsx-runtime"),require("react")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["react-flex-images"]={},e.jsxRuntime,e.React)}(this,(function(e,t,n){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=i(n),o=function(){return o=Object.assign||function(e){for(var t,n=1,i=arguments.length;n<i;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},o.apply(this,arguments)},a=r.default.createContext(null);function l(e){var i=e.children,r=e.className,l=e.style,u=e.onClick,d=n.useContext(a)||{},s=d.orientation,c=d.lineGap,f="horizontal"===s?"flex-images-item":"flex-images-vertical-item";return t.jsx("div",o({className:f+(r?" ".concat(r):""),style:o(o({},l),{marginBottom:c}),onClick:u},{children:i}))}function u(e){var i=e.rowHeight,a=void 0===i?300:i,u=e.maxRows,d=void 0===u?null:u,s=e.truncate,c=void 0!==s&&s,f=n.useRef(null),h=n.useReducer((function(e){return e+1}),0)[1],m=n.useState(!1),p=m[0],g=m[1];n.useLayoutEffect(h,[]),n.useEffect((function(){var e=function(){h()};return window.addEventListener("resize",e),function(){window.removeEventListener("resize",e)}}),[]);return t.jsxs("div",o({ref:f,className:"flex-images"},{children:[!f.current&&t.jsx("div",o({style:{display:"none"}},{children:e.children})),f.current&&e.children&&function(e){if(f.current){var t=1,n=0,i=[],u=f.current.clientWidth-2,s=[],m=function(){var e,t=null===(e=f.current)||void 0===e?void 0:e.querySelector(".flex-images-item");if(t){var n=getComputedStyle(t);return parseFloat(n.marginLeft)+parseFloat(n.marginRight)+Math.round(parseFloat(n.borderLeftWidth))+Math.round(parseFloat(n.borderRightWidth))}return 0}(),v=r.default.Children.map(e,(function(e){if(r.default.isValidElement(e)){var t=e.props;return{child:e,imgWidth:t.imgWidth,imgHeight:t.imgHeight,width:0,height:0}}}));return null==v||v.forEach((function(e){if(d&&t>d)return!1;if(i.push(e),e.width=e.imgWidth*(a/e.imgHeight),e.height=a,(n+=e.width+m)>u){var r=m*i.length,o=(u-r)/(n-r);i.forEach((function(t){t.width=Math.floor(t.width*o),t.height=Math.floor(e.height*o)})),s.push.apply(s,i),i=[],n=0,t++}})),i.length>0&&!c&&(null==s||s.push.apply(s,i)),p||(g(!0),setTimeout(h,0)),null==s?void 0:s.map((function(e){var t=e.child;return t.type!==l?t:r.default.cloneElement(t,{style:o(o({},t.props.style),{width:e.width,height:e.height})})}))}}(e.children)]}))}function d(e){var n=e.children,i=e.columnCount,r=void 0===i?"3":i,a=e.columnGap,l=void 0===a?"20px":a;return t.jsx("div",o({className:"flex-images-vertical",style:{columnCount:r,columnGap:l}},{children:n}))}var s=[],c=[];!function(e,t){if(e&&"undefined"!=typeof document){var n,i=!0===t.prepend?"prepend":"append",r=!0===t.singleTag,o="string"==typeof t.container?document.querySelector(t.container):document.getElementsByTagName("head")[0];if(r){var a=s.indexOf(o);-1===a&&(a=s.push(o)-1,c[a]={}),n=c[a]&&c[a][i]?c[a][i]:c[a][i]=l()}else n=l();65279===e.charCodeAt(0)&&(e=e.substring(1)),n.styleSheet?n.styleSheet.cssText+=e:n.appendChild(document.createTextNode(e))}function l(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),t.attributes)for(var n=Object.keys(t.attributes),r=0;r<n.length;r++)e.setAttribute(n[r],t.attributes[n[r]]);var a="prepend"===i?"afterbegin":"beforeend";return o.insertAdjacentElement(a,e),e}}(".flex-images {\n  overflow: hidden;\n}\n.flex-images .flex-images-item {\n  float: left;\n  margin: 4px;\n  border: 1px solid #eee;\n  box-sizing: content-box;\n  overflow: hidden;\n  position: relative;\n}\n.flex-images .flex-images-item img {\n  display: block;\n  width: auto;\n  height: 100%;\n}\n\n.flex-images-vertical {\n  column-fill: auto;\n}\n\n.flex-images-vertical-item {\n  display: block;\n  -webkit-column-break-inside: avoid;\n  -moz-column-break-inside: avoid;\n  column-break-inside: avoid;\n}\n\n.flex-images-vertical-item img {\n  width: 100%;\n}\n",{}),e.FlexImagesContainer=function(e){var n=e.children,i=e.orientation,r=void 0===i?"horizontal":i,l=e.lineGap;return t.jsx(a.Provider,o({value:{orientation:r,lineGap:l}},{children:"horizontal"===r?t.jsx(u,o({},e,{children:n})):t.jsx(d,o({},e,{children:n}))}))},e.FlexImagesItem=l,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=index.js.map