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.

Sign up for GitHub

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

Jump to bottom

feat: resolve #24213 customize progress bar in upload #24319

Merged
merged 2 commits into from
May 20, 2020
Merged

feat: resolve #24213 customize progress bar in upload #24319

merged 2 commits into from
May 20, 2020

Conversation

morenyang
Copy link
Contributor

@morenyang morenyang commented May 20, 2020 •
edited
Loading

[中文版模板 / Chinese template]

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / documentation update
  • Demo update
  • Component style update
  • TypeScript definition update
  • Bundle size optimization
  • Perfermance optimization
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Other (about what?)

🔗 Related issue link

💡 Background and solution

  • Add progress property in Upload, and replaceprogressAttr property in UploadList to progress.

📝 Changelog

Language Changelog
🇺🇸 English Support customize progress bar in upload
🇨🇳 Chinese 允许自定义上传组件中的进度条

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

  • 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/customize-progress-bar.md

@ant-design-bot
Copy link
Contributor

ant-design-bot commented May 20, 2020 •
edited
Loading

@morenyang morenyang changed the title feat #24213: customize progress bar in upload feat: resolve #24213 customize progress bar in upload May 20, 2020
@afc163
Copy link
Member

afc163 commented May 20, 2020

feature branch

@morenyang morenyang force-pushed the upload-custom-progress branch from b2d2d02 to 4a9ecdb Compare May 20, 2020 14:02
@morenyang morenyang requested a review from zombieJ as a code owner May 20, 2020 14:02
@morenyang morenyang changed the base branch from master to feature May 20, 2020 14:03
@afc163 afc163 merged commit ac50fa1 into ant-design:feature May 20, 2020
@afc163 afc163 mentioned this pull request May 20, 2020
Closed
1 task
@morenyang morenyang deleted the upload-custom-progress branch May 20, 2020 15:13
@xrkffgg
Copy link
Member

xrkffgg commented May 21, 2020

之前在写的时候，发现 showInfo 为 true 的时候，显示的百分比会出现
例如 12.1545798989878 的情况

不知道你这个 会不会 出现这种情况，有没有进行过处理？

@morenyang

@xrkffgg
Copy link
Member

xrkffgg commented May 21, 2020

我拉下 feature 测试下

@xrkffgg
Copy link
Member

xrkffgg commented May 21, 2020

1 文字过长，建议保留 2 位。

image

2 type 为 circle 和 dashboard，样式异常。

image

xrkffgg
xrkffgg reviewed May 21, 2020
View reviewed changes
components/upload/demo/customize-progress-bar.md
---
order: 999
title:
zh-CN: Customize Progress Bar
Copy link
Member

Choose a reason for hiding this comment

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

中文

components/upload/demo/customize-progress-bar.md

## zh-CN

Customize Progress Bar with `progress` props.
Copy link
Member

Choose a reason for hiding this comment

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

中文

@morenyang
Copy link
Contributor Author

1 文字过长，建议保留 2 位。

image

this caused by showInfo: true, force set percent to 2 decimal?

@morenyang morenyang restored the upload-custom-progress branch May 21, 2020 02:19
@xrkffgg
Copy link
Member

xrkffgg commented May 21, 2020 •
edited
Loading

  • 可以 默认 format 两位，如果用户改了 format 就不管了。

  • 还有就是 upload 为 picture 和 picture-card 的时候，原先我的想法是 type 为 circle 和 dashboard 只用于 picture-card 模式，都是方框的，然后进度条是围绕着 ➕ 来前进

@xrkffgg
Copy link
Member

xrkffgg commented May 21, 2020

upload 样式有 text picture picture-card
progress 样式有 line circle dashboard

确保全覆盖，样式都不会异常。

我的想法是 circle dashboard 只能用于 picture-card，横条的上传，圆形的进度条 不好匹配。

@xrkffgg
Copy link
Member

xrkffgg commented May 21, 2020

可以 新开一个 PR，补充这个。

@xrkffgg
Copy link
Member

xrkffgg commented May 21, 2020

@afc163 有没有必要去管 progress circle dashboard 的情况呢？

@afc163
Copy link
Member

afc163 commented May 21, 2020

没必要，Upload 里面目前只有 line progress 的设计。

@xrkffgg
Copy link
Member

xrkffgg commented May 21, 2020

@morenyang
那就当用户传其他 type 的时候，给个提示，然后强制转化成 line。

@afc163
Copy link
Member

afc163 commented May 21, 2020

传递到 Upload 的 progress type 写死好了，不给配。

@morenyang
Copy link
Contributor Author

May do some enhancements to make sure progress type won't be overridden by property in progress now

xrkffgg
xrkffgg reviewed May 21, 2020
View reviewed changes
components/upload/UploadList.tsx
@@ -177,7 +177,7 @@ export default class UploadList extends React.Component<UploadListProps, any> {
// show loading icon if upload progress listener is disabled
const loadingProgress =
'percent' in file ? (
<Progress type="line" {...progressAttr} percent={file.percent} />
<Progress type="line" {...progressProps} percent={file.percent} />
Copy link
Member

Choose a reason for hiding this comment

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

--<Progress type="line" {...progressProps} percent={file.percent} />
++<Progress {...progressProps} type="line" percent={file.percent} />

Copy link
Member

Choose a reason for hiding this comment

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

type 放后面 应该就行

@morenyang
Copy link
Contributor Author

  • 可以 默认 format 两位，如果用户改了 format 就不管了。

如果我把默认 format 两位放到 defaultProps 里，用户自定义的时候还是没办法出来两位小数...所以在传props的时候先assign一下？

@xrkffgg
Copy link
Member

xrkffgg commented May 21, 2020

我觉得用户自定义就不管了。
然后用户看到效果，就会完善他自定义的 format 了。

@morenyang morenyang mentioned this pull request May 21, 2020
Merged
17 tasks
@morenyang
Copy link
Contributor Author

create new PR #24339

@zombieJ zombieJ mentioned this pull request May 31, 2020
Merged
13 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@xrkffgg xrkffgg xrkffgg left review comments

@afc163 afc163 afc163 approved these changes

@zombieJ zombieJ Awaiting requested review from zombieJ

Assignees

@morenyang morenyang

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@morenyang @ant-design-bot @afc163 @xrkffgg