@canlooks/can-ui 0.0.169 → 0.0.170

package/dist/cjs/components/transitionBase/transitionBase.js

@@ -25,10 +25,10 @@ exports.TransitionBase = (({ ref, component: Component = 'div', orientation = 'v
         }
     }
     const innerRef = (0, react_1.useRef)(null);
-    const initialized = (0, react_1.useRef)(false);
-    (0, react_1.useEffect)(() => {
-        initialized.current = true;
+    const firstOpenChanged = (0, react_1.useRef)(false);
+    (0, utils_1.useUpdateEffect)(() => {
+        firstOpenChanged.current = true;
     }, [props.in]);
-    const unInitClass = !initialized.current && !props.in && 'exit-done';
+    const unInitClass = !firstOpenChanged.current && !props.in && 'exit-done';
     return ((0, jsx_runtime_1.jsx)(react_transition_group_1.CSSTransition, { ...props, css: cssArr, nodeRef: innerRef, className: (0, utils_1.clsx)(transitionBase_style_1.classes.root, props.className, unInitClass), timeout: timeout, appear: appear, children: (0, jsx_runtime_1.jsx)(Component, { ref: (0, utils_1.cloneRef)(ref, innerRef), children: props.children }) }));
 });

package/dist/esm/components/transitionBase/transitionBase.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { useEffect, useRef } from 'react';
+import { useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { classes, fadeStyle, useGrowAndCollapseStyle, useSlideStyle, useSweepingStyle, useTransitionBaseStyle } from './transitionBase.style.js';
-import { clsx, cloneRef } from '../../utils/index.js';
+import { clsx, cloneRef, useUpdateEffect } from '../../utils/index.js';
 export const TransitionBase = (({ ref, component: Component = 'div', orientation = 'vertical', direction = 'down', offset = '100%', timeout = 300, appear = true, _mode, ...props }) => {
     const cssArr = [
         useTransitionBaseStyle({ timeout })
@@ -22,10 +22,10 @@ export const TransitionBase = (({ ref, component: Component = 'div', orientation
         }
     }
     const innerRef = useRef(null);
-    const initialized = useRef(false);
-    useEffect(() => {
-        initialized.current = true;
+    const firstOpenChanged = useRef(false);
+    useUpdateEffect(() => {
+        firstOpenChanged.current = true;
     }, [props.in]);
-    const unInitClass = !initialized.current && !props.in && 'exit-done';
+    const unInitClass = !firstOpenChanged.current && !props.in && 'exit-done';
     return (_jsx(CSSTransition, { ...props, css: cssArr, nodeRef: innerRef, className: clsx(classes.root, props.className, unInitClass), timeout: timeout, appear: appear, children: _jsx(Component, { ref: cloneRef(ref, innerRef), children: props.children }) }));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.169",
+  "version": "0.0.170",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",