feat: custom Upload action icons removeIcon and downloadIcon #21363
Conversation
![tests-checker[bot]](https://avatars.githubusercontent.com/in/17064?s=60&v=4){kind=small}
|
|
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit e9bdd01:
|
components/upload/UploadList.tsx
Outdated
| @@ -170,13 +172,21 @@ export default class UploadList extends React.Component<UploadListProps, any> { | |||
| const linkProps = | |||
| typeof file.linkProps === 'string' ? JSON.parse(file.linkProps) : file.linkProps; | |||
|
|
|||
| const removeIcon = showRemoveIcon ? ( | |||
| const removeIcon = showRemoveIcon ? customRemoveIcon ? ( | |||
| <span title={locale.removeFile} className="anticon-delete" onClick={() => this.handleClose(file)}> | |||
There was a problem hiding this comment.
I add this className since most of the tests are based on className ‘anticon-delete’ and 'anticon-download'.
wrapper .find('.anticon-delete') .at(0) .simulate('click'); expect(handleRemove).toHaveBeenCalledWith(fileList[0]);
If someone pass a custom icon, the icon wrapper may not have these classNames, which could cause failed tests.
There was a problem hiding this comment.
anticon-delete and anticon-download means ant delete/download icon, if set custom icon, we can write
removeIcon = <i className="custom-remove-icon">remove</i>wrapper.find('.custom-remove-icon').simulate('click') it's also been fine.
There was a problem hiding this comment.
Thank you. I will change its className into "custom-remove-icon"
There was a problem hiding this comment.
I will remove the className.
yoyo837
changed the title
Codecov Report
@@ Coverage Diff @@
## master #21363 +/- ##
=======================================
Coverage 97.55% 97.56%
=======================================
Files 300 300
Lines 7003 7013 +10
Branches 1884 1935 +51
=======================================
+ Hits 6832 6842 +10
Misses 171 171 Continue to review full report at Codecov.
|
🤔 This is a ...
🔗 Related issue link
related issue link: Upload组件能否加个图标接口#20937
close #20937
💡 Background and solution
API
showPreviewIcon,showRemoveIcon,showDownloadIcon,removeIconanddownloadIconindividually☑️ Self Check before Merge
View rendered components/upload/demo/upload-custom-action-icon.md
View rendered components/upload/index.en-US.md
View rendered components/upload/index.zh-CN.md