tin-react-components/src/Input/index.js

All components used for Omadi apps

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import './style.css'

/**
 * Component to allow for basic click actions
 * @author: GENERATED
 */
class Input extends Component {
  constructor (props) {
    super(props)
    this.handleChange = this.handleChange.bind(this)
  }
  componentWillMount () {
    this.setState({
      value: this.props.value
    })
  }
  componentWillReceiveProps (props) {
    this.setState({
      value: props.value
    })
  }
  handleBlur (e) {
    const { onChange, log, allowLogging } = this.props
    if (onChange) {
      onChange(e)
    }
    if (allowLogging && log) {
      log('Input', 'handleBlur', e, 'info')
    }
  }
  handleChange (e) {
    const { log, allowLogging } = this.props
    this.setState({
      value: e.target.value
    })
    if (allowLogging && log) {
      log('Input', 'handleChange', e, 'info')
    }
  }
  render () {
    const { label, children, type = 'text', className } = this.props
    const { value } = this.state
    const classes = classnames('component-wrapper', 'input', className)
    const labelElement = label ? <label>{label}</label> : null
    return (
      <div className={classes}>
        {labelElement}
        <input value={value} onChange={this.handleChange} type={type} />
        {children}
      </div>
    )
  }
}

Input.propTypes = {
  /**
   * Set the type of input
   * @default: text
   * @options: text,password,number,range
   */
  /**
   * Function whose only argument the event
   * as an object with the following argument structure:
   * @structure:
   * {
   *      target: 'ELEMENT
   * }
   */
  onChange: PropTypes.func.isRequired,
  /**
   * Any node or nodes
   */
  children: PropTypes.array,
  /**
   * Label text.
   */
  label: PropTypes.string,
  /**
   * Function that allows for advanced logging.
   * @arguments:
   * [
   *      {
   *          type: 'string',
   *          name: 'componentName',
   *          description: 'Name of component',
   *
   *      },
   *      {
   *          type: 'string',
   *          name: 'methodName',
   *          description: 'Name of method fired',
   *
   *      },
   *      {
   *          type: 'object',
   *          name: 'event',
   *          description: 'The data to be logged',
   *
   *      },
   *      {
   *          type: 'string',
   *          name: 'type',
   *          description: 'Type of log',
   *          options: ['error', 'warning', 'info', 'debug']
   *      }
   * ]
   */
  log: PropTypes.func,
  /**
   * Flag to indicate whether to log events or not
   */
  allowLogging: PropTypes.bool

}

export default Input