add numeric input wrapping

gridaco · Feb 28, 2024 · 08b74a4 · 08b74a4
1 parent bba24c2
commit 08b74a4
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/packages/editor-ui-property/property-input/index.ts b/packages/editor-ui-property/property-input/index.ts
@@ -1,2 +1,2 @@
-export { PropertyInput } from "./property-input";
+export * from "./property-input";
 export type { PropertyInputProps } from "./property-input";
diff --git a/packages/editor-ui-property/property-input/property-input.tsx b/packages/editor-ui-property/property-input/property-input.tsx
@@ -147,6 +147,27 @@ export function PropertyInput({
   );
 }
 
+export function PropertyNumericInput({
+  onChange,
+  ...props
+}: Omit<React.ComponentProps<typeof PropertyInput>, "type" | "onChange"> & {
+  onChange?: (value: number) => void;
+}) {
+  return (
+    <PropertyInput
+      type="number"
+      {...props}
+      onChange={(txt) => {
+        const val = Number(txt);
+        if (isNaN(val)) {
+          return;
+        }
+        onChange(val);
+      }}
+    />
+  );
+}
+
 const PlainInput = styled.input`
   width: 100%;
   height: 100%;