index.js 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. import React, { useContext, useRef } from 'react';
  2. import classNames from 'classnames';
  3. import isVisible from "rc-util/es/Dom/isVisible";
  4. import { composeRef, getNodeRef, supportRef } from "rc-util/es/ref";
  5. import { ConfigContext } from '../../config-provider';
  6. import { cloneElement } from '../reactNode';
  7. import useStyle from './style';
  8. import useWave from './useWave';
  9. const Wave = props => {
  10. const {
  11. children,
  12. disabled,
  13. component
  14. } = props;
  15. const {
  16. getPrefixCls
  17. } = useContext(ConfigContext);
  18. const containerRef = useRef(null);
  19. // ============================== Style ===============================
  20. const prefixCls = getPrefixCls('wave');
  21. const [, hashId] = useStyle(prefixCls);
  22. // =============================== Wave ===============================
  23. const showWave = useWave(containerRef, classNames(prefixCls, hashId), component);
  24. // ============================== Effect ==============================
  25. React.useEffect(() => {
  26. const node = containerRef.current;
  27. if (!node || node.nodeType !== window.Node.ELEMENT_NODE || disabled) {
  28. return;
  29. }
  30. // Click handler
  31. const onClick = e => {
  32. // Fix radio button click twice
  33. if (!isVisible(e.target) ||
  34. // No need wave
  35. !node.getAttribute || node.getAttribute('disabled') || node.disabled || node.className.includes('disabled') && !node.className.includes('disabled:') || node.getAttribute('aria-disabled') === 'true' || node.className.includes('-leave')) {
  36. return;
  37. }
  38. showWave(e);
  39. };
  40. // Bind events
  41. node.addEventListener('click', onClick, true);
  42. return () => {
  43. node.removeEventListener('click', onClick, true);
  44. };
  45. }, [disabled]);
  46. // ============================== Render ==============================
  47. if (! /*#__PURE__*/React.isValidElement(children)) {
  48. return children !== null && children !== void 0 ? children : null;
  49. }
  50. const ref = supportRef(children) ? composeRef(getNodeRef(children), containerRef) : containerRef;
  51. return cloneElement(children, {
  52. ref
  53. });
  54. };
  55. if (process.env.NODE_ENV !== 'production') {
  56. Wave.displayName = 'Wave';
  57. }
  58. export default Wave;