@chayns-components/core/lib/esm/components/text-area/TextArea.js

A set of beautiful React components for developing your own applications with chayns.

import { c as _c } from "react-compiler-runtime";
import React, { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
import { AreaContext } from '../area-provider/AreaContextProvider';
import { StyledInputRightElement } from '../input/Input.styles';
import { StyledRightElementWrapper, StyledTextArea, StyledTextAreaContent, StyledTextAreaContentWrapper, StyledTextAreaInput, StyledTextAreaLabel, StyledTextAreaLabelWrapper } from './TextArea.styles';
import { useCursorRepaint } from '../../hooks/resize';
import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
const TextArea = /*#__PURE__*/forwardRef((t0, ref) => {
  "use memo";

  const $ = _c(29);
  const {
    isDisabled,
    isInvalid,
    placeholder,
    value,
    onChange,
    onFocus,
    onKeyDown,
    rightElement,
    onBlur,
    maxHeight: t1,
    minHeight: t2,
    colors,
    shouldEnableKeyboardHighlighting
  } = t0;
  const maxHeight = t1 === undefined ? "120px" : t1;
  const minHeight = t2 === undefined ? "41px" : t2;
  const [isOverflowing, setIsOverflowing] = useState(false);
  const areaProvider = useContext(AreaContext);
  const textareaRef = useRef(null);
  useCursorRepaint(textareaRef);
  const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;
  const shouldChangeColor = areaProvider.shouldChangeColor ?? false;
  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting && !isDisabled);
  let t3;
  if ($[0] !== maxHeight) {
    t3 = () => {
      if (textareaRef.current) {
        textareaRef.current.style.height = "auto";
        textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
        setIsOverflowing(textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10));
      }
    };
    $[0] = maxHeight;
    $[1] = t3;
  } else {
    t3 = $[1];
  }
  const adjustTextareaHeight = t3;
  let t4;
  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
    t4 = () => textareaRef.current;
    $[2] = t4;
  } else {
    t4 = $[2];
  }
  useImperativeHandle(ref, t4);
  let t5;
  let t6;
  if ($[3] !== adjustTextareaHeight || $[4] !== value) {
    t5 = () => {
      if (typeof value === "string" && value.length > -1) {
        adjustTextareaHeight();
      }
    };
    t6 = [adjustTextareaHeight, value];
    $[3] = adjustTextareaHeight;
    $[4] = value;
    $[5] = t5;
    $[6] = t6;
  } else {
    t5 = $[5];
    t6 = $[6];
  }
  useEffect(t5, t6);
  const hasValue = value !== undefined && value.length > 0;
  let t7;
  if ($[7] !== hasValue) {
    t7 = hasValue ? {
      bottom: "2px",
      right: "2px"
    } : {
      top: "12px",
      left: "10px"
    };
    $[7] = hasValue;
    $[8] = t7;
  } else {
    t7 = $[8];
  }
  const labelPosition = t7;
  let t8;
  if ($[9] !== colors?.backgroundColor || $[10] !== colors?.borderColor || $[11] !== hasValue || $[12] !== isDisabled || $[13] !== isInvalid || $[14] !== isOverflowing || $[15] !== labelPosition || $[16] !== maxHeight || $[17] !== minHeight || $[18] !== onBlur || $[19] !== onChange || $[20] !== onFocus || $[21] !== onKeyDown || $[22] !== placeholder || $[23] !== rightElement || $[24] !== shouldChangeColor || $[25] !== shouldShowBorder || $[26] !== shouldShowKeyboardHighlighting || $[27] !== value) {
    colors?.backgroundColor;
    colors?.borderColor;
    t8 = (() => /*#__PURE__*/React.createElement(StyledTextArea, {
      $isDisabled: isDisabled
    }, /*#__PURE__*/React.createElement(StyledTextAreaContentWrapper, {
      $isInvalid: isInvalid,
      $shouldChangeColor: shouldChangeColor,
      $backgroundColor: colors?.backgroundColor,
      $borderColor: colors?.borderColor,
      "data-should-show-keyboard-highlighting": shouldShowKeyboardHighlighting
    }, /*#__PURE__*/React.createElement(StyledTextAreaContent, null, /*#__PURE__*/React.createElement(StyledTextAreaInput, {
      className: "chayns-scrollbar",
      disabled: isDisabled,
      $isInvalid: isInvalid,
      ref: textareaRef,
      value: value,
      onBlur: onBlur,
      onChange: onChange,
      onFocus: onFocus,
      onKeyDown: onKeyDown,
      $maxHeight: maxHeight,
      $minHeight: minHeight,
      $isOverflowing: isOverflowing,
      rows: 1
    }), /*#__PURE__*/React.createElement(StyledTextAreaLabelWrapper, {
      animate: {
        fontSize: hasValue ? "9px" : undefined
      },
      initial: false,
      style: labelPosition,
      transition: {
        type: "tween",
        duration: 0.1
      }
    }, /*#__PURE__*/React.createElement(StyledTextAreaLabel, {
      $isInvalid: isInvalid
    }, placeholder))), rightElement && shouldShowBorder && /*#__PURE__*/React.createElement(StyledInputRightElement, {
      $isInline: true
    }, /*#__PURE__*/React.createElement(StyledRightElementWrapper, null, rightElement))), rightElement && !shouldShowBorder && /*#__PURE__*/React.createElement(StyledInputRightElement, {
      $isInline: true
    }, /*#__PURE__*/React.createElement(StyledRightElementWrapper, null, rightElement))))();
    $[9] = colors?.backgroundColor;
    $[10] = colors?.borderColor;
    $[11] = hasValue;
    $[12] = isDisabled;
    $[13] = isInvalid;
    $[14] = isOverflowing;
    $[15] = labelPosition;
    $[16] = maxHeight;
    $[17] = minHeight;
    $[18] = onBlur;
    $[19] = onChange;
    $[20] = onFocus;
    $[21] = onKeyDown;
    $[22] = placeholder;
    $[23] = rightElement;
    $[24] = shouldChangeColor;
    $[25] = shouldShowBorder;
    $[26] = shouldShowKeyboardHighlighting;
    $[27] = value;
    $[28] = t8;
  } else {
    t8 = $[28];
  }
  return t8;
});
TextArea.displayName = 'TextArea';
export default TextArea;
//# sourceMappingURL=TextArea.js.map