qt-public-ui
Version:
新设计规范下业务组件库
195 lines (191 loc) • 8.75 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var React = _interopRequireWildcard(require("react"));
var _reactDom = require("react-dom");
var _Event = _interopRequireDefault(require("css-animation/lib/Event"));
var _raf = _interopRequireDefault(require("./raf"));
var _context = require("../config-provider/context");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable */
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 = exports["default"] = /*#__PURE__*/function (_React$Component) {
function Wave() {
var _this;
(0, _classCallCheck2["default"])(this, Wave);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, Wave, [].concat(args));
_this.instance = void 0;
_this.extraNode = void 0;
_this.clickWaveTimeoutId = void 0;
_this.animationStartId = void 0;
_this.animationStart = false;
_this.destroy = false;
_this.csp = void 0;
_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 _this2 = _this,
extraNode = _this2.extraNode;
extraNode.className = 'ant-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*, \d*, \d*, 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 [ant-click-animating-without-extra-node='true']::after, .ant-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);
}
_Event["default"].addStartEventListener(node, _this.onTransitionStart);
_Event["default"].addEndEventListener(node, _this.onTransitionEnd);
};
_this.onTransitionStart = function (e) {
if (_this.destroy) return;
var node = (0, _reactDom.findDOMNode)(_this);
if (!e || e.target !== node) {
return;
}
if (!_this.animationStart) {
_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["default"].cancel(_this.animationStartId);
_this.animationStart = true;
// Render to trigger transition event cost 3 frames. Let's delay 10 frames to reset this.
_this.animationStartId = (0, _raf["default"])(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;
}
(0, _inherits2["default"])(Wave, _React$Component);
return (0, _createClass2["default"])(Wave, [{
key: "componentDidMount",
value: function componentDidMount() {
var node = (0, _reactDom.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.destroy = true;
}
}, {
key: "getAttributeName",
value: function getAttributeName() {
var insertExtraNode = this.props.insertExtraNode;
return insertExtraNode ? 'ant-click-animating' : 'ant-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);
}
_Event["default"].removeStartEventListener(node, this.onTransitionStart);
_Event["default"].removeEndEventListener(node, this.onTransitionEnd);
}
}, {
key: "render",
value: function render() {
return /*#__PURE__*/React.createElement(_context.ConfigConsumer, null, this.renderWave);
}
}]);
}(React.Component);