ant-design/components/button/LoadingIcon.tsx

87 lines
2.3 KiB
TypeScript
Raw Normal View History

import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
import classNames from 'classnames';
2022-06-22 14:57:09 +08:00
import CSSMotion from 'rc-motion';
import React, { forwardRef } from 'react';
import IconWrapper from './IconWrapper';
type InnerLoadingIconProps = {
prefixCls: string;
className?: string;
style?: React.CSSProperties;
iconClassName?: string;
};
const InnerLoadingIcon = forwardRef<HTMLSpanElement, InnerLoadingIconProps>(
({ prefixCls, className, style, iconClassName }, ref) => {
const mergedIconCls = classNames(`${prefixCls}-loading-icon`, className);
return (
<IconWrapper prefixCls={prefixCls} className={mergedIconCls} style={style} ref={ref}>
<LoadingOutlined className={iconClassName} />
</IconWrapper>
);
},
);
export interface LoadingIconProps {
prefixCls: string;
existIcon: boolean;
loading?: boolean | object;
className?: string;
style?: React.CSSProperties;
}
const getCollapsedWidth = (): React.CSSProperties => ({
width: 0,
opacity: 0,
transform: 'scale(0)',
});
const getRealWidth = (node: HTMLElement): React.CSSProperties => ({
width: node.scrollWidth,
opacity: 1,
transform: 'scale(1)',
});
const LoadingIcon: React.FC<LoadingIconProps> = (props) => {
const { prefixCls, loading, existIcon, className, style } = props;
const visible = !!loading;
if (existIcon) {
return <InnerLoadingIcon prefixCls={prefixCls} className={className} style={style} />;
}
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: motionCls,
style: motionStyle,
}: { className?: string; style?: React.CSSProperties },
ref: any,
) => (
<InnerLoadingIcon
prefixCls={prefixCls}
className={className}
style={{ ...style, ...motionStyle }}
ref={ref}
iconClassName={motionCls}
/>
)}
</CSSMotion>
);
};
export default LoadingIcon;