mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-13 04:53:11 +08:00
Code Issues Actions 22 Packages Projects Releases Wiki Activity

💄 refactor alert code for better semantic

Browse Source 
close #19426
This commit is contained in:
afc163 2019-10-28 15:25:22 +08:00 committed by 偏右
parent f8a3da5f4a
commit ff382abc51
2 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/alert/index.tsx
View File

@ -52,7 +52,7 @@ export default class Alert extends React.Component<AlertProps, AlertState> {
); );
this.state = { this.state = {
closing: true, closing: false,
closed: false, closed: false,
}; };
} }
@ -66,15 +66,15 @@ export default class Alert extends React.Component<AlertProps, AlertState> {
dom.style.height = `${dom.offsetHeight}px`; dom.style.height = `${dom.offsetHeight}px`;
this.setState({ this.setState({
closing: false, closing: true,
}); });
(this.props.onClose || noop)(e); (this.props.onClose || noop)(e);
}; };
animationEnd = () => { animationEnd = () => {
this.setState({ this.setState({
closing: false,
closed: true, closed: true,
closing: true,
}); });
(this.props.afterClose || noop)(); (this.props.afterClose || noop)();
}; };
@ -91,6 +91,7 @@ export default class Alert extends React.Component<AlertProps, AlertState> {
icon, icon,
} = this.props; } = this.props;
let { closable, type, showIcon, iconType } = this.props; let { closable, type, showIcon, iconType } = this.props;
const { closing, closed } = this.state;
const prefixCls = getPrefixCls('alert', customizePrefixCls); const prefixCls = getPrefixCls('alert', customizePrefixCls);
@ -133,7 +134,7 @@ export default class Alert extends React.Component<AlertProps, AlertState> {
prefixCls, prefixCls,
`${prefixCls}-${type}`, `${prefixCls}-${type}`,
{ {
[`${prefixCls}-close`]: !this.state.closing, [`${prefixCls}-closing`]: closing,
[`${prefixCls}-with-description`]: !!description, [`${prefixCls}-with-description`]: !!description,
[`${prefixCls}-no-icon`]: !showIcon, [`${prefixCls}-no-icon`]: !showIcon,
[`${prefixCls}-banner`]: !!banner, [`${prefixCls}-banner`]: !!banner,
@ -162,23 +163,22 @@ export default class Alert extends React.Component<AlertProps, AlertState> {
const iconNode = (icon && const iconNode = (icon &&
(React.isValidElement<{ className?: string }>(icon) ? ( (React.isValidElement<{ className?: string }>(icon) ? (
React.cloneElement(icon, { React.cloneElement(icon, {
className: classNames({ className: classNames(`${prefixCls}-icon`, {
[icon.props.className as string]: icon.props.className, [icon.props.className as string]: icon.props.className,
[`${prefixCls}-icon`]: true,
}), }),
}) })
) : ( ) : (
<span className={`${prefixCls}-icon`}>{icon}</span> <span className={`${prefixCls}-icon`}>{icon}</span>
))) || <Icon className={`${prefixCls}-icon`} type={iconType} theme={iconTheme} />; ))) || <Icon className={`${prefixCls}-icon`} type={iconType} theme={iconTheme} />;
return this.state.closed ? null : ( return closed ? null : (
<Animate <Animate
component="" component=""
showProp="data-show" showProp="data-show"
transitionName={`${prefixCls}-slide-up`} transitionName={`${prefixCls}-slide-up`}
onEnd={this.animationEnd} onEnd={this.animationEnd}
> >
<div data-show={this.state.closing} className={alertCls} style={style} {...dataOrAriaProps}> <div data-show={!closing} className={alertCls} style={style} {...dataOrAriaProps}>
{showIcon ? iconNode : null} {showIcon ? iconNode : null}
<span className={`${prefixCls}-message`}>{message}</span> <span className={`${prefixCls}-message`}>{message}</span>
<span className={`${prefixCls}-description`}>{description}</span> <span className={`${prefixCls}-description`}>{description}</span>

3
components/alert/style/index.less
View File

@ -77,6 +77,7 @@
line-height: 22px; line-height: 22px;
background-color: transparent; background-color: transparent;
border: none; border: none;
outline: none;
cursor: pointer; cursor: pointer;
.@{iconfont-css-prefix}-close { .@{iconfont-css-prefix}-close {
@ -138,7 +139,7 @@
display: block; display: block;
} }
&&-close { &&-closing {
height: 0 !important; height: 0 !important;
margin: 0; margin: 0;
padding-top: 0; padding-top: 0;