FormInput.js

/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
Departamento de Informatica - Universidade Federal do Parana

This file is part of Plataforma Integrada MEC.

Plataforma Integrada MEC is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Plataforma Integrada MEC is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/

import React from "react";
import { makeStyles } from "@material-ui/styles";
import styled from "styled-components";
import TextField from "@material-ui/core/TextField";

const StyledTextField = styled(TextField)`
    max-width: 100%;
    font-size : 15px;
    font-weight : lighter;
    color : white;
    width : 100% !important;
    width : 100% !important;

    .MuiOutlinedInput-root {
        /* &.Mui-focused.Mui-error fieldset{
            border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
        }

        &.Mui-error fieldset{
            border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
        } */

        &.Mui-focused fieldset {
            border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
        }
        fieldset {
            border-color: ${props => props.contrast === "" ? "#666" : "white"};
        }
    }

    label{
        color: ${props => props.contrast === "" ? "#666" : "white"};
    }

    label.Mui-focused {
        color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
    }

    label.Mui-focused.Mui-error {
        color: red;
    }

    /* label.Mui-error {
        color: ${props => props.contrast === "" ? "red" : "#e75480"};
    } */
`

const useStyles = makeStyles(theme => ({
    container: {
        display: "flex",
        flexWrap: "wrap",
        padding: "2px"
    },
    darkTextField: {
        maxWidth: "100%",
        fontSize: "15px",
        fontWeight: "lighter",
        color: "white",
        width: "100%"
    },
    lightTextField: {
        maxWidth: "100%",
        fontSize: "15px",
        fontWeight: "lighter",
        color: "black",
        width: "100%"
    }
}));

export default function FormInput(props) {
    const classes = useStyles();

    return (
        <StyledTextField
            contrast={props.contrast}
            label={props.placeholder}
            margin="normal"
            id={props.id}
            name={props.name}
            type={props.inputType}
            value={props.value}
            onChange={props.handleChange}
            onKeyDown={props.onKeyDown}
            variant="outlined"
            rows={props.rows}
            error={props.error}
            rowsMax={props.rowsMax}
            InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
            required={props.required}
            // helperText={<span style={props.contrast === "" ? { color: "red" } : { color: "#e75480" }}>{props.help}</span>}
            helperText={props.help}
            style={{ width: "100%" }}
            mask={props.mask}
            multiline={props.multi}
        />
    );
}