linkmore-design/lib/_util/wave.js

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _dynamicCSS = require("rc-util/lib/Dom/dynamicCSS");
var _ref = require("rc-util/lib/ref");
var React = _interopRequireWildcard(require("react"));
var _configProvider = require("../config-provider");
var _raf = _interopRequireDefault(require("./raf"));
var _reactNode = require("./reactNode");
let styleForPseudo;

// 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 || element.hidden;
}
function getValidateContainer(nodeRoot) {
  if (nodeRoot instanceof Document) {
    return nodeRoot.body;
  }
  return Array.from(nodeRoot.childNodes).find(ele => ele?.nodeType === Node.ELEMENT_NODE);
}
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;
}
class Wave extends React.Component {
  static contextType = _configProvider.ConfigContext;
  instance;
  containerRef = /*#__PURE__*/React.createRef();
  extraNode;
  clickWaveTimeoutId;
  animationStartId;
  animationStart = false;
  destroyed = false;
  csp;
  context;
  componentDidMount() {
    this.destroyed = false;
    const node = this.containerRef.current;
    if (!node || node.nodeType !== 1) {
      return;
    }
    this.instance = this.bindAnimationEvent(node);
  }
  componentWillUnmount() {
    if (this.instance) {
      this.instance.cancel();
    }
    if (this.clickWaveTimeoutId) {
      clearTimeout(this.clickWaveTimeoutId);
    }
    this.destroyed = true;
  }
  onClick = (node, waveColor) => {
    const {
      insertExtraNode,
      disabled
    } = this.props;
    if (disabled || !node || isHidden(node) || node.className.includes('-leave')) {
      return;
    }
    this.extraNode = document.createElement('div');
    const {
      extraNode
    } = this;
    const {
      getPrefixCls
    } = this.context;
    extraNode.className = `${getPrefixCls('')}-click-animating-node`;
    const attributeName = this.getAttributeName();
    node.setAttribute(attributeName, 'true');
    // Not white or transparent or grey
    if (waveColor && waveColor !== '#fff' && waveColor !== '#ffffff' && waveColor !== 'rgb(255, 255, 255)' && waveColor !== 'rgba(255, 255, 255, 1)' && isNotGrey(waveColor) && !/rgba\((?:\d*, ){3}0\)/.test(waveColor) &&
    // any transparent rgba color
    waveColor !== 'transparent') {
      extraNode.style.borderColor = waveColor;
      const nodeRoot = node.getRootNode?.() || node.ownerDocument;
      const nodeBody = getValidateContainer(nodeRoot) ?? nodeRoot;
      styleForPseudo = (0, _dynamicCSS.updateCSS)(`
      [${getPrefixCls('')}-click-animating-without-extra-node='true']::after, .${getPrefixCls('')}-click-animating-node {
        --antd-wave-shadow-color: ${waveColor};
      }`, 'antd-wave', {
        csp: this.csp,
        attachTo: nodeBody
      });
    }
    if (insertExtraNode) {
      node.appendChild(extraNode);
    }
    ['transition', 'animation'].forEach(name => {
      node.addEventListener(`${name}start`, this.onTransitionStart);
      node.addEventListener(`${name}end`, this.onTransitionEnd);
    });
  };
  onTransitionStart = e => {
    if (this.destroyed) {
      return;
    }
    const node = this.containerRef.current;
    if (!e || e.target !== node || this.animationStart) {
      return;
    }
    this.resetEffect(node);
  };
  onTransitionEnd = e => {
    if (!e || e.animationName !== 'fadeEffect') {
      return;
    }
    this.resetEffect(e.target);
  };
  getAttributeName() {
    const {
      getPrefixCls
    } = this.context;
    const {
      insertExtraNode
    } = this.props;
    return insertExtraNode ? `${getPrefixCls('')}-click-animating` : `${getPrefixCls('')}-click-animating-without-extra-node`;
  }
  bindAnimationEvent = node => {
    if (!node || !node.getAttribute || node.getAttribute('disabled') || node.className.includes('disabled')) {
      return;
    }
    const onClick = e => {
      // Fix radio button click twice
      if (e.target.tagName === 'INPUT' || isHidden(e.target)) {
        return;
      }
      this.resetEffect(node);
      // Get wave color from target
      const waveColor = getComputedStyle(node).getPropertyValue('border-top-color') ||
      // Firefox Compatible
      getComputedStyle(node).getPropertyValue('border-color') || getComputedStyle(node).getPropertyValue('background-color');
      this.clickWaveTimeoutId = window.setTimeout(() => 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)(() => {
        this.animationStart = false;
      }, 10);
    };
    node.addEventListener('click', onClick, true);
    return {
      cancel: () => {
        node.removeEventListener('click', onClick, true);
      }
    };
  };
  resetEffect(node) {
    if (!node || node === this.extraNode || !(node instanceof Element)) {
      return;
    }
    const {
      insertExtraNode
    } = this.props;
    const attributeName = this.getAttributeName();
    node.setAttribute(attributeName, 'false'); // edge has bug on `removeAttribute` #14466

    if (styleForPseudo) {
      styleForPseudo.innerHTML = '';
    }
    if (insertExtraNode && this.extraNode && node.contains(this.extraNode)) {
      node.removeChild(this.extraNode);
    }
    ['transition', 'animation'].forEach(name => {
      node.removeEventListener(`${name}start`, this.onTransitionStart);
      node.removeEventListener(`${name}end`, this.onTransitionEnd);
    });
  }
  renderWave = ({
    csp
  }) => {
    const {
      children
    } = this.props;
    this.csp = csp;
    if (! /*#__PURE__*/React.isValidElement(children)) return children;
    let ref = this.containerRef;
    if ((0, _ref.supportRef)(children)) {
      ref = (0, _ref.composeRef)(children.ref, this.containerRef);
    }
    return (0, _reactNode.cloneElement)(children, {
      ref
    });
  };
  render() {
    return /*#__PURE__*/React.createElement(_configProvider.ConfigConsumer, null, this.renderWave);
  }
}
var _default = Wave;
exports.default = _default;