chore: backup

packages/semi-foundation/tooltip/tooltip.scss

@@ -48,6 +48,8 @@ $module-icon: #{$module}-icon-arrow;
     }
 }
 
+
+
 .#{$module} {
     &-wrapper {
         position: relative;
@@ -85,7 +87,16 @@ $module-icon: #{$module}-icon-arrow;
         justify-content: center;
         box-sizing: border-box;
     }
+
+    &-animation-show{
+        animation: #{$module}-zoomIn 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+    &-animation-hide{
+        animation: #{$module}-zoomOut 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+
+
 }
 
 @import './arrow.scss';
-@import './rtl.scss';
+@import './rtl.scss';

packages/semi-ui/tooltip/CSSAnimation.tsx

@@ -1,21 +1,23 @@
 import React, { CSSProperties, ReactNode } from 'react';
-import { isEqual } from "lodash";
+import { isEqual, noop } from "lodash";
 
 
 interface AnimationEventsNeedBind {
-    onAnimationStart: (e: AnimationEvent) => void
-    onAnimationEnd: (e: AnimationEvent) => void
+    onAnimationStart: (e: React.AnimationEvent) => void
+    onAnimationEnd: (e: React.AnimationEvent) => void
 }
 
 interface AnimationProps {
-    startClassName: string;
-    endClassName: string;
+    startClassName?: string;
+    endClassName?: string;
     children: ({}: {
-        className: string,
-        style: CSSProperties,
+        animationClassName: string,
+        animationStyle: CSSProperties,
         animationEventsNeedBind: AnimationEventsNeedBind
     }) => ReactNode
     animationState: "enter" | "leave"
+    onAnimationEnd?:()=>void;
+    onAnimationStart?:()=>void;
 }
 
 interface AnimationState {
@@ -24,38 +26,43 @@ interface AnimationState {
 }
 
 
-class Animation extends React.Component<AnimationProps, AnimationState> {
+class CSSAnimation extends React.Component<AnimationProps, AnimationState> {
     constructor(props) {
         super(props);
         this.state = {
-            currentClassName: "",
+            currentClassName: this.props.startClassName,
             extraStyle: {}
         };
+        console.log("===>", this.props);
     }
 
     componentDidUpdate(prevProps: Readonly<AnimationProps>, prevState: Readonly<AnimationState>, snapshot?: any) {
-        const changedKeys = Object.keys(this.props).filter(key => isEqual(this.props[key], prevProps[key]));
-        if ("state" in changedKeys) {
-            if (this.props.animationState === "enter") {
-                this.setState({
-                    currentClassName: this.props.startClassName,
-                    extraStyle: {}
-                });
-            } else {
-                this.setState({
-                    currentClassName: this.props.endClassName,
-                    extraStyle: {}
-                });
-            }
+        const changedKeys = Object.keys(this.props).filter(key => !isEqual(this.props[key], prevProps[key]));
+        console.log('changedKeys', changedKeys, prevProps, this.props);
+        if (changedKeys.includes("animationState")) {
+            // if (this.props.animationState === "enter") {
+            //     this.setState({
+            //         currentClassName: this.props.startClassName,
+            //         extraStyle: {}
+            //     }, this.props.onAnimationStart ?? noop);
+            // } else {
+            //     this.setState({
+            //         currentClassName: this.props.endClassName,
+            //         extraStyle: {}
+            //     }, this.props.onAnimationEnd ?? noop);
+            // }
+        }
+        if (changedKeys.includes("startClassName")){
+            this.setState({
+                currentClassName: this.props.startClassName,
+                extraStyle: {}
+            }, this.props.onAnimationStart ?? noop);
         }
 
     }
 
     handleAnimationStart = () => {
-        this.setState({
-            currentClassName: this.props.startClassName,
-            extraStyle: {}
-        });
+        this.props.onAnimationStart();
     }
 
 
@@ -63,14 +70,17 @@ class Animation extends React.Component<AnimationProps, AnimationState> {
         this.setState({
             currentClassName: this.props.endClassName,
             extraStyle: {}
+        }, ()=>{
+            this.props.onAnimationEnd();
         });
     }
 
 
     render() {
+        console.log("mount", this.state.currentClassName);
         return this.props.children({
-            className: this.state.currentClassName,
-            style: this.state.extraStyle,
+            animationClassName: this.state.currentClassName ?? "",
+            animationStyle: this.state.extraStyle,
             animationEventsNeedBind: {
                 onAnimationStart: this.handleAnimationStart,
                 onAnimationEnd: this.handleAnimationEnd
@@ -80,4 +90,4 @@ class Animation extends React.Component<AnimationProps, AnimationState> {
 
 }
 
-export default Animation;
+export default CSSAnimation;

packages/semi-ui/tooltip/index.tsx

@@ -25,6 +25,7 @@ import TriangleArrowVertical from './TriangleArrowVertical';
 import TooltipTransition from './TooltipStyledTransition';
 import ArrowBoundingShape from './ArrowBoundingShape';
 import { Motion } from '../_base/base';
+import CSSAnimation from "@douyinfe/semi-ui/tooltip/CSSAnimation";
 
 export { TooltipTransitionProps } from './TooltipStyledTransition';
 export type Trigger = ArrayElement<typeof strings.TRIGGER_SET>;
@@ -75,7 +76,7 @@ export interface TooltipProps extends BaseProps {
     guardFocus?: boolean;
     returnFocusOnClose?: boolean;
     onEscKeyDown?: (e: React.KeyboardEvent) => void;
-    disableArrowKeyDown?: boolean; 
+    disableArrowKeyDown?: boolean;
     wrapperId?: string;
     preventScroll?: boolean;
     disableFocusListener?: boolean;
@@ -432,7 +433,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
                 const focusRefNode = get(this, 'initialFocusRef.current');
                 if (focusRefNode && 'focus' in focusRefNode) {
                     focusRefNode.focus({ preventScroll });
-                } 
+                }
             },
             notifyEscKeydown: (event: React.KeyboardEvent) => {
                 this.props.onEscKeyDown(event);
@@ -572,31 +573,62 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         const portalInnerStyle = omit(containerStyle, motion ? ['transformOrigin'] : undefined);
         const transformOrigin = get(containerStyle, 'transformOrigin');
         const inner = motion && isPositionUpdated ? (
-            <TooltipTransition position={placement} didLeave={this.didLeave} motion={motion}>
+            <CSSAnimation animationState={transitionState as "enter"|"leave"}
+                startClassName={transitionState==='enter'?`${prefixCls}-animation-show`:`${prefixCls}-animation-hide`}
+                onAnimationStart={()=>{console.log('onAnimationStart');}}
+                onAnimationEnd={()=>{
+                    if (transitionState === 'leave'){
+                        this.didLeave();
+                    }
+                }}>
                 {
-                    transitionState === 'enter' ?
-                        ({ animateCls, animateStyle, animateEvents }) => (
-                            <div
-                                className={classNames(className, animateCls)}
-                                style={{
-                                    visibility: 'visible',
-                                    ...animateStyle,
-                                    transformOrigin,
-                                    ...style,
-                                }}
-                                {...portalEventSet}
-                                {...animateEvents}
-                                role={role}
-                                x-placement={placement}
-                                id={id}
-                            >
-                                {contentNode}
-                                {icon}
-                            </div>
-                        ) :
-                        null
+                    ({ animationStyle, animationClassName, animationEventsNeedBind })=>{
+                        return <div
+
+                            className={classNames(className, animationClassName)}
+                            style={{
+                                visibility: 'visible',
+                                ...animationStyle,
+                                transformOrigin,
+                                ...style,
+                            }}
+                            {...portalEventSet}
+                            {...animationEventsNeedBind}
+                            role={role}
+                            x-placement={placement}
+                            id={id}
+                        >
+                            {contentNode}
+                            {icon}
+                        </div>;
+                    }
                 }
-            </TooltipTransition>
+            </CSSAnimation>
+            // <TooltipTransition position={placement} didLeave={this.didLeave} motion={motion}>
+            //     {
+            //         transitionState === 'enter' ?
+            //             ({ animateCls, animateStyle, animateEvents }) => (
+            //                 <div
+            //                     className={classNames(className, animateCls)}
+            //                     style={{
+            //                         visibility: 'visible',
+            //                         ...animateStyle,
+            //                         transformOrigin,
+            //                         ...style,
+            //                     }}
+            //                     {...portalEventSet}
+            //                     {...animateEvents}
+            //                     role={role}
+            //                     x-placement={placement}
+            //                     id={id}
+            //                 >
+            //                     {contentNode}
+            //                     {icon}
+            //                 </div>
+            //             ) :
+            //             null
+            //     }
+            // </TooltipTransition>
         ) : (
             <div className={className} {...portalEventSet} x-placement={placement} style={{ visibility: motion ? 'hidden' : 'visible', ...style }}>
                 {contentNode}
@@ -720,7 +752,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
                     ref.current = node;
                 }
             },
-            tabIndex: (children as React.ReactElement).props.tabIndex || 0, // a11y keyboard, in some condition select's tabindex need to -1 or 0 
+            tabIndex: (children as React.ReactElement).props.tabIndex || 0, // a11y keyboard, in some condition select's tabindex need to -1 or 0
             'data-popupid': id
         });
 
@@ -735,4 +767,4 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
     }
 }
 
-export { Position };
+export { Position };