2023-07-25 16:29:47 +08:00
|
|
|
import * as React from 'react';
|
2023-08-08 16:48:26 +08:00
|
|
|
import { useEvent } from 'rc-util';
|
2023-08-04 11:22:33 +08:00
|
|
|
import raf from 'rc-util/lib/raf';
|
2024-03-26 18:20:28 +08:00
|
|
|
|
2023-07-25 16:29:47 +08:00
|
|
|
import { ConfigContext } from '../../config-provider';
|
|
|
|
import useToken from '../../theme/useToken';
|
2023-08-04 11:22:33 +08:00
|
|
|
import { TARGET_CLS, type ShowWave } from './interface';
|
2024-03-26 18:20:28 +08:00
|
|
|
import showWaveEffect from './WaveEffect';
|
2022-12-28 23:20:22 +08:00
|
|
|
|
2024-03-26 18:20:28 +08:00
|
|
|
const useWave = (
|
2022-12-28 23:20:22 +08:00
|
|
|
nodeRef: React.RefObject<HTMLElement>,
|
|
|
|
className: string,
|
2024-03-26 18:20:28 +08:00
|
|
|
component?: 'Tag' | 'Button' | 'Checkbox' | 'Radio' | 'Switch',
|
|
|
|
) => {
|
2023-07-25 16:29:47 +08:00
|
|
|
const { wave } = React.useContext(ConfigContext);
|
2023-08-04 11:22:33 +08:00
|
|
|
const [, token, hashId] = useToken();
|
2023-07-25 16:29:47 +08:00
|
|
|
|
2023-08-04 11:22:33 +08:00
|
|
|
const showWave = useEvent<ShowWave>((event) => {
|
2022-12-28 23:20:22 +08:00
|
|
|
const node = nodeRef.current!;
|
|
|
|
|
2023-07-25 16:29:47 +08:00
|
|
|
if (wave?.disabled || !node) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2023-08-04 11:22:33 +08:00
|
|
|
const targetNode = node.querySelector<HTMLElement>(`.${TARGET_CLS}`) || node;
|
|
|
|
|
2023-07-25 16:29:47 +08:00
|
|
|
const { showEffect } = wave || {};
|
|
|
|
|
|
|
|
// Customize wave effect
|
2023-08-04 11:22:33 +08:00
|
|
|
(showEffect || showWaveEffect)(targetNode, { className, token, component, event, hashId });
|
2023-07-25 16:29:47 +08:00
|
|
|
});
|
2022-12-28 23:20:22 +08:00
|
|
|
|
2023-08-04 11:22:33 +08:00
|
|
|
const rafId = React.useRef<number>();
|
|
|
|
|
|
|
|
// Merge trigger event into one for each frame
|
|
|
|
const showDebounceWave: ShowWave = (event) => {
|
|
|
|
raf.cancel(rafId.current!);
|
|
|
|
|
|
|
|
rafId.current = raf(() => {
|
|
|
|
showWave(event);
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
return showDebounceWave;
|
2024-03-26 18:20:28 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
export default useWave;
|