linkmore-design 1.0.54 → 1.0.57

package/es/LmTable/Table.js

@@ -39,6 +39,8 @@ var _reactResizable = require("react-resizable");
 
 var _reactSortableHoc = require("react-sortable-hoc");
 
+var _linkmoreDesign = require("linkmore-design");
+
 var _empty = _interopRequireDefault(require("./assets/empty.png"));
 
 var _resetConfig = _interopRequireDefault(require("./resetConfig"));
@@ -46,20 +48,23 @@ var _resetConfig = _interopRequireDefault(require("./resetConfig"));
 var _excluded = ["dataSource", "autoSize", "columns", "rowClick", "onDoubleClick", "checkConfig", "summary", "pagination", "hiddenPage", "loading", "virtual", "sortOpen", "resizeable", "customCheck", "components", "rowSelection", "columnsState", "onChange", "filterChange", "tableRowType", "size"],
     _excluded2 = ["className", "style"],
     _excluded3 = ["onResize", "width", "onResizeStop"];
-var Summary = _proTable.default.Summary;
+var Summary = _proTable.default.Summary; // const DragHandle = SortableHandle(() => <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />);
+
 exports.Summary = Summary;
 var DragHandle = (0, _reactSortableHoc.SortableHandle)(function () {
-  return /*#__PURE__*/_react.default.createElement(_icons.MenuOutlined, {
+  return /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
+    type: "lmweb-icon-m-receipt1",
     style: {
       cursor: 'grab',
-      color: '#999'
+      fontSize: '16px'
     }
   });
 });
 var sortDefaultColumnItem = {
   title: '排序',
   dataIndex: 'sort',
-  width: 60,
+  width: 48,
+  maxWidth: 48,
   className: 'drag-visible',
   render: function render() {
     return /*#__PURE__*/_react.default.createElement(DragHandle, null);

package/es/QuickMenu/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface IMenuData {
+    menuId: string;
+    title: string | React.ReactNode;
+}
+export interface IQuickMenuProps {
+    className?: string;
+    style?: React.CSSProperties;
+    top?: number;
+    menuData: IMenuData[];
+    warpElement: any;
+}
+declare const LMQuickMenu: React.FC<IQuickMenuProps>;
+export default LMQuickMenu;

package/es/QuickMenu/index.js

@@ -0,0 +1,171 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useEffect, useState, useRef } from 'react';
+import { IconFont, Button } from 'linkmore-design';
+import { useScroll, useDebounceEffect } from 'ahooks';
+import classNames from 'classnames';
+import { getTargetElement } from '../_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 = 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;
+  });
+
+  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 = 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;
+    });
+  }
+
+  useDebounceEffect(function () {
+    if (scroll && !hovering) {
+      setHovering(true);
+    }
+
+    if (scrollTimeOut.current) {
+      clearTimeout(scrollTimeOut.current);
+    }
+
+    scrollTimeOut.current = setTimeout(function () {
+      setHovering(false);
+    }, 2000);
+  }, [scroll], {
+    wait: 50
+  });
+
+  var bindDom = function bindDom() {
+    if (!Object.keys(idTopInfo.current).length) {
+      setKeysDom();
+    }
+  };
+
+  var handleScroll = function handleScroll() {
+    setScrollOpenStatus(true);
+  };
+
+  var golink = function golink(id) {
+    var _a;
+
+    getTargetElement(warpElement || document).scrollTop = (_a = idTopInfo.current) === null || _a === void 0 ? void 0 : _a[id];
+  };
+
+  useEffect(function () {
+    var _a; // bindScroller();
+
+
+    setTimeout(function () {
+      bindDom();
+      bindScroller();
+    }, 200);
+    (_a = getTargetElement(warpElement || document)) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', handleScroll, {
+      once: true
+    });
+    return function () {
+      var _a;
+
+      (_a = getTargetElement(warpElement || document)) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+  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)
+  }, menuData.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;