3.1.x dnd to external tree

package.json

@@ -36,7 +36,7 @@
     "start": "father doc dev --storybook",
     "build": "father doc build --storybook",
     "compile": "father build && lessc assets/index.less assets/index.css",
-    "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish",
+    "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish --any-branch",
     "postpublish": "npm run gh-pages",
     "lint": "eslint src/ examples/ --ext .tsx,.ts,.jsx,.js",
     "test": "father test",

src/MotionTreeNode.tsx

@@ -17,17 +17,14 @@ interface MotionTreeNodeProps extends Omit<TreeNodeProps, 'domRef'> {
   treeNodeRequiredProps: TreeNodeRequiredProps;
 }
 
-const MotionTreeNode: React.ForwardRefRenderFunction<
-  CSSMotion,
-  MotionTreeNodeProps
-> = (
+const MotionTreeNode: React.ForwardRefRenderFunction<typeof CSSMotion, MotionTreeNodeProps> = (
   {
     className,
     style,
     motion,
     motionNodes,
     motionType,
-    onMotionEnd,
+    onMotionEnd: onOriginMotionEnd,
     active,
     treeNodeRequiredProps,
     ...props
@@ -37,12 +34,30 @@ const MotionTreeNode: React.ForwardRefRenderFunction<
   const [visible, setVisible] = React.useState(true);
   const { prefixCls } = React.useContext(TreeContext);
 
+  const motionedRef = React.useRef(false);
+
+  const onMotionEnd = () => {
+    if (!motionedRef.current) {
+      onOriginMotionEnd();
+    }
+    motionedRef.current = true;
+  };
+
   React.useEffect(() => {
     if (motionNodes && motionType === 'hide' && visible) {
       setVisible(false);
     }
   }, [motionNodes]);
 
+  React.useEffect(
+    () => () => {
+      if (motionNodes) {
+        onMotionEnd();
+      }
+    },
+    [],
+  );
+
   if (motionNodes) {
     return (
       <CSSMotion
@@ -56,10 +71,7 @@ const MotionTreeNode: React.ForwardRefRenderFunction<
         {({ className: motionClassName, style: motionStyle }, motionRef) => (
           <div
             ref={motionRef}
-            className={classNames(
-              `${prefixCls}-treenode-motion`,
-              motionClassName,
-            )}
+            className={classNames(`${prefixCls}-treenode-motion`, motionClassName)}
             style={motionStyle}
           >
             {motionNodes.map((treeNode: FlattenNode) => {
@@ -70,10 +82,7 @@ const MotionTreeNode: React.ForwardRefRenderFunction<
               } = treeNode;
               delete restProps.children;
 
-              const treeNodeProps = getTreeNodeProps(
-                key,
-                treeNodeRequiredProps,
-              );
+              const treeNodeProps = getTreeNodeProps(key, treeNodeRequiredProps);
 
               return (
                 <TreeNode
@@ -92,15 +101,7 @@ const MotionTreeNode: React.ForwardRefRenderFunction<
       </CSSMotion>
     );
   }
-  return (
-    <TreeNode
-      domRef={ref}
-      className={className}
-      style={style}
-      {...props}
-      active={active}
-    />
-  );
+  return <TreeNode domRef={ref} className={className} style={style} {...props} active={active} />;
 };
 
 MotionTreeNode.displayName = 'MotionTreeNode';

tests/TreeMotion.spec.js

@@ -3,6 +3,8 @@ import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 import VirtualList from 'rc-virtual-list';
 import Tree, { TreeNode } from '../src';
+import MotionTreeNode from '../src/MotionTreeNode';
+import { TreeContext } from '../src/contextTypes';
 import { getMinimumRangeTransitionRange } from '../src/NodeList';
 
 describe('Tree Motion', () => {
@@ -128,4 +130,18 @@ describe('Tree Motion', () => {
     raf.mockRestore();
     jest.useRealTimers();
   });
+
+  it('MotionTreeNode should always trigger motion end', () => {
+    const onMotionEnd = jest.fn();
+    const wrapper = mount(
+      <TreeContext.Provider value={{ prefixCls: 'test' }}>
+        <MotionTreeNode motionNodes={[]} onMotionEnd={onMotionEnd} />
+      </TreeContext.Provider>,
+    );
+
+    expect(onMotionEnd).not.toHaveBeenCalled();
+
+    wrapper.unmount();
+    expect(onMotionEnd).toHaveBeenCalled();
+  });
 });