Text Input

import React, { useState } from 'react'

import Caption from '../../pb_caption/_caption'
import TextInput from '../../pb_text_input/_text_input'
import Title from '../../pb_title/_title'

const TextInputDefault = (props) => {
  const handleOnChangeFirstName = ({ target }) => {
    setFirstName(target.value)
  }
  const ref = React.createRef()

  const [firstName, setFirstName] = useState('')
  const [formFields, setFormFields] = useState({
    firstName: 'Jane',
    lastName: 'Doe',
    phone: '8888888888',
    email: 'jane@doe.com',
    zip: 55555,
  })

  const handleOnChangeFormField =  ({ target }) => {
    const { name, value } = target
    setFormFields({ ...formFields, [name]: value })
  }

  return (
    <div>
      <TextInput
          aria={{ label: 'hello' }}
          data={{ say: 'hi', yell: 'go' }}
          id="unique-id"
          label="First Name"
          name="firstName"
          onChange={handleOnChangeFormField}
          placeholder="Enter first name"
          value={formFields.firstName}
          {...props}
      />
      <TextInput
          label="Last Name"
          name="lastName"
          onChange={handleOnChangeFormField}
          placeholder="Enter last name"
          value={formFields.lastName}
          {...props}
      />
      <TextInput
          label="Phone Number"
          name="phone"
          onChange={handleOnChangeFormField}
          placeholder="Enter phone number"
          type="phone"
          value={formFields.phone}
          {...props}
      />
      <TextInput
          label="Email Address"
          name="email"
          onChange={handleOnChangeFormField}
          placeholder="Enter email address"
          type="email"
          value={formFields.email}
          {...props}
      />
      <TextInput
          label="Zip Code"
          name="zip"
          onChange={handleOnChangeFormField}
          placeholder="Enter zip code"
          type="number"
          value={formFields.zip}
          {...props}
      />

      <br />
      <br />

      <Title>{'Event Handler Props'}</Title>

      <br />
      <Caption>{'onChange'}</Caption>

      <br />

      <TextInput
          label="First Name"
          onChange={handleOnChangeFirstName}
          placeholder="Enter first name"
          ref={ref}
          value={firstName}
          {...props}
      />

      <If condition={firstName !== ''}>
        {`First name is: ${firstName}`}
      </If>
    </div>
  )
}

export default TextInputDefault

import React, { useState } from 'react'

import TextInput from '../_text_input'

const TextInputError = (props) => {
  const [email, setEmail] = useState('')

  const handleUpdateEmail = ({ target }) => {
    setEmail(target.value)
  }
  return (
    <div>
      <TextInput
          addOn={{ icon: 'user', alignment: 'left', border: true }}
          error="Please enter a valid email address"
          label="Email Address"
          onChange={handleUpdateEmail}
          placeholder="Enter email address"
          type="email"
          value={email}
          {...props}
      />
      <TextInput
          addOn={{ icon: 'user', alignment: 'left', border: true }}
          label="Confirm Email Address"
          onChange={handleUpdateEmail}
          placeholder="Confirm email address"
          type="email"
          value={email}
          {...props}
      />
    </div>
  )
}
export default TextInputError

import React, { useState } from 'react'

import TextInput from '../_text_input'

const TextInputCustom = (props) => {
  const [name, setName] = useState('')
  const handleUpdateName = ({ target }) => {
    setName(target.value)
  }
  return (
    <div>
      <TextInput
          label="Custom Label"
          {...props}
      >
        <input
            name="custom-name"
            onChange={handleUpdateName}
            placeholder="custom-placeholder"
            type="text"
            value={name}
            {...props}
        />
      </TextInput>
    </div>
  )
}

export default TextInputCustom

import React from 'react'

import TextInput from '../_text_input'

class TextInputDisabled extends React.Component {
  render(props) {
    return (
      <div>
        <TextInput
            disabled
            label="Last Name"
            placeholder="Enter last name"
            {...props}
        />
      </div>
    )
  }
}

export default TextInputDisabled

import React, { useState } from 'react'

import TextInput from '../_text_input'

const TextInputAddOn = (props) => {
  const [defaultInput, setDefaultInput] = useState('')
  const [firstInput, setFirstInput] = useState('')
  const [secondInput, setSecondInput] = useState('')
  const [thirdInput, setThirdInput] = useState('')
  const [fourthInput, setFourthInput] = useState('')

  const handleUpdateDefaultInput = ({ target }) => {
    setDefaultInput(target.value)
  }

  const handleUpdateFirstInput = ({ target }) => {
    setFirstInput(target.value)
  }

  const handleUpdateSecondInput = ({ target }) => {
    setSecondInput(target.value)
  }

  const handleUpdateThirdInput = ({ target }) => {
    setThirdInput(target.value)
  }

  const handleUpdateFourthInput = ({ target }) => {
    setFourthInput(target.value)
  }

  return (
    <>
      <div>
        <TextInput
            addOn={{ icon: 'bat' }}
            label="Add On With Defaults"
            onChange={handleUpdateDefaultInput}
            value={defaultInput}
            {...props}
        />
      </div>
      <div>
        <TextInput
            addOn={{ icon: 'user', alignment: 'right', border: true }}
            label="Right-Aligned Add On With Border"
            onChange={handleUpdateFirstInput}
            value={firstInput}
            {...props}
        />
      </div>
      <div>
        <TextInput
            addOn={{ icon: 'percent', alignment: 'right', border: false }}
            label="Right-Aligned Add On With No Border"
            onChange={handleUpdateThirdInput}
            value={thirdInput}
            {...props}
        />
      </div>
      <div>
        <TextInput
            addOn={{ icon: 'percent', alignment: 'left', border: false }}
            label="Left-Aligned Add On With No Border"
            onChange={handleUpdateSecondInput}
            value={secondInput}
            {...props}
        />
      </div>
      <div>
        <TextInput
            addOn={{ icon: 'percent', alignment: 'left', border: true }}
            label="Left-Aligned Add On With Border"
            onChange={handleUpdateFourthInput}
            value={fourthInput}
            {...props}
        />
      </div>
    </>
  )
}

export default TextInputAddOn

import React, { useState } from 'react'

import TextInput from '../_text_input'

const TextInputInline = (props) => {
  const [value, setValue] = useState('Inline Input')
  const handleValueChange = ({ target }) => {
    setValue(target.value)
  }
  return (
    <div>
      <TextInput
          inline
          label="Hover Over Text Below"
          onChange={handleValueChange}
          value={value}
          {...props}
      />
    </div>
  )
}

export default TextInputInline