Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: custom Upload action icons removeIcon and downloadIcon #21363

Merged
merged 18 commits into from Feb 17, 2020

Conversation

sdhr27
Copy link
Contributor

@sdhr27 sdhr27 commented Feb 13, 2020

🤔 This is a ...

  • [☑️] New feature
  • Bug fix
  • Site / document update
  • Component style update
  • TypeScript definition update
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Other (about what?)

🔗 Related issue link

related issue link: Upload组件能否加个图标接口#20937
close #20937

💡 Background and solution

  1. When someone want to use custom remove icon and download icon in Upload.
  2. New members are added in API showUploadList to reach the goal.
  3. final API:

API

Property Description Type Default Version
showUploadList Whether to show default upload list, could be an object to specify showPreviewIcon, showRemoveIcon, showDownloadIcon, removeIcon and downloadIcon individually Boolean or { showPreviewIcon?: boolean, showDownloadIcon?: boolean, showRemoveIcon?: boolean, removeIcon?: React.ReactNode, downloadIcon?: React.ReactNode } true
Language Changelog
🇺🇸 English Add new interface for custom action icons for Upload.
🇨🇳 Chinese 为Upload组件添加新的接口来实现自定义交互图标

☑️ Self Check before Merge

  • [☑️] Doc is updated/provided or not needed
  • [☑️] Demo is updated/provided or not needed
  • [☑️] TypeScript definition is updated/provided or not needed
  • [☑️] Changelog is provided or not needed

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

Copy link

@tests-checker tests-checker bot left a comment

Could you please add tests to make sure this change works as expected?

@ant-design-bot
Copy link
Contributor

@ant-design-bot ant-design-bot commented Feb 13, 2020

@codesandbox-ci
Copy link

@codesandbox-ci codesandbox-ci bot commented Feb 13, 2020

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:

Sandbox Source
antd reproduction template Configuration

@@ -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)}>
Copy link
Member

@shaodahong shaodahong Feb 13, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

useless className?

Copy link
Contributor Author

@sdhr27 sdhr27 Feb 13, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

@shaodahong shaodahong Feb 13, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

@sdhr27 sdhr27 Feb 13, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you. I will change its className into "custom-remove-icon"

Copy link
Member

@shaodahong shaodahong Feb 13, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no, should remove className

Copy link
Contributor Author

@sdhr27 sdhr27 Feb 13, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will remove the className.

@yoyo837 yoyo837 changed the title feature: custom Upload action icons removeIcon and downloadIcon feat: custom Upload action icons removeIcon and downloadIcon Feb 13, 2020
@codecov
Copy link

@codecov codecov bot commented Feb 13, 2020

Codecov Report

Merging #21363 into master will increase coverage by 0.00%.
The diff coverage is n/a.

Impacted file tree graph

@@           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.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ef36e17...e9bdd01. Read the comment docs.

components/upload/UploadList.tsx Outdated Show resolved Hide resolved
components/upload/UploadList.tsx Outdated Show resolved Hide resolved
@afc163 afc163 merged commit a875bfd into ant-design:master Feb 17, 2020
17 checks passed
@ycjcl868 ycjcl868 mentioned this pull request Feb 24, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants