@eureca/eureca-ui/src/components/Inputs/text-input.js

UI component library of Eureca's user and admin apps

import React from 'react';
import PropTypes from 'prop-types';

import { makeStyles } from '@material-ui/core/styles';
import { TextField } from '@material-ui/core';

import { colors } from '../../theme/colors';

const useStyles = makeStyles({
  helperText: {
    color: colors.gray3,
    letterSpacing: 'normal',
    fontWeight: 300,
  },
  input: {
    color: colors.gray2,
    marginTop: 0,
  },
  labelRoot: {
    color: colors.gray2,
  },
  labelShrink: {
    color: colors.gray3,
  },
});

function TextInput(props) {
  const classes = useStyles(props);
  return (
    <TextField
      variant="outlined"
      fullWidth
      {...props}
      InputProps={{ classes: { root: classes.input }, ...props.InputProps }}
      InputLabelProps={{
        classes: { root: classes.labelRoot, shrink: classes.labelShrink },
        ...props.InputLabelProps,
      }}
      FormHelperTextProps={{
        classes: { root: classes.helperText },
        ...props.FormHelperTextProps,
      }}
    />
  );
}

TextInput.propTypes = {
  name: PropTypes.string,
  label: PropTypes.string,
  helperText: PropTypes.string,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  onChange: PropTypes.func.isRequired,
};

export { TextInput };