ant-design-vue/components/affix/index.jsx

245 lines
6.9 KiB
React
Raw Normal View History

2018-03-19 02:16:27 +00:00
2018-03-01 14:47:08 +00:00
import PropTypes from '../_util/vue-types'
import addEventListener from '../_util/Dom/addEventListener'
import classNames from 'classnames'
import shallowequal from 'shallowequal'
import omit from 'omit.js'
import getScroll from '../_util/getScroll'
2018-03-02 08:54:22 +00:00
import BaseMixin from '../_util/BaseMixin'
import throttleByAnimationFrame from '../_util/throttleByAnimationFrame'
2018-03-01 14:47:08 +00:00
function getTargetRect (target) {
return target !== window
? target.getBoundingClientRect()
: { top: 0, left: 0, bottom: 0 }
}
function getOffset (element, target) {
const elemRect = element.getBoundingClientRect()
const targetRect = getTargetRect(target)
const scrollTop = getScroll(target, true)
const scrollLeft = getScroll(target, false)
const docElem = window.document.body
const clientTop = docElem.clientTop || 0
const clientLeft = docElem.clientLeft || 0
return {
top: elemRect.top - targetRect.top +
scrollTop - clientTop,
left: elemRect.left - targetRect.left +
scrollLeft - clientLeft,
width: elemRect.width,
height: elemRect.height,
}
}
function getDefaultTarget () {
return typeof window !== 'undefined'
? window : null
}
// Affix
const AffixProps = {
/**
* 距离窗口顶部达到指定偏移量后触发
*/
offsetTop: PropTypes.number,
offset: PropTypes.number,
/** 距离窗口底部达到指定偏移量后触发 */
offsetBottom: PropTypes.number,
/** 固定状态改变时触发的回调函数 */
// onChange?: (affixed?: boolean) => void;
/** 设置 Affix 需要监听其滚动事件的元素,值为一个返回对应 DOM 元素的函数 */
target: PropTypes.func,
prefixCls: PropTypes.string,
}
export default {
name: 'Affix',
props: AffixProps,
2018-03-02 08:54:22 +00:00
mixins: [BaseMixin],
2018-03-01 14:47:08 +00:00
data () {
this.events = [
'resize',
'scroll',
'touchstart',
'touchmove',
'touchend',
'pageshow',
'load',
]
this.eventHandlers = {}
return {
affixStyle: undefined,
placeholderStyle: undefined,
}
},
2018-03-02 08:54:22 +00:00
beforeMount () {
this.updatePosition = throttleByAnimationFrame(this.updatePosition)
},
2018-03-01 14:47:08 +00:00
mounted () {
const target = this.target || getDefaultTarget
// Wait for parent component ref has its value
this.timeout = setTimeout(() => {
this.setTargetEventListeners(target)
})
},
watch: {
target (val) {
this.$nextTick(() => {
this.clearEventListeners()
this.setTargetEventListeners(val)
// Mock Event object.
this.updatePosition({})
})
},
},
beforeDestroy () {
this.clearEventListeners()
clearTimeout(this.timeout)
this.updatePosition.cancel()
},
methods: {
setAffixStyle (e, affixStyle) {
const { target = getDefaultTarget } = this
const originalAffixStyle = this.affixStyle
const isWindow = target() === window
if (e.type === 'scroll' && originalAffixStyle && affixStyle && isWindow) {
return
}
if (shallowequal(affixStyle, originalAffixStyle)) {
return
}
this.setState({ affixStyle: affixStyle }, () => {
const affixed = !!this.affixStyle
if ((affixStyle && !originalAffixStyle) ||
(!affixStyle && originalAffixStyle)) {
this.$emit('change', affixed)
}
})
},
setPlaceholderStyle (placeholderStyle) {
const originalPlaceholderStyle = this.placeholderStyle
if (shallowequal(placeholderStyle, originalPlaceholderStyle)) {
return
}
this.setState({ placeholderStyle: placeholderStyle })
},
updatePosition (e) {
let { offsetTop } = this
const { offsetBottom, offset, target = getDefaultTarget } = this
const targetNode = target()
// Backwards support
offsetTop = offsetTop || offset
const scrollTop = getScroll(targetNode, true)
const affixNode = this.$el
const elemOffset = getOffset(affixNode, targetNode)
const elemSize = {
width: this.$refs.fixedNode.offsetWidth,
height: this.$refs.fixedNode.offsetHeight,
}
const offsetMode = {
top: false,
bottom: false,
}
// Default to `offsetTop=0`.
if (typeof offsetTop !== 'number' && typeof offsetBottom !== 'number') {
offsetMode.top = true
offsetTop = 0
} else {
offsetMode.top = typeof offsetTop === 'number'
offsetMode.bottom = typeof offsetBottom === 'number'
}
const targetRect = getTargetRect(targetNode)
const targetInnerHeight =
targetNode.innerHeight || targetNode.clientHeight
if (scrollTop > elemOffset.top - offsetTop && offsetMode.top) {
// Fixed Top
const width = `${elemOffset.width}px`
const top = `${targetRect.top + offsetTop}px`
this.setAffixStyle(e, {
position: 'fixed',
top,
left: `${targetRect.left + elemOffset.left}px`,
width,
})
this.setPlaceholderStyle({
width,
height: `${elemSize.height}px`,
})
} else if (
scrollTop < elemOffset.top + elemSize.height + offsetBottom - targetInnerHeight &&
offsetMode.bottom
) {
// Fixed Bottom
const targetBottomOffet = targetNode === window ? 0 : (window.innerHeight - targetRect.bottom)
const width = `${elemOffset.width}px`
this.setAffixStyle(e, {
position: 'fixed',
bottom: targetBottomOffet + offsetBottom + 'px',
left: targetRect.left + elemOffset.left + 'px',
width,
})
this.setPlaceholderStyle({
width,
height: elemOffset.height + 'px',
})
} else {
const { affixStyle } = this
if (e.type === 'resize' && affixStyle && affixStyle.position === 'fixed' && affixNode.offsetWidth) {
this.setAffixStyle(e, { ...affixStyle, width: affixNode.offsetWidth + 'px' })
} else {
this.setAffixStyle(e, null)
}
this.setPlaceholderStyle(null)
}
},
setTargetEventListeners (getTarget) {
const target = getTarget()
if (!target) {
return
}
this.clearEventListeners()
this.events.forEach(eventName => {
this.eventHandlers[eventName] = addEventListener(target, eventName, this.updatePosition)
})
},
clearEventListeners () {
this.events.forEach(eventName => {
const handler = this.eventHandlers[eventName]
if (handler && handler.remove) {
handler.remove()
}
})
},
},
render () {
const { prefixCls, affixStyle, placeholderStyle, $slots, $props } = this
const className = classNames({
[prefixCls || 'ant-affix']: affixStyle,
})
const props = {
attrs: omit($props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target']),
}
return (
<div {...props} style={placeholderStyle}>
<div class={className} ref='fixedNode' style={affixStyle}>
{$slots.default}
</div>
</div>
)
},
}