UNPKG

@redocly/theme

Version:

Shared UI components lib

234 lines (232 loc) 12.4 kB
"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