App.tsx 1.7 KB
Newer Older
1 2
import { useViewStack } from '@ibiz-template/mob-vue3-components';
import { routerCallback } from '@ibiz-template/vue3-util';
3 4 5 6 7 8
import { Modal, ViewMode } from '@ibiz-template/runtime';
import { defineComponent, onUnmounted, ref } from 'vue';
import './App.scss';

export default defineComponent({
  setup() {
9
    const { viewStack, on, off } = useViewStack();
10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
    const transitionName = ref('forward');
    const onViewStackChange = (type: 'push' | 'pop') => {
      transitionName.value = type === 'push' ? 'forward' : 'back';
    };

    on('onBeforeStackChange', onViewStackChange);

    onUnmounted(() => {
      off('onBeforeStackChange', onViewStackChange);
    });

    const viewModals = new Map<string, Modal>();

    const getViewModal = (key: string) => {
      if (!viewModals.has(key)) {
        viewModals.set(
          key,
          new Modal({
            mode: ViewMode.ROUTE,
            viewUsage: 1,
            routeDepth: 1,
31 32
            dismiss: modal => {
              routerCallback.close(key, modal);
33
              ibiz.platform.back();
34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
              viewModals.delete(key);
            },
          }),
        );
      }
      return viewModals.get(key);
    };

    return {
      viewStack,
      getViewModal,
      transitionName,
    };
  },
  render() {
    return (
      <iBizRouterView
        manualKey={this.viewStack.currentKey}
        modal={this.getViewModal(this.viewStack.currentKey)}
      >
        {({ Component }: { Component: string }) => {
          return (
            <iBizKeepAlive keyList={this.viewStack.cacheKeys}>
              {Component && <Component />}
            </iBizKeepAlive>
          );
        }}
      </iBizRouterView>
    );
  },
});