From 5aa472bfca6a75ada360ab5eb367c2ac63fd3fb8 Mon Sep 17 00:00:00 2001
From: hejiasheng <szhejason@gmail.com>
Date: Fri, 28 Sep 2018 10:58:40 +0800
Subject: [PATCH] =?UTF-8?q?fix(action-sheet):=20=E5=AE=8C=E5=96=84=20UI=20?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=20#78?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/action-sheet/footer/index.js | 23 ---------------------
 src/components/action-sheet/index.js        | 17 +++++++++++++--
 src/components/action-sheet/index.scss      |  6 ++++++
 3 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/src/components/action-sheet/footer/index.js b/src/components/action-sheet/footer/index.js
index 2c87324f0..e38cf390a 100644
--- a/src/components/action-sheet/footer/index.js
+++ b/src/components/action-sheet/footer/index.js
@@ -10,38 +10,15 @@ import AtComponent from '../../../common/component'
 import './index.scss'
 
 export default class AtActionSheetFooter extends AtComponent {
-  constructor () {
-    super(...arguments)
-    this.state = {
-      isIPhoneX: false
-    }
-  }
-
   handleClick = (...args) => {
     if (_isFunction(this.props.onClick)) {
       this.props.onClick(...args)
     }
   }
 
-  componentDidMount () {
-    const curEnv = Taro.getEnv()
-
-    if (
-      curEnv === Taro.ENV_TYPE.WEAPP &&
-      Taro.getSystemInfoSync().model.indexOf('iPhone X') >= 0
-    ) {
-      this.setState({ isIPhoneX: true })
-    }
-  }
-
   render () {
-    const { isIPhoneX } = this.state
-
     const rootClass = classNames(
       'at-action-sheet-footer',
-      {
-        'at-action-sheet-footer--ipx': isIPhoneX
-      },
       this.props.className
     )
 
diff --git a/src/components/action-sheet/index.js b/src/components/action-sheet/index.js
index 6dc627f76..4aedde68a 100644
--- a/src/components/action-sheet/index.js
+++ b/src/components/action-sheet/index.js
@@ -19,6 +19,7 @@ export default class AtActionSheet extends AtComponent {
     const { isOpened } = props
 
     this.state = {
+      isIPhoneX: false,
       _isOpened: isOpened
     }
   }
@@ -34,6 +35,17 @@ export default class AtActionSheet extends AtComponent {
     }
   }
 
+  componentDidMount () {
+    const curEnv = Taro.getEnv()
+
+    if (
+      curEnv === Taro.ENV_TYPE.WEAPP &&
+      Taro.getSystemInfoSync().model.indexOf('iPhone X') >= 0
+    ) {
+      this.setState({ isIPhoneX: true })
+    }
+  }
+
   handleClose = () => {
     if (_isFunction(this.props.onClose)) {
       this.props.onClose()
@@ -62,12 +74,13 @@ export default class AtActionSheet extends AtComponent {
 
   render () {
     const { title, cancelText, className } = this.props
-    const { _isOpened } = this.state
+    const { _isOpened, isIPhoneX } = this.state
 
     const rootClass = classNames(
       'at-action-sheet',
       {
-        'at-action-sheet--active': _isOpened
+        'at-action-sheet--active': _isOpened,
+        'at-action-sheet--ipx': isIPhoneX
       },
       className
     )
diff --git a/src/components/action-sheet/index.scss b/src/components/action-sheet/index.scss
index b2b29abcb..2effa9c0a 100644
--- a/src/components/action-sheet/index.scss
+++ b/src/components/action-sheet/index.scss
@@ -25,10 +25,16 @@ $action-sheet-timer: 300ms;
     width: 100%;
     text-align: center;
     position: absolute;
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
     background-color: $color-white;
     transform: translate3d(0, 100%, 0);
     transition: transform $action-sheet-timer $timing-func;
   }
+
+  &--ipx &__container {
+    padding-bottom: 68px;
+  }
 }
 
 .at-action-sheet--active {