feat(Uploader): add support for deleteIcon prop customization (#2618)

Author: Miles-hxy

src/packages/uploader/demo.taro.tsx

@@ -17,6 +17,7 @@ import Demo10 from './demos/taro/demo10'
 import Demo11 from './demos/taro/demo11'
 import Demo12 from './demos/taro/demo12'
 import Demo13 from './demos/taro/demo13'
+import Demo14 from './demos/taro/demo14'
 
 const UploaderDemo = () => {
   const [translated] = useTranslate({
@@ -33,6 +34,7 @@ const UploaderDemo = () => {
       uploadXhrCustom: '自定义 Taro.uploadFile 上传方式(before-xhr-upload)',
       manualExecution: '选中文件后，通过按钮手动执行上传',
       disabled: '禁用状态',
+      customDeleteIcon: '自定义删除icon',
     },
     'zh-TW': {
       basic: '基础用法',
@@ -47,6 +49,7 @@ const UploaderDemo = () => {
       uploadXhrCustom: '自定義 Taro.uploadFile 上傳方式(before-xhr-upload)',
       manualExecution: '選取檔後，通過按鈕手動執行上傳',
       disabled: '禁用狀態',
+      customDeleteIcon: '自定義刪除icon',
     },
     'en-US': {
       basic: 'Basic usage',
@@ -63,6 +66,7 @@ const UploaderDemo = () => {
       manualExecution:
         'After selecting Chinese, manually perform the upload via the button',
       disabled: 'Disabled state',
+      customDeleteIcon: 'Custom DeleteIcon',
     },
   })
 
@@ -96,6 +100,8 @@ const UploaderDemo = () => {
         <Demo12 />
         <h2>{translated.disabled}</h2>
         <Demo13 />
+        <h2>{translated.customDeleteIcon}</h2>
+        <Demo14 />
       </div>
     </>
   )

src/packages/uploader/demo.tsx

@@ -14,6 +14,7 @@ import Demo10 from './demos/h5/demo10'
 import Demo11 from './demos/h5/demo11'
 import Demo12 from './demos/h5/demo12'
 import Demo13 from './demos/h5/demo13'
+import Demo14 from './demos/h5/demo14'
 
 const UploaderDemo = () => {
   const [translated] = useTranslate({
@@ -30,6 +31,7 @@ const UploaderDemo = () => {
       uploadXhrCustom: '自定义 xhr 上传方式(before-xhr-upload)',
       manualExecution: '选中文件后，通过按钮手动执行上传',
       disabled: '禁用状态',
+      customDeleteIcon: '自定义删除icon',
     },
     'zh-TW': {
       basic: '基础用法',
@@ -44,6 +46,7 @@ const UploaderDemo = () => {
       uploadXhrCustom: '自定義 xhr 上傳方式(before-xhr-upload)',
       manualExecution: '選取檔後，通過按鈕手動執行上傳',
       disabled: '禁用狀態',
+      customDeleteIcon: '自定義刪除icon',
     },
     'en-US': {
       basic: 'Basic usage',
@@ -59,6 +62,7 @@ const UploaderDemo = () => {
       manualExecution:
         'After selecting Chinese, manually perform the upload via the button',
       disabled: 'Disabled state',
+      customDeleteIcon: 'Custom DeleteIcon',
     },
   })
 
@@ -91,6 +95,8 @@ const UploaderDemo = () => {
         <Demo12 />
         <h2>{translated.disabled}</h2>
         <Demo13 />
+        <h2>{translated.customDeleteIcon}</h2>
+        <Demo14 />
       </div>
     </>
   )

src/packages/uploader/demos/h5/demo14.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Uploader } from '@nutui/nutui-react'
+import { Dongdong, Star } from '@nutui/icons-react'
+
+const Demo14 = () => {
+  const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
+  const defaultFileList: any = [
+    {
+      name: '文件文件文件文件1文件文件文件文件1文件文件文件文件1.png',
+      url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+      status: 'success',
+      message: '上传成功',
+      type: 'image',
+      uid: '122',
+    },
+  ]
+  const onDelete = (file: any, fileList: any) => {
+    console.log('delete事件触发', file, fileList)
+  }
+  return (
+    <Uploader
+      url={uploadUrl}
+      defaultValue={defaultFileList}
+      onDelete={onDelete}
+      uploadIcon={<Dongdong />}
+      deleteIcon={<Star />}
+    />
+  )
+}
+export default Demo14

src/packages/uploader/demos/taro/demo14.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Uploader } from '@nutui/nutui-react-taro'
+import { Dongdong, Star } from '@nutui/icons-react-taro'
+
+const Demo14 = () => {
+  const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
+  const defaultFileList: any = [
+    {
+      name: '文件文件文件文件1文件文件文件文件1文件文件文件文件1.png',
+      url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+      status: 'success',
+      message: '上传成功',
+      type: 'image',
+      uid: '122',
+    },
+  ]
+  const onDelete = (file: any, fileList: any) => {
+    console.log('delete事件触发', file, fileList)
+  }
+  return (
+    <Uploader
+      url={uploadUrl}
+      defaultValue={defaultFileList}
+      onDelete={onDelete}
+      uploadIcon={<Dongdong />}
+      deleteIcon={<Star />}
+    />
+  )
+}
+export default Demo14

src/packages/uploader/doc.en-US.md

@@ -161,6 +161,7 @@ app.post('/upload', upload.single('file'), (req, res) => {
 | headers | Set request headers | `object` | `{}` |
 | data | Uploading extra params or function which can return uploading extra params formData | `object` | `{}` |
 | uploadIcon | Upload area<a href="#/zh-CN/icon">icon name</a> | `React.ReactNode` | `-` |
+| deleteIcon | Delete area icon name</a> | `React.ReactNode` | `-` |
 | uploadLabel | Upload area tip | `React.ReactNode` | `-` |
 | xhrState | The success status (status) value of the interface response | `number` | `200` |
 | withCredentials | Support for sending cookie credential information | `boolean` | `false` |

src/packages/uploader/doc.md

@@ -162,6 +162,7 @@ app.post('/upload', upload.single('file'), (req, res) => {
 | headers | 设置上传的请求头部 | `object` | `{}` |
 | data | 附加上传的信息 formData | `object` | `{}` |
 | uploadIcon | 上传区域<a href="#/zh-CN/icon">图标名称</a> | `React.ReactNode` | `-` |
+| deleteIcon | 删除区域的图标名称 | `React.ReactNode` | `-` |
 | uploadLabel | 上传区域图片下方文字 | `React.ReactNode` | `-` |
 | xhrState | 接口响应的成功状态（status）值 | `number` | `200` |
 | withCredentials | 支持发送 cookie 凭证信息 | `Boolean` | `false` |

src/packages/uploader/doc.taro.md

@@ -163,6 +163,7 @@ app.post('/upload', upload.single('file'), (req, res) => {
 | headers | 设置上传的请求头部 | `object` | `{}` |
 | data | 附加上传的信息 formData | `object` | `{}` |
 | uploadIcon | 上传区域<a href="#/zh-CN/icon">图标名称</a> | `ReactNode` | `-` |
+| deleteIcon | 删除区域的图标名称 | `React.ReactNode` | `-` |
 | uploadLabel | 上传区域图片下方文字 | `string` | `&quot;&quot;` |
 | xhrState | 接口响应的成功状态（status）值 | `number` | `200` |
 | disabled | 是否禁用文件上传 | `boolean` | `false` |

src/packages/uploader/doc.zh-TW.md

@@ -161,6 +161,7 @@ app.post('/upload', upload.single('file'), (req, res) => {
 | headers | 設置上傳的請求頭部 | `object` | `{}` |
 | data | 附加上傳的信息 formData | `object` | `{}` |
 | uploadIcon | 上傳區域<a href="#/zh-CN/icon">圖標名稱</a> | `React.ReactNode` | `-` |
+| deleteIcon | 刪除區域的圖標名稱 | `React.ReactNode` | `-` |
 | uploadLabel | 上傳區域圖片下方文字 | `React.ReactNode` | `-` |
 | xhrState | 接口響應的成功狀態（status）值 | `number` | `200` |
 | withCredentials | 支持發送 cookie 憑證信息 | `Boolean` | `false` |

src/packages/uploader/preview.taro.tsx

@@ -5,7 +5,7 @@ import {
   Link as LinkIcon,
   Loading,
 } from '@nutui/icons-react-taro'
-import { Image } from '@tarojs/components'
+import { Image, View } from '@tarojs/components'
 import Progress from '@/packages/progress/index.taro'
 import { FileItem } from '@/packages/uploader/file-item'
 import { ERROR } from '@/packages/uploader/upload'
@@ -17,6 +17,7 @@ export const Preview: React.FunctionComponent<any> = ({
   onDeleteItem,
   handleItemClick,
   previewUrl,
+  deleteIcon,
   children,
 }) => {
   const renderIcon = (item: FileItem) => {
@@ -37,11 +38,12 @@ export const Preview: React.FunctionComponent<any> = ({
               key={item.uid}
             >
               {previewType === 'picture' && !children && deletable && (
-                <Failure
-                  color="rgba(0,0,0,0.6)"
+                <View
                   className="close"
                   onClick={() => onDeleteItem(item, index)}
-                />
+                >
+                  {deleteIcon}
+                </View>
               )}
               {previewType === 'picture' && !children && (
                 <div className="nut-uploader-preview-img">

src/packages/uploader/preview.tsx

@@ -13,6 +13,7 @@ export const Preview: React.FunctionComponent<any> = ({
   onDeleteItem,
   handleItemClick,
   previewUrl,
+  deleteIcon,
   children,
 }) => {
   const renderIcon = (item: FileItem) => {
@@ -33,11 +34,12 @@ export const Preview: React.FunctionComponent<any> = ({
               key={item.uid}
             >
               {previewType === 'picture' && !children && deletable && (
-                <Failure
-                  color="rgba(0,0,0,0.6)"
-                  className="close"
+                <div
                   onClick={() => onDeleteItem(item, index)}
-                />
+                  className="close"
+                >
+                  {deleteIcon}
+                </div>
               )}
               {previewType === 'picture' && !children && (
                 <div className="nut-uploader-preview-img">