posthog-js/lib/src/extensions/surveys/components/QuestionHeader.js

Posthog-js allows you to automatically capture usage and send events to PostHog.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.QuestionHeader = QuestionHeader;
exports.Cancel = Cancel;
var jsx_runtime_1 = require("preact/jsx-runtime");
var preact_1 = require("preact");
var hooks_1 = require("preact/hooks");
var posthog_surveys_types_1 = require("../../../posthog-surveys-types");
var icons_1 = require("../icons");
var surveys_extension_utils_1 = require("../surveys-extension-utils");
function QuestionHeader(_a) {
    var question = _a.question, forceDisableHtml = _a.forceDisableHtml, htmlFor = _a.htmlFor;
    var TitleComponent = question.type === posthog_surveys_types_1.SurveyQuestionType.Open ? 'label' : 'h3';
    // Flag an empty header in JS rather than via :has(.survey-question:empty) in CSS,
    // which crashes some WebKit builds during text-node style invalidation.
    var isHeaderEmpty = !question.question && !question.description;
    return ((0, jsx_runtime_1.jsxs)("div", { class: isHeaderEmpty ? 'question-header question-header--empty' : 'question-header', children: [(0, jsx_runtime_1.jsx)(TitleComponent, { className: "survey-question", htmlFor: htmlFor, children: question.question }), question.description &&
                (0, surveys_extension_utils_1.renderChildrenAsTextOrHtml)({
                    component: (0, preact_1.h)('p', { className: 'survey-question-description' }),
                    children: question.description,
                    renderAsHtml: !forceDisableHtml && question.descriptionContentType !== 'text',
                })] }));
}
function Cancel(_a) {
    var onClick = _a.onClick;
    var isPreviewMode = (0, hooks_1.useContext)(surveys_extension_utils_1.SurveyContext).isPreviewMode;
    return ((0, jsx_runtime_1.jsx)("button", { className: "form-cancel", onClick: onClick, disabled: isPreviewMode, "aria-label": "Close survey", type: "button", children: (0, icons_1.cancelSVG)({ fill: 'black' }) }));
}
//# sourceMappingURL=QuestionHeader.js.map