ant-design-vue/components/align/Align.vue

123 lines
2.9 KiB
Vue
Raw Normal View History

2017-12-12 15:05:45 +08:00
<script>
2017-12-26 19:04:28 +08:00
import PropTypes from '../_util/vue-types'
2017-12-12 15:05:45 +08:00
import align from 'dom-align'
2017-12-25 18:08:36 +08:00
import clonedeep from 'lodash.clonedeep'
2018-01-15 17:33:34 +08:00
import isEqual from 'lodash.isequal'
2017-12-12 15:05:45 +08:00
import addEventListener from '../_util/Dom/addEventListener'
2017-12-14 12:13:15 +08:00
import { cloneElement } from '../_util/vnode.js'
2017-12-13 10:06:26 +08:00
import isWindow from './isWindow'
2017-12-12 15:05:45 +08:00
function noop () {
}
function buffer (fn, ms) {
let timer
function clear () {
if (timer) {
clearTimeout(timer)
timer = null
}
}
function bufferFn () {
clear()
timer = setTimeout(fn, ms)
}
bufferFn.clear = clear
return bufferFn
}
export default {
props: {
childrenProps: PropTypes.object,
align: PropTypes.object.isRequired,
target: PropTypes.func.def(noop),
monitorBufferTime: PropTypes.number.def(50),
monitorWindowResize: PropTypes.bool.def(false),
disabled: PropTypes.bool.def(false),
},
2018-01-15 17:33:34 +08:00
data () {
2018-01-16 15:41:00 +08:00
this.aligned = false
2018-01-15 17:33:34 +08:00
return {
}
2017-12-13 10:06:26 +08:00
},
2017-12-12 15:05:45 +08:00
mounted () {
const props = this.$props
// if parent ref not attached .... use document.getElementById
2018-01-15 17:33:34 +08:00
!this.aligned && this.forceAlign()
2017-12-12 15:05:45 +08:00
if (!props.disabled && props.monitorWindowResize) {
this.startMonitorWindowResize()
}
},
2018-01-15 17:33:34 +08:00
updated () {
const prevProps = this.prevProps
const props = this.$props
let reAlign = false
if (!props.disabled) {
if (prevProps.disabled || !isEqual(prevProps.align, props.align)) {
reAlign = true
} else {
const lastTarget = prevProps.target()
const currentTarget = props.target()
if (isWindow(lastTarget) && isWindow(currentTarget)) {
reAlign = false
} else if (lastTarget !== currentTarget) {
reAlign = true
}
}
}
if (reAlign) {
this.forceAlign()
}
if (props.monitorWindowResize && !props.disabled) {
this.startMonitorWindowResize()
} else {
this.stopMonitorWindowResize()
}
},
2017-12-13 10:06:26 +08:00
beforeDestroy () {
2017-12-12 15:05:45 +08:00
this.stopMonitorWindowResize()
},
methods: {
startMonitorWindowResize () {
if (!this.resizeHandler) {
this.bufferMonitor = buffer(this.forceAlign, this.$props.monitorBufferTime)
this.resizeHandler = addEventListener(window, 'resize', this.bufferMonitor)
}
},
stopMonitorWindowResize () {
if (this.resizeHandler) {
this.bufferMonitor.clear()
this.resizeHandler.remove()
this.resizeHandler = null
}
},
forceAlign () {
const props = this.$props
if (!props.disabled) {
const source = this.$el
2018-01-15 17:33:34 +08:00
this.aligned = true
2018-01-12 16:10:41 +08:00
this.$listeners.align && this.$listeners.align(source, align(source, props.target(), props.align))
2017-12-12 15:05:45 +08:00
}
},
},
render () {
2017-12-25 18:08:36 +08:00
this.prevProps = clonedeep(this.$props)
2017-12-12 15:05:45 +08:00
const { childrenProps } = this.$props
const child = this.$slots.default[0]
if (childrenProps) {
2017-12-25 18:08:36 +08:00
return cloneElement(child, { props: childrenProps })
2017-12-12 15:05:45 +08:00
}
return child
},
}
</script>