Restrict input types to that get rendered to HTML to not generate HTM…

…L errors
clarkmcc · Feb 7, 2024 · 4fb8e5a · 4fb8e5a
1 parent 83e210e
commit 4fb8e5a
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/lib/components/NodeBaseInputField.tsx b/lib/components/NodeBaseInputField.tsx
@@ -1,7 +1,10 @@
 import { CSSProperties, memo, ReactNode, useRef, useState } from 'react'
 import { NodeInputConfig } from '../config'
 
-type NodeBaseInputFieldProps = Pick<NodeInputConfig, 'valueType' | 'name'> & {
+export type InputHTMLTypes = 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'month' | 'number' | 'password' | 'range' | 'reset' | 'tel' | 'text' | 'time' | 'url' | 'week'
+
+type NodeBaseInputFieldProps = Pick<NodeInputConfig, 'name'> & {
+  valueType: InputHTMLTypes
   value: any
   style?: CSSProperties
   inputStyle?: CSSProperties

diff --git a/lib/components/NodeInputField.tsx b/lib/components/NodeInputField.tsx
@@ -1,11 +1,13 @@
 import { memo } from 'react'
-import { NodeBaseInputField } from './NodeBaseInputField'
+import { InputHTMLTypes, NodeBaseInputField } from './NodeBaseInputField'
 import { useNodeFieldValue } from '../hooks/node'
 import { NodeInputConfig, ValueTypeConfig } from '../config'
 import { BaseInputProps } from './inputs.ts'
 import './NodeInputField.css'
 
-type NodeInputFieldProps = BaseInputProps & NodeInputConfig & ValueTypeConfig
+type NodeInputFieldProps = BaseInputProps & Omit<NodeInputConfig, 'valueType'> & ValueTypeConfig & {
+  valueType: InputHTMLTypes
+}
 
 export const NodeInputField = memo(
   ({ onFocus, onBlur, isConstant, slots, ...props }: NodeInputFieldProps) => {

diff --git a/lib/stories/NodeGraphEditorCustomInput.stories.tsx b/lib/stories/NodeGraphEditorCustomInput.stories.tsx
@@ -19,9 +19,9 @@ const meta = {
           }}
         >
           {Handle && <Handle />}
-          <NodeInputField {...config} name="X" id="x" />
-          <NodeInputField {...config} name="Y" id="y" />
-          <NodeInputField {...config} name="Z" id="z" />
+          <NodeInputField {...config} valueType="number" name="X" id="x" />
+          <NodeInputField {...config} valueType="number" name="Y" id="y" />
+          <NodeInputField {...config} valueType="number" name="Z" id="z" />
         </div>
       )
     }