feat(Anchor): add targetOffset prop #17827

shaodahong · 2019-07-23T12:11:14Z

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

After fixed nav, scroll to anchor target, it's no visible.
固定导航后，滚动到锚点的目标被遮挡

📝 Changelog

Language	Changelog
🇺🇸 English	Anchor add `targetOffset` to support customize scroll position offset.
🇨🇳 Chinese	Anchor 添加 `targetOffset` 以支持自定义滚动偏移量。

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

netlify · 2019-07-23T12:11:23Z

Deploy preview for ant-design ready!

Built with commit 4968052

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

buildsize · 2019-07-23T12:13:10Z

File name	Previous Size	New Size	Change
package-lock.json	817.42 KB	820.79 KB	3.37 KB (0%)

shaodahong · 2019-07-23T12:17:26Z

@zombieJ Please check this PR

codecov · 2019-07-23T12:30:14Z

Codecov Report

❗ No coverage uploaded for pull request base (feature@161def0). Click here to learn what that means.
The diff coverage is 75%.

@@            Coverage Diff             @@
##             feature   #17827   +/-   ##
==========================================
  Coverage           ?   96.04%           
==========================================
  Files              ?      268           
  Lines              ?     7457           
  Branches           ?     2073           
==========================================
  Hits               ?     7162           
  Misses             ?      293           
  Partials           ?        2

Impacted Files	Coverage Δ
components/anchor/Anchor.tsx	`90% <75%> (ø)`

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 161def0...13b6f6f. Read the comment docs.

codecov · 2019-07-23T12:30:14Z

Codecov Report

❗ No coverage uploaded for pull request base (feature@4e26107). Click here to learn what that means.
The diff coverage is 95.83%.

@@            Coverage Diff             @@
##             feature   #17827   +/-   ##
==========================================
  Coverage           ?   96.26%           
==========================================
  Files              ?      280           
  Lines              ?     7523           
  Branches           ?     2050           
==========================================
  Hits               ?     7242           
  Misses             ?      279           
  Partials           ?        2

Impacted Files	Coverage Δ
components/_util/scrollTo.ts	`100% <100%> (ø)`
components/_util/easings.ts	`100% <100%> (ø)`
components/back-top/index.tsx	`67.34% <75%> (ø)`
components/anchor/Anchor.tsx	`94.4% <95.23%> (ø)`

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 4e26107...4968052. Read the comment docs.

components/anchor/Anchor.tsx

components/anchor/index.zh-CN.md

zombieJ · 2019-07-23T12:56:04Z

Seems ok. Could you help to add a test case about this?

shaodahong · 2019-07-23T14:35:33Z

In my see, because unexport scrollTo function so too hard to test targetOffset prop, an easy case like(useless):

expect(wrapper.prop('targetOffset')).toBe(some value);

I think we should be split scrollTo function to utils module

zombieJ · 2019-07-23T15:12:36Z

