Skip to content

Commit b883cc7

Browse files
tangjinzhoutangjinzhou
committed
feat: add anchor component
1 parent 012b68f commit b883cc7

File tree

10 files changed

+476
-1
lines changed

10 files changed

+476
-1
lines changed

‎components/anchor/Anchor.jsx

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
1+
import PropTypes from '../_util/vue-types'
2+
import classNames from 'classnames'
3+
import addEventListener from '../_util/Dom/addEventListener'
4+
import Affix from '../affix'
5+
import getScroll from '../_util/getScroll'
6+
import getRequestAnimationFrame from '../_util/getRequestAnimationFrame'
7+
import { initDefaultProps, getClass, getStyle } from '../_util/props-util'
8+
import BaseMixin from '../_util/BaseMixin'
9+
10+
function getDefaultContainer () {
11+
return window
12+
}
13+
14+
function getOffsetTop (element, container) {
15+
if (!element) {
16+
return 0
17+
}
18+
19+
if (!element.getClientRects().length) {
20+
return 0
21+
}
22+
23+
const rect = element.getBoundingClientRect()
24+
25+
if (rect.width || rect.height) {
26+
if (container === window) {
27+
container = element.ownerDocument.documentElement
28+
return rect.top - container.clientTop
29+
}
30+
return rect.top - container.getBoundingClientRect().top
31+
}
32+
33+
return rect.top
34+
}
35+
36+
function easeInOutCubic (t, b, c, d) {
37+
const cc = c - b
38+
t /= d / 2
39+
if (t < 1) {
40+
return cc / 2 * t * t * t + b
41+
}
42+
return cc / 2 * ((t -= 2) * t * t + 2) + b
43+
}
44+
45+
const reqAnimFrame = getRequestAnimationFrame()
46+
const sharpMatcherRegx = /#([^#]+)$/
47+
function scrollTo (href, offsetTop = 0, getContainer, callback = () => { }) {
48+
const container = getContainer()
49+
const scrollTop = getScroll(container, true)
50+
const sharpLinkMatch = sharpMatcherRegx.exec(href)
51+
if (!sharpLinkMatch) { return }
52+
const targetElement = document.getElementById(sharpLinkMatch[1])
53+
if (!targetElement) {
54+
return
55+
}
56+
const eleOffsetTop = getOffsetTop(targetElement, container)
57+
const targetScrollTop = scrollTop + eleOffsetTop - offsetTop
58+
const startTime = Date.now()
59+
const frameFunc = () => {
60+
const timestamp = Date.now()
61+
const time = timestamp - startTime
62+
const nextScrollTop = easeInOutCubic(time, scrollTop, targetScrollTop, 450)
63+
if (container === window) {
64+
window.scrollTo(window.pageXOffset, nextScrollTop)
65+
} else {
66+
container.scrollTop = nextScrollTop
67+
}
68+
if (time < 450) {
69+
reqAnimFrame(frameFunc)
70+
} else {
71+
callback()
72+
}
73+
}
74+
reqAnimFrame(frameFunc)
75+
history.pushState(null, '', href)
76+
}
77+
78+
export const AnchorProps = {
79+
prefixCls: PropTypes.string,
80+
offsetTop: PropTypes.number,
81+
bounds: PropTypes.number,
82+
affix: PropTypes.boolean,
83+
showInkInFixed: PropTypes.boolean,
84+
getContainer: PropTypes.func,
85+
}
86+
87+
export default {
88+
name: 'AAnchor',
89+
mixins: [BaseMixin],
90+
inheritAttrs: false,
91+
props: initDefaultProps(AnchorProps, {
92+
prefixCls: 'ant-anchor',
93+
affix: true,
94+
showInkInFixed: false,
95+
getContainer: getDefaultContainer,
96+
}),
97+
98+
data () {
99+
this.links = []
100+
return {
101+
activeLink: null,
102+
}
103+
},
104+
provide () {
105+
return {
106+
antAnchor: {
107+
registerLink: (link) => {
108+
if (!this.links.includes(link)) {
109+
this.links.push(link)
110+
}
111+
},
112+
unregisterLink: (link) => {
113+
const index = this.links.indexOf(link)
114+
if (index !== -1) {
115+
this.links.splice(index, 1)
116+
}
117+
},
118+
$data: this.$data,
119+
scrollTo: this.handleScrollTo,
120+
},
121+
}
122+
},
123+
124+
mount () {
125+
this.$nextTick(() => {
126+
const { getContainer } = this
127+
this.scrollEvent = addEventListener(getContainer(), 'scroll', this.handleScroll)
128+
this.handleScroll()
129+
})
130+
},
131+
132+
beforeDestroy () {
133+
if (this.scrollEvent) {
134+
this.scrollEvent.remove()
135+
}
136+
},
137+
138+
updated () {
139+
this.$nextTick(() => {
140+
this.updateInk()
141+
})
142+
},
143+
methods: {
144+
handleScroll () {
145+
if (this.animating) {
146+
return
147+
}
148+
const { offsetTop, bounds } = this
149+
this.setState({
150+
activeLink: this.getCurrentAnchor(offsetTop, bounds),
151+
})
152+
},
153+
154+
handleScrollTo (link) {
155+
const { offsetTop, getContainer } = this
156+
this.animating = true
157+
this.setState({ activeLink: link })
158+
scrollTo(link, offsetTop, getContainer, () => {
159+
this.animating = false
160+
})
161+
},
162+
163+
getCurrentAnchor (offsetTop = 0, bounds = 5) {
164+
const activeLink = ''
165+
if (typeof document === 'undefined') {
166+
return activeLink
167+
}
168+
169+
const linkSections = []
170+
const { getContainer } = this
171+
const container = getContainer()
172+
this.links.forEach(link => {
173+
const sharpLinkMatch = sharpMatcherRegx.exec(link.toString())
174+
if (!sharpLinkMatch) { return }
175+
const target = document.getElementById(sharpLinkMatch[1])
176+
if (target) {
177+
const top = getOffsetTop(target, container)
178+
if (top < offsetTop + bounds) {
179+
linkSections.push({
180+
link,
181+
top,
182+
})
183+
}
184+
}
185+
})
186+
187+
if (linkSections.length) {
188+
const maxSection = linkSections.reduce((prev, curr) => curr.top > prev.top ? curr : prev)
189+
return maxSection.link
190+
}
191+
return ''
192+
},
193+
194+
updateInk () {
195+
if (typeof document === 'undefined') {
196+
return
197+
}
198+
const { prefixCls } = this
199+
const linkNode = this.$el.getElementsByClassName(`${prefixCls}-link-title-active`)[0]
200+
if (linkNode) {
201+
this.$refs.linkNode.style.top = `${(linkNode).offsetTop + linkNode.clientHeight / 2 - 4.5}px`
202+
}
203+
},
204+
},
205+
206+
render () {
207+
const {
208+
prefixCls,
209+
offsetTop,
210+
affix,
211+
showInkInFixed,
212+
activeLink,
213+
$slots,
214+
} = this
215+
216+
const inkClass = classNames(`${prefixCls}-ink-ball`, {
217+
visible: activeLink,
218+
})
219+
220+
const wrapperClass = classNames(getClass(this), `${prefixCls}-wrapper`)
221+
222+
const anchorClass = classNames(prefixCls, {
223+
'fixed': !affix && !showInkInFixed,
224+
})
225+
226+
const wrapperStyle = {
227+
maxHeight: offsetTop ? `calc(100vh - ${offsetTop}px)` : '100vh',
228+
...getStyle(this, true),
229+
}
230+
231+
const anchorContent = (
232+
<div
233+
class={wrapperClass}
234+
style={wrapperStyle}
235+
>
236+
<div class={anchorClass}>
237+
<div class={`${prefixCls}-ink`} >
238+
<span class={inkClass} ref='linkNode' />
239+
</div>
240+
{$slots.default}
241+
</div>
242+
</div>
243+
)
244+
245+
return !affix ? anchorContent : (
246+
<Affix offsetTop={offsetTop}>
247+
{anchorContent}
248+
</Affix>
249+
)
250+
},
251+
}

