Fix zoom input step size and default value

Author: SwarnimDoegar

packages/imagekit-editor-dev/src/components/common/ZoomInput.tsx

@@ -19,38 +19,26 @@ type ZoomInputFieldProps = {
   defaultValue?: number
 }
 
-/**
- * Calculate the step size based on the current zoom value
- * If zoom >= 100: step = 50
- * If zoom < 100: step = 10
- */
-function getStepSize(value: number, zoomMode: "in" | "out"): number {
-  if (zoomMode === "in") {
-    return value >= 100 ? 50 : 10
-  } else {
-    return value > 100 ? 50 : 10
-  }
-}
+const STEP_SIZE = 10
+
 
 /**
  * Calculate the next zoom value when zooming in
  * Rounds up to the next step value
  */
 function calculateZoomIn(currentValue: number): number {
-  const step = getStepSize(currentValue, "in")
-  return (Math.floor(currentValue / step) * step) + step
+  return (Math.floor(currentValue / STEP_SIZE) * STEP_SIZE) + STEP_SIZE
 }
 
 /**
  * Calculate the next zoom value when zooming out
  * Rounds down to the previous step value
  */
 function calculateZoomOut(currentValue: number): number {
-  const step = getStepSize(currentValue, "out")
-  return (Math.ceil(currentValue / step) * step) - step
+  return (Math.ceil(currentValue / STEP_SIZE) * STEP_SIZE) - STEP_SIZE
 }
 
-export const ZoomInputField: React.FC<ZoomInputFieldProps> = ({
+export const ZoomInput: React.FC<ZoomInputFieldProps> = ({
   id,
   onChange,
   defaultValue = 100,
@@ -138,4 +126,4 @@ export const ZoomInputField: React.FC<ZoomInputFieldProps> = ({
   )
 }
 
-export default ZoomInputField
+export default ZoomInput

packages/imagekit-editor-dev/src/components/sidebar/transformation-config-sidebar.tsx

@@ -56,7 +56,7 @@ import { SidebarFooter } from "./sidebar-footer"
 import { SidebarHeader } from "./sidebar-header"
 import { SidebarRoot } from "./sidebar-root"
 import PaddingInputField from "../common/PaddingInput"
-import ZoomInputField from "../common/ZoomInput"
+import ZoomInput from "../common/ZoomInput"
 
 export const TransformationConfigSidebar: React.FC = () => {
   const {
@@ -575,10 +575,10 @@ export const TransformationConfigSidebar: React.FC = () => {
                 />
               ) : null}
               {field.fieldType === "zoom" ? (
-                <ZoomInputField
+                <ZoomInput
                   value={watch(field.name) as string}
                   onChange={(value) => setValue(field.name, value)}
-                  defaultValue={field.fieldProps?.defaultValue as number ?? 0}
+                  defaultValue={field.fieldProps?.defaultValue as number ?? 100}
                   {...field.fieldProps}
                 />
               ) : null}