You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
2.5 KiB
86 lines
2.5 KiB
import { Keyframes, useStyleRegister } from '@ant-design/cssinjs';
|
|
import { useContext } from 'react';
|
|
import { ConfigContext } from '../../config-provider';
|
|
import type { AliasToken, GenerateStyle, UseComponentStyleResult } from '../../theme';
|
|
import { useToken } from '../../theme';
|
|
|
|
interface WaveToken extends AliasToken {
|
|
hashId: string;
|
|
clickAnimatingNode: string;
|
|
clickAnimatingTrue: string;
|
|
clickAnimatingWithoutExtraNodeTrue: string;
|
|
clickAnimatingWithoutExtraNodeTrueAfter: string;
|
|
}
|
|
|
|
const genWaveStyle: GenerateStyle<WaveToken> = token => {
|
|
const waveEffect = new Keyframes('waveEffect', {
|
|
'100%': {
|
|
boxShadow: `0 0 0 6px var(--antd-wave-shadow-color)`,
|
|
},
|
|
});
|
|
|
|
const fadeEffect = new Keyframes('fadeEffect', {
|
|
'100%': {
|
|
opacity: 0,
|
|
},
|
|
});
|
|
|
|
return [
|
|
{
|
|
[`${token.clickAnimatingWithoutExtraNodeTrue},
|
|
${token.clickAnimatingTrue}`]: {
|
|
'--antd-wave-shadow-color': token.colorPrimary,
|
|
'--scroll-bar': 0,
|
|
position: 'relative',
|
|
},
|
|
[`${token.clickAnimatingWithoutExtraNodeTrueAfter},
|
|
& ${token.clickAnimatingNode}`]: {
|
|
position: 'absolute',
|
|
top: 0,
|
|
insetInlineStart: 0,
|
|
insetInlineEnd: 0,
|
|
bottom: 0,
|
|
display: 'block',
|
|
borderRadius: 'inherit',
|
|
boxShadow: `0 0 0 0 var(--antd-wave-shadow-color)`,
|
|
opacity: 0.2,
|
|
animation: {
|
|
_skip_check_: true,
|
|
value: `${fadeEffect.getName(token.hashId)} 2s ${
|
|
token.motionEaseOutCirc
|
|
}, ${waveEffect.getName(token.hashId)} 0.4s ${token.motionEaseOutCirc}`,
|
|
},
|
|
animationFillMode: 'forwards',
|
|
content: '""',
|
|
pointerEvents: 'none',
|
|
},
|
|
},
|
|
{},
|
|
waveEffect,
|
|
fadeEffect,
|
|
];
|
|
};
|
|
|
|
export default (): UseComponentStyleResult => {
|
|
const [theme, token, hashId] = useToken();
|
|
const { getPrefixCls } = useContext(ConfigContext);
|
|
const rootPrefixCls = getPrefixCls();
|
|
|
|
const clickAnimatingTrue = `[${rootPrefixCls}-click-animating='true']`;
|
|
const clickAnimatingWithoutExtraNodeTrue = `[${rootPrefixCls}-click-animating-without-extra-node='true']`;
|
|
const clickAnimatingNode = `.${rootPrefixCls}-click-animating-node`;
|
|
|
|
const waveToken: WaveToken = {
|
|
...token,
|
|
hashId,
|
|
clickAnimatingNode,
|
|
clickAnimatingTrue,
|
|
clickAnimatingWithoutExtraNodeTrue,
|
|
clickAnimatingWithoutExtraNodeTrueAfter: `${clickAnimatingWithoutExtraNodeTrue}::after`,
|
|
};
|
|
|
|
return [
|
|
useStyleRegister({ theme, token, hashId, path: ['wave'] }, () => [genWaveStyle(waveToken)]),
|
|
hashId,
|
|
];
|
|
};
|
|
|