@redocly/theme
Version:
Shared UI components lib
222 lines (219 loc) • 11 kB
JavaScript
;
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.MAX_SCALE = void 0;
exports.Scale = Scale;
const React = __importStar(require("react"));
const react_1 = require("react");
const styled_components_1 = __importDefault(require("styled-components"));
const utils_1 = require("../../core/utils");
const hooks_1 = require("../../core/hooks");
const RadioCheckButtonIcon_1 = require("../../icons/RadioCheckButtonIcon/RadioCheckButtonIcon");
const Comment_1 = require("../../components/Feedback/Comment");
const Reasons_1 = require("../../components/Feedback/Reasons");
const Button_1 = require("../../components/Button/Button");
const constants_1 = require("../../core/constants");
exports.MAX_SCALE = 10;
function Scale({ settings, onSubmit, className }) {
const { label, submitText, leftScaleLabel, rightScaleLabel, comment: commentSettings, reasons: reasonsSettings, optionalEmail: optionalEmailSettings, } = settings || {};
const [score, setScore] = React.useState(0);
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 scaleOptions = [];
for (let i = 1; i <= exports.MAX_SCALE; i++) {
scaleOptions.push(React.createElement(Button_1.Button, { id: `scale-option-${i}`, key: `scale-option-${i}`, type: "button", onClick: () => setScore(i), className: `${score === i ? 'active' : ''}` }, i));
}
const displayReasons = !!score && reasonsSettings && !reasonsSettings.hide;
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 handleCancel = () => {
setScore(0);
setComment('');
setReasons([]);
setEmail(undefined);
};
const onSubmitScaleForm = () => {
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,
max: exports.MAX_SCALE,
email: trimmedEmail,
});
setIsSubmitted(true);
};
(0, react_1.useEffect)(() => {
if (score && !displayComment && !displayReasons && !displayFeedbackEmail) {
onSubmitScaleForm();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [score, displayComment, displayReasons, displayFeedbackEmail]);
if (isSubmitted) {
return (React.createElement(ScaleWrapper, { "data-component-name": "Feedback/Scale" },
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(ScaleWrapper, { "data-component-name": "Feedback/Scale", className: className },
React.createElement(StyledForm, { onSubmit: onSubmitScaleForm },
React.createElement(StyledFormMandatoryFields, null,
React.createElement(Label, { "data-translation-key": "feedback.settings.label" }, label || translate('feedback.settings.label', 'Was this helpful?')),
React.createElement(ScaleOptionsWrapper, null, scaleOptions),
React.createElement(SubLabelContainer, null,
React.createElement(SubLabel, { "data-translation-key": "feedback.settings.leftScaleLabel" }, leftScaleLabel ||
translate('feedback.settings.leftScaleLabel', 'Not helpful at all')),
React.createElement(SubLabel, { "data-translation-key": "feedback.settings.rightScaleLabel" }, rightScaleLabel ||
translate('feedback.settings.rightScaleLabel', 'Extremely helpful')))),
React.createElement(StyledFormOptionalFields, null,
displayReasons && (React.createElement(Reasons_1.Reasons, { settings: {
label: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.label,
items: (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.items) || [],
component: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.component,
}, onChange: setReasons })),
displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: {
label: (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.label) ||
translate('feedback.settings.comment.label', 'Please share your feedback with us.'),
} }))),
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();
onSubmitScaleForm();
}
} }))),
displaySubmitBnt && (React.createElement(ButtonsContainer, null,
React.createElement(Button_1.Button, { "data-translation-key": "feedback.settings.comment.cancel", onClick: handleCancel, variant: "text", size: "small" }, translate('feedback.settings.comment.cancel', 'Cancel')),
React.createElement(Button_1.Button, { "data-translation-key": "feedback.submit", type: "submit", variant: "secondary", size: "small" }, translate('feedback.submit', 'Submit')))))));
}
const ScaleWrapper = 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-header-font-size);
line-height: var(--feedback-header-line-height);
color: var(--feedback-header-text-color);
margin: 0;
width: 100%;
`;
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 SubLabelContainer = styled_components_1.default.div `
display: flex;
justify-content: space-between;
width: 100%;
flex-direction: row;
`;
const SubLabel = (0, styled_components_1.default)(Label) `
width: fit-content;
color: var(--text-color-description);
font-size: var(--feedback-font-size);
margin-bottom: var(--spacing-xxs);
`;
const StyledForm = styled_components_1.default.form `
width: 100%;
gap: var(--spacing-sm);
display: flex;
flex-direction: column;
`;
const ButtonsContainer = styled_components_1.default.div `
display: flex;
justify-content: end;
margin-bottom: var(--spacing-xxs);
gap: var(--spacing-xxs);
`;
const StyledFormOptionalFields = styled_components_1.default.div `
display: flex;
flex-flow: column;
&:empty {
display: none;
}
`;
const StyledFormMandatoryFields = styled_components_1.default.div `
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-sm);
align-items: center;
`;
const ScaleOptionsWrapper = styled_components_1.default.div `
display: flex;
justify-content: space-between;
flex-direction: row;
gap: var(--spacing-xxs);
width: 100%;
${Button_1.Button} {
margin-left: 0;
}
@media screen and (max-width: ${utils_1.breakpoints.small}) {
gap: 2px;
}
`;
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=Scale.js.map