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

FSE UI components library

import { j as a } from "./index.es237.js";
import './components/ui/Feedback/Questions.css';/* empty css            */
import { useState as b, useCallback as k } from "react";
import { Button as h } from "./index.es32.js";
function E({
  questions: l,
  onChangeAnswer: i,
  onSend: u,
  values: s,
  openAnswer: c,
  handleOpenAnswer: f,
  buttons: r,
  maxCharactersMessage: o,
  openAnswerPlaceholder: x
}) {
  const [e, m] = b(0), j = k(
    (t, n) => {
      i(t, n);
    },
    [i]
  ), g = () => {
    u();
  }, N = () => {
    !s[e] && l[e].type !== "OPEN" || (e < l.length - 1 && m(e + 1), e === l.length - 1 && g());
  }, v = () => {
    e > 0 && m(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, n) => {
      var d, p;
      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: ((p = (d = s == null ? void 0 : s[e]) == null ? void 0 : d.answer) == null ? void 0 : p.includes(t)) || !1,
                onChange: () => j(l[e].id, t),
                className: "custom-control-input form-check-input me-2 black-focus"
              }
            ),
            t.answer
          ]
        },
        `${l[e].id}-${n}`
      );
    }) }) : /* @__PURE__ */ a.jsxs("div", { className: "form-group d-flex flex-column gap-1", children: [
      /* @__PURE__ */ a.jsx(
        "input",
        {
          type: "text",
          placeholder: x,
          className: "form-control black-focus",
          value: c,
          onChange: (t) => t.target.value.length <= 200 && f(t.target.value),
          autoFocus: !0
        }
      ),
      /* @__PURE__ */ a.jsxs("div", { className: "d-flex justify-content-between align-items-center max-chars-container", children: [
        o && /* @__PURE__ */ a.jsx("p", { className: " fs-6 fw-normal ", children: o }),
        c && c.length > 0 && /* @__PURE__ */ a.jsxs("p", { className: "active fs-6 fw-normal ", children: [
          c.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(
        h,
        {
          className: "feedback-button-back",
          onClick: v,
          disabled: e === 0,
          children: r.previous
        }
      ),
      /* @__PURE__ */ a.jsx(
        h,
        {
          className: "feedback-button-next",
          onClick: N,
          disabled: e === l.length,
          children: r.next
        }
      )
    ] })
  ] });
}
export {
  E as Questions
};
//# sourceMappingURL=index.es396.js.map