@shakthillc/components/src/TextBox/TextBox.js

React generic components for shakthi products

import React from 'react';
import PropTypes from 'prop-types';
import style from './TextBox.module.css';
export default class TextBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: props.value
    };
    this.onChange = this.onChange.bind(this);
  }

  onChange(e) {
    this.setState({
      value: e.target.value
    });
  }

  render() {
    let { type, disabled, size, placeholder, dataId } = this.props;
    let { value } = this.state;
    return (
      <input
        className={`${style[size.toLowerCase()]}`}
        data-id={dataId}
        disabled={disabled}
        value={value}
        placeholder={placeholder}
        type={type}
        onChange={this.onChange}
      />
    );
  }
}

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
};