zmp-react/cjs/shared/components-router.js

Build full featured iOS & Android apps using ZMP & React

"use strict";

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

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

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

/* eslint no-underscore-dangle: "off" */
var getChildrenArray = function getChildrenArray(el) {
  var arr = [];

  for (var i = 0; i < el.children.length; i += 1) {
    arr.push(el.children[i]);
  }

  return arr;
};

var hasSameChildren = function hasSameChildren(childrenBefore, childrenAfter) {
  if (childrenBefore.length !== childrenAfter.length) return false;
  var set = new Set([].concat(childrenBefore, childrenAfter));
  if (set.size === childrenBefore.length) return true;
  return false;
};

var _default = {
  proto: {
    pageComponentLoader: function pageComponentLoader(_ref) {
      var routerEl = _ref.routerEl,
          component = _ref.component,
          options = _ref.options,
          resolve = _ref.resolve,
          reject = _ref.reject;
      var router = this;
      var routerId = router.id;
      var el = routerEl;
      var viewRouter;

      _zmp.zmprouters.views.forEach(function (data) {
        if (data.el && data.el === routerEl || data.routerId && data.routerId === routerId) {
          viewRouter = data;
        }
      });

      if (!viewRouter) {
        reject();
        return;
      }

      var pageData = {
        component: component,
        id: (0, _utils.getComponentId)(),
        props: (0, _utils.extend)({
          zmproute: options.route,
          zmprouter: router
        }, options.route.params, options.props || {})
      };
      var resolved;
      var childrenBefore = getChildrenArray(el);

      function onDidUpdate(componentRouterData) {
        if (componentRouterData !== viewRouter || resolved) return;
        var childrenAfter = getChildrenArray(el);
        if (hasSameChildren(childrenBefore, childrenAfter)) return;

        _zmp.zmpevents.off('viewRouterDidUpdate', onDidUpdate);

        var pageEl = el.children[el.children.length - 1];
        pageData.el = pageEl;
        resolve(pageEl);
        resolved = true;
      }

      _zmp.zmpevents.on('viewRouterDidUpdate', onDidUpdate);

      viewRouter.pages.push(pageData);
      viewRouter.setPages(viewRouter.pages);
    },
    removePage: function removePage($pageEl) {
      if (!$pageEl) return;
      var router = this;
      var zmpPage;
      if ('length' in $pageEl && $pageEl[0]) zmpPage = $pageEl[0].zmpPage;else zmpPage = $pageEl.zmpPage;

      if (zmpPage && zmpPage.route && zmpPage.route.route && zmpPage.route.route.keepAlive) {
        router.app.$($pageEl).remove();
        return;
      }

      var viewRouter;

      _zmp.zmprouters.views.forEach(function (data) {
        if (data.el && data.el === router.el) {
          viewRouter = data;
        }
      });

      var pageEl;

      if ('length' in $pageEl) {
        // zmpDOM
        if ($pageEl.length === 0) return;
        pageEl = $pageEl[0];
      } else {
        pageEl = $pageEl;
      }

      if (!pageEl) return;
      var pageComponentFound;
      viewRouter.pages.forEach(function (page, index) {
        if (page.el === pageEl) {
          pageComponentFound = true;
          viewRouter.pages.splice(index, 1);
          viewRouter.setPages(viewRouter.pages);
        }
      });

      if (!pageComponentFound) {
        pageEl.parentNode.removeChild(pageEl);
      }
    },
    tabComponentLoader: function tabComponentLoader(_temp) {
      var _ref2 = _temp === void 0 ? {} : _temp,
          tabEl = _ref2.tabEl,
          component = _ref2.component,
          options = _ref2.options,
          resolve = _ref2.resolve,
          reject = _ref2.reject;

      var router = this;
      if (!tabEl) reject();
      var tabRouter;

      _zmp.zmprouters.tabs.forEach(function (tabData) {
        if (tabData.el && tabData.el === tabEl) {
          tabRouter = tabData;
        }
      });

      if (!tabRouter) {
        reject();
        return;
      }

      var id = (0, _utils.getComponentId)();
      var tabContent = {
        id: id,
        component: component,
        props: (0, _utils.extend)({
          zmproute: options.route,
          zmprouter: router
        }, options.route.params, options.props || {})
      };
      var resolved;

      function onDidUpdate(componentRouterData) {
        if (componentRouterData !== tabRouter || resolved) return;

        _zmp.zmpevents.off('tabRouterDidUpdate', onDidUpdate);

        var tabContentEl = tabEl.children[0];
        resolve(tabContentEl);
        resolved = true;
      }

      _zmp.zmpevents.on('tabRouterDidUpdate', onDidUpdate);

      tabRouter.setTabContent(tabContent);
    },
    removeTabContent: function removeTabContent(tabEl) {
      if (!tabEl) return;
      var tabRouter;

      _zmp.zmprouters.tabs.forEach(function (tabData) {
        if (tabData.el && tabData.el === tabEl) {
          tabRouter = tabData;
        }
      });

      if (!tabRouter) {
        tabEl.innerHTML = ''; // eslint-disable-line

        return;
      }

      tabRouter.setTabContent(null);
    },
    modalComponentLoader: function modalComponentLoader(_temp2) {
      var _ref3 = _temp2 === void 0 ? {} : _temp2,
          component = _ref3.component,
          options = _ref3.options,
          resolve = _ref3.resolve,
          reject = _ref3.reject;

      var router = this;
      var modalsRouter = _zmp.zmprouters.modals;

      if (!modalsRouter) {
        reject();
        return;
      }

      var modalData = {
        component: component,
        id: (0, _utils.getComponentId)(),
        props: (0, _utils.extend)({
          zmproute: options.route,
          zmprouter: router
        }, options.route.params, options.props || {})
      };
      var resolved;

      function onDidUpdate() {
        if (resolved) return;

        _zmp.zmpevents.off('modalsRouterDidUpdate', onDidUpdate);

        var modalEl = modalsRouter.el.children[modalsRouter.el.children.length - 1];
        modalData.el = modalEl;
        resolve(modalEl);
        resolved = true;
      }

      _zmp.zmpevents.on('modalsRouterDidUpdate', onDidUpdate);

      modalsRouter.modals.push(modalData);
      modalsRouter.setModals(modalsRouter.modals);
    },
    removeModal: function removeModal(modalEl) {
      var modalsRouter = _zmp.zmprouters.modals;
      if (!modalsRouter) return;
      var modalDataToRemove;
      modalsRouter.modals.forEach(function (modalData) {
        if (modalData.el === modalEl) modalDataToRemove = modalData;
      });
      modalsRouter.modals.splice(modalsRouter.modals.indexOf(modalDataToRemove), 1);
      modalsRouter.setModals(modalsRouter.modals);
    }
  }
};
exports.default = _default;