Merge pull request #505 from framer/tidy-up-fix-inputs

Tidy Up: fix number inputs, allow any integer gap

Author: madebyisaacr

plugins/tidyup/src/App.tsx

@@ -339,7 +339,7 @@ const SortingSchema = v.union(allSortings.map(sorting => v.literal(sorting)))
 type Sorting = v.InferOutput<typeof SortingSchema>
 
 const ColumnCountSchema = v.pipe(v.number(), v.integer(), v.minValue(1))
-const GapSchema = v.pipe(v.number(), v.integer(), v.minValue(0), v.multipleOf(10))
+const GapSchema = v.pipe(v.number(), v.integer(), v.minValue(0))
 
 export function App() {
     const isAllowedToSetAttributes = useIsAllowedTo("setAttributes")

plugins/tidyup/src/Stepper.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react"
 import { isNumber } from "./isNumber"
 
 import "./Stepper.css"
@@ -36,23 +37,51 @@ function clamp(value: number, min: number, max: number) {
 }
 
 export function Stepper({ value = 0, min = 0, step: stepAmount = 1, onChange }: Props) {
+    const [inputValue, setInputValue] = useState<string>(() => String(value))
+
+    useEffect(() => {
+        setInputValue(String(value))
+    }, [value])
+
     const step = (direction: -1 | 1) => {
-        onChange(clamp(value + stepAmount * direction, 0, Infinity))
+        onChange(clamp(value + stepAmount * direction, min, Infinity))
+    }
+
+    const commitInput = () => {
+        const trimmed = inputValue.trim()
+        if (trimmed === "") {
+            setInputValue(String(value))
+            return
+        }
+
+        const parsed = Number(trimmed)
+        if (!isNumber(parsed)) {
+            setInputValue(String(value))
+            return
+        }
+
+        const snapped = Math.round(clamp(parsed, min, Infinity))
+
+        setInputValue(String(snapped))
+        onChange(snapped)
     }
 
     return (
         <div className="stepper">
             <input
                 className="stepper-input"
                 type="number"
-                value={value}
+                value={inputValue}
                 min={min}
                 step={stepAmount}
                 onChange={event => {
-                    const numberValue = event.currentTarget.valueAsNumber
-                    const value = isNumber(numberValue) ? numberValue : 0
-
-                    onChange(value)
+                    setInputValue(event.currentTarget.value)
+                }}
+                onBlur={commitInput}
+                onKeyDown={event => {
+                    if (event.key === "Enter") {
+                        commitInput()
+                    }
                 }}
             />