update code

Author: renjie-run

src/ActionSheet/index.js

@@ -32,12 +32,13 @@ function createActionSheet(flag, config, callback) {
 
   const div = document.createElement('div');
   document.body.appendChild(div);
+  const root = createRoot(div);
 
   queue.push(close);
 
   function close() {
     if (div) {
-      ReactDOM.unmountComponentAtNode(div);
+      root.unmount();
       if (div.parentNode) {
         div.parentNode.removeChild(div);
       }
@@ -207,7 +208,6 @@ function createActionSheet(flag, config, callback) {
   }
 
   const rootCls = classnames(`${prefixCls}-${mode}`, className);
-  const root = createRoot(div);
   root.render(
     <Dialog
       visible

src/Modal/alert.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import closest from '../_util/closest';
 import Modal from './modal';
 
@@ -14,23 +15,26 @@ export default function alert(
   if (!title && !message) {
     // console.log('Must specify either an alert title, or message, or both');
     return {
-      close: () => {}
+      close: () => { }
     };
   }
 
   const div = document.createElement('div');
   document.body.appendChild(div);
+  const root = createRoot(div);
 
   function close() {
-    ReactDOM.unmountComponentAtNode(div);
-    if (div && div.parentNode) {
-      div.parentNode.removeChild(div);
+    if (div) {
+      root.unmount();
+      if (div.parentNode) {
+        div.parentNode.removeChild(div);
+      }
     }
   }
 
   const footer = actions.map(button => {
     // tslint:disable-next-line:only-arrow-functions
-    const orginPress = button.onPress || function () {};
+    const orginPress = button.onPress || function () { };
     button.onPress = () => {
       if (closed) {
         return;
@@ -43,7 +47,7 @@ export default function alert(
             closed = true;
             close();
           })
-          .catch(() => {});
+          .catch(() => { });
       } else {
         closed = true;
         close();
@@ -64,7 +68,7 @@ export default function alert(
     }
   }
 
-  ReactDOM.render(
+  root.render(
     <Modal
       visible
       transparent
@@ -78,8 +82,7 @@ export default function alert(
       wrapProps={{ onTouchStart: onWrapTouchStart }}
     >
       <div className={`${prefixCls}-alert-content`}>{message}</div>
-    </Modal>,
-    div
+    </Modal>
   );
 
   return {

src/Modal/operation.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import closest from '../_util/closest';
 import Modal from './modal';
 
@@ -12,17 +13,20 @@ export default function operation(
   const prefixCls = 'am-modal';
   const div = document.createElement('div');
   document.body.appendChild(div);
+  const root = createRoot(div);
 
   function close() {
-    ReactDOM.unmountComponentAtNode(div);
-    if (div && div.parentNode) {
-      div.parentNode.removeChild(div);
+    if (div) {
+      root.unmount();
+      if (div.parentNode) {
+        div.parentNode.removeChild(div);
+      }
     }
   }
 
   const footer = actions.map(button => {
     // tslint:disable-next-line:only-arrow-functions
-    const orginPress = button.onPress || function () {};
+    const orginPress = button.onPress || function () { };
     button.onPress = () => {
       if (closed) {
         return;
@@ -35,7 +39,7 @@ export default function operation(
             closed = true;
             close();
           })
-          .catch(() => {});
+          .catch(() => { });
       } else {
         closed = true;
         close();
@@ -54,7 +58,7 @@ export default function operation(
     }
   }
 
-  ReactDOM.render(
+  root.render(
     <Modal
       visible
       operation
@@ -69,8 +73,7 @@ export default function operation(
       className="am-modal-operation"
       platform={platform}
       wrapProps={{ onTouchStart: onWrapTouchStart }}
-    />,
-    div
+    />
   );
 
   return {

src/Modal/prompt.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import closest from '../_util/closest';
 import Modal from './modal';
 
@@ -24,7 +25,7 @@ export default function prompt(
   if (!callbackOrActions) {
     // console.log('Must specify callbackOrActions');
     return {
-      close: () => {}
+      close: () => { }
     };
   }
 
@@ -147,11 +148,14 @@ export default function prompt(
 
   const div = document.createElement('div');
   document.body.appendChild(div);
+  const root = createRoot(div);
 
   function close() {
-    ReactDOM.unmountComponentAtNode(div);
-    if (div && div.parentNode) {
-      div.parentNode.removeChild(div);
+    if (div) {
+      root.unmount();
+      if (div.parentNode) {
+        div.parentNode.removeChild(div);
+      }
     }
   }
 
@@ -175,7 +179,7 @@ export default function prompt(
     actions = [
       {
         text: '取消',
-        onPress: () => {}
+        onPress: () => { }
       },
       {
         text: '确定',
@@ -197,7 +201,7 @@ export default function prompt(
 
   const footer = actions.map(button => {
     // tslint:disable-next-line:only-arrow-functions
-    const orginPress = button.onPress || function () {};
+    const orginPress = button.onPress || function () { };
     button.onPress = () => {
       if (closed) {
         return;
@@ -210,7 +214,7 @@ export default function prompt(
             closed = true;
             close();
           })
-          .catch(() => {});
+          .catch(() => { });
       } else {
         closed = true;
         close();
@@ -230,7 +234,7 @@ export default function prompt(
     }
   }
 
-  ReactDOM.render(
+  root.render(
     <Modal
       visible
       transparent
@@ -245,8 +249,7 @@ export default function prompt(
       wrapProps={{ onTouchStart: onWrapTouchStart }}
     >
       <div className={`${prefixCls}-propmt-content`}>{content}</div>
-    </Modal>,
-    div
+    </Modal>
   );
 
   return {