ant-design/components/_util/wave.tsx

240 lines
6.8 KiB
TypeScript
Raw Normal View History

import { updateCSS } from 'rc-util/lib/Dom/dynamicCSS';
2022-06-22 14:57:09 +08:00
import { composeRef, supportRef } from 'rc-util/lib/ref';
import * as React from 'react';
import type { ConfigConsumerProps, CSPConfig } from '../config-provider';
import { ConfigConsumer, ConfigContext } from '../config-provider';
2022-06-22 14:57:09 +08:00
import raf from './raf';
import { cloneElement } from './reactNode';
let styleForPseudo: HTMLStyleElement | null;
2018-08-31 17:38:02 +08:00
// Where el is the DOM element you'd like to test for visibility
function isHidden(element: HTMLElement) {
if (process.env.NODE_ENV === 'test') {
return false;
}
return !element || element.offsetParent === null || element.hidden;
}
function getValidateContainer(nodeRoot: Node): Element {
if (nodeRoot instanceof Document) {
return nodeRoot.body;
}
return Array.from(nodeRoot.childNodes).find(
ele => ele?.nodeType === Node.ELEMENT_NODE,
) as Element;
}
2019-08-05 18:38:10 +08:00
function isNotGrey(color: string) {
// eslint-disable-next-line no-useless-escape
const match = (color || '').match(/rgba?\((\d*), (\d*), (\d*)(, [\d.]*)?\)/);
2019-08-05 18:38:10 +08:00
if (match && match[1] && match[2] && match[3]) {
return !(match[1] === match[2] && match[2] === match[3]);
}
return true;
}
export interface WaveProps {
insertExtraNode?: boolean;
disabled?: boolean;
children?: React.ReactNode;
}
class Wave extends React.Component<WaveProps> {
static contextType = ConfigContext;
private instance?: {
cancel: () => void;
};
private containerRef = React.createRef<HTMLDivElement>();
2018-08-20 23:55:35 +08:00
private extraNode: HTMLDivElement;
2019-08-05 18:38:10 +08:00
2018-08-20 23:55:35 +08:00
private clickWaveTimeoutId: number;
2019-08-05 18:38:10 +08:00
private animationStartId: number;
2019-08-05 18:38:10 +08:00
private animationStart: boolean = false;
2019-08-05 18:38:10 +08:00
private destroyed: boolean = false;
2019-08-05 18:38:10 +08:00
private csp?: CSPConfig;
context: ConfigConsumerProps;
2019-08-05 18:38:10 +08:00
componentDidMount() {
this.destroyed = false;
const node = this.containerRef.current as HTMLDivElement;
2019-08-05 18:38:10 +08:00
if (!node || node.nodeType !== 1) {
return;
}
this.instance = this.bindAnimationEvent(node);
}
componentWillUnmount() {
if (this.instance) {
this.instance.cancel();
}
2019-08-05 18:38:10 +08:00
if (this.clickWaveTimeoutId) {
clearTimeout(this.clickWaveTimeoutId);
}
this.destroyed = true;
}
2018-08-20 23:55:35 +08:00
onClick = (node: HTMLElement, waveColor: string) => {
const { insertExtraNode, disabled } = this.props;
if (disabled || !node || isHidden(node) || node.className.indexOf('-leave') >= 0) {
2018-08-11 15:46:45 +08:00
return;
}
2018-08-20 23:55:35 +08:00
this.extraNode = document.createElement('div');
2019-08-05 18:38:10 +08:00
const { extraNode } = this;
const { getPrefixCls } = this.context;
extraNode.className = `${getPrefixCls('')}-click-animating-node`;
2018-08-20 23:55:35 +08:00
const attributeName = this.getAttributeName();
node.setAttribute(attributeName, 'true');
// Not white or transparent or grey
2018-12-07 20:02:01 +08:00
if (
waveColor &&
waveColor !== '#ffffff' &&
waveColor !== 'rgb(255, 255, 255)' &&
2019-08-05 18:38:10 +08:00
isNotGrey(waveColor) &&
!/rgba\((?:\d*, ){3}0\)/.test(waveColor) && // any transparent rgba color
2018-12-07 20:02:01 +08:00
waveColor !== 'transparent'
) {
extraNode.style.borderColor = waveColor;
const nodeRoot = node.getRootNode?.() || node.ownerDocument;
const nodeBody = getValidateContainer(nodeRoot) ?? nodeRoot;
styleForPseudo = updateCSS(
`
[${getPrefixCls('')}-click-animating-without-extra-node='true']::after, .${getPrefixCls(
'',
)}-click-animating-node {
2019-07-29 16:29:54 +08:00
--antd-wave-shadow-color: ${waveColor};
}`,
'antd-wave',
{ csp: this.csp, attachTo: nodeBody },
);
}
if (insertExtraNode) {
node.appendChild(extraNode);
}
['transition', 'animation'].forEach(name => {
node.addEventListener(`${name}start`, this.onTransitionStart);
node.addEventListener(`${name}end`, this.onTransitionEnd);
});
2018-12-07 20:02:01 +08:00
};
2019-08-05 18:38:10 +08:00
onTransitionStart = (e: AnimationEvent) => {
if (this.destroyed) {
return;
}
2019-08-05 18:38:10 +08:00
const node = this.containerRef.current as HTMLDivElement;
if (!e || e.target !== node || this.animationStart) {
2019-08-05 18:38:10 +08:00
return;
}
this.resetEffect(node);
2019-08-05 18:38:10 +08:00
};
onTransitionEnd = (e: AnimationEvent) => {
if (!e || e.animationName !== 'fadeEffect') {
return;
}
this.resetEffect(e.target as HTMLElement);
};
getAttributeName() {
const { getPrefixCls } = this.context;
2019-08-05 18:38:10 +08:00
const { insertExtraNode } = this.props;
return insertExtraNode
? `${getPrefixCls('')}-click-animating`
: `${getPrefixCls('')}-click-animating-without-extra-node`;
2019-08-05 18:38:10 +08:00
}
bindAnimationEvent = (node: HTMLElement) => {
2018-12-07 20:02:01 +08:00
if (
!node ||
!node.getAttribute ||
node.getAttribute('disabled') ||
node.className.indexOf('disabled') >= 0
) {
return;
}
const onClick = (e: MouseEvent) => {
// Fix radio button click twice
if ((e.target as HTMLElement).tagName === 'INPUT' || isHidden(e.target as HTMLElement)) {
return;
}
2018-08-20 23:55:35 +08:00
this.resetEffect(node);
// Get wave color from target
const waveColor =
getComputedStyle(node).getPropertyValue('border-top-color') || // Firefox Compatible
getComputedStyle(node).getPropertyValue('border-color') ||
getComputedStyle(node).getPropertyValue('background-color');
this.clickWaveTimeoutId = window.setTimeout(() => this.onClick(node, waveColor), 0);
raf.cancel(this.animationStartId);
this.animationStart = true;
// Render to trigger transition event cost 3 frames. Let's delay 10 frames to reset this.
this.animationStartId = raf(() => {
this.animationStart = false;
}, 10);
};
node.addEventListener('click', onClick, true);
return {
cancel: () => {
node.removeEventListener('click', onClick, true);
},
};
2018-12-07 20:02:01 +08:00
};
2018-08-20 23:55:35 +08:00
resetEffect(node: HTMLElement) {
if (!node || node === this.extraNode || !(node instanceof Element)) {
2018-08-27 11:43:54 +08:00
return;
}
2018-08-20 23:55:35 +08:00
const { insertExtraNode } = this.props;
const attributeName = this.getAttributeName();
node.setAttribute(attributeName, 'false'); // edge has bug on `removeAttribute` #14466
2018-08-20 23:55:35 +08:00
if (styleForPseudo) {
styleForPseudo.innerHTML = '';
}
2019-08-05 18:38:10 +08:00
if (insertExtraNode && this.extraNode && node.contains(this.extraNode)) {
node.removeChild(this.extraNode);
2018-08-20 23:55:35 +08:00
}
['transition', 'animation'].forEach(name => {
node.removeEventListener(`${name}start`, this.onTransitionStart);
node.removeEventListener(`${name}end`, this.onTransitionEnd);
});
}
renderWave = ({ csp }: ConfigConsumerProps) => {
const { children } = this.props;
this.csp = csp;
if (!React.isValidElement(children)) return children;
let ref: React.Ref<any> = this.containerRef;
if (supportRef(children)) {
ref = composeRef((children as any).ref, this.containerRef as any);
}
return cloneElement(children, { ref });
};
render() {
return <ConfigConsumer>{this.renderWave}</ConfigConsumer>;
}
}
export default Wave;