feat(action-sheet): h5 add showOverlay & popupProps API (#514)

TDesignOteam · Jan 6, 2025 · ffe6803 · ffe6803
1 parent 159eb37
commit ffe6803
Show file tree

Hide file tree

Showing 10 changed files with 54 additions and 0 deletions.
diff --git a/db/TDesign.db b/db/TDesign.db
diff --git a/packages/products/tdesign-mobile-react/src/action-sheet/action-sheet.en-US.md b/packages/products/tdesign-mobile-react/src/action-sheet/action-sheet.en-US.md
@@ -13,7 +13,9 @@ cancelText | String | - | \- | N
 count | Number | 8 | \- | N
 description | String | - | \- | N
 items | Array | - | Typescript：`Array<string \| ActionSheetItem>` `interface ActionSheetItem { label: string; color?: string; disabled?: boolean; icon?: TNode; badge?: BadgeProps }`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/action-sheet/type.ts) | N
+popupProps | Object | {} | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/action-sheet/type.ts) | N
 showCancel | Boolean | true | \- | N
+showOverlay | Boolean | true | \- | N
 theme | String | list | options: list/grid | N
 visible | Boolean | false | required | Y
 defaultVisible | Boolean | false | required。uncontrolled property | Y

diff --git a/packages/products/tdesign-mobile-react/src/action-sheet/action-sheet.md b/packages/products/tdesign-mobile-react/src/action-sheet/action-sheet.md
@@ -13,7 +13,9 @@ cancelText | String | - | 设置取消按钮的文本 | N
 count | Number | 8 | 设置每页展示菜单的数量，仅当 type=grid 时有效 | N
 description | String | - | 动作面板描述文字 | N
 items | Array | - | 菜单项。TS 类型：`Array<string \| ActionSheetItem>` `interface ActionSheetItem { label: string; color?: string; disabled?: boolean; icon?: TNode; badge?: BadgeProps }`，[Badge API Documents](./badge?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/action-sheet/type.ts) | N
+popupProps | Object | {} | popupProps透传。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/action-sheet/type.ts) | N
 showCancel | Boolean | true | 是否显示取消按钮 | N
+showOverlay | Boolean | true | 是否显示遮罩层 | N
 theme | String | list | 展示类型，列表和表格形式展示。可选项：list/grid | N
 visible | Boolean | false | 必需。显示与隐藏 | Y
 defaultVisible | Boolean | false | 必需。显示与隐藏。非受控属性 | Y

diff --git a/packages/products/tdesign-mobile-react/src/action-sheet/defaultProps.ts b/packages/products/tdesign-mobile-react/src/action-sheet/defaultProps.ts
@@ -7,7 +7,9 @@ import { TdActionSheetProps } from './type';
 export const actionSheetDefaultProps: TdActionSheetProps = {
   align: 'center',
   count: 8,
+  popupProps: {},
   showCancel: true,
+  showOverlay: true,
   theme: 'list',
   defaultVisible: false,
 };
diff --git a/packages/products/tdesign-mobile-react/src/action-sheet/type.ts b/packages/products/tdesign-mobile-react/src/action-sheet/type.ts
@@ -5,6 +5,7 @@
  * */
 
 import { BadgeProps } from '../badge';
+import { PopupProps } from '../popup';
 import { TNode } from '../common';
 import { MouseEvent } from 'react';
 
