Skip to content

Commit

Permalink
fix(empty): actions add support for events (#2854)
Browse files Browse the repository at this point in the history
* fix(empty): actions add support for events

* fix: toast in taro environment

* fix: types

* fix: actions type

* fix: actions type

* fix: docs type

* fix: docs type

* fix: docs type
  • Loading branch information
oasis-cloud authored Dec 11, 2024
1 parent 67e02b5 commit f0c47ec
Show file tree
Hide file tree
Showing 12 changed files with 182 additions and 16 deletions.
6 changes: 6 additions & 0 deletions src/packages/empty/demo.taro.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import Demo3 from './demos/taro/demo3'
import Demo4 from './demos/taro/demo4'
import Demo5 from './demos/taro/demo5'
import Demo6 from './demos/taro/demo6'
import Demo7 from './demos/taro/demo7'

const EmptyDemo = () => {
const [translated] = useTranslate({
Expand All @@ -18,6 +19,7 @@ const EmptyDemo = () => {
b840c88f: '图片类型,内置3个',
a74a1fd4: '自定义图片',
'8dab2f66': '底部内容',
actions: '自定义操作',
},
'zh-TW': {
ce5c5446: '基礎用法',
Expand All @@ -26,6 +28,7 @@ const EmptyDemo = () => {
b840c88f: '圖片類型,內置3個',
a74a1fd4: '自定義圖片',
'8dab2f66': '底部內容',
actions: '自定義操作',
},
'en-US': {
ce5c5446: 'Basic usage',
Expand All @@ -34,6 +37,7 @@ const EmptyDemo = () => {
b840c88f: 'Picture type, built-in 3',
a74a1fd4: 'Custom image',
'8dab2f66': 'Bottom content',
actions: 'Actions',
},
})

Expand All @@ -53,6 +57,8 @@ const EmptyDemo = () => {
<Demo5 />
<h2>{translated['8dab2f66']}</h2>
<Demo6 />
<h2>{translated.actions}</h2>
<Demo7 />
</div>
</>
)
Expand Down
6 changes: 6 additions & 0 deletions src/packages/empty/demo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Demo3 from './demos/h5/demo3'
import Demo4 from './demos/h5/demo4'
import Demo5 from './demos/h5/demo5'
import Demo6 from './demos/h5/demo6'
import Demo7 from './demos/h5/demo7'

const EmptyDemo = () => {
const [translated] = useTranslate({
Expand All @@ -16,6 +17,7 @@ const EmptyDemo = () => {
b840c88f: '图片类型,内置3个',
a74a1fd4: '自定义图片',
'8dab2f66': '底部内容',
actions: '自定义操作',
},
'zh-TW': {
ce5c5446: '基礎用法',
Expand All @@ -24,6 +26,7 @@ const EmptyDemo = () => {
b840c88f: '圖片類型,內置3個',
a74a1fd4: '自定義圖片',
'8dab2f66': '底部內容',
actions: '自定義操作',
},
'en-US': {
ce5c5446: 'Basic usage',
Expand All @@ -32,6 +35,7 @@ const EmptyDemo = () => {
b840c88f: 'Picture type, built-in 3',
a74a1fd4: 'Custom image',
'8dab2f66': 'Bottom content',
actions: 'Actions',
},
})

Expand All @@ -49,6 +53,8 @@ const EmptyDemo = () => {
<Demo5 />
<h2>{translated['8dab2f66']}</h2>
<Demo6 />
<h2>{translated.actions}</h2>
<Demo7 />
</div>
)
}
Expand Down
22 changes: 22 additions & 0 deletions src/packages/empty/demos/h5/demo7.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React from 'react'
import { Empty, Toast } from '@nutui/nutui-react'

const Demo7 = () => {
return (
<Empty
status="error"
description="加载失败"
style={{ marginBottom: '20px' }}
actions={[
{
text: 'Action',
type: 'info',
onClick: () => {
Toast.show({ title: 'Action Click!' })
},
},
]}
/>
)
}
export default Demo7
25 changes: 25 additions & 0 deletions src/packages/empty/demos/taro/demo7.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import React from 'react'
import { Empty, Toast } from '@nutui/nutui-react-taro'

const Demo7 = () => {
return (
<>
<Toast id="toast-empty" />
<Empty
status="error"
description="加载失败"
style={{ marginBottom: '20px' }}
actions={[
{
text: 'Action',
type: 'info',
onClick: () => {
Toast.show('toast-empty', { title: 'Action Click!' })
},
},
]}
/>
</>
)
}
export default Demo7
23 changes: 22 additions & 1 deletion src/packages/empty/doc.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,14 @@ import { Empty } from '@nutui/nutui-react'

:::

### Actions

:::demo

<CodeBlock src='h5/demo7.tsx'></CodeBlock>

:::

## Empty

### Props
Expand All @@ -72,7 +80,20 @@ import { Empty } from '@nutui/nutui-react'
| description | Description below the image | `ReactNode` | `-` |
| size | Size of component,used by full screen or half screen | `small` \| `base` | `base` |
| status | The Default error type | `empty` \| `error` \| `network` | `empty` |
| actions | Actions of operation | `Array` | `[]` |
| actions | Actions of operation | `Array<EmptyAction>` | `[]` |

### EmptyAction

| Property | Description | Type | Default |
| --- | --- | --- | --- |
| text | text | `ReactNode` | `-` |
| className | The class name of the Button component | `string` | `-` |
| style | style of Button component | `CSSProperties` | `-` |
| type | type of Button component | `ButtonType` | `-` |
| size | The size of the Button component | `ButtonSize` | `-` |
| fill | fill property of Button component | `ButtonFill` | `-` |
| disabled | Whether to disable | `boolean` | `false` |
| onClick | onClick of Button component | `() => void` | `-` |

## Theming

Expand Down
23 changes: 22 additions & 1 deletion src/packages/empty/doc.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,14 @@ import { Empty } from '@nutui/nutui-react'

:::

### 自定义操作

:::demo

<CodeBlock src='h5/demo7.tsx'></CodeBlock>

:::

## Empty

### Props
Expand All @@ -72,7 +80,20 @@ import { Empty } from '@nutui/nutui-react'
| description | 图片下方的描述文字 | `ReactNode` | `-` |
| size | 组件整体大小,适配于全屏或半屏 | `small` \| `base` | `base` |
| status | 默认图片错误类型 | `empty` \| `error` \| `network` | `empty` |
| actions | 可用于处理操作的一组数据 | `Array` | `[]` |
| actions | 可用于处理操作的一组数据 | `Array<EmptyAction>` | `[]` |

### EmptyAction

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| text | 文本 | `ReactNode` | `-` |
| className | Button 组件的类名 | `string` | `-` |
| style | Button 组件的 style | `CSSProperties` | `-` |
| type | Button 组件的 type | `ButtonType` | `-` |
| size | Button 组件的 size | `ButtonSize` | `-` |
| fill | Button 组件的 fill 属性 | `ButtonFill` | `-` |
| disabled | 是否禁用 | `boolean` | `false` |
| onClick | Button 组件的 onClick | `() => void` | `-` |

## 主题定制

Expand Down
23 changes: 22 additions & 1 deletion src/packages/empty/doc.taro.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,14 @@ import { Empty } from '@nutui/nutui-react-taro'

:::

### 自定义操作

:::demo

<CodeBlock src='taro/demo7.tsx'></CodeBlock>

:::

## Empty

### Props
Expand All @@ -72,7 +80,20 @@ import { Empty } from '@nutui/nutui-react-taro'
| description | 图片下方的描述文字 | `ReactNode` | `-` |
| size | 组件整体大小,适配于全屏或半屏 | `small` \| `base` | `base` |
| status | 默认图片错误类型 | `empty` \| `error` \| `network` | `empty` |
| actions | 可用于处理操作的一组数据 | `Array` | `[]` |
| actions | 可用于处理操作的一组数据 | `Array<EmptyAction>` | `[]` |

### EmptyAction

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| text | 文本 | `ReactNode` | `-` |
| className | Button 组件的类名 | `string` | `-` |
| style | Button 组件的 style | `CSSProperties` | `-` |
| type | Button 组件的 type | `ButtonType` | `-` |
| size | Button 组件的 size | `ButtonSize` | `-` |
| fill | Button 组件的 fill 属性 | `ButtonFill` | `-` |
| disabled | 是否禁用 | `boolean` | `false` |
| onClick | Button 组件的 onClick | `() => void` | `-` |

## 主题定制

Expand Down
23 changes: 22 additions & 1 deletion src/packages/empty/doc.zh-TW.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,14 @@ import { Empty } from '@nutui/nutui-react'

:::

### 自定義操作

:::demo

<CodeBlock src='h5/demo7.tsx'></CodeBlock>

:::

## Empty

### Props
Expand All @@ -72,7 +80,20 @@ import { Empty } from '@nutui/nutui-react'
| description | 圖片下方的描述文字 | `ReactNode` | `-` |
| size | 組件整體大小,適配於全屏或半屏 | `small` \| `base` | `base` |
| status | 默認圖片錯誤類型 | `empty` \| `error` \| `network` | `empty` |
| actions | 可用於處理操作的一組數據 | `Array` | `[]` |
| actions | 可用於處理操作的一組數據 | `Array<EmptyAction>` | `[]` |

### EmptyAction

| 屬性 | 說明 | 類型 | 默認值 |
| --- | --- | --- | --- |
| text | 文本 | `ReactNode` | `-` |
| className | Button 組件的類名 | `string` | `-` |
| style | Button 組件的 style | `CSSProperties` | `-` |
| type | Button 組件的 type | `ButtonType` | `-` |
| size | Button 組件的 size | `ButtonSize` | `-` |
| fill | Button 組件的 fill 屬性 | `ButtonFill` | `-` |
| disabled | 是否禁用 | `boolean` | `false` |
| onClick | Button 組件的 onClick | `() => void` | `-` |

## 主題定製

Expand Down
12 changes: 7 additions & 5 deletions src/packages/empty/empty.taro.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import classNames from 'classnames'
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
import type { EmptyAction } from './types'
import { Button } from '@/packages/button/button.taro'
import { getButtonType } from '@/packages/empty/utils'

type statusOptions = {
[key: string]: string
Expand Down Expand Up @@ -113,12 +114,13 @@ export const Empty: FunctionComponent<
[`${classPrefix}-actions-left`]:
actions.length > 1 && index === 0,
})}
type={`${
actions.length > 1 && index === 0 ? 'default' : 'primary'
}`}
size="small"
fill="outline"
style={item.style}
type={getButtonType(actions, index)}
size={item.size || 'small'}
fill={item.fill || 'outline'}
disabled={item.disabled || false}
key={`action-${index}`}
onClick={item.onClick || (() => undefined)}
>
{item?.text}
</Button>
Expand Down
15 changes: 9 additions & 6 deletions src/packages/empty/empty.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import React, { FunctionComponent, useEffect, useState, ReactNode } from 'react'
import React, { FunctionComponent, ReactNode, useEffect, useState } from 'react'
import classNames from 'classnames'
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
import { EmptyAction } from '@/packages/empty/index'

import Button from '../button'
import { getButtonType } from '@/packages/empty/utils'

type statusOptions = {
[key: string]: string
Expand All @@ -17,6 +18,7 @@ const defaultStatus: statusOptions = {
network:
'https://storage.360buyimg.com/imgtools/43c30f7e29-0d483d10-c0ac-11ee-bec4-eb4d2a09a51d.png',
}

export interface EmptyProps extends BasicComponent {
image?: ReactNode
imageSize: number | string
Expand Down Expand Up @@ -114,12 +116,13 @@ export const Empty: FunctionComponent<
[`${classPrefix}-actions-left`]:
actions.length > 1 && index === 0,
})}
type={`${
actions.length > 1 && index === 0 ? 'default' : 'primary'
}`}
size="small"
fill="outline"
style={item.style}
type={getButtonType(actions, index)}
size={item.size || 'small'}
fill={item.fill || 'outline'}
disabled={item.disabled || false}
key={`action-${index}`}
onClick={item.onClick || (() => undefined)}
>
{item?.text}
</Button>
Expand Down
12 changes: 11 additions & 1 deletion src/packages/empty/types.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,13 @@
import React from 'react'
import { ButtonFill, ButtonSize, ButtonType } from '@/packages/button'

export interface EmptyAction {
text: string
text: React.ReactNode
className?: string
style?: React.CSSProperties
type?: ButtonType
size?: ButtonSize
fill?: ButtonFill
disabled?: boolean
onClick?: () => void
}
8 changes: 8 additions & 0 deletions src/packages/empty/utils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { EmptyAction } from './types'

export const getButtonType = (actions: Array<EmptyAction>, index: number) => {
if (!actions || actions.length === 0) return 'default'
const action = actions[index]
if (action.type) return action.type
return actions.length > 1 && index === 0 ? 'default' : 'primary'
}

0 comments on commit f0c47ec

Please sign in to comment.