@rc-component/trigger 1.7.3 → 1.9.0

package/es/Popup/PopupContent.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface PopupContentProps {
+    children?: React.ReactNode;
+    cache?: boolean;
+}
+declare const PopupContent: React.MemoExoticComponent<({ children }: PopupContentProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>>;
+export default PopupContent;

package/es/Popup/PopupContent.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+var PopupContent = /*#__PURE__*/React.memo(function (_ref) {
+  var children = _ref.children;
+  return children;
+}, function (_, next) {
+  return next.cache;
+});
+if (process.env.NODE_ENV !== 'production') {
+  PopupContent.displayName = 'PopupContent';
+}
+export default PopupContent;

package/es/Popup/index.js

@@ -9,6 +9,7 @@ import { composeRef } from "rc-util/es/ref";
 import * as React from 'react';
 import Arrow from "./Arrow";
 import Mask from "./Mask";
+import PopupContent from "./PopupContent";
 var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var popup = props.popup,
     className = props.className,
@@ -142,7 +143,9 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
         align: align,
         arrowX: arrowX,
         arrowY: arrowY
-      }), childNode);
+      }), /*#__PURE__*/React.createElement(PopupContent, {
+        cache: !open
+      }, childNode));
     });
   }));
 });

package/es/hooks/useAlign.js

@@ -74,6 +74,17 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
     return collectScroller(popupEle);
   }, [popupEle]);
 
+  // ========================= Flip ==========================
+  // We will memo flip info.
+  // If size change to make flip, it will memo the flip info and use it in next align.
+  var prevFlipRef = React.useRef({});
+  var resetFlipCache = function resetFlipCache() {
+    prevFlipRef.current = {};
+  };
+  if (!open) {
+    resetFlipCache();
+  }
+
   // ========================= Align =========================
   var onAlign = useEvent(function () {
     if (popupEle && target && open) {
@@ -238,7 +249,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
       var sameTB = popupPoints[0] === targetPoints[0];
 
       // Bottom to Top
-      if (needAdjustY && popupPoints[0] === 't' && nextPopupBottom > visibleArea.bottom) {
+      if (needAdjustY && popupPoints[0] === 't' && (nextPopupBottom > visibleArea.bottom || prevFlipRef.current.bt)) {
         var tmpNextOffsetY = nextOffsetY;
         if (sameTB) {
           tmpNextOffsetY -= popupHeight - targetHeight;
@@ -246,13 +257,16 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
           tmpNextOffsetY = targetAlignPointTL.y - popupAlignPointBR.y - popupOffsetY;
         }
         if (getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY) >= originIntersectionVisibleArea) {
+          prevFlipRef.current.bt = true;
           nextOffsetY = tmpNextOffsetY;
           nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
+        } else {
+          prevFlipRef.current.bt = false;
         }
       }
 
       // Top to Bottom
-      if (needAdjustY && popupPoints[0] === 'b' && nextPopupY < visibleArea.top) {
+      if (needAdjustY && popupPoints[0] === 'b' && (nextPopupY < visibleArea.top || prevFlipRef.current.tb)) {
         var _tmpNextOffsetY = nextOffsetY;
         if (sameTB) {
           _tmpNextOffsetY += popupHeight - targetHeight;
@@ -260,8 +274,11 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
           _tmpNextOffsetY = targetAlignPointBR.y - popupAlignPointTL.y - popupOffsetY;
         }
         if (getIntersectionVisibleArea(nextOffsetX, _tmpNextOffsetY) >= originIntersectionVisibleArea) {
+          prevFlipRef.current.tb = true;
           nextOffsetY = _tmpNextOffsetY;
           nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
+        } else {
+          prevFlipRef.current.tb = false;
         }
       }
 
@@ -272,7 +289,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
       var sameLR = popupPoints[1] === targetPoints[1];
 
       // Right to Left
-      if (needAdjustX && popupPoints[1] === 'l' && nextPopupRight > visibleArea.right) {
+      if (needAdjustX && popupPoints[1] === 'l' && (nextPopupRight > visibleArea.right || prevFlipRef.current.rl)) {
         var tmpNextOffsetX = nextOffsetX;
         if (sameLR) {
           tmpNextOffsetX -= popupWidth - targetWidth;
@@ -280,13 +297,16 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
           tmpNextOffsetX = targetAlignPointTL.x - popupAlignPointBR.x - popupOffsetX;
         }
         if (getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY) >= originIntersectionVisibleArea) {
+          prevFlipRef.current.rl = true;
           nextOffsetX = tmpNextOffsetX;
           nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
+        } else {
+          prevFlipRef.current.rl = false;
         }
       }
 
       // Left to Right
-      if (needAdjustX && popupPoints[1] === 'r' && nextPopupX < visibleArea.left) {
+      if (needAdjustX && popupPoints[1] === 'r' && (nextPopupX < visibleArea.left || prevFlipRef.current.lr)) {
         var _tmpNextOffsetX = nextOffsetX;
         if (sameLR) {
           _tmpNextOffsetX += popupWidth - targetWidth;
@@ -294,8 +314,11 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
           _tmpNextOffsetX = targetAlignPointBR.x - popupAlignPointTL.x - popupOffsetX;
         }
         if (getIntersectionVisibleArea(_tmpNextOffsetX, nextOffsetY) >= originIntersectionVisibleArea) {
+          prevFlipRef.current.lr = true;
           nextOffsetX = _tmpNextOffsetX;
           nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
+        } else {
+          prevFlipRef.current.lr = false;
         }
       }
 

package/lib/Popup/PopupContent.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface PopupContentProps {
+    children?: React.ReactNode;
+    cache?: boolean;
+}
+declare const PopupContent: React.MemoExoticComponent<({ children }: PopupContentProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>>;
+export default PopupContent;

package/lib/Popup/PopupContent.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var PopupContent = /*#__PURE__*/React.memo(function (_ref) {
+  var children = _ref.children;
+  return children;
+}, function (_, next) {
+  return next.cache;
+});
+if (process.env.NODE_ENV !== 'production') {
+  PopupContent.displayName = 'PopupContent';
+}
+var _default = PopupContent;
+exports.default = _default;

package/lib/Popup/index.js

@@ -17,6 +17,7 @@ var _ref2 = require("rc-util/lib/ref");
 var React = _interopRequireWildcard(require("react"));
 var _Arrow = _interopRequireDefault(require("./Arrow"));
 var _Mask = _interopRequireDefault(require("./Mask"));
+var _PopupContent = _interopRequireDefault(require("./PopupContent"));
 var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var popup = props.popup,
     className = props.className,
@@ -150,7 +151,9 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
         align: align,
         arrowX: arrowX,
         arrowY: arrowY
-      }), childNode);
+      }), /*#__PURE__*/React.createElement(_PopupContent.default, {
+        cache: !open
+      }, childNode));
     });
   }));
 });

package/lib/hooks/useAlign.js

@@ -82,6 +82,17 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
     return (0, _util.collectScroller)(popupEle);
   }, [popupEle]);
 
+  // ========================= Flip ==========================
+  // We will memo flip info.
+  // If size change to make flip, it will memo the flip info and use it in next align.
+  var prevFlipRef = React.useRef({});
+  var resetFlipCache = function resetFlipCache() {
+    prevFlipRef.current = {};
+  };
+  if (!open) {
+    resetFlipCache();
+  }
+
   // ========================= Align =========================
   var onAlign = (0, _useEvent.default)(function () {
     if (popupEle && target && open) {
@@ -246,7 +257,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       var sameTB = popupPoints[0] === targetPoints[0];
 
       // Bottom to Top
-      if (needAdjustY && popupPoints[0] === 't' && nextPopupBottom > visibleArea.bottom) {
+      if (needAdjustY && popupPoints[0] === 't' && (nextPopupBottom > visibleArea.bottom || prevFlipRef.current.bt)) {
         var tmpNextOffsetY = nextOffsetY;
         if (sameTB) {
           tmpNextOffsetY -= popupHeight - targetHeight;
@@ -254,13 +265,16 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
           tmpNextOffsetY = targetAlignPointTL.y - popupAlignPointBR.y - popupOffsetY;
         }
         if (getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY) >= originIntersectionVisibleArea) {
+          prevFlipRef.current.bt = true;
           nextOffsetY = tmpNextOffsetY;
           nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
+        } else {
+          prevFlipRef.current.bt = false;
         }
       }
 
       // Top to Bottom
-      if (needAdjustY && popupPoints[0] === 'b' && nextPopupY < visibleArea.top) {
+      if (needAdjustY && popupPoints[0] === 'b' && (nextPopupY < visibleArea.top || prevFlipRef.current.tb)) {
         var _tmpNextOffsetY = nextOffsetY;
         if (sameTB) {
           _tmpNextOffsetY += popupHeight - targetHeight;
@@ -268,8 +282,11 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
           _tmpNextOffsetY = targetAlignPointBR.y - popupAlignPointTL.y - popupOffsetY;
         }
         if (getIntersectionVisibleArea(nextOffsetX, _tmpNextOffsetY) >= originIntersectionVisibleArea) {
+          prevFlipRef.current.tb = true;
           nextOffsetY = _tmpNextOffsetY;
           nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
+        } else {
+          prevFlipRef.current.tb = false;
         }
       }
 
@@ -280,7 +297,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       var sameLR = popupPoints[1] === targetPoints[1];
 
       // Right to Left
-      if (needAdjustX && popupPoints[1] === 'l' && nextPopupRight > visibleArea.right) {
+      if (needAdjustX && popupPoints[1] === 'l' && (nextPopupRight > visibleArea.right || prevFlipRef.current.rl)) {
         var tmpNextOffsetX = nextOffsetX;
         if (sameLR) {
           tmpNextOffsetX -= popupWidth - targetWidth;
@@ -288,13 +305,16 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
           tmpNextOffsetX = targetAlignPointTL.x - popupAlignPointBR.x - popupOffsetX;
         }
         if (getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY) >= originIntersectionVisibleArea) {
+          prevFlipRef.current.rl = true;
           nextOffsetX = tmpNextOffsetX;
           nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
+        } else {
+          prevFlipRef.current.rl = false;
         }
       }
 
       // Left to Right
-      if (needAdjustX && popupPoints[1] === 'r' && nextPopupX < visibleArea.left) {
+      if (needAdjustX && popupPoints[1] === 'r' && (nextPopupX < visibleArea.left || prevFlipRef.current.lr)) {
         var _tmpNextOffsetX = nextOffsetX;
         if (sameLR) {
           _tmpNextOffsetX += popupWidth - targetWidth;
@@ -302,8 +322,11 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
           _tmpNextOffsetX = targetAlignPointBR.x - popupAlignPointTL.x - popupOffsetX;
         }
         if (getIntersectionVisibleArea(_tmpNextOffsetX, nextOffsetY) >= originIntersectionVisibleArea) {
+          prevFlipRef.current.lr = true;
           nextOffsetX = _tmpNextOffsetX;
           nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
+        } else {
+          prevFlipRef.current.lr = false;
         }
       }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/trigger",
-  "version": "1.7.3",
+  "version": "1.9.0",
   "description": "base abstract trigger component for react",
   "engines": {
     "node": ">=8.x"