@rabahzeineddine/material-ui
Version:
Material ui custom components
62 lines (61 loc) • 3.32 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@material-ui/core");
var react_1 = __importDefault(require("react"));
var react_swipeable_views_1 = __importDefault(require("react-swipeable-views"));
var styles_1 = require("@material-ui/core/styles");
var style_1 = __importDefault(require("./style"));
var Tab_1 = __importDefault(require("./Tab"));
var TabPanel_1 = __importDefault(require("./TabPanel"));
var useStyles = styles_1.makeStyles(style_1.default);
function a11yProps(index) {
return {
id: "tab-" + index,
"aria-controls": "tabpanel-" + index,
};
}
function Tabs(props) {
var classes = useStyles();
var _a = react_1.default.useState(0), value = _a[0], setValue = _a[1];
var theme = core_1.useTheme();
var handleChange = function (_event, newValue) {
setValue(newValue);
};
var handleChangeIndex = function (index) {
setValue(index);
};
if (!props.children ||
react_1.default.Children.toArray(props.children).length === 0 ||
react_1.default.Children.toArray(props.children).some(function (child) { return !react_1.default.isValidElement(child) || child.type !== Tab_1.default; })) {
return react_1.default.createElement("div", null, "Invalid Tab Component");
}
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(core_1.AppBar, { position: "static", color: "default" },
react_1.default.createElement(core_1.Tabs, { value: value, onChange: handleChange, indicatorColor: "primary", textColor: "primary", "aria-label": "Tabs", variant: props.fullWidth ? "fullWidth" : "standard" }, react_1.default.Children.map(props.children, function (child, index) {
if (!react_1.default.isValidElement(child))
return child;
return (react_1.default.createElement(core_1.Tab, __assign({ key: index, label: child.props.label, disabled: child.props.disabled }, a11yProps(index))));
}))),
react_1.default.createElement(react_swipeable_views_1.default, { axis: theme.direction === "rtl" ? "x-reverse" : "x", index: value, onChangeIndex: handleChangeIndex, className: classes.content }, react_1.default.Children.map(props.children, function (child, index) {
if (!react_1.default.isValidElement(child))
return child;
var Component = child.props.component;
return (react_1.default.createElement(TabPanel_1.default, { key: index, value: value, index: index, dir: theme.direction, hideOnSwitch: child.props.hideOnSwitch },
react_1.default.createElement(Component, __assign({}, child.props.componentProps))));
}))));
}
exports.default = Tabs;