@danilandreev/material-docs/components/DocsPage/NavigationList.js

material-docs - react framework for easy creating documentation site in material design style.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.displayName = void 0;

var _react = _interopRequireDefault(require("react"));

var _List = _interopRequireDefault(require("@material-ui/core/List"));

var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));

var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));

var _ListItemText = _interopRequireDefault(require("@material-ui/core/ListItemText"));

var _styles = require("./styles");

var _clsx = _interopRequireDefault(require("clsx"));

var _core = require("@material-ui/core");

var _usePageScroll2 = _interopRequireDefault(require("../../utils/usePageScroll"));

var _getElementOffsetSum2 = _interopRequireDefault(require("../../utils/getElementOffsetSum"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _withWidth = _interopRequireDefault(require("@material-ui/core/withWidth"));

var _styles2 = require("@material-ui/styles");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

var displayName = "MatDocNavigationList";
exports.displayName = displayName;

var NavigationList = /*#__PURE__*/_react.default.forwardRef(function NavigationList(props, ref) {
  var keys = props.keys,
      width = props.width,
      classes = props.classes;

  var _usePageScroll = (0, _usePageScroll2.default)(),
      scrollY = _usePageScroll.scrollY;

  var _React$useState = _react.default.useState({
    id: keys[0] && keys[0].id || null,
    clicked: false
  }),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      selected = _React$useState2[0],
      setSelected = _React$useState2[1];

  if (keys && !Array.isArray(keys)) throw new TypeError("MaterialDocs: keys must be array type!");

  _react.default.useEffect(function () {
    function getClosestId(elements, func) {
      var closestDistance = func(elements.map(function (element) {
        return element.offset;
      }));
      var closest = elements.find(function (item) {
        return item.offset === closestDistance;
      }) || null;
      var closestId = closest && closest.id;
      return closestId;
    }

    if (selected.clicked) {
      setSelected(_objectSpread({}, selected, {
        clicked: false
      }));
      return;
    }

    var elements = keys.map(function (item) {
      var ref = item.ref,
          id = item.id;
      var offset = 0;

      try {
        var _getElementOffsetSum = (0, _getElementOffsetSum2.default)(ref.current),
            top = _getElementOffsetSum.top;

        offset = scrollY - (top - 64); // 64 - is a height of header;
      } catch (error) {}

      return {
        id: id,
        offset: offset
      };
    });

    if (scrollY >= document.body.clientHeight - window.innerHeight) {
      var _closestId = getClosestId(elements, function (elems) {
        return Math.min.apply(Math, elems);
      });

      setSelected({
        id: _closestId,
        clicked: false
      });
      return;
    }

    if (elements.every(function (element) {
      return element.offset < 0;
    })) {
      var _closestId2 = getClosestId(elements, function (elems) {
        return Math.max.apply(Math, elems);
      });

      setSelected({
        id: _closestId2,
        clicked: false
      });
      return;
    }

    elements = elements.filter(function (item) {
      return item.offset >= 0;
    });
    var closestId = getClosestId(elements, function (elems) {
      return Math.min.apply(Math, elems);
    });
    setSelected({
      id: closestId || null,
      clicked: false
    });
  }, [scrollY, keys]);

  if (!keys || !keys.length) {
    return null;
  }

  if (!(0, _core.isWidthUp)("md", width)) return null;
  return /*#__PURE__*/_react.default.createElement(_List.default, {
    dense: true,
    style: {
      position: "fixed",
      width: "100%"
    },
    ref: ref
  }, /*#__PURE__*/_react.default.createElement(_ListItem.default, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
    variant: "h6"
  }, "Content")), keys.map(function (key) {
    var active = key.id === selected.id;
    return /*#__PURE__*/_react.default.createElement(_core.Link, {
      underline: "none",
      href: "#".concat(key.id),
      key: key.id,
      className: classes.contentLink,
      onClick: function onClick(event) {
        return setSelected({
          id: key.id,
          clicked: true
        });
      }
    }, /*#__PURE__*/_react.default.createElement(_ListItem.default, {
      button: true,
      className: (0, _clsx.default)(classes.contentItem, active && classes.contentItemActive)
    }, /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
      primary: key.label,
      primaryTypographyProps: {
        variant: "subtitle2",
        color: active ? "textPrimary" : "textSecondary",
        className: classes.typography
      },
      className: classes.typography
    })));
  }));
});

NavigationList.displayName = displayName;
NavigationList.propTypes = {
  keys: _propTypes.default.array
};

var _default = (0, _styles2.withStyles)(_styles.styles, {
  name: displayName
})((0, _withWidth.default)()(NavigationList));

exports.default = _default;