mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 13:37:52 +08:00
138 lines
3.6 KiB
TypeScript
138 lines
3.6 KiB
TypeScript
import * as React from 'react';
|
|
import CSSMotion from 'rc-motion';
|
|
import raf from 'rc-util/lib/raf';
|
|
import { render, unmount } from 'rc-util/lib/React/render';
|
|
import classNames from 'classnames';
|
|
import { getTargetWaveColor } from './util';
|
|
|
|
function validateNum(value: number) {
|
|
return Number.isNaN(value) ? 0 : value;
|
|
}
|
|
|
|
export interface WaveEffectProps {
|
|
className: string;
|
|
target: HTMLElement;
|
|
}
|
|
|
|
const WaveEffect: React.FC<WaveEffectProps> = (props) => {
|
|
const { className, target } = props;
|
|
const divRef = React.useRef<HTMLDivElement>(null);
|
|
|
|
const [color, setWaveColor] = React.useState<string | null>(null);
|
|
const [borderRadius, setBorderRadius] = React.useState<number[]>([]);
|
|
const [left, setLeft] = React.useState(0);
|
|
const [top, setTop] = React.useState(0);
|
|
const [width, setWidth] = React.useState(0);
|
|
const [height, setHeight] = React.useState(0);
|
|
const [enabled, setEnabled] = React.useState(false);
|
|
|
|
const waveStyle = {
|
|
left,
|
|
top,
|
|
width,
|
|
height,
|
|
borderRadius: borderRadius.map((radius) => `${radius}px`).join(' '),
|
|
} as React.CSSProperties & {
|
|
[name: string]: number | string;
|
|
};
|
|
|
|
if (color) {
|
|
waveStyle['--wave-color'] = color;
|
|
}
|
|
|
|
function syncPos() {
|
|
const nodeStyle = getComputedStyle(target);
|
|
|
|
// Get wave color from target
|
|
setWaveColor(getTargetWaveColor(target));
|
|
|
|
const isStatic = nodeStyle.position === 'static';
|
|
|
|
// Rect
|
|
const { borderLeftWidth, borderTopWidth } = nodeStyle;
|
|
setLeft(isStatic ? target.offsetLeft : validateNum(-parseFloat(borderLeftWidth)));
|
|
setTop(isStatic ? target.offsetTop : validateNum(-parseFloat(borderTopWidth)));
|
|
setWidth(target.offsetWidth);
|
|
setHeight(target.offsetHeight);
|
|
|
|
// Get border radius
|
|
const {
|
|
borderTopLeftRadius,
|
|
borderTopRightRadius,
|
|
borderBottomLeftRadius,
|
|
borderBottomRightRadius,
|
|
} = nodeStyle;
|
|
|
|
setBorderRadius(
|
|
[
|
|
borderTopLeftRadius,
|
|
borderTopRightRadius,
|
|
borderBottomRightRadius,
|
|
borderBottomLeftRadius,
|
|
].map((radius) => validateNum(parseFloat(radius))),
|
|
);
|
|
}
|
|
|
|
React.useEffect(() => {
|
|
if (target) {
|
|
// We need delay to check position here
|
|
// since UI may change after click
|
|
const id = raf(() => {
|
|
syncPos();
|
|
|
|
setEnabled(true);
|
|
});
|
|
|
|
// Add resize observer to follow size
|
|
let resizeObserver: ResizeObserver;
|
|
if (typeof ResizeObserver !== 'undefined') {
|
|
resizeObserver = new ResizeObserver(syncPos);
|
|
|
|
resizeObserver.observe(target);
|
|
}
|
|
|
|
return () => {
|
|
raf.cancel(id);
|
|
resizeObserver?.disconnect();
|
|
};
|
|
}
|
|
}, []);
|
|
|
|
if (!enabled) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<CSSMotion
|
|
visible
|
|
motionAppear
|
|
motionName="wave-motion"
|
|
motionDeadline={5000}
|
|
onAppearEnd={(_, event) => {
|
|
if (event.deadline || (event as TransitionEvent).propertyName === 'opacity') {
|
|
const holder = divRef.current?.parentElement!;
|
|
unmount(holder).then(() => {
|
|
holder.parentElement?.removeChild(holder);
|
|
});
|
|
}
|
|
return false;
|
|
}}
|
|
>
|
|
{({ className: motionClassName }) => (
|
|
<div ref={divRef} className={classNames(className, motionClassName)} style={waveStyle} />
|
|
)}
|
|
</CSSMotion>
|
|
);
|
|
};
|
|
|
|
export default function showWaveEffect(node: HTMLElement, className: string) {
|
|
// Create holder
|
|
const holder = document.createElement('div');
|
|
holder.style.position = 'absolute';
|
|
holder.style.left = `0px`;
|
|
holder.style.top = `0px`;
|
|
node?.insertBefore(holder, node?.firstChild);
|
|
|
|
render(<WaveEffect target={node} className={className} />, holder);
|
|
}
|