fix a bug where fill would be applied even if explicitly set to false

BitPatty · web-flow · commit 159a64ada329 · 2024-10-26T22:24:35.000Z
diff --git a/example/pages/index.tsx b/example/pages/index.tsx
@@ -6,6 +6,7 @@ import {
   ProxyImage,
   buildProxyImagePath,
 } from '@bitpatty/next-image-s3-imgproxy-loader';
+import { useEffect, useRef, useState } from 'react';
 
 const demoContent: {
   label: string;
@@ -111,6 +112,18 @@ const demoContent: {
 ];
 
 const Home: NextPage = () => {
+  const [size, setSize] = useState<number>(200);
+  const sizeToggle = useRef<boolean>(false);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      sizeToggle.current = !sizeToggle.current;
+      setSize(sizeToggle.current ? 200 : 100);
+    }, 3000);
+
+    return () => clearInterval(interval);
+  }, []);
+
   return (
     <>
       <Head>
@@ -128,6 +141,20 @@ const Home: NextPage = () => {
             </div>
           ))}
         </div>
+        <div>
+          <div>
+            <h2>Dynamic</h2>
+            <div className="imgcontainer">
+              <img
+                src={buildProxyImagePath('test-bucket/test-image.png', {
+                  proxyParams: pb()
+                    .resize({ width: size, height: size })
+                    .build(),
+                })}
+              />
+            </div>
+          </div>
+        </div>
         <div>
           <div>
             <h2>Background Image</h2>
diff --git a/example/styles/global.css b/example/styles/global.css
@@ -17,3 +17,4 @@ main > div > div {
   height: 200px;
   width: 200px;
 }
+
diff --git a/src/index.tsx b/src/index.tsx
@@ -277,14 +277,14 @@ const ProxyImage = ({
     return `${endpoint ?? IMGPROXY_ENDPOINT}?${urlParams.toString()}`;
   };
 
-  return (
-    <Image
-      src={file}
-      loader={imageLoader}
-      {...(props.width == null && !props.fill ? { fill: true } : {})}
-      {...props}
-    />
-  );
+  // Toggle fill on if width is not provided
+  const fillProp = props.fill
+    ? { fill: true }
+    : props.width == null && props.fill == null
+      ? { fill: true }
+      : {};
+
+  return <Image src={file} loader={imageLoader} {...props} {...fillProp} />;
 };
 
 export { ProxyImage, IMGPROXY_ENDPOINT, buildProxyImagePath, handle };

Original file line number	Diff line number	Diff line change
`@@ -17,3 +17,4 @@ main > div > div {`
`17`	`17`	`height: 200px;`
`18`	`18`	`width: 200px;`
`19`	`19`	`}`
	`20`	`+`