Skip to content

Commit e746343

Browse files
anlyyaoanlyyao
committed
fix: fix cr and sync api docs
1 parent b71259a commit e746343

File tree

12 files changed

+103
-76
lines changed

12 files changed

+103
-76
lines changed

‎src/action-sheet/ActionSheet.tsx‎

Lines changed: 13 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,39 @@
11
import React from 'react';
22
import cx from 'classnames';
3-
43
import type { TdActionSheetProps } from './type';
5-
64
import { Button } from '../button';
75
import { Popup } from '../popup';
8-
import useDefault from '../_util/useDefault';
6+
import { StyledProps } from '../common';
7+
import useControlled from '../hooks/useControlled';
98
import { usePrefixClass } from '../hooks/useClass';
109
import useDefaultProps from '../hooks/useDefaultProps';
1110
import { actionSheetDefaultProps } from './defaultProps';
1211
import { ActionSheetList } from './ActionSheetList';
1312
import { ActionSheetGrid } from './ActionSheetGrid';
1413

15-
export type ActionSheetProps = TdActionSheetProps & {
16-
showOverlay?: boolean;
17-
onVisibleChange?: (value: boolean) => void;
18-
gridHeight?: number;
19-
};
14+
export interface ActionSheetProps extends TdActionSheetProps, StyledProps {}
2015

