@rc-component/trigger 3.7.0 → 3.7.2

package/es/hooks/useAlign.js

@@ -54,12 +54,12 @@ function reversePoints(points, index) {
     l: 'r',
     r: 'l'
   };
-  return points.map((point, i) => {
-    if (i === index) {
-      return reverseMap[point] || 'c';
-    }
-    return point;
-  }).join('');
+  const clone = [...points];
+  clone[index] = reverseMap[points[index]] || 'c';
+  return clone;
+}
+function flatPoints(points) {
+  return points.join('');
 }
 export default function useAlign(open, popupEle, target, placement, builtinPlacements, popupAlign, onPopupAlign, mobile) {
   const [offsetInfo, setOffsetInfo] = React.useState({
@@ -245,6 +245,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
       const nextAlignInfo = {
         ...placementInfo
       };
+      let nextPoints = [popupPoints, targetPoints];
 
       // Next Offset
       let nextOffsetX = targetAlignPoint.x - popupAlignPoint.x + popupOffsetX;
@@ -322,7 +323,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
           prevFlipRef.current.bt = true;
           nextOffsetY = tmpNextOffsetY;
           popupOffsetY = -popupOffsetY;
-          nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
+          nextPoints = [reversePoints(nextPoints[0], 0), reversePoints(nextPoints[1], 0)];
         } else {
           prevFlipRef.current.bt = false;
         }
@@ -346,7 +347,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
           prevFlipRef.current.tb = true;
           nextOffsetY = tmpNextOffsetY;
           popupOffsetY = -popupOffsetY;
-          nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
+          nextPoints = [reversePoints(nextPoints[0], 0), reversePoints(nextPoints[1], 0)];
         } else {
           prevFlipRef.current.tb = false;
         }
@@ -376,7 +377,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
           prevFlipRef.current.rl = true;
           nextOffsetX = tmpNextOffsetX;
           popupOffsetX = -popupOffsetX;
-          nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
+          nextPoints = [reversePoints(nextPoints[0], 1), reversePoints(nextPoints[1], 1)];
         } else {
           prevFlipRef.current.rl = false;
         }
@@ -400,11 +401,12 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
           prevFlipRef.current.lr = true;
           nextOffsetX = tmpNextOffsetX;
           popupOffsetX = -popupOffsetX;
-          nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
+          nextPoints = [reversePoints(nextPoints[0], 1), reversePoints(nextPoints[1], 1)];
         } else {
           prevFlipRef.current.lr = false;
         }
       }
+      nextAlignInfo.points = [flatPoints(nextPoints[0]), flatPoints(nextPoints[1])];
 
       // ============================ Shift ============================
       syncNextPopupPosition();

package/es/index.js

@@ -16,6 +16,7 @@ import useWatch from "./hooks/useWatch";
 import useWinClick from "./hooks/useWinClick";
 import { getAlignPopupClassName } from "./util";
 import UniqueProvider from "./UniqueProvider";
+import { useControlledState } from '@rc-component/util';
 export { UniqueProvider };
 
 // Removed Props List
@@ -138,10 +139,8 @@ export function generateTrigger(PortalComponent = Portal) {
     } : null;
 
     // ============================ Open ============================