‎components/anchor/AnchorLink.jsx

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import PropTypes from '../_util/vue-types'
2+
import { initDefaultProps, getComponentFromProp } from '../_util/props-util'
3+
import classNames from 'classnames'
4+
5+
export const AnchorLinkProps = {
6+
prefixCls: PropTypes.string,
7+
href: PropTypes.string,
8+
title: PropTypes.any,
9+
}
10+
11+
export default {
12+
name: 'AAnchorLink',
13+
props: initDefaultProps(AnchorLinkProps, {
14+
prefixCls: 'ant-anchor',
15+
href: '#',
16+
}),
17+
inject: {
18+
antAnchor: { default: {}},
19+
},
20+
21+
mounted () {
22+
this.antAnchor.registerLink(this.href)
23+
},
24+
25+
beforeDestroy () {
26+
this.antAnchor.unregisterLink(this.href)
27+
},
28+
methods: {
29+
handleClick () {
30+
this.antAnchor.scrollTo(this.href)
31+
},
32+
},
33+
render () {
34+
const {
35+
prefixCls,
36+
href,
37+
$slots,
38+
} = this
39+
const title = getComponentFromProp(this, 'title')
40+
const active = this.antAnchor.$data.activeLink === href
41+
const wrapperClassName = classNames(`${prefixCls}-link`, {
42+
[`${prefixCls}-link-active`]: active,
43+
})
44+
const titleClassName = classNames(`${prefixCls}-link-title`, {
45+
[`${prefixCls}-link-title-active`]: active,
46+
})
47+
return (
48+
<div class={wrapperClassName}>
49+
<a
50+
class={titleClassName}
51+
href={href}
52+
title={typeof title === 'string' ? title : ''}
53+
onClick={this.handleClick}
54+
>
55+
{title}
56+
</a>
57+
{$slots.default}
58+
</div>
59+
)
60+
},
61+
}