2116
export const ActionSheet: React.FC<ActionSheetProps> = (props) => {
2217
const {
23-
defaultVisible,
2418
items,
25-
visible: visibleFromProps,
2619
theme,
2720
align,
2821
showOverlay,
2922
showCancel,
3023
cancelText,
3124
description,
25+
popupProps,
3226
onClose,
3327
onSelected,
3428
onCancel,
35-
onVisibleChange,
3629
count,
37-
gridHeight,
3830
} = useDefaultProps<ActionSheetProps>(props, actionSheetDefaultProps);
3931

4032
const actionSheetClass = usePrefixClass('action-sheet');
4133

42-
const [visible, onChange] = useDefault(visibleFromProps, defaultVisible, onVisibleChange);
34+
const [visible, setVisible] = useControlled(props, 'visible', (visible, context) => {
35+
!visible && onClose?.(context);
36+
});
4337

4438
const handleCancel = (ev) => {
4539
onCancel?.(ev);
@@ -50,20 +44,17 @@ export const ActionSheet: React.FC<ActionSheetProps> = (props) => {
5044

5145
onSelected?.(found, idx);
5246

53-
onClose?.('select');
54-
55-
onChange(false);
47+
setVisible(false, { trigger: 'select' });
5648
};
5749

5850
return (
5951
<Popup
52+
{...popupProps}
6053
visible={visible}
6154
className={actionSheetClass}
6255
placement="bottom"
6356
onVisibleChange={(value) => {
64-
onChange(value);
65-
66-
if (!value) onClose?.('overlay');
57+
setVisible(value, { trigger: 'overlay' });
6758
}}
6859
showOverlay={showOverlay}
6960
>
@@ -80,20 +71,14 @@ export const ActionSheet: React.FC<ActionSheetProps> = (props) => {
8071
</p>
8172
) : null}
8273
{theme === 'list' ? <ActionSheetList items={items} align={align} onSelected={handleSelected} /> : null}
83-
{theme === 'grid' && visible ? (
84-
<ActionSheetGrid
85-
items={items}
86-
align={align}
87-
onSelected={handleSelected}
88-
count={count}
89-
gridHeight={gridHeight}
90-
/>
74+
{theme === 'grid' ? (
75+
<ActionSheetGrid items={items} align={align} onSelected={handleSelected} count={count} />
9176
) : null}
9277
{showCancel ? (
9378
<div className={`${actionSheetClass}__footer`}>
9479
<div className={`${actionSheetClass}__gap-${theme}`}></div>
9580
<Button className={`${actionSheetClass}__cancel`} variant="text" block onClick={handleCancel}>
96-
{cancelText}
81+
{cancelText || '取消'}
9782
</Button>
9883
</div>
9984
) : null}

‎src/action-sheet/ActionSheetGrid.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,10 @@ import { usePrefixClass } from '../hooks/useClass';
1111
type ActionSheetGridProps = Pick<ActionSheetProps, 'items' | 'align'> & {
1212
onSelected?: (idx: number) => void;
1313
count?: number;
14-
gridHeight?: number;
1514
};
1615

1716
export function ActionSheetGrid(props: ActionSheetGridProps) {
18-
const { items = [], count = 8, onSelected, gridHeight } = props;
17+
const { items = [], count = 8, onSelected } = props;
1918

2019
const actionSheetClass = usePrefixClass('action-sheet');
2120

@@ -51,11 +50,11 @@ export function ActionSheetGrid(props: ActionSheetGridProps) {
5150
loop={false}
5251
navigation={pageNum > 1 ? { type: 'dots' } : undefined}
5352
direction={direction}
54-
height={gridHeight || (pageNum > 1 ? 208 : 196)}
53+
height={pageNum > 1 ? 208 : 196}
5554
>
5655
{actionItems.map((item, idx1) => (
5756
<Swiper.SwiperItem key={idx1}>
58-
<Grid gutter={0} column={gridColumn}>
57+
<Grid gutter={0} column={gridColumn} style={{ width: '100%' }}>
5958
{item.map((it, idx2) => {
6059
let label: string;
6160
let image: React.ReactNode;

‎src/action-sheet/_example/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,17 @@ export default function Base() {
1616
title="ActionSheet 动作面板"
1717
summary="从底部弹出的模态框，提供和当前场景相关的操作动作，也支持提供信息输入和描述。"
1818
/>
19-
<TDemoBlock title="01 类型" summary="列表型">
19+
<TDemoBlock title="01 类型" summary="列表型" padding>
2020
<ListExample />
2121
</TDemoBlock>
22-
<TDemoBlock title="" summary="宫格型">
22+
<TDemoBlock title="" summary="宫格型" padding>
2323
<GridExample />
2424
<GridMultipleExample />
2525
</TDemoBlock>
26-
<TDemoBlock title="02 组件状态" summary="列表型选项状态">
26+
<TDemoBlock title="02 组件状态" summary="列表型选项状态" padding>
2727
<StatusExample />
2828
</TDemoBlock>
29-
<TDemoBlock title="03 组件样式" summary="列表型对齐方式">
29+
<TDemoBlock title="03 组件样式" summary="列表型对齐方式" padding>
3030
<AlignExample />
3131
</TDemoBlock>
3232
</div>

‎src/action-sheet/_example/style/index.less‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
.action-sheet-demo {
2-
padding: 0 16px;
32
margin-bottom: 16px;
43

54
&-btns {
@@ -11,4 +10,4 @@
1110
}
1211
}
1312
}
14-
}
13+
}

‎src/action-sheet/action-sheet.en-US.md‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,13 @@ align | String | center | options: center/left | N
1212
cancelText | String | - | \- | N
1313
count | Number | 8 | \- | N
1414
description | String | - | \- | N
15-
items | Array | - | required。Typescript：`Array<string \| ActionSheetItem>` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean;icon?: string;suffixIcon?: string; }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/action-sheet/type.ts) | Y
15+
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
16+
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
1617
showCancel | Boolean | true | \- | N
18+
showOverlay | Boolean | true | \- | N
1719
theme | String | list | options: list/grid | N
18-
visible | Boolean | false | required | Y
19-
defaultVisible | Boolean | false | required。uncontrolled property | Y
20+
visible | Boolean | false | \- | N
21+
defaultVisible | Boolean | false | uncontrolled property | N
2022
onCancel | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
21-
onClose | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
22-
onClose | Function | | Typescript：`(trigger: TriggerSource) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/action-sheet/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'command' \| 'select' `<br/> | N
23+
onClose | Function | | Typescript：`(trigger: ActionSheetTriggerSource) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/action-sheet/type.ts)。<br/>`type ActionSheetTriggerSource = 'overlay' \| 'command' \| 'select' `<br/> | N
2324
onSelected | Function | | Typescript：`(selected: ActionSheetItem \| string, index: number) => void`<br/> | N

‎src/action-sheet/action-sheet.md‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,13 @@ align | String | center | 水平对齐方式。可选项：center/left | N
1212
cancelText | String | - | 设置取消按钮的文本 | N
1313
count | Number | 8 | 设置每页展示菜单的数量，仅当 type=grid 时有效 | N
1414
description | String | - | 动作面板描述文字 | N
15-
items | Array | - | 必需。菜单项。TS 类型：`Array<string \| ActionSheetItem>` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean;icon?: string;suffixIcon?: string; }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/action-sheet/type.ts) | Y
15+
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
16+
popupProps | Object | {} | 透传 Popup 组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/action-sheet/type.ts) | N
1617
showCancel | Boolean | true | 是否显示取消按钮 | N
18+
showOverlay | Boolean | true | 是否显示遮罩层 | N
1719
theme | String | list | 展示类型，列表和表格形式展示。可选项：list/grid | N
18-
visible | Boolean | false | 必需。显示与隐藏 | Y
19-
defaultVisible | Boolean | false | 必需。显示与隐藏。非受控属性 | Y
20+
visible | Boolean | false | 显示与隐藏 | N
21+
defaultVisible | Boolean | false | 显示与隐藏。非受控属性 | N
2022
onCancel | Function | | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击取消按钮时触发 | N
21-
onClose | Function | | TS 类型：`(context: { e: MouseEvent }) => void`<br/>关闭时触发 | N
22-
onClose | Function | | TS 类型：`(trigger: TriggerSource) => void`<br/>关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/action-sheet/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'command' \| 'select' `<br/> | N
23+
onClose | Function | | TS 类型：`(trigger: ActionSheetTriggerSource) => void`<br/>关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/action-sheet/type.ts)。<br/>`type ActionSheetTriggerSource = 'overlay' \| 'command' \| 'select' `<br/> | N
2324
onSelected | Function | | TS 类型：`(selected: ActionSheetItem \| string, index: number) => void`<br/>选择菜单项时触发 | N

‎src/action-sheet/defaultProps.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,9 @@ import { TdActionSheetProps } from './type';
77
export const actionSheetDefaultProps: TdActionSheetProps = {
88
align: 'center',
99
count: 8,
10-
items: [],
10+
popupProps: {},
1111
showCancel: true,
12+
showOverlay: true,
1213
theme: 'list',
1314
defaultVisible: false,
14-
visible: false,
15-
cancelText: '取消',
1615
};

‎src/action-sheet/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ type ActionSheetWithMethods = React.FC<ActionSheetProps> & {
1010
close: typeof close;
1111
};
1212

13+
export * from './type';
14+
1315
export const ActionSheet: ActionSheetWithMethods = attachMethodsToComponent(_ActionSheet, {
1416
show,
1517
close,

‎src/action-sheet/style/index.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
11
import '../../_common/style/mobile/components/action-sheet/v2/_index.less';
2-
import './index.less';

‎src/action-sheet/style/index.less‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

0 commit comments

Comments
 (0)