From 2c79a05c7ed1bdb2020b6cc713fd423863645a06 Mon Sep 17 00:00:00 2001
From: paranoidjk <hust2012jiangkai@gmail.com>
Date: Fri, 9 Jun 2017 14:27:45 +0800
Subject: [PATCH] fix(Modal): when platform=cross, modal will change style from
 android to ios before close in android

close #1433
---
 components/modal/Modal.web.tsx     | 29 +++++++++++++++++++++++------
 components/modal/alert.web.tsx     |  4 +++-
 components/modal/demo/alert.md     |  3 ++-
 components/modal/operation.web.tsx |  4 +++-
 components/modal/prompt.web.tsx    |  4 +++-
 5 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/components/modal/Modal.web.tsx b/components/modal/Modal.web.tsx
index 05b447f0be..4831525f5d 100644
--- a/components/modal/Modal.web.tsx
+++ b/components/modal/Modal.web.tsx
@@ -5,6 +5,11 @@ import assign from 'object-assign';
 import Touchable from 'rc-touchable';
 import ModalProps from './PropsType';
 
+function checkIfAndroid(platform) {
+  return platform === 'android' ||
+      (platform === 'cross' && typeof window !== 'undefined' && !!navigator.userAgent.match(/Android/i));
+}
+
 export default class Modal extends React.Component<ModalProps, any> {
   static defaultProps = {
     prefixCls: 'am-modal',
@@ -18,12 +23,18 @@ export default class Modal extends React.Component<ModalProps, any> {
     operation: false,
     platform: 'cross',
   };
-
+  constructor(props) {
+    super(props);
+    this.state = {
+      // in ssr, just set isAndroid false
+      // since modal normally won't show at first render, componentDidMount will do double check
+      isAndroid: checkIfAndroid(props.platform),
+    };
+  }
   isInModal(e) {
     if (!/\biPhone\b|\biPod\b/i.test(navigator.userAgent)) {
       return;
     }
-
     // fix touch to scroll background page on iOS
     const prefixCls = this.props.prefixCls;
     const pNode = (node => {
@@ -69,7 +80,14 @@ export default class Modal extends React.Component<ModalProps, any> {
       </Touchable>
     );
   }
-
+  componentDidMount() {
+    const isAndroid = checkIfAndroid(this.props.platform);
+    if (isAndroid !== this.state.isAndroid) {
+      this.setState({
+        isAndroid,
+      });
+    }
+  }
   render() {
     const {
       prefixCls,
@@ -82,11 +100,10 @@ export default class Modal extends React.Component<ModalProps, any> {
       footer = [],
       closable,
       operation,
-      platform,
     } = this.props;
 
-    const isAndroid = platform === 'android' ||
-      (platform === 'cross' && this.props.visible && !!navigator.userAgent.match(/Android/i));
+    const { isAndroid } = this.state;
+
     const wrapCls = classNames({
       [className as string]: !!className,
       [`${prefixCls}-transparent`]: transparent,
diff --git a/components/modal/alert.web.tsx b/components/modal/alert.web.tsx
index c999216e95..9373f7c100 100644
--- a/components/modal/alert.web.tsx
+++ b/components/modal/alert.web.tsx
@@ -22,7 +22,9 @@ export default function a(...args) {
 
   function close() {
     ReactDOM.unmountComponentAtNode(div);
-    div.parentNode.removeChild(div);
+    if (div && div.parentNode) {
+      div.parentNode.removeChild(div);
+    }
   }
 
   const footer = actions.map((button) => {
diff --git a/components/modal/demo/alert.md b/components/modal/demo/alert.md
index 87ab65b594..9752f1057e 100644
--- a/components/modal/demo/alert.md
+++ b/components/modal/demo/alert.md
@@ -25,8 +25,9 @@ const showAlert = () => {
   ]);
   setTimeout(() => {
     // 可以调用close方法以在外部close
+    console.log('auto close');
     alertInstance.close();
-  }, 1000);
+  }, 2000);
 };
 
 const App = () => (
diff --git a/components/modal/operation.web.tsx b/components/modal/operation.web.tsx
index 2fa7d2f76f..eaec620887 100644
--- a/components/modal/operation.web.tsx
+++ b/components/modal/operation.web.tsx
@@ -13,7 +13,9 @@ export default function a(...args) {
 
   function close() {
     ReactDOM.unmountComponentAtNode(div);
-    div.parentNode.removeChild(div);
+    if (div && div.parentNode) {
+      div.parentNode.removeChild(div);
+    }
   }
 
   const footer = actions.map((button) => {
diff --git a/components/modal/prompt.web.tsx b/components/modal/prompt.web.tsx
index cdd78aa061..8dc97bf90e 100644
--- a/components/modal/prompt.web.tsx
+++ b/components/modal/prompt.web.tsx
@@ -81,7 +81,9 @@ export default function a(...args) {
 
   function close() {
     ReactDOM.unmountComponentAtNode(div);
-    div.parentNode.removeChild(div);
+    if (div && div.parentNode) {
+      div.parentNode.removeChild(div);
+    }
   }
 
   function getArgs(func) {