linkmore-design 1.0.54 → 1.0.55

package/lib/QuickMenu/index.js

@@ -0,0 +1,187 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _linkmoreDesign = require("linkmore-design");
+
+var _ahooks = require("ahooks");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _domTarget = require("../_util/domTarget");
+
+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;
+  var idTopInfo = (0, _react.useRef)({});
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      hovering = _useState2[0],
+      setHovering = _useState2[1];
+
+  var menuTimeEventRef = (0, _react.useRef)(null);
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      scrollOpenStatus = _useState4[0],
+      setScrollOpenStatus = _useState4[1];
+
+  var scrollTimeOut = (0, _react.useRef)(null);
+  var scroll = (0, _ahooks.useScroll)((0, _domTarget.getTargetElement)(warpElement || document), function () {
+    return scrollOpenStatus;
+  });
+
+  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 _a, _b, _c;
+
+    if (menuTimeEventRef.current) {
+      (_a = menuTimeEventRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
+    }
+
+    if (!menuData.length) {
+      return;
+    } // eslint-disable-next-line global-require
+
+
+    require('intersection-observer'); // eslint-disable-next-line global-require
+
+
+    var scrollama = require('scrollama');
+
+    menuTimeEventRef.current = scrollama();
+    (_c = (_b = menuTimeEventRef.current) === null || _b === void 0 ? void 0 : _b.setup({
+      step: menuData.map(function (item) {
+        return document.getElementById("".concat(item.menuId));
+      }).filter(Boolean) // required
+      // offset: '10px',
+
+    })) === null || _c === void 0 ? void 0 : _c.onStepEnter(function (_ref) {
+      var element = _ref.element;
+      updateActiveToc(element.id);
+    });
+  };
+
+  function setKeysDom() {
+    menuData.forEach(function (item) {
+      var _a, _b;
+
+      var warpTop = ((_a = (0, _domTarget.getTargetElement)(warpElement || document)) === null || _a === void 0 ? void 0 : _a.offsetTop) || 0;
+      idTopInfo.current["".concat(item.menuId)] = ((_b = document.getElementById("".concat(item.menuId))) === null || _b === void 0 ? void 0 : _b.offsetTop) - warpTop;
+    });
+  }
+
+  (0, _react.useEffect)(function () {
+    if (scroll && !hovering) {
+      setHovering(true);
+    }
+
+    if (scrollTimeOut.current) {
+      clearTimeout(scrollTimeOut.current);
+    }
+
+    scrollTimeOut.current = setTimeout(function () {
+      setHovering(false);
+    }, 2000);
+  }, [scroll]);
+
+  var bindDom = function bindDom() {
+    if (!Object.keys(idTopInfo.current).length) {
+      setKeysDom();
+    }
+  };
+
+  var handleScroll = function handleScroll() {
+    setScrollOpenStatus(true);
+  };
+
+  var golink = function golink(id) {
+    var _a;
+
+    (0, _domTarget.getTargetElement)(warpElement || document).scrollTop = (_a = idTopInfo.current) === null || _a === void 0 ? void 0 : _a[id];
+  };
+
+  (0, _react.useEffect)(function () {
+    var _a; // bindScroller();
+
+
+    setTimeout(function () {
+      bindDom();
+      bindScroller();
+    }, 200);
+    (_a = (0, _domTarget.getTargetElement)(warpElement || document)) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', handleScroll, {
+      once: true
+    });
+    return function () {
+      var _a;
+
+      (_a = (0, _domTarget.getTargetElement)(warpElement || document)) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(prefixCls),
+    onMouseEnter: function onMouseEnter() {
+      if (scrollTimeOut.current) {
+        clearTimeout(scrollTimeOut.current);
+      }
+
+      setHovering(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      setHovering(false);
+    },
+    style: {
+      top: top
+    }
+  }, !hovering && /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Button, {
+    icon: /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
+      type: 'lmweb-icon_m_open'
+    })
+  }), /*#__PURE__*/_react.default.createElement("ul", {
+    className: (0, _classnames.default)('lm_menu_list', hovering && 'show', className)
+  }, menuData.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement("li", {
+      key: item.menuId,
+      onClick: function onClick() {
+        return golink(item.menuId);
+      }
+    }, /*#__PURE__*/_react.default.createElement("a", {
+      "data-id": item.menuId
+    }, item.title));
+  })));
+};
+
+var _default = LMQuickMenu;
+exports.default = _default;