From 32635cf69eb215e6470c94df338cefae9210cb87 Mon Sep 17 00:00:00 2001
From: Katja Lutz <mail@katjalutz.ch>
Date: Thu, 30 Jun 2022 11:23:27 +0200
Subject: [PATCH] feat: rework number input handlers and add proper step props

---
 src/components/Settings/Overlay.tsx   |  3 +++
 src/components/Settings/Positions.tsx | 26 +++++++++++---------------
 src/util.tsx                          | 22 +++++++++++++++-------
 3 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/src/components/Settings/Overlay.tsx b/src/components/Settings/Overlay.tsx
index d54dc5e..a9efc79 100644
--- a/src/components/Settings/Overlay.tsx
+++ b/src/components/Settings/Overlay.tsx
@@ -325,6 +325,8 @@ const SettingsOverlay: Component = () => {
                   required
                   type="number"
                   label="Standard Einzelpreis"
+                  min="0"
+                  step="0.01"
                   value={state.defaultItemPrice}
                   onInput={(evt) =>
                     setState(
@@ -332,6 +334,7 @@ const SettingsOverlay: Component = () => {
                       parseFloat(evt.currentTarget.value) || 0
                     )
                   }
+                  onBlur={resetInput(0)}
                 />
 
                 <div class="col-span-2">
diff --git a/src/components/Settings/Positions.tsx b/src/components/Settings/Positions.tsx
index ba40987..958027f 100644
--- a/src/components/Settings/Positions.tsx
+++ b/src/components/Settings/Positions.tsx
@@ -22,8 +22,8 @@ import DeleteIcon from "~icons/carbon/trash-can";
 import DragVerticalIcon from "~icons/carbon/drag-vertical";
 import PositionSettingsIcon from "~icons/carbon/settings-adjust";
 import { Checkbox, TextArea, TextInput } from "../Form";
-import { parseOptionalFloat } from "~/util";
 import { MarkdownHelpLabel } from "../Markdown";
+import { createOptionalNumberInputHandler } from "~/util";
 
 export const PositionsSettings: Component = () => {
   const [state, setState] = useContext(StoreContext)!;
@@ -295,25 +295,19 @@ export const PositionsSettings: Component = () => {
                       </div>
                       <TextInput
                         size="xs"
-                        value={
-                          position.itemPrice === 0 ? "" : position.itemPrice
-                        }
+                        value={position.itemPrice}
                         label="Einzelpreis"
                         placeholder={
                           state.defaultItemPrice
                             ? state.defaultItemPrice + ""
                             : undefined
                         }
+                        step="0.01"
                         min="0"
                         type="number"
-                        onInput={(e) => {
-                          setState(
-                            "positions",
-                            idx(),
-                            "itemPrice",
-                            parseOptionalFloat(e.currentTarget.value)
-                          );
-                        }}
+                        onInput={createOptionalNumberInputHandler((v) =>
+                          setState("positions", idx(), "itemPrice", v)
+                        )}
                       />
                       <div
                         use:autoAnimate
@@ -357,15 +351,17 @@ export const PositionsSettings: Component = () => {
                             <TextInput
                               label="Aktionspreis"
                               type="number"
+                              step="0.01"
+                              min="0"
                               value={position.fixedDiscountPrice}
-                              onInput={(e) =>
+                              onInput={createOptionalNumberInputHandler((v) =>
                                 setState(
                                   "positions",
                                   idx(),
                                   "fixedDiscountPrice",
-                                  parseOptionalFloat(e.currentTarget.value)
+                                  v
                                 )
-                              }
+                              )}
                             />
                           </div>
                           <div class="col-span-2">
diff --git a/src/util.tsx b/src/util.tsx
index 5e92b79..bdbfd36 100644
--- a/src/util.tsx
+++ b/src/util.tsx
@@ -5,13 +5,6 @@ import { JSX } from "solid-js";
 export const sleep = (timeout: number) =>
   new Promise((res) => setTimeout(res, timeout));
 
-export const parseOptionalFloat = (text: string) => {
-  const result = parseFloat(text);
-  if (Number.isNaN(result)) return undefined;
-
-  return result;
-};
-
 // Source: https://stackoverflow.com/a/34591063
 export const roundToStep = (value: number, step = 1.0) => {
   const inv = new Big(1.0).div(step);
@@ -88,3 +81,18 @@ export const onClickFocus: JSX.EventHandlerUnion<
 };
 
 export const externalLink = { target: "_blank", rel: "noopener" };
+
+export const createOptionalNumberInputHandler = (
+  onInput: (v: number | undefined) => void
+) => {
+  return (e: InputEvent & { currentTarget: HTMLInputElement }) => {
+    if (e.currentTarget.validity.badInput) {
+      return;
+    }
+
+    const value =
+      e.currentTarget.value == "" ? undefined : e.currentTarget.valueAsNumber;
+
+    onInput(value);
+  };
+};