@smitch/fluid
Version:
A Next/React ui-component libray.
68 lines (67 loc) • 3.75 kB
JavaScript
'use client';
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useState, useEffect, useMemo } from 'react';
import { twMerge } from 'tailwind-merge';
import TabBar from './TabBar';
var defaultTabStyles = 'border border-transparent px-4 py-2 rounded-t w-full';
var defaultActiveTabStyles = 'border-x-neutral border-t-neutral bg-light dark:bg-dark';
var minimalTabStyles = 'border-b-4 border-b-transparent px-4 py-2 dark:text-light hover:border-b-accent';
var minimalActiveTabStyles = '!border-b-info hover:cursor-default font-bold';
var sizes = {
sm: 'text-sm',
md: 'text-base',
lg: 'text-xl',
xl: 'text-2xl',
xxl: 'text-4xl',
};
var Tabs = function (_a) {
var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.defaultActiveId, defaultActiveId = _c === void 0 ? '' : _c, _d = _a.tabStyles, tabStyles = _d === void 0 ? defaultTabStyles : _d, _e = _a.activeTabStyles, activeTabStyles = _e === void 0 ? defaultActiveTabStyles : _e, icons = _a.icons, children = _a.children, _f = _a.minimalTabs, minimalTabs = _f === void 0 ? false : _f, _g = _a.contentBorder, contentBorder = _g === void 0 ? false : _g, _h = _a.tabSize, tabSize = _h === void 0 ? 'md' : _h, tabsPosition = _a.tabsPosition;
var _j = useState(null), tabs = _j[0], setTabs = _j[1];
var _k = useState(defaultActiveId), activeId = _k[0], setActiveId = _k[1];
var _l = useState(null), nodes = _l[0], setNodes = _l[1];
var content = useCallback(function (contentRefNode) {
var arrTabs = [];
if (contentRefNode) {
var buildTabs = function (item, index) {
var tabObject = {
id: item.id,
key: item.id,
title: icons ? icons[index] : item.title,
};
arrTabs.push(tabObject);
};
setTabs(arrTabs);
var children_1 = __spreadArray([], contentRefNode.children, true);
setNodes(children_1);
children_1.forEach(buildTabs);
}
}, [icons]);
useEffect(function () {
var setDisplay = function (item) {
if (item.id === activeId) {
item.classList.add('block');
item.classList.remove('hidden');
}
else {
item.classList.add('hidden');
item.classList.remove('block');
}
};
var setActive = function (item) { return setDisplay(item); };
if (activeId && nodes)
nodes.forEach(setActive);
}, [activeId, nodes]);
var handleClick = function (id) { return setActiveId(id); };
var sizeClasses = useMemo(function () { return sizes[tabSize]; }, [tabSize]);
return (_jsxs("div", { className: twMerge("tabs mx-auto w-full ".concat(minimalTabs ? 'minimal' : ''), className), children: [_jsx(TabBar, { tabs: tabs, tabStyles: "".concat(minimalTabs ? minimalTabStyles : tabStyles, " ").concat(sizeClasses), activeTabStyles: "".concat(minimalTabs ? minimalActiveTabStyles : activeTabStyles, " "), activeId: activeId, onClick: handleClick, tabsPosition: tabsPosition }), _jsx("div", { ref: content, className: "tabwrapper bg-light dark:bg-dark p-0 ".concat(contentBorder ? 'border rounded' : 'border-t', " border-neutral"), children: children })] }));
};
export default Tabs;