@anoki/fse-ui/dist/index.es441.js

FSE UI components library

import { j as a } from "./index.es278.js";
import './components/ui/Feedback/Questions.css';/* empty css            */
import { useState as k, useCallback as C } from "react";
import { Button as u } from "./index.es36.js";
function O({
  questions: l,
  onChangeAnswer: r,
  onSend: f,
  values: n,
  openAnswer: s,
  handleOpenAnswer: x,
  buttons: o,
  maxCharactersMessage: m,
  openAnswerPlaceholder: j,
  resetFeedback: c
}) {
  const [e, p] = k(0), g = C(
    (t, i) => {
      r(t, i);
    },
    [r]
  ), N = () => {
    f();
  }, v = () => {
    !n[e] && l[e].type !== "OPEN" || (e < l.length - 1 && p(e + 1), e === l.length - 1 && N());
  }, b = () => {
    if (e === 0) {
      c == null || c();
      return;
    }
    e > 0 && p(e - 1);
  };
  return /* @__PURE__ */ a.jsxs("div", { className: "steppers", children: [
    /* @__PURE__ */ a.jsxs("div", { className: "steppers-header pb-2  align-items-center", children: [
      /* @__PURE__ */ a.jsx("p", { className: "steppers-header-question-title", children: l[e].question }),
      /* @__PURE__ */ a.jsxs("span", { className: "steppers-header-question-number", children: [
        e + 1,
        "/",
        l.length
      ] })
    ] }),
    /* @__PURE__ */ a.jsx("div", { className: "steppers-content", "aria-live": "polite", children: l[e].type === "CLOSE" ? /* @__PURE__ */ a.jsx("div", { className: "list-group", children: l[e].answers.map((t, i) => {
      var h, d;
      return /* @__PURE__ */ a.jsxs(
        "label",
        {
          htmlFor: `checkbox-${t.id}`,
          className: " fw-regular fs-6 list-group-item ",
          children: [
            /* @__PURE__ */ a.jsx(
              "input",
              {
                type: "radio",
                id: `checkbox-${t.id}`,
                name: `question-${e}`,
                value: t.answer,
                checked: ((d = (h = n == null ? void 0 : n[e]) == null ? void 0 : h.answer) == null ? void 0 : d.includes(t)) || !1,
                onChange: () => g(l[e].id, t),
                className: "custom-control-input form-check-input me-2 black-focus"
              }
            ),
            t.answer
          ]
        },
        `${l[e].id}-${i}`
      );
    }) }) : /* @__PURE__ */ a.jsxs("div", { className: "form-group d-flex flex-column gap-1", children: [
      /* @__PURE__ */ a.jsx(
        "input",
        {
          type: "text",
          placeholder: j,
          className: "form-control black-focus",
          value: s,
          onChange: (t) => t.target.value.length <= 200 && x(t.target.value),
          autoFocus: !0
        }
      ),
      /* @__PURE__ */ a.jsxs("div", { className: "d-flex justify-content-between align-items-center max-chars-container", children: [
        m && /* @__PURE__ */ a.jsx("p", { className: " fs-6 fw-normal ", children: m }),
        s && s.length > 0 && /* @__PURE__ */ a.jsxs("p", { className: "active fs-6 fw-normal ", children: [
          s.length,
          "/200"
        ] })
      ] })
    ] }) }),
    /* @__PURE__ */ a.jsxs("nav", { className: "steppers-nav no-border shadow-none align-items-center justify-content-center gap-4 flex-wrap", children: [
      /* @__PURE__ */ a.jsx(
        u,
        {
          className: "feedback-button-back",
          onClick: b,
          children: o.previous
        }
      ),
      /* @__PURE__ */ a.jsx(
        u,
        {
          className: "feedback-button-next",
          onClick: v,
          disabled: e === l.length,
          children: o.next
        }
      )
    ] })
  ] });
}
export {
  O as Questions
};
//# sourceMappingURL=index.es441.js.map