fix(Modal): when platform=cross, modal will change style from android…

… to ios before close in android close #1433
ant-design · Jun 9, 2017 · 2c79a05 · 2c79a05 · paranoidjk · Jun 9, 2017
1 parent efde632
commit 2c79a05
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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) {