fix(action-sheet): 完善 UI 问题 #78

jd-opensource · Sep 28, 2018 · 5aa472b · 5aa472b
1 parent 29a5c6c
commit 5aa472b
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 25 deletions.
diff --git 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
@@ -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
@@ -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 {