@douyinfe/semi-ui 2.12.0-beta.0 → 2.12.0-beta.3

package/lib/cjs/tooltip/TooltipStyledTransition.js

@@ -31,12 +31,15 @@ const TooltipTransition = function () {
   const {
     children
   } = props;
-  const motion = (0, _getMotionObjFromProps.default)(props);
+  const motion = (0, _getMotionObjFromProps.default)(props); //  add fillMode forward to fix issue 715, tooltip close will flashing under react 18
+
   return /*#__PURE__*/_react.default.createElement(_semiAnimationReact.StyledTransition, (0, _assign.default)({}, props, {
     enter: enterCls,
     leave: leaveCls,
     duration: '100ms'
-  }, motion), typeof children === 'function' ? _ref => {
+  }, motion, {
+    fillMode: 'forward'
+  }), typeof children === 'function' ? _ref => {
     let {
       animateCls,
       animateEvents,

package/lib/es/tooltip/TooltipStyledTransition.js

@@ -15,12 +15,15 @@ const TooltipTransition = function () {
   const {
     children
   } = props;
-  const motion = getMotionObjFromProps(props);
+  const motion = getMotionObjFromProps(props); //  add fillMode forward to fix issue 715, tooltip close will flashing under react 18
+
   return /*#__PURE__*/React.createElement(StyledTransition, _Object$assign({}, props, {
     enter: enterCls,
     leave: leaveCls,
     duration: '100ms'
-  }, motion), typeof children === 'function' ? _ref => {
+  }, motion, {
+    fillMode: 'forward'
+  }), typeof children === 'function' ? _ref => {
     let {
       animateCls,
       animateEvents,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.12.0-beta.0",
+    "version": "2.12.0-beta.3",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -14,12 +14,12 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.12.0-beta.0",
-        "@douyinfe/semi-animation-react": "2.12.0-beta.0",
-        "@douyinfe/semi-foundation": "2.12.0-beta.0",
-        "@douyinfe/semi-icons": "2.12.0-beta.0",
-        "@douyinfe/semi-illustrations": "2.12.0-beta.0",
-        "@douyinfe/semi-theme-default": "2.12.0-beta.0",
+        "@douyinfe/semi-animation": "2.12.0-beta.3",
+        "@douyinfe/semi-animation-react": "2.12.0-beta.3",
+        "@douyinfe/semi-foundation": "2.12.0-beta.3",
+        "@douyinfe/semi-icons": "2.12.0-beta.3",
+        "@douyinfe/semi-illustrations": "2.12.0-beta.3",
+        "@douyinfe/semi-theme-default": "2.12.0-beta.3",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "4bd8555c299b9e9b5984969d9477ab47b19f4bd1",
+    "gitHead": "7805b163ebe4eb859b6cd31946c58617356aab91",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.12.0-beta.0",
+        "@douyinfe/semi-scss-compile": "2.12.0-beta.3",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/tooltip/TooltipStyledTransition.tsx

@@ -18,8 +18,9 @@ const TooltipTransition: React.FC<TooltipTransitionProps> = (props = {}) => {
     const { children } = props;
     const motion = getMotionObjFromProps(props);
 
+    //  add fillMode forward to fix issue 715, tooltip close will flashing under react 18
     return (
-        <StyledTransition {...props} enter={enterCls} leave={leaveCls} duration={'100ms'} {...motion}>
+        <StyledTransition {...props} enter={enterCls} leave={leaveCls} duration={'100ms'} {...motion} fillMode='forward'>
             {typeof children === 'function' ?
                 ({ animateCls, animateEvents, animateStyle }: any) => children({ animateCls, animateEvents, animateStyle }) :
                 children}

package/tooltip/_story/tooltip.stories.js

@@ -24,6 +24,7 @@ import ArrowPointAtCenter from './ArrowPointAtCenter';
 import CustomContainer from './CustomContainer';
 import ContainerPosition from './ContainerPosition';
 import { IconList, IconSidebar, IconEdit } from '@douyinfe/semi-icons';
+import TooltipTransition from '../TooltipStyledTransition';
 
 export default {
   title: 'Tooltip',
@@ -1007,3 +1008,92 @@ export const autoFocusContentDemo = () => {
     </div>
   );
 };
+
+
+export const FlashWithReact18 = () => {
+  const [visible, setV] = useState(false);
+
+  const change = () => {
+    setV(false);
+  }
+
+  return (<>
+    <Tooltip content='test work with react 18' position='bottom' trigger='custom' visible={visible}>
+      <Button style={{ marginLeft: 10 }} onClick={() => setV(true)}>show, semi with react 18 motion=true, abnormal</Button>
+    </Tooltip>
+    <Button style={{ marginLeft: 10 }} onClick={() => change()}>hide</Button>
+
+  </>);
+}
+
+
+
+
+export const Transition = () => {
+
+  const [transitionState, setT] = useState('');
+
+  const [insert, setInsert] = useState(false);
+
+  const handleLeave = () => {
+    console.log('set insert false')
+    setInsert(false);
+  }
+
+  const CommonDOM = () => {
+    const enterCls = `semi-tooltip-bounceIn`;
+    const leaveCls = `semi-tooltip-zoomOut`;
+    const animateStyle = {
+      animationDirection: 'normal',
+      animationName: transitionState === 'enter' ? enterCls : leaveCls,
+      animationDuration: '1000ms',
+    }
+
+    const handleEnd = () => {
+      if (transitionState === 'enter') {
+        console.log('animation end of show');
+      } else if (transitionState === 'leave') {
+        console.log('animation end of hide');
+        handleLeave();
+      }
+    }
+     
+    return <div style={{ ...animateStyle }} onAnimationEnd={handleEnd}>test</div>
+  };
+
+  const toggleShow = (insert) => {
+    if (!transitionState) {
+      setT('enter');
+      setInsert(insert);
+    } else if (transitionState === 'enter') {
+      setT('leave');
+    } else if (transitionState === 'leave') {
+      setT('enter');
+      setInsert(insert);
+    }
+  };
+
+  return (
+    <>
+      <div style={{ width: 200, height: 90, border: '1px solid var(--semi-color-text-1)' }}>
+        {
+          insert ? (
+            <CommonDOM></CommonDOM>
+            ): null
+        }
+      </div>
+      <Button onClick={() => toggleShow(true)}>show</Button>
+      <Button onClick={() => toggleShow(false)}>hide</Button>
+    </>
+  )
+}
+
+export const TransitionDemo = () => {
+  const [key, setKey] = useState(1);
+  return (
+    <>
+    <Transition key={key} />
+    <Button onClick={() => setKey(Math.random())}>reset Demo</Button>
+  </>
+  )
+}