chore: cache content when closing (#367)

Author: zombieJ

src/Popup/PopupContent.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+export interface PopupContentProps {
+  children?: React.ReactNode;
+  cache?: boolean;
+}
+
+const PopupContent = React.memo(
+  ({ children }: PopupContentProps) => children as React.ReactElement,
+  (_, next) => next.cache,
+);
+
+if (process.env.NODE_ENV !== 'production') {
+  PopupContent.displayName = 'PopupContent';
+}
+
+export default PopupContent;

src/Popup/index.tsx

@@ -9,6 +9,7 @@ import type { TriggerProps } from '../';
 import type { AlignType } from '../interface';
 import Arrow from './Arrow';
 import Mask from './Mask';
+import PopupContent from './PopupContent';
 
 export interface PopupProps {
   prefixCls: string;
@@ -229,7 +230,7 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
                         arrowY={arrowY}
                       />
                     )}
-                    {childNode}
+                    <PopupContent cache={!open}>{childNode}</PopupContent>
                   </div>
                 );
               }}

tests/motion.test.jsx

@@ -100,4 +100,44 @@ describe('Trigger.Motion', () => {
       pointerEvents: 'none',
     });
   });
+
+  it('no update when close', () => {
+    const genTrigger = ({ children, ...props }) => (
+      <Trigger
+        popup={children}
+        popupMotion={{
+          motionName: 'bamboo',
+        }}
+        popupVisible
+        {...props}
+      >
+        <span />
+      </Trigger>
+    );
+
+    const { rerender } = render(
+      genTrigger({
+        children: <div className="bamboo" />,
+      }),
+    );
+
+    expect(document.querySelector('.bamboo')).toBeTruthy();
+
+    // rerender when open
+    rerender(
+      genTrigger({
+        children: <div className="little" />,
+      }),
+    );
+    expect(document.querySelector('.little')).toBeTruthy();
+
+    // rerender when close
+    rerender(
+      genTrigger({
+        popupVisible: false,
+        children: <div className="light" />,
+      }),
+    );
+    expect(document.querySelector('.little')).toBeTruthy();
+  });
 });