From af09a7cb88e67cf1d8ad9581f3b3b65458c71148 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Thu, 18 Apr 2019 20:15:20 +0800
Subject: [PATCH] [new feature] GoodsAction: add safe-area-inset-bottom prop
 (#3174)

---
 packages/goods-action/en-US.md   |  5 +++++
 packages/goods-action/index.less |  6 ++++++
 packages/goods-action/index.tsx  | 19 +++++++++++++++----
 packages/goods-action/zh-CN.md   |  6 ++++++
 4 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/packages/goods-action/en-US.md b/packages/goods-action/en-US.md
index 001cc0836..e17c0e443 100644
--- a/packages/goods-action/en-US.md
+++ b/packages/goods-action/en-US.md
@@ -83,6 +83,11 @@ Use `info` prop to show messages in upper right corner of icon
 
 ### API
 
+#### GoodsAction
+
+| Attribute | Description | Type | Default |
+| 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` |
+
 #### GoodsActionMiniBtn
 
 | Attribute | Description | Type | Default |
diff --git a/packages/goods-action/index.less b/packages/goods-action/index.less
index ad7823967..136b6a5f6 100644
--- a/packages/goods-action/index.less
+++ b/packages/goods-action/index.less
@@ -6,4 +6,10 @@
   bottom: 0;
   display: flex;
   position: fixed;
+  background-color: @white;
+
+  &--safe-area-inset-bottom {
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
 }
diff --git a/packages/goods-action/index.tsx b/packages/goods-action/index.tsx
index 3e09c01d2..7d39baf2f 100644
--- a/packages/goods-action/index.tsx
+++ b/packages/goods-action/index.tsx
@@ -3,21 +3,32 @@ import { inherit } from '../utils/functional';
 
 // Types
 import { CreateElement, RenderContext } from 'vue/types';
-import { DefaultProps, DefaultSlots } from '../utils/use/sfc';
+import { DefaultSlots } from '../utils/use/sfc';
+
+export type GoodsActionProps = {
+  safeAreaInsetBottom?: boolean;
+};
 
 const [sfc, bem] = use('goods-action');
 
 function GoodsAction(
   h: CreateElement,
-  props: DefaultProps,
+  props: GoodsActionProps,
   slots: DefaultSlots,
   ctx: RenderContext
 ) {
   return (
-    <div class={bem()} {...inherit(ctx, true)}>
+    <div
+      class={bem({ 'safe-area-inset-bottom': props.safeAreaInsetBottom })}
+      {...inherit(ctx, true)}
+    >
       {slots.default && slots.default()}
     </div>
   );
 }
 
-export default sfc(GoodsAction);
+GoodsAction.props = {
+  safeAreaInsetBottom: Boolean
+};
+
+export default sfc<GoodsActionProps>(GoodsAction);
diff --git a/packages/goods-action/zh-CN.md b/packages/goods-action/zh-CN.md
index 9a294f3e9..cc050782b 100644
--- a/packages/goods-action/zh-CN.md
+++ b/packages/goods-action/zh-CN.md
@@ -82,6 +82,12 @@ export default {
 
 ### API
 
+#### GoodsAction
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|------|------|------|------|------|
+| safe-area-inset-bottom | 是否开启 iPhone X 底部安全区适配，需要在 `viewport` meta 标签中设置 `viewport-fit=cover` | `Boolean` | `false` | 1.6.15 |
+
 #### GoodsActionMiniBtn
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |