@hisptz/react-ui
Version:
A collection of reusable complex DHIS2 react ui components.
47 lines (45 loc) • 1.95 kB
JavaScript
import { useDataEngine } from "@dhis2/app-runtime";
import { Tab, TabBar } from "@dhis2/ui";
import { getDataSourceType } from "./../../../../core/utils/dataSource";
import PropTypes from "prop-types";
import React, { useEffect, useState } from "react";
import styles from './TopBar.module.css';
export default function TopBar(_ref) {
let {
dataSources,
onTabChange,
selectedTab
} = _ref;
const engine = useDataEngine();
const [data, setData] = useState();
useEffect(() => {
const fetchData = async () => {
const data = await Promise.all(dataSources.map(async source => await getDataSourceType(engine, source.id)));
setData(data.map(x => ({
id: x.object.id,
label: x.object.name
})));
};
fetchData().catch();
}, [dataSources]);
return /*#__PURE__*/React.createElement(TabBar, null, /*#__PURE__*/React.createElement("div", {
style: {
width: "100%",
overflowX: "auto",
display: "flex"
},
className: styles["scrollbar-hidden"]
}, data === null || data === void 0 ? void 0 : data.map((dataSource, index) => {
var _dataSource$label;
return /*#__PURE__*/React.createElement(Tab, {
selected: (selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.id) === (dataSource === null || dataSource === void 0 ? void 0 : dataSource.id),
onClick: () => onTabChange(dataSource),
key: "".concat(dataSource === null || dataSource === void 0 ? void 0 : dataSource.id, "-tab-").concat(index)
}, (_dataSource$label = dataSource === null || dataSource === void 0 ? void 0 : dataSource.label) !== null && _dataSource$label !== void 0 ? _dataSource$label : dataSource === null || dataSource === void 0 ? void 0 : dataSource.displayName);
})));
}
TopBar.propTypes = {
dataSources: PropTypes.arrayOf(PropTypes.object).isRequired,
selectedTab: PropTypes.object.isRequired,
onTabChange: PropTypes.func.isRequired
};