trampa-frontend/src/components/TextFields/TextField/TextField.js

import React, { useEffect, useRef, useState } from "react";
import { TextFieldContainer, TextFieldStyled } from "./TextField.styled";
import PropTypes from "prop-types";

export const TextField = (props) => {
  const [isFieldEmpty, setIsFieldEmpty] = useState(true);

  //  for italicPlaceholder
  useEffect(() => {
    if (props?.value?.length === 0) {
      setIsFieldEmpty(true);
    } else {
      setIsFieldEmpty(false);
    }
  }, [props.value]);
  const textInputRef = useRef();

  return (
    <TextFieldContainer
      style={props.containerStyle}
      className={props.className}
      height={props.height}
    >
      <TextFieldStyled
        placeholder={props.placeholder}
        width={props.width}
        height={props.height}
        id={props.id}
        name={props.name}
        value={props.value}
        onChange={props.onChange}
        error={props.error}
        multiline={props.multiline}
        minRows={props.minRows}
        // helperText={props.helperText}
        autoFocus={props.autoFocus}
        fullWidth={props.fullWidth}
        type={props.type}
        textsize={props.textsize}
        font={props.font}
        InputProps={props.InputProps}
        sx={props.style}
        label={props.showAnimation ? props.placeholder : ""}
        
        
        italicplaceholder={(props.italicPlaceholder && isFieldEmpty) ? "true" : "false"}
        ref={textInputRef}
        focused={props.focused}
      >
        {props.children}
      </TextFieldStyled>
    </TextFieldContainer>
  );
};

TextField.propTypes = {
  history: PropTypes.shape({
    replace: PropTypes.func,
    push: PropTypes.func,
    location: PropTypes.shape({
      pathname: PropTypes.string,
    }),
  }),
  children: PropTypes.node,
  className: PropTypes.string,
  placeholder: PropTypes.string,
  style: PropTypes.any,
  showAnimation: PropTypes.bool,
  containerStyle: PropTypes.any,
  italicPlaceholder: PropTypes.bool,
  width: PropTypes.string,
  height: PropTypes.string,
  name: PropTypes.string,
  label: PropTypes.string,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  onChange: PropTypes.func,
  id: PropTypes.number,
  error: PropTypes.bool,
  helperText: PropTypes.string,
  autoFocus: PropTypes.bool,
  fullWidth: PropTypes.bool,
  type: PropTypes.string,
  textsize: PropTypes.string,
  font: PropTypes.string,
  ref: PropTypes.any,
  minRows: PropTypes.number,
  multiline: PropTypes.bool,
  focused: PropTypes.bool,
  InputProps: PropTypes.shape({
    startAdornment: PropTypes.node,
    endAdornment: PropTypes.node,
    style: PropTypes.any,
  }),
};

TextField.defaultProps = {
  italicPlaceholder: false,
  showAnimation: false,
  height: "48px",
  // font: "Open Sans"
};