qt-public-ui/es/CompatibleAntd3/_util/wave.js

新设计规范下业务组件库

import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
/* eslint-disable */
import * as React from 'react';
import { findDOMNode } from 'react-dom';
import TransitionEvents from 'css-animation/lib/Event';
import raf from './raf';
import { ConfigConsumer } from '../config-provider/context';
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) {
  function Wave() {
    var _this;
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _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: " + 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.destroy) return;
      var node = 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.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;
  }
  _inheritsLoose(Wave, _React$Component);
  var _proto = Wave.prototype;
  _proto.componentDidMount = function componentDidMount() {
    var node = findDOMNode(this);
    if (!node || node.nodeType !== 1) {
      return;
    }
    this.instance = this.bindAnimationEvent(node);
  };
  _proto.componentWillUnmount = function componentWillUnmount() {
    if (this.instance) {
      this.instance.cancel();
    }
    if (this.clickWaveTimeoutId) {
      clearTimeout(this.clickWaveTimeoutId);
    }
    this.destroy = true;
  };
  _proto.getAttributeName = function getAttributeName() {
    var insertExtraNode = this.props.insertExtraNode;
    return insertExtraNode ? 'ant-click-animating' : 'ant-click-animating-without-extra-node';
  };
  _proto.resetEffect = 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);
  };
  _proto.render = function render() {
    return /*#__PURE__*/React.createElement(ConfigConsumer, null, this.renderWave);
  };
  return Wave;
}(React.Component);
export { Wave as default };