@fluent-windows/core/es/Input/components/TextArea.js

React components that inspired by Microsoft's Fluent Design System.

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 * as React from 'react';
import classNames from 'classnames';
import { createUseStyles } from '@fluent-windows/styles';
import { styles } from './TextArea.styled';
import { TextAreaPropTypes } from './TextArea.type';
import FormLabel from '../../FormLabel';
import { toUpperCase } from '../../utils';
export const name = 'TextArea';
const useStyles = createUseStyles(styles, {
  name
});
const TextArea = React.forwardRef((props, ref) => {
  const {
    className: classNameProp,
    style,
    value,
    onChange,
    onFocus,
    onBlur,
    label,
    placeholder,
    disabled,
    error,
    ghost,
    resize = 'both',
    ...rest
  } = props;
  const [_value, _setValue] = React.useState(value);
  const handleChange = React.useCallback(e => {
    onChange && onChange(e ? e.target.value : '');

    _setValue(e ? e.target.value : '');
  }, [onChange]);

  const _label = React.useMemo(() => label ? toUpperCase(label) : '', [label]);

  const [focus, setFocus] = React.useState(false);
  const handleFocus = React.useCallback(e => {
    typeof onFocus === 'function' && onFocus(e);
    setFocus(true);
  }, [onFocus]);
  const handleBlur = React.useCallback(e => {
    typeof onBlur === 'function' && onBlur(e);
    setFocus(false);
  }, [onBlur]);
  const classes = useStyles({ ...props,
    focus,
    _value
  });
  const wrapperClassName = classNames(classes.wrapper, {
    [classes.disabled]: disabled
  });
  const className = classNames(classes.root, {
    [classes.error]: error,
    [classes.ghost]: ghost,
    [classes.resize]: !!resize
  }, classNameProp);
  return React.createElement(FormLabel, {
    className: wrapperClassName,
    label: _label,
    style: style
  }, React.createElement("textarea", _extends({
    className: className,
    ref: ref,
    value: value,
    onChange: handleChange,
    onFocus: handleFocus,
    onBlur: handleBlur,
    placeholder: placeholder,
    disabled: disabled
  }, rest)));
});
TextArea.displayName = `F${name}`;
TextArea.propTypes = TextAreaPropTypes;
TextArea.defaultProps = {
  resize: 'both'
};
export default TextArea;