flex-element-tabs
Version:
flex-element-tabs is a versatile JavaScript library for creating dynamic tabs in web interfaces. It offers customizable, lightweight, and easy-to-integrate tab components, enhancing user navigation and content organization in web applications.
50 lines • 2.24 kB
JavaScript
import React, { useEffect, useState } from 'react';
import "./TabsContainer.css";
var TabsContainer = function (_a) {
var active = _a.active, children = _a.children, headClass = _a.headClass, itemClass = _a.itemClass, containerClass = _a.containerClass;
var _b = useState(0), Show = _b[0], setShow = _b[1];
var _c = useState(), Content = _c[0], setContent = _c[1];
useEffect(function () {
if (children !== undefined) {
setContent((children === null || children === void 0 ? void 0 : children.length) === undefined ? [{
props: {
title: children.props.title,
children: children.props.children
}
}] : children);
}
if (active === undefined) {
setShow(1);
}
else {
var ch = (children || []);
if (active <= ch.length) {
if (active === 0) {
setShow(1);
}
else {
setShow(active);
}
}
else {
setShow(1);
}
}
}, [active, children]);
return (React.createElement("div", null, children === undefined ?
React.createElement("div", { className: 'tabs-no-data' },
"Expecting ",
"<TabsItem>",
" in ",
"<TabsContainer>")
:
React.createElement("div", null,
React.createElement("div", { className: "tabs-head ".concat(headClass) }, (Content || []).map(function (d, x) {
return (React.createElement("div", { className: "tabs-item ".concat(Show === (x + 1) ? "active" : "", " ").concat(itemClass), key: "tabs-item-".concat(x), onClick: function () { setShow(x + 1); } }, d.props.title));
})),
(Content || []).map(function (d, x) {
return (React.createElement("div", { className: "tabs-container ".concat(Show === (x + 1) ? "active" : "", " ").concat(containerClass), key: "tabs-container-".concat(x) }, d.props.children));
}))));
};
export default TabsContainer;
//# sourceMappingURL=TabsContainer.js.map