chore(Animate): fix cr comments

alibaba-fusion · Jan 22, 2024 · 355bbdb · 355bbdb
1 parent 5177141
commit 355bbdb
Show file tree

Hide file tree

Showing 11 changed files with 222 additions and 237 deletions.
diff --git a/components/animate/__docs__/demo/basic/index.tsx b/components/animate/__docs__/demo/basic/index.tsx
@@ -2,18 +2,14 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Animate } from '@alifd/next';
 
-class Demo extends React.Component<any, any> {
-    constructor(props: any) {
-        super(props);
-        this.state = { visible: true };
-        this.handleToggle = this.handleToggle.bind(this);
-    }
+class Demo extends React.Component {
+    state = { visible: true };
 
-    handleToggle() {
+    handleToggle = () => {
         this.setState({
             visible: !this.state.visible,
         });
-    }
+    };
 
     render() {
         return (

diff --git a/components/animate/__docs__/demo/expand/index.tsx b/components/animate/__docs__/demo/expand/index.tsx
@@ -2,55 +2,41 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Animate } from '@alifd/next';
 
-class Demo extends React.Component<any, any> {
-    [key: string]: any;
-    constructor(props: any) {
-        super(props);
-        this.state = { expand: true };
-        [
-            'beforeEnter',
-            'onEnter',
-            'afterEnter',
-            'beforeLeave',
-            'onLeave',
-            'afterLeave',
-            'handleToggle',
-        ].forEach(method => {
-            this[method] = this[method].bind(this);
-        });
-    }
+class Demo extends React.Component {
+    state = { expand: true };
+    height: number | null;
 
-    handleToggle() {
+    handleToggle = () => {
         this.setState({
             expand: !this.state.expand,
         });
-    }
+    };
 
-    beforeEnter(node: HTMLElement) {
+    beforeEnter = (node: HTMLElement) => {
         this.height = node.offsetHeight;
         node.style.height = '0px';
-    }
+    };
 
-    onEnter(node: HTMLElement) {
+    onEnter = (node: HTMLElement) => {
         node.style.height = `${this.height}px`;
-    }
+    };
 
-    afterEnter(node: HTMLElement) {
+    afterEnter = (node: HTMLElement) => {
         this.height = null;
         node.style.setProperty('height', null);
-    }
+    };
 
-    beforeLeave(node: HTMLElement) {
+    beforeLeave = (node: HTMLElement) => {
         node.style.height = `${this.height}px`;
-    }
+    };
 
-    onLeave(node: HTMLElement) {
+    onLeave = (node: HTMLElement) => {
         node.style.height = '0px';
-    }
+    };
 
-    afterLeave(node: HTMLElement) {
+    afterLeave = (node: HTMLElement) => {
         node.style.setProperty('height', null);
-    }
+    };
 
     render() {
         return (

diff --git a/components/animate/__docs__/demo/multiple/index.tsx b/components/animate/__docs__/demo/multiple/index.tsx
@@ -2,18 +2,15 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Animate } from '@alifd/next';
 
-class TodoList extends React.Component<any, any> {
-    constructor(props: any) {
-        super(props);
-        this.state = { items: ['hello', 'world', 'click', 'me'] };
-    }
+class TodoList extends React.Component {
+    state = { items: ['hello', 'world', 'click', 'me'] };
 
     handleAdd() {
         this.setState({
             items: [
                 ...this.state.items,
-                // eslint-disable-next-line
-                prompt('Enter some text'),
+                // eslint-disable-next-line no-alert
+                window.prompt('Enter some text'),
             ],
         });
     }

diff --git a/components/animate/__docs__/index.en-us.md b/components/animate/__docs__/index.en-us.md
diff --git a/components/animate/__docs__/index.md b/components/animate/__docs__/index.md
diff --git a/components/animate/__tests__/index-spec.tsx b/components/animate/__tests__/index-spec.tsx
@@ -3,7 +3,12 @@ import PropTypes from 'prop-types';
 import Animate from '../index';
 import './index-spec.scss';
 
-class Demo extends React.Component<any, any> {
+interface DemoProps {
+    visible?: boolean;
+    expand?: boolean;
+}
+
+class Demo extends React.Component<DemoProps, { visible: boolean }> {
     static propTypes = {
         visible: PropTypes.bool,
         expand: PropTypes.bool,
@@ -14,17 +19,16 @@ class Demo extends React.Component<any, any> {
         expand: false,
     };
 
-    constructor(props: any) {
+    constructor(props: DemoProps) {
         super(props);
-        this.state = { visible: props.visible };
-        this.handleToggle = this.handleToggle.bind(this);
+        this.state = { visible: props.visible! };
     }
 
-    handleToggle() {
+    handleToggle = () => {
         this.setState({
             visible: !this.state.visible,
         });
-    }
+    };
 
     render() {
         const { visible, expand, ...others } = this.props;
@@ -96,8 +100,18 @@ describe('Animate', () => {
     it('should play expand animation', () => {
         cy.mount(<Demo visible={false} expand animation="expand" />);
         cy.get('button').click();
-        cy.get('.demo-wrapper').should('have.css', 'height', '23.5px');
-        cy.get('.demo-wrapper').should('have.css', 'height', '223.5px');
+        cy.get('.demo-wrapper')
+            .invoke('height')
+            .should('satisfy', num => {
+                // 避免不同浏览器对 .5px 处理方式的不同造成的测试失败，下同
+                return num < 24;
+            });
+        cy.get('.demo-wrapper')
+            .invoke('height')
+            .should('satisfy', num => {
+                // 这里多考虑了一些不同运行环境下具体值的扰动问题
+                return num >= 220 && num <= 224;
+            });
         cy.get('button').click();
         cy.get('.basic-demo').should('not.exist');
         cy.get('button').click();

diff --git a/components/animate/animate.tsx b/components/animate/animate.tsx
@@ -3,8 +3,6 @@ import PropTypes from 'prop-types';
 import { TransitionGroup } from 'react-transition-group';
 import AnimateChild from './child';
 import type { AnimateProps } from './types';
-import Expand from './expand';
-import OverlayAnimate from './overlay-animate';
 
 const noop = () => {};
 const FirstChild = (props: { children: ReactNode }) => {
@@ -16,65 +14,21 @@ const FirstChild = (props: { children: ReactNode }) => {
  * Animate
  */
 class Animate extends Component<AnimateProps> {
-    static Expand = Expand;
-    static OverlayAnimate = OverlayAnimate;
     static displayName = 'Animate';
     static propTypes = {
-        /**
-         * 动画 className
-         */
         animation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-        /**
-         * 子元素第一次挂载时是否执行动画
-         */
         animationAppear: PropTypes.bool,
-        /**
-         * 包裹子元素的标签
-         */
         component: PropTypes.any,
-        /**
-         * 是否只有单个子元素，如果有多个子元素，请设置为 false
-         */
         singleMode: PropTypes.bool,
-        /**
-         * 子元素
-         */
         children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
-        /**
-         * 执行第一次挂载动画前触发的回调函数
-         */
         beforeAppear: PropTypes.func,
-        /**
-         * 执行第一次挂载动画，添加 xxx-appear-active 类名后触发的回调函数
-         */
         onAppear: PropTypes.func,
-        /**
-         * 执行完第一次挂载动画后触发的函数
-         */
         afterAppear: PropTypes.func,
-        /**
-         * 执行进场动画前触发的回调函数
-         */
         beforeEnter: PropTypes.func,
-        /**
-         * 执行进场动画，添加 xxx-enter-active 类名后触发的回调函数
-         */
         onEnter: PropTypes.func,
-        /**
-         * 执行完进场动画后触发的回调函数
-         */
         afterEnter: PropTypes.func,
-        /**
-         * 执行离场动画前触发的回调函数
-         */
         beforeLeave: PropTypes.func,
-        /**
-         * 执行离场动画，添加 xxx-leave-active 类名后触发的回调函数
-         */
         onLeave: PropTypes.func,
-        /**
-         * 执行完离场动画后触发的回调函数
-         */
         afterLeave: PropTypes.func,
     };
 
@@ -161,7 +115,7 @@ class Animate extends Component<AnimateProps> {
                 component={singleMode ? FirstChild : component}
                 {...others}
             >
-                {animateChildren}
+                {animateChildren!}
             </TransitionGroup>
         );
     }

diff --git a/components/animate/index.tsx b/components/animate/index.tsx
@@ -1,5 +1,10 @@
+import { assignSubComponent } from '../util/component';
 import Animate from './animate';
+import Expand from './expand';
+import OverlayAnimate from './overlay-animate';
+
+const AnimateWithSubComponent = assignSubComponent(Animate, { Expand, OverlayAnimate });
 
 export type { AnimateProps, ExpandProps, OverlayAnimateProps } from './types';
 
-export default Animate;
+export default AnimateWithSubComponent;
diff --git a/components/animate/overlay-animate.tsx b/components/animate/overlay-animate.tsx
@@ -49,10 +49,10 @@ const OverlayAnimate = (props: OverlayAnimateProps) => {
     const animationMap =
         typeof animation === 'string' ? { in: animation, out: animation } : animation;
 
-    const animateClsMap: Partial<Record<TransitionStatus, string | undefined>> = animation
+    const animateClsMap: Partial<Record<TransitionStatus, string | undefined>> = animationMap
         ? {
-              entering: (animationMap as Record<'in' | 'out', string>).in,
-              exiting: (animationMap as Record<'in' | 'out', string>).out,
+              entering: animationMap.in,
+              exiting: animationMap.out,
           }
         : {};
 
@@ -65,7 +65,7 @@ const OverlayAnimate = (props: OverlayAnimateProps) => {
         <Transition {...animateProps} in={visible} timeout={animation ? timeout : 0} appear>
             {state => {
                 const cls = classNames({
-                    [children!.props.className]: !!children!.props.className,
+                    [children.props.className]: !!children.props.className,
                     [animateClsMap[state]!]: state in animateClsMap && animateClsMap[state],
                 });
 
@@ -74,11 +74,11 @@ const OverlayAnimate = (props: OverlayAnimateProps) => {
                     className: cls,
                 };
 
-                if (style && children!.props && children!.props.style) {
-                    childProps.style = Object.assign({}, children!.props.style, style);
+                if (style && children.props && children.props.style) {
+                    childProps.style = Object.assign({}, children.props.style, style);
                 }
 
-                return React.cloneElement(children!, childProps);
+                return React.cloneElement(children, childProps);
             }}
         </Transition>
     );