@uva-glass/component-library
Version:
React components UvA
111 lines (110 loc) • 4.16 kB
JavaScript
import { jsxs as F, jsx as r } from "react/jsx-runtime";
import { useState as S } from "react";
import { c as a } from "../../clsx-OuTLNxxd.js";
import { Label as L } from "../Label/Label.js";
import { FeedbackBox as $ } from "../FeedbackBox/FeedbackBox.js";
import { ControlsButton as C } from "../ControlsButton/ControlsButton.js";
import '../../assets/CheckboxButtonBar.css';const e = {
"checkbox-button-bar__container": "_checkbox-button-bar__container_1bsrf_1",
"checkbox-button-bar__container--label-left": "_checkbox-button-bar__container--label-left_1bsrf_6",
"checkbox-button-bar__container--label-top": "_checkbox-button-bar__container--label-top_1bsrf_12",
"checkbox-button-bar__row-container": "_checkbox-button-bar__row-container_1bsrf_18",
"checkbox-button-bar__row-container--segmented": "_checkbox-button-bar__row-container--segmented_1bsrf_24",
"checkbox-button-bar__row": "_checkbox-button-bar__row_1bsrf_18",
"checkbox-button-bar__row--not-valid": "_checkbox-button-bar__row--not-valid_1bsrf_39",
"checkbox-button-bar__footer": "_checkbox-button-bar__footer_1bsrf_43"
}, K = ({
checkboxes: x,
defaultValues: n,
label: f,
labelPosition: y = "top",
required: j = !1,
notValid: m = !1,
notValidatedText: _ = "",
actAsRadioButtonBar: c = !1,
footerText: u = "",
disableGroup: d = !1,
segmented: p = !1,
forceSquared: w = !1,
onSetValues: g
}) => {
const [l, v] = S(
n && !c ? n.map(String) : n && c ? n.slice(0, 1) : []
), N = (b) => {
let o = l;
c ? (v([b]), g([b])) : (o.includes(b) ? o = o.filter((t) => t !== b) : o = [...o, b], v(o), g(o));
};
return /* @__PURE__ */ F(
"div",
{
className: a(
e["checkbox-button-bar__container"],
e[`checkbox-button-bar__container--label-${y}`]
),
children: [
f && /* @__PURE__ */ r(L, { htmlFor: "", required: j, children: f }),
/* @__PURE__ */ r(
"div",
{
className: a(e["checkbox-button-bar__row-container"], {
[e["checkbox-button-bar__row-container--segmented"]]: p
}),
children: p ? x.map(({ label: b, value: o, prefix: t, tooltip: s, tooltipPosition: h, disabled: i }) => /* @__PURE__ */ r(
"div",
{
className: a(e["checkbox-button-bar__row"], {
[e["checkbox-button-bar__row--not-valid"]]: m || _
}),
children: /* @__PURE__ */ r(
C,
{
type: c ? "radio" : "checkbox",
label: b,
prefix: t,
tooltip: s,
tooltipPosition: h,
forceSquared: w,
value: o,
checked: l.includes(o),
disabled: i || d,
onSetValue: (k) => N(k.target.value)
}
)
},
o
)) : /* @__PURE__ */ r(
"div",
{
className: a(e["checkbox-button-bar__row"], {
[e["checkbox-button-bar__row--not-valid"]]: m || _
}),
children: x.map(({ label: b, value: o, prefix: t, tooltip: s, tooltipPosition: h, disabled: i }) => /* @__PURE__ */ r(
C,
{
type: c ? "radio" : "checkbox",
label: b,
prefix: t,
tooltip: s,
tooltipPosition: h,
forceSquared: w,
value: o,
checked: l.includes(o),
disabled: i || d,
onSetValue: (k) => N(k.target.value)
},
o
))
}
)
}
),
u && /* @__PURE__ */ r("div", { className: e["checkbox-button-bar__footer"], children: u }),
_ !== "" && /* @__PURE__ */ r($, { level: "error", feedback: _ })
]
}
);
};
export {
K as CheckboxButtonBar
};
//# sourceMappingURL=CheckboxButtonBar.js.map