@redocly/theme
Version:
Shared UI components lib
234 lines (232 loc) • 12.4 kB
JavaScript
"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;
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Sentiment = Sentiment;
const React = __importStar(require("react"));
const react_1 = require("react");
const styled_components_1 = __importDefault(require("styled-components"));
const Reasons_1 = require("../../components/Feedback/Reasons");
const hooks_1 = require("../../core/hooks");
const RadioCheckButtonIcon_1 = require("../../icons/RadioCheckButtonIcon/RadioCheckButtonIcon");
const Comment_1 = require("../../components/Feedback/Comment");
const Button_1 = require("../../components/Button/Button");
const ThumbDownIcon_1 = require("../../icons/ThumbDownIcon/ThumbDownIcon");
const ThumbUpIcon_1 = require("../../icons/ThumbUpIcon/ThumbUpIcon");
const constants_1 = require("../../core/constants");
function Sentiment({ settings, onSubmit, className }) {
const { label, submitText, comment: commentSettings, reasons: reasonsSettings, optionalEmail: optionalEmailSettings, } = settings || {};
const [isSubmitted, setIsSubmitted] = React.useState(false);
const [score, setScore] = React.useState(0);
const [comment, setComment] = React.useState('');
const [reasons, setReasons] = React.useState([]);
const [email, setEmail] = React.useState();
const { useTranslate, useUserMenu } = (0, hooks_1.useThemeHooks)();
const { userData } = useUserMenu();
const { translate } = useTranslate();
const onEmailChange = (e) => {
const value = e.target.value;
setEmail(value || undefined);
};
const getScoreSpecificReasonSettings = (score) => {
switch (score) {
case 1:
return reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.like;
case -1:
return reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.dislike;
default:
return reasonsSettings;
}
};
const checkIfShouldDisplayReasons = (score) => {
if (!score || !reasonsSettings) {
return false;
}
const scoreSpecificReasonsSettings = getScoreSpecificReasonSettings(score);
if (typeof (scoreSpecificReasonsSettings === null || scoreSpecificReasonsSettings === void 0 ? void 0 : scoreSpecificReasonsSettings.hide) === 'undefined') {
return !reasonsSettings.hide;
}
return !(scoreSpecificReasonsSettings === null || scoreSpecificReasonsSettings === void 0 ? void 0 : scoreSpecificReasonsSettings.hide);
};
const displayReasons = checkIfShouldDisplayReasons(score);
const displayComment = !!(score && !(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide));
const displaySubmitBnt = !!(score && (displayReasons || displayComment));
const displayFeedbackEmail = !!score && !(optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.hide) && !userData.isAuthenticated;
const commentLabel = score === 1
? (commentSettings && commentSettings.likeLabel) ||
translate('feedback.settings.comment.likeLabel', 'What was most helpful?')
: (commentSettings && commentSettings.dislikeLabel) ||
translate('feedback.settings.comment.dislikeLabel', 'What can we improve?');
const renderReasonsLabel = (score) => {
const scoreSpecificReasonSettings = getScoreSpecificReasonSettings(score);
return scoreSpecificReasonSettings === null || scoreSpecificReasonSettings === void 0 ? void 0 : scoreSpecificReasonSettings.label;
};
const resolveReasonsItems = (score) => {
var _a;
const defaultReasonsItems = (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.items) || [];
const scoreSpecificReasonSettings = getScoreSpecificReasonSettings(score);
return defaultReasonsItems.concat((_a = scoreSpecificReasonSettings === null || scoreSpecificReasonSettings === void 0 ? void 0 : scoreSpecificReasonSettings.items) !== null && _a !== void 0 ? _a : []);
};
const resolveReasonsComponent = (score) => {
const scoreSpecificReasonSettings = getScoreSpecificReasonSettings(score);
return scoreSpecificReasonSettings === null || scoreSpecificReasonSettings === void 0 ? void 0 : scoreSpecificReasonSettings.component;
};
const onSubmitSentimentForm = () => {
const trimmedComment = (comment === null || comment === void 0 ? void 0 : comment.trim()) || undefined;
const trimmedEmail = (email === null || email === void 0 ? void 0 : email.trim()) || undefined;
onSubmit({
score,
comment: trimmedComment,
reasons,
email: trimmedEmail,
});
setIsSubmitted(true);
};
const onCancelSentimentForm = () => {
setScore(0);
setComment('');
setReasons([]);
setEmail(undefined);
};
(0, react_1.useEffect)(() => {
if (score && !displayComment && !displayReasons && !displayFeedbackEmail) {
onSubmitSentimentForm();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [score, displayComment, displayReasons, displayFeedbackEmail]);
if (isSubmitted) {
return (React.createElement(SentimentWrapper, { "data-component-name": "Feedback/Sentiment" },
React.createElement(StyledFormMandatoryFields, null,
React.createElement(Label, { "data-translation-key": "feedback.settings.submitText" }, submitText ||
translate('feedback.settings.submitText', 'Thank you for helping improve our documentation!')),
React.createElement(RadioCheckButtonIcon_1.RadioCheckButtonIcon, null))));
}
return (React.createElement(SentimentWrapper, { "data-component-name": "Feedback/Sentiment", className: className },
React.createElement(StyledForm, null,
React.createElement(StyledFormMandatoryFields, null,
React.createElement(Label, { "data-translation-key": "feedback.settings.label" }, label || translate('feedback.settings.label', 'Was this helpful?')),
React.createElement(StyledMandatoryFieldContainer, null,
React.createElement(Button_1.Button, { type: "button", size: "medium", variant: score === 1 ? 'primary' : 'secondary', onClick: () => {
setScore(1);
}, "aria-label": translate('feedback.sentiment.thumbUp', 'Like'), icon: React.createElement(ThumbUpIcon_1.ThumbUpIcon, null) }),
React.createElement(Button_1.Button, { size: "medium", type: "button", variant: score === -1 ? 'primary' : 'secondary', tone: score === -1 ? 'danger' : 'default', onClick: () => {
setScore(-1);
}, "aria-label": translate('feedback.sentiment.thumbDown', 'Dislike'), icon: React.createElement(ThumbDownIcon_1.ThumbDownIcon, null) }))),
(displayReasons || displayComment) && (React.createElement(StyledFormOptionalFields, null,
displayReasons && (React.createElement(Reasons_1.Reasons, { settings: {
label: renderReasonsLabel(score),
items: resolveReasonsItems(score),
component: resolveReasonsComponent(score),
}, onChange: setReasons })),
displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: commentLabel } })))),
displayFeedbackEmail && (React.createElement(StyledFormOptionalFields, null,
React.createElement(InputLabel, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
translate('feedback.settings.optionalEmail.label', 'Your email (optional, for follow-up)')),
React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.placeholder) ||
translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", maxLength: constants_1.MAX_EMAIL_LENGTH, required: !!email, onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
onSubmitSentimentForm();
}
} }))),
displaySubmitBnt && (React.createElement(ButtonsContainer, null,
React.createElement(Button_1.Button, { onClick: onCancelSentimentForm, variant: "text", size: "small" }, translate('feedback.cancel', 'Cancel')),
React.createElement(Button_1.Button, { onClick: onSubmitSentimentForm, variant: "secondary", size: "small" }, translate('feedback.submit', 'Submit')))))));
}
const SentimentWrapper = styled_components_1.default.div `
font-family: var(--font-family-base);
display: flex;
justify-content: space-between;
align-items: center;
`;
const Label = styled_components_1.default.h4 `
font-family: var(--feedback-font-family);
font-weight: var(--font-weight-regular);
font-size: var(--feedback-header-font-size);
line-height: var(--feedback-header-line-height);
color: var(--feedback-header-text-color);
margin: 0;
`;
const InputLabel = styled_components_1.default.h4 `
font-weight: var(--font-weight-regular);
font-size: var(--feedback-font-size);
line-height: var(--feedback-line-height);
margin: 0;
`;
const StyledForm = styled_components_1.default.form `
width: 100%;
gap: var(--spacing-sm);
display: flex;
flex-direction: column;
`;
const StyledFormOptionalFields = styled_components_1.default.div `
display: flex;
flex-flow: column;
`;
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 StyledMandatoryFieldContainer = styled_components_1.default.div `
display: flex;
align-items: center;
gap: var(--spacing-xxs);
${Button_1.Button} {
margin: 0;
}
`;
const ButtonsContainer = styled_components_1.default.div `
display: flex;
justify-content: end;
margin-bottom: var(--spacing-xxs);
gap: var(--spacing-xxs);
`;
const EmailInput = styled_components_1.default.input `
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;
`;
//# sourceMappingURL=Sentiment.js.map