Responsive Plugin will now respect steps to define max width

packages/html/src/plugins/responsive.ts

@@ -38,8 +38,10 @@ function responsivePlugin(steps?: number | number[], element?:HTMLImageElement,
       resolve('canceled');
     });
 
-    const containerSize = element.parentElement.clientWidth;
-    responsiveImage.resize(scale().width(containerSize).setActionTag('responsive'));
+    // Use a tagged generic action that can be later searched and replaced.
+    responsiveImage.addAction(new Action().setActionTag('responsive'));
+    // Immediately run the resize plugin, ensuring that first render gets an responive image.
+    onResize(steps, element, responsiveImage);
 
     let resizeRef: any;
     htmlPluginState.pluginEventSubscription.push(()=>{
@@ -71,19 +73,23 @@ function onResize(steps?: number | number[], element?:HTMLImageElement, responsi
  * @param responsiveImage {CloudinaryImage}
  */
 function updateByContainerWidth(steps?: number | number[], element?:HTMLImageElement, responsiveImage?: CloudinaryImage){
-  let resizeValue = element.parentElement.clientWidth;
+  // Default value for responsiveImgWidth, used when no steps are passed.
+  let responsiveImgWidth = element.parentElement.clientWidth;
 
   if(isNum(steps)){
-    resizeValue = Math.ceil(resizeValue/<number>steps)*<number>steps;
+    const WIDTH_INTERVALS = steps as number;
+    // We need to force the container width to be intervals of max width.
+    responsiveImgWidth = Math.ceil(responsiveImgWidth / WIDTH_INTERVALS ) * WIDTH_INTERVALS;
+
   } else if(Array.isArray(steps)){
-    resizeValue = steps.reduce((prev, curr) =>{
-      return (Math.abs(curr - resizeValue) < Math.abs(prev - resizeValue) ? curr : prev);
+    responsiveImgWidth = steps.reduce((prev, curr) =>{
+      return (Math.abs(curr - responsiveImgWidth) < Math.abs(prev - responsiveImgWidth) ? curr : prev);
     });
   }
 
   responsiveImage.transformation.actions.forEach((action, index) => {
     if (action instanceof Action && action.getActionTag() === 'responsive') {
-      responsiveImage.transformation.actions[index]  = scale(resizeValue).setActionTag('responsive');
+      responsiveImage.transformation.actions[index]  = scale(responsiveImgWidth).setActionTag('responsive');
     }
   });
 }

packages/react/__tests__/responsive.test.tsx

@@ -31,6 +31,46 @@ describe('responsive', () => {
     expect(el.clientWidth).toBe(250);
   });
 
+
+  it('Should respect single step and ignore default width of 250 (When Step < Width)', async function () {
+    const component = mount(
+      <ResponsiveHelper>
+        <AdvancedImage cldImg={cloudinaryImage} plugins={[responsive({steps: 100})]} />
+      </ResponsiveHelper>);
+
+    clock.tick(100); // timeout for debounce
+
+    // Output is exactly 300 due to internal rounding: ROUND_UP(CONTAINER / STEP) * STEP
+    // When STEP < CONTAINER, output is always a multiplication of STEP
+    expect(component.html()).toContain('src="https://res.cloudinary.com/demo/image/upload/c_scale,w_300/sample"');
+  });
+
+
+  it('Should respect single step and ignore default width of 250 (When Step > Width)', async function () {
+    const component = mount(
+      <ResponsiveHelper>
+        <AdvancedImage cldImg={cloudinaryImage} plugins={[responsive({steps: 251})]} />
+      </ResponsiveHelper>);
+
+    clock.tick(100); // timeout for debounce
+
+    // Output is exactly 251 due to internal rounding: ROUND_UP(CONTAINER / STEP) * STEP
+    // When STEP > CONTAINER, output is always STEP.
+    expect(component.html()).toContain('src="https://res.cloudinary.com/demo/image/upload/c_scale,w_251/sample"');
+  });
+
+  it('Should respect steps and ignore default width of 250', async function () {
+    const component = mount(
+      <ResponsiveHelper>
+        <AdvancedImage cldImg={cloudinaryImage} plugins={[responsive({steps: [10, 20, 30]})]} />
+      </ResponsiveHelper>);
+
+    clock.tick(100); // timeout for debounce
+
+    // Output is closest number to parentElement, never exceeding the width of the max step )
+    expect(component.html()).toContain('src="https://res.cloudinary.com/demo/image/upload/c_scale,w_30/sample"');
+  });
+
   it('should update container width on window resize', function () {
     const component = mount(
       <ResponsiveHelper>