Merge pull request #896 from thundersdata-frontend/rn-issue

feat: 为Modal增加show方法

Author: chj-damon

.changeset/giant-tables-hunt.md

@@ -0,0 +1,5 @@
+---
+'@td-design/react-native': patch
+---
+
+feat: 为Modal增加show方法，实现指令式打开弹窗的功能

packages/react-native/src/modal/index.tsx

@@ -2,6 +2,7 @@ import alert from './alert';
 import confirm from './confirm';
 import Modal from './Modal';
 import prompt from './prompt';
+import show from './show';
 import tip from './tip';
 
-export default Object.assign(Modal, { alert, confirm, prompt, tip });
+export default Object.assign(Modal, { alert, confirm, prompt, tip, show });

packages/react-native/src/modal/show/index.tsx

@@ -0,0 +1,43 @@
+import React, { PropsWithChildren } from 'react';
+
+import { useSafeState } from '@td-design/rn-hooks';
+
+import Portal from '../../portal';
+import ModalView from '../Modal/ModalView';
+import { ModalProps } from '../type';
+
+export default function show(
+  comp: React.ReactElement,
+  props?: Omit<ModalProps, 'onAnimationEnd' | 'visible' | 'onClose'>
+) {
+  const key = Portal.add(
+    <ModalContent
+      {...props}
+      onAnimationEnd={visible => {
+        if (!visible) {
+          Portal.remove(key);
+        }
+      }}
+    >
+      {comp}
+    </ModalContent>
+  );
+}
+
+const ModalContent = ({ children, ...props }: PropsWithChildren<Omit<ModalProps, 'visible' | 'onClose'>>) => {
+  const [visible, setVisible] = useSafeState(true);
+
+  return (
+    <ModalView
+      position="center"
+      maskVisible
+      maskClosable
+      animationType="slide"
+      {...props}
+      visible={visible}
+      onClose={() => setVisible(false)}
+    >
+      {children}
+    </ModalView>
+  );
+};