fui-fancyui
Version:
FancyUI Libary
86 lines (85 loc) • 2.56 kB
JavaScript
"use client";
import { jsx as d, jsxs as $ } from "react/jsx-runtime";
import B, { useRef as D, useState as j } from "react";
import F from "../../atoms/SwitchActiveIndicator/SwitchActiveIndicator.js";
import P from "../FancyTabSwitchButton/FancyTabSwitchButton.js";
import { generateBorderRadiusForComponentOnlyValue as U } from "../../../design/designFunctions/generateBorderRadiusForComponent/generateBorderRadiusForComponent.js";
import { ULButtonSwitchList as z, ItemWrapper as H } from "./TabSwitch.style.js";
function E(w) {
const {
values: t,
textColor: b = "secondary",
textLayer: K = 0,
sizeC: s = "md",
wide: x,
disabled: m,
tabSpacing: y,
borderRadius: l,
direction: u,
outlined: g,
currentSelect: S,
handler: c,
iconAlign: T,
activeTextThemeType: R,
switchIndicatorThemeType: I,
indicatorType: k,
...A
} = w, p = D(t.map(() => B.createRef())), [i, C] = j(S), f = (e) => {
const r = t.find((o) => o.itemKey === e);
C(e), c == null || c(r == null ? void 0 : r.itemKey);
}, L = (e, r) => {
var h;
const o = t.findIndex((a) => a.itemKey === r);
let n = -1;
if (e.key === "ArrowRight" || e.key === "ArrowDown" ? n = (o + 1) % t.length : (e.key === "ArrowLeft" || e.key === "ArrowUp") && (n = (o - 1 + t.length) % t.length), n !== -1) {
const a = t[n].itemKey;
f(a), (h = p.current[n].current) == null || h.focus();
}
};
return /* @__PURE__ */ d(
z,
{
$tabSpacing: y,
$wide: x,
$direction: u,
$disabled: m,
role: "radiogroup",
...A,
children: t.map((e, r) => /* @__PURE__ */ $(H, { children: [
/* @__PURE__ */ d(
P,
{
sizeC: s,
disabled: m,
themeType: b,
layer: K,
activeTextThemeType: R,
iconAlign: T,
...e,
ref: p.current[r],
selected: e.itemKey === i,
"aria-checked": e.itemKey === i,
onClick: () => f(e.itemKey),
onKeyDown: (o) => L(o, e.itemKey),
tabIndex: e.itemKey === i ? 0 : -1
}
),
r === 0 && /* @__PURE__ */ d(
F,
{
outlined: g,
borderRadius: l || U({ sizeC: s }),
type: k ?? "bolb",
itemNumber: t.findIndex((o) => o.itemKey === i),
themeType: I,
direction: u,
tabSpacing: y
}
)
] }, e.itemKey))
}
);
}
export {
E as default
};