@shakthillc/components/src/InputText/InputText.js

React generic components for shakthi products

import React from "react";
import PropTypes from "prop-types";
import style from "./InputText.module.css";
import Icon from "@material-ui/core/Icon";
export default class InputText extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      passwordIcon: "visibility",
      passwordField: "password",
    };
    this.onChange = this.onChange.bind(this);
    this.handleFocus = this.handleFocus.bind(this);
    this.handleBlur = this.handleBlur.bind(this);
    this.handleIcon = this.handleIcon.bind(this);
  }

  componentDidMount() {
    this.setState({
      value: this.props.value,
    });
  }

  onChange(e) {
    let { onKeyup } = this.props;
    this.setState({ value: e.target.value });
    onKeyup && onKeyup(e.target.value);
  }
  handleFocus(e) {
    let { onFocus } = this.props;
    //console.log("Focus",e.target.value)
    onFocus && onFocus(e.target.value);
  }
  handleBlur(e) {
    let { onBlur } = this.props;
    //console.log("blur",e.target.value)
    onBlur && onBlur(e.target.value);
  }
  handleIcon() {
    let passwordIcon =
      this.state.passwordIcon === "visibility_off"
        ? "visibility"
        : "visibility_off";
    let passwordField = passwordIcon === "visibility" ? "password" : "text";
    this.setState({ passwordIcon, passwordField });
  }
  render() {
    const { passwordIcon, passwordField } = this.state;
    let {
      placeHolder = "Enter text",
      isMandatory = false,
      label,
      help,
      icon,
      type = "text",
      onChange,
      value,
      icon_position,
      readOnly = false,
      id = "defaultTextId",
    } = this.props;
    let text_style = "input-area__icon--" + icon_position + readOnly;
    let text_stylemain = readOnly ? "input-area__readonly" : "input-area";
    let borderStyle = isMandatory == true ? style["input-enableborder"] : "";
    if (type === "password") {
      return (
        <div className={style["input-holder"]}>
          {label && (
            <p data-id={"label" + id} className={style["input-holder__header"]}>
              {label}
            </p>
          )}
          <div>
            <div style={{ position: "relative" }}>
              <i
                onClick={this.handleIcon}
                className={style["input-holder__icon--right"]}
              >
                <Icon style={{ fontSize: 18 }}>{passwordIcon}</Icon>
              </i>

              <input
                type={passwordField}
                onFocus={this.handleFocus}
                onBlur={this.handleBlur}
                onChange={onChange || this.onChange}
                style={this.props.style}
                className={
                  icon === undefined
                    ? style[text_stylemain] + " " + borderStyle
                    : style[text_style] + " " + borderStyle
                }
                placeholder={placeHolder}
                value={
                  value === undefined || value === null
                    ? this.state.value
                    : value
                }
                readOnly={readOnly}
                data-id={id}
              />
            </div>
            {help && (
              <p
                data-id={"error" + id}
                className={
                  isMandatory === true
                    ? style["input-holder__helper--red"]
                    : style["input-holder__helper"]
                }
              >
                {help}
              </p>
            )}
          </div>
        </div>
      );
    } else {
      return (
        <div className={style["input-holder"]}>
          {label && (
            <p data-id={"label" + id} className={style["input-holder__header"]}>
              {label}
            </p>
          )}
          <div style={{ position: "relative" }}>
            {icon && (
              <i
                className={
                  icon_position === "right"
                    ? style["input-holder__icon--right"]
                    : style["input-holder__icon"]
                }
              >
                <Icon style={{ fontSize: 18 }}>{icon}</Icon>
              </i>
            )}

            <input
              type={type}
              onFocus={this.handleFocus}
              onBlur={this.handleBlur}
              onChange={onChange || this.onChange}
              style={this.props.style}
              //style={isMandatory === true ? { border: "solid 2px #FA383E" } : {}}
              className={
                icon === undefined
                  ? style[text_stylemain] + " " + borderStyle
                  : style[text_style] + " " + borderStyle
              }
              placeholder={placeHolder}
              value={
                value === undefined || value === null ? this.state.value : value
              }
              readOnly={readOnly}
              data-id={id}
            />
          </div>
          {help && (
            <p
              data-id={"error" + id}
              className={
                isMandatory === true
                  ? style["input-holder__helper--red"]
                  : style["input-holder__helper"]
              }
            >
              {help}
            </p>
          )}
        </div>
      );
    }
  }
}

InputText.propTypes = {
  placeHolder: PropTypes.string,
  label: PropTypes.string,
  help: PropTypes.string,
  icon: PropTypes.string,
  value: PropTypes.string,
  onKeyup: PropTypes.func,
  isMandatory: PropTypes.bool,
};

InputText.defaultProps = {
  icon_position: "left",
  placeHolder: "Enter text",
  isMandatory: false,
  type: "text",
  onKeyup: function () {
    //console.log("keyup");
  },
};