@fremtind/jkl-feedback-react
Version:
Jøkul react feedback component
135 lines (134 loc) • 6.37 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Followup_exports = {};
__export(Followup_exports, {
Followup: () => Followup
});
module.exports = __toCommonJS(Followup_exports);
var import_jkl_button_react = require("@fremtind/jkl-button-react");
var import_react = __toESM(require("react"));
var import_feedbackContext = require("../feedbackContext");
var import_FeedbackSuccess = require("../FeedbackSuccess");
var import_utils = require("../utils");
var import_followupContext = require("./followupContext");
var import_useFollowup = require("./useFollowup");
const defaultSuccessMessage = {
title: "Takk, igjen!",
children: "Vi setter pris p\xE5 at du tok deg tid til \xE5 svare p\xE5 flere sp\xF8rsm\xE5l. Det hjelper oss med \xE5 gj\xF8re nettsidene bedre for deg og alle andre som bruker dem."
};
const Followup = ({
questions,
successMessage = defaultSuccessMessage,
onSubmit
}) => {
const [noThanks, setNoThanks] = (0, import_react.useState)(false);
const focusRef = (0, import_react.useRef)(null);
const followupState = (0, import_useFollowup.useFollowup)(questions, onSubmit);
const { handleAbort, handleNext, step, submitted } = followupState;
const {
followupStarted,
setFollowupStarted,
setFollowupSubmitted,
contactSubmitted,
landmarkLabel
} = (0, import_feedbackContext.useFeedbackContext)();
(0, import_react.useEffect)(() => {
if (step.number === 0) {
return;
}
focusRef.current && focusRef.current.focus();
}, [step]);
(0, import_react.useEffect)(() => {
setFollowupSubmitted(submitted);
}, [submitted, setFollowupSubmitted]);
const QuestionComponent = (0, import_utils.getQuestionFromType)(questions[step.number].type);
const Button = step.isLast ? import_jkl_button_react.PrimaryButton : import_jkl_button_react.SecondaryButton;
if (noThanks) {
return null;
}
return /* @__PURE__ */ import_react.default.createElement("div", { "aria-live": "polite" }, /* @__PURE__ */ import_react.default.createElement(import_followupContext.FollowUpProvider, { state: followupState }, !followupStarted && /* @__PURE__ */ import_react.default.createElement("div", { className: "jkl-feedback__fade-in" }, /* @__PURE__ */ import_react.default.createElement("p", { className: "jkl-heading-4 jkl-spacing-xl--top jkl-spacing-xs--bottom" }, "Har du tid til \xE5 svare p\xE5 noen flere sp\xF8rsm\xE5l?"), /* @__PURE__ */ import_react.default.createElement("p", { className: "jkl-body jkl-spacing-xl--bottom" }, "Det tar kun et minutt, og hjelper oss \xE5 lage bedre l\xF8sninger for deg."), /* @__PURE__ */ import_react.default.createElement(
import_jkl_button_react.PrimaryButton,
{
onClick: () => setFollowupStarted(true),
className: "jkl-spacing-xl--right"
},
"Jeg har tid!"
), /* @__PURE__ */ import_react.default.createElement(import_jkl_button_react.TertiaryButton, { onClick: () => setNoThanks(true) }, "Nei takk")), !submitted && followupStarted && /* @__PURE__ */ import_react.default.createElement(
"form",
{
onSubmit: handleNext,
className: "jkl-feedback__fade-in",
"aria-label": landmarkLabel
},
/* @__PURE__ */ import_react.default.createElement(
"p",
{
className: "jkl-feedback__step-counter",
ref: focusRef
},
"Steg ",
step.number + 1,
" av ",
questions.length
),
/* @__PURE__ */ import_react.default.createElement(
QuestionComponent,
__spreadProps(__spreadValues({}, questions[step.number]), {
autoFocus: true,
key: step.number
})
),
/* @__PURE__ */ import_react.default.createElement("div", { className: "jkl-spacing-xl--top", "aria-live": "off" }, /* @__PURE__ */ import_react.default.createElement(Button, { type: "submit" }, step.isLast ? "Send inn" : "Neste"), /* @__PURE__ */ import_react.default.createElement(
import_jkl_button_react.TertiaryButton,
{
onClick: handleAbort,
className: "jkl-spacing-xl--left"
},
"Avbryt"
))
), submitted && !contactSubmitted && /* @__PURE__ */ import_react.default.createElement(import_FeedbackSuccess.FeedbackSuccess, __spreadValues({}, successMessage))));
};
//# sourceMappingURL=Followup.js.map