@tolokoban/ui
Version:
React components with theme
53 lines • 6.13 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";
import { styleColor } from "../../theme/styles/color.js";
const $ = Theme.classNames;
export function ViewTabs(props) {
var _a, _b;
const { className, children: rawChildren, orientation = "horizontal", value, onChange, } = 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);
return (_jsxs("div", { style: Object.assign(Object.assign({}, styleColor(props)), styleDimension(props)), className: $.join(className, Styles.Tabs, orientation === "vertical" && Styles.vertical, classnameCommon(props)), children: [_jsx("header", { 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFicy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy92aWV3L1RhYnMvVGFicy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7QUFBQSxPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUU5QixPQUFPLEVBQUUsZUFBZSxFQUFFLEtBQUssRUFBRSxNQUFNLHNCQUFzQixDQUFBO0FBQzdELE9BQU8sRUFBRSxPQUFPLEVBQWdCLE1BQU0sUUFBUSxDQUFBO0FBRTlDLE9BQU8sTUFBTSxNQUFNLG1CQUFtQixDQUFBO0FBQ3RDLE9BQU8sRUFFSCxjQUFjLEdBQ2pCLE1BQU0sOEJBQThCLENBQUE7QUFDckMsT0FBTyxFQUFtQixVQUFVLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQTtBQUV0RSxNQUFNLENBQUMsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUFBO0FBc0IxQixNQUFNLFVBQVUsUUFBUSxDQUFDLEtBQW9COztJQUN6QyxNQUFNLEVBQ0YsU0FBUyxFQUNULFFBQVEsRUFBRSxXQUFXLEVBQ3JCLFdBQVcsR0FBRyxZQUFZLEVBQzFCLEtBQUssRUFDTCxRQUFRLEdBQ1gsR0FBRyxLQUFLLENBQUE7SUFDVCxNQUFNLFFBQVEsR0FDVixjQUFjLENBQUMsV0FBVyxDQUFDLENBQUE7SUFDL0IsTUFBTSxJQUFJLEdBQ04sY0FBYyxDQUFDLFFBQVEsQ0FBQyxDQUFBO0lBQzVCLE1BQU0sQ0FBQyxNQUFNLEVBQUUsU0FBUyxDQUFDLEdBQUcsS0FBSyxDQUFDLFFBQVEsQ0FBQyxNQUFBLEtBQUssYUFBTCxLQUFLLGNBQUwsS0FBSyxHQUFJLE1BQUEsSUFBSSxDQUFDLENBQUMsQ0FBQywwQ0FBRSxHQUFHLG1DQUFJLE9BQU8sQ0FBQyxDQUFBO0lBQzVFLE1BQU0sR0FBRyxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxJQUFJLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxHQUFHLEtBQUssTUFBTSxDQUFDLENBQUE7SUFDcEQsT0FB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