fixed input widgets #1

src/Cell.js

@@ -41,7 +41,6 @@ class Cell extends React.Component {
   render() {
     const {value, colDef: {left, width}} = this.props
     const Component = this.props.colDef.component
-    const editable = this.props.colDef.editable
 
     return (
       <div
@@ -58,7 +57,7 @@ class Cell extends React.Component {
               onClick={this.handleInputClick}
               editMode={this.props.editing}
             /> :
-            !Component && this.props.editing ?
+            this.props.editing ?
               <TextEditor value={value} onClick={this.handleInputClick} onChange={this.handleChange} onRelease={this.handleRelease} /> :
               value
         }

src/components/widgets/InputCheckbox.js

@@ -29,10 +29,9 @@ class InputCheckbox extends React.Component {
         />
       )
     } else {
-      const checkbox = this.props.value === true ? 'far fa-check-square' : 'far fa-square'
       component = (
         <span>
-          <i className={checkbox}></i>
+          <i className={this.props.value === true ? 'far fa-check-square' : 'far fa-square'}></i>
         </span>
       )
     }

src/components/widgets/InputDate.js

@@ -5,14 +5,18 @@ const InputDate = props => {
   if (props.value.search(/[0-9]{4}-[0-9]{2}-[0-9]{2}/g) !== 0) {
     console.warn(`Invalid date format '${props.value}', should be 'yyyy-mm-dd'`)
   }
-  return (
-    <input
-      type='date'
-      value={props.value}
-      onChange={props.onChange}
-      onClick={props.onClick}
-    />
-  )
+  if (props.editMode) {
+    return (
+      <input
+        type='date'
+        value={props.value}
+        onChange={props.onChange}
+        onClick={props.onClick}
+      />
+    )  
+  } else {
+    return props.value
+  }
 }
 
 export default InputDate

src/components/widgets/InputNumber.js

@@ -1,13 +1,19 @@
 import React from 'react'
 
 
-const InputNumber = props => (
-  <input 
-    type='number'
-    value={props.value}
-    onChange={props.onChange}
-    onClick={props.onClick}
-  />
-)
+const InputNumber = props => {
+  if (props.editMode) {
+    return (
+      <input 
+        type='number'
+        value={props.value}
+        onChange={props.onChange}
+        onClick={props.onClick}
+      />
+    )
+  } else {
+    return props.value
+  }
+}
 
 export default InputNumber