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

fix: avatar cannot calculate the offset when display: none #15351

Merged
merged 1 commit into from Mar 13, 2019

Conversation

Projects
None yet
2 participants
@ppbl
Copy link
Contributor

commented Mar 12, 2019

First of all, thank you for your contribution! 😄

New feature please send pull request to feature branch, and rest to master branch.
Pull request will be merged after one of collaborators approve.
Please makes sure that these form are filled before submitting your pull request, thank you!

[中文版模板 / Chinese template]

🤔 This is a ...

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

👻 What's the background?

  1. 重现链接

  2. 上述链接有一个 Avatar 初始是 dispaly:none 的,然后通过点击显示,但是此时的偏移量和 scale 是没有的,因为 dispaly:none 的时候拿到元素的 offsetWidth0, 分母为 0 算出来的 scale-Infinity, 不合法所以 transform 加不上去, 导致头像文字位置不居中(可能字还大)

💡 Solution

  1. 通过判断 avatarChildrenoffsetWidth 为 0 时没必要计算 scale,。
  2. 但是过会如果头像再次显示的话,需要再次计算, 可以增加一个 state avatarDisplay表示当前状态,如果 avatarDisplayfalse 说明此时可能头像属于 display:none 的状态,这样在下次 update 的时候起码需要有再次计算的机会 , 计算完成重置 state
componentDidUpdate(prevProps: AvatarProps, prevState: AvatarState) {
    if (
      prevProps.children !== this.props.children ||
      (prevState.scale !== this.state.scale && this.state.scale === 1) ||
      prevState.isImgExist !== this.state.isImgExist ||
      !this.state.avatarDisplay
    ) {
      this.setScale();
      if (this.avatarChildren && this.avatarChildren.offsetWidth !== 0) {
        this.setState({
          avatarDisplay: true,
        });
      }
    } else {
      if (this.avatarChildren && this.avatarChildren.offsetWidth === 0 && this.state.scale === 1) {
        this.setState({
          avatarDisplay: false,
        });
      }
    }

    if (prevProps.src !== this.props.src) {
      this.setState({ isImgExist: true, scale: 1 });
    }
  }

📝 Changelog description

Describe changes from user side, and list all potential break changes or other risks.

  1. 对用户应该没有影响或者可以解决类似问题

☑️ 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

others

  1. 第一次提交pr不知道符不符合规则😅,只是想帮忙修个bug,
  2. 我这实现肯定不能说是最好的, 不过自己的项目遇到了我按照这样的套路修改是可以的。。
  3. 英语不太好怕描述不清楚所以只能用中文~
@netlify

This comment has been minimized.

Copy link

commented Mar 12, 2019

Deploy preview for ant-design ready!

Built with commit 5948d33

https://deploy-preview-15351--ant-design.netlify.com

@codecov

This comment has been minimized.

Copy link

commented Mar 12, 2019

Codecov Report

Merging #15351 into master will decrease coverage by 0.08%.
The diff coverage is 85.71%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master   #15351      +/-   ##
==========================================
- Coverage   94.11%   94.02%   -0.09%     
==========================================
  Files         250      250              
  Lines        6643     6648       +5     
  Branches     1927     1930       +3     
==========================================
- Hits         6252     6251       -1     
- Misses        390      396       +6     
  Partials        1        1
Impacted Files Coverage Δ
components/avatar/index.tsx 86.44% <85.71%> (-9.86%) ⬇️

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 97880a9...5948d33. Read the comment docs.

@afc163 afc163 merged commit 98b10a7 into ant-design:master Mar 13, 2019

25 of 28 checks passed

codecov/patch 85.71% of diff hit (target 94.11%)
Details
Header rules No header rules processed
Details
Pages changed 12 new files uploaded
Details
Codacy/PR Quality Review Up to standards. A positive pull request.
Details
CodeFactor No issues found.
Details
LGTM analysis: JavaScript No new or fixed alerts
Details
Mixed content No mixed content detected
Details
Redirect rules 18 redirect rules processed
Details
WIP Ready for review
Details
ant-design.ant-design #ant design succeeded
Details
ci/circleci: compile Your tests passed on CircleCI!
Details
ci/circleci: dist Your tests passed on CircleCI!
Details
ci/circleci: lint Your tests passed on CircleCI!
Details
ci/circleci: setup Your tests passed on CircleCI!
Details
ci/circleci: test_dist Your tests passed on CircleCI!
Details
ci/circleci: test_dist_15 Your tests passed on CircleCI!
Details
ci/circleci: test_dom Your tests passed on CircleCI!
Details
ci/circleci: test_dom_15 Your tests passed on CircleCI!
Details
ci/circleci: test_es Your tests passed on CircleCI!
Details
ci/circleci: test_es_15 Your tests passed on CircleCI!
Details
ci/circleci: test_lib Your tests passed on CircleCI!
Details
ci/circleci: test_lib_15 Your tests passed on CircleCI!
Details
ci/circleci: test_node Your tests passed on CircleCI!
Details
ci/circleci: test_node_15 Your tests passed on CircleCI!
Details
codebeat no reportable quality changes
Details
codecov/project 94.02% (-0.09%) compared to 97880a9
Details
deploy/netlify Deploy preview ready!
Details
security/snyk - package.json (paranoidjk) No manifest changes detected

@ppbl ppbl deleted the ppbl:avatar-letter-style branch Mar 13, 2019

@ppbl ppbl referenced this pull request Mar 17, 2019

Closed

avatar: Solve the problem of text position size #15468

5 of 13 tasks complete

afc163 added a commit that referenced this pull request Mar 19, 2019

@afc163 afc163 referenced this pull request Mar 19, 2019

Merged

Refactor Avatar scale calculate logic #15503

6 of 13 tasks complete

afc163 added a commit that referenced this pull request Mar 20, 2019

dengfuping added a commit that referenced this pull request Mar 21, 2019

Refactor Avatar scale calculate logic (#15503)
* 🐛 Refactor Avatar scale calculate logic

close #15351

close #15468

*  Fix infinite loop

* 🐛 Fix avatar size change logic

*  Fix snapshot

*  Add test cases for Avatar setScale

* 🐛 getBoundingClientRect => offsetWidth

*  Fix snapshot
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.