@shakthillc/components/es/TextBox/TextBox.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 './TextBox.module.css';

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

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

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

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

  _createClass(TextBox, [{
    key: 'onChange',
    value: function onChange(e) {
      this.setState({
        value: e.target.value
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          type = _props.type,
          disabled = _props.disabled,
          size = _props.size,
          placeholder = _props.placeholder,
          dataId = _props.dataId;
      var value = this.state.value;

      return React.createElement('input', {
        className: '' + style[size.toLowerCase()],
        'data-id': dataId,
        disabled: disabled,
        value: value,
        placeholder: placeholder,
        type: type,
        onChange: this.onChange
      });
    }
  }]);

  return TextBox;
}(React.Component);

export default TextBox;


TextBox.defaultProps = {
  size: 'medium',
  value: 'Text Box',
  disabled: false,
  dataId: 'textBoxComp',
  type: 'text',
  placeholder: 'Text Box Place Holder'
};
TextBox.propTypes = {
  dataId: PropTypes.string,
  disabled: PropTypes.bool,
  onClick: PropTypes.func,
  type: PropTypes.oneOf(['text', 'password', 'number']),
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  value: PropTypes.string,
  placeholder: PropTypes.string
};