2020-05-29 10:36:50 +00:00
|
|
|
import { nextTick, inject } from 'vue';
|
2019-01-12 03:33:27 +00:00
|
|
|
import TransitionEvents from './css-animation/Event';
|
2020-03-07 11:45:13 +00:00
|
|
|
import raf from './raf';
|
|
|
|
import { ConfigConsumerProps } from '../config-provider';
|
2020-07-27 14:36:56 +00:00
|
|
|
import { findDOMNode } from './props-util';
|
2019-01-12 03:33:27 +00:00
|
|
|
let styleForPesudo;
|
2018-11-14 13:54:13 +00:00
|
|
|
|
|
|
|
// Where el is the DOM element you'd like to test for visibility
|
2019-01-12 03:33:27 +00:00
|
|
|
function isHidden(element) {
|
2018-12-13 13:26:21 +00:00
|
|
|
if (process.env.NODE_ENV === 'test') {
|
2019-01-12 03:33:27 +00:00
|
|
|
return false;
|
2018-12-13 13:26:21 +00:00
|
|
|
}
|
2019-01-12 03:33:27 +00:00
|
|
|
return !element || element.offsetParent === null;
|
2018-11-14 13:54:13 +00:00
|
|
|
}
|
2020-03-07 11:45:13 +00:00
|
|
|
function isNotGrey(color) {
|
|
|
|
// eslint-disable-next-line no-useless-escape
|
|
|
|
const match = (color || '').match(/rgba?\((\d*), (\d*), (\d*)(, [\.\d]*)?\)/);
|
|
|
|
if (match && match[1] && match[2] && match[3]) {
|
|
|
|
return !(match[1] === match[2] && match[2] === match[3]);
|
|
|
|
}
|
|
|
|
return true;
|
|
|
|
}
|
2018-09-05 13:28:54 +00:00
|
|
|
export default {
|
|
|
|
name: 'Wave',
|
|
|
|
props: ['insertExtraNode'],
|
2019-01-12 03:33:27 +00:00
|
|
|
mounted() {
|
2020-05-27 11:11:46 +00:00
|
|
|
nextTick(() => {
|
2020-07-27 14:36:56 +00:00
|
|
|
const node = findDOMNode(this);
|
2018-11-14 13:54:13 +00:00
|
|
|
if (node.nodeType !== 1) {
|
2019-01-12 03:33:27 +00:00
|
|
|
return;
|
2018-11-14 13:54:13 +00:00
|
|
|
}
|
2019-01-12 03:33:27 +00:00
|
|
|
this.instance = this.bindAnimationEvent(node);
|
|
|
|
});
|
2018-09-05 13:28:54 +00:00
|
|
|
},
|
2020-05-29 10:36:50 +00:00
|
|
|
setup() {
|
|
|
|
const configProvider = inject('configProvider', ConfigConsumerProps);
|
|
|
|
return {
|
|
|
|
configProvider,
|
|
|
|
};
|
2020-03-07 11:45:13 +00:00
|
|
|
},
|
2020-06-11 08:13:09 +00:00
|
|
|
beforeUnmount() {
|
2018-09-05 13:28:54 +00:00
|
|
|
if (this.instance) {
|
2019-01-12 03:33:27 +00:00
|
|
|
this.instance.cancel();
|
2018-09-05 13:28:54 +00:00
|
|
|
}
|
2018-12-13 13:26:21 +00:00
|
|
|
if (this.clickWaveTimeoutId) {
|
2019-01-12 03:33:27 +00:00
|
|
|
clearTimeout(this.clickWaveTimeoutId);
|
2018-12-13 13:26:21 +00:00
|
|
|
}
|
2019-01-12 03:33:27 +00:00
|
|
|
this.destroy = true;
|
2018-09-05 13:28:54 +00:00
|
|
|
},
|
|
|
|
methods: {
|
2019-01-12 03:33:27 +00:00
|
|
|
onClick(node, waveColor) {
|
2018-11-14 13:54:13 +00:00
|
|
|
if (!node || isHidden(node) || node.className.indexOf('-leave') >= 0) {
|
2019-01-12 03:33:27 +00:00
|
|
|
return;
|
2018-09-05 13:28:54 +00:00
|
|
|
}
|
2019-01-12 03:33:27 +00:00
|
|
|
const { insertExtraNode } = this.$props;
|
|
|
|
this.extraNode = document.createElement('div');
|
|
|
|
const extraNode = this.extraNode;
|
|
|
|
extraNode.className = 'ant-click-animating-node';
|
|
|
|
const attributeName = this.getAttributeName();
|
|
|
|
node.removeAttribute(attributeName);
|
|
|
|
node.setAttribute(attributeName, 'true');
|
2020-06-22 08:44:39 +00:00
|
|
|
// Not white or transparent or grey
|
2019-01-12 03:33:27 +00:00
|
|
|
styleForPesudo = styleForPesudo || document.createElement('style');
|
|
|
|
if (
|
|
|
|
waveColor &&
|
|
|
|
waveColor !== '#ffffff' &&
|
|
|
|
waveColor !== 'rgb(255, 255, 255)' &&
|
2020-03-07 11:45:13 +00:00
|
|
|
isNotGrey(waveColor) &&
|
2019-01-12 03:33:27 +00:00
|
|
|
!/rgba\(\d*, \d*, \d*, 0\)/.test(waveColor) && // any transparent rgba color
|
|
|
|
waveColor !== 'transparent'
|
|
|
|
) {
|
2020-03-07 11:45:13 +00:00
|
|
|
// Add nonce if CSP exist
|
|
|
|
if (this.csp && this.csp.nonce) {
|
|
|
|
styleForPesudo.nonce = this.csp.nonce;
|
|
|
|
}
|
2019-01-12 03:33:27 +00:00
|
|
|
extraNode.style.borderColor = waveColor;
|
2020-03-07 11:45:13 +00:00
|
|
|
styleForPesudo.innerHTML = `
|
|
|
|
[ant-click-animating-without-extra-node='true']::after, .ant-click-animating-node {
|
|
|
|
--antd-wave-shadow-color: ${waveColor};
|
|
|
|
}`;
|
2018-11-14 13:54:13 +00:00
|
|
|
if (!document.body.contains(styleForPesudo)) {
|
2019-01-12 03:33:27 +00:00
|
|
|
document.body.appendChild(styleForPesudo);
|
2018-11-14 13:54:13 +00:00
|
|
|
}
|
2018-09-05 13:28:54 +00:00
|
|
|
}
|
|
|
|
if (insertExtraNode) {
|
2019-01-12 03:33:27 +00:00
|
|
|
node.appendChild(extraNode);
|
2018-09-05 13:28:54 +00:00
|
|
|
}
|
2019-01-12 03:33:27 +00:00
|
|
|
TransitionEvents.addStartEventListener(node, this.onTransitionStart);
|
|
|
|
TransitionEvents.addEndEventListener(node, this.onTransitionEnd);
|
2018-09-05 13:28:54 +00:00
|
|
|
},
|
2020-03-07 11:45:13 +00:00
|
|
|
onTransitionStart(e) {
|
|
|
|
if (this.destroy) return;
|
2018-09-05 13:28:54 +00:00
|
|
|
|
2020-07-27 14:36:56 +00:00
|
|
|
const node = findDOMNode(this);
|
2020-03-07 11:45:13 +00:00
|
|
|
if (!e || e.target !== node) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!this.animationStart) {
|
|
|
|
this.resetEffect(node);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
onTransitionEnd(e) {
|
|
|
|
if (!e || e.animationName !== 'fadeEffect') {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.resetEffect(e.target);
|
|
|
|
},
|
|
|
|
getAttributeName() {
|
|
|
|
const { insertExtraNode } = this.$props;
|
|
|
|
return insertExtraNode ? 'ant-click-animating' : 'ant-click-animating-without-extra-node';
|
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
bindAnimationEvent(node) {
|
|
|
|
if (
|
|
|
|
!node ||
|
2018-09-17 02:20:23 +00:00
|
|
|
!node.getAttribute ||
|
|
|
|
node.getAttribute('disabled') ||
|
2019-01-12 03:33:27 +00:00
|
|
|
node.className.indexOf('disabled') >= 0
|
|
|
|
) {
|
|
|
|
return;
|
2018-09-05 13:28:54 +00:00
|
|
|
}
|
2019-01-12 03:33:27 +00:00
|
|
|
const onClick = e => {
|
2018-09-05 13:28:54 +00:00
|
|
|
// Fix radio button click twice
|
2018-11-14 13:54:13 +00:00
|
|
|
if (e.target.tagName === 'INPUT' || isHidden(e.target)) {
|
2019-01-12 03:33:27 +00:00
|
|
|
return;
|
2018-09-05 13:28:54 +00:00
|
|
|
}
|
2019-01-12 03:33:27 +00:00
|
|
|
this.resetEffect(node);
|
2018-09-17 02:20:23 +00:00
|
|
|
// Get wave color from target
|
|
|
|
const waveColor =
|
|
|
|
getComputedStyle(node).getPropertyValue('border-top-color') || // Firefox Compatible
|
|
|
|
getComputedStyle(node).getPropertyValue('border-color') ||
|
2019-01-12 03:33:27 +00:00
|
|
|
getComputedStyle(node).getPropertyValue('background-color');
|
|
|
|
this.clickWaveTimeoutId = window.setTimeout(() => this.onClick(node, waveColor), 0);
|
|
|
|
raf.cancel(this.animationStartId);
|
|
|
|
this.animationStart = true;
|
2018-12-13 13:26:21 +00:00
|
|
|
|
|
|
|
// Render to trigger transition event cost 3 frames. Let's delay 10 frames to reset this.
|
|
|
|
this.animationStartId = raf(() => {
|
2019-01-12 03:33:27 +00:00
|
|
|
this.animationStart = false;
|
|
|
|
}, 10);
|
|
|
|
};
|
|
|
|
node.addEventListener('click', onClick, true);
|
2018-09-05 13:28:54 +00:00
|
|
|
return {
|
|
|
|
cancel: () => {
|
2019-01-12 03:33:27 +00:00
|
|
|
node.removeEventListener('click', onClick, true);
|
2018-09-05 13:28:54 +00:00
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2018-09-05 13:28:54 +00:00
|
|
|
},
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
resetEffect(node) {
|
2019-01-02 12:56:06 +00:00
|
|
|
if (!node || node === this.extraNode || !(node instanceof Element)) {
|
2019-01-12 03:33:27 +00:00
|
|
|
return;
|
2018-09-17 02:20:23 +00:00
|
|
|
}
|
2019-01-12 03:33:27 +00:00
|
|
|
const { insertExtraNode } = this.$props;
|
|
|
|
const attributeName = this.getAttributeName();
|
2020-03-07 11:45:13 +00:00
|
|
|
node.setAttribute(attributeName, 'false'); // edge has bug on `removeAttribute` #14466
|
|
|
|
if (styleForPesudo) {
|
|
|
|
styleForPesudo.innerHTML = '';
|
|
|
|
}
|
2018-09-17 02:20:23 +00:00
|
|
|
if (insertExtraNode && this.extraNode && node.contains(this.extraNode)) {
|
2019-01-12 03:33:27 +00:00
|
|
|
node.removeChild(this.extraNode);
|
2018-09-17 02:20:23 +00:00
|
|
|
}
|
2019-01-12 03:33:27 +00:00
|
|
|
TransitionEvents.removeStartEventListener(node, this.onTransitionStart);
|
|
|
|
TransitionEvents.removeEndEventListener(node, this.onTransitionEnd);
|
2018-09-17 02:20:23 +00:00
|
|
|
},
|
2018-09-05 13:28:54 +00:00
|
|
|
},
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
render() {
|
2020-05-29 10:36:50 +00:00
|
|
|
const csp = this.configProvider.csp;
|
2020-05-27 11:11:46 +00:00
|
|
|
if (csp) {
|
|
|
|
this.csp = csp;
|
2020-03-07 11:45:13 +00:00
|
|
|
}
|
2020-05-29 10:36:50 +00:00
|
|
|
return this.$slots.default && this.$slots.default()[0];
|
2018-09-05 13:28:54 +00:00
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|