zmp-vue/cjs/components/view.js

Build full featured iOS & Android apps using ZMP & Vue

"use strict";

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

var _vue = require("vue");

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

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

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

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

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var _default = {
  name: 'zmp-view',
  props: _extends({
    tab: Boolean,
    tabActive: Boolean,
    name: String,
    router: {
      type: Boolean,
      default: true
    },
    linksView: [Object, String],
    url: String,
    main: {
      type: Boolean,
      default: undefined
    },
    stackPages: {
      type: Boolean,
      default: undefined
    },
    xhrCache: {
      type: Boolean,
      default: undefined
    },
    xhrCacheIgnore: Array,
    xhrCacheIgnoreGetParameters: {
      type: Boolean,
      default: undefined
    },
    xhrCacheDuration: Number,
    preloadPreviousPage: {
      type: Boolean,
      default: undefined
    },
    allowDuplicateUrls: {
      type: Boolean,
      default: undefined
    },
    reloadPages: {
      type: Boolean,
      default: undefined
    },
    reloadDetail: {
      type: Boolean,
      default: undefined
    },
    masterDetailResizable: {
      type: Boolean,
      default: undefined
    },
    masterDetailBreakpoint: Number,
    removeElements: {
      type: Boolean,
      default: undefined
    },
    removeElementsWithTimeout: {
      type: Boolean,
      default: undefined
    },
    removeElementsTimeout: Number,
    restoreScrollTopOnBack: {
      type: Boolean,
      default: undefined
    },
    loadInitialPage: {
      type: Boolean,
      default: undefined
    },
    // Swipe Back
    iosSwipeBack: {
      type: Boolean,
      default: undefined
    },
    iosSwipeBackAnimateShadow: {
      type: Boolean,
      default: undefined
    },
    iosSwipeBackAnimateOpacity: {
      type: Boolean,
      default: undefined
    },
    iosSwipeBackActiveArea: Number,
    iosSwipeBackThreshold: Number,
    mdSwipeBack: {
      type: Boolean,
      default: undefined
    },
    mdSwipeBackAnimateShadow: {
      type: Boolean,
      default: undefined
    },
    mdSwipeBackAnimateOpacity: {
      type: Boolean,
      default: undefined
    },
    mdSwipeBackActiveArea: Number,
    mdSwipeBackThreshold: Number,
    auroraSwipeBack: {
      type: Boolean,
      default: undefined
    },
    auroraSwipeBackAnimateShadow: {
      type: Boolean,
      default: undefined
    },
    auroraSwipeBackAnimateOpacity: {
      type: Boolean,
      default: undefined
    },
    auroraSwipeBackActiveArea: Number,
    auroraSwipeBackThreshold: Number,
    // Push State
    browserHistory: {
      type: Boolean,
      default: undefined
    },
    browserHistoryRoot: String,
    browserHistoryAnimate: {
      type: Boolean,
      default: undefined
    },
    browserHistoryAnimateOnLoad: {
      type: Boolean,
      default: undefined
    },
    browserHistorySeparator: String,
    browserHistoryOnLoad: {
      type: Boolean,
      default: undefined
    },
    browserHistoryInitialMatch: {
      type: Boolean,
      default: true
    },
    browserHistoryStoreHistory: {
      type: Boolean,
      default: undefined
    },
    // Animate Pages
    animate: {
      type: Boolean,
      default: undefined
    },
    transition: String,
    // iOS Dynamic Navbar
    iosDynamicNavbar: {
      type: Boolean,
      default: undefined
    },
    // Animate iOS Navbar Back Icon
    iosAnimateNavbarBackIcon: {
      type: Boolean,
      default: undefined
    },
    // MD Theme delay
    materialPageLoadDelay: Number,
    passRouteQueryToRequest: {
      type: Boolean,
      default: undefined
    },
    passRouteParamsToRequest: {
      type: Boolean,
      default: undefined
    },
    routes: Array,
    routesAdd: Array,
    // Routes hooks
    routesBeforeEnter: [Function, Array],
    routesBeforeLeave: [Function, Array],
    init: {
      type: Boolean,
      default: true
    }
  }, _mixins.colorProps),
  emits: ['view:init', 'view:resize', 'swipeback:move', 'swipeback:beforechange', 'swipeback:afterchange', 'swipeback:beforereset', 'swipeback:afterreset', 'tab:hide', 'tab:show'],
  setup: function setup(props, _ref) {
    var emit = _ref.emit,
        slots = _ref.slots;
    // const childrenArray = React.Children.toArray(children);
    // const initialPageComponent = childrenArray.filter((c) => c.props && c.props.initialPage)[0];
    // const restChildren = childrenArray.filter((c) => !c.props || !c.props.initialPage);
    var initialPageComponent = null;
    var zmpView = null;
    var elRef = (0, _vue.ref)(null);
    var routerData = null;
    var initialPage;
    var initialRoute;

    var onViewInit = function onViewInit(view) {
      emit('view:init', view);

      if (!props.init) {
        routerData.instance = view;
        zmpView = routerData.instance;
      }
    };

    var getViewParams = function getViewParams() {
      var routes = (0, _vue.toRaw)(props.routes || []);
      var routesAdd = (0, _vue.toRaw)(props.routesAdd || []);
      return (0, _utils.noUndefinedProps)(_extends({}, props, {
        routes: routes,
        routesAdd: routesAdd
      }));
    };

    if (_zmp.zmp && !zmpView && props.init) {
      var routerId = (0, _utils.getRouterId)();
      zmpView = _zmp.zmp.views.create(elRef.value, _extends({}, getViewParams(), {
        routerId: routerId,
        init: false,
        on: {
          init: onViewInit
        }
      }));
      routerData = {
        routerId: routerId,
        instance: zmpView
      };

      _zmp.zmprouters.views.push(routerData);

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

    var pages = (0, _vue.ref)(initialPage ? [initialPage] : []);

    var _setPages = function setPages(newPages) {
      newPages.forEach(function (page) {
        // eslint-disable-next-line
        page.component = (0, _vue.toRaw)(page.component);
      });
      pages.value = newPages;
    };

    var onResize = function onResize(view, width) {
      emit('view:resize', width);
    };

    var onSwipeBackMove = function onSwipeBackMove(data) {
      var swipeBackData = data;
      emit('swipeback:move', swipeBackData);
    };

    var onSwipeBackBeforeChange = function onSwipeBackBeforeChange(data) {
      var swipeBackData = data;
      emit('swipeback:beforechange', swipeBackData);
    };

    var onSwipeBackAfterChange = function onSwipeBackAfterChange(data) {
      var swipeBackData = data;
      emit('swipeback:afterchange', swipeBackData);
    };

    var onSwipeBackBeforeReset = function onSwipeBackBeforeReset(data) {
      var swipeBackData = data;
      emit('swipeback:beforereset', swipeBackData);
    };

    var onSwipeBackAfterReset = function onSwipeBackAfterReset(data) {
      var swipeBackData = data;
      emit('swipeback:afterreset', swipeBackData);
    };

    (0, _vue.onMounted)(function () {
      (0, _zmp.zmpready)(function () {
        if (zmpView) {
          routerData.el = elRef.value;
          routerData.pages = pages.value;

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

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

                if (initialPage) {
                  initialPage.el = zmpView.router.currentPageEl;

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

            if (initialPage) {
              initialPage.el = zmpView.router.currentPageEl;

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

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

          _zmp.zmprouters.views.push(routerData);

          routerData.instance = _zmp.zmp.views.create(elRef.value, _extends({
            routerId: _routerId
          }, getViewParams(), {
            on: {
              init: onViewInit
            }
          }));
          zmpView = routerData.instance;
        }

        if (!props.init) return;
        zmpView.on('resize', onResize);
        zmpView.on('swipebackMove', onSwipeBackMove);
        zmpView.on('swipebackBeforeChange', onSwipeBackBeforeChange);
        zmpView.on('swipebackAfterChange', onSwipeBackAfterChange);
        zmpView.on('swipebackBeforeReset', onSwipeBackBeforeReset);
        zmpView.on('swipebackAfterReset', onSwipeBackAfterReset);
      });
    });
    (0, _vue.onBeforeUnmount)(function () {
      if (zmpView) {
        zmpView.off('resize', onResize);
        zmpView.off('swipebackMove', onSwipeBackMove);
        zmpView.off('swipebackBeforeChange', onSwipeBackBeforeChange);
        zmpView.off('swipebackAfterChange', onSwipeBackAfterChange);
        zmpView.off('swipebackBeforeReset', onSwipeBackBeforeReset);
        zmpView.off('swipebackAfterReset', onSwipeBackAfterReset);
        if (zmpView.destroy) zmpView.destroy();
        zmpView = null;
      }

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

      routerData = null;
    });
    (0, _vue.onUpdated)(function () {
      if (!routerData || !_zmp.zmp) return;

      _zmp.zmpevents.emit('viewRouterDidUpdate', routerData);
    });
    (0, _useTab.useTab)(elRef, emit);
    var classes = (0, _vue.computed)(function () {
      return (0, _utils.classNames)('view', {
        'view-main': props.main,
        'tab-active': props.tabActive,
        tab: props.tab
      }, (0, _mixins.colorClasses)(props));
    });

    var getComponent = function getComponent(page) {
      return (0, _vue.toRaw)(page.component);
    };

    var getProps = function getProps(page) {
      var pageComponent = page.component,
          pageProps = page.props;
      var keys = [];
      var passProps = {};
      if (pageComponent && pageComponent.props) keys = Object.keys(pageComponent.props);
      keys.forEach(function (key) {
        if (key in pageProps) passProps[key] = pageProps[key];
      });
      return passProps;
    };

    return function () {
      return (0, _vue.h)('div', {
        ref: elRef,
        class: classes.value
      }, [slots.default && slots.default()].concat(pages.value.map(function (page) {
        return (0, _vue.h)(getComponent(page), _extends({
          key: page.id
        }, getProps(page)));
      })));
    };
  }
};
exports.default = _default;