zmp-react/esm/components/photo-browser.js

Build full featured iOS & Android apps using ZMP & React

import { forwardRef, useRef, useImperativeHandle } from 'react';
import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
import { extend, emit } from '../shared/utils';
import { watchProp } from '../shared/watch-prop';
import { zmpready, zmp } from '../shared/zmp';

var PhotoBrowser = /*#__PURE__*/forwardRef(function (props, ref) {
  var _zmpPhotoBrowser = useRef(null);

  var _props$init = props.init,
      init = _props$init === void 0 ? true : _props$init,
      params = props.params,
      photos = props.photos,
      _props$exposition = props.exposition,
      exposition = _props$exposition === void 0 ? true : _props$exposition,
      _props$expositionHide = props.expositionHideCaptions,
      expositionHideCaptions = _props$expositionHide === void 0 ? false : _props$expositionHide,
      type = props.type,
      _props$navbar = props.navbar,
      navbar = _props$navbar === void 0 ? true : _props$navbar,
      _props$toolbar = props.toolbar,
      toolbar = _props$toolbar === void 0 ? true : _props$toolbar,
      theme = props.theme,
      captionsTheme = props.captionsTheme,
      iconsColor = props.iconsColor,
      _props$swipeToClose = props.swipeToClose,
      swipeToClose = _props$swipeToClose === void 0 ? true : _props$swipeToClose,
      pageBackLinkText = props.pageBackLinkText,
      popupCloseLinkText = props.popupCloseLinkText,
      navbarOfText = props.navbarOfText,
      navbarShowCount = props.navbarShowCount,
      swiper = props.swiper,
      url = props.url,
      _props$routableModals = props.routableModals,
      routableModals = _props$routableModals === void 0 ? false : _props$routableModals,
      _props$virtualSlides = props.virtualSlides,
      virtualSlides = _props$virtualSlides === void 0 ? true : _props$virtualSlides,
      view = props.view,
      renderNavbar = props.renderNavbar,
      renderToolbar = props.renderToolbar,
      renderCaption = props.renderCaption,
      renderObject = props.renderObject,
      renderLazyPhoto = props.renderLazyPhoto,
      renderPhoto = props.renderPhoto,
      renderPage = props.renderPage,
      renderPopup = props.renderPopup,
      renderStandalone = props.renderStandalone;

  var open = function open(index) {
    return _zmpPhotoBrowser.current.open(index);
  };

  var close = function close() {
    return _zmpPhotoBrowser.current.close();
  };

  var expositionToggle = function expositionToggle() {
    return _zmpPhotoBrowser.current.expositionToggle();
  };

  var expositionEnable = function expositionEnable() {
    return _zmpPhotoBrowser.current.expositionEnable();
  };

  var expositionDisable = function expositionDisable() {
    return _zmpPhotoBrowser.current.expositionDisable();
  };

  useImperativeHandle(ref, function () {
    return {
      zmpPhotoBrowser: function zmpPhotoBrowser() {
        return _zmpPhotoBrowser.current;
      },
      open: open,
      close: close,
      expositionToggle: expositionToggle,
      expositionEnable: expositionEnable,
      expositionDisable: expositionDisable
    };
  });
  watchProp(photos, function (newValue) {
    var pb = _zmpPhotoBrowser.current;
    if (!pb) return;
    pb.params.photos = newValue;

    if (pb.opened && pb.swiper) {
      pb.swiper.update();
    }
  });

  var onMount = function onMount() {
    if (!init) return;
    zmpready(function () {
      var paramsComputed;

      if (typeof params !== 'undefined') {
        paramsComputed = params;
      } else {
        paramsComputed = {
          photos: photos,
          exposition: exposition,
          expositionHideCaptions: expositionHideCaptions,
          type: type,
          navbar: navbar,
          toolbar: toolbar,
          theme: theme,
          captionsTheme: captionsTheme,
          iconsColor: iconsColor,
          swipeToClose: swipeToClose,
          pageBackLinkText: pageBackLinkText,
          popupCloseLinkText: popupCloseLinkText,
          navbarOfText: navbarOfText,
          navbarShowCount: navbarShowCount,
          swiper: swiper,
          url: url,
          routableModals: routableModals,
          virtualSlides: virtualSlides,
          view: view,
          renderNavbar: renderNavbar,
          renderToolbar: renderToolbar,
          renderCaption: renderCaption,
          renderObject: renderObject,
          renderLazyPhoto: renderLazyPhoto,
          renderPhoto: renderPhoto,
          renderPage: renderPage,
          renderPopup: renderPopup,
          renderStandalone: renderStandalone
        };
      }

      Object.keys(paramsComputed).forEach(function (param) {
        if (typeof paramsComputed[param] === 'undefined' || paramsComputed[param] === '') delete paramsComputed[param];
      });
      paramsComputed = extend({}, paramsComputed, {
        on: {
          open: function open() {
            emit(props, 'photoBrowserOpen');
          },
          close: function close() {
            emit(props, 'photoBrowserClose');
          },
          opened: function opened() {
            emit(props, 'photoBrowserOpened');
          },
          closed: function closed() {
            emit(props, 'photoBrowserClosed');
          },
          swipeToClose: function swipeToClose() {
            emit(props, 'photoBrowserSwipeToClose');
          }
        }
      });
      _zmpPhotoBrowser.current = zmp.photoBrowser.create(paramsComputed);
    });
  };

  var onDestroy = function onDestroy() {
    if (_zmpPhotoBrowser.current && _zmpPhotoBrowser.current.destroy) _zmpPhotoBrowser.current.destroy();
    _zmpPhotoBrowser.current = null;
  };

  useIsomorphicLayoutEffect(function () {
    onMount();
    return onDestroy;
  }, []);
  return null;
});
PhotoBrowser.displayName = 'zmp-photo-browser';
export default PhotoBrowser;