refactor(positioning): fix center for arrow on shift

src/positioning/modifiers/updateArrowPosition.ts → src/positioning/modifiers/arrow.ts

@@ -1,7 +1,7 @@
 import { getClientRect, getOuterSizes, getStyleComputedProperty, setStyles } from '../utils';
 import { Offsets } from '../models';
 
-export function updateArrowPosition(
+export function arrow(
   target: HTMLElement,
   offsetsTarget: Offsets,
   hostOffset: Offsets,
@@ -11,11 +11,11 @@ export function updateArrowPosition(
 
   let targetOffsets = offsetsTarget;
   // if arrowElement is a string, suppose it's a CSS selector
-  const arrowElement: HTMLElement = target.querySelector(arrowElementClass);
+  const arrowElement: HTMLElement | null = target.querySelector(arrowElementClass);
 
   // if arrowElement is not found, don't run the modifier
   if (!arrowElement) {
-    return;
+    return offsetsTarget;
   }
 
   const isVertical = ['left', 'right'].indexOf(placement) !== -1;
@@ -61,6 +61,7 @@ export function updateArrowPosition(
 
   offsetsArrow.arrowElement = arrowElement;
 
-
   setStyles(arrowElement, offsetsArrow);
+
+  return offsetsTarget;
 }

src/positioning/modifiers/index.ts

@@ -1,4 +1,4 @@
-export { updateArrowPosition } from './updateArrowPosition';
+export { arrow } from './arrow';
 export { flip } from './flip';
 export { preventOverflow } from './preventOverflow';
 export { shift } from './shift';

src/positioning/ng-positioning.ts

@@ -9,7 +9,7 @@ import {
   getReferenceOffsets, setStyles
 } from './utils';
 
-import { updateArrowPosition, flip, preventOverflow, shift } from './modifiers';
+import { arrow, flip, preventOverflow, shift } from './modifiers';
 import { roundOffset } from './utils/roundOffset';
 import { Offsets } from './models';
 
@@ -30,21 +30,19 @@ export class Positioning {
   ): Offsets {
     const hostElPosition = this.offset(hostElement, targetElement, false);
     const placement = computeAutoPlacement(position, hostElPosition, targetElement, hostElement, 'viewport', 0);
-    const targetElPosition: Offsets = getTargetOffsets(targetElement, hostElPosition, placement);
-
-    updateArrowPosition(targetElement, targetElPosition, hostElPosition, '.arrow', placement);
 
     const chainOfModifiers = [
       getClientRect,
       (targetPosition: Offsets) => flip(targetElement, hostElement, targetPosition, hostElPosition, placement),
       (targetPosition: Offsets) => shift(targetPosition, hostElPosition, placement),
       (targetPosition: Offsets) => preventOverflow(targetElement, hostElement, targetPosition),
+      (targetPosition: Offsets) => arrow(targetElement, targetPosition, hostElPosition, '.arrow', placement),
       roundOffset
     ];
 
     return chainOfModifiers.reduce((targetPosition, modifier) => {
       return modifier(targetPosition);
-    }, targetElPosition);
+    }, getTargetOffsets(targetElement, hostElPosition, placement));
   }
 }