linkmore-design/es/quick-menu/index.js

🌈 🚀lm组件库。🚀

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useEffect, useState, useRef, useMemo } from 'react';
import { useScroll, useDebounceEffect } from 'ahooks';
import classNames from 'classnames';
import { getTargetElement } from "../_util/domTarget";
import IconFont from "../icon-font";
import Button from "../button";
var prefixCls = 'lm_quick_menu';
var LMQuickMenu = function LMQuickMenu(props) {
  var className = props.className,
    _props$top = props.top,
    top = _props$top === void 0 ? '104px' : _props$top,
    _props$menuData = props.menuData,
    menuData = _props$menuData === void 0 ? [] : _props$menuData,
    warpElement = props.warpElement,
    root = props.root;
  var idTopInfo = useRef({});
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    hovering = _useState2[0],
    setHovering = _useState2[1];
  var menuTimeEventRef = useRef(null);
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    scrollOpenStatus = _useState4[0],
    setScrollOpenStatus = _useState4[1];
  var scrollTimeOut = useRef(null);
  var scroll = useScroll(getTargetElement(warpElement || document), function () {
    return scrollOpenStatus;
  });
  var filterMenuData = useMemo(function () {
    return menuData === null || menuData === void 0 ? void 0 : menuData.filter(function (item) {
      return item.hidden !== true;
    });
  }, [menuData]);
  function clearActiveToc() {
    [].forEach.call(document.querySelectorAll('.lm_menu_list li a'), function (node) {
      node.className = '';
    });
  }
  var updateActiveToc = function updateActiveToc(id) {
    var currentNode = document.querySelectorAll(".lm_menu_list li a[data-id=\"".concat(id, "\"]"))[0];
    if (currentNode) {
      clearActiveToc();
      currentNode.className = 'current';
    }
  };
  var bindScroller = function bindScroller() {
    var _menuTimeEventRef$cur2, _menuTimeEventRef$cur3;
    if (menuTimeEventRef.current) {
      var _menuTimeEventRef$cur;
      (_menuTimeEventRef$cur = menuTimeEventRef.current) === null || _menuTimeEventRef$cur === void 0 ? void 0 : _menuTimeEventRef$cur.destroy();
    }
    if (!filterMenuData.length) {
      return;
    }
    // eslint-disable-next-line global-require
    require('intersection-observer');
    // eslint-disable-next-line global-require
    var scrollama = require('scrollama');
    menuTimeEventRef.current = scrollama();
    console.log(getTargetElement(warpElement || document), '--getTargetElement(warpElement || document)');
    (_menuTimeEventRef$cur2 = menuTimeEventRef.current) === null || _menuTimeEventRef$cur2 === void 0 ? void 0 : (_menuTimeEventRef$cur3 = _menuTimeEventRef$cur2.setup({
      step: filterMenuData.map(function (item) {
        return document.getElementById("".concat(item.menuId));
      }).filter(Boolean),
      // required
      container: getTargetElement(warpElement || document),
      root: root ? getTargetElement(root) : undefined
    })) === null || _menuTimeEventRef$cur3 === void 0 ? void 0 : _menuTimeEventRef$cur3.onStepEnter(function (_ref) {
      var element = _ref.element;
      updateActiveToc(element.id);
    });
  };
  function setKeysDom() {
    filterMenuData.forEach(function (item) {
      var _getTargetElement, _document$getElementB;
      var warpTop = ((_getTargetElement = getTargetElement(warpElement || document)) === null || _getTargetElement === void 0 ? void 0 : _getTargetElement.offsetTop) || 0;
      idTopInfo.current["".concat(item.menuId)] = ((_document$getElementB = document.getElementById("".concat(item.menuId))) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.offsetTop) - warpTop;
    });
  }
  useDebounceEffect(function () {
    if (scroll && !hovering) {
      setHovering(true);
    }
    if (scrollTimeOut.current) {
      clearTimeout(scrollTimeOut.current);
    }
    scrollTimeOut.current = setTimeout(function () {
      setHovering(false);
    }, 2000);
  }, [scroll], {
    wait: 50
  });
  var handleScroll = function handleScroll() {
    setScrollOpenStatus(true);
  };
  var golink = function golink(id) {
    var _idTopInfo$current;
    getTargetElement(warpElement || document).scrollTop = (_idTopInfo$current = idTopInfo.current) === null || _idTopInfo$current === void 0 ? void 0 : _idTopInfo$current[id];
  };
  useEffect(function () {
    var _getTargetElement2;
    // bindScroller();
    (_getTargetElement2 = getTargetElement(warpElement || document)) === null || _getTargetElement2 === void 0 ? void 0 : _getTargetElement2.addEventListener('scroll', handleScroll, {
      once: true
    });
    return function () {
      var _getTargetElement3;
      (_getTargetElement3 = getTargetElement(warpElement || document)) === null || _getTargetElement3 === void 0 ? void 0 : _getTargetElement3.removeEventListener('scroll', handleScroll);
    };
  }, []);
  useEffect(function () {
    setTimeout(function () {
      setKeysDom();
      bindScroller();
    }, 200);
  }, [filterMenuData]);
  return /*#__PURE__*/React.createElement("div", {
    className: classNames(prefixCls),
    onMouseEnter: function onMouseEnter() {
      if (scrollTimeOut.current) {
        clearTimeout(scrollTimeOut.current);
      }
      setHovering(true);
    },
    onMouseLeave: function onMouseLeave() {
      setHovering(false);
    },
    style: {
      top: top
    }
  }, !hovering && /*#__PURE__*/React.createElement(Button, {
    icon: /*#__PURE__*/React.createElement(IconFont, {
      type: "lmweb-icon_m_open"
    })
  }), /*#__PURE__*/React.createElement("ul", {
    className: classNames('lm_menu_list', hovering && 'show', className)
  }, filterMenuData.map(function (item) {
    return /*#__PURE__*/React.createElement("li", {
      key: item.menuId,
      onClick: function onClick() {
        return golink(item.menuId);
      }
    }, /*#__PURE__*/React.createElement("a", {
      "data-id": item.menuId
    }, item.title));
  })));
};
export default LMQuickMenu;