Contents

/* @flow */

import React from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import {Caption} from '../'

const propTypes = {
  className: PropTypes.string,
  name: PropTypes.string,
  label: PropTypes.string,
  onChange: PropTypes.func,
  placeholder: PropTypes.string,
  type: PropTypes.string,
  value: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.number
  ])
}

const defaultProps = {
  onChange: () => {},
  type: 'text'
}

class TextInput extends React.Component {
  render() {
    const {
      className,
      name,
      label,
      onChange = () => {},
      placeholder,
      type,
      value
    } = this.props

    const css = classnames([
      `pb_text_input_kit`,
      className,
    ])

    return (
      <div className={css}>
        <Caption text={label} />
        <div className='text_input_wrapper'>
          <input className='text_input'
              name={name}
              onChange={onChange}
              placeholder={placeholder}
              type={type}
              value={value}
          />
        </div>
      </div>
    )
  }
}

TextInput.propTypes = propTypes
TextInput.defaultProps = defaultProps

export default TextInput

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
playbook_ui-3.0.1	app/pb_kits/playbook/pb_text_input/_text_input.jsx
playbook_ui-3.0.0	app/pb_kits/playbook/pb_text_input/_text_input.jsx