layout das 3 paginas de /professor prontos

src/Components/FormInput.js

@@ -64,6 +64,10 @@ export default function FormInput(props) {
           error = {props.error}
           helperText ={props.help}
           style={{width:"100%"}}
+          mask={props.mask}
+          multiline={props.multi}
+          rows={props.row}
+          rowsMax={props.rowMax}
         />
   );
 }

src/Components/PageProfessorComponents/PartOne.js

@@ -129,7 +129,7 @@ export const Content = styled.div`
         font-size : 15px;
     }
 `
-const ButtonConfirmar = styled(Button)`
+export const ButtonConfirmar = styled(Button)`
     background-color : #00bcd4 !important;
     color : #fff !important;
     font-family : 'Roboto',sans-serif !important;

src/Components/PageProfessorComponents/PartThree.js

-import React from 'react'
+import React, {useState} from 'react'
+import {Content, ButtonsArea} from './PartOne.js'
+import {ButtonCancelar, ButtonGrey} from './PartTwo.js'
+import FormControl from '@material-ui/core/FormControl';
+import InputLabel from '@material-ui/core/InputLabel';
+import Stepper from '../Stepper.js'
+import FormInput from '../FormInput.js'
+import styled from 'styled-components'
+import {Button} from '@material-ui/core'
 
 export default function PartThree (props) {
+    const [phoneNumber, setPhoneNumber] = useState('')
+    const handleChangePhoneNumber = (event) => {setPhoneNumber(event.target.value)}
+
+    const [cpf, setCpf] = useState('')
+    const handleChangeCpf = (event) => {setCpf(event.target.value)}
     return (
-        <span>Part Three</span>
+        <>
+        <Content>
+            <h4>Vamos localizar o seu cadastro:</h4>
+            <Stepper items={props.stepper}/>
+            <form style={{textAlign:"start"}}>
+                <span>CENTRO EDUC INF MEU PEDACINHO DE CHAO</span>
+                <FormControl required style={{width:"100%"}}>
+                     <p>Inserir o telefone da escola:</p>
+                     <FormInput
+                        inputType={'text'}
+                        name={'DDD e Número'}
+                        placeholder={'DDD e Número'}
+                        value={phoneNumber}
+                        handleChange={handleChangePhoneNumber}
+                     >
+                     </FormInput>
+                </FormControl>
+                <FormControl required style={{width:"100%"}}>
+                     <p>Inserir o seu CPF</p>
+                     <FormInput
+                        inputType={'text'}
+                        name={'11 dígitos'}
+                        placeholder={'11 dígitos'}
+                        value={cpf}
+                        handleChange={handleChangeCpf}
+                        mask={'999.999.999-99'}
+                     >
+                     </FormInput>
+                </FormControl>
+                <div style={{display:"flex", justifyContent:"space-evenly",paddingTop:"10px", paddingBottom:"10px"}}>
+                    <div style={{display:"flex", justifyContent:"center"}}>
+                        <ButtonConfirmar onClick={props.handleBuscar}>BUSCAR</ButtonConfirmar>
+                    </div>
+                    <div style={{display:"flex", justifyContent:"center"}}>
+                        <ButtonGrey>VOLTAR</ButtonGrey><ButtonCancelar>CANCELAR</ButtonCancelar>
+                    </div>
+                </div>
+            </form>
+            </Content>
+        </>
     )
 }
+
+const ButtonConfirmar = styled(Button)`
+    background-color : #00bcd4 !important;
+    color : #fff !important;
+    box-shadow : none !important;
+    font-family : 'Roboto',sans-serif !important;
+    font-size : 14px !important;
+    font-weight : bold !important;
+    height : 36px !important;
+    border-radius : 3px !important;
+    padding-left : 16px !important;
+    padding-right : 16px !important;
+    vertical-align : middle !important;
+    text-align : center !important;
+    align-items : center !important;
+
+`

src/Components/PageProfessorComponents/PartTwo.js

@@ -16,7 +16,7 @@ export default function PartTwo (props) {
             <Content>
                 <InputContainer>
                     <p>Selecione a sua escola:</p>
-                    <CustomizedTables/>
+                    <CustomizedTables onClick={props.onClickTable}/>
                 </InputContainer>
             </Content>
             <Divider/>
@@ -38,7 +38,7 @@ export const ButtonCancelar = styled(Button)`
     padding-right: 16px !important;
 `
 
-const ButtonGrey = styled(Button)`
+export const ButtonGrey = styled(Button)`
     background-color : #fff !important;
     border : 1.5px #666 solid !important;
     color : #666 !important;

src/Components/Table.js

@@ -49,7 +49,7 @@ const useStyles = makeStyles({
   },
 });
 
-export default function CustomizedTables() {
+export default function CustomizedTables(props) {
   const classes = useStyles();
 
   return (
@@ -69,7 +69,7 @@ export default function CustomizedTables() {
               <StyledTableCell component="th" scope="row">
                 {row.name}
               </StyledTableCell>
-              <StyledTableCell align="right">{row.calories}</StyledTableCell>
+              <StyledTableCell align="right" onClick={props.onClick}>{row.calories}</StyledTableCell>
               <StyledTableCell align="right">{row.fat}</StyledTableCell>
               <StyledTableCell align="right">{row.carbs}</StyledTableCell>
             </StyledTableRow>

src/Pages/PageProfessor.js

@@ -27,6 +27,12 @@ export default function PageProfessor (props) {
         props.history.push('/perfil/atualizacoes')
     }
 
+    const onClickTable = () => {
+        handleStepper(
+            [ {value : '1', selected : false}, {value : '2', selected : false}, {value : '3', selected : true} ]
+        )
+    }
+
     return (
         <>
         {
@@ -38,8 +44,8 @@ export default function PageProfessor (props) {
                             <Paper elevation={3} style= {{width:"max-content"}}>
                                 <div style={{paddingRight:"15px", paddingLeft:"15px"}}>
                                     {stepper[0].selected && <PartOne stepper={stepper} handleBuscar={handleBuscar} handleCancelar={handleCancelar}/>}
-                                    {stepper[1].selected && <PartTwo stepper={stepper}/>}
-                                    {stepper[2].selected && <PartThree/>}
+                                    {stepper[1].selected && <PartTwo stepper={stepper} onClickTable={onClickTable}/>}
+                                    {stepper[2].selected && <PartThree stepper={stepper}/>}
                                 </div>
                             </Paper>
                         </div>