@shakthillc/components/es/Filter/InputText.js

React generic components for shakthi products

import _Object$getPrototypeOf from "babel-runtime/core-js/object/get-prototype-of";
import _classCallCheck from "babel-runtime/helpers/classCallCheck";
import _createClass from "babel-runtime/helpers/createClass";
import _possibleConstructorReturn from "babel-runtime/helpers/possibleConstructorReturn";
import _inherits from "babel-runtime/helpers/inherits";
import React from "react";
import PropTypes from "prop-types";
import style from "./InputText.module.css";
import user_profile from "../icons/user_profile.svg";

var InputText = function (_React$Component) {
  _inherits(InputText, _React$Component);

  function InputText(props) {
    _classCallCheck(this, InputText);

    var _this = _possibleConstructorReturn(this, (InputText.__proto__ || _Object$getPrototypeOf(InputText)).call(this, props));

    _this.state = { value: "" };
    _this.onChange = _this.onChange.bind(_this);
    return _this;
  }

  _createClass(InputText, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.setState({
        value: this.props.value
      });
    }
  }, {
    key: "onChange",
    value: function onChange(e) {
      var onKeyup = this.props.onKeyup;

      this.setState({
        value: e.target.value
      });
      onKeyup && onKeyup(e.target.value);
    }
  }, {
    key: "render",
    value: function render() {
      var _props = this.props,
          _props$placeHolder = _props.placeHolder,
          placeHolder = _props$placeHolder === undefined ? "Enter text" : _props$placeHolder,
          _props$isMandatory = _props.isMandatory,
          isMandatory = _props$isMandatory === undefined ? false : _props$isMandatory,
          label = _props.label,
          help = _props.help,
          icon = _props.icon,
          _props$type = _props.type,
          type = _props$type === undefined ? "text" : _props$type,
          onChange = _props.onChange,
          value = _props.value;


      return React.createElement(
        "div",
        { className: style["input-icons"] },
        React.createElement(
          "p",
          { className: style["header"] },
          label
        ),
        React.createElement(
          "i",
          {
            className: icon === undefined ? style["display-none"] : style["icon"]
          },
          React.createElement("img", { src: user_profile, alt: "user_profile" })
        ),
        React.createElement("input", {
          type: type,
          onChange: onChange || this.onChange,
          style: isMandatory === "true" ? { border: "solid 2px #FA383E" } : {},
          className: icon === undefined ? style["inputArea"] : style["inputArea-icon"],
          placeholder: placeHolder,
          value: value || this.state.value
        }),
        React.createElement(
          "p",
          {
            className: help === undefined ? style["display-none"] : style["helper"]
          },
          help
        )
      );
    }
  }]);

  return InputText;
}(React.Component);

export default InputText;


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 = {
  placeHolder: "Enter text",
  value: "",
  isMandatory: false,
  type: "text",
  onKeyup: function onKeyup() {
    //console.log("keyup");
  }
};