Here is some useful util of (domHook)[https://github.com/ant-design/ant-design/blob/master/components/tests/util/domHook.js] we current use to mock the HTML values. You can have a try~

shaodahong · 2019-07-24T02:39:31Z

thank you, domHook is useful, I write a test case, and modify easeInOutCubic function return value, it's last call return value more than the target

zombieJ · 2019-07-24T03:15:42Z

So efficiency! Could you add a demo about it and add link in targetOffset description makes user easy to understand?

components/anchor/index.zh-CN.md

components/anchor/Anchor.tsx

todo · 2019-07-24T14:57:02Z

support x

https://github.com/ant-design/ant-design/blob/2d9deae6c5adda8187bd6f6bb5cc7e49bbe058f2/components/_util/scrollTo.ts#L18-L23

This comment was generated by todo based on a `TODO` comment in 2d9deae6c5adda8187bd6f6bb5cc7e49bbe058f2 in #17827. cc @shaodahong.

components/_util/easings.ts

components/_util/scrollTo.ts

components/back-top/__tests__/index.test.js

components/_util/easings.ts

zombieJ · 2019-08-02T08:37:39Z

getCurrentAnchor 是否需要调整一下？有了 offsetTarget 后感觉应该和这个值相关而非 scrollTop 相关。 @afc163 @shaodahong

shaodahong · 2019-08-02T09:10:45Z

getCurrentAnchor 和 targetOffset 没什么关联吧，是用来设置高亮锚点链接用的，倒是和 getOffsetTop 有关系，当时倒是想把 getOffsetTop 抽出去，不过看了下没有复用的

shaodahong · 2019-08-16T10:01:52Z

有冲突，我 rebase 了下

@afc163 @zombieJ #17823 这个新增的 prop 是不是版本号不对，应该也是 3.22.0 吧

afc163 · 2019-08-16T10:25:27Z

我发布前改掉。

afc163 · 2019-08-22T06:41:34Z

components/back-top/index.tsx

-    const frameFunc = () => {
-      const timestamp = Date.now();
-      const time = timestamp - startTime;
-      this.setScrollTop(easeInOutCubic(time, scrollTop, 0, 450));


setScrollTop 和 getCurrentScrollTop 已经没有用了，但是没删，导致测试覆盖率下降。

在这里 #18406 修复。

afc163 · 2019-08-28T07:16:00Z

https://circleci.com/gh/ant-design/ant-design/109446?utm_campaign=vcs-integration-link&utm_medium=referral&utm_source=github-build-link

用例偶尔会挂。

shaodahong · 2019-08-28T11:28:27Z

我本地换了几个 node 版本单独跑了下是 OK 的

yarn test --runInBand components/anchor/__tests__/Anchor.test.js

afc163 · 2019-08-28T13:21:31Z

本地都是好的，发现换 circleci 的 image 就不行了，只有 node:8 能过，其他的基本有一个必挂。

9d2f62b

zombieJ · 2019-08-30T07:52:18Z

是不是又和 lodash 的 debounce 有关？

shaodahong · 2019-08-30T08:02:01Z

@zombieJ 不清楚，最近忙，等周末有空看看，可能是我写的 dateMock 有问题吧，主要是本地没办法复现不好测试

shaodahong · 2019-09-04T08:26:01Z

@zombieJ 自己测试了下，发现可能出现的情况

把 dateMock 提前消费掉了
dateMock 没有 mock 成功

之后我改进下 dateMock 避免被提前消费。如果后面还有问题，就说明是第 2 个原因了

pr-triage bot added the PR: unreviewed label Jul 23, 2019

shaodahong mentioned this pull request Jul 23, 2019

feat(Anchor): add fixDistance props fix fixed nav height #17663

Closed

1 task

zombieJ reviewed Jul 23, 2019

View reviewed changes

components/anchor/Anchor.tsx Outdated Show resolved Hide resolved

zombieJ reviewed Jul 23, 2019

View reviewed changes

components/anchor/index.zh-CN.md Outdated Show resolved Hide resolved

afc163 reviewed Jul 24, 2019

View reviewed changes

components/anchor/index.zh-CN.md Outdated Show resolved Hide resolved

afc163 reviewed Jul 24, 2019

View reviewed changes

components/anchor/Anchor.tsx Outdated Show resolved Hide resolved

ztplz reviewed Jul 24, 2019

View reviewed changes

components/anchor/Anchor.tsx Show resolved Hide resolved

zombieJ reviewed Jul 30, 2019

View reviewed changes

components/_util/easings.ts Outdated Show resolved Hide resolved

zombieJ reviewed Jul 30, 2019

View reviewed changes

components/_util/scrollTo.ts Outdated Show resolved Hide resolved

afc163 previously approved these changes Jul 31, 2019

View reviewed changes

pr-triage bot added PR: reviewed-approved and removed PR: unreviewed labels Jul 31, 2019

zombieJ reviewed Jul 31, 2019

View reviewed changes

components/back-top/__tests__/index.test.js Show resolved Hide resolved

shaodahong dismissed afc163’s stale review via 2ec7b52 July 31, 2019 10:06

pr-triage bot added PR: unreviewed and removed PR: reviewed-approved labels Jul 31, 2019

zombieJ reviewed Jul 31, 2019

View reviewed changes

components/_util/easings.ts Outdated Show resolved Hide resolved

shaodahong added 10 commits August 16, 2019 17:59

test: use jest.useFakeTimers replace sleep

a796f87

test: fix test fail

3b692bc

test: fix test fail

ebdbd0e

test: add easings.ts test suite

b1cd8e3

fix: eslint fail

b277a96

test: try mock Date.now to reduce test time

83022a4

test: remove unused var

ce5375f

test: fix lint

6729ce3

test: reduce test time

9a3feda

test: reduce test time

2416d17

shaodahong dismissed zombieJ’s stale review via 2416d17 August 16, 2019 10:00

test: fix lint fail

4968052

afc163 approved these changes Aug 17, 2019

View reviewed changes

afc163 merged commit 92b36c0 into ant-design:feature Aug 17, 2019

pr-triage bot added PR: merged and removed PR: unreviewed labels Aug 17, 2019

afc163 mentioned this pull request Aug 17, 2019

docs: changelog for 3.22.0 #18328

Merged

afc163 reviewed Aug 22, 2019

View reviewed changes

pr-triage bot added PR: unreviewed and removed PR: merged labels Aug 22, 2019

snyk-bot mentioned this pull request Aug 26, 2019

[Snyk] Upgrade antd from 3.21.4 to 3.22.0 tinkerbox/mailyard-spa#1

Closed

shaodahong mentioned this pull request Sep 4, 2019

test(Anchor): optimize dataNowMockFn, avoid being consumed in advance #18663

Merged

14 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Anchor): add targetOffset prop #17827

feat(Anchor): add targetOffset prop #17827

shaodahong commented Jul 23, 2019 •

edited by zombieJ

netlify bot commented Jul 23, 2019 •

edited

buildsize bot commented Jul 23, 2019 •

edited

shaodahong commented Jul 23, 2019

codecov bot commented Jul 23, 2019

codecov bot commented Jul 23, 2019 •

edited

zombieJ commented Jul 23, 2019

shaodahong commented Jul 23, 2019 •

edited

zombieJ commented Jul 23, 2019

shaodahong commented Jul 24, 2019

zombieJ commented Jul 24, 2019

todo bot commented Jul 24, 2019

zombieJ commented Aug 2, 2019

shaodahong commented Aug 2, 2019 •

edited

shaodahong commented Aug 16, 2019 •

edited

afc163 commented Aug 16, 2019

afc163 Aug 22, 2019

shaodahong Aug 22, 2019

afc163 commented Aug 28, 2019

shaodahong commented Aug 28, 2019

afc163 commented Aug 28, 2019 •

edited

zombieJ commented Aug 30, 2019

shaodahong commented Aug 30, 2019

shaodahong commented Sep 4, 2019

feat(Anchor): add targetOffset prop #17827

feat(Anchor): add targetOffset prop #17827

Conversation

shaodahong commented Jul 23, 2019 • edited by zombieJ

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

📝 Changelog

☑️ Self Check before Merge

netlify bot commented Jul 23, 2019 • edited

buildsize bot commented Jul 23, 2019 • edited

shaodahong commented Jul 23, 2019

codecov bot commented Jul 23, 2019

Codecov Report

codecov bot commented Jul 23, 2019 • edited

Codecov Report

zombieJ commented Jul 23, 2019

shaodahong commented Jul 23, 2019 • edited

zombieJ commented Jul 23, 2019

shaodahong commented Jul 24, 2019

zombieJ commented Jul 24, 2019

todo bot commented Jul 24, 2019

support x

This comment was generated by todo based on a TODO comment in 2d9deae6c5adda8187bd6f6bb5cc7e49bbe058f2 in #17827. cc @shaodahong.

zombieJ commented Aug 2, 2019

shaodahong commented Aug 2, 2019 • edited

shaodahong commented Aug 16, 2019 • edited

afc163 commented Aug 16, 2019

afc163 Aug 22, 2019

Choose a reason for hiding this comment

shaodahong Aug 22, 2019

Choose a reason for hiding this comment

afc163 commented Aug 28, 2019

shaodahong commented Aug 28, 2019

afc163 commented Aug 28, 2019 • edited

zombieJ commented Aug 30, 2019

shaodahong commented Aug 30, 2019

shaodahong commented Sep 4, 2019

shaodahong commented Jul 23, 2019 •

edited by zombieJ

netlify bot commented Jul 23, 2019 •

edited

buildsize bot commented Jul 23, 2019 •

edited

codecov bot commented Jul 23, 2019 •

edited

shaodahong commented Jul 23, 2019 •

edited

This comment was generated by todo based on a `TODO` comment in 2d9deae6c5adda8187bd6f6bb5cc7e49bbe058f2 in #17827. cc @shaodahong.

shaodahong commented Aug 2, 2019 •

edited

shaodahong commented Aug 16, 2019 •

edited

afc163 commented Aug 28, 2019 •

edited