ant-design/components/_util/wave/index.ts
二货爱吃白萝卜 45eeee60bb
Some checks are pending
Publish Any Commit / build (push) Waiting to run
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
✅ test / lint (push) Waiting to run
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
✅ test / test-node (push) Waiting to run
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test / test-coverage (push) Blocked by required conditions
✅ test / build (push) Waiting to run
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
feat: Add unstable api for React 19 compitable (#51979)
* chore: add unstable entrance

* chore: rest of it

* chore: use React 19

* chore: fix lint

* chore: fix lint

* chore: fix lint

* chore: fix lint

* chore: fix lint

* chore: fix lint

* chore: fix lint

* chore: test ignore 19 preload

* chore: bump rc-util

* fix: warning of pure render

* fix: warning of 19

* chore: adjust ts

* test: fix test logic

* test: fix test case

* test: fix test case

* test: fix test case

* test: fix test case

* test: fix test case

* test: fix test case

* test: fix test case

* test: fix test case

* chore: restore file

* test: fix test case

* test: fix test case

* test: fix test case

* test: fix test case

* test: fix test case

* test: update test

* test: fix test case

* test: update snapshot

* test: fix coverage

* test: fix coverage

* test: add ignore image
2024-12-18 14:09:49 +08:00

77 lines
2.3 KiB
TypeScript

import React, { useContext, useRef } from 'react';
import classNames from 'classnames';
import isVisible from 'rc-util/lib/Dom/isVisible';
import { composeRef, getNodeRef, supportRef } from 'rc-util/lib/ref';
import type { ConfigConsumerProps } from '../../config-provider';
import { ConfigContext } from '../../config-provider';
import { cloneElement } from '../reactNode';
import type { WaveComponent } from './interface';
import useStyle from './style';
import useWave from './useWave';
export interface WaveProps {
disabled?: boolean;
children?: React.ReactNode;
component?: WaveComponent;
}
const Wave: React.FC<WaveProps> = (props) => {
const { children, disabled, component } = props;
const { getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext);
const containerRef = useRef<HTMLElement>(null!);
// ============================== Style ===============================
const prefixCls = getPrefixCls('wave');
const [, hashId] = useStyle(prefixCls);
// =============================== Wave ===============================
const showWave = useWave(containerRef, classNames(prefixCls, hashId), component);
// ============================== Effect ==============================
React.useEffect(() => {
const node = containerRef.current;
if (!node || node.nodeType !== 1 || disabled) {
return;
}
// Click handler
const onClick = (e: MouseEvent) => {
// Fix radio button click twice
if (
!isVisible(e.target as HTMLElement) ||
// No need wave
!node.getAttribute ||
node.getAttribute('disabled') ||
(node as HTMLInputElement).disabled ||
node.className.includes('disabled') ||
node.className.includes('-leave')
) {
return;
}
showWave(e);
};
// Bind events
node.addEventListener('click', onClick, true);
return () => {
node.removeEventListener('click', onClick, true);
};
}, [disabled]);
// ============================== Render ==============================
if (!React.isValidElement(children)) {
return children ?? null;
}
const ref = supportRef(children) ? composeRef(getNodeRef(children), containerRef) : containerRef;
return cloneElement(children, { ref });
};
if (process.env.NODE_ENV !== 'production') {
Wave.displayName = 'Wave';
}
export default Wave;