@etsoo/materialui
Version:
TypeScript Material-UI Implementation
55 lines (54 loc) • 2.83 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TabBox = TabBox;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@etsoo/react");
const shared_1 = require("@etsoo/shared");
const Box_1 = __importDefault(require("@mui/material/Box"));
const Tab_1 = __importDefault(require("@mui/material/Tab"));
const Tabs_1 = __importDefault(require("@mui/material/Tabs"));
const react_2 = __importDefault(require("react"));
function isActionTab(children) {
return typeof children === "function" && children.length === 0;
}
/**
* Tabs with box
* @param props Props
* @returns Component
*/
function TabBox(props) {
// Destruct
const { index, indexField = "index", inputName, root, defaultIndex = 0, onChange, tabProps, tabs, ...rest } = props;
// State
const [params, setSearchParams] = (0, react_1.useSearchParamsEx1)({
[indexField]: "number"
});
const [value, setValue] = react_2.default.useState(params[indexField] ?? defaultIndex);
react_2.default.useEffect(() => {
if (index == null)
return;
setValue(index);
}, [index]);
// Layout
return ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [inputName && (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: inputName, value: value }), (0, jsx_runtime_1.jsx)(Box_1.default, { ...root, children: (0, jsx_runtime_1.jsx)(Tabs_1.default, { value: value, onChange: (event, newValue) => {
setSearchParams((prev) => {
if (newValue == defaultIndex)
prev.delete(indexField);
else
prev.set(indexField, newValue);
return prev;
});
const { children } = tabs[newValue];
if (isActionTab(children)) {
children();
}
else {
setValue(newValue);
if (onChange)
onChange(event, newValue);
}
}, ...rest, children: tabs.map(({ children, panelProps, ...tabRest }, index) => ((0, jsx_runtime_1.jsx)(Tab_1.default, { value: index, ...tabRest }, index))) }) }), tabs.map(({ children, panelProps }, index) => ((0, jsx_runtime_1.jsx)(Box_1.default, { hidden: value !== index, ...tabProps, ...panelProps, children: isActionTab(children) ? ((0, jsx_runtime_1.jsx)(react_2.default.Fragment, {})) : (shared_1.Utils.getResult(children, value === index)) }, index)))] }));
}