feat: add the ability to specify a sizing scale for the magnified ima…

…ge container
gooftroop · Sep 21, 2021 · af0795c · af0795c
1 parent 4974c23
commit af0795c
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 6 deletions.
diff --git a/src/ReactImageMagnify.tsx b/src/ReactImageMagnify.tsx
@@ -113,11 +113,13 @@ export const ReactImageMagnify = (props: ReactImageMagnifyProps): JSX.Element =>
         width: getEnlargedImageContainerDimension(
             magnifyContainerProps?.width || DEFAULT_MAGNIFY_CONTAINER_WIDTH,
             imageRef?.current?.offsetWidth || smallImage.width || DEFAULT_MAGNIFY_CONTAINER_WIDTH,
+            magnifyContainerProps?.scale,
             isInPlaceMode,
         ),
         height: getEnlargedImageContainerDimension(
             magnifyContainerProps?.height || DEFAULT_MAGNIFY_CONTAINER_HEIGHT,
             imageRef?.current?.offsetHeight || smallImage.height || DEFAULT_MAGNIFY_CONTAINER_HEIGHT,
+            magnifyContainerProps?.scale,
             isInPlaceMode,
         ),
     } as ContainerDimensions), [magnifyContainerProps, smallImage, isInPlaceMode]);

diff --git a/src/lib/__tests__/dimensions.spec.ts b/src/lib/__tests__/dimensions.spec.ts
@@ -26,25 +26,25 @@ describe('Dimensions Library', () => {
 
     describe('getEnlargedImageContainerDimension', () => {
         it('returns correct value when container dimension is a percentage', () => {
-            const actual = getEnlargedImageContainerDimension('50%', 2);
+            const actual = getEnlargedImageContainerDimension('50%', 2, undefined, undefined);
 
             expect(actual).toEqual(1);
         });
 
         it('returns correct value when container dimension is a number', () => {
-            const actual = getEnlargedImageContainerDimension(4, 2);
+            const actual = getEnlargedImageContainerDimension(4, 2, undefined, undefined);
 
             expect(actual).toEqual(4);
         });
 
         it('ignores containerDimension value when isInPlaceMode is set', () => {
-            const actual = getEnlargedImageContainerDimension(4, 2, true);
+            const actual = getEnlargedImageContainerDimension(4, 2, undefined, true);
 
             expect(actual).toEqual(2);
         });
 
         it('honors user specified dimension when isInPlaceMode is not set', () => {
-            const actual = getEnlargedImageContainerDimension(4, 2, false);
+            const actual = getEnlargedImageContainerDimension(4, 2, undefined, false);
 
             expect(actual).toEqual(4);
         });

diff --git a/src/lib/dimensions.ts b/src/lib/dimensions.ts
@@ -14,12 +14,30 @@ export function convertPercentageToDecimal(percentage: string | number, denomina
 export function getEnlargedImageContainerDimension(
     containerDimension: string | number,
     smallImageDimension: string | number,
-    isInPlaceMode?: boolean,
+    scale: number | undefined,
+    isInPlaceMode: boolean | undefined,
 ): string | number {
     if (isInPlaceMode) {
         return smallImageDimension;
     }
 
+    if (scale) {
+        if (scale <= 0 && process?.env?.NODE_ENV !== 'production') {
+            // eslint-disable-next-line no-console
+            console.warn(`[ReactImageMagnify]
+                Warning! "scale" cannot be 0 or less (found ${scale}). Defaulting to 0.5.
+            `);
+
+            // eslint-disable-next-line no-param-reassign
+            scale = 0.5;
+        }
+
+        return (isPercentageFormat(smallImageDimension)
+            ? convertPercentageToDecimal(smallImageDimension)
+            : smallImageDimension as number)
+            * scale;
+    }
+
     if (isPercentageFormat(containerDimension)) {
         return isPercentageFormat(smallImageDimension)
             ? convertPercentageToDecimal(smallImageDimension, containerDimension)

diff --git a/src/stories/ReactImageMagnify.stories.tsx b/src/stories/ReactImageMagnify.stories.tsx
@@ -118,3 +118,23 @@ MagnifiedImageContainerDimensions.args = {
         horizontalOffset: 10,
     },
 };
+
+export const MagnifiedImageContainerScaling = Template.bind({});
+MagnifiedImageContainerScaling.args = {
+    imageProps: {
+        alt: 'example small image',
+        src: 'https://picsum.photos/id/1018/200',
+    },
+    magnifiedImageProps: {
+        src: 'https://picsum.photos/id/1018/800',
+        height: 800,
+        width: 800,
+    },
+    magnifyContainerProps: {
+        scale: 2,
+    },
+    portalProps: {
+        id: 'portal-test-id',
+        horizontalOffset: 10,
+    },
+};
diff --git a/src/types.ts b/src/types.ts
@@ -97,12 +97,17 @@ export type PortalProps = Omit<Partial<Options>, 'modifiers' | 'placement'> & {
     style?: CSSProperties;
     placement?: MagnifiedImagePosition;
     dataTestId?: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     modifiers?: Modifier<any, any>[];
     horizontalOffset?: number;
     verticalOffset?: number;
 };
 
-export interface MagnifyContainerProps extends Omit<HTMLProps<HTMLDivElement>, 'height' | 'width'>, ContainerDimensions {}
+export interface MagnifyContainerProps extends Omit<HTMLProps<HTMLDivElement>, 'height' | 'width'> {
+    scale?: number;
+    height?: number;
+    width?: number;
+}
 
 export type ChildProps = {
     isActive: boolean;
@@ -137,7 +142,9 @@ CursorPositionProps,
     activationInteractionMouse?: Interactions['click'] | Interactions['hover'];
     activationInteractionTouch?: Interactions['press'] | Interactions['tap'] | Interactions['touch'];
     fadeDurationInMs?: number;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     hintComponent?: ComponentType<HintProps & any>;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     hintProps?: HintProps & any;
     hoverDelayInMs?: number;
     hoverOffDelayInMs?: number;