@@ -33,11 +34,21 @@ export interface TdActionSheetProps {
    * 菜单项
    */
   items?: Array<string | ActionSheetItem>;
+  /**
+   * popupProps透传
+   * @default {}
+   */
+  popupProps?: PopupProps;
   /**
    * 是否显示取消按钮
    * @default true
    */
   showCancel?: boolean;
+  /**
+   * 是否显示遮罩层
+   * @default true
+   */
+  showOverlay?: boolean;
   /**
    * 展示类型，列表和表格形式展示
    * @default list

diff --git a/packages/products/tdesign-mobile-vue/src/action-sheet/action-sheet.en-US.md b/packages/products/tdesign-mobile-vue/src/action-sheet/action-sheet.en-US.md
@@ -11,7 +11,9 @@ cancelText | String | - | \- | N
 count | Number | 8 | \- | N
 description | String | - | \- | N
 items | Array | - | Typescript：`Array<string \| ActionSheetItem>` `interface ActionSheetItem { label: string; color?: string; disabled?: boolean; icon?: TNode; badge?: BadgeProps }`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts) | N
+popupProps | Object | {} | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts) | N
 showCancel | Boolean | true | \- | N
+showOverlay | Boolean | true | \- | N
 theme | String | list | options: list/grid | N
 visible | Boolean | false | required。`v-model` and `v-model:visible` is supported | Y
 defaultVisible | Boolean | false | required。uncontrolled property | Y

diff --git a/packages/products/tdesign-mobile-vue/src/action-sheet/action-sheet.md b/packages/products/tdesign-mobile-vue/src/action-sheet/action-sheet.md
@@ -11,7 +11,9 @@ cancelText | String | - | 设置取消按钮的文本 | N
 count | Number | 8 | 设置每页展示菜单的数量，仅当 type=grid 时有效 | N
 description | String | - | 动作面板描述文字 | N
 items | Array | - | 菜单项。TS 类型：`Array<string \| ActionSheetItem>` `interface ActionSheetItem { label: string; color?: string; disabled?: boolean; icon?: TNode; badge?: BadgeProps }`，[Badge API Documents](./badge?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts) | N
+popupProps | Object | {} | popupProps透传。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts) | N
 showCancel | Boolean | true | 是否显示取消按钮 | N
+showOverlay | Boolean | true | 是否显示遮罩层 | N
 theme | String | list | 展示类型，列表和表格形式展示。可选项：list/grid | N
 visible | Boolean | false | 必需。显示与隐藏。支持语法糖 `v-model` 或 `v-model:visible` | Y
 defaultVisible | Boolean | false | 必需。显示与隐藏。非受控属性 | Y

diff --git a/packages/products/tdesign-mobile-vue/src/action-sheet/props.ts b/packages/products/tdesign-mobile-vue/src/action-sheet/props.ts
@@ -36,11 +36,21 @@ export default {
   items: {
     type: Array as PropType<TdActionSheetProps['items']>,
   },
+  /** popupProps透传 */
+  popupProps: {
+    type: Object as PropType<TdActionSheetProps['popupProps']>,
+    default: () => ({}),
+  },
   /** 是否显示取消按钮 */
   showCancel: {
     type: Boolean,
     default: true,
   },
+  /** 是否显示遮罩层 */
+  showOverlay: {
+    type: Boolean,
+    default: true,
+  },
   /** 展示类型，列表和表格形式展示 */
   theme: {
     type: String as PropType<TdActionSheetProps['theme']>,

diff --git a/packages/products/tdesign-mobile-vue/src/action-sheet/type.ts b/packages/products/tdesign-mobile-vue/src/action-sheet/type.ts
@@ -5,6 +5,7 @@
  * */
 
 import { BadgeProps } from '../badge';
+import { PopupProps } from '../popup';
 import { TNode } from '../common';
 
 export interface TdActionSheetProps {
@@ -32,11 +33,21 @@ export interface TdActionSheetProps {
    * 菜单项
    */
   items?: Array<string | ActionSheetItem>;
+  /**
+   * popupProps透传
+   * @default {}
+   */
+  popupProps?: PopupProps;
   /**
    * 是否显示取消按钮
    * @default true
    */
   showCancel?: boolean;
+  /**
+   * 是否显示遮罩层
+   * @default true
+   */
+  showOverlay?: boolean;
   /**
    * 展示类型，列表和表格形式展示
    * @default list

diff --git a/packages/scripts/api.json b/packages/scripts/api.json
@@ -2277,6 +2277,9 @@
     {
       "id": 1712054580,
       "platform_framework": [
+        "8",
+        "16",
+        "32",
         "64"
       ],
       "component": "ActionSheet",
@@ -2305,6 +2308,9 @@
       "support_default_value": 0,
       "field_category_text": "Props",
       "platform_framework_text": [
+        "Vue(Mobile)",
+        "React(Mobile)",
+        "Angular(Mobile)",
         "Miniprogram"
       ],
       "field_type_text": [
@@ -2357,6 +2363,9 @@
     {
       "id": 1712054606,
       "platform_framework": [
+        "8",
+        "16",
+        "32",
         "64"
       ],
       "component": "ActionSheet",
@@ -2385,6 +2394,9 @@
       "support_default_value": 0,
       "field_category_text": "Props",
       "platform_framework_text": [
+        "Vue(Mobile)",
+        "React(Mobile)",
+        "Angular(Mobile)",
         "Miniprogram"
       ],
       "field_type_text": [