[new feature] Actionsheet: add safe-area-inset-bottom prop (#3171)

packages/actionsheet/en-US.md

@@ -85,6 +85,7 @@ Actionsheet will get another style if there is a `title` prop.
 | close-on-click-overlay | Whether to close when click overlay | `Boolean` | `true` |
 | lazy-render | Whether to lazy render util appeared | `Boolean` | `true` |
 | get-container | Return the mount node for actionsheet | `String | () => HTMLElement` | - |
+| safe-area-inset-bottom | Whether to enable bottom safe area adaptation, to enable those features use `viewport-fit=cover` in the `viewport` meta tag | `Boolean` | `false` |
 
 ### Event
 

packages/actionsheet/index.less

@@ -60,4 +60,9 @@
     color: @action-sheet-close-icon-color;
     font-size: @action-sheet-close-icon-size;
   }
+
+  &--safe-area-inset-bottom {
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
 }

packages/actionsheet/index.tsx

@@ -23,6 +23,7 @@ export type ActionsheetProps = PopupMixinProps & {
   title?: string;
   actions: ActionsheetItem[];
   cancelText?: string;
+  safeAreaInsetBottom?: boolean;
 };
 
 const [sfc, bem] = use('actionsheet');
@@ -79,7 +80,7 @@ function Actionsheet(
 
   return (
     <Popup
-      class={bem()}
+      class={bem({ 'safe-area-inset-bottom': props.safeAreaInsetBottom })}
       value={props.value}
       position="bottom"
       overlay={props.overlay}
@@ -107,6 +108,7 @@ Actionsheet.props = {
   title: String,
   actions: Array,
   cancelText: String,
+  safeAreaInsetBottom: Boolean,
   overlay: {
     type: Boolean,
     default: true

packages/actionsheet/zh-CN.md

@@ -90,6 +90,7 @@ export default {
 | close-on-click-overlay | 是否在点击蒙层后关闭 | `Boolean` | `true` | - |
 | lazy-render | 是否在显示弹层时才渲染节点 | `Boolean` | `true` | 1.1.11 |
 | get-container | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | `String | () => HTMLElement` | - | - |
+| safe-area-inset-bottom | 是否开启 iPhone X 底部安全区适配，需要在 `viewport` meta 标签中设置 `viewport-fit=cover` | `Boolean` | `false` | 1.6.15 |
 
 ### Event