refactor: Alert use CSSMotion (#26115)

* refactor: Alert use CSSMotion * chore * test: remove afterClose case
ant-design · Aug 11, 2020 · cec7744 · cec7744
1 parent f650139
commit cec7744
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 73 deletions.
diff --git a/components/alert/__tests__/index.test.tsx b/components/alert/__tests__/index.test.tsx
@@ -21,20 +21,17 @@ describe('Alert', () => {
 
   it('could be closed', () => {
     const onClose = jest.fn();
-    const afterClose = jest.fn();
     const wrapper = mount(
       <Alert
         message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
         type="warning"
         closable
         onClose={onClose}
-        afterClose={afterClose}
       />,
     );
     wrapper.find('.ant-alert-close-icon').simulate('click');
-    expect(onClose).toHaveBeenCalled();
     jest.runAllTimers();
-    expect(afterClose).toHaveBeenCalled();
+    expect(onClose).toHaveBeenCalled();
   });
 
   describe('data and aria props', () => {

diff --git a/components/alert/index.tsx b/components/alert/index.tsx
@@ -8,7 +8,7 @@ import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
 import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
 import InfoCircleFilled from '@ant-design/icons/InfoCircleFilled';
 import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
-import Animate from 'rc-animate';
+import CSSMotion from 'rc-motion';
 import classNames from 'classnames';
 
 import { ConfigContext } from '../config-provider';
@@ -75,27 +75,21 @@ const Alert: AlertInterface = ({
   onMouseEnter,
   onMouseLeave,
   onClick,
+  afterClose,
   showIcon,
   closable,
   closeText,
   ...props
 }) => {
-  const [closing, setClosing] = React.useState(false);
   const [closed, setClosed] = React.useState(false);
 
   const ref = React.useRef<HTMLElement>();
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('alert', customizePrefixCls);
 
   const handleClose = (e: React.MouseEvent<HTMLButtonElement>) => {
-    setClosing(true);
-    props.onClose?.(e);
-  };
-
-  const animationEnd = () => {
-    setClosing(false);
     setClosed(true);
-    props.afterClose?.();
+    props.onClose?.(e);
   };
 
   const getType = () => {
@@ -149,7 +143,6 @@ const Alert: AlertInterface = ({
     prefixCls,
     `${prefixCls}-${type}`,
     {
-      [`${prefixCls}-closing`]: closing,
       [`${prefixCls}-with-description`]: !!description,
       [`${prefixCls}-no-icon`]: !isShowIcon,
       [`${prefixCls}-banner`]: !!banner,
@@ -161,30 +154,36 @@ const Alert: AlertInterface = ({
 
   const dataOrAriaProps = getDataOrAriaProps(props);
 
-  return closed ? null : (
-    <Animate
-      component=""
-      showProp="data-show"
-      transitionName={`${prefixCls}-slide-up`}
-      onEnd={animationEnd}
+  return (
+    <CSSMotion
+      visible={!closed}
+      motionName={`${prefixCls}-motion`}
+      motionAppear={false}
+      motionEnter={false}
+      onLeaveStart={node => ({
+        maxHeight: node.offsetHeight,
+      })}
+      onLeaveEnd={afterClose}
     >
-      <div
-        ref={ref}
-        data-show={!closing}
-        className={alertCls}
-        style={style}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-        onClick={onClick}
-        role="alert"
-        {...dataOrAriaProps}
-      >
-        {isShowIcon ? renderIconNode() : null}
-        <span className={`${prefixCls}-message`}>{message}</span>
-        <span className={`${prefixCls}-description`}>{description}</span>
-        {renderCloseIcon()}
-      </div>
-    </Animate>
+      {({ className: motionClassName, style: motionStyle }) => (
+        <div
+          ref={ref}
+          data-show={!closed}
+          className={classNames(alertCls, motionClassName)}
+          style={{ ...style, ...motionStyle }}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+          onClick={onClick}
+          role="alert"
+          {...dataOrAriaProps}
+        >
+          {isShowIcon ? renderIconNode() : null}
+          <span className={`${prefixCls}-message`}>{message}</span>
+          <span className={`${prefixCls}-description`}>{description}</span>
+          {renderCloseIcon()}
+        </div>
+      )}
+    </CSSMotion>
   );
 };
 

diff --git a/components/alert/style/index.less b/components/alert/style/index.less
@@ -7,7 +7,6 @@
   .reset-component;
 
   position: relative;
-  max-height: 1000vh;
   padding: 8px 15px 8px 37px;
   word-wrap: break-word;
   border-radius: @border-radius-base;
@@ -146,18 +145,20 @@
     display: block;
   }
 
-  &&-closing {
+  &&-motion-leave {
+    overflow: hidden;
+    opacity: 1;
+    transition: max-height 0.3s @ease-in-out-circ, opacity 0.3s @ease-in-out-circ,
+      padding-top 0.3s @ease-in-out-circ, padding-bottom 0.3s @ease-in-out-circ,
+      margin-bottom 0.3s @ease-in-out-circ;
+  }
+
+  &&-motion-leave-active {
     max-height: 0;
-    margin: 0;
+    margin-bottom: 0 !important;
     padding-top: 0;
     padding-bottom: 0;
-    transform-origin: 50% 0;
-    transition: all 0.3s @ease-in-out-circ;
-  }
-
-  &-slide-up-leave {
-    animation: antAlertSlideUpOut 0.3s @ease-in-out-circ;
-    animation-fill-mode: both;
+    opacity: 0;
   }
 
   &-banner {
@@ -167,30 +168,4 @@
   }
 }
 
-@keyframes antAlertSlideUpIn {
-  0% {
-    transform: scaleY(0);
-    transform-origin: 0% 0%;
-    opacity: 0;
-  }
-  100% {
-    transform: scaleY(1);
-    transform-origin: 0% 0%;
-    opacity: 1;
-  }
-}
-
-@keyframes antAlertSlideUpOut {
-  0% {
-    transform: scaleY(1);
-    transform-origin: 0% 0%;
-    opacity: 1;
-  }
-  100% {
-    transform: scaleY(0);
-    transform-origin: 0% 0%;
-    opacity: 0;
-  }
-}
-
 @import './rtl';