useWave.js 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. import * as React from 'react';
  2. import useEvent from "rc-util/es/hooks/useEvent";
  3. import raf from "rc-util/es/raf";
  4. import { ConfigContext } from '../../config-provider';
  5. import useToken from '../../theme/useToken';
  6. import { TARGET_CLS } from './interface';
  7. import showWaveEffect from './WaveEffect';
  8. const useWave = (nodeRef, className, component) => {
  9. const {
  10. wave
  11. } = React.useContext(ConfigContext);
  12. const [, token, hashId] = useToken();
  13. const showWave = useEvent(event => {
  14. const node = nodeRef.current;
  15. if ((wave === null || wave === void 0 ? void 0 : wave.disabled) || !node) {
  16. return;
  17. }
  18. const targetNode = node.querySelector(`.${TARGET_CLS}`) || node;
  19. const {
  20. showEffect
  21. } = wave || {};
  22. // Customize wave effect
  23. (showEffect || showWaveEffect)(targetNode, {
  24. className,
  25. token,
  26. component,
  27. event,
  28. hashId
  29. });
  30. });
  31. const rafId = React.useRef(null);
  32. // Merge trigger event into one for each frame
  33. const showDebounceWave = event => {
  34. raf.cancel(rafId.current);
  35. rafId.current = raf(() => {
  36. showWave(event);
  37. });
  38. };
  39. return showDebounceWave;
  40. };
  41. export default useWave;