@redocly/theme/lib/components/Feedback/Comment.js

Shared UI components lib

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.Comment = Comment;
const react_1 = __importStar(require("react"));
const styled_components_1 = __importStar(require("styled-components"));
const hooks_1 = require("../../core/hooks");
const RadioCheckButtonIcon_1 = require("../../icons/RadioCheckButtonIcon/RadioCheckButtonIcon");
const Button_1 = require("../../components/Button/Button");
const constants_1 = require("../../core/constants");
function Comment({ settings, onSubmit, onCancel, className, standAlone = true, isDialog = false, }) {
    const { useTranslate } = (0, hooks_1.useThemeHooks)();
    const { translate } = useTranslate();
    const { label, submitText } = settings || {};
    const [text, setText] = react_1.default.useState('');
    const [submitValue, setSubmitValue] = react_1.default.useState('');
    const [isMaxLengthReached, setIsMaxLengthReached] = react_1.default.useState(false);
    const modalRef = (0, react_1.useRef)(null);
    (0, hooks_1.useOutsideClick)(modalRef, onCancel);
    const send = () => {
        const trimmedText = text.trim();
        if (!trimmedText)
            return;
        setSubmitValue(trimmedText);
        onSubmit({ comment: trimmedText });
    };
    const handleTextAreaChange = (e) => {
        const commentValue = e.target.value;
        setText(commentValue);
        setIsMaxLengthReached(commentValue.length >= constants_1.MAX_CONTEXT_LENGTH);
        if (!standAlone) {
            onSubmit({ comment: commentValue });
        }
    };
    if (submitValue) {
        return (react_1.default.createElement(StateWrapper, { "data-component-name": "Feedback/Comment", className: className },
            react_1.default.createElement(StyledFormMandatoryFields, null,
                react_1.default.createElement(Label, { "data-translation-key": "feedback.settings.comment.submitText", standAlone: standAlone }, submitText ||
                    translate('feedback.settings.comment.submitText', 'Thank you for helping improve our documentation!')),
                react_1.default.createElement(RadioCheckButtonIcon_1.RadioCheckButtonIcon, null))));
    }
    return (react_1.default.createElement(CommentWrapper, { ref: modalRef, "data-component-name": "Feedback/Comment", className: className, style: standAlone ? { width: 'var(--feedback-report-dialog-width)' } : { width: 'auto' } },
        react_1.default.createElement(Label, { "data-translation-key": "feedback.settings.comment.label", standAlone: standAlone }, label ||
            translate('feedback.settings.comment.label', 'Please share your feedback with us.')),
        react_1.default.createElement(TextArea, { rows: 3, maxLength: constants_1.MAX_CONTEXT_LENGTH, onChange: handleTextAreaChange }),
        isMaxLengthReached && (react_1.default.createElement(MaxLengthMessage, { "data-translation-key": "feedback.settings.comment.maxLength" }, translate('feedback.settings.comment.maxLength', {
            maxLength: constants_1.MAX_CONTEXT_LENGTH,
            defaultValue: `Maximum content length of ${constants_1.MAX_CONTEXT_LENGTH} characters reached`,
        }))),
        standAlone && (react_1.default.createElement(ButtonsContainer, null,
            onCancel && (react_1.default.createElement(Button_1.Button, { "data-translation-key": "feedback.settings.comment.cancel", onClick: onCancel, variant: "text", size: "small" }, translate('feedback.settings.comment.cancel', 'Cancel'))),
            react_1.default.createElement(Button_1.Button, { "data-translation-key": "feedback.settings.comment.send", onClick: send, variant: isDialog ? 'primary' : 'secondary', size: "small" }, translate('feedback.settings.comment.send', 'Send'))))));
}
const StyledFormMandatoryFields = styled_components_1.default.div `
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-xs);

  > svg {
    margin: var(--button-icon-padding) 0; /* prevent hight of the parent jumping */
  }
`;
const CommentWrapper = styled_components_1.default.div `
  font-family: var(--font-family-base);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: var(--border-radius-lg);
  background: var(--feedback-bg-color);
  gap: var(--spacing-xxs);

  max-width: var(--feedback-report-dialog-max-width);
`;
const StateWrapper = (0, styled_components_1.default)(CommentWrapper) `
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-xxs);
`;
const Label = styled_components_1.default.h4 `
  font-weight: var(--font-weight-regular);
  font-size: var(--feedback-font-size);
  line-height: var(--feedback-line-height);

  ${({ standAlone }) => standAlone &&
    (0, styled_components_1.css) `
      font-size: var(--feedback-header-font-size);
      line-height: var(--feedback-header-line-height);
    `}

  margin: 0;
`;
const TextArea = styled_components_1.default.textarea `
  background-color: var(--bg-color);
  border-radius: var(--border-radius-lg);
  border: var(--input-border);
  outline: none;
  color: var(--feedback-text-color);
  font-family: var(--feedback-font-family);
  padding: 10px;

  /* min height of 3 rows + padding */
  min-height: calc(var(--line-height-base) * 3 + 20px);
  min-width: var(--feedback-comment-min-width);
  max-width: var(--feedback-comment-max-width);
  resize: vertical;
`;
const ButtonsContainer = styled_components_1.default.div `
  display: flex;
  justify-content: end;
  margin-bottom: var(--spacing-xxs);
  margin-top: var(--spacing-xs);
  gap: var(--spacing-xs);
`;
const MaxLengthMessage = styled_components_1.default.div `
  font-size: var(--font-size-sm);
  color: var(--text-color-secondary);
  margin-top: var(--spacing-xxs);
`;
//# sourceMappingURL=Comment.js.map