chore: modal

packages/zarm/src/modal/index.ts

@@ -1,11 +1,14 @@
-import Modal from './Modal';
+import attachPropertiesToComponent from '../utils/attachPropertiesToComponent';
 import alert from './Alert';
 import confirm from './Confirm';
-import attachPropertiesToComponent from '../utils/attachPropertiesToComponent';
+import Modal from './Modal';
+import { show, clear } from './methods';
 
-export type { ModalProps, ModalCssVars } from './Modal';
+export type { ModalCssVars, ModalProps } from './Modal';
 
 export default attachPropertiesToComponent(Modal, {
+  show,
+  clear,
   alert,
   confirm,
 });

packages/zarm/src/modal/methods.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { ImperativeHandler, renderImperatively } from '../utils/dom';
+import Modal, { ModalProps } from './Modal';
+
+export type ModalShowProps = Omit<ModalProps, 'visible' | 'destroy' | 'forceRender'>;
+
+export type ModalShowHandler = Pick<ImperativeHandler, 'close'>;
+
+const closeFn = new Set<() => void>();
+
+export const show = (props: ModalShowProps) => {
+  const handler: ModalShowHandler = renderImperatively(
+    <Modal
+      {...props}
+      afterClose={() => {
+        closeFn.delete(handler.close);
+        props.afterClose?.();
+      }}
+    />,
+  );
+  closeFn.add(handler.close);
+  return handler;
+};
+
+export const clear = () => {
+  closeFn.forEach((close) => close());
+};