fix(empty): actions add support for events

jdf2e · Dec 11, 2024 · fb9e2f0 · fb9e2f0
1 parent 601b5d1
commit fb9e2f0
Show file tree

Hide file tree

Showing 12 changed files with 177 additions and 16 deletions.
diff --git 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: 'Actions',
     },
     'zh-TW': {
       ce5c5446: '基礎用法',
@@ -26,6 +28,7 @@ const EmptyDemo = () => {
       b840c88f: '圖片類型，內置3個',
       a74a1fd4: '自定義圖片',
       '8dab2f66': '底部內容',
+      actions: '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 = () => {
         <Demo5 />
         <h2>{translated['8dab2f66']}</h2>
         <Demo6 />
+        <h2>{translated.actions}</h2>
+        <Demo7 />
       </div>
     </>
   )

diff --git 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: 'Actions',
     },
     'zh-TW': {
       ce5c5446: '基礎用法',
@@ -24,6 +26,7 @@ const EmptyDemo = () => {
       b840c88f: '圖片類型，內置3個',
       a74a1fd4: '自定義圖片',
       '8dab2f66': '底部內容',
+      actions: '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 = () => {
       <Demo5 />
       <h2>{translated['8dab2f66']}</h2>
       <Demo6 />
+      <h2>{translated.actions}</h2>
+      <Demo7 />
     </div>
   )
 }

diff --git a/src/packages/empty/demos/h5/demo7.tsx 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 (
+    <Empty
+      status="error"
+      description="加载失败"
+      style={{ marginBottom: '20px' }}
+      actions={[
+        {
+          text: 'Action',
+          type: 'info',
+          onClick: () => {
+            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
@@ -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
diff --git 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
+
+<CodeBlock src='h5/demo7.tsx'></CodeBlock>
+
+:::
+
 ## 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>` | `[]` |
+
+### EmptyAction
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| text | The text | ReactNode | - |
+| className | Class name of the action button | string | - |
+| style | Style of the action button | CSSProperties | - |
+| type | Type of the action button | ButtonType | - |
+| size | Size of the action button | ButtonSize | - |
+| fill | Fill of the action button | ButtonFill | - |
+| disabled | Whether disabled state or not | boolean | false |
+| onClick | Triggered on click | () =\> void | - |
 
 ## Theming
 

diff --git a/src/packages/empty/doc.md b/src/packages/empty/doc.md
@@ -60,6 +60,14 @@ import { Empty } from '@nutui/nutui-react'
 
 :::
 
+### Actions
+
+:::demo
+
+<CodeBlock src='h5/demo7.tsx'></CodeBlock>
+
+:::
+
 ## 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>` | `[]` |
+
+### 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
@@ -60,6 +60,14 @@ import { Empty } from '@nutui/nutui-react-taro'
 
 :::
 
+### Actions
+
+:::demo
+
+<CodeBlock src='taro/demo7.tsx'></CodeBlock>
+
+:::
+
 ## 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>` | `[]` |
+
+### 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
@@ -60,6 +60,14 @@ import { Empty } from '@nutui/nutui-react'
 
 :::
 
+### Actions
+
+:::demo
+
+<CodeBlock src='h5/demo7.tsx'></CodeBlock>
+
+:::
+
 ## 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>` | `[]` |
+
+### 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
@@ -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}
               </Button>

diff --git 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}
               </Button>

diff --git 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
@@ -0,0 +1,6 @@
+export const getButtonType = (actions, index) => {
+  const action = actions[index]
+  if (!actions || actions.length === 0) return 'default'
+  if (action.type) return action.type
+  actions.length > 1 && index === 0 ? 'default' : 'primary'
+}