Update InputTableField

Allow for passing down input properties and remove fixed width

components/common/InputTableField/index.scss

@@ -1,4 +1,3 @@
-.InputField.TableField .Input {
+.InputField.TableField .Input[type='number'] {
   text-align: right;
-  width: $unit-8x;
 }

components/common/InputTableField/index.tsx

@@ -3,50 +3,60 @@ import Input from '~components/common/Input'
 import TableField from '~components/common/TableField'
 
 import './index.scss'
+import classNames from 'classnames'
 
-interface Props {
+interface Props
-  name: string
+  extends React.DetailedHTMLProps<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement
+  > {
   label: string
   description?: string
-  placeholder?: string
-  value?: number
-  className?: string
   imageAlt?: string
   imageClass?: string
   imageSrc?: string[]
-  onValueChange: (value: number) => void
+  onValueChange: (value?: string) => void
 }
 
-const InputTableField = (props: Props) => {
+const InputTableField = ({
-  const [value, setValue] = useState(0)
+  label,
+  description,
+  imageAlt,
+  imageClass,
+  imageSrc,
+  ...props
+}: Props) => {
+  const [inputValue, setInputValue] = useState('')
 
   useEffect(() => {
-    if (props.value) setValue(props.value)
+    if (props.value) setInputValue(`${props.value}`)
   }, [props.value])
 
   useEffect(() => {
-    props.onValueChange(value)
+    props.onValueChange(inputValue)
-  }, [value])
+  }, [inputValue])
 
   function onInputChange(event: React.ChangeEvent<HTMLInputElement>) {
-    setValue(parseInt(event.currentTarget?.value))
+    setInputValue(`${parseInt(event.currentTarget?.value)}`)
   }
 
   return (
     <TableField
-      name={props.name}
+      {...props}
-      className="InputField"
+      name={props.name || ''}
-      imageAlt={props.imageAlt}
+      className={classNames({ InputField: true }, props.className)}
-      imageClass={props.imageClass}
+      imageAlt={imageAlt}
-      imageSrc={props.imageSrc}
+      imageClass={imageClass}
-      label={props.label}
+      imageSrc={imageSrc}
+      label={label}
     >
       <Input
         className="Bound"
         placeholder={props.placeholder}
-        type="number"
+        value={inputValue ? `${inputValue}` : ''}
-        value={value ? `${value}` : ''}
         step={1}
+        tabIndex={props.tabIndex}
+        type={props.type}
         onChange={onInputChange}
       />
     </TableField>