@fremtind/jkl-feedback-react/build/esm/questions/SmileyQuestion.js

Jøkul react feedback component

import { FieldGroup } from "@fremtind/jkl-input-group-react";
import React, { Fragment, useMemo, useId } from "react";
import { useFollowUpContext } from "../followup/followupContext";
import { useMainQuestionContext } from "../main-question/mainQuestionContext";
import { defaultOptions, getSmiley } from "./smileyUtils";
const isNotInScale = (option) => typeof option.value !== "number" || ![1, 2, 3, 4, 5].includes(option.value);
const SmileyQuestion = ({
  label,
  name = "smiley",
  helpLabel,
  options = defaultOptions
}) => {
  const followupContext = useFollowUpContext();
  const feedbackContext = useMainQuestionContext();
  const context = followupContext || feedbackContext;
  const id = useId();
  const handleChange = (e) => {
    const option = options == null ? void 0 : options.find(
      (option2) => option2.value.toString() === e.target.value
    );
    context == null ? void 0 : context.setCurrentValue(option);
  };
  const selectedValue = useMemo(
    () => {
      var _a;
      return Array.isArray(context == null ? void 0 : context.currentValue) ? context == null ? void 0 : context.currentValue[0].value : (_a = context == null ? void 0 : context.currentValue) == null ? void 0 : _a.value;
    },
    [context == null ? void 0 : context.currentValue]
  );
  if (options.some(isNotInScale)) {
    console.error(
      "SmileyQuestion m\xE5 ha tallene 1 til 5 som verdier for alternativene sine"
    );
    return null;
  }
  if (!context || !options) {
    console.error(
      "Questions must be used inside a Followup or Feedback context provider"
    );
    return null;
  }
  return /* @__PURE__ */ React.createElement(
    FieldGroup,
    {
      labelProps: { variant: "large" },
      legend: label,
      helpLabel
    },
    /* @__PURE__ */ React.createElement("div", { className: "jkl-feedback-smileys" }, options.map((option) => /* @__PURE__ */ React.createElement(Fragment, { key: option.value }, /* @__PURE__ */ React.createElement(
      "input",
      {
        className: "jkl-sr-only",
        id: "".concat(id, "-").concat(name, "-").concat(option.value),
        name: "".concat(id, "-").concat(name),
        type: "radio",
        value: option.value,
        onChange: handleChange,
        checked: selectedValue === option.value
      }
    ), /* @__PURE__ */ React.createElement(
      "label",
      {
        className: "jkl-feedback-smiley-option",
        htmlFor: "".concat(id, "-").concat(name, "-").concat(option.value)
      },
      /* @__PURE__ */ React.createElement("span", { className: "jkl-sr-only" }, option.label),
      getSmiley(Number(option.value))
    ))))
  );
};
export {
  SmileyQuestion
};
//# sourceMappingURL=SmileyQuestion.js.map