@wener/console
Version:
Base console UI toolkit
60 lines (59 loc) • 2.48 kB
JavaScript
import React, { forwardRef } from "react";
import { NavLink } from "react-router-dom";
import { flexRender, useControllable } from "@wener/reaction";
import { clsx } from "clsx";
import { cn } from "../../tw/cn.js";
export function getTitleTabItemKey(item, index) {
return item.key ?? String(index);
}
export const TitleTabList = /*#__PURE__*/ forwardRef(({ className, value, onValueChange, defaultValue, title, action, tabs, ...props }, ref) => {
const [current, setCurrent] = useControllable(value, onValueChange, defaultValue);
return /*#__PURE__*/ React.createElement("div", {
ref: ref,
className: cn("flex items-end", className),
...props
}, /*#__PURE__*/ React.createElement("div", {
className: "border-color flex h-full items-center px-2",
style: {
// border-b-[--tab-border] not works
borderBottomWidth: "var(--tab-border,1px)"
}
}, /*#__PURE__*/ React.createElement("h3", {
className: "text-lg font-medium"
}, title)), /*#__PURE__*/ React.createElement("div", {
role: "tablist",
className: "tabs tabs-lifted tabs-sm"
}, tabs.map((item, index) => {
const { label, href, icon } = item;
const key = getTitleTabItemKey(item, index);
const content = /*#__PURE__*/ React.createElement(React.Fragment, null, flexRender(icon, {
className: "w-4 h-4"
}), label);
let isActive = key === current;
return href ? /*#__PURE__*/ React.createElement(NavLink, {
to: href,
role: "tab",
className: ({ isActive }) => clsx("tab", isActive && "tab-active"),
key: index
}, content) : /*#__PURE__*/ React.createElement("a", {
role: "tab",
className: clsx("tab", isActive && "tab-active"),
key: index,
onClick: () => {
setCurrent(key);
}
}, content);
})), /*#__PURE__*/ React.createElement("div", {
className: "border-color flex-1 border-b",
style: {
// border-b-[--tab-border] not works
borderBottomWidth: "var(--tab-border,1px)"
}
}), action && /*#__PURE__*/ React.createElement("div", {
className: "border-color flex items-center self-stretch border-b pr-1",
style: {
borderBottomWidth: "var(--tab-border,1px)"
}
}, action));
});
//# sourceMappingURL=TitleTabList.js.map