Start to build the edit system

src/Admin/Components/Components/Inputs/NoteVarInputs.js

@@ -18,51 +18,103 @@ along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>
 import React, { useState } from 'react';
 import TextField from '@material-ui/core/TextField';
 
-const NoteVarInputs = ( props ) => { 
+const NoteVarInputs = (props) => {
 
-    const [name , setName] = useState(props.editInfo.name) 
-    const [code , setCode] = useState(props.editInfo.code) 
-    const [weight , setWeight] = useState(props.editInfo.weight) 
+    const [name, setName] = useState(props.editInfo.name)
+    const [code, setCode] = useState(props.editInfo.code)
+    const [weight, setWeight] = useState(props.editInfo.weight)
+
+    const [errorInName, setErrorInName] = useState({
+        error: false,
+        message: ''
+    })
+
+    const [errorInCode, setErrorInCode] = useState({
+        error: false,
+        message: ''
+    })
+
+    const [errorInWeight, setErrorInWeight] = useState({
+        error: false,
+        message: ''
+    })
+
+    const NameHandler = (e) => {
+        if (errorInName.error) {
+            setErrorInName({
+                error: false,
+                message: ''
+            })
+        }
+        setName(e.target.value)
+    }
+
+    const CodeHandler = (e) => {
+        if (errorInCode.error) {
+            setErrorInCode({
+                error: false,
+                message: ''
+            })
+        }
+        setCode(e.target.value)
+    }
+
+    const WeightHandler = (e) => {
+        if (errorInWeight.error) {
+            setErrorInWeight({
+                error: false,
+                message: ''
+            })
+        }
+        setWeight(e.target.value)
+    }
+
+    const isEmpty = (text) => {
+        return text.length === 0 ? true : false;
+    }
+
+    const fields = [
+        {
+            label: 'Nome',
+            value: name,
+            error: errorInName.error,
+            errorMessage: errorInName.message,
+            onChange: (event) => NameHandler(event)
+        },
+        {
+            label: 'Código',
+            value: code,
+            error: errorInCode.error,
+            errorMessage: errorInCode.message,
+            onChange: (event) => CodeHandler(event)
+        },
+        {
+            label: 'Peso',
+            value: weight,
+            error: errorInWeight.error,
+            errorMessage: errorInWeight.message,
+            onChange: (event) => WeightHandler(event)
+        }
+    ]
 
     return (
-        <form  style={{width : '25%' , display: 'flex' , flexDirection : 'column'}}>
-            <TextField
-                id="outlined-input"
-                label="ID *não pode mudar"
-                defaultValue={props.editInfo.id} //valor recebido por prop
-                variant="outlined"
-                disabled={true}
-            />   
-            <div style={{ height: '1em' }} />
- 
-            <TextField
-                id="outlined-input"
-                label="Nome"
-                value={name} 
-                onChange={e => setName(e.target.value)}
-                variant="outlined"
-            /> 
-            <div style={{ height: '1em' }} />
-
-            <TextField
-                id="outlined-input"
-                label="Código"
-                value={code} 
-                onChange={e => setCode(e.target.value)}
-                variant="outlined"
-            /> 
-            <div style={{ height: '1em' }} />
-
-            <TextField
-                id="outlined-input"
-                label="Peso"
-                value={weight} 
-                onChange={e => setWeight(e.target.value)}
-                variant="outlined"
-            /> 
-            <div style={{ height: '1em' }} />
-
-        </form>
+        <div>
+            <form style={{ display: 'flex', flexDirection: 'column' }}>
+                {fields.map((field, index) => (
+                    <TextField
+                        key={index}
+                        error={field.error}
+                        helperText={field.error ? field.errorMessage : ''}
+                        style={{ width: '250px', marginBottom: '1em' }}
+                        label={field.label}
+                        value={field.value}
+                        onChange={field.onChange}
+                        type="search"
+                        multiline={true}
+                    />
+                ))}
+            </form>
+        </div>
     )
 }