fui-fancyui
Version:
FancyUI Libary
65 lines (64 loc) • 1.93 kB
JavaScript
"use client";
import { jsx as m, jsxs as v } from "react/jsx-runtime";
import a, { useState as y, useEffect as b } from "react";
import { css as s } from "styled-components";
import N from "../../../design/theme/themeStore/themeStore.js";
import A from "../../atoms/SwitchActiveIndicator/SwitchActiveIndicator.js";
import p from "../../templates/FancyFlexBox/FancyFlexBox.js";
function H(u) {
const { children: f, whichIndexIsSelected: r, activeItemHandler: n, externalStyle: x, switchIndicator: e, flexBoxProps: d, gap: i } = u, [h, o] = y(""), S = N((t) => t.theme), g = (t) => {
o(t), n && n(Number(t));
};
return b(() => {
o(`${r || 0}`);
}, [r]), /* @__PURE__ */ m(
p,
{
externalStyle: s`
height: 100%;
${x};
`,
gap: i && S.spacing[i],
direction: (e == null ? void 0 : e.direction) === "vertical" ? "column" : "row",
as: "ul",
children: a.Children.map(f, (t, l) => {
if (a.isValidElement(t)) {
const c = `${l}`;
return /* @__PURE__ */ v(
p,
{
externalStyle: s`
position: relative;
flex-grow: 1;
height: 100%;
padding-bottom: 2px;
`,
...d,
as: "li",
onClick: () => g(c),
children: [
t,
l === 0 && /* @__PURE__ */ m(
A,
{
className: "switch-indicator",
direction: e == null ? void 0 : e.direction,
type: (e == null ? void 0 : e.type) ?? "underline",
itemNumber: Number(h),
tabSpacing: i,
...e
}
)
]
},
c
);
}
return t;
})
}
);
}
export {
H as default
};