mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-13 15:49:10 +08:00
51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
|
|
import CSSMotion from 'rc-motion';
|
|
import React from 'react';
|
|
|
|
export interface LoadingIconProps {
|
|
prefixCls: string;
|
|
existIcon: boolean;
|
|
loading?: boolean | object;
|
|
}
|
|
const getCollapsedWidth = () => ({ width: 0, opacity: 0, transform: 'scale(0)' });
|
|
const getRealWidth = (node: HTMLElement) => ({
|
|
width: node.scrollWidth,
|
|
opacity: 1,
|
|
transform: 'scale(1)',
|
|
});
|
|
|
|
const LoadingIcon: React.FC<LoadingIconProps> = ({ prefixCls, loading, existIcon }) => {
|
|
const visible = !!loading;
|
|
|
|
if (existIcon) {
|
|
return (
|
|
<span className={`${prefixCls}-loading-icon`}>
|
|
<LoadingOutlined />
|
|
</span>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<CSSMotion
|
|
visible={visible}
|
|
// We do not really use this motionName
|
|
motionName={`${prefixCls}-loading-icon-motion`}
|
|
removeOnLeave
|
|
onAppearStart={getCollapsedWidth}
|
|
onAppearActive={getRealWidth}
|
|
onEnterStart={getCollapsedWidth}
|
|
onEnterActive={getRealWidth}
|
|
onLeaveStart={getRealWidth}
|
|
onLeaveActive={getCollapsedWidth}
|
|
>
|
|
{({ className, style }: { className?: string; style?: React.CSSProperties }, ref: any) => (
|
|
<span className={`${prefixCls}-loading-icon`} style={style} ref={ref}>
|
|
<LoadingOutlined className={className} />
|
|
</span>
|
|
)}
|
|
</CSSMotion>
|
|
);
|
|
};
|
|
|
|
export default LoadingIcon;
|