@robotical/sensors-dashboard/dist/components/AddonsList/AddonItem/index.js

A dashboard tool for depicting Marty data by Robotical

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = AddonItem;
require("core-js/modules/web.dom-collections.iterator.js");
require("core-js/modules/es.regexp.exec.js");
require("core-js/modules/es.string.replace.js");
require("core-js/modules/esnext.iterator.constructor.js");
require("core-js/modules/esnext.iterator.filter.js");
require("core-js/modules/esnext.iterator.map.js");
var _Collapse = _interopRequireDefault(require("@mui/material/Collapse"));
var _ExpandLess = _interopRequireDefault(require("@mui/icons-material/ExpandLess"));
var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
var _List = _interopRequireDefault(require("@mui/material/List"));
var _ListItemButton = _interopRequireDefault(require("@mui/material/ListItemButton"));
var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
var _react = require("react");
var _AddonSubItem = _interopRequireDefault(require("./AddonSubItem"));
var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function AddonItem(_ref) {
  let {
    addon,
    parentRef
  } = _ref;
  const [open, setOpen] = (0, _react.useState)(false);
  const listRef = (0, _react.useRef)(null);
  const reactId = (0, _react.useId)();
  const signalsId = "addon-signals-".concat(reactId.replace(/:/g, ""));
  const selectedCount = addon.addonInputs.filter(input => input.selected).length;
  (0, _react.useEffect)(() => {
    if (!open || !listRef.current || !parentRef.current) return;
    const timeoutId = window.setTimeout(() => {
      if (!listRef.current || !parentRef.current) return;
      const listItem = listRef.current.getBoundingClientRect();
      const parent = parentRef.current.getBoundingClientRect();
      const parentScrollTop = parentRef.current.scrollTop;
      if (listItem.bottom > parent.bottom) {
        const scrollToPosition = parentScrollTop + (listItem.bottom - parent.bottom);
        parentRef.current.scrollTo({
          top: scrollToPosition,
          behavior: "smooth"
        });
      }
    }, 500);
    return () => window.clearTimeout(timeoutId);
  }, [open, parentRef]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ListItemButton.default, {
      onClick: () => setOpen(value => !value),
      className: _stylesModule.default.addonButton,
      "aria-expanded": open,
      "aria-controls": signalsId,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
        primary: addon.whoAmI,
        secondary: selectedCount > 0 ? "".concat(selectedCount, " selected") : undefined,
        primaryTypographyProps: {
          fontSize: "1.4rem",
          fontFamily: "Lato Regular",
          fontWeight: 600
        },
        secondaryTypographyProps: {
          fontSize: "1.1rem",
          fontFamily: "Lato Regular"
        }
      }), open ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandLess.default, {
        "aria-hidden": "true"
      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {
        "aria-hidden": "true"
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Collapse.default, {
      in: open,
      timeout: "auto",
      unmountOnExit: true,
      id: signalsId,
      role: "region",
      "aria-label": "".concat(addon.whoAmI, " signals"),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.default, {
        dense: true,
        ref: listRef,
        className: _stylesModule.default.subList,
        children: addon.addonInputs.map((addonInput, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_AddonSubItem.default, {
          addonSubItem: addonInput
        }, "".concat(addonInput.name, "-").concat(index)))
      })
    })]
  });
}