react-fb-image-video-grid/dist/react-fb-image-video-grid.cjs.production.min.js

Image-video library which displays them in beautiful grids.

"use strict";function n(n){return n&&"object"==typeof n&&"default"in n?n.default:n}Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=n(e),t=n(require("react-modal"));function i(){return(i=Object.assign||function(n){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(n[t]=r[t])}return n}).apply(this,arguments)}var o=function(){for(var n=arguments.length,e=new Array(n),r=0;r<n;r++)e[r]=arguments[r];return e.filter(Boolean).map((function(n){return n.trim()})).join(" ")};function l(n,e){void 0===e&&(e={});var r=e.insertAt;if(n&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===r&&t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.styleSheet?i.styleSheet.cssText=n:i.appendChild(document.createTextNode(n))}}l(".img {\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n.img_transition {\n  transition: all 1000ms;\n}\n\n.modal_wrap {\n  display: flex;\n  align-items: center;\n  height: 90%;\n  width: 100%;\n  padding: 0.5rem 0;\n}\n\n.layout {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n}\n\n.close_icon {\n  align-self: flex-end;\n}\n\n.icon {\n  cursor: pointer;\n  font-size: 1.5rem;\n}\n\n.left_arrow {\n  transform: rotate(180deg);\n}\n\n.move_left_current_img {\n  transform: translateX(-100%);\n  opacity: 0;\n}\n\n.hide_img_right {\n  transform: translateX(100%);\n  opacity: 0;\n}\n\n.apply_transition {\n  transition: transform 1000ms, opacity 1000ms;\n}\n.move_img_right {\n  transform: translateX(0%);\n  opacity: 1;\n}\n\n.hide_img_left {\n  transform: translateX(-100%);\n  opacity: 0;\n}\n\n.move_img_left {\n  transform: translateX(0%);\n  opacity: 1;\n}\n\n.modal_img_move_left {\n  transform: translateX(0);\n  opacity: 1;\n}\n");var a=function(n){var i,l=n.images,a=n.isOpen,s=n.onClose,m=r.useState(n.initialImageIndex),c=m[0],d=m[1],g=e.useState(""),u=g[0],p=g[1],_=r.useMemo((function(){return l}),[l]),f=r.useCallback((function(){d((function(n){return n===_.length-1?0:n+1})),p("right")}),[_]),h=r.useCallback((function(){p("left"),d((function(n){return 0===n?_.length-1:n-1}))}),[_]);r.useEffect((function(){return document.addEventListener("keydown",(function(n){"ArrowRight"===n.key?f():"ArrowLeft"===n.key&&h()})),function(){document.removeEventListener("keydown",(function(n){"ArrowRight"===n.key?f():"ArrowLeft"===n.key&&h()}))}}),[f,h]);var w=l[c],v=e.useRef(),y=e.useRef(!1);return e.useEffect((function(){var n;y.current?u&&(null==(n=v.current)||n.classList.add("hide_img_"+u),setTimeout((function(){var n,e;null==(n=v.current)||n.classList.add("apply_transition"),null==(e=v.current)||e.classList.remove("hide_img_"+u),setTimeout((function(){var n;null==(n=v.current)||n.classList.remove("apply_transition")}),1e3)}),50)):y.current=!0}),[w,u]),r.createElement(t,{ariaHideApp:!1,isOpen:a,onRequestClose:s,contentLabel:"Example Modal"},r.createElement("div",{className:"layout"},r.createElement("svg",{onClick:s,className:o("close_icon","icon"),fill:"#000000",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",width:"24px",height:"24px"},r.createElement("path",{d:"M 4.7070312 3.2929688 L 3.2929688 4.7070312 L 10.585938 12 L 3.2929688 19.292969 L 4.7070312 20.707031 L 12 13.414062 L 19.292969 20.707031 L 20.707031 19.292969 L 13.414062 12 L 20.707031 4.7070312 L 19.292969 3.2929688 L 12 10.585938 L 4.7070312 3.2929688 z"})),r.createElement("div",{className:"modal_wrap"},r.createElement("svg",{className:o("icon","left_arrow"),onClick:h,xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24"},r.createElement("path",{d:"M7.293 4.707 14.586 12l-7.293 7.293 1.414 1.414L17.414 12 8.707 3.293 7.293 4.707z"})),r.cloneElement(w,{className:o("img",(null==w||null==(i=w.props)?void 0:i.className)||""),ref:v}),r.createElement("svg",{className:o("icon"),onClick:f,xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24"},r.createElement("path",{d:"M7.293 4.707 14.586 12l-7.293 7.293 1.414 1.414L17.414 12 8.707 3.293 7.293 4.707z"})))))};l(".sub_grid_wrapper {\n  width: 100%;\n  height: 100%;\n}\n\n.sub_grid_wrapper_first_row {\n  display: grid;\n  grid-auto-flow: row;\n  width: 100%;\n  height: 66.66%;\n  gap: 0.25rem;\n}\n.sub_grid_wrapper_second_row {\n  display: grid;\n  grid-auto-flow: row;\n  width: 100%;\n  height: 33.33%;\n  gap: 0.25rem;\n}\n\n.grid_wrapper {\n  display: grid;\n  grid-auto-flow: row;\n  width: 100%;\n  height: 100%;\n  gap: 0.25rem;\n}\n\n.grid_wrapper_1_img {\n  grid-template-columns: repeat(1, 1fr);\n}\n\n.grid_wrapper_2_img {\n  grid-template-columns: repeat(2, 1fr);\n}\n.grid_wrapper_3_img {\n  grid-template-columns: repeat(2, 1fr);\n}\n.grid_wrapper_4_img {\n  grid-template-columns: repeat(3, 1fr);\n}\n.grid_wrapper_5_img {\n  grid-template-columns: repeat(2, 1fr 1fr);\n}\n\n.img {\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  cursor: pointer;\n}\n\n.show_more_img {\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  opacity: 0.5;\n  position: relative;\n}\n\n.show_more_text {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  font-size: 1.5rem;\n  color: white;\n}\n\n.img_1_1 {\n  grid-column: 1;\n  grid-row: 1;\n}\n\n.img_2_1 {\n  grid-column: 1/2;\n  grid-row: 1;\n}\n.img_2_2 {\n  grid-column: 2;\n  grid-row: 1;\n}\n\n.img_3_1 {\n  grid-column: 1 / 3;\n  grid-row: 1 / 3;\n}\n\n.img_3_2 {\n  grid-row: 3;\n  grid-column: 1 / 2;\n}\n.img_3_3 {\n  grid-row: 3;\n  grid-column: 2 / 3;\n}\n\n.img_4_1 {\n  grid-column: 1 / 4;\n  grid-row: 1 / 3;\n}\n\n.img_4_2 {\n  grid-row: 3;\n  grid-column: 1 / 2;\n}\n.img_4_3 {\n  grid-row: 3;\n  grid-column: 2 / 3;\n}\n.img_4_4 {\n  grid-row: 3;\n  grid-column: 3;\n}\n\n.img_5_1 {\n  grid-column: 1 / 3;\n  grid-row: 1/3;\n}\n\n.img_5_2 {\n  grid-row: 1;\n  grid-column: 3/5;\n}\n\n.img_5_3 {\n  grid-row: 3;\n  grid-column: 1 / 2;\n}\n.img_5_4 {\n  grid-row: 3;\n  grid-column: 2/3;\n}\n.img_5_5 {\n  grid-row: 3;\n  grid-column: 3/5;\n}\n\n/* sub-grid-second-row */\n\n.sub_grid_wrapper_3_img {\n  grid-template-columns: repeat(3, 1fr);\n}\n\n.sub_img_3_1 {\n  grid-column: 1 / 2;\n  grid-row: 2;\n}\n\n.sub_img_3_2 {\n  grid-column: 2 / 3;\n  grid-row: 2;\n}\n.sub_img_3_3 {\n  grid-column: 3;\n  grid-row: 2;\n}\n"),exports.ImageGrid=function(n){var t=n.showModal,l=void 0===t||t,s=n.className,m=void 0===s?"":s,c=n.smart,d=void 0!==c&&c,g=e.useState(n.children),u=g[0],p=g[1],_=Array.isArray(u)?u.length:1,f=r.useState(0),h=f[0],w=f[1],v=r.useState(!1),y=v[0],E=v[1],C=function(n){return E(!0),n},b=function(){w(0),E(!1)},k=e.useState([]),N=k[0],L=k[1];if(e.useEffect((function(){N.length===_&&d&&p(N.filter((function(n){return n.element})).sort((function(n,e){return Math.abs(n.dimensions.right-n.dimensions.left)-Math.abs(e.dimensions.right-e.dimensions.left)})).map((function(n){return n.element})))}),[N]),_<5)return r.createElement(r.Fragment,null,d&&r.Children.map(u,(function(n){return r.cloneElement(n,{ref:function(e){N.length>=_||e&&L((function(r){return[].concat(r,[{element:n,dimensions:(null==e?void 0:e.getBoundingClientRect())||{}}])}))},style:{visibility:"hidden",position:"absolute"}})})),"boolean"==typeof l&&l&&r.createElement(a,{key:String(y),isOpen:y,images:1===_?[u]:u,initialImageIndex:h,onClose:b}),r.createElement("div",{className:o("grid_wrapper","grid_wrapper_"+_+"_img",m)},r.Children.map(u,(function(n,e){var t;return r.cloneElement(n,i({},n.props,{className:" img img_"+_+"_"+(e+1)+" "+((null==(t=n.props)?void 0:t.className)||""),onClick:function(){null==n.props.onClick||n.props.onClick(),w(C(e))}}))}))));var x=u.filter((function(n,e){return e<2})),S=x.length,A=u.filter((function(n,e){return e>=2&&e<=4})),M=A.length;return r.createElement(r.Fragment,null,d&&r.Children.map(u,(function(n){return r.cloneElement(n,{ref:function(e){N.length>=_||e&&L((function(r){return[].concat(r,[{element:n,dimensions:(null==e?void 0:e.getBoundingClientRect())||{}}])}))},style:{visibility:"hidden",position:"absolute"}})})),"boolean"==typeof l&&l&&r.createElement(a,{key:String(y),isOpen:y,initialImageIndex:h,images:1===_?[u]:u,onClose:b}),r.createElement("div",{className:o("sub_grid_wrapper",m)},r.createElement("div",{className:o("sub_grid_wrapper_first_row","grid_wrapper_"+x.length+"_img")},r.Children.map(x,(function(n,e){var t;return r.cloneElement(n,i({},n.props,{className:" img img_"+S+"_"+(e+1)+" "+((null==(t=n.props)?void 0:t.className)||""),onClick:function(){null==n.props.onClick||n.props.onClick(),w(C(e))}}))}))),r.createElement("div",{className:o("sub_grid_wrapper_second_row","sub_grid_wrapper_"+A.length+"_img")},r.Children.map(A,(function(n,e){var t,l,a,s=e+1;return _>5&&3===s?r.createElement("div",{className:o("img","sub_img_"+M+"_"+s,(null==(l=n.props)?void 0:l.className)||"","show_more_img"),onClick:function(){return w(C(0))}},r.cloneElement(n,i({},n.props,{className:" img sub_img_"+M+"_"+s+" "+((null==(a=n.props)?void 0:a.className)||""),onClick:function(){null==n.props.onClick||n.props.onClick(),w(C(e+2))}})),r.createElement("div",{className:"show_more_text"}," ","+ ",_-5," ")):r.cloneElement(n,i({},n.props,{className:" img sub_img_"+M+"_"+s+" "+((null==(t=n.props)?void 0:t.className)||""),onClick:function(){null==n.props.onClick||n.props.onClick(),w(C(e+2))}}))})))))};
//# sourceMappingURL=react-fb-image-video-grid.cjs.production.min.js.map