‎components/anchor/__tests__/demo.test.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import demoTest from '../../../tests/shared/demoTest'
2+
3+
demoTest('anchor')

‎components/anchor/index.en-US.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
category: Components
3+
type: Other
4+
cols: 2
5+
title: Anchor
6+
---
7+
8+
Hyperlinks to scroll on one page.
9+
10+
## When To Use
11+
12+
For displaying anchor hyperlinks on page and jumping between them.
13+
14+
## API
15+
16+
### Anchor Props
17+
18+
| Property | Description | Type | Default |
19+
| -------- | ----------- | ---- | ------- |
20+
| affix | Fixed mode of Anchor | boolean | true |
21+
| bounds | Bounding distance of anchor area | number | 5(px) |
22+
| getContainer | Scrolling container | () => HTMLElement | () => window |
23+
| offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |
24+
| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |
25+
| showInkInFixed | Whether show ink-balls in Fixed mode | boolean | false |
26+
27+
### Link Props
28+
29+
| Property | Description | Type | Default |
30+
| -------- | ----------- | ---- | ------- |
31+
| href | target of hyperlink | string | |
32+
| title | content of hyperlink | string\|slot | |

‎components/anchor/index.jsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Anchor from './Anchor'
2+
import AnchorLink from './AnchorLink'
3+
4+
export { AnchorProps } from './Anchor'
5+
export { AnchorLinkProps } from './AnchorLink'
6+
7+
Anchor.Link = AnchorLink
8+
export default Anchor

‎components/anchor/index.zh-CN.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
category: Components
3+
subtitle: 锚点
4+
cols: 2
5+
type: Other
6+
title: Anchor
7+
---
8+
9+
用于跳转到页面指定位置。
10+
11+
## 何时使用
12+
13+
需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。
14+
15+
## API
16+
17+
### Anchor Props
18+
19+
| 成员 | 说明 | 类型 | 默认值 |
20+
| --- | --- | --- | --- |
21+
| affix | 固定模式 | boolean | true |
22+
| bounds | 锚点区域边界 | number | 5(px) |
23+
| getContainer | 指定滚动的容器 | () => HTMLElement | () => window |
24+
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | |
25+
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | |
26+
| showInkInFixed | 固定模式是否显示小圆点 | boolean | false |
27+
28+
### Link Props
29+
30+
| 成员 | 说明 | 类型 | 默认值 |
31+
| --- | --- | --- | --- |
32+
| href | 锚点链接 | string | |
33+
| title | 文字内容 | string\|slot | |

‎components/anchor/style/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import '../../style/index.less'
2+
import './index.less'

0 commit comments

Comments
 (0)