Skip to content

Commit

Permalink
fix(useModal): fix circular dependency
Browse files Browse the repository at this point in the history
  • Loading branch information
buqiyuan committed Mar 7, 2022
1 parent 975eff2 commit 3fc4ae8
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 47 deletions.
51 changes: 5 additions & 46 deletions src/hooks/useModal/index.ts
Original file line number Diff line number Diff line change
@@ -1,52 +1,11 @@
import { createVNode, render, getCurrentInstance, nextTick } from 'vue';
import { MyModal } from './modal';
import type { App, ComponentInternalInstance } from 'vue';
import type { HookModalProps } from './types';
export { useFormModal } from './useFormModal';

let _app: App;

export const useModal = () => {
let _modalInstance: ComponentInternalInstance;
const appContext = _app._context || getCurrentInstance()?.appContext;

const getModalInstance = () => {
if (_modalInstance) {
return _modalInstance;
}
const container = document.createElement('div');
const vnode = createVNode(MyModal);
vnode.appContext = appContext;
render(vnode, container);
_modalInstance = vnode.component!;
_modalInstance.props._closeModal = hide;
return _modalInstance;
};

const hide = () => {
Object.assign<any, HookModalProps>(_modalInstance?.props, { visible: false });
};
import { installUseModal } from './useModal';
import type { App } from 'vue';

const show = async (props: HookModalProps) => {
const modalInstance = getModalInstance();

Object.assign<any, HookModalProps>(modalInstance?.props, {
...props,
visible: true,
});
await nextTick();
};

return {
show,
hide,
};
};

export type ModalInstance = ReturnType<typeof useModal>;
export { useModal, type ModalInstance } from './useModal';
export { useFormModal } from './useFormModal';

export const install = (app: App) => {
_app = app;
installUseModal(app);
};

export default install;
2 changes: 1 addition & 1 deletion src/hooks/useModal/useFormModal.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { nextTick, ref } from 'vue';
import { useModal } from './index';
import { useModal } from './useModal';
import type { SchemaFormRef, FormSchema } from '@/components/core/schema-form';
import type { FormModalProps } from './types';
import { SchemaForm } from '@/components/core/schema-form';
Expand Down
49 changes: 49 additions & 0 deletions src/hooks/useModal/useModal.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import { createVNode, render, getCurrentInstance, nextTick } from 'vue';
import { MyModal } from './modal';
import type { App, ComponentInternalInstance } from 'vue';
import type { HookModalProps } from './types';

let _app: App;

export const useModal = () => {
let _modalInstance: ComponentInternalInstance;
const appContext = _app?._context || getCurrentInstance()?.appContext;

const getModalInstance = () => {
if (_modalInstance) {
return _modalInstance;
}
const container = document.createElement('div');
const vnode = createVNode(MyModal);
vnode.appContext = appContext;
render(vnode, container);
_modalInstance = vnode.component!;
_modalInstance.props._closeModal = hide;
return _modalInstance;
};

const hide = () => {
Object.assign<any, HookModalProps>(_modalInstance?.props, { visible: false });
};

const show = async (props: HookModalProps) => {
const modalInstance = getModalInstance();

Object.assign<any, HookModalProps>(modalInstance?.props, {
...props,
visible: true,
});
await nextTick();
};

return {
show,
hide,
};
};

export type ModalInstance = ReturnType<typeof useModal>;

export const installUseModal = (app: App) => {
_app = app;
};

0 comments on commit 3fc4ae8

Please sign in to comment.