@spaced-out/ui-design-system/lib/components/PromptInput/PromptInput.js

Sense UI components library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.PromptInput = void 0;
var React = _interopRequireWildcard(require("react"));
var _size = require("../../styles/variables/_size");
var _classify = _interopRequireDefault(require("../../utils/classify"));
var _Button = require("../Button");
var _Icon = require("../Icon");
var _Text = require("../Text");
var _Textarea = require("../Textarea");
var _PromptInputModule = _interopRequireDefault(require("./PromptInput.module.css"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const CONSTANTS = {
  DEFAULT_INPUT_PLACEHOLDER: 'Ask me anything',
  INPUT_NAME: 'prompt-textarea',
  BUTTON_TEXT: 'Generate',
  BUTTON_ICON: 'sparkles',
  BUTTON_ARIA_LABEL: 'Prompt Button',
  TEXT_AREA_ROWS: 1
};
const PromptInput = exports.PromptInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
  let {
    value,
    onInputChange,
    onInputFocus,
    onInputBlur,
    onInputKeyDown,
    inputName = CONSTANTS.INPUT_NAME,
    inputDisabled,
    inputPlaceholder = CONSTANTS.DEFAULT_INPUT_PLACEHOLDER,
    inputLocked,
    inputError,
    inputErrorText,
    helperContent,
    textCountLimit,
    classNames,
    withPadding = true,
    buttonText = CONSTANTS.BUTTON_TEXT,
    buttonDisabled,
    onButtonClick,
    buttonAriaLabel = CONSTANTS.BUTTON_ARIA_LABEL,
    isButtonLoading,
    buttonIconLeftName = CONSTANTS.BUTTON_ICON,
    buttonIconLeftType = _Icon.ICON_TYPE.solid
  } = _ref;
  const textareaRef = React.useRef(null);
  const handleInput = () => {
    const textarea = textareaRef.current;
    if (textarea) {
      textarea.style.height = 'auto'; // Reset height to auto to shrink
      if (textarea.scrollHeight > parseInt(_size.size200)) {
        textarea.style.height = _size.size200; // Limit height to size200
        textarea.style.overflowY = 'auto';
      } else {
        textarea.style.height = `${textarea.scrollHeight}px`; // Adjust to content height
        textarea.style.overflowY = 'hidden';
      }
    }
  };

  // Reset height on value change
  React.useEffect(() => {
    handleInput();
  }, [value]);
  const textCountError = React.useMemo(() => {
    const charCount = value ? value.length : 0;
    return textCountLimit != null && charCount > textCountLimit;
  }, [value, textCountLimit]);
  return /*#__PURE__*/React.createElement("div", {
    ref: ref,
    "data-testid": "PromptInput",
    className: (0, _classify.default)(_PromptInputModule.default.wrapper, {
      [_PromptInputModule.default.styledPromptContainer]: withPadding
    }, classNames?.wrapper)
  }, /*#__PURE__*/React.createElement("div", {
    className: _PromptInputModule.default.inputActionWrapper
  }, /*#__PURE__*/React.createElement(_Textarea.Textarea, {
    classNames: {
      box: (0, _classify.default)(_PromptInputModule.default.promptInputBox, classNames?.inputBox),
      textarea: (0, _classify.default)(_PromptInputModule.default.textarea, classNames?.textarea)
    },
    ref: textareaRef,
    value: value,
    onChange: onInputChange,
    onFocus: onInputFocus,
    onBlur: onInputBlur,
    onKeyDown: onInputKeyDown,
    name: inputName,
    disabled: inputDisabled,
    placeholder: inputPlaceholder,
    locked: inputLocked,
    error: inputError || textCountError,
    errorText: inputErrorText,
    rows: CONSTANTS.TEXT_AREA_ROWS
  }), /*#__PURE__*/React.createElement(_Button.Button, {
    iconLeftName: buttonIconLeftName,
    iconLeftType: buttonIconLeftType,
    onClick: onButtonClick,
    type: _Button.BUTTON_TYPES.gradient,
    disabled: buttonDisabled,
    ariaLabel: buttonAriaLabel,
    isLoading: isButtonLoading,
    classNames: {
      wrapper: (0, _classify.default)(_PromptInputModule.default.actionButton, classNames?.buttonWrapper),
      icon: classNames?.buttonIcon,
      text: classNames?.buttonText
    }
  }, buttonText)), (!!helperContent || !!textCountLimit) && /*#__PURE__*/React.createElement("div", {
    className: _PromptInputModule.default.secondaryRow
  }, typeof helperContent === 'string' ? /*#__PURE__*/React.createElement(_Text.BodySmallBold, {
    color: inputDisabled ? 'disabled' : 'secondary'
  }, helperContent) : helperContent, /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
    color: inputError || textCountError ? 'danger' : 'secondary',
    className: _PromptInputModule.default.textCounter
  }, !!textCountLimit && (value && value.length || 0) + '/' + textCountLimit)));
});