zmp-react/cjs/components/view.js

Build full featured iOS & Android apps using ZMP & React

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _react = _interopRequireWildcard(require("react"));

var _useIsomorphicLayoutEffect = require("../shared/use-isomorphic-layout-effect");

var _utils = require("../shared/utils");

var _mixins = require("../shared/mixins");

var _zmp = require("../shared/zmp");

var _useTab = require("../shared/use-tab");

var _useAsyncComponent = require("../shared/use-async-component");

var _getRouterInitialComponent = require("../shared/get-router-initial-component");

var _routerContext = require("../shared/router-context");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

/* eslint-disable no-nested-ternary */


var View = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
  var className = props.className,
      id = props.id,
      style = props.style,
      children = props.children,
      _props$init = props.init,
      init = _props$init === void 0 ? true : _props$init,
      main = props.main,
      tab = props.tab,
      tabActive = props.tabActive,
      url = props.url,
      _props$browserHistory = props.browserHistoryInitialMatch,
      browserHistoryInitialMatch = _props$browserHistory === void 0 ? true : _props$browserHistory,
      initRouterOnTabShow = props.initRouterOnTabShow;

  var childrenArray = _react.default.Children.toArray(children);

  var initialPageComponent = childrenArray.filter(function (c) {
    return c.props && c.props.initialPage;
  })[0];
  var restChildren = childrenArray.filter(function (c) {
    return !c.props || !c.props.initialPage;
  });

  var shouldInitRouter = _react.default.useMemo(function () {
    return !(initRouterOnTabShow && tab && !tabActive);
  }, []);

  var extraAttrs = (0, _utils.getExtraAttrs)(props);

  var _zmpView = (0, _react.useRef)(null);

  var elRef = (0, _react.useRef)(null);
  var routerData = (0, _react.useRef)(null);
  var initialPage;
  var initialRoute;

  var onViewInit = function onViewInit(view) {
    (0, _utils.emit)(props, 'viewInit', view);

    if (!init) {
      routerData.current.instance = view;
      _zmpView.current = routerData.current.instance;
    }
  };

  if (_zmp.zmp && !_zmpView.current && init) {
    var routerId = (0, _utils.getRouterId)();
    _zmpView.current = _zmp.zmp.views.create(elRef.current, (0, _extends2.default)({
      routerId: routerId,
      init: false
    }, (0, _utils.noUndefinedProps)(props), {
      browserHistoryInitialMatch: browserHistoryInitialMatch,
      on: {
        init: onViewInit
      }
    }));
    routerData.current = {
      routerId: routerId,
      instance: _zmpView.current
    };

    _zmp.zmprouters.views.push(routerData.current);

    if (shouldInitRouter && _zmpView.current && _zmpView.current.router && (url || main)) {
      var initialData = (0, _getRouterInitialComponent.getRouterInitialComponent)(_zmpView.current.router, initialPageComponent);
      initialPage = initialData.initialPage;
      initialRoute = initialData.initialRoute;
    }
  }

  var _useState = (0, _react.useState)(initialPage ? [initialPage] : []),
      pages = _useState[0],
      _setPages = _useState[1];

  var onResize = function onResize(view, width) {
    (0, _utils.emit)(props, 'viewResize', width);
  };

  var onSwipeBackMove = function onSwipeBackMove(data) {
    var swipeBackData = data;
    (0, _utils.emit)(props, 'swipeBackMove', swipeBackData);
  };

  var onSwipeBackBeforeChange = function onSwipeBackBeforeChange(data) {
    var swipeBackData = data;
    (0, _utils.emit)(props, 'swipeBackBeforeChange', swipeBackData);
  };

  var onSwipeBackAfterChange = function onSwipeBackAfterChange(data) {
    var swipeBackData = data;
    (0, _utils.emit)(props, 'swipeBackAfterChange', swipeBackData);
  };

  var onSwipeBackBeforeReset = function onSwipeBackBeforeReset(data) {
    var swipeBackData = data;
    (0, _utils.emit)(props, 'swipeBackBeforeReset', swipeBackData);
  };

  var onSwipeBackAfterReset = function onSwipeBackAfterReset(data) {
    var swipeBackData = data;
    (0, _utils.emit)(props, 'swipeBackAfterReset', swipeBackData);
  };

  (0, _react.useImperativeHandle)(ref, function () {
    return {
      el: elRef.current,
      zmpView: function zmpView() {
        return _zmpView.current;
      }
    };
  });

  var onMount = function onMount() {
    (0, _zmp.zmpready)(function () {
      if (_zmpView.current) {
        routerData.current.el = elRef.current;
        routerData.current.pages = pages;

        routerData.current.setPages = function (newPages) {
          _setPages([].concat(newPages));
        };

        if (initialPage && initialPage.isAsync && !initialPage.initialComponent) {
          initialPage.component().then(function () {
            setTimeout(function () {
              _zmpView.current.init(elRef.current);

              if (initialPage) {
                initialPage.el = _zmpView.current.router.currentPageEl;

                if (initialRoute && initialRoute.route && initialRoute.route.keepAlive) {
                  initialRoute.route.keepAliveData = {
                    pageEl: initialPage.el
                  };
                }
              }
            }, 100);
          });
        } else {
          _zmpView.current.init(elRef.current);

          if (initialPage) {
            initialPage.el = _zmpView.current.router.currentPageEl;

            if (initialRoute && initialRoute.route && initialRoute.route.keepAlive) {
              initialRoute.route.keepAliveData = {
                pageEl: initialPage.el
              };
            }
          }
        }
      } else {
        var _routerId = (0, _utils.getRouterId)();

        routerData.current = {
          el: elRef.current,
          routerId: _routerId,
          pages: pages,
          instance: _zmpView.current,
          setPages: function setPages(newPages) {
            _setPages([].concat(newPages));
          }
        };

        _zmp.zmprouters.views.push(routerData.current);

        routerData.current.instance = _zmp.zmp.views.create(elRef.current, (0, _extends2.default)({
          routerId: _routerId
        }, (0, _utils.noUndefinedProps)(props), {
          browserHistoryInitialMatch: browserHistoryInitialMatch,
          on: {
            init: onViewInit
          }
        }));
        _zmpView.current = routerData.current.instance;
      }

      if (!init) return;

      _zmpView.current.on('resize', onResize);

      _zmpView.current.on('swipebackMove', onSwipeBackMove);

      _zmpView.current.on('swipebackBeforeChange', onSwipeBackBeforeChange);

      _zmpView.current.on('swipebackAfterChange', onSwipeBackAfterChange);

      _zmpView.current.on('swipebackBeforeReset', onSwipeBackBeforeReset);

      _zmpView.current.on('swipebackAfterReset', onSwipeBackAfterReset);
    });
  };

  var onDestroy = function onDestroy() {
    if (_zmpView.current) {
      _zmpView.current.off('resize', onResize);

      _zmpView.current.off('swipebackMove', onSwipeBackMove);

      _zmpView.current.off('swipebackBeforeChange', onSwipeBackBeforeChange);

      _zmpView.current.off('swipebackAfterChange', onSwipeBackAfterChange);

      _zmpView.current.off('swipebackBeforeReset', onSwipeBackBeforeReset);

      _zmpView.current.off('swipebackAfterReset', onSwipeBackAfterReset);

      if (_zmpView.current.destroy) _zmpView.current.destroy();
      _zmpView.current = null;
    }

    _zmp.zmprouters.views.splice(_zmp.zmprouters.views.indexOf(routerData.current), 1);

    routerData.current = null;
  };

  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
    onMount();
    return onDestroy;
  }, []);
  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
    if (routerData.current && _zmp.zmp) {
      _zmp.zmpevents.emit('viewRouterDidUpdate', routerData.current);
    }
  });
  (0, _useTab.useTab)(elRef, props);
  var classes = (0, _utils.classNames)(className, 'view', {
    'view-main': main,
    'tab-active': tabActive,
    tab: tab
  }, (0, _mixins.colorClasses)(props));
  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
    id: id,
    style: style,
    className: classes,
    ref: elRef
  }, extraAttrs), restChildren, pages.map(function (_ref) {
    var PageComponent = _ref.component,
        pageId = _ref.id,
        pageProps = _ref.props,
        isAsync = _ref.isAsync,
        initialComponent = _ref.initialComponent;
    return /*#__PURE__*/_react.default.createElement(_routerContext.RouterContext.Provider, {
      key: pageId,
      value: {
        router: pageProps.zmprouter,
        route: pageProps.zmproute
      }
    }, initialComponent ? /*#__PURE__*/_react.default.cloneElement(initialComponent, (0, _extends2.default)({}, pageProps)) : isAsync ? (0, _useAsyncComponent.useAsyncComponent)(PageComponent, pageProps) : /*#__PURE__*/_react.default.createElement(PageComponent, pageProps));
  }));
});
View.displayName = 'zmp-view';
var _default = View;
exports.default = _default;