@redocly/theme
Version:
Shared UI components lib
265 lines (262 loc) • 13.8 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;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.MOOD_STATES = void 0;
exports.Mood = Mood;
const React = __importStar(require("react"));
const react_1 = require("react");
const styled_components_1 = __importStar(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 FaceDissatisfiedIcon_1 = require("../../icons/FaceDissatisfiedIcon/FaceDissatisfiedIcon");
const FaceSatisfiedIcon_1 = require("../../icons/FaceSatisfiedIcon/FaceSatisfiedIcon");
const FaceNeutralIcon_1 = require("../../icons/FaceNeutralIcon/FaceNeutralIcon");
const constants_1 = require("../../core/constants");
var MOOD_STATES;
(function (MOOD_STATES) {
MOOD_STATES["SATISFIED"] = "satisfied";
MOOD_STATES["NEUTRAL"] = "neutral";
MOOD_STATES["DISSATISFIED"] = "dissatisfied";
})(MOOD_STATES || (exports.MOOD_STATES = MOOD_STATES = {}));
function Mood({ settings, onSubmit, className }) {
const { label, submitText, comment: commentSettings, reasons: reasonsSettings, optionalEmail: optionalEmailSettings, } = settings || {};
const [score, setScore] = React.useState('');
const [isSubmitted, setIsSubmitted] = React.useState(false);
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 checkIfShouldDisplayReasons = (score) => {
if (!score || !reasonsSettings) {
return false;
}
const scoreSpecificReasonsSettings = reasonsSettings[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 renderCommentLabel = (score) => {
if (!commentSettings || (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide) === true)
return '';
switch (score) {
case MOOD_STATES.SATISFIED:
return (commentSettings.satisfiedLabel ||
translate('feedback.settings.comment.satisfiedLabel', 'What was most helpful?'));
case MOOD_STATES.NEUTRAL:
return (commentSettings.neutralLabel ||
translate('feedback.settings.comment.neutralLabel', 'What can we improve?'));
case MOOD_STATES.DISSATISFIED:
return (commentSettings.dissatisfiedLabel ||
translate('feedback.settings.comment.dissatisfiedLabel', 'What can we improve?'));
default:
return translate('feedback.settings.comment.satisfiedLabel', 'What can we improve?');
}
};
const renderReasonsLabel = (score) => {
var _a;
if (!reasonsSettings || (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.hide) === true)
return '';
return (_a = reasonsSettings[score]) === null || _a === void 0 ? void 0 : _a.label;
};
const resolveReasonsItems = (score) => {
var _a, _b;
if (!reasonsSettings) {
return [];
}
const defaultReasonsItems = (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.items) || [];
return defaultReasonsItems.concat((_b = (_a = reasonsSettings[score]) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : []);
};
const resolveReasonsComponent = (score) => {
var _a;
if (!reasonsSettings || (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.hide) === true)
return 'checkbox';
return (_a = reasonsSettings[score]) === null || _a === void 0 ? void 0 : _a.component;
};
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 onSubmitMoodForm = () => {
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: remapScore(score),
comment: trimmedComment,
reasons,
email: trimmedEmail,
});
setIsSubmitted(true);
};
const onCancelMoodForm = () => {
setScore('');
setComment('');
setReasons([]);
setEmail(undefined);
};
(0, react_1.useEffect)(() => {
if (score && !displayComment && !displayReasons && !displayFeedbackEmail) {
onSubmitMoodForm();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [score, displayComment, displayReasons, displayFeedbackEmail]);
if (isSubmitted) {
return (React.createElement(MoodWrapper, { "data-component-name": "Feedback/Mood" },
React.createElement(StyledFormMandatoryFields, null,
React.createElement(Label, { standAlone: true, "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(MoodWrapper, { "data-component-name": "Feedback/Mood", className: className },
React.createElement(StyledForm, { onSubmit: onSubmitMoodForm },
React.createElement(StyledFormMandatoryFields, null,
React.createElement(Label, { standAlone: true, "data-translation-key": "feedback.settings.label" }, label || translate('feedback.settings.label', 'Was this helpful?')),
React.createElement(StyledMandatoryFieldContainer, null,
React.createElement(Button_1.Button, { "aria-label": MOOD_STATES.DISSATISFIED, type: "button", size: "medium", variant: score === MOOD_STATES.DISSATISFIED ? 'primary' : 'secondary', tone: score === MOOD_STATES.DISSATISFIED ? 'danger' : 'default', onClick: () => {
setScore(MOOD_STATES.DISSATISFIED);
}, icon: React.createElement(FaceDissatisfiedIcon_1.FaceDissatisfiedIcon, null) }),
React.createElement(Button_1.Button, { "aria-label": MOOD_STATES.NEUTRAL, type: "button", variant: score === MOOD_STATES.NEUTRAL ? 'primary' : 'secondary', size: "medium", onClick: () => {
setScore(MOOD_STATES.NEUTRAL);
}, icon: React.createElement(FaceNeutralIcon_1.FaceNeutralIcon, null) }),
React.createElement(Button_1.Button, { "aria-label": MOOD_STATES.SATISFIED, type: "button", variant: score === MOOD_STATES.SATISFIED ? 'primary' : 'secondary', size: "medium", onClick: () => {
setScore(MOOD_STATES.SATISFIED);
}, icon: React.createElement(FaceSatisfiedIcon_1.FaceSatisfiedIcon, 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: renderCommentLabel(score) } })))),
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();
onSubmitMoodForm();
}
} }))),
displaySubmitBnt && (React.createElement(ButtonsContainer, null,
React.createElement(Button_1.Button, { onClick: onCancelMoodForm, variant: "text", size: "small" }, translate('feedback.cancel', 'Cancel')),
React.createElement(Button_1.Button, { type: "submit", variant: "secondary", size: "small" }, translate('feedback.submit', 'Submit')))))));
}
const remapScore = (score) => {
switch (score) {
case MOOD_STATES.SATISFIED:
return 1;
case MOOD_STATES.NEUTRAL:
return 0;
case MOOD_STATES.DISSATISFIED:
return -1;
default:
return 0;
}
};
const MoodWrapper = styled_components_1.default.div `
font-family: var(--feedback-font-family);
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-font-size);
line-height: var(--feedback-line-height);
color: var(--feedback-text-color);
${({ standAlone = false }) => standAlone &&
(0, styled_components_1.css) `
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 ButtonsContainer = styled_components_1.default.div `
display: flex;
justify-content: end;
gap: var(--spacing-xxs);
`;
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);
`;
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=Mood.js.map