@expofp/floorplan
Version:
Interactive floor plan library for expos and events
2 lines (1 loc) • 1.66 kB
JavaScript
import{jsx as e,jsxs as w}from"react/jsx-runtime";import"./GalleryModal.scss";import z from"classnames";import{observer as y}from"mobx-react-lite";import{useRef as n,useState as d}from"react";import{createPortal as R}from"react-dom";import{TransformWrapper as _}from"react-zoom-pan-pinch-sr";import{Navigation as j}from"swiper";import{Swiper as T,SwiperSlide as O}from"swiper/react";import{t as p}from"../../../utils/i18n";import{useRenderTarget as P}from"../../../utils/useRenderTarget";import E from"../GalleryControls/GalleryControls";import G from"../TransformImg/TransformImg";const U=f=>{const{images:l,leading:u,initialSlideIndex:t,onClose:g,className:x}=f,i=P(),[s,h]=d(t),[o,S]=d([]),a=n(null),m=n(null),c=n(null),v={initialSlide:t,draggable:!1,modules:[j],spaceBetween:50,slidesPerView:1,navigation:{prevEl:m.current,nextEl:c.current},grabCursor:!0},C=e("div",{className:z("gallery-modal",x),children:w(T,{onSwiper:r=>a.current=r,className:"gallery-slider",onSlideChange:r=>{h(r.activeIndex),o[r.previousIndex]?.resetTransform()},...v,children:[o.length?e(E,{onClose:g,zoomIn:o[s].zoomIn,zoomOut:o[s].zoomOut}):null,l.length>1&&e("button",{ref:c,title:p("Next slide"),"aria-label":"\u02C3",className:"gallery-slider__btn next",children:e("i",{className:"icon-chevron-right"})}),l.length>1&&e("button",{ref:m,title:p("Prev slide"),"aria-label":"\u02C2",className:"gallery-slider__btn prev",children:e("i",{className:"icon-chevron-left"})}),l.map((r,N)=>e(O,{children:e(_,{initialScale:1,alignmentAnimation:{sizeX:0,sizeY:0},onInit:b=>{S(I=>[...I,b])},children:e(G,{leading:u,swiperRef:a,url:r})})},r+N))]})});return i?R(C,i):null};export default y(U);