ant-design-vue/components/trigger/Trigger.jsx

553 lines
16 KiB
React
Raw Normal View History

2018-03-19 02:16:27 +00:00
2018-01-20 12:24:42 +00:00
import Vue from 'vue'
2018-05-30 06:11:36 +00:00
import antRefDirective from '../_util/antRefDirective'
2017-12-25 10:08:36 +00:00
import PropTypes from '../_util/vue-types'
2017-12-22 10:43:28 +00:00
import contains from '../_util/Dom/contains'
2018-02-24 10:12:24 +00:00
import { hasProp, getComponentFromProp, getEvents, filterEmpty } from '../_util/props-util'
2018-02-04 03:08:04 +00:00
import { requestAnimationTimeout, cancelAnimationTimeout } from '../_util/requestAnimationTimeout'
2017-12-22 10:43:28 +00:00
import addEventListener from '../_util/Dom/addEventListener'
2017-12-26 11:04:28 +00:00
import warning from '../_util/warning'
2017-12-22 10:43:28 +00:00
import Popup from './Popup'
2018-01-11 10:53:51 +00:00
import { getAlignFromPlacement, getPopupClassNameFromAlign, noop } from './utils'
2018-01-12 08:10:41 +00:00
import BaseMixin from '../_util/BaseMixin'
2018-03-01 02:21:06 +00:00
import { cloneElement } from '../_util/vnode'
2018-05-30 06:11:36 +00:00
import ContainerRender from '../_util/ContainerRender'
Vue.use(antRefDirective)
2017-12-22 10:43:28 +00:00
function returnEmptyString () {
return ''
}
function returnDocument () {
return window.document
}
2018-02-04 05:12:54 +00:00
const ALL_HANDLERS = ['click', 'mousedown', 'touchstart', 'mouseenter',
2018-01-29 10:57:20 +00:00
'mouseleave', 'focus', 'blur', 'contextmenu']
2017-12-22 10:43:28 +00:00
export default {
name: 'Trigger',
props: {
action: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]).def([]),
showAction: PropTypes.any.def([]),
hideAction: PropTypes.any.def([]),
getPopupClassNameFromAlign: PropTypes.any.def(returnEmptyString),
2018-01-11 10:53:51 +00:00
// onPopupVisibleChange: PropTypes.func.def(noop),
afterPopupVisibleChange: PropTypes.func.def(noop),
2017-12-22 10:43:28 +00:00
popup: PropTypes.any,
popupStyle: PropTypes.object.def({}),
prefixCls: PropTypes.string.def('rc-trigger-popup'),
popupClassName: PropTypes.string.def(''),
popupPlacement: PropTypes.string,
builtinPlacements: PropTypes.object,
popupTransitionName: PropTypes.oneOfType([
PropTypes.string,
PropTypes.object,
]),
popupAnimation: PropTypes.any,
mouseEnterDelay: PropTypes.number.def(0),
mouseLeaveDelay: PropTypes.number.def(0.1),
zIndex: PropTypes.number,
focusDelay: PropTypes.number.def(0),
blurDelay: PropTypes.number.def(0.15),
2017-12-26 11:04:28 +00:00
getPopupContainer: PropTypes.func,
2017-12-22 10:43:28 +00:00
getDocument: PropTypes.func.def(returnDocument),
forceRender: PropTypes.bool,
destroyPopupOnHide: PropTypes.bool.def(false),
mask: PropTypes.bool.def(false),
maskClosable: PropTypes.bool.def(true),
2018-01-11 10:53:51 +00:00
// onPopupAlign: PropTypes.func.def(noop),
2017-12-22 10:43:28 +00:00
popupAlign: PropTypes.object.def({}),
popupVisible: PropTypes.bool,
2017-12-26 11:04:28 +00:00
defaultPopupVisible: PropTypes.bool.def(false),
maskTransitionName: PropTypes.oneOfType([
PropTypes.string,
PropTypes.object,
]),
maskAnimation: PropTypes.string,
2017-12-22 10:43:28 +00:00
},
2018-01-12 08:10:41 +00:00
mixins: [BaseMixin],
2017-12-22 10:43:28 +00:00
data () {
const props = this.$props
let popupVisible
2017-12-27 10:15:11 +00:00
if (hasProp(this, 'popupVisible')) {
2017-12-22 10:43:28 +00:00
popupVisible = !!props.popupVisible
} else {
popupVisible = !!props.defaultPopupVisible
}
return {
sPopupVisible: popupVisible,
}
},
beforeCreate () {
ALL_HANDLERS.forEach((h) => {
this[`fire${h}`] = (e) => {
2018-01-17 08:12:53 +00:00
this.fireEvents(h, e)
2017-12-22 10:43:28 +00:00
}
})
},
mounted () {
2018-02-02 09:42:05 +00:00
this.$nextTick(() => {
2018-05-30 06:11:36 +00:00
this.renderComponent(null)
2018-02-02 09:42:05 +00:00
this.updatedCal()
})
2017-12-22 10:43:28 +00:00
},
watch: {
popupVisible (val) {
if (val !== undefined) {
this.sPopupVisible = val
}
},
sPopupVisible (val) {
this.$nextTick(() => {
2018-05-30 06:11:36 +00:00
this.renderComponent(null, () => {
this.afterPopupVisibleChange(val)
})
2017-12-22 10:43:28 +00:00
})
},
},
2017-12-25 10:08:36 +00:00
updated () {
2018-02-02 09:42:05 +00:00
this.$nextTick(() => {
this.updatedCal()
})
2017-12-22 10:43:28 +00:00
},
beforeDestroy () {
this.clearDelayTimer()
this.clearOutsideHandler()
},
methods: {
2017-12-25 10:08:36 +00:00
updatedCal () {
const props = this.$props
const state = this.$data
// We must listen to `mousedown` or `touchstart`, edge case:
// https://github.com/ant-design/ant-design/issues/5804
// https://github.com/react-component/calendar/issues/250
// https://github.com/react-component/trigger/issues/50
if (state.sPopupVisible) {
let currentDocument
2018-01-29 10:57:20 +00:00
if (!this.clickOutsideHandler && (this.isClickToHide() || this.isContextmenuToShow())) {
2017-12-25 10:08:36 +00:00
currentDocument = props.getDocument()
this.clickOutsideHandler = addEventListener(currentDocument,
'mousedown', this.onDocumentClick)
}
// always hide on mobile
if (!this.touchOutsideHandler) {
currentDocument = currentDocument || props.getDocument()
this.touchOutsideHandler = addEventListener(currentDocument,
'touchstart', this.onDocumentClick)
}
2018-01-29 10:57:20 +00:00
// close popup when trigger type contains 'onContextmenu' and document is scrolling.
if (!this.contextmenuOutsideHandler1 && this.isContextmenuToShow()) {
2017-12-25 10:08:36 +00:00
currentDocument = currentDocument || props.getDocument()
2018-01-29 10:57:20 +00:00
this.contextmenuOutsideHandler1 = addEventListener(currentDocument,
'scroll', this.onContextmenuClose)
2017-12-25 10:08:36 +00:00
}
2018-01-29 10:57:20 +00:00
// close popup when trigger type contains 'onContextmenu' and window is blur.
if (!this.contextmenuOutsideHandler2 && this.isContextmenuToShow()) {
this.contextmenuOutsideHandler2 = addEventListener(window,
'blur', this.onContextmenuClose)
2017-12-25 10:08:36 +00:00
}
2018-02-02 09:42:05 +00:00
} else {
this.clearOutsideHandler()
2017-12-25 10:08:36 +00:00
}
},
onMouseenter (e) {
this.fireEvents('mouseenter', e)
2017-12-22 10:43:28 +00:00
this.delaySetPopupVisible(true, this.$props.mouseEnterDelay)
},
2017-12-25 10:08:36 +00:00
onMouseleave (e) {
this.fireEvents('mouseleave', e)
2017-12-22 10:43:28 +00:00
this.delaySetPopupVisible(false, this.$props.mouseLeaveDelay)
},
2017-12-25 10:08:36 +00:00
onPopupMouseenter () {
2017-12-22 10:43:28 +00:00
this.clearDelayTimer()
},
2017-12-25 10:08:36 +00:00
onPopupMouseleave (e) {
2017-12-22 10:43:28 +00:00
if (e.relatedTarget && !e.relatedTarget.setTimeout &&
2018-02-02 09:42:05 +00:00
this._component &&
2018-05-30 06:11:36 +00:00
this._component.getPopupDomNode &&
contains(this._component.getPopupDomNode(), e.relatedTarget)) {
2017-12-22 10:43:28 +00:00
return
}
this.delaySetPopupVisible(false, this.$props.mouseLeaveDelay)
},
onFocus (e) {
2017-12-25 10:08:36 +00:00
this.fireEvents('focus', e)
2017-12-22 10:43:28 +00:00
// incase focusin and focusout
this.clearDelayTimer()
if (this.isFocusToShow()) {
this.focusTime = Date.now()
this.delaySetPopupVisible(true, this.$props.focusDelay)
}
},
2017-12-25 10:08:36 +00:00
onMousedown (e) {
this.fireEvents('mousedown', e)
2017-12-22 10:43:28 +00:00
this.preClickTime = Date.now()
},
2018-02-04 05:12:54 +00:00
onTouchstart (e) {
this.fireEvents('touchstart', e)
2017-12-22 10:43:28 +00:00
this.preTouchTime = Date.now()
},
onBlur (e) {
2017-12-25 10:08:36 +00:00
this.fireEvents('blur', e)
2017-12-22 10:43:28 +00:00
this.clearDelayTimer()
if (this.isBlurToHide()) {
this.delaySetPopupVisible(false, this.$props.blurDelay)
}
},
2018-01-29 10:57:20 +00:00
onContextmenu (e) {
2017-12-22 10:43:28 +00:00
e.preventDefault()
2018-01-29 10:57:20 +00:00
this.fireEvents('contextmenu', e)
2017-12-22 10:43:28 +00:00
this.setPopupVisible(true)
},
2018-01-29 10:57:20 +00:00
onContextmenuClose () {
if (this.isContextmenuToShow()) {
2017-12-22 10:43:28 +00:00
this.close()
}
},
onClick (event) {
2017-12-25 10:08:36 +00:00
this.fireEvents('click', event)
2017-12-22 10:43:28 +00:00
// focus will trigger click
if (this.focusTime) {
let preTime
if (this.preClickTime && this.preTouchTime) {
preTime = Math.min(this.preClickTime, this.preTouchTime)
} else if (this.preClickTime) {
preTime = this.preClickTime
} else if (this.preTouchTime) {
preTime = this.preTouchTime
}
if (Math.abs(preTime - this.focusTime) < 20) {
return
}
this.focusTime = 0
}
this.preClickTime = 0
this.preTouchTime = 0
2018-01-18 02:43:39 +00:00
event.preventDefault && event.preventDefault()
if (event.domEvent) {
event.domEvent.preventDefault()
}
2017-12-22 10:43:28 +00:00
const nextVisible = !this.$data.sPopupVisible
if (this.isClickToHide() && !nextVisible || nextVisible && this.isClickToShow()) {
this.setPopupVisible(!this.$data.sPopupVisible)
}
},
onDocumentClick (event) {
if (this.$props.mask && !this.$props.maskClosable) {
return
}
const target = event.target
const root = this.$el
const popupNode = this.getPopupDomNode()
if (!contains(root, target) && !contains(popupNode, target)) {
this.close()
}
},
getPopupDomNode () {
2018-05-30 06:11:36 +00:00
if (this._component && this._component.getPopupDomNode) {
return this._component.getPopupDomNode()
2017-12-22 10:43:28 +00:00
}
return null
},
getRootDomNode () {
2018-01-17 08:12:53 +00:00
return this.$el
2018-01-18 10:58:36 +00:00
// return this.$el.children[0] || this.$el
2017-12-22 10:43:28 +00:00
},
2018-01-11 10:53:51 +00:00
handleGetPopupClassFromAlign (align) {
2017-12-22 10:43:28 +00:00
const className = []
const props = this.$props
const { popupPlacement, builtinPlacements, prefixCls } = props
if (popupPlacement && builtinPlacements) {
className.push(getPopupClassNameFromAlign(builtinPlacements, prefixCls, align))
}
if (props.getPopupClassNameFromAlign) {
className.push(props.getPopupClassNameFromAlign(align))
}
return className.join(' ')
},
getPopupAlign () {
const props = this.$props
const { popupPlacement, popupAlign, builtinPlacements } = props
if (popupPlacement && builtinPlacements) {
return getAlignFromPlacement(builtinPlacements, popupPlacement, popupAlign)
}
return popupAlign
},
2018-05-30 06:11:36 +00:00
savePopup (node) {
2018-05-30 07:43:31 +00:00
this._component = node && node.componentInstance
2018-05-30 06:11:36 +00:00
},
getComponent () {
2018-01-20 12:24:42 +00:00
const self = this
2017-12-22 10:43:28 +00:00
const mouseProps = {}
if (this.isMouseEnterToShow()) {
2018-01-20 12:24:42 +00:00
mouseProps.mouseenter = self.onPopupMouseenter
2017-12-22 10:43:28 +00:00
}
if (this.isMouseLeaveToHide()) {
2018-01-20 12:24:42 +00:00
mouseProps.mouseleave = self.onPopupMouseleave
2017-12-22 10:43:28 +00:00
}
const { prefixCls, destroyPopupOnHide, sPopupVisible,
2018-01-12 08:10:41 +00:00
popupStyle, popupClassName, action,
2018-01-11 10:53:51 +00:00
popupAnimation, handleGetPopupClassFromAlign, getRootDomNode,
2017-12-22 10:43:28 +00:00
mask, zIndex, popupTransitionName, getPopupAlign,
2018-01-20 12:24:42 +00:00
maskAnimation, maskTransitionName, getContainer } = self
2017-12-22 10:43:28 +00:00
const popupProps = {
2018-05-30 06:11:36 +00:00
props: {
prefixCls,
destroyPopupOnHide,
visible: sPopupVisible,
action,
align: getPopupAlign(),
animation: popupAnimation,
getClassNameFromAlign: handleGetPopupClassFromAlign,
getRootDomNode,
mask,
zIndex,
transitionName: popupTransitionName,
maskAnimation,
maskTransitionName,
getContainer,
popupClassName,
popupStyle,
},
on: {
2018-01-20 12:24:42 +00:00
align: self.$listeners.popupAlign || noop,
2017-12-22 10:43:28 +00:00
...mouseProps,
},
2018-05-30 06:11:36 +00:00
directives: [
{
name: 'ant-ref',
value: this.savePopup,
2018-01-20 12:24:42 +00:00
},
2018-05-30 06:11:36 +00:00
],
2018-01-20 12:24:42 +00:00
}
2018-05-30 06:11:36 +00:00
return (
<Popup
{...popupProps}
>
{getComponentFromProp(self, 'popup')}
</Popup>
)
2017-12-22 10:43:28 +00:00
},
getContainer () {
const { $props: props } = this
2018-02-03 11:48:03 +00:00
const popupContainer = document.createElement('div')
// Make sure default popup container will never cause scrollbar appearing
// https://github.com/react-component/trigger/issues/41
popupContainer.style.position = 'absolute'
popupContainer.style.top = '0'
popupContainer.style.left = '0'
popupContainer.style.width = '100%'
2017-12-22 10:43:28 +00:00
const mountNode = props.getPopupContainer
? props.getPopupContainer(this.$el) : props.getDocument().body
2018-02-03 11:48:03 +00:00
mountNode.appendChild(popupContainer)
this.popupContainer = popupContainer
return popupContainer
2017-12-22 10:43:28 +00:00
},
setPopupVisible (sPopupVisible) {
this.clearDelayTimer()
if (this.$data.sPopupVisible !== sPopupVisible) {
2017-12-27 10:15:11 +00:00
if (!hasProp(this, 'popupVisible')) {
2017-12-22 10:43:28 +00:00
this.setState({
sPopupVisible,
})
}
2018-01-12 08:10:41 +00:00
this.$listeners.popupVisibleChange && this.$listeners.popupVisibleChange(sPopupVisible)
2017-12-22 10:43:28 +00:00
}
},
delaySetPopupVisible (visible, delayS) {
const delay = delayS * 1000
this.clearDelayTimer()
if (delay) {
2018-02-04 03:08:04 +00:00
this.delayTimer = requestAnimationTimeout(() => {
2017-12-22 10:43:28 +00:00
this.setPopupVisible(visible)
this.clearDelayTimer()
}, delay)
} else {
this.setPopupVisible(visible)
}
},
clearDelayTimer () {
if (this.delayTimer) {
2018-02-04 03:08:04 +00:00
cancelAnimationTimeout(this.delayTimer)
2017-12-22 10:43:28 +00:00
this.delayTimer = null
}
},
clearOutsideHandler () {
if (this.clickOutsideHandler) {
this.clickOutsideHandler.remove()
this.clickOutsideHandler = null
}
2018-01-29 10:57:20 +00:00
if (this.contextmenuOutsideHandler1) {
this.contextmenuOutsideHandler1.remove()
this.contextmenuOutsideHandler1 = null
2017-12-22 10:43:28 +00:00
}
2018-01-29 10:57:20 +00:00
if (this.contextmenuOutsideHandler2) {
this.contextmenuOutsideHandler2.remove()
this.contextmenuOutsideHandler2 = null
2017-12-22 10:43:28 +00:00
}
if (this.touchOutsideHandler) {
this.touchOutsideHandler.remove()
this.touchOutsideHandler = null
}
},
2018-01-18 10:58:36 +00:00
createTwoChains (event) {
2017-12-26 11:04:28 +00:00
let fn = () => {
}
2018-01-17 08:12:53 +00:00
const events = this.$listeners
if (this.childOriginEvents[event] && events[event]) {
2017-12-26 11:04:28 +00:00
return this[`fire${event}`]
2017-12-22 10:43:28 +00:00
}
2018-01-17 08:12:53 +00:00
fn = this.childOriginEvents[event] || events[event] || fn
2017-12-25 10:08:36 +00:00
return fn
2017-12-22 10:43:28 +00:00
},
isClickToShow () {
const { action, showAction } = this.$props
return action.indexOf('click') !== -1 || showAction.indexOf('click') !== -1
},
2018-01-29 10:57:20 +00:00
isContextmenuToShow () {
2017-12-22 10:43:28 +00:00
const { action, showAction } = this.$props
2018-01-29 10:57:20 +00:00
return action.indexOf('contextmenu') !== -1 || showAction.indexOf('contextmenu') !== -1
2017-12-22 10:43:28 +00:00
},
isClickToHide () {
const { action, hideAction } = this.$props
return action.indexOf('click') !== -1 || hideAction.indexOf('click') !== -1
},
isMouseEnterToShow () {
const { action, showAction } = this.$props
2017-12-25 10:08:36 +00:00
return action.indexOf('hover') !== -1 || showAction.indexOf('mouseenter') !== -1
2017-12-22 10:43:28 +00:00
},
isMouseLeaveToHide () {
const { action, hideAction } = this.$props
2017-12-25 10:08:36 +00:00
return action.indexOf('hover') !== -1 || hideAction.indexOf('mouseleave') !== -1
2017-12-22 10:43:28 +00:00
},
isFocusToShow () {
const { action, showAction } = this.$props
return action.indexOf('focus') !== -1 || showAction.indexOf('focus') !== -1
},
isBlurToHide () {
const { action, hideAction } = this.$props
return action.indexOf('focus') !== -1 || hideAction.indexOf('blur') !== -1
},
forcePopupAlign () {
2018-05-30 06:11:36 +00:00
if (this.$data.sPopupVisible && this._component && this._component.alignInstance) {
this._component.alignInstance.forceAlign()
2017-12-22 10:43:28 +00:00
}
},
fireEvents (type, e) {
2018-01-17 08:12:53 +00:00
if (this.childOriginEvents[type]) {
this.childOriginEvents[type](e)
2017-12-22 10:43:28 +00:00
}
2018-01-17 08:12:53 +00:00
this.__emit(type, e)
2017-12-22 10:43:28 +00:00
},
close () {
this.setPopupVisible(false)
},
},
2018-01-11 10:53:51 +00:00
render (h) {
2018-01-17 08:12:53 +00:00
const children = filterEmpty(this.$slots.default)
2017-12-26 11:04:28 +00:00
if (children.length > 1) {
warning(false, 'Trigger $slots.default.length > 1, just support only one default', true)
}
2018-03-01 02:21:06 +00:00
const child = children[0]
this.childOriginEvents = getEvents(child)
2017-12-22 10:43:28 +00:00
const newChildProps = {
props: {},
2018-02-05 03:18:50 +00:00
on: {},
2017-12-22 10:43:28 +00:00
key: 'trigger',
}
2018-01-29 10:57:20 +00:00
if (this.isContextmenuToShow()) {
newChildProps.on.contextmenu = this.onContextmenu
2017-12-22 10:43:28 +00:00
} else {
2018-01-29 10:57:20 +00:00
newChildProps.on.contextmenu = this.createTwoChains('contextmenu')
2017-12-22 10:43:28 +00:00
}
if (this.isClickToHide() || this.isClickToShow()) {
newChildProps.on.click = this.onClick
2017-12-25 10:08:36 +00:00
newChildProps.on.mousedown = this.onMousedown
2018-02-04 06:01:14 +00:00
newChildProps.on.touchstart = this.onTouchstart
2017-12-22 10:43:28 +00:00
} else {
2018-01-18 10:58:36 +00:00
newChildProps.on.click = this.createTwoChains('click')
newChildProps.on.mousedown = this.createTwoChains('mousedown')
2018-02-04 06:01:14 +00:00
newChildProps.on.touchstart = this.createTwoChains('onTouchstart')
2017-12-22 10:43:28 +00:00
}
if (this.isMouseEnterToShow()) {
2017-12-25 10:08:36 +00:00
newChildProps.on.mouseenter = this.onMouseenter
2017-12-22 10:43:28 +00:00
} else {
2018-01-18 10:58:36 +00:00
newChildProps.on.mouseenter = this.createTwoChains('mouseenter')
2017-12-22 10:43:28 +00:00
}
if (this.isMouseLeaveToHide()) {
2017-12-25 10:08:36 +00:00
newChildProps.on.mouseleave = this.onMouseleave
2017-12-22 10:43:28 +00:00
} else {
2018-01-18 10:58:36 +00:00
newChildProps.on.mouseleave = this.createTwoChains('mouseleave')
2017-12-22 10:43:28 +00:00
}
2018-01-08 10:31:04 +00:00
2017-12-22 10:43:28 +00:00
if (this.isFocusToShow() || this.isBlurToHide()) {
newChildProps.on.focus = this.onFocus
newChildProps.on.blur = this.onBlur
} else {
2018-01-18 10:58:36 +00:00
newChildProps.on.focus = this.createTwoChains('focus')
2018-06-07 06:40:10 +00:00
newChildProps.on.blur = (e) => {
if (!e.relatedTarget || !contains(e.target, e.relatedTarget)) {
this.createTwoChains('blur')(e)
}
}
2017-12-22 10:43:28 +00:00
}
2017-12-26 11:04:28 +00:00
const { sPopupVisible, forceRender } = this
2018-01-18 10:58:36 +00:00
const trigger = cloneElement(child, newChildProps)
2018-05-30 06:11:36 +00:00
return (
<ContainerRender
parent={this}
visible={sPopupVisible}
autoMount={false}
forceRender={forceRender}
getComponent={this.getComponent}
getContainer={this.getContainer}
children={({ renderComponent }) => {
this.renderComponent = renderComponent
return trigger
}}
/>
)
2017-12-22 10:43:28 +00:00
},
}