Repository: ant-design/ant-design-mobile
Pull request #6246 (2023-07-13 13:20:12)

feat(ActionSheet): support popup styles
#6243

codecov[bot]: ## [Codecov](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6246?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) Report
Patch coverage: **`100.00`**% and project coverage change: **`+0.02`** :tada:
> Comparison is base [(`d1e999d`)](https://app.codecov.io/gh/ant-design/ant-design-mobile/commit/d1e999d7f81d3b7df95aa3cd888f5d441011571b?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) 91.03% compared to head [(`17a571b`)](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6246?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) 91.06%.

<details><summary>Additional details and impacted files</summary>


```diff
@@             Coverage Diff             @@
##           feature    #6246      +/-   ##
===========================================
+ Coverage    91.03%   91.06%   +0.02%     
===========================================
  Files          305      307       +2     
  Lines         6583     6600      +17     
  Branches      1643     1651       +8     
===========================================
+ Hits          5993     6010      +17     
  Misses         544      544              
  Partials        46       46              
```


| [Impacted Files](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6246?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) | Coverage Δ | |
|---|---|---|
| [src/components/action-sheet/action-sheet.tsx](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6246?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2NvbXBvbmVudHMvYWN0aW9uLXNoZWV0L2FjdGlvbi1zaGVldC50c3g=) | `100.00% <100.00%> (ø)` | |

... and [4 files with indirect coverage changes](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6246/indirect-changes?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design)


</details>

[:umbrella: View full report in Codecov by Sentry](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6246?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).   
:loudspeaker: Do you have feedback about the report comment? [Let us know in this issue](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).

github-actions[bot]: PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-6246.surge.sh

Patch:
diff --git a/src/components/action-sheet/action-sheet.tsx b/src/components/action-sheet/action-sheet.tsx
index bd9a51d36..9043d5b73 100644
--- a/src/components/action-sheet/action-sheet.tsx
+++ b/src/components/action-sheet/action-sheet.tsx
@@ -31,7 +31,9 @@ export type ActionSheetProps = {
   closeOnMaskClick?: boolean
   safeArea?: boolean
   popupClassName?: string
+  /** @deprecated use `styles` instead */
   popupStyle?: CSSProperties
+  styles?: Partial<Record<'body' | 'mask', CSSProperties>>
 } & Pick<
   PopupProps,
   'afterClose' | 'getContainer' | 'destroyOnClose' | 'forceRender'
@@ -51,6 +53,7 @@ const defaultProps = {
 
 export const ActionSheet: FC<ActionSheetProps> = p => {
   const props = mergeProps(defaultProps, p)
+  const { styles } = props
 
   return (
     <Popup
@@ -67,6 +70,8 @@ export const ActionSheet: FC<ActionSheetProps> = p => {
       getContainer={props.getContainer}
       destroyOnClose={props.destroyOnClose}
       forceRender={props.forceRender}
+      bodyStyle={styles?.body}
+      maskStyle={styles?.mask}
     >
       {withNativeProps(
         props,
diff --git a/src/components/action-sheet/index.en.md b/src/components/action-sheet/index.en.md
index 12babf274..252a9e644 100644
--- a/src/components/action-sheet/index.en.md
+++ b/src/components/action-sheet/index.en.md
@@ -14,8 +14,8 @@ Triggered by user operation, it provides a set of two or more options related to
 
 ### Props
 
-| Name | Description | Type | Default |
-| --- | --- | --- | --- |
+| Name | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
 | actions | The option list of the the action sheet | `Action[]` | `[]` |
 | afterClose | Triggered when completely closed | `() => void` | - |
 | cancelText | The text of the cancel button , if it is null, the cancel button would not be displayed | `ReactNode` | - |
@@ -29,9 +29,9 @@ Triggered by user operation, it provides a set of two or more options related to
 | onClose | Triggered when closed | `() => void` | - |
 | onMaskClick | Triggered when the mask layer is clicked | `() => void` | - |
 | popupClassName | `ActionSheet` popup class name | `string` | - |
-| popupStyle | `ActionSheet` popup style | `React.CSSProperties` | - |
 | safeArea | Whether to enable safe area padding | `boolean` | `true` |
 | visible | To show or hide the action sheet | `boolean` | `false` |
+| styles | Semantic structure style | `Partial<Record<'body' \| 'mask', CSSProperties>>` | - | 5.33.0 |
 
 ### Action
 
diff --git a/src/components/action-sheet/index.zh.md b/src/components/action-sheet/index.zh.md
index 3efd1f2fd..4100c5f26 100644
--- a/src/components/action-sheet/index.zh.md
+++ b/src/components/action-sheet/index.zh.md
@@ -14,8 +14,8 @@
 
 ### 属性
 
-| 属性 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
 | actions | 面板选项列表 | `Action[]` | `[]` |
 | afterClose | 完全关闭后触发 | `() => void` | - |
 | cancelText | 取消按钮文字，如果设置为空则不显示取消按钮 | `ReactNode` | - |
@@ -29,9 +29,9 @@
 | onClose | 关闭时触发 | `() => void` | - |
 | onMaskClick | 点击背景蒙层时触发 | `() => void` | - |
 | popupClassName | `ActionSheet` 弹出层类名 | `string` | - |
-| popupStyle | `ActionSheet` 弹出层样式 | `React.CSSProperties` | - |
 | safeArea | 是否开启安全区适配 | `boolean` | `true` |
 | visible | 显示隐藏 | `boolean` | `false` |
+| styles | 语义化结构 style | `Partial<Record<''body' \| 'mask', CSSProperties>>` | - | 5.33.0 |
 
 ### Action
 
diff --git a/src/components/cascader-view/cascader-view.tsx b/src/components/cascader-view/cascader-view.tsx
index 989724726..ae2942b70 100644
--- a/src/components/cascader-view/cascader-view.tsx
+++ b/src/components/cascader-view/cascader-view.tsx
@@ -22,8 +22,8 @@ type BaseOptionType = {
   [key: string]: any
 }
 export type CascaderOption = {
-  label: string
-  value: string
+  label?: string
+  value?: string
   disabled?: boolean
   children?: CascaderOption[]
 } & BaseOptionType
@@ -54,7 +54,7 @@ export const CascaderView: FC<CascaderViewProps> = p => {
 
   const { locale } = useConfig()
   const generateValueExtend = useCascaderValueExtend(props.options)
-  const [labelName, valueName, disabledName, childrenName] = useFieldNames(
+  const [labelName, valueName, childrenName, disabledName] = useFieldNames(
     props.fieldNames
   )
 
diff --git a/src/components/tree-select/tree-select.tsx b/src/components/tree-select/tree-select.tsx
index 5b6a0cb3b..49df54b69 100644
--- a/src/components/tree-select/tree-select.tsx
+++ b/src/components/tree-select/tree-select.tsx
@@ -5,10 +5,16 @@ import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { getTreeDeep } from '../../utils/tree'
 import { mergeProps } from '../../utils/with-default-props'
 import { usePropsValue } from '../../utils/use-props-value'
+import { useFieldNames } from '../../hooks'
+import type { FieldNamesType } from '../../hooks'
 
 const classPrefix = `adm-tree-select`
 
-export interface TreeSelectOption {
+export type TreeSelectOption = {
+  label?: string
+  value?: string
+  children?: TreeSelectOption[]
+} & {
   [key: string]: any
 }
 
@@ -17,7 +23,7 @@ export type TreeSelectProps = {
   defaultValue?: string[]
   value?: string[]
   onChange?: (value: string[], extend: { options: TreeSelectOption[] }) => void
-  fieldNames?: { label: string; value: string; children: string }
+  fieldNames?: FieldNamesType
 } & NativeProps
 
 const defaultProps = {
@@ -28,10 +34,7 @@ const defaultProps = {
 
 export const TreeSelect: FC<TreeSelectProps> = p => {
   const props = mergeProps(defaultProps, p)
-  const labelName = props.fieldNames.label || 'label'
-  const valueName = props.fieldNames.value || 'value'
-  const childrenName = props.fieldNames.children || 'children'
-
+  const [labelName, valueName, childrenName] = useFieldNames(props.fieldNames)
   const [value, setValue] = usePropsValue({
     value: props.value,
     defaultValue: props.defaultValue,
diff --git a/src/hooks/useFieldNames.tsx b/src/hooks/useFieldNames.tsx
index 979a98e68..ac762309d 100644
--- a/src/hooks/useFieldNames.tsx
+++ b/src/hooks/useFieldNames.tsx
@@ -15,7 +15,7 @@ export const useFieldNames = (fieldNames: FieldNamesType = {}) => {
       children = 'children',
     } = fieldNames
 
-    return [label, value, disabled, children] as string[]
+    return [label, value, children, disabled] as string[]
   }, [JSON.stringify(fieldNames)])
 
   return fields


Test patch:
diff --git a/src/components/action-sheet/tests/action-sheet.test.tsx b/src/components/action-sheet/tests/action-sheet.test.tsx
index 2c3b57d15..dc6bdf740 100644
--- a/src/components/action-sheet/tests/action-sheet.test.tsx
+++ b/src/components/action-sheet/tests/action-sheet.test.tsx
@@ -232,4 +232,21 @@ describe('ActionSheet', () => {
     })
     expect(onClose).toBeCalled()
   })
+
+  test('should support styles', () => {
+    render(
+      <ActionSheet
+        visible
+        actions={actions}
+        styles={{
+          body: { fontSize: 17 },
+          mask: { fontSize: 18 },
+        }}
+      />
+    )
+    expect(document.querySelector('.adm-mask')).toHaveStyle('fontSize: 17')
+    expect(document.querySelector('.adm-popup-body')).toHaveStyle(
+      'fontSize: 18'
+    )
+  })
 })