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

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

import React from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['resizeX', 'resizeY', 'noresize', 'resizeboth', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'default', 'primary'] }] */

import style from "./Textarea.module.css";
export default class Textarea extends React.Component {
  constructor(props) {
    super(props);
    this.onChange = this.onChange.bind(this);
    this.onKeyDown = this.onKeyDown.bind(this);
    this.onBlur = this.onBlur.bind(this);
  }

  onChange(e) {
    e && e.preventDefault();
    let {
      onChange
    } = this.props;
    onChange && onChange(e.target.value, e);
  }

  onBlur(e) {
    e && e.preventDefault();
    let {
      onBlur
    } = this.props;
    onBlur && onBlur(e.target.value, e);
  }

  onKeyDown(e) {
    let {
      onKeyDown
    } = this.props;
    onKeyDown && onKeyDown(e);
  }

  render() {
    let {
      size,
      placeHolder,
      needBorder,
      text,
      isDisabled,
      resize,
      maxLength,
      animated,
      variant,
      getRef,
      onFocus,
      dataId,
      dataSelectorId,
      isReadOnly,
      needAppearance,
      needReadOnlyStyle,
      borderColor,
      needEffect,
      autoFocus,
      htmlId,
      a11y,
      customClass,
      isFocus,
      rows,
      cols,
      customAttributes
    } = this.props;
    let {
      ariaLabel,
      ariaLabelledby
    } = a11y;
    let resizes = {
      horizontal: 'resizeX',
      vertical: 'resizeY',
      both: 'resizeboth',
      none: 'noresize'
    };
    let options = {};

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

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

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

    const isEditable = !(isReadOnly || isDisabled);
    let classList = needAppearance ? `${style.container} ${size !== 'default' ? style[size] : ''} ${!rows && size === 'default' ? style.defaultHeight : ''} ${!cols ? style.defaultWidth : ''} ${style[variant]} ${needBorder ? style.needBorder : style.noBorder} ${resize ? style[resizes[resize]] : style[resizes.none]}  ${animated && size !== 'default' ? `${style[`${size}animated`]}` : ''}   ${isDisabled && !needEffect || isReadOnly && !needEffect ? '' : style.effect} ${isEditable && isFocus ? style.active : ''}` : `${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,
      "data-id": dataId,
      "data-test-id": dataId,
      maxLength: maxLength,
      onChange: this.onChange,
      onKeyDown: this.onKeyDown,
      onFocus: onFocus,
      onBlur: this.onBlur,
      ref: getRef,
      value: text,
      id: htmlId,
      "data-selector-id": dataSelectorId,
      rows: rows,
      cols: cols,
      ...customAttributes
    });
  }

}
Textarea.defaultProps = defaultProps;
Textarea.propTypes = propTypes; // if (__DOCS__) {
//   Textarea.docs = {
//     componentGroup: 'Form Elements',
//     folderName: 'Style Guide',
//     external: true,
//     description: ' '
//   };
// }