You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
220 lines
6.8 KiB
220 lines
6.8 KiB
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
|
|
import _inherits from "@babel/runtime/helpers/inherits";
|
|
import _createSuper from "@babel/runtime/helpers/createSuper";
|
|
import * as React from 'react';
|
|
import { findDOMNode } from 'react-dom';
|
|
import TransitionEvents from "@ant-design/css-animation/es/Event";
|
|
import raf from './raf';
|
|
import { ConfigConsumer, ConfigContext } from '../config-provider';
|
|
var styleForPesudo; // Where el is the DOM element you'd like to test for visibility
|
|
|
|
function isHidden(element) {
|
|
if (process.env.NODE_ENV === 'test') {
|
|
return false;
|
|
}
|
|
|
|
return !element || element.offsetParent === null;
|
|
}
|
|
|
|
function isNotGrey(color) {
|
|
// eslint-disable-next-line no-useless-escape
|
|
var 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;
|
|
}
|
|
|
|
var Wave = /*#__PURE__*/function (_React$Component) {
|
|
_inherits(Wave, _React$Component);
|
|
|
|
var _super = _createSuper(Wave);
|
|
|
|
function Wave() {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Wave);
|
|
|
|
_this = _super.apply(this, arguments);
|
|
_this.animationStart = false;
|
|
_this.destroyed = false;
|
|
|
|
_this.onClick = function (node, waveColor) {
|
|
if (!node || isHidden(node) || node.className.indexOf('-leave') >= 0) {
|
|
return;
|
|
}
|
|
|
|
var insertExtraNode = _this.props.insertExtraNode;
|
|
_this.extraNode = document.createElement('div');
|
|
|
|
var _assertThisInitialize = _assertThisInitialized(_this),
|
|
extraNode = _assertThisInitialize.extraNode;
|
|
|
|
var getPrefixCls = _this.context.getPrefixCls;
|
|
extraNode.className = "".concat(getPrefixCls(''), "-click-animating-node");
|
|
|
|
var attributeName = _this.getAttributeName();
|
|
|
|
node.setAttribute(attributeName, 'true'); // Not white or transparnt or grey
|
|
|
|
styleForPesudo = styleForPesudo || document.createElement('style');
|
|
|
|
if (waveColor && waveColor !== '#ffffff' && waveColor !== 'rgb(255, 255, 255)' && isNotGrey(waveColor) && !/rgba\((?:\d*, ){3}0\)/.test(waveColor) && // any transparent rgba color
|
|
waveColor !== 'transparent') {
|
|
// Add nonce if CSP exist
|
|
if (_this.csp && _this.csp.nonce) {
|
|
styleForPesudo.nonce = _this.csp.nonce;
|
|
}
|
|
|
|
extraNode.style.borderColor = waveColor;
|
|
styleForPesudo.innerHTML = "\n [".concat(getPrefixCls(''), "-click-animating-without-extra-node='true']::after, .").concat(getPrefixCls(''), "-click-animating-node {\n --antd-wave-shadow-color: ").concat(waveColor, ";\n }");
|
|
|
|
if (!document.body.contains(styleForPesudo)) {
|
|
document.body.appendChild(styleForPesudo);
|
|
}
|
|
}
|
|
|
|
if (insertExtraNode) {
|
|
node.appendChild(extraNode);
|
|
}
|
|
|
|
TransitionEvents.addStartEventListener(node, _this.onTransitionStart);
|
|
TransitionEvents.addEndEventListener(node, _this.onTransitionEnd);
|
|
};
|
|
|
|
_this.onTransitionStart = function (e) {
|
|
if (_this.destroyed) {
|
|
return;
|
|
}
|
|
|
|
var node = findDOMNode(_assertThisInitialized(_this));
|
|
|
|
if (!e || e.target !== node || _this.animationStart) {
|
|
return;
|
|
}
|
|
|
|
_this.resetEffect(node);
|
|
};
|
|
|
|
_this.onTransitionEnd = function (e) {
|
|
if (!e || e.animationName !== 'fadeEffect') {
|
|
return;
|
|
}
|
|
|
|
_this.resetEffect(e.target);
|
|
};
|
|
|
|
_this.bindAnimationEvent = function (node) {
|
|
if (!node || !node.getAttribute || node.getAttribute('disabled') || node.className.indexOf('disabled') >= 0) {
|
|
return;
|
|
}
|
|
|
|
var onClick = function onClick(e) {
|
|
// Fix radio button click twice
|
|
if (e.target.tagName === 'INPUT' || isHidden(e.target)) {
|
|
return;
|
|
}
|
|
|
|
_this.resetEffect(node); // Get wave color from target
|
|
|
|
|
|
var waveColor = getComputedStyle(node).getPropertyValue('border-top-color') || // Firefox Compatible
|
|
getComputedStyle(node).getPropertyValue('border-color') || getComputedStyle(node).getPropertyValue('background-color');
|
|
_this.clickWaveTimeoutId = window.setTimeout(function () {
|
|
return _this.onClick(node, waveColor);
|
|
}, 0);
|
|
raf.cancel(_this.animationStartId);
|
|
_this.animationStart = true; // Render to trigger transition event cost 3 frames. Let's delay 10 frames to reset this.
|
|
|
|
_this.animationStartId = raf(function () {
|
|
_this.animationStart = false;
|
|
}, 10);
|
|
};
|
|
|
|
node.addEventListener('click', onClick, true);
|
|
return {
|
|
cancel: function cancel() {
|
|
node.removeEventListener('click', onClick, true);
|
|
}
|
|
};
|
|
};
|
|
|
|
_this.renderWave = function (_ref) {
|
|
var csp = _ref.csp;
|
|
var children = _this.props.children;
|
|
_this.csp = csp;
|
|
return children;
|
|
};
|
|
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Wave, [{
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
var node = findDOMNode(this);
|
|
|
|
if (!node || node.nodeType !== 1) {
|
|
return;
|
|
}
|
|
|
|
this.instance = this.bindAnimationEvent(node);
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
if (this.instance) {
|
|
this.instance.cancel();
|
|
}
|
|
|
|
if (this.clickWaveTimeoutId) {
|
|
clearTimeout(this.clickWaveTimeoutId);
|
|
}
|
|
|
|
this.destroyed = true;
|
|
}
|
|
}, {
|
|
key: "getAttributeName",
|
|
value: function getAttributeName() {
|
|
var getPrefixCls = this.context.getPrefixCls;
|
|
var insertExtraNode = this.props.insertExtraNode;
|
|
return insertExtraNode ? "".concat(getPrefixCls(''), "-click-animating") : "".concat(getPrefixCls(''), "-click-animating-without-extra-node");
|
|
}
|
|
}, {
|
|
key: "resetEffect",
|
|
value: function resetEffect(node) {
|
|
if (!node || node === this.extraNode || !(node instanceof Element)) {
|
|
return;
|
|
}
|
|
|
|
var insertExtraNode = this.props.insertExtraNode;
|
|
var attributeName = this.getAttributeName();
|
|
node.setAttribute(attributeName, 'false'); // edge has bug on `removeAttribute` #14466
|
|
|
|
if (styleForPesudo) {
|
|
styleForPesudo.innerHTML = '';
|
|
}
|
|
|
|
if (insertExtraNode && this.extraNode && node.contains(this.extraNode)) {
|
|
node.removeChild(this.extraNode);
|
|
}
|
|
|
|
TransitionEvents.removeStartEventListener(node, this.onTransitionStart);
|
|
TransitionEvents.removeEndEventListener(node, this.onTransitionEnd);
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
return /*#__PURE__*/React.createElement(ConfigConsumer, null, this.renderWave);
|
|
}
|
|
}]);
|
|
|
|
return Wave;
|
|
}(React.Component);
|
|
|
|
export { Wave as default };
|
|
Wave.contextType = ConfigContext; |