@tolokoban/ui
Version:
React components with theme
53 lines • 7.18 kB
JavaScript
import { createElement as _createElement } from "react";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import { classnameCommon, Theme } from "../../theme/index.js";
import { ViewTab } from "../Tab/index.js";
import Styles from "./Tabs.module.css";
import { styleDimension, } from "../../theme/styles/dimension.js";
const $ = Theme.classNames;
export function ViewTabs(props) {
var _a, _b, _c;
const { className, children: rawChildren, orientation = "horizontal", value, onChange, color = "neutral-3", colorAccent = "primary-5", outline = "0", highlight, opposite, } = props;
const children = filterChildren(rawChildren);
const tabs = addMissingKeys(children);
const [tabKey, setTabKey] = React.useState((_b = value !== null && value !== void 0 ? value : (_a = tabs[0]) === null || _a === void 0 ? void 0 : _a.key) !== null && _b !== void 0 ? _b : "Tab#0");
const tab = tabs.find((item) => item.key === tabKey);
console.log("🚀 [Tabs] opposite =", opposite); // @FIXME: Remove this line written on 2025-08-28 at 11:31
return (_jsxs("div", { style: Object.assign(Object.assign({}, styleDimension(props)), { "--custom-color-back": `var(--theme-color-${color})`, "--custom-color-text": `var(--theme-color-on-${color})`, "--custom-color-highlight-back": `var(--theme-color-${colorAccent})`, "--custom-color-highlight-text": `var(--theme-color-on-${colorAccent})`, "--custom-outline": outline, "--custom-highlight": (_c = highlight !== null && highlight !== void 0 ? highlight : outline) !== null && _c !== void 0 ? _c : "4px" }), className: $.join(className, Styles.Tabs, orientation === "vertical" && Styles.vertical, classnameCommon(props)), children: [_jsx("header", { className: opposite && Styles.opposite, children: tabs.map((item) => {
const { key } = item;
return key === tabKey ? (_jsx("div", { children: item.props.label }, key)) : (_jsx("button", { type: "button", onClick: () => {
setTabKey(key);
onChange === null || onChange === void 0 ? void 0 : onChange(key);
}, children: item.props.label }, key));
}) }), _jsx("main", { children: tab === null || tab === void 0 ? void 0 : tab.props.children })] }));
}
/**
* Use this function to always have the selected tab in first position.
* @param tabs
* @param tab
* @returns
*/
function wrap(tabs, tab) {
if (!tab)
return tabs;
const index = tabs.indexOf(tab);
if (index < 0)
return tabs;
return [...tabs.slice(index), ...tabs.slice(0, index)];
}
function addMissingKeys(children) {
const rawTabs = Array.isArray(children)
? children
: [children];
return rawTabs.map((tab, index) => {
var _a;
return (_createElement(ViewTab, Object.assign({}, tab.props, { key: (_a = tab.key) !== null && _a !== void 0 ? _a : `Tab#${index}` }), tab.props.children));
});
}
function filterChildren(children) {
if (Array.isArray(children))
return children.filter((child) => Boolean(child.props.children));
return children.props.children ? [children] : [];
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFicy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy92aWV3L1RhYnMvVGFicy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7QUFBQSxPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUU5QixPQUFPLEVBQUUsZUFBZSxFQUFFLEtBQUssRUFBRSxNQUFNLHNCQUFzQixDQUFBO0FBQzdELE9BQU8sRUFBRSxPQUFPLEVBQWdCLE1BQU0sUUFBUSxDQUFBO0FBRTlDLE9BQU8sTUFBTSxNQUFNLG1CQUFtQixDQUFBO0FBQ3RDLE9BQU8sRUFFSCxjQUFjLEdBQ2pCLE1BQU0sOEJBQThCLENBQUE7QUFJckMsTUFBTSxDQUFDLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FBQTtBQTJDMUIsTUFBTSxVQUFVLFFBQVEsQ0FBQyxLQUFvQjs7SUFDekMsTUFBTSxFQUNGLFNBQVMsRUFDVCxRQUFRLEVBQUUsV0FBVyxFQUNyQixXQUFXLEdBQUcsWUFBWSxFQUMxQixLQUFLLEVBQ0wsUUFBUSxFQUNSLEtBQUssR0FBRyxXQUFXLEVBQ25CLFdBQVcsR0FBRyxXQUFXLEVBQ3pCLE9BQU8sR0FBRyxHQUFHLEVBQ2IsU0FBUyxFQUNULFFBQVEsR0FDWCxHQUFHLEtBQUssQ0FBQTtJQUNULE1BQU0sUUFBUSxHQUNWLGNBQWMsQ0FBQyxXQUFXLENBQUMsQ0FBQTtJQUMvQixNQUFNLElBQUksR0FDTixjQUFjLENBQUMsUUFBUSxDQUFDLENBQUE7SUFDNUIsTUFBTSxDQUFDLE1BQU0sRUFBRSxTQUFTLENBQUMsR0FBRyxLQUFLLENBQUMsUUFBUSxDQUFDLE1BQUEsS0FBSyxhQUFMLEtBQUssY0FBTCxLQUFLLEdBQUksTUFBQSxJQUFJLENBQUMsQ0FBQyxDQUFDLDBDQUFFLEdBQUcsbUNBQUksT0FBTyxDQUFDLENBQUE7SUFDNUUsTUFBTSxHQUFHLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLElBQUksRUFBRSxFQUFFLENBQUMsSUFBSSxD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