@robotical/sensors-dashboard
Version:
A dashboard tool for depicting Marty data by Robotical
82 lines (81 loc) • 4.13 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = HowToUseModal;
require("core-js/modules/web.dom-collections.iterator.js");
var _react = require("react");
var _ModalState = _interopRequireDefault(require("../../../state-observables/modal/ModalState"));
var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
var _GeneralInfo = _interopRequireDefault(require("./GeneralInfo"));
var _Terminology = _interopRequireDefault(require("./Terminology"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function HowToUseModal() {
const [activeTab, setActiveTab] = (0, _react.useState)("general-info");
const tabsId = (0, _react.useId)();
const quickStartTabRef = (0, _react.useRef)(null);
const terminologyTabRef = (0, _react.useRef)(null);
const selectTab = tab => {
setActiveTab(tab);
if (tab === "general-info") {
var _quickStartTabRef$cur;
(_quickStartTabRef$cur = quickStartTabRef.current) === null || _quickStartTabRef$cur === void 0 ? void 0 : _quickStartTabRef$cur.focus();
} else {
var _terminologyTabRef$cu;
(_terminologyTabRef$cu = terminologyTabRef.current) === null || _terminologyTabRef$cu === void 0 ? void 0 : _terminologyTabRef$cu.focus();
}
};
const handleTabKeyDown = event => {
if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
event.preventDefault();
selectTab(activeTab === "general-info" ? "terminology" : "general-info");
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: _stylesModule.default.howToUseModalContainer,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
className: _stylesModule.default.modalIntro,
children: "Follow the quick start to create a live sensor graph, or look up what each sensor reports."
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: _stylesModule.default.tabs,
role: "tablist",
"aria-label": "Dashboard guide sections",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
ref: quickStartTabRef,
type: "button",
role: "tab",
id: "".concat(tabsId, "-quick-start-tab"),
"aria-controls": "".concat(tabsId, "-quick-start-panel"),
"aria-selected": activeTab === "general-info",
tabIndex: activeTab === "general-info" ? 0 : -1,
className: "".concat(_stylesModule.default.button, " ").concat(activeTab === "general-info" ? _stylesModule.default.activeTab : ''),
onClick: () => selectTab("general-info"),
onKeyDown: handleTabKeyDown,
children: "Quick start"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
ref: terminologyTabRef,
type: "button",
role: "tab",
id: "".concat(tabsId, "-terminology-tab"),
"aria-controls": "".concat(tabsId, "-terminology-panel"),
"aria-selected": activeTab === "terminology",
tabIndex: activeTab === "terminology" ? 0 : -1,
className: "".concat(_stylesModule.default.button, " ").concat(activeTab === "terminology" ? _stylesModule.default.activeTab : ''),
onClick: () => selectTab("terminology"),
onKeyDown: handleTabKeyDown,
children: "Sensor terms"
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: _stylesModule.default.tabContent,
role: "tabpanel",
id: "".concat(tabsId, "-").concat(activeTab === "general-info" ? "quick-start" : "terminology", "-panel"),
"aria-labelledby": "".concat(tabsId, "-").concat(activeTab === "general-info" ? "quick-start" : "terminology", "-tab"),
children: [activeTab === "general-info" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralInfo.default, {}), activeTab === "terminology" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Terminology.default, {})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
type: "button",
className: _stylesModule.default.closeButton,
onClick: () => _ModalState.default.closeModal(),
children: "Close guide"
})]
});
}