@zohodesk/components/es/v1/Textarea/Textarea.js

In this Package, we Provide Some Basic Components to Build Web App

import React, { useRef } from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import style from "../../Textarea/Textarea.module.css";
export default function Textarea(props) {
  let {
    size,
    placeHolder,
    needBorder,
    text,
    isDisabled,
    resize,
    maxLength,
    animated,
    variant,
    getRef,
    onFocus,
    dataId,
    dataSelectorId,
    isReadOnly,
    needAppearance,
    needReadOnlyStyle,
    borderColor,
    needEffect,
    autoFocus,
    htmlId,
    a11y,
    customClass,
    onChange,
    onBlur,
    onKeyDown
  } = props;
  let {
    ariaLabel,
    ariaLabelledby
  } = a11y;

  const handleChange = e => {
    e && e.preventDefault();
    onChange && onChange(e.target.value, e);
  };

  const handleBlur = e => {
    e && e.preventDefault();
    onBlur && onBlur(e.target.value, e);
  };

  const handleKeyDown = e => {
    onKeyDown && onKeyDown(e);
  };

  let resizes = useRef({
    horizontal: 'resizeX',
    vertical: 'resizeY',
    both: 'resizeboth',
    none: 'noresize'
  });
  let options = useRef({});

  if (isReadOnly) {
    options.current.readOnly = 'readOnly';
  }

  if (isDisabled) {
    options.current.disabled = 'disabled';
  }

  if (autoFocus) {
    options.current.autoFocus = true;
  }

  let classList = needAppearance ? `${style.container} ${style[size]} ${style[variant]} ${needBorder ? style.needBorder : style.noBorder} ${resize ? style[resizes.current[resize]] : style[resizes.current.none]}  ${animated ? `${style[`${size}animated`]}` : ''} ${isDisabled && !needEffect || isReadOnly && !needEffect ? '' : style.effect}` : `${style.basic}`;
  return /*#__PURE__*/React.createElement("textarea", {
    "aria-label": ariaLabel,
    "aria-labelledby": ariaLabelledby,
    className: `${customClass} ${isReadOnly && needReadOnlyStyle ? style.readonly : ''} ${classList} ${style[`borderColor_${borderColor}`]}`,
    placeholder: placeHolder,
    ...options.current,
    "data-id": dataId,
    "data-test-id": dataId,
    maxLength: maxLength,
    onChange: handleChange,
    onKeyDown: handleKeyDown,
    onFocus: onFocus,
    onBlur: handleBlur,
    ref: getRef,
    value: text,
    id: htmlId,
    "data-selector-id": dataSelectorId
  });
}
Textarea.defaultProps = defaultProps;
Textarea.propTypes = propTypes; // if (__DOCS__) {
//   Textarea.docs = {
//     componentGroup: 'Form Elements',
//     folderName: 'Style Guide',
//     external: true,
//     description: ' '
//   };
// }