diff --git a/src/packages/empty/demo.taro.tsx b/src/packages/empty/demo.taro.tsx index b450fda6d8..dc2d0ecdc6 100644 --- a/src/packages/empty/demo.taro.tsx +++ b/src/packages/empty/demo.taro.tsx @@ -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({ @@ -18,6 +19,7 @@ const EmptyDemo = () => { b840c88f: '图片类型,内置3个', a74a1fd4: '自定义图片', '8dab2f66': '底部内容', + actions: '自定义操作', }, 'zh-TW': { ce5c5446: '基礎用法', @@ -26,6 +28,7 @@ const EmptyDemo = () => { b840c88f: '圖片類型,內置3個', a74a1fd4: '自定義圖片', '8dab2f66': '底部內容', + actions: '自定義操作', }, 'en-US': { ce5c5446: 'Basic usage', @@ -34,6 +37,7 @@ const EmptyDemo = () => { b840c88f: 'Picture type, built-in 3', a74a1fd4: 'Custom image', '8dab2f66': 'Bottom content', + actions: 'Actions', }, }) @@ -53,6 +57,8 @@ const EmptyDemo = () => {

{translated['8dab2f66']}

+

{translated.actions}

+ ) diff --git a/src/packages/empty/demo.tsx b/src/packages/empty/demo.tsx index ef49b69847..3041eb9c6b 100644 --- a/src/packages/empty/demo.tsx +++ b/src/packages/empty/demo.tsx @@ -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({ @@ -16,6 +17,7 @@ const EmptyDemo = () => { b840c88f: '图片类型,内置3个', a74a1fd4: '自定义图片', '8dab2f66': '底部内容', + actions: '自定义操作', }, 'zh-TW': { ce5c5446: '基礎用法', @@ -24,6 +26,7 @@ const EmptyDemo = () => { b840c88f: '圖片類型,內置3個', a74a1fd4: '自定義圖片', '8dab2f66': '底部內容', + actions: '自定義操作', }, 'en-US': { ce5c5446: 'Basic usage', @@ -32,6 +35,7 @@ const EmptyDemo = () => { b840c88f: 'Picture type, built-in 3', a74a1fd4: 'Custom image', '8dab2f66': 'Bottom content', + actions: 'Actions', }, }) @@ -49,6 +53,8 @@ const EmptyDemo = () => {

{translated['8dab2f66']}

+

{translated.actions}

+ ) } diff --git a/src/packages/empty/demos/h5/demo7.tsx b/src/packages/empty/demos/h5/demo7.tsx new file mode 100644 index 0000000000..3d34af9ca1 --- /dev/null +++ b/src/packages/empty/demos/h5/demo7.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import { Empty, Toast } from '@nutui/nutui-react' + +const Demo7 = () => { + return ( + { + Toast.show({ title: 'Action Click!' }) + }, + }, + ]} + /> + ) +} +export default Demo7 diff --git a/src/packages/empty/demos/taro/demo7.tsx b/src/packages/empty/demos/taro/demo7.tsx new file mode 100644 index 0000000000..a70f945726 --- /dev/null +++ b/src/packages/empty/demos/taro/demo7.tsx @@ -0,0 +1,25 @@ +import React from 'react' +import { Empty, Toast } from '@nutui/nutui-react-taro' + +const Demo7 = () => { + return ( + <> + + { + Toast.show('toast-empty', { title: 'Action Click!' }) + }, + }, + ]} + /> + + ) +} +export default Demo7 diff --git a/src/packages/empty/doc.en-US.md b/src/packages/empty/doc.en-US.md index a5aa921d6a..1ea024f151 100644 --- a/src/packages/empty/doc.en-US.md +++ b/src/packages/empty/doc.en-US.md @@ -60,6 +60,14 @@ import { Empty } from '@nutui/nutui-react' ::: +### Actions + +:::demo + + + +::: + ## Empty ### Props @@ -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 + +| 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 diff --git a/src/packages/empty/doc.md b/src/packages/empty/doc.md index 48ba74e437..7987476e21 100644 --- a/src/packages/empty/doc.md +++ b/src/packages/empty/doc.md @@ -60,6 +60,14 @@ import { Empty } from '@nutui/nutui-react' ::: +### 自定义操作 + +:::demo + + + +::: + ## Empty ### Props @@ -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 + +| 属性 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| 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` | `-` | ## 主题定制 diff --git a/src/packages/empty/doc.taro.md b/src/packages/empty/doc.taro.md index 838bb5124b..f472d3f085 100644 --- a/src/packages/empty/doc.taro.md +++ b/src/packages/empty/doc.taro.md @@ -60,6 +60,14 @@ import { Empty } from '@nutui/nutui-react-taro' ::: +### 自定义操作 + +:::demo + + + +::: + ## Empty ### Props @@ -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 + +| 属性 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| 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` | `-` | ## 主题定制 diff --git a/src/packages/empty/doc.zh-TW.md b/src/packages/empty/doc.zh-TW.md index e80c5f9f76..8a3fe7466c 100644 --- a/src/packages/empty/doc.zh-TW.md +++ b/src/packages/empty/doc.zh-TW.md @@ -60,6 +60,14 @@ import { Empty } from '@nutui/nutui-react' ::: +### 自定義操作 + +:::demo + + + +::: + ## Empty ### Props @@ -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 + +| 屬性 | 說明 | 類型 | 默認值 | +| --- | --- | --- | --- | +| 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` | `-` | ## 主題定製 diff --git a/src/packages/empty/empty.taro.tsx b/src/packages/empty/empty.taro.tsx index fc7d63d680..f37cdc1075 100644 --- a/src/packages/empty/empty.taro.tsx +++ b/src/packages/empty/empty.taro.tsx @@ -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 @@ -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} diff --git a/src/packages/empty/empty.tsx b/src/packages/empty/empty.tsx index ea95ce36f1..6117a84344 100644 --- a/src/packages/empty/empty.tsx +++ b/src/packages/empty/empty.tsx @@ -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 @@ -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 @@ -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} diff --git a/src/packages/empty/types.ts b/src/packages/empty/types.ts index e80b7b34ac..e9fb72be2d 100644 --- a/src/packages/empty/types.ts +++ b/src/packages/empty/types.ts @@ -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 } diff --git a/src/packages/empty/utils.ts b/src/packages/empty/utils.ts new file mode 100644 index 0000000000..a2b69687f1 --- /dev/null +++ b/src/packages/empty/utils.ts @@ -0,0 +1,8 @@ +import { EmptyAction } from './types' + +export const getButtonType = (actions: Array, 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' +}