rc-tree - npm Package Compare versions

Comparing version 5.7.5 to 5.7.6

es/MotionTreeNode.js

@@ -6,9 +6,10 @@ import _objectDestructuringEmpty from "@babel/runtime/helpers/esm/objectDestructuringEmpty";
 var _excluded = ["className", "style", "motion", "motionNodes", "motionType", "onMotionStart", "onMotionEnd", "active", "treeNodeRequiredProps"];
-import * as React from 'react';
-import { useEffect } from 'react';
 import classNames from 'classnames';
 import CSSMotion from 'rc-motion';
+import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
+import * as React from 'react';
+import { TreeContext } from './contextTypes';
 import TreeNode from './TreeNode';
+import useUnmount from './useUnmount';
 import { getTreeNodeProps } from './utils/treeUtil';
-import { TreeContext } from './contextTypes';
 var MotionTreeNode = function MotionTreeNode(_ref, ref) {
@@ -31,30 +32,29 @@ var className = _ref.className,
     prefixCls = _React$useContext.prefixCls;
-  var motionedRef = React.useRef(false);
-  var onMotionEnd = function onMotionEnd() {
-    if (!motionedRef.current) {
+  // Calculate target visible here.
+  // And apply in effect to make `leave` motion work.
+  var targetVisible = motionNodes && motionType !== 'hide';
+  useLayoutEffect(function () {
+    if (motionNodes) {
+      onOriginMotionStart();
+      if (targetVisible !== visible) {
+        setVisible(targetVisible);
+      }
+    }
+  }, [motionNodes]);
+  // Should only trigger once
+  var triggerMotionEndRef = React.useRef(false);
+  var triggerMotionEnd = function triggerMotionEnd() {
+    if (motionNodes && !triggerMotionEndRef.current) {
+      triggerMotionEndRef.current = true;
       onOriginMotionEnd();
     }
-    motionedRef.current = true;
   };
-  useEffect(function () {
-    if (motionNodes && motionType === 'hide' && visible) {
-      setVisible(false);
+  // Effect if unmount
+  useUnmount(triggerMotionEnd);
+  // Motion end event
+  var onVisibleChanged = function onVisibleChanged(nextVisible) {
+    if (targetVisible === nextVisible) {
+      triggerMotionEnd();
     }
-  }, [motionNodes]);
-  var reruningEffectFlag = null;
-  useEffect(function () {
-    // Trigger motion only when patched
-    if (motionNodes) {
-      if (reruningEffectFlag === null) {
-        onOriginMotionStart();
-      } else {
-        clearTimeout(reruningEffectFlag);
-      }
-    }
-    return function () {
-      if (motionNodes) {
-        reruningEffectFlag = setTimeout(onMotionEnd, 0);
-      }
-    };
-  }, []);
+  };
   if (motionNodes) {
@@ -66,4 +66,3 @@ return /*#__PURE__*/React.createElement(CSSMotion, _extends({
       motionAppear: motionType === 'show',
-      onAppearEnd: onMotionEnd,
-      onLeaveEnd: onMotionEnd
+      onVisibleChanged: onVisibleChanged
     }), function (_ref2, motionRef) {
@@ -70,0 +69,0 @@ var motionClassName = _ref2.className,

es/TreeNode.d.ts

@@ -33,3 +33,3 @@ import * as React from 'react';
     setSelectHandle: (node: any) => void;
-    getNodeState: () => "close" | "open";
+    getNodeState: () => "open" | "close";
     hasChildren: () => boolean;
@@ -36,0 +36,0 @@ isLeaf: () => boolean;

lib/MotionTreeNode.js

@@ -13,8 +13,10 @@ "use strict";
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var React = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _rcMotion = _interopRequireDefault(require("rc-motion"));
+var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
+var React = _interopRequireWildcard(require("react"));
+var _contextTypes = require("./contextTypes");
 var _TreeNode = _interopRequireDefault(require("./TreeNode"));
+var _useUnmount = _interopRequireDefault(require("./useUnmount"));
 var _treeUtil = require("./utils/treeUtil");
-var _contextTypes = require("./contextTypes");
 var _excluded = ["className", "style", "motion", "motionNodes", "motionType", "onMotionStart", "onMotionEnd", "active", "treeNodeRequiredProps"];
@@ -40,30 +42,29 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
     prefixCls = _React$useContext.prefixCls;
-  var motionedRef = React.useRef(false);
-  var onMotionEnd = function onMotionEnd() {
-    if (!motionedRef.current) {
+  // Calculate target visible here.
+  // And apply in effect to make `leave` motion work.
+  var targetVisible = motionNodes && motionType !== 'hide';
+  (0, _useLayoutEffect.default)(function () {
+    if (motionNodes) {
+      onOriginMotionStart();
+      if (targetVisible !== visible) {
+        setVisible(targetVisible);
+      }
+    }
+  }, [motionNodes]);
+  // Should only trigger once
+  var triggerMotionEndRef = React.useRef(false);
+  var triggerMotionEnd = function triggerMotionEnd() {
+    if (motionNodes && !triggerMotionEndRef.current) {
+      triggerMotionEndRef.current = true;
       onOriginMotionEnd();
     }
-    motionedRef.current = true;
   };
-  (0, React.useEffect)(function () {
-    if (motionNodes && motionType === 'hide' && visible) {
-      setVisible(false);
+  // Effect if unmount
+  (0, _useUnmount.default)(triggerMotionEnd);
+  // Motion end event
+  var onVisibleChanged = function onVisibleChanged(nextVisible) {
+    if (targetVisible === nextVisible) {
+      triggerMotionEnd();
     }
-  }, [motionNodes]);
-  var reruningEffectFlag = null;
-  (0, React.useEffect)(function () {
-    // Trigger motion only when patched
-    if (motionNodes) {
-      if (reruningEffectFlag === null) {
-        onOriginMotionStart();
-      } else {
-        clearTimeout(reruningEffectFlag);
-      }
-    }
-    return function () {
-      if (motionNodes) {
-        reruningEffectFlag = setTimeout(onMotionEnd, 0);
-      }
-    };
-  }, []);
+  };
   if (motionNodes) {
@@ -75,4 +76,3 @@ return /*#__PURE__*/React.createElement(_rcMotion.default, (0, _extends2.default)({
       motionAppear: motionType === 'show',
-      onAppearEnd: onMotionEnd,
-      onLeaveEnd: onMotionEnd
+      onVisibleChanged: onVisibleChanged
     }), function (_ref2, motionRef) {
@@ -79,0 +79,0 @@ var motionClassName = _ref2.className,

lib/TreeNode.d.ts

@@ -33,3 +33,3 @@ import * as React from 'react';
     setSelectHandle: (node: any) => void;
-    getNodeState: () => "close" | "open";
+    getNodeState: () => "open" | "close";
     hasChildren: () => boolean;
@@ -36,0 +36,0 @@ isLeaf: () => boolean;

package.json

 {
   "name": "rc-tree",
-  "version": "5.7.5",
+  "version": "5.7.6",
   "description": "tree ui component for react",
@@ -5,0 +5,0 @@ "engines": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

364565

increased by0.9%

Number of package files

64

increased by6.67%

Lines of code

7710

increased by0.77%

No dependency changes