@redocly/theme
Version:
Shared UI components lib
85 lines (84 loc) • 4.24 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 (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__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.Feedback = Feedback;
const React = __importStar(require("react"));
const react_router_dom_1 = require("react-router-dom");
const styled_components_1 = __importDefault(require("styled-components"));
const hooks_1 = require("../../core/hooks");
const Rating_1 = require("../../components/Feedback/Rating");
const Sentiment_1 = require("../../components/Feedback/Sentiment");
const Comment_1 = require("../../components/Feedback/Comment");
const Mood_1 = require("../../components/Feedback/Mood");
const Scale_1 = require("../../components/Feedback/Scale");
const constants_1 = require("../../core/constants");
const feedbackComponents = {
rating: Rating_1.Rating,
sentiment: Sentiment_1.Sentiment,
mood: Mood_1.Mood,
scale: Scale_1.Scale,
comment: Comment_1.Comment,
};
function Feedback(props) {
var _a;
const { useSubmitFeedback, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
const { submitFeedback } = useSubmitFeedback();
const otelTelemetry = useOtelTelemetry();
const { pathname } = (0, react_router_dom_1.useLocation)();
const { feedback: themeFeedbackConf } = (0, hooks_1.useThemeConfig)();
const feedbackConf = Object.assign(Object.assign({}, themeFeedbackConf), { path: props === null || props === void 0 ? void 0 : props.path, type: (props === null || props === void 0 ? void 0 : props.type) || (themeFeedbackConf === null || themeFeedbackConf === void 0 ? void 0 : themeFeedbackConf.type) || constants_1.DEFAULT_FEEDBACK_TYPE, settings: (props === null || props === void 0 ? void 0 : props.settings) || (themeFeedbackConf === null || themeFeedbackConf === void 0 ? void 0 : themeFeedbackConf.settings) || {}, hide: (_a = props.hide) !== null && _a !== void 0 ? _a : themeFeedbackConf === null || themeFeedbackConf === void 0 ? void 0 : themeFeedbackConf.hide });
if (feedbackConf.hide) {
return null;
}
const renderFeedbackComponent = () => {
const { type, settings, path } = feedbackConf;
const FeedbackComponent = feedbackComponents[type];
if (!FeedbackComponent) {
return null;
}
return (React.createElement(FeedbackWrapper, { "data-component-name": "Feedback/Feedback" },
React.createElement(FeedbackComponent, { settings: settings, onSubmit: (values) => {
submitFeedback({ type, values, path });
otelTelemetry.send({ type: 'feedback.sent', payload: { feedback_type: type } });
} })));
};
return React.createElement(React.Fragment, { key: pathname }, renderFeedbackComponent());
}
const FeedbackWrapper = styled_components_1.default.div `
padding: var(--feedback-padding);
background-color: var(--feedback-bg-color);
color: var(--feedback-font-color);
font-size: var(--feedback-font-size);
width: var(--feedback-width);
max-width: 100%;
border-radius: var(--feedback-border-radius);
@media print {
display: none;
}
`;
//# sourceMappingURL=Feedback.js.map