@s-ui/react-molecule-textarea-field/lib/index.js

`MoleculeTextareaField` is a component that wraps a composition of Label + Textarea + Validation Messages.

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
var _excluded = ["alertText", "autoHideHelpText", "errorText", "isMaxCharBlocked", "helpText", "id", "label", "nodeLabel", "maxChars", "onChange", "successText", "textCharacters", "value"];
import { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import AtomTextarea, { AtomTextareaSizes as SIZES, AtomTextareaStates } from '@s-ui/react-atom-textarea';
import MoleculeField from '@s-ui/react-molecule-field';
import { BASE_CLASS } from './config.js';
import { jsx as _jsx } from "react/jsx-runtime";
var hasErrors = function hasErrors(_ref) {
  var successText = _ref.successText,
    errorText = _ref.errorText;
  if (errorText) return true;
  if (successText) return false;
};
var getState = function getState(_ref2) {
  var successText = _ref2.successText,
    errorState = _ref2.errorState,
    alertText = _ref2.alertText;
  if (successText) return AtomTextareaStates.SUCCESS;
  if (errorState) return AtomTextareaStates.ERROR;
  if (alertText) return AtomTextareaStates.ALERT;
};
var NOOP = function NOOP() {};
var MoleculeTextareaField = function MoleculeTextareaField(_ref3) {
  var alertText = _ref3.alertText,
    _ref3$autoHideHelpTex = _ref3.autoHideHelpText,
    autoHideHelpText = _ref3$autoHideHelpTex === void 0 ? false : _ref3$autoHideHelpTex,
    errorText = _ref3.errorText,
    _ref3$isMaxCharBlocke = _ref3.isMaxCharBlocked,
    isMaxCharBlocked = _ref3$isMaxCharBlocke === void 0 ? false : _ref3$isMaxCharBlocke,
    helpText = _ref3.helpText,
    id = _ref3.id,
    label = _ref3.label,
    nodeLabel = _ref3.nodeLabel,
    _ref3$maxChars = _ref3.maxChars,
    maxChars = _ref3$maxChars === void 0 ? 4000 : _ref3$maxChars,
    _ref3$onChange = _ref3.onChange,
    onChange = _ref3$onChange === void 0 ? NOOP : _ref3$onChange,
    successText = _ref3.successText,
    _ref3$textCharacters = _ref3.textCharacters,
    textCharacters = _ref3$textCharacters === void 0 ? 'characters' : _ref3$textCharacters,
    _ref3$value = _ref3.value,
    value = _ref3$value === void 0 ? '' : _ref3$value,
    props = _objectWithoutPropertiesLoose(_ref3, _excluded);
  var errorState = hasErrors({
    successText: successText,
    errorText: errorText
  });
  var textAreaState = getState({
    successText: successText,
    errorState: errorState,
    alertText: alertText
  });
  var _useState = useState(false),
    showMaxLengthError = _useState[0],
    setShowMaxLengthError = _useState[1];
  var disabled = props.disabled;
  var _useState2 = useState(value != null ? value : ''),
    internalValue = _useState2[0],
    setInternalValue = _useState2[1];
  useEffect(function () {
    setInternalValue(value != null ? value : '');
  }, [value]);
  var computeHelpText = function computeHelpText() {
    if (showMaxLengthError) return '';
    var numCharacters = internalValue.length;
    var dynamicText = numCharacters + "/" + maxChars + " " + textCharacters;
    return helpText ? helpText + " - " + dynamicText : dynamicText;
  };
  var onChangeHandler = function onChangeHandler(ev) {
    ev.persist();
    var value = ev.target.value;
    if (value.length <= maxChars || isMaxCharBlocked) {
      setInternalValue(value);
      onChange(ev, {
        value: value
      });
      setShowMaxLengthError(value.length > maxChars);
    }
  };
  var helpTextComputed = /*#__PURE__*/_jsx("div", {
    "aria-live": "polite",
    "aria-atomic": "true",
    children: /*#__PURE__*/_jsx("p", {
      className: BASE_CLASS + "-helpText",
      children: computeHelpText()
    })
  });
  return /*#__PURE__*/_jsx(MoleculeField, {
    name: id,
    label: label,
    nodeLabel: nodeLabel,
    successText: successText,
    errorText: errorText,
    alertText: alertText,
    helpText: helpTextComputed,
    autoHideHelpText: autoHideHelpText,
    maxChars: maxChars,
    onChange: onChangeHandler,
    disabled: disabled,
    children: /*#__PURE__*/_jsx(AtomTextarea, _extends({
      id: id,
      errorState: errorState,
      state: textAreaState,
      value: internalValue
    }, props))
  });
};
MoleculeTextareaField.displayName = 'MoleculeTextareaField';
export default MoleculeTextareaField;
export var MoleculeTextareaSizes = SIZES;