@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/esnext.iterator.map.js");
var _List = _interopRequireDefault(require("@mui/material/List"));
var _ListItemButton = _interopRequireDefault(require("@mui/material/ListItemButton"));
var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
var _Collapse = _interopRequireDefault(require("@mui/material/Collapse"));
var _ExpandLess = _interopRequireDefault(require("@mui/icons-material/ExpandLess"));
var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
var _react = require("react");
var _AddonSubItem = _interopRequireDefault(require("./AddonSubItem"));
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);
  (0, _react.useEffect)(() => {
    if (open && listRef.current && parentRef.current) {
      setTimeout(() => {
        if (listRef.current && parentRef.current) {
          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);
    }
  }, [open, listRef]);
  const handleClick = () => {
    setOpen(!open);
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ListItemButton.default, {
      onClick: handleClick,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
        primary: addon.whoAmI,
        primaryTypographyProps: {
          fontSize: "16px",
          fontFamily: "Lato Regular"
        }
      }), open ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandLess.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {})]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Collapse.default, {
      in: open,
      timeout: "auto",
      unmountOnExit: true,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.default, {
        sx: {
          width: "100%",
          maxWidth: 360,
          bgcolor: "background.paper"
        },
        dense: true,
        ref: listRef,
        children: addon.addonInputs.map((addonInput, idx) => {
          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AddonSubItem.default, {
            addonSubItem: addonInput
          }, idx);
        })
      })
    })]
  });
}