source/Controlled.tsx, utils.ts: rename prop zoomAlignment to zoomAlignmentY

Author: alexrah

source/Controlled.tsx

@@ -73,7 +73,7 @@ export interface ControlledProps {
   }) => React.ReactElement
   zoomImg?: React.ImgHTMLAttributes<HTMLImageElement>
   zoomMargin?: number
-  zoomAlignment?: 'center' | 'top'
+  zoomAlignmentY?: 'center' | 'top'
 }
 
 export function Controlled (props: ControlledProps) {
@@ -89,7 +89,7 @@ interface ControlledDefaultProps {
   swipeToUnzoomThreshold: number
   wrapElement: 'div' | 'span'
   zoomMargin: number
-  zoomAlignment: 'center' | 'top'
+  zoomAlignmentY: 'center' | 'top'
 }
 
 type ControlledPropsWithDefaults = ControlledDefaultProps & ControlledProps
@@ -113,7 +113,7 @@ class ControlledBase extends React.Component<ControlledPropsWithDefaults, Contro
     swipeToUnzoomThreshold: 10,
     wrapElement: 'div',
     zoomMargin: 0,
-    zoomAlignment: 'center'
+    zoomAlignmentY: 'center'
   }
 
   state: ControlledState = {
@@ -164,7 +164,7 @@ class ControlledBase extends React.Component<ControlledPropsWithDefaults, Contro
         ZoomContent,
         zoomImg,
         zoomMargin,
-        zoomAlignment
+        zoomAlignmentY
       },
       refContent,
       refDialog,
@@ -231,7 +231,7 @@ class ControlledBase extends React.Component<ControlledPropsWithDefaults, Contro
         offset: zoomMargin,
         shouldRefresh,
         targetEl: imgEl as SupportedImage,
-        zoomAlignment
+        zoomAlignmentY
       })
       : {}
 

source/utils.ts

@@ -438,7 +438,7 @@ export interface GetStyleModalImg {
     offset: number,
     shouldRefresh: boolean,
     targetEl: SupportedImage,
-    zoomAlignment: 'top' | 'center'
+    zoomAlignmentY: 'top' | 'center'
   }): React.CSSProperties
 }
 
@@ -451,7 +451,7 @@ export const getStyleModalImg: GetStyleModalImg = ({
   offset,
   shouldRefresh,
   targetEl,
-  zoomAlignment
+  zoomAlignmentY
 }) => {
   const hasScalableSrc =
     isSvg ||
@@ -521,8 +521,8 @@ export const getStyleModalImg: GetStyleModalImg = ({
     const childCenterY = parseFloat(String(style.top || 0)) + (parseFloat(String(style.height || 0)) / 2)
 
     const translateX = viewportX - childCenterX
-    const translateY = zoomAlignment === 'center' ? viewportY - childCenterY : -style.top
-    
+    const translateY = zoomAlignmentY === 'center' ? viewportY - childCenterY : -style.top
+
     // For scenarios like resizing the browser window
     if (shouldRefresh) {
       style.transitionDuration = '0.01ms'