feat(Uploader): add support for deleteIcon prop customization#2618
feat(Uploader): add support for deleteIcon prop customization#2618oasis-cloud merged 1 commit intojdf2e:nextfrom
Conversation
Walkthrough此次更改在上传组件中引入了新的演示组件 Changes
Possibly related PRs
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## next #2618 +/- ##
=======================================
Coverage 82.95% 82.96%
=======================================
Files 219 219
Lines 17908 17912 +4
Branches 2547 2547
=======================================
+ Hits 14856 14860 +4
Misses 3047 3047
Partials 5 5 ☔ View full report in Codecov by Sentry. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Outside diff range and nitpick comments (12)
src/packages/uploader/demos/h5/demo14.tsx (1)
6-6: 考虑使用更适合的URL或添加注释使用常量来定义上传URL是一个很好的做法。然而，在演示组件中使用模拟服务器的URL可能不太合适。
建议：
- 使用一个更贴近实际使用场景的URL。
- 或者添加一个注释，解释为什么在这里使用模拟服务器URL。
例如：
// 注意：这是一个模拟服务器URL，仅用于演示目的 const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'src/packages/uploader/demos/taro/demo14.tsx (2)
7-16: 建议缩短示例文件名defaultFileList中的文件名相当长（"文件文件文件文件1文件文件文件文件1文件文件文件文件1.png"）。虽然这可能是为了测试长文件名的显示效果，但在实际使用中可能会导致UI问题。
考虑使用更短的文件名，例如：
- name: '文件文件文件文件1文件文件文件文件1文件文件文件文件1.png', + name: '示例文件1.png',
17-19: 建议添加注释说明onDelete函数的用途onDelete函数目前只是将删除的文件和更新后的文件列表记录到控制台。虽然这对于演示目的来说是足够的，但在实际应用中可能需要更复杂的逻辑。
建议添加一个注释来解释这一点：
const onDelete = (file: any, fileList: any) => { + // 注意：这只是一个演示。在实际应用中，您应该在此处实现真正的文件删除逻辑。 console.log('delete事件触发', file, fileList) }src/packages/uploader/demo.tsx (2)
34-34: 翻译键添加正确，建议考虑增加上下文新的翻译键 'customDeleteIcon' 已正确添加到所有语言对象中。翻译内容看起来适合各个语言。
为了提高可理解性，建议考虑在翻译中添加更多上下文。例如：
- customDeleteIcon: '自定义删除icon', + customDeleteIcon: '上传组件：自定义删除图标',这样可以让其他开发者更容易理解这个翻译的用途。
Also applies to: 49-49, 65-65
98-99: 新的 Demo14 组件正确添加，建议添加注释新的 Demo14 组件及其标题已正确添加到组件列表的末尾。标题正确使用了新添加的翻译键。
为了提高代码的可维护性，建议在 Demo14 组件之前添加一个简短的注释，解释这个演示的目的。例如：
<h2>{translated.customDeleteIcon}</h2> +{/* 演示如何自定义上传组件的删除图标 */} <Demo14 />这将帮助其他开发者更快地理解这个新添加的演示的作用。
src/packages/uploader/demo.taro.tsx (1)
37-37: 翻译正确添加，建议小改进。新的 "customDeleteIcon" 翻译已正确添加到所有三种语言中。翻译内容恰当且放置位置一致。
为保持一致性，建议将英文翻译 "Custom DeleteIcon" 改为 "Custom delete icon"，以匹配其他翻译项的大小写格式。
Also applies to: 52-52, 69-69
src/packages/uploader/preview.tsx (1)
37-42: 删除图标渲染逻辑的改进新的实现方式很好地支持了自定义删除图标的功能，同时保留了原有的点击处理和样式类。这个改动增强了组件的可定制性，符合 PR 的目标。
建议考虑添加一个 aria-label 属性来提高可访问性：
<div onClick={() => onDeleteItem(item, index)} className="close" + aria-label="删除项目" > {deleteIcon} </div>这将帮助使用屏幕阅读器的用户更好地理解这个元素的功能。
src/packages/uploader/preview.taro.tsx (2)
20-21: 新属性deleteIcon添加正确
deleteIcon属性的添加符合PR的目标，允许自定义删除图标。这是一个很好的功能增强。建议更新组件的文档，详细说明
deleteIcon属性的用途和使用方法，以便其他开发者能够正确使用这个新功能。
41-46: 删除按钮渲染逻辑修改正确删除按钮的渲染逻辑修改符合PR的目标，允许使用自定义的删除图标。这个改动保留了原有的条件渲染逻辑和删除功能，同时提供了更大的灵活性。
为了提高可访问性，建议在
View组件上添加role="button"属性，并考虑添加适当的aria-label。例如：<View className="close" onClick={() => onDeleteItem(item, index)} role="button" aria-label="删除文件" > {deleteIcon} </View>这将有助于提高组件的可访问性，使其对使用辅助技术的用户更加友好。
src/packages/uploader/doc.md (1)
165-165: 新属性deleteIcon添加正确，建议稍作改进。
deleteIcon属性的添加符合PR的目标，允许自定义删除图标。属性类型和描述都很恰当。为了更清晰地表达这个属性的作用，建议稍微扩展一下描述：
- | deleteIcon | 删除区域的图标名称 | `React.ReactNode` | `-` | + | deleteIcon | 自定义删除区域的图标 | `React.ReactNode` | `-` |这样可以更直接地表明这个属性用于自定义图标。
src/packages/uploader/doc.taro.md (1)
166-166: 新属性deleteIcon添加正确，建议稍作改进。新增的
deleteIcon属性文档化得当，类型和默认值都已正确提供。这个添加与 PR 的目标一致，增强了 Uploader 组件的可定制性。为了使描述更加清晰，建议稍微扩展一下说明：
建议将描述修改为：
- | deleteIcon | 删除区域的图标名称 | `React.ReactNode` | `-` | + | deleteIcon | 自定义删除区域的图标，可以是图标名称或 React 节点 | `React.ReactNode` | `-` |这样可以更好地说明该属性的用途和灵活性。
src/packages/uploader/doc.en-US.md (1)
Line range hint
1-164: 建议添加deleteIcon属性的使用示例文档中已经正确添加了
deleteIcon属性的描述。为了进一步提高文档的完整性和用户友好性，建议在文档的示例部分添加一个使用deleteIcon属性的具体例子。这将帮助开发者更好地理解如何使用这个新属性。例如，可以在 "Basic usage" 或创建一个新的 "Custom delete icon" 示例部分来展示这个功能。
Also applies to: 165-200
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (12)
- src/packages/uploader/demo.taro.tsx (5 hunks)
- src/packages/uploader/demo.tsx (5 hunks)
- src/packages/uploader/demos/h5/demo14.tsx (1 hunks)
- src/packages/uploader/demos/taro/demo14.tsx (1 hunks)
- src/packages/uploader/doc.en-US.md (1 hunks)
- src/packages/uploader/doc.md (1 hunks)
- src/packages/uploader/doc.taro.md (1 hunks)
- src/packages/uploader/doc.zh-TW.md (1 hunks)
- src/packages/uploader/preview.taro.tsx (3 hunks)
- src/packages/uploader/preview.tsx (2 hunks)
- src/packages/uploader/uploader.taro.tsx (5 hunks)
- src/packages/uploader/uploader.tsx (5 hunks)
🔇 Additional comments (18)
src/packages/uploader/demos/h5/demo14.tsx (2)
1-3: 导入看起来很好！导入语句正确无误，包含了组件所需的所有必要依赖。使用命名导入图标是一个很好的做法。
20-28: 很好地展示了新功能！
Uploader组件的使用很好地展示了新的deleteIcon属性自定义功能。props 的传递正确，使用自定义图标增强了组件的视觉定制能力。特别值得注意的是：
deleteIcon属性的使用，展示了新增的删除图标自定义功能。uploadIcon的自定义使用，与deleteIcon形成了良好的对比。这个示例很好地展示了
Uploader组件的灵活性和可定制性。src/packages/uploader/demos/taro/demo14.tsx (2)
1-3: 导入语句看起来很好！导入语句正确地引入了所需的组件和图标。这些导入为组件的功能提供了必要的依赖。
5-29: 组件结构符合PR目标Demo14组件很好地展示了Uploader组件的使用，特别是自定义deleteIcon的功能，这与PR的目标完全一致。组件结构清晰，props使用恰当。
src/packages/uploader/demo.tsx (1)
17-17: 新的导入语句格式正确新添加的 Demo14 导入语句格式正确，并且与其他演示组件的导入方式保持一致。这有助于保持代码的一致性和可读性。
src/packages/uploader/demo.taro.tsx (2)
20-20: 导入语句正确添加。新的 Demo14 组件的导入语句已正确添加，并且遵循了现有的导入模式。
103-104: 新演示组件正确添加，建议验证功能。新的 Demo14 组件及其标题已正确添加到组件列表的末尾，并使用了翻译后的文本。
请确保 Demo14 组件正确实现了自定义删除图标的功能。可以运行以下脚本来检查 Demo14 的实现：
src/packages/uploader/preview.tsx (2)
16-16: 新增deleteIcon属性符合需求新增的
deleteIcon属性与 PR 的目标一致，允许自定义删除图标。这个改动增加了组件的灵活性，使用户可以根据需要自定义删除图标的外观。
Line range hint
1-138: 总体评价：成功实现了自定义删除图标的功能这些改动很好地实现了允许自定义删除图标的功能，同时保持了代码的简洁性和现有功能的完整性。主要亮点包括：
- 新增
deleteIcon属性，增加了组件的灵活性。- 更新了删除图标的渲染逻辑，支持自定义图标。
- 改动范围集中，没有引入不必要的复杂性。
这些更改符合 PR 的目标，提高了 Uploader 组件的可定制性。建议在合并这些更改之前，确保更新相关文档以反映新的
deleteIcon属性。src/packages/uploader/preview.taro.tsx (2)
8-8: 导入语句更新正确新增的
View组件导入与后续代码中的使用一致，这是一个必要且正确的更改。
Line range hint
1-146: 总体评价：改动符合预期且实现良好此PR成功地实现了
deleteIcon属性的添加和使用，允许自定义上传组件中的删除图标。主要改动包括：
- 添加了新的
deleteIcon属性- 更新了删除按钮的渲染逻辑以使用自定义图标
这些更改增强了组件的灵活性，同时保持了原有功能的完整性。建议在合并此PR之前：
- 更新组件文档，详细说明
deleteIcon属性的用途和使用方法- 考虑添加辅助功能属性（如
role和aria-label）以提高可访问性总的来说，这是一个有价值的功能增强，符合PR的目标。
src/packages/uploader/doc.en-US.md (1)
164-164: 新属性deleteIcon已添加到文档中新的
deleteIcon属性已正确添加到文档中，这将允许用户自定义删除区域的图标。这是一个很好的功能增强，可以提高组件的灵活性。建议：
- 确保组件的实现代码中已经支持这个新属性。
- 考虑在文档的其他相关部分（如示例代码或使用说明）中添加这个新属性的使用示例。
- 如果有中文版的文档，请确保也更新了相应的中文文档。
src/packages/uploader/uploader.tsx (3)
10-10: 导入语句更改正确
Failure图标的导入与新的deleteIcon属性实现一致。这个更改是合适的。
29-29: 新属性deleteIcon添加正确
deleteIcon属性的添加符合允许自定义删除图标的PR目标。使用React.ReactNode类型是合适的，因为它允许灵活传递不同类型的内容作为删除图标。建议为这个新属性添加相应的文档说明，以便其他开发者了解如何使用它。
98-98:deleteIcon属性的默认值设置和使用正确在
defaultProps中为deleteIcon设置默认值，并将其传递给Preview组件的做法是正确的。这确保了自定义删除图标的功能可以正常工作。建议考虑使用主题变量来设置默认图标的颜色，以提高组件的可定制性。例如：
deleteIcon: <Failure color="var(--nutui-color-text-disabled)" />,这样可以让图标颜色更容易适应不同的主题设置。
Also applies to: 416-416
src/packages/uploader/uploader.taro.tsx (3)
16-16: 导入语句更新正确导入语句的修改正确地包含了
Failure图标，这与新增的自定义删除图标功能相符。
76-76: 接口定义更新恰当在
UploaderProps接口中添加了deleteIcon属性，类型为React.ReactNode。这个改动与新功能相符，并且允许用户灵活地传入各种类型的图标。
Line range hint
1-562: 总结：deleteIcon 自定义功能实现完善此 PR 成功实现了 Uploader 组件中删除图标的自定义功能。主要更改包括：
- 更新了图标导入语句。
- 在
UploaderProps接口中添加了deleteIcon属性。- 在组件实现中正确处理和传递了
deleteIcon属性。这些更改都经过仔细审查，实现正确且与现有代码结构一致。新功能的添加增强了 Uploader 组件的灵活性，允许用户根据需求自定义删除图标。
建议的小改进（将默认删除图标抽取为常量）可以进一步提高代码的可维护性，但这不是必需的更改。
总的来说，这个 PR 质量很高，准备合并到主分支。
| 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', | ||
| }, | ||
| ] |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议使用更具体的类型定义
defaultFileList 提供了一个很好的文件对象结构示例。但是，使用 any 类型可能会导致类型安全性问题。
建议定义一个具体的接口来描述文件对象的结构，并使用该接口作为数组的类型。例如：
interface FileItem {
name: string;
url: string;
status: string;
message: string;
type: string;
uid: string;
}
const defaultFileList: FileItem[] = [
{
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) | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议改进 onDelete 函数的类型定义
onDelete 函数提供了基本的日志记录，这对调试很有帮助。但是，使用 any 类型作为参数可能会导致类型安全性问题。
建议使用更具体的类型来定义函数参数。例如：
const onDelete = (file: FileItem, fileList: FileItem[]) => {
console.log('delete事件触发', file, fileList)
}这里的 FileItem 是之前建议定义的接口。这样可以提高代码的类型安全性和可读性。
| | headers | 設置上傳的請求頭部 | `object` | `{}` | | ||
| | data | 附加上傳的信息 formData | `object` | `{}` | | ||
| | uploadIcon | 上傳區域<a href="#/zh-CN/icon">圖標名稱</a> | `React.ReactNode` | `-` | | ||
| | deleteIcon | 刪除區域的圖標名稱 | `React.ReactNode` | `-` | |
There was a problem hiding this comment.
💡 Codebase verification
发现问题：其他语言版本的文档缺少 deleteIcon 属性
在 src/packages/uploader/ 目录下，只有 doc.zh-TW.md 包含 deleteIcon 属性。请确保所有语言版本的文档都添加该属性，以保持文档的一致性。
- 缺失的文档文件：
doc.en-US.mddoc.zh-CN.md- 其他相关语言文档
🔗 Analysis chain
新增的 deleteIcon 屬性看起來不錯！
新增的 deleteIcon 屬性增強了 Uploader 組件的自定義能力，允許用戶自定義刪除區域的圖標。這個添加與文檔的整體風格一致，並提供了清晰的描述和類型信息。
請運行以下腳本來驗證其他語言版本的文檔是否也包含了這個新屬性：
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：檢查其他語言版本的文檔是否也包含了 deleteIcon 屬性
# 測試：搜索其他語言版本的文檔中是否存在 deleteIcon 屬性
rg --type md 'deleteIcon.*刪除區域' src/packages/uploader/
Length of output: 144
| mediaType: ['image', 'video'], | ||
| camera: 'back', | ||
| uploadIcon: <Photograph size="20px" color="#808080" />, | ||
| deleteIcon: <Failure color="rgba(0,0,0,0.6)" />, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
组件实现更新正确，建议小改进
组件实现的更改正确无误：
- 在
defaultProps中为deleteIcon设置了默认值。 - 在
InternalUploader组件中正确解构了deleteIcon属性。 deleteIcon被正确传递给了Preview子组件。
这些更改都符合新功能的要求。然而，为了提高代码的可维护性，建议考虑以下小改进：
考虑将默认的删除图标抽取为一个常量，例如：
const DEFAULT_DELETE_ICON = <Failure color="rgba(0,0,0,0.6)" />;
// 然后在 defaultProps 中使用：
deleteIcon: DEFAULT_DELETE_ICON,这样可以使代码更易于维护，并且如果将来需要在多个地方使用相同的默认图标，可以轻松复用。
Also applies to: 165-165, 536-536
2 participants
Summary by CodeRabbit
Demo14演示组件，展示自定义删除图标的功能。deleteIcon属性，允许用户自定义删除图标。deleteIcon属性的说明。