Merge branch 'master' of https://github.com/react-component/trigger

Author: zombieJ

src/Popup/Arrow.tsx

@@ -22,29 +22,32 @@ export default function Arrow(props: ArrowProps) {
     position: 'absolute',
   };
 
-  const popupPoints = align.points[0];
-  const targetPoints = align.points[1];
-  const popupTB = popupPoints[0];
-  const popupLR = popupPoints[1];
-  const targetTB = targetPoints[0];
-  const targetLR = targetPoints[1];
-
-  // Top & Bottom
-  if (popupTB === targetTB || !['t', 'b'].includes(popupTB)) {
-    alignStyle.top = arrowY;
-  } else if (popupTB === 't') {
-    alignStyle.top = 0;
-  } else {
-    alignStyle.bottom = 0;
-  }
-
-  // Left & Right
-  if (popupLR === targetLR || !['l', 'r'].includes(popupLR)) {
-    alignStyle.left = arrowX;
-  } else if (popupLR === 'l') {
-    alignStyle.left = 0;
-  } else {
-    alignStyle.right = 0;
+  // Skip if no need to align
+  if (align.autoArrow !== false) {
+    const popupPoints = align.points[0];
+    const targetPoints = align.points[1];
+    const popupTB = popupPoints[0];
+    const popupLR = popupPoints[1];
+    const targetTB = targetPoints[0];
+    const targetLR = targetPoints[1];
+
+    // Top & Bottom
+    if (popupTB === targetTB || !['t', 'b'].includes(popupTB)) {
+      alignStyle.top = arrowY;
+    } else if (popupTB === 't') {
+      alignStyle.top = 0;
+    } else {
+      alignStyle.bottom = 0;
+    }
+
+    // Left & Right
+    if (popupLR === targetLR || !['l', 'r'].includes(popupLR)) {
+      alignStyle.left = arrowX;
+    } else if (popupLR === 'l') {
+      alignStyle.left = 0;
+    } else {
+      alignStyle.right = 0;
+    }
   }
 
   return (

src/interface.ts

@@ -14,68 +14,6 @@ export type Placement =
   | 'rightTop'
   | 'rightBottom';
 
-export interface TriggerProps {
-  children: React.ReactElement;
-  action?: ActionType | ActionType[];
-  showAction?: ActionType[];
-  hideAction?: ActionType[];
-  getPopupClassNameFromAlign?: (align: AlignType) => string;
-  onPopupVisibleChange?: (visible: boolean) => void;
-  onPopupClick?: React.MouseEventHandler<HTMLDivElement>;
-  afterPopupVisibleChange?: (visible: boolean) => void;
-  popup: React.ReactNode | (() => React.ReactNode);
-  popupStyle?: React.CSSProperties;
-  prefixCls?: string;
-  popupClassName?: string;
-  className?: string;
-  popupPlacement?: string;
-  builtinPlacements?: BuildInPlacements;
-  mouseEnterDelay?: number;
-  mouseLeaveDelay?: number;
-  zIndex?: number;
-  focusDelay?: number;
-  blurDelay?: number;
-  getPopupContainer?: (node: HTMLElement) => HTMLElement;
-  getDocument?: (element?: HTMLElement) => HTMLDocument;
-  forceRender?: boolean;
-  destroyPopupOnHide?: boolean;
-  mask?: boolean;
-  maskClosable?: boolean;
-  onPopupAlign?: (element: HTMLElement, align: AlignType) => void;
-  popupAlign?: AlignType;
-  popupVisible?: boolean;
-  defaultPopupVisible?: boolean;
-  autoDestroy?: boolean;
-
-  stretch?: string;
-  alignPoint?: boolean; // Maybe we can support user pass position in the future
-
-  /** Set popup motion. You can ref `rc-motion` for more info. */
-  popupMotion?: CSSMotionProps;
-  /** Set mask motion. You can ref `rc-motion` for more info. */
-  maskMotion?: CSSMotionProps;
-
-  /** @deprecated Please us `popupMotion` instead. */
-  popupTransitionName?: TransitionNameType;
-  /** @deprecated Please us `popupMotion` instead. */
-  popupAnimation?: AnimationType;
-  /** @deprecated Please us `maskMotion` instead. */
-  maskTransitionName?: TransitionNameType;
-  /** @deprecated Please us `maskMotion` instead. */
-  maskAnimation?: string;
-
-  /**
-   * @private Get trigger DOM node.
-   * Used for some component is function component which can not access by `findDOMNode`
-   */
-  getTriggerDOMNode?: (node: React.ReactInstance) => HTMLElement;
-
-  // ========================== Mobile ==========================
-  /** @private Bump fixed position at bottom in mobile.
-   * This is internal usage currently, do not use in your prod */
-  mobile?: MobileConfig;
-}
-
 export type AlignPointTopBottom = 't' | 'b' | 'c';
 export type AlignPointLeftRight = 'l' | 'r' | 'c';
 
@@ -108,6 +46,8 @@ export interface AlignType {
     shiftX?: boolean | number;
     shiftY?: boolean | number;
   };
+  /** Auto adjust arrow position */
+  autoArrow?: boolean;
   /**
    * Whether use css right instead of left to position
    */

tests/arrow.test.jsx

@@ -80,7 +80,6 @@ describe('Trigger.Arrow', () => {
 
         await awaitFakeTimer();
 
-        console.log(document.body.innerHTML);
         expect(document.querySelector('.rc-trigger-popup-arrow')).toHaveStyle(
           style,
         );
@@ -130,5 +129,31 @@ describe('Trigger.Arrow', () => {
         left: 0,
       },
     );
+
+    it('not aligned', async () => {
+      render(
+        <Trigger
+          popupVisible
+          popupAlign={{
+            points: ['cl', 'cr'],
+            autoArrow: false,
+          }}
+          popup={<strong>trigger</strong>}
+          arrow
+        >
+          <div />
+        </Trigger>,
+      );
+
+      await awaitFakeTimer();
+
+      // Not have other align style
+      const { style  } = document.querySelector('.rc-trigger-popup-arrow')
+      expect(style.position).toBeTruthy();
+      expect(style.left).toBeFalsy();
+      expect(style.right).toBeFalsy();
+      expect(style.top).toBeFalsy();
+      expect(style.bottom).toBeFalsy();
+    });
   });
 });