diff --git a/src/Admin/Components/Components/Inputs/CreateQuestion.js b/src/Admin/Components/Components/Inputs/CreateQuestion.js
index af8782165fbe5d0f6cf7d58f94e83bf1485186e3..0c4e03690eaec79529c85245672846b82d77ce4d 100644
--- a/src/Admin/Components/Components/Inputs/CreateQuestion.js
+++ b/src/Admin/Components/Components/Inputs/CreateQuestion.js
@@ -20,7 +20,7 @@ import React, { useState, useContext } from 'react';
//imports material ui componets
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
-import { Typography, TextField, Grid } from '@material-ui/core';
+import { Typography, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
import MenuItem from "@material-ui/core/MenuItem";
@@ -188,25 +188,24 @@ const CreateQuestion = (props) => {
<form style={{ display: 'flex', flexDirection: 'column' }}>
<>
- <TextField
- select
- label="Status"
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Status"
value={status ? status : ""}
- style={{ width: '250px', marginBottom: '1em' }}
- onChange={handleChange}
- >
- {STATUS_OPTIONS.map((option, index) => (
+ handleChange={handleChange}
+ items={STATUS_OPTIONS.map((option, index) => (
<MenuItem
key={option.value}
value={option.value}
- style={option.value === status ? { color: 'blue' } : { color: 'black' }}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
>
{
option.label
}
</MenuItem>
))}
- </TextField>
+ />
{fields.map((field, index) => (
<FormInput
contrast={state.contrast}
diff --git a/src/Admin/Components/Components/Inputs/EditCollection.js b/src/Admin/Components/Components/Inputs/EditCollection.js
index 25af11cf7a9ca1f25b727e55cff27094534bb61c..b1fdcedcc4aeb6e726b286b6b01ccb92e67f53e8 100644
--- a/src/Admin/Components/Components/Inputs/EditCollection.js
+++ b/src/Admin/Components/Components/Inputs/EditCollection.js
@@ -18,7 +18,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useState, useEffect, useContext } from 'react';
//imports material ui components
-import { Typography, TextField, Grid } from '@material-ui/core';
+import { Typography, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
@@ -225,25 +225,24 @@ const EditCollection = () => {
multi={true}
/>
))}
- <TextField
- select
- label="Privacidade"
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Privacidade"
value={privacy ? privacy : ""}
- style={{ marginBottom: '1em' }}
- onChange={handleChange}
- >
- {privacyOptions.map((option, index) => (
+ handleChange={handleChange}
+ items={privacyOptions.map((option, index) => (
<MenuItem
key={option.value}
value={option.value}
- style={option.value === privacy ? { color: 'blue' } : { color: 'black' }}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
>
{
option.value
}
</MenuItem>
))}
- </TextField>
+ />
<CKEditor
editor={ClassicEditor}
data={description}
diff --git a/src/Admin/Components/Components/Inputs/EditEducationalObect.js b/src/Admin/Components/Components/Inputs/EditEducationalObect.js
index a129b7b692955bb21d23a69c44e90fcf07146273..9054db98f11c4746c1f01f513f77981a4b24f5ca 100644
--- a/src/Admin/Components/Components/Inputs/EditEducationalObect.js
+++ b/src/Admin/Components/Components/Inputs/EditEducationalObect.js
@@ -21,7 +21,7 @@ import PropTypes from "prop-types";
import SwipeableViews from "react-swipeable-views";
import moment from "moment";
//imports material ui components
-import { Typography, TextField, Grid } from "@material-ui/core";
+import { Typography, Grid } from "@material-ui/core";
import CircularProgress from "@material-ui/core/CircularProgress";
import CardContent from "@material-ui/core/CardContent";
import CardAction from "@material-ui/core/CardActions";
@@ -519,46 +519,45 @@ const EditEducationalObject = () => {
</li>
);
})}
- <TextField
- id="standard-select-currency"
- select
- label="Línguas"
- style={{ width: "250px", marginBottom: "1em" }}
- >
- {listOfLanguages.map((option) => (
+ <FormInput
+ contrast={state.contrast}
+
+ selectable={true}
+ placeholder="Línguas"
+ items={listOfLanguages.map((option) => (
<MenuItem
key={option.id}
value={option.name}
onClick={() => {
handleChangeLan(option.id, option.name);
}}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
>
{option.name}
</MenuItem>
))}
- </TextField>
+ />
<li style={{ listStyleType: "none", marginBottom: "0.5em" }}>
<Chip label={objectType.name} style={state.contrast === "" ? {backgroundColor: "#ddd", color: "black"} : {backgroundColor: "black", color: "white", border: "1px solid white"}} />
</li>
- <TextField
- id="standard-select-currency"
- select
- label="Object type"
- style={{ width: "250px", marginBottom: "1em" }}
- >
- {listOfObjectTypes.map((option) => (
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Object type"
+ items={listOfObjectTypes.map((option) => (
<MenuItem
key={option.id}
value={option.name}
onClick={() => {
handleChangeObj(option.id, option.name);
}}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
>
{option.name}
</MenuItem>
))}
- </TextField>
+ />
</form>
</TabPanel>
diff --git a/src/Admin/Components/Components/Inputs/EditUser.js b/src/Admin/Components/Components/Inputs/EditUser.js
index a13fdb061ce48d7621c1cebf57aef16c353e10c1..90490de2e9ea5a40627610ae91a86d6dee55b137 100644
--- a/src/Admin/Components/Components/Inputs/EditUser.js
+++ b/src/Admin/Components/Components/Inputs/EditUser.js
@@ -18,7 +18,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useState, useEffect, useContext } from 'react';
//imports material ui components
-import { Typography, TextField, Grid } from '@material-ui/core';
+import { Typography, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
@@ -551,18 +551,21 @@ const EditUser = () => {
</li>
);
})}
- <TextField
- id="standard-select-currency"
- select
- label="Permissões"
- style={{ width: '250px', marginBottom: '1em' }}
- >
- {rolesList.map((option) => (
- <MenuItem key={option.id} value={option.value} onClick={() => { handleChange(option.id, option.value) }}>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Permissões"
+ items={rolesList.map((option) => (
+ <MenuItem
+ key={option.id}
+ value={option.value}
+ onClick={() => { handleChange(option.id, option.value) }}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
{option.value}
</MenuItem>
))}
- </TextField>
+ />
<FormControlLabel
control={
<Switch
diff --git a/src/Admin/Components/Components/Inputs/EmailInputs.js b/src/Admin/Components/Components/Inputs/EmailInputs.js
index 7ea38af2173d352df40da100b8976edf6a966761..2ce9258005df39d217cda9ea312504f0dd2287f1 100644
--- a/src/Admin/Components/Components/Inputs/EmailInputs.js
+++ b/src/Admin/Components/Components/Inputs/EmailInputs.js
@@ -18,7 +18,6 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useState, useContext } from "react";
//material ui components
-import TextField from "@material-ui/core/TextField";
import MenuItem from "@material-ui/core/MenuItem";
import FormGroup from "@material-ui/core/FormGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
@@ -384,23 +383,23 @@ const EmailInputs = (props) => {
value="integrada.contato@mec.gov.br"
/>
<div style={{ height: "1em" }} />
-
- <TextField
- select
- label="Para *"
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Para *"
value={option ? option : ""}
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {options.map((option, index) => (
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={options.map((option, index) => (
<MenuItem
key={option.value}
value={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
>
{option.label}
</MenuItem>
))}
- </TextField>
+ />
<div style={{ height: "1em" }} />
{
isToRoles &&
diff --git a/src/Admin/Pages/Pages/SubPages/Activity.js b/src/Admin/Pages/Pages/SubPages/Activity.js
index 3c82a90fa3087c5efb9de6c3248d9377b74f6069..ec2c0bd9c4f54db80db27d27afd866dd941e3e2f 100644
--- a/src/Admin/Pages/Pages/SubPages/Activity.js
+++ b/src/Admin/Pages/Pages/SubPages/Activity.js
@@ -27,12 +27,12 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner'
import MobilePageHeader from '../../../Components/Components/MobileComponents/MobilePageHeader'
import PageHeader, { StyledFilter } from '../../../Components/Components/PageHeader'
import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
+import FormInput from "Components/FormInput.js"
//imports from material ui
import TableBody from "@material-ui/core/TableBody"
import TableCell from "@material-ui/core/TableCell"
import MenuItem from "@material-ui/core/MenuItem"
import TableRow from "@material-ui/core/TableRow"
-import TextField from "@material-ui/core/TextField"
import IconButton from "@material-ui/core/IconButton"
import { Button } from "@material-ui/core"
import CircularProgress from "@material-ui/core/CircularProgress"
@@ -206,23 +206,24 @@ const Activity = () => {
<StyledFilter contrast={state.contrast}>
<div style={{ alignSelf: "flex-end" }}>
- <TextField
- select
- label="Filtro"
- value={option ? option : ""}
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {options.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Filtro"
+ value={option ? option : ""}
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={options.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</div>
</StyledFilter>
) : null}
@@ -330,23 +331,24 @@ const Activity = () => {
<StyledFilter contrast={state.contrast}>
<div style={{ alignSelf: "flex-end" }}>
- <TextField
- select
- label="Filtro"
- value={option ? option : ""}
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {options.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Filtro"
+ value={option ? option : ""}
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={options.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</div>
</StyledFilter>
) : null}
diff --git a/src/Admin/Pages/Pages/SubPages/AproveTeacher.js b/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
index 28d4d95e116afd350daca7682962e0025361933e..338110a0122ce91f5169b7a3db915f744d1c24cd 100644
--- a/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
+++ b/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
@@ -40,7 +40,6 @@ import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import MenuItem from "@material-ui/core/MenuItem";
import TableRow from "@material-ui/core/TableRow";
-import TextField from "@material-ui/core/TextField";
import IconButton from "@material-ui/core/IconButton";
import { Button, Paper, Grid } from "@material-ui/core";
import CircularProgress from "@material-ui/core/CircularProgress";
@@ -401,23 +400,24 @@ const AproveTeacher = () => {
xs={12}
>
<Grid item>
- <TextField
- select
- label="Estado"
- value={option ? option : ""}
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {StateOptions.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Estado"
+ value={option ? option : ""}
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={StateOptions.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
<Grid item>
<FormInput
@@ -607,23 +607,24 @@ const AproveTeacher = () => {
xs={12}
>
<Grid item>
- <TextField
- select
- label="Estado"
- value={option ? option : ""}
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {StateOptions.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Estado"
+ value={option ? option : ""}
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={StateOptions.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
<Grid item>
<FormInput
diff --git a/src/Admin/Pages/Pages/SubPages/BlockedUsers.js b/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
index 005917e11dd09f326259ba831b3d86ebade3e9a7..90f929ac493047afe941d363d0a47b62b3d7409b 100644
--- a/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
+++ b/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
@@ -23,7 +23,6 @@ import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
import MenuItem from "@material-ui/core/MenuItem";
import TableRow from "@material-ui/core/TableRow";
-import TextField from "@material-ui/core/TextField";
import TableCell from '@material-ui/core/TableCell';
import RemoveCircleOutlineRoundedIcon from '@material-ui/icons/RemoveCircleOutlineRounded';
import VisibilityIcon from '@material-ui/icons/Visibility';
@@ -43,6 +42,7 @@ import PageHeader, { StyledFilter } from "../../../Components/Components/PageHea
import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
import { Store } from 'Store'
import StyledButton from '../../../Components/Components/Button';
+import FormInput from "Components/FormInput.js"
//Services
import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { Url } from '../../../Filters';
@@ -268,22 +268,23 @@ const BlockedUsers = () => {
>
<StyledFilter contrast={state.contrast}>
<Grid item>
- <TextField
- select
- label="Estado de bloqueio"
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {StateOptions.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Estado de bloqueio"
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={StateOptions.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
</StyledFilter>
</MobilePageHeader>
@@ -400,22 +401,23 @@ const BlockedUsers = () => {
>
<StyledFilter contrast={state.contrast}>
<Grid item>
- <TextField
- select
- label="Estado de bloqueio"
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {StateOptions.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Estado de bloqueio"
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={StateOptions.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
</StyledFilter>
</PageHeader>
diff --git a/src/Admin/Pages/Pages/SubPages/Collections.js b/src/Admin/Pages/Pages/SubPages/Collections.js
index bf276295c96fdb1ce8b325c2952b1869308b7282..8ecb15f1e9ab624f5adf6146b2a31b341023d917 100644
--- a/src/Admin/Pages/Pages/SubPages/Collections.js
+++ b/src/Admin/Pages/Pages/SubPages/Collections.js
@@ -36,7 +36,6 @@ import PeopleRoundedIcon from "@material-ui/icons/PeopleRounded";
import TableCell from "@material-ui/core/TableCell";
import MenuItem from "@material-ui/core/MenuItem";
import TableRow from "@material-ui/core/TableRow";
-import TextField from "@material-ui/core/TextField";
import IconButton from "@material-ui/core/IconButton";
import { Button, Paper, Grid } from "@material-ui/core";
import CircularProgress from "@material-ui/core/CircularProgress";
@@ -329,23 +328,24 @@ const Collections = () => {
justify="space-between"
>
<Grid item>
- <TextField
- select
- label="Filtro"
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Filtro"
value={option}
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {privacyOptions.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={privacyOptions.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
<Grid item>
@@ -491,23 +491,24 @@ const Collections = () => {
justify="space-between"
>
<Grid item>
- <TextField
- select
- label="Filtro"
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Filtro"
value={option}
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {privacyOptions.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={privacyOptions.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
<Grid item>
diff --git a/src/Admin/Pages/Pages/SubPages/Complaints.js b/src/Admin/Pages/Pages/SubPages/Complaints.js
index b323b27f842807908d039a46993af4f01f90103e..64c4693939f6d1c4a7024e2c5a03600d6ccfed7a 100644
--- a/src/Admin/Pages/Pages/SubPages/Complaints.js
+++ b/src/Admin/Pages/Pages/SubPages/Complaints.js
@@ -36,7 +36,6 @@ import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import MenuItem from "@material-ui/core/MenuItem";
import TableRow from "@material-ui/core/TableRow";
-import TextField from "@material-ui/core/TextField";
import IconButton from "@material-ui/core/IconButton";
import { Button, Paper, Grid } from "@material-ui/core";
import CircularProgress from "@material-ui/core/CircularProgress";
@@ -332,42 +331,44 @@ const Complaints = () => {
xs={12}
>
<Grid item>
- <TextField
- select
- label="Motivo"
- value={complainOption}
- onChange={handleChangeComplain}
- helperText="Por favor, selecione uma das opções"
- >
- {ComplaintReasons.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Motivo"
+ value={complainOption}
+ handleChange={handleChangeComplain}
+ help="Por favor, selecione uma das opções"
+ items={ComplaintReasons.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
<Grid item>
- <TextField
- select
- label="Estado"
- value={stateOption}
- onChange={handleChangeState}
- helperText="Por favor, selecione uma das opções"
- >
- {stateOptions.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Estado"
+ value={stateOption}
+ handleChange={handleChangeState}
+ help="Por favor, selecione uma das opções"
+ items={stateOptions.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
<Grid item>
<FormInput
@@ -500,42 +501,44 @@ const Complaints = () => {
xs={12}
>
<Grid item>
- <TextField
- select
- label="Motivo"
- value={complainOption}
- onChange={handleChangeComplain}
- helperText="Por favor, selecione uma das opções"
- >
- {ComplaintReasons.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Motivo"
+ value={complainOption}
+ handleChange={handleChangeComplain}
+ help="Por favor, selecione uma das opções"
+ items={ComplaintReasons.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
<Grid item>
- <TextField
- select
- label="Estado"
- value={stateOption}
- onChange={handleChangeState}
- helperText="Por favor, selecione uma das opções"
- >
- {stateOptions.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Estado"
+ value={stateOption}
+ handleChange={handleChangeState}
+ help="Por favor, selecione uma das opções"
+ items={stateOptions.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
<Grid item>
<FormInput
diff --git a/src/Components/FormInput.js b/src/Components/FormInput.js
index e1f7cef11c7b00e5650b79994d8cca60a4387e4f..d6dda2b5788e6c4b312b6129bb812f542f6c0417 100644
--- a/src/Components/FormInput.js
+++ b/src/Components/FormInput.js
@@ -122,6 +122,7 @@ export default function FormInput(props) {
contrast={props.contrast}
key={props.key}
label={props.placeholder}
+ placeholder={props.placeholder}
select={props.selectable ? props.selectable : false}
disabled={props.disableField}
margin="normal"
@@ -143,6 +144,9 @@ export default function FormInput(props) {
helperText={props.help}
mask={props.mask}
multiline={props.multi}
- />
+ >
+
+ {props.items}
+ </StyledTextField>
);
}