fix: passing all props included NodeConfig resulted in flood of react…

… html errors in the console (#42)
clarkmcc · Feb 13, 2024 · d73badb · d73badb
1 parent ba8a4d6
commit d73badb
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 8 deletions.
diff --git a/lib/components/NodeBaseInputField.tsx b/lib/components/NodeBaseInputField.tsx
@@ -19,7 +19,14 @@ export const NodeBaseInputField = ({
   onPointerDown,
   onPointerLeave,
   children,
-  ...props
+  inputMode,
+  pattern,
+  maxLength,
+  minLength,
+  max,
+  min,
+  step,
+  placeholder,
 }: NodeBaseInputFieldProps) => {
   const [labelVisible, setLabelVisible] = useState(true)
   const ref = useRef<HTMLInputElement>(null)
@@ -45,7 +52,6 @@ export const NodeBaseInputField = ({
     >
       {children}
       <input
-        {...props}
         ref={ref}
         style={{
           background: '#545555',
@@ -71,6 +77,14 @@ export const NodeBaseInputField = ({
         }}
         onPointerDown={onPointerDown}
         onPointerLeave={onPointerLeave}
+        inputMode={inputMode}
+        pattern={pattern}
+        maxLength={maxLength}
+        minLength={minLength}
+        max={max}
+        min={min}
+        step={step}
+        placeholder={placeholder}
       />
       {labelVisible ? (
         <div

diff --git a/lib/components/NodeInputField.tsx b/lib/components/NodeInputField.tsx
@@ -1,13 +1,12 @@
 import { useCallback, useEffect, useState } from 'react'
 import { NodeBaseInputField } from './NodeBaseInputField'
 import { useNodeFieldValue } from '../hooks/node'
-import { NodeInputConfig, ValueTypeConfig } from '../config'
+import { NodeInputConfig } from '../config'
 import { BaseInputProps } from './inputs.ts'
 import './NodeInputField.css'
 
 type NodeInputFieldProps = BaseInputProps &
-  Omit<NodeInputConfig, 'valueType'> &
-  ValueTypeConfig &
+  Pick<NodeInputConfig, 'isConstant' | 'id' | 'defaultValue' | 'name'> &
   React.InputHTMLAttributes<any>
 
 export const NodeInputField = ({
@@ -16,10 +15,12 @@ export const NodeInputField = ({
   type,
   isConstant,
   slots,
+  id,
+  defaultValue,
   ...props
 }: NodeInputFieldProps) => {
   const Handle = slots?.Handle
-  const [value, setValue] = useNodeFieldValue(props.id, props.defaultValue)
+  const [value, setValue] = useNodeFieldValue(id, defaultValue)
 
   return (
     <NodeBaseInputField
@@ -95,7 +96,7 @@ export const NodeInputDecimalField = ({
 type NodeInputTypedFieldProps = Omit<NodeInputFieldProps, 'type'>
 
 export const NodeInputTextField = (
-  props: NodeInputTypedFieldProps & { maxlength?: number; minlength?: number },
+  props: NodeInputTypedFieldProps & { maxLength?: number; minLength?: number },
 ) => {
   return <NodeInputField type="text" {...props} />
 }
@@ -107,7 +108,7 @@ export const NodeInputNumberField = (
 }
 
 export const NodeInputPasswordField = (
-  props: NodeInputTypedFieldProps & { maxlength?: number; minlength?: number },
+  props: NodeInputTypedFieldProps & { maxLength?: number; minLength?: number },
 ) => {
   return <NodeInputField type="password" {...props} />
 }