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

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _ahooks = require("ahooks");
var _classnames = _interopRequireDefault(require("classnames"));
var _domTarget = require("../_util/domTarget");
var _iconFont = _interopRequireDefault(require("../icon-font"));
var _button = _interopRequireDefault(require("../button"));
const prefixCls = 'lm_quick_menu';
const LMQuickMenu = props => {
  const {
    className,
    top = '104px',
    menuData = [],
    warpElement,
    root
  } = props;
  const idTopInfo = (0, _react.useRef)({});
  const [hovering, setHovering] = (0, _react.useState)(false);
  const menuTimeEventRef = (0, _react.useRef)(null);
  const [scrollOpenStatus, setScrollOpenStatus] = (0, _react.useState)(false);
  const scrollTimeOut = (0, _react.useRef)(null);
  const scroll = (0, _ahooks.useScroll)((0, _domTarget.getTargetElement)(warpElement || document), () => scrollOpenStatus);
  const filterMenuData = (0, _react.useMemo)(() => {
    return menuData?.filter(item => item.hidden !== true);
  }, [menuData]);
  function clearActiveToc() {
    [].forEach.call(document.querySelectorAll('.lm_menu_list li a'), node => {
      node.className = '';
    });
  }
  const updateActiveToc = id => {
    const currentNode = document.querySelectorAll(`.lm_menu_list li a[data-id="${id}"]`)[0];
    if (currentNode) {
      clearActiveToc();
      currentNode.className = 'current';
    }
  };
  const bindScroller = () => {
    if (menuTimeEventRef.current) {
      menuTimeEventRef.current?.destroy();
    }
    if (!filterMenuData.length) {
      return;
    }
    // eslint-disable-next-line global-require
    require('intersection-observer');
    // eslint-disable-next-line global-require
    const scrollama = require('scrollama');
    menuTimeEventRef.current = scrollama();
    console.log((0, _domTarget.getTargetElement)(warpElement || document), '--getTargetElement(warpElement || document)');
    menuTimeEventRef.current?.setup({
      step: filterMenuData.map(item => document.getElementById(`${item.menuId}`)).filter(Boolean),
      // required
      container: (0, _domTarget.getTargetElement)(warpElement || document),
      root: root ? (0, _domTarget.getTargetElement)(root) : undefined
    })?.onStepEnter(({
      element
    }) => {
      updateActiveToc(element.id);
    });
  };
  function setKeysDom() {
    filterMenuData.forEach(item => {
      const warpTop = (0, _domTarget.getTargetElement)(warpElement || document)?.offsetTop || 0;
      idTopInfo.current[`${item.menuId}`] = document.getElementById(`${item.menuId}`)?.offsetTop - warpTop;
    });
  }
  (0, _ahooks.useDebounceEffect)(() => {
    if (scroll && !hovering) {
      setHovering(true);
    }
    if (scrollTimeOut.current) {
      clearTimeout(scrollTimeOut.current);
    }
    scrollTimeOut.current = setTimeout(() => {
      setHovering(false);
    }, 2000);
  }, [scroll], {
    wait: 50
  });
  const handleScroll = () => {
    setScrollOpenStatus(true);
  };
  const golink = id => {
    (0, _domTarget.getTargetElement)(warpElement || document).scrollTop = idTopInfo.current?.[id];
  };
  (0, _react.useEffect)(() => {
    // bindScroller();
    (0, _domTarget.getTargetElement)(warpElement || document)?.addEventListener('scroll', handleScroll, {
      once: true
    });
    return () => {
      (0, _domTarget.getTargetElement)(warpElement || document)?.removeEventListener('scroll', handleScroll);
    };
  }, []);
  (0, _react.useEffect)(() => {
    setTimeout(() => {
      setKeysDom();
      bindScroller();
    }, 200);
  }, [filterMenuData]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)(prefixCls),
    onMouseEnter: () => {
      if (scrollTimeOut.current) {
        clearTimeout(scrollTimeOut.current);
      }
      setHovering(true);
    },
    onMouseLeave: () => {
      setHovering(false);
    },
    style: {
      top
    }
  }, !hovering && /*#__PURE__*/_react.default.createElement(_button.default, {
    icon: /*#__PURE__*/_react.default.createElement(_iconFont.default, {
      type: "lm-icon-icon_m_open"
    })
  }), /*#__PURE__*/_react.default.createElement("ul", {
    className: (0, _classnames.default)('lm_menu_list', hovering && 'show', className)
  }, filterMenuData.map(item => {
    return /*#__PURE__*/_react.default.createElement("li", {
      key: item.menuId,
      onClick: () => golink(item.menuId)
    }, /*#__PURE__*/_react.default.createElement("a", {
      "data-id": item.menuId
    }, item.title));
  })));
};
var _default = LMQuickMenu;
exports.default = _default;