-    const [internalOpen, setInternalOpen] = React.useState(defaultPopupVisible || false);
-
-    // Render still use props as first priority
-    const mergedOpen = popupVisible ?? internalOpen;
+    const [internalOpen, setInternalOpen] = useControlledState(defaultPopupVisible || false, popupVisible);
+    const mergedOpen = internalOpen || false;
 
     // ========================== Children ==========================
     const child = React.useMemo(() => {
@@ -152,18 +151,8 @@ export function generateTrigger(PortalComponent = Portal) {
     }, [children, mergedOpen]);
     const originChildProps = child?.props || {};
 
-    // We use effect sync here in case `popupVisible` back to `undefined`
-    const setMergedOpen = useEvent(nextOpen => {
-      if (openUncontrolled) {
-        setInternalOpen(nextOpen);
-      }
-    });
-
     // Support ref
     const isOpen = useEvent(() => mergedOpen);
-    useLayoutEffect(() => {
-      setInternalOpen(popupVisible || false);
-    }, [popupVisible]);
 
     // Extract common options for UniqueProvider
     const getUniqueOptions = useEvent((delay = 0) => ({
@@ -206,7 +195,7 @@ export function generateTrigger(PortalComponent = Portal) {
     const lastTriggerRef = React.useRef([]);
     lastTriggerRef.current = [];
     const internalTriggerOpen = useEvent(nextOpen => {
-      setMergedOpen(nextOpen);
+      setInternalOpen(nextOpen);
 
       // Enter or Pointer will both trigger open state change
       // We only need take one to avoid duplicated change event trigger

package/es/util.js

@@ -1,8 +1,9 @@
 function isPointsEq(a1 = [], a2 = [], isAlignPoint) {
+  const getVal = (a, index) => a[index] || '';
   if (isAlignPoint) {
-    return a1[0] === a2[0];
+    return getVal(a1, 0) === getVal(a2, 0);
   }
-  return a1[0] === a2[0] && a1[1] === a2[1];
+  return getVal(a1, 0) === getVal(a2, 0) && getVal(a1, 1) === getVal(a2, 1);
 }
 export function getAlignPopupClassName(builtinPlacements, prefixCls, align, isAlignPoint) {
   const {

package/lib/hooks/useAlign.js

@@ -63,12 +63,12 @@ function reversePoints(points, index) {
     l: 'r',
     r: 'l'
   };
-  return points.map((point, i) => {
-    if (i === index) {
-      return reverseMap[point] || 'c';
-    }
-    return point;
-  }).join('');
+  const clone = [...points];
+  clone[index] = reverseMap[points[index]] || 'c';
+  return clone;
+}
+function flatPoints(points) {
+  return points.join('');
 }
 function useAlign(open, popupEle, target, placement, builtinPlacements, popupAlign, onPopupAlign, mobile) {
   const [offsetInfo, setOffsetInfo] = React.useState({
@@ -254,6 +254,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       const nextAlignInfo = {
         ...placementInfo
       };
+      let nextPoints = [popupPoints, targetPoints];
 
       // Next Offset
       let nextOffsetX = targetAlignPoint.x - popupAlignPoint.x + popupOffsetX;
@@ -331,7 +332,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
           prevFlipRef.current.bt = true;
           nextOffsetY = tmpNextOffsetY;
           popupOffsetY = -popupOffsetY;
-          nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
+          nextPoints = [reversePoints(nextPoints[0], 0), reversePoints(nextPoints[1], 0)];
         } else {
           prevFlipRef.current.bt = false;
         }
@@ -355,7 +356,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
           prevFlipRef.current.tb = true;
           nextOffsetY = tmpNextOffsetY;
           popupOffsetY = -popupOffsetY;
-          nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
+          nextPoints = [reversePoints(nextPoints[0], 0), reversePoints(nextPoints[1], 0)];
         } else {
           prevFlipRef.current.tb = false;
         }
@@ -385,7 +386,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
           prevFlipRef.current.rl = true;
           nextOffsetX = tmpNextOffsetX;
           popupOffsetX = -popupOffsetX;
-          nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
+          nextPoints = [reversePoints(nextPoints[0], 1), reversePoints(nextPoints[1], 1)];
         } else {
           prevFlipRef.current.rl = false;
         }
@@ -409,11 +410,12 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
           prevFlipRef.current.lr = true;
           nextOffsetX = tmpNextOffsetX;
           popupOffsetX = -popupOffsetX;
-          nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
+          nextPoints = [reversePoints(nextPoints[0], 1), reversePoints(nextPoints[1], 1)];
         } else {
           prevFlipRef.current.lr = false;
         }
       }
+      nextAlignInfo.points = [flatPoints(nextPoints[0]), flatPoints(nextPoints[1])];
 
       // ============================ Shift ============================
       syncNextPopupPosition();

package/lib/index.js

@@ -29,6 +29,7 @@ var _useWatch = _interopRequireDefault(require("./hooks/useWatch"));
 var _useWinClick = _interopRequireDefault(require("./hooks/useWinClick"));
 var _util = require("./util");
 var _UniqueProvider = _interopRequireDefault(require("./UniqueProvider"));
+var _util2 = require("@rc-component/util");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -152,10 +153,8 @@ function generateTrigger(PortalComponent = _portal.default) {
     } : null;
 
     // ============================ Open ============================
-    const [internalOpen, setInternalOpen] = React.useState(defaultPopupVisible || false);
-
-    // Render still use props as first priority
-    const mergedOpen = popupVisible ?? internalOpen;
+    const [internalOpen, setInternalOpen] = (0, _util2.useControlledState)(defaultPopupVisible || false, popupVisible);
+    const mergedOpen = internalOpen || false;
 
     // ========================== Children ==========================
     const child = React.useMemo(() => {
@@ -166,18 +165,8 @@ function generateTrigger(PortalComponent = _portal.default) {
     }, [children, mergedOpen]);
     const originChildProps = child?.props || {};
 
-    // We use effect sync here in case `popupVisible` back to `undefined`
-    const setMergedOpen = (0, _useEvent.default)(nextOpen => {
-      if (openUncontrolled) {
-        setInternalOpen(nextOpen);
-      }
-    });
-
     // Support ref
     const isOpen = (0, _useEvent.default)(() => mergedOpen);
-    (0, _useLayoutEffect.default)(() => {
-      setInternalOpen(popupVisible || false);
-    }, [popupVisible]);
 
     // Extract common options for UniqueProvider
     const getUniqueOptions = (0, _useEvent.default)((delay = 0) => ({
@@ -220,7 +209,7 @@ function generateTrigger(PortalComponent = _portal.default) {
     const lastTriggerRef = React.useRef([]);
     lastTriggerRef.current = [];
     const internalTriggerOpen = (0, _useEvent.default)(nextOpen => {
-      setMergedOpen(nextOpen);
+      setInternalOpen(nextOpen);
 
       // Enter or Pointer will both trigger open state change
       // We only need take one to avoid duplicated change event trigger

package/lib/util.js

@@ -9,10 +9,11 @@ exports.getVisibleArea = getVisibleArea;
 exports.getWin = getWin;
 exports.toNum = toNum;
 function isPointsEq(a1 = [], a2 = [], isAlignPoint) {
+  const getVal = (a, index) => a[index] || '';
   if (isAlignPoint) {
-    return a1[0] === a2[0];
+    return getVal(a1, 0) === getVal(a2, 0);
   }
-  return a1[0] === a2[0] && a1[1] === a2[1];
+  return getVal(a1, 0) === getVal(a2, 0) && getVal(a1, 1) === getVal(a2, 1);
 }
 function getAlignPopupClassName(builtinPlacements, prefixCls, align, isAlignPoint) {
   const {

package/package.json

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