feat: add fresh (#424)

* docs: update demo

* docs: move out

* test: add test case

Author: zombieJ

docs/examples/click-nested.tsx

@@ -37,44 +37,58 @@ const popupBorderStyle = {
   background: 'rgba(255, 0, 0, 0.1)',
 };
 
-class Test extends React.Component {
-  render() {
-    return (
-      <div style={{ margin: 200 }}>
-        <div>
-          <Trigger
-            popupPlacement="right"
-            action={['click']}
-            builtinPlacements={builtinPlacements}
-            popup={
-              // Level 2
-              <Trigger
-                popupPlacement="right"
-                action={['click']}
-                builtinPlacements={builtinPlacements}
-                popup={<div style={popupBorderStyle}>i am a click popup</div>}
-              >
-                <div style={popupBorderStyle}>
-                  i am a click popup{' '}
-                  <button
-                    type="button"
-                    onMouseDown={(e) => {
-                      e.stopPropagation();
-                      e.preventDefault();
-                    }}
-                  >
-                    I am preventPop
-                  </button>
-                </div>
-              </Trigger>
-            }
-          >
-            <span>Click Me</span>
-          </Trigger>
-        </div>
+const NestPopup = ({ open, setOpen }) => {
+  return (
+    <Trigger
+      popupPlacement="right"
+      action={['click']}
+      builtinPlacements={builtinPlacements}
+      popup={<div style={popupBorderStyle}>i am a click popup</div>}
+      popupVisible={open}
+      onPopupVisibleChange={setOpen}
+    >
+      <div style={popupBorderStyle}>
+        i am a click popup{' '}
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            e.preventDefault();
+          }}
+        >
+          I am preventPop
+        </button>
       </div>
-    );
-  }
-}
+    </Trigger>
+  );
+};
+
+NestPopup.displayName = '🐞 NestPopup';
+
+const Test = () => {
+  const [open1, setOpen1] = React.useState(false);
+  const [open2, setOpen2] = React.useState(false);
+
+  return (
+    <div style={{ margin: 200 }}>
+      <div>
+        <Trigger
+          popupPlacement="right"
+          action={['click']}
+          builtinPlacements={builtinPlacements}
+          popupVisible={open1}
+          onPopupVisibleChange={setOpen1}
+          popup={
+            // Level 2
+            <NestPopup open={open2} setOpen={setOpen2} />
+          }
+          fresh
+        >
+          <span>Click Me</span>
+        </Trigger>
+      </div>
+    </div>
+  );
+};
 
 export default Test;

src/Popup/index.tsx

@@ -34,6 +34,7 @@ export interface PopupProps {
   open: boolean;
   /** Tell Portal that should keep in screen. e.g. should wait all motion end */
   keepDom: boolean;
+  fresh?: boolean;
 
   // Click
   onClick?: React.MouseEventHandler<HTMLDivElement>;
@@ -76,6 +77,7 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
     // Open
     open,
     keepDom,
+    fresh,
 
     // Click
     onClick,
@@ -262,7 +264,9 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
                         align={align}
                       />
                     )}
-                    <PopupContent cache={!open}>{childNode}</PopupContent>
+                    <PopupContent cache={!open && !fresh}>
+                      {childNode}
+                    </PopupContent>
                   </div>
                 );
               }}

src/index.tsx

@@ -112,6 +112,13 @@ export interface TriggerProps {
 
   alignPoint?: boolean; // Maybe we can support user pass position in the future
 
+  /**
+   * Trigger will memo content when close.
+   * This may affect the case if want to keep content update.
+   * Set `fresh` to `false` will always keep update.
+   */
+  fresh?: boolean;
+
   // ==================== Arrow ====================
   arrow?: boolean | ArrowTypeOuter;
 
@@ -179,6 +186,7 @@ export function generateTrigger(
       zIndex,
       stretch,
       getPopupClassNameFromAlign,
+      fresh,
 
       alignPoint,
 
@@ -687,6 +695,7 @@ export function generateTrigger(
             // Open
             open={mergedOpen}
             keepDom={inMotion}
+            fresh={fresh}
             // Click
             onClick={onPopupClick}
             // Mask

tests/basic.test.jsx

@@ -1165,4 +1165,30 @@ describe('Trigger.Basic', () => {
     trigger(container, '.popup', 'mouseEnter');
     expect(onPopupVisibleChange).not.toHaveBeenCalled();
   });
+
+  // https://gith(ub.com/ant-design/ant-design/issues/44830
+  it('fresh should work', () => {
+    const Demo = () => {
+      const [open, setOpen] = React.useState(true);
+
+      return (
+        <Trigger
+          popupVisible={open}
+          onPopupVisibleChange={setOpen}
+          popup={<strong className="x-content">{String(open)}</strong>}
+          action={['click']}
+          popupAlign={placementAlignMap.left}
+          fresh
+        >
+          <div className="target">click</div>
+        </Trigger>
+      );
+    };
+
+    const { container } = render(<Demo />);
+    expect(document.querySelector('.x-content').textContent).toBe('true');
+
+    trigger(container, '.target');
+    expect(document.querySelector('.x-content').textContent).toBe('false');
+  });
 });