Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix/action sheet #840

Merged
merged 7 commits into from
Nov 13, 2024
Merged

Fix/action sheet #840

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0e03f1c
doc(date-time-picker): 1.完善年月日时分文档 2.调整demo展示顺序
sweet7788 Nov 1, 2024
356dd96
fix: action-sheet add SafeArea
sweet7788 Nov 11, 2024
af4a6e3
feature: add action-sheet props [safeArea]
sweet7788 Nov 13, 2024
e720c95
Merge branch 'mallfoundry:main' into fix/action-sheet
sweet7788 Nov 13, 2024
c4fd3bf
Merge branch 'mallfoundry:main' into main
sweet7788 Nov 13, 2024
fc3d6a6
Merge branch 'main' into fix/action-sheet
sweet7788 Nov 13, 2024
101dbea
doc: 完善action-sheet文档
sweet7788 Nov 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
202 changes: 106 additions & 96 deletions packages/core/src/action-sheet/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,23 @@ import { ActionSheet } from "@taroify/core"
```tsx
function BasicActionSheet() {
const [open, setOpen] = useState(false)
const actions = useMemo(() => [
{ name: "选项一", value: "1" },
{ name: "选项二", value: "2" },
{ name: "选项三", value: "3" },
], [])
const actions = useMemo(
() => [
{ name: "选项一", value: "1" },
{ name: "选项二", value: "2" },
{ name: "选项三", value: "3" },
],
[],
)
return (
<>
<Cell clickable isLink title="基础用法" onClick={() => setOpen(true)} />
<ActionSheet actions={actions} open={open} onSelect={() => setOpen(false)} onClose={setOpen} />
<Cell clickable isLink title="基础用法" onClick={() => setOpen(true)} />
<ActionSheet
actions={actions}
open={open}
onSelect={() => setOpen(false)}
onClose={setOpen}
/>
</>
)
}
Expand All @@ -38,19 +46,17 @@ function BasicActionSheet() {
```tsx
function ActionSheetWithCancel() {
const [open, setOpen] = useState(false)
const actions = useMemo(() => [
{ name: "选项一", value: "1" },
{ name: "选项二", value: "2" },
{ name: "选项三", value: "3" },
], [])
const actions = useMemo(
() => [
{ name: "选项一", value: "1" },
{ name: "选项二", value: "2" },
{ name: "选项三", value: "3" },
],
[],
)
return (
<>
<Cell
clickable
isLink
title="展示取消按钮"
onClick={() => setOpen(true)}
/>
<Cell clickable isLink title="展示取消按钮" onClick={() => setOpen(true)} />
<ActionSheet
cancelText="取消"
actions={actions}
Expand All @@ -71,19 +77,17 @@ function ActionSheetWithCancel() {
```tsx
function ActionSheetWithDescription() {
const [open, setOpen] = useState(false)
const actions = useMemo(() => [
{ name: "选项一", value: "1", subname: "这是一段描述信息" },
{ name: "选项二", value: "2" },
{ name: "选项三", value: "3" },
], [])
const actions = useMemo(
() => [
{ name: "选项一", value: "1", subname: "这是一段描述信息" },
{ name: "选项二", value: "2" },
{ name: "选项三", value: "3" },
],
[],
)
return (
<>
<Cell
clickable
title="展示描述信息"
isLink
onClick={() => setOpen(true)}
/>
<Cell clickable title="展示描述信息" isLink onClick={() => setOpen(true)} />
<ActionSheet
description="这是一段描述信息"
cancelText="取消"
Expand All @@ -101,14 +105,18 @@ function ActionSheetWithDescription() {
### 选项状态

通过 `loading` 和 `disabled` 将选项设置为加载状态或禁用状态，通过 `style`，`className` 修改样式

```tsx
function ActionSheetWithStatuses() {
const [open, setOpen] = useState(false)
const actions = useMemo(() => [
{ name: "选项一", value: "1", style: { color: "#ee0a24" } },
{ name: "选项二", value: "2", disabled: true },
{ name: "选项三", value: "3", loading: true },
], [])
const actions = useMemo(
() => [
{ name: "选项一", value: "1", style: { color: "#ee0a24" } },
{ name: "选项二", value: "2", disabled: true },
{ name: "选项三", value: "3", loading: true },
],
[],
)
return (
<>
<Cell clickable title="选项状态" isLink onClick={() => setOpen(true)} />
Expand All @@ -125,10 +133,12 @@ function ActionSheetWithStatuses() {
}
```

### 手动控制DOM
### 手动控制 DOM

使用 `ActionSheet.Button` 组件后，会在底部展示取消按钮，点击后关闭当前面板并触发 `onCancel` 事件。<br>
使用`ActionSheet.Action`组件添加选项， 通过 `loading` 和 `disabled` 将选项设置为加载状态或禁用状态 <br>
通过 `ActionSheet.Header` 组件可以在菜单顶部显示描述信息，通过选项的 `ActionSheet.Action.children` 属性可以在 `Action` 文字的下侧展示描述信息。

```tsx
function ActionSheetWithStatuses() {
const [open, setOpen] = useState(true)
Expand All @@ -147,87 +157,87 @@ function ActionSheetWithStatuses() {

### ActionSheet Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| defaultOpen | 默认是否显示动作面板 | _boolean_ | `false` |
| open | 是否显示动作面板 | _boolean_ | `false` |
| description | 选项上方的描述信息 | _ReactNode_ | - |
| cancelText | 取消按钮文字 | _ReactNode_ | - |
| actions | 面板选项列表 | _ActionSheetActionObject[]_ | - |
| className | 样式类名 | _string_ | - |
| style | 样式对象 | _CSSProperties_ | - |
| rounded | 是否为圆角 | _string_ | - |

### ActionSheetActionObject数据结构

| 参数 | 说明 | 类型 |
| --- | --- | --- |
| name | 标题 | _ReactNode_ |
| subname | 二级标题 | _ReactNode_ |
| disabled | 是否为禁用状态 | _boolean_ |
| loading | 是否为加载状态 | _boolean_ |
| value | 值 | _any_ |
| style | | |
| className | | |

| 参数 | 说明 | 类型 | 默认值 |
| ----------- | ------------------------------------- | --------------------------- | -------- |
| defaultOpen | 默认是否显示动作面板 | _boolean_ | `false` |
| open | 是否显示动作面板 | _boolean_ | `false` |
| description | 选项上方的描述信息 | _ReactNode_ | - |
| cancelText | 取消按钮文字 | _ReactNode_ | - |
| actions | 面板选项列表 | _ActionSheetActionObject[]_ | - |
| className | 样式类名 | _string_ | - |
| style | 样式对象 | _CSSProperties_ | - |
| rounded | 是否为圆角 | _string_ | - |
| safeArea | 安全区的位置，可选值为 `top` `bottom` | _string_ | `bottom` |

### ActionSheetActionObject 数据结构

| 参数 | 说明 | 类型 |
| --------- | -------------- | ----------- |
| name | 标题 | _ReactNode_ |
| subname | 二级标题 | _ReactNode_ |
| disabled | 是否为禁用状态 | _boolean_ |
| loading | 是否为加载状态 | _boolean_ |
| value | 值 | _any_ |
| style | | |
| className | | |

### ActionSheet.Backdrop Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| className | 样式类名 | _string_ | - |
| style | 样式对象 | _CSSProperties_ | - |
| duration | 动画时长，单位毫秒 | _number \| string_ | `300` |
| closeable | 点击是否可以关闭 | _boolean_ | `true` |
| 参数 | 说明 | 类型 | 默认值 |
| --------- | ------------------ | ------------------ | ------ |
| className | 样式类名 | _string_ | - |
| style | 样式对象 | _CSSProperties_ | - |
| duration | 动画时长，单位毫秒 | _number \| string_ | `300` |
| closeable | 点击是否可以关闭 | _boolean_ | `true` |

### ActionSheet.Header Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| className | 样式类名 | _string_ | - |
| style | 样式对象 | _CSSProperties_ | - |
| title | 标题 | _string_ | - |
| children | 描述信息 | _string_ | - |
| 参数 | 说明 | 类型 | 默认值 |
| --------- | -------- | --------------- | ------ |
| className | 样式类名 | _string_ | - |
| style | 样式对象 | _CSSProperties_ | - |
| title | 标题 | _string_ | - |
| children | 描述信息 | _string_ | - |

### ActionSheet.Action Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| className | 样式类名 | _string_ | - |
| style | 样式对象 | _CSSProperties_ | - |
| name | 标题 | _string_ | - |
| value | 选项值 | _string_ | - |
| disabled | 是否为禁用状态 | _boolean_ | - |
| loading | 是否为加载状态 | _boolean_ | - |
| children | 描述信息 | _string_ | - |
| 参数 | 说明 | 类型 | 默认值 |
| --------- | -------------- | --------------- | ------ |
| className | 样式类名 | _string_ | - |
| style | 样式对象 | _CSSProperties_ | - |
| name | 标题 | _string_ | - |
| value | 选项值 | _string_ | - |
| disabled | 是否为禁用状态 | _boolean_ | - |
| loading | 是否为加载状态 | _boolean_ | - |
| children | 描述信息 | _string_ | - |

### ActionSheet.Button Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| className | 按钮类名 | _string_ | - |
| style | 按钮样式 | _CSSProperties_ | - |
| type | 按钮类型，可选值为 `cancel` | _string_ | `button` |
| children | 按钮内容 | _string_ | - |
| 参数 | 说明 | 类型 | 默认值 |
| --------- | --------------------------- | --------------- | -------- |
| className | 按钮类名 | _string_ | - |
| style | 按钮样式 | _CSSProperties_ | - |
| type | 按钮类型，可选值为 `cancel` | _string_ | `button` |
| children | 按钮内容 | _string_ | - |

### ActionSheet Events

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| 事件名 | 说明 | 回调参数 |
| -------- | ---------------------------------------- | -------------------------------- |
| onSelect | 点击选项时触发，禁用或加载状态下不会触发 | _event: ActionSheet.ActionEvent_ |
| onCancel | 点击取消按钮时触发 | - |
| onClose | 关闭面板时触发 | - |
| onCancel | 点击取消按钮时触发 | - |
| onClose | 关闭面板时触发 | - |

## 主题定制

### 样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。

| 名称 | 默认值 | 描述 |
|-------------------------------------------|-------------------------|-----|
| --action-sheet-description-padding-bottom | _var(--padding-md)_ | - |
| --action-sheet-subname-margin-top | _var(--padding-xs)_ | - |
| --action-sheet-subname-color | _var(--gray-6)_ | - |
| --action-sheet-subname-font-size | _var(--font-size-sm)_ | - |
| --action-sheet-subname-line-height | _var(--line-height-sm)_ | - |
| 名称 | 默认值 | 描述 |
| ----------------------------------------- | ----------------------- | ---- |
| --action-sheet-description-padding-bottom | _var(--padding-md)_ | - |
| --action-sheet-subname-margin-top | _var(--padding-xs)_ | - |
| --action-sheet-subname-color | _var(--gray-6)_ | - |
| --action-sheet-subname-font-size | _var(--font-size-sm)_ | - |
| --action-sheet-subname-line-height | _var(--line-height-sm)_ | - |
19 changes: 12 additions & 7 deletions packages/core/src/action-sheet/action-sheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import ActionSheetContext from "./action-sheet.context"
import { ActionSheetActionObject } from "./action-sheet.shared"
import ActionSheetHeader from "./action-sheet-header"
import ActionSheetAction from "./action-sheet-action"
import SafeArea from "../safe-area"

export interface ActionSheetProps extends SheetProps {
// title?: ReactNode
Expand All @@ -24,19 +25,23 @@ function ActionSheet({
className,
onSelect,
children: childrenProp,
safeArea = "bottom",
...restProps
}: ActionSheetProps) {
const renderChildren = () => {
if (childrenProp) {
return childrenProp
}
return <>
{ description && <ActionSheetHeader children={description} /> }
{
(actions || []).map(({ subname, ...rest }, index) => <ActionSheetAction key={index} {...rest} children={subname} />)
}
{ cancelText && <Sheet.Button type="cancel" children={cancelText} /> }
</>
return (
<>
{description && <ActionSheetHeader children={description} />}
{(actions || []).map(({ subname, ...rest }, index) => (
<ActionSheetAction key={index} {...rest} children={subname} />
))}
{cancelText && <Sheet.Button type="cancel" children={cancelText} />}
<SafeArea position={safeArea} />
</>
)
}
return (
<ActionSheetContext.Provider value={{ onSelect }}>
Expand Down
3 changes: 2 additions & 1 deletion packages/core/src/sheet/sheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { isElementOf } from "../utils/validate"
import SheetHeader from "./sheet-header"
import SheetContext from "./sheet.context"
import { SheetItemObject } from "./sheet.shared"
import { SafeAreaPosition } from "../safe-area"

interface SheetChildren {
backdrop?: ReactNode
Expand Down Expand Up @@ -59,7 +60,7 @@ export interface SheetProps extends ViewProps {
open?: boolean
rounded?: boolean
children?: ReactNode

safeArea?: SafeAreaPosition
onSelect?(item: SheetItemObject): void

onCancel?(): void
Expand Down