curls/dist/es/TextArea/TextArea.js

💪 Responsive, expressive UI primitives for React written with Style Hooks and Emotion

function _extends() {
  _extends =
    Object.assign ||
    function(target) {
      for (var i = 1; i < arguments.length; i++) {
        var source = arguments[i]
        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key]
          }
        }
      }
      return target
    }
  return _extends.apply(this, arguments)
}

import React from 'react'
import {css} from '@emotion/core'
import {useStyles, createElement} from '@style-hooks/core'
import {pushCss} from '../utils'
import {useBox} from '../Box'
import {useText} from '../Text'
import * as styles from './styles'

const defaultStyles = {
    name: '13m8hic',
    styles: 'appearance:none;outline:none;margin:0;',
  },
  autoResize = e => {
    if (!e.target.value) e.target.style.height = ''
    else {
      e.target.style.height = 'auto'
      e.target.style.height = e.target.scrollHeight + 'px'
    }
  }

export const useTextArea = props =>
    useStyles(
      'textArea',
      styles,
      pushCss(
        _extends(
          {
            __textAreaStyles: true,
          },
          props
        ),
        defaultStyles
      )
    ),
  TextArea = React.forwardRef((props, ref) => {
    let nodeProps = useBox(useText(useTextArea(props)))
    nodeProps.ref = ref

    function _ref(e) {
      typeof props.onChange === 'function' && props.onChange(e)
      autoResize(e)
    }

    if (props.autoResize) {
      nodeProps.onChange = _ref
    }

    return createElement('textarea', nodeProps)
  })

if (process.env.NODE_ENV !== 'production') {
  const propTypes = require('./propTypes').default,
    typePropTypes = require('../Text/propTypes').default,
    boxPropTypes = require('../Box/propTypes').default,
    flexPropTypes = require('../Flex/propTypes').default

  TextArea.displayName = 'TextArea'
  TextArea.propTypes = _extends(
    {},
    boxPropTypes,
    flexPropTypes,
    typePropTypes,
    propTypes
  )
}