import React, {useState} from 'react'

import { Textarea } from 'playbook-ui'

const TextareaDefault = (props) => {
  const [value, setValue] = useState('Default value text')
  const handleChange = (event) => {
    setValue(event.target.value)
  }
  return (
    <div>
      <Textarea
          label="Label"
          rows={4}
      />

      <br />

      <Textarea
          label="Label"
          placeholder="Placeholder text"
      />

      <br />

      <Textarea
          label="Label"
          name="comment"
          onChange={(e) => handleChange(e)}
          placeholder="Placeholder text"
          value={value}
      />

    </div>
  )
}

export default TextareaDefault

import React from 'react'

import { Textarea } from 'playbook-ui'

const TextareaCustom = (props) => {
  return (
    <div>
      <Textarea
          label="Label"
      >
        <textarea
            className="my_custom_class"
            name="custom_textarea"
            rows={4}
        >
          {'Content goes here.'}
        </textarea>
      </Textarea>
    </div>
  )
}

export default TextareaCustom

import React from 'react'

import { Textarea } from 'playbook-ui'

const TextareaResize = (props) => {
  return (
    <div>
      <Textarea
          label="auto"
          placeholder="Resize Auto"
          resize="auto"
      />

      <br />

      <Textarea
          label="vertical"
          placeholder="Resize Vertical"
          resize="vertical"
      />

      <br />

      <Textarea
          label="both"
          placeholder="Resize Both"
          resize="both"
      />

      <br />

      <Textarea
          label="horizontal"
          placeholder="Resize Horizontal"
          resize="horizontal"
      />
    </div>
  )
}

export default TextareaResize

import React, {useState} from 'react'

import { Textarea, Icon } from 'playbook-ui'

const TextareaError = (props) => {
  const [value, setValue] = useState('default value text')
  const handleChange = (event) => {
    setValue(event.target.value)
  }
  const error = (
    <>
        <Icon icon="warning" /> This field has an error!
    </>
  )
  return (
    <div>
      <Textarea
          error={error}
          label="Label"
          name="comment"
          onChange={(e)=> handleChange(e)}
          placeholder="Placeholder text"
          value={value}
      />

    </div>
  )
}

export default TextareaError

import React, { useState } from 'react'

import { Textarea } from 'playbook-ui'

const TextareaCharacterCounter = (props) => {
  const [value1, setValue1] = useState('Counting characters!')
  const [value2, setValue2] = useState('This counter prevents the user from exceeding the maximum number of allowed characters. Just try it!')
  const [value3, setValue3] = useState('This counter alerts the user that they have exceeded the maximum number of allowed characters.')
  const [error, setError] = useState('Too many characters!')
  const [count1, setCount1] = useState(0)
  const [count2, setCount2] = useState(value1.length)
  const [count3, setCount3] = useState(value2.length)
  const [count4, setCount4] = useState(value3.length)

  const handleMaxCount = (event) => {
    setCount2(event.target.value.length)
    setValue1(event.target.value)
  }

  const handleMaxCountWithBlocker = (event, maxCharacters) => {
    if (event.target.value.length <= maxCharacters) {
      setCount3(event.target.value.length)
      setValue2(event.target.value)
    }
  }

  const handleMaxCountWithError = (event, maxCharacters) => {
    if (event.target.value.length > maxCharacters) {
      setError('Too many characters!')
    } else {
      setError('')
    }

    setCount4(event.target.value.length)
    setValue3(event.target.value)
  }

  return (
    <>
      <Textarea
          characterCount={count1}
          label="Count Only"
          onChange={(event) => setCount1(event.target.value.length)}
          rows={4}
      />

      <br />

      <Textarea
          characterCount={count2}
          label="Max Characters"
          maxCharacters="100"
          onChange={() => handleMaxCount(event)}
          rows={4}
          value={value1}
      />

      <br />

      <Textarea
          characterCount={count3}
          label="Max Characters w/ Blocker"
          maxCharacters="100"
          onChange={() => handleMaxCountWithBlocker(event, 100)}
          rows={4}
          value={value2}
      />

      <br />

      <Textarea
          characterCount={count4}
          error={error}
          label="Max Characters w/ Error"
          maxCharacters="75"
          onChange={() => handleMaxCountWithError(event, 75)}
          rows={4}
          value={value3}
      />
    </>
  )
}

export default TextareaCharacterCounter

import React, { useState } from 'react'

import { Textarea } from 'playbook-ui'

const TextareaInline = (props) => {
  const [value, setValue] = useState('Try clicking into this text.')
  const handleChange = (event) => {
    setValue(event.target.value)
  }
  return (
    <div>
      <Textarea
          inline
          onChange={(e) => handleChange(e)}
          resize="auto"
          rows={1}
          value={value}
      />
    </div>
  )
}

export default TextareaInline

import React, { useState } from 'react'

import { Textarea } from 'playbook-ui'

const TextareaEmojiMask = (props) => {
  const [basicValue, setBasicValue] = useState('')

  return (
    <div>
      <Textarea
          emojiMask
          label="Emoji Mask"
          onChange={({ target }) => setBasicValue(target.value)}
          placeholder="Try typing or pasting emojis..."
          value={basicValue}
      />
    </div>
  )
}

export default TextareaEmojiMask