From b883cc7ab2e647faf70872cacbceebf4d5dbdd32 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Sat, 2 Jun 2018 18:11:50 +0800
Subject: [PATCH] feat: add anchor component
---
components/anchor/Anchor.jsx | 251 +++++++++++++++++++++++
components/anchor/AnchorLink.jsx | 61 ++++++
components/anchor/__tests__/demo.test.js | 3 +
components/anchor/index.en-US.md | 32 +++
components/anchor/index.jsx | 8 +
components/anchor/index.zh-CN.md | 33 +++
components/anchor/style/index.js | 2 +
components/anchor/style/index.less | 81 ++++++++
components/index.js | 5 +-
components/style.js | 1 +
10 files changed, 476 insertions(+), 1 deletion(-)
create mode 100644 components/anchor/Anchor.jsx
create mode 100644 components/anchor/AnchorLink.jsx
create mode 100644 components/anchor/__tests__/demo.test.js
create mode 100644 components/anchor/index.en-US.md
create mode 100644 components/anchor/index.jsx
create mode 100644 components/anchor/index.zh-CN.md
create mode 100644 components/anchor/style/index.js
create mode 100644 components/anchor/style/index.less
diff --git a/components/anchor/Anchor.jsx b/components/anchor/Anchor.jsx
new file mode 100644
index 000000000..cbadc4be9
--- /dev/null
+++ b/components/anchor/Anchor.jsx
@@ -0,0 +1,251 @@
+import PropTypes from '../_util/vue-types'
+import classNames from 'classnames'
+import addEventListener from '../_util/Dom/addEventListener'
+import Affix from '../affix'
+import getScroll from '../_util/getScroll'
+import getRequestAnimationFrame from '../_util/getRequestAnimationFrame'
+import { initDefaultProps, getClass, getStyle } from '../_util/props-util'
+import BaseMixin from '../_util/BaseMixin'
+
+function getDefaultContainer () {
+ return window
+}
+
+function getOffsetTop (element, container) {
+ if (!element) {
+ return 0
+ }
+
+ if (!element.getClientRects().length) {
+ return 0
+ }
+
+ const rect = element.getBoundingClientRect()
+
+ if (rect.width || rect.height) {
+ if (container === window) {
+ container = element.ownerDocument.documentElement
+ return rect.top - container.clientTop
+ }
+ return rect.top - container.getBoundingClientRect().top
+ }
+
+ return rect.top
+}
+
+function easeInOutCubic (t, b, c, d) {
+ const cc = c - b
+ t /= d / 2
+ if (t < 1) {
+ return cc / 2 * t * t * t + b
+ }
+ return cc / 2 * ((t -= 2) * t * t + 2) + b
+}
+
+const reqAnimFrame = getRequestAnimationFrame()
+const sharpMatcherRegx = /#([^#]+)$/
+function scrollTo (href, offsetTop = 0, getContainer, callback = () => { }) {
+ const container = getContainer()
+ const scrollTop = getScroll(container, true)
+ const sharpLinkMatch = sharpMatcherRegx.exec(href)
+ if (!sharpLinkMatch) { return }
+ const targetElement = document.getElementById(sharpLinkMatch[1])
+ if (!targetElement) {
+ return
+ }
+ const eleOffsetTop = getOffsetTop(targetElement, container)
+ const targetScrollTop = scrollTop + eleOffsetTop - offsetTop
+ const startTime = Date.now()
+ const frameFunc = () => {
+ const timestamp = Date.now()
+ const time = timestamp - startTime
+ const nextScrollTop = easeInOutCubic(time, scrollTop, targetScrollTop, 450)
+ if (container === window) {
+ window.scrollTo(window.pageXOffset, nextScrollTop)
+ } else {
+ container.scrollTop = nextScrollTop
+ }
+ if (time < 450) {
+ reqAnimFrame(frameFunc)
+ } else {
+ callback()
+ }
+ }
+ reqAnimFrame(frameFunc)
+ history.pushState(null, '', href)
+}
+
+export const AnchorProps = {
+ prefixCls: PropTypes.string,
+ offsetTop: PropTypes.number,
+ bounds: PropTypes.number,
+ affix: PropTypes.boolean,
+ showInkInFixed: PropTypes.boolean,
+ getContainer: PropTypes.func,
+}
+
+export default {
+ name: 'AAnchor',
+ mixins: [BaseMixin],
+ inheritAttrs: false,
+ props: initDefaultProps(AnchorProps, {
+ prefixCls: 'ant-anchor',
+ affix: true,
+ showInkInFixed: false,
+ getContainer: getDefaultContainer,
+ }),
+
+ data () {
+ this.links = []
+ return {
+ activeLink: null,
+ }
+ },
+ provide () {
+ return {
+ antAnchor: {
+ registerLink: (link) => {
+ if (!this.links.includes(link)) {
+ this.links.push(link)
+ }
+ },
+ unregisterLink: (link) => {
+ const index = this.links.indexOf(link)
+ if (index !== -1) {
+ this.links.splice(index, 1)
+ }
+ },
+ $data: this.$data,
+ scrollTo: this.handleScrollTo,
+ },
+ }
+ },
+
+ mount () {
+ this.$nextTick(() => {
+ const { getContainer } = this
+ this.scrollEvent = addEventListener(getContainer(), 'scroll', this.handleScroll)
+ this.handleScroll()
+ })
+ },
+
+ beforeDestroy () {
+ if (this.scrollEvent) {
+ this.scrollEvent.remove()
+ }
+ },
+
+ updated () {
+ this.$nextTick(() => {
+ this.updateInk()
+ })
+ },
+ methods: {
+ handleScroll () {
+ if (this.animating) {
+ return
+ }
+ const { offsetTop, bounds } = this
+ this.setState({
+ activeLink: this.getCurrentAnchor(offsetTop, bounds),
+ })
+ },
+
+ handleScrollTo (link) {
+ const { offsetTop, getContainer } = this
+ this.animating = true
+ this.setState({ activeLink: link })
+ scrollTo(link, offsetTop, getContainer, () => {
+ this.animating = false
+ })
+ },
+
+ getCurrentAnchor (offsetTop = 0, bounds = 5) {
+ const activeLink = ''
+ if (typeof document === 'undefined') {
+ return activeLink
+ }
+
+ const linkSections = []
+ const { getContainer } = this
+ const container = getContainer()
+ this.links.forEach(link => {
+ const sharpLinkMatch = sharpMatcherRegx.exec(link.toString())
+ if (!sharpLinkMatch) { return }
+ const target = document.getElementById(sharpLinkMatch[1])
+ if (target) {
+ const top = getOffsetTop(target, container)
+ if (top < offsetTop + bounds) {
+ linkSections.push({
+ link,
+ top,
+ })
+ }
+ }
+ })
+
+ if (linkSections.length) {
+ const maxSection = linkSections.reduce((prev, curr) => curr.top > prev.top ? curr : prev)
+ return maxSection.link
+ }
+ return ''
+ },
+
+ updateInk () {
+ if (typeof document === 'undefined') {
+ return
+ }
+ const { prefixCls } = this
+ const linkNode = this.$el.getElementsByClassName(`${prefixCls}-link-title-active`)[0]
+ if (linkNode) {
+ this.$refs.linkNode.style.top = `${(linkNode).offsetTop + linkNode.clientHeight / 2 - 4.5}px`
+ }
+ },
+ },
+
+ render () {
+ const {
+ prefixCls,
+ offsetTop,
+ affix,
+ showInkInFixed,
+ activeLink,
+ $slots,
+ } = this
+
+ const inkClass = classNames(`${prefixCls}-ink-ball`, {
+ visible: activeLink,
+ })
+
+ const wrapperClass = classNames(getClass(this), `${prefixCls}-wrapper`)
+
+ const anchorClass = classNames(prefixCls, {
+ 'fixed': !affix && !showInkInFixed,
+ })
+
+ const wrapperStyle = {
+ maxHeight: offsetTop ? `calc(100vh - ${offsetTop}px)` : '100vh',
+ ...getStyle(this, true),
+ }
+
+ const anchorContent = (
+
+
+
+
+
+ {$slots.default}
+
+