ant-design/components/button/LoadingIcon.tsx
afc163 6957a5f90d
style: fix Button align issue ()
* style: fix Button align issue

* test: fix test case

* test: fix AutoComplete image diff

* test: fix Transfer image diff

* refactor: simpify icon position code

* chore: remove unused import

* chore: update snapshot

* chore: fix button style

* chore: fix button style
2024-05-09 17:41:26 +08:00

82 lines
2.2 KiB
TypeScript

import React, { forwardRef } from 'react';
import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
import classNames from 'classnames';
import CSSMotion from 'rc-motion';
import IconWrapper from './IconWrapper';
type InnerLoadingIconProps = {
prefixCls: string;
className?: string;
style?: React.CSSProperties;
iconClassName?: string;
};
const InnerLoadingIcon = forwardRef<HTMLSpanElement, InnerLoadingIconProps>((props, ref) => {
const { prefixCls, className, style, iconClassName } = props;
const mergedIconCls = classNames(`${prefixCls}-loading-icon`, className);
return (
<IconWrapper prefixCls={prefixCls} className={mergedIconCls} style={style} ref={ref}>
<LoadingOutlined className={iconClassName} />
</IconWrapper>
);
});
export type 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`}
motionLeave={visible}
removeOnLeave
onAppearStart={getCollapsedWidth}
onAppearActive={getRealWidth}
onEnterStart={getCollapsedWidth}
onEnterActive={getRealWidth}
onLeaveStart={getRealWidth}
onLeaveActive={getCollapsedWidth}
>
{({ className: motionCls, style: motionStyle }, ref: React.Ref<HTMLSpanElement>) => (
<InnerLoadingIcon
prefixCls={prefixCls}
className={className}
style={{ ...style, ...motionStyle }}
ref={ref}
iconClassName={motionCls}
/>
)}
</CSSMotion>
);
};
export default LoadingIcon;