@bit-sun/business-component 2.2.43 → 2.2.44

package/dist/components/Business/moreTreeTable/hooks/useSticky.d.ts

@@ -0,0 +1,8 @@
+interface TableSticky {
+    getContainer?: () => Window | HTMLElement;
+}
+declare const useSticky: (sticky: boolean | TableSticky) => {
+    isSticky: boolean;
+    container: Window | HTMLElement | Document;
+};
+export default useSticky;

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import axios from 'axios';
 import { message, Menu, Space, Dropdown, Tooltip, Button, Checkbox, Input, Modal, Select, Form, Divider, Spin, Table, TreeSelect, Tag, Popover, Card, Avatar, Image, InputNumber, Typography, Alert, Anchor, Breadcrumb, Drawer as Drawer$1, List, Tree, Row, Col, Tabs, Affix } from 'antd';
-import _, { omit, debounce, cloneDeep as cloneDeep$1, isEmpty } from 'lodash';
+import _, { omit, debounce, cloneDeep as cloneDeep$1, throttle, isEmpty } from 'lodash';
 import React, { useState, useEffect, forwardRef, useImperativeHandle, useRef, useMemo, Component, useLayoutEffect, createRef } from 'react';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import { UnorderedListOutlined, ProfileTwoTone, ExclamationCircleOutlined, DownOutlined, CopyOutlined, SearchOutlined, CaretLeftOutlined, CloseCircleOutlined, ArrowLeftOutlined, FolderOutlined, EllipsisOutlined, CaretDownOutlined, HomeOutlined, DoubleLeftOutlined, DoubleRightOutlined, MenuUnfoldOutlined, DashOutlined, SettingOutlined, BulbOutlined, PlayCircleOutlined, SaveOutlined, FullscreenExitOutlined } from '@ant-design/icons';
@@ -22435,13 +22435,25 @@ var headersToRows = function headersToRows(originColumns) {
 var css_248z$n = ".editTableWrapper {\n  width: 1000px;\n  height: 500px;\n  overflow: auto;\n  position: relative;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n.editTableWrapper table {\n  table-layout: fixed;\n}\n.editTableWrapper .editTable {\n  position: relative;\n  overflow: hidden;\n  border-top: 0;\n  background: #fff;\n}\n.editTableWrapper .north__west {\n  position: sticky;\n  background-color: #f7f8fb;\n  left: 0px;\n  top: 0px;\n  font-size: 14px;\n  color: #606266;\n  z-index: 5;\n}\n.editTableWrapper .north__west th {\n  background: #fff;\n  font-size: 14px;\n  color: #606266;\n  z-index: 5;\n}\n.editTableWrapper .south__west {\n  z-index: 4;\n  position: absolute;\n  left: 0px;\n  top: 0;\n}\n.editTableWrapper .south__west th {\n  background: #fff;\n  font-size: 14px;\n  color: #606266;\n  z-index: 4;\n}\n.editTableWrapper .south__west td {\n  font-size: 12px;\n  background: #fff;\n  color: #6a6a6a;\n}\n.editTableWrapper .south__west td svg {\n  width: 20px;\n  height: 20px;\n  vertical-align: middle;\n}\n.editTableWrapper .editTable__block {\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  position: absolute;\n  border-collapse: collapse;\n  padding: 0;\n}\n.editTableWrapper .editTable__block th,\n.editTableWrapper .editTable__block td {\n  box-sizing: border-box;\n  font-size: 11px;\n  color: #6a6a6a;\n}\n.editTableWrapper .value_table table {\n  table-layout: fixed;\n  min-width: 100%;\n}\n.editTableWrapper .table_border_style {\n  border-collapse: separate;\n  border-spacing: 0;\n  border-left: 1px solid #f0f0f0;\n  border-top: 1px solid #f0f0f0;\n}\n.editTableWrapper .table_border_style td {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  box-sizing: border-box;\n  border-right: 1px solid #f0f0f0;\n  border-bottom: 1px solid #f0f0f0;\n  padding: 0 10px;\n  font-size: 14px;\n  line-height: 28px;\n}\n";
 styleInject(css_248z$n);
 
+var useSticky = function useSticky(sticky) {
+  var _ref = _typeof(sticky) === 'object' ? sticky : {},
+    _ref$getContainer = _ref.getContainer,
+    getContainer = _ref$getContainer === void 0 ? function () {
+      return window.document;
+    } : _ref$getContainer;
+  var container = getContainer();
+  return React.useMemo(function () {
+    var isSticky = !!sticky;
+    return {
+      isSticky: isSticky,
+      container: container
+    };
+  }, [sticky]);
+};
+
 function getOffset(node) {
   var box = node.getBoundingClientRect();
   var docElem = document.documentElement;
-  console.log(box, 'box', {
-    left: box.left + (window.pageXOffset || docElem.scrollLeft) - (docElem.clientLeft || document.body.clientLeft || 0),
-    top: box.top + (window.pageYOffset || docElem.scrollTop) - (docElem.clientTop || document.body.clientTop || 0)
-  });
   // < ie8 不支持 win.pageXOffset, 则使用 docElem.scrollLeft
   return {
     left: box.left + (window.pageXOffset || docElem.scrollLeft) - (docElem.clientLeft || document.body.clientLeft || 0),
@@ -22449,11 +22461,14 @@ function getOffset(node) {
   };
 }
 var FixedScrollBar = function FixedScrollBar(_ref, ref) {
-  var _viewPort$current;
+  var _viewPort$current, _viewPort$current2;
   var viewPort = _ref.viewPort,
-    width = _ref.width;
+    stickyProps = _ref.stickyProps;
+  var _useSticky = useSticky(stickyProps),
+    isSticky = _useSticky.isSticky,
+    container = _useSticky.container;
   var _useState = useState({
-      isHiddenScrollBar: false
+      isHiddenScrollBar: !isSticky
     }),
     _useState2 = _slicedToArray(_useState, 2),
     scrollState = _useState2[0],
@@ -22482,9 +22497,10 @@ var FixedScrollBar = function FixedScrollBar(_ref, ref) {
     }
   };
   useEffect(function () {
-    document.addEventListener('scroll', onContainerScroll);
+    var onscroll = throttle(onContainerScroll, 50);
+    container.addEventListener('scroll', onscroll);
     return function () {
-      document.removeEventListener('scroll', onContainerScroll);
+      container.removeEventListener('scroll', onscroll);
     };
   }, []);
   if (scrollState.isHiddenScrollBar) {
@@ -22492,10 +22508,10 @@ var FixedScrollBar = function FixedScrollBar(_ref, ref) {
   }
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    onScroll: function onScroll(e) {
+    onScroll: throttle(function (e) {
       // @ts-ignore
       viewPort.current.scrollTo(e.target.scrollLeft, 0);
-    },
+    }, 50),
     style: {
       position: 'fixed',
       zIndex: '9999',
@@ -22511,7 +22527,7 @@ var FixedScrollBar = function FixedScrollBar(_ref, ref) {
     style: {
       height: '1px',
       backgroundColor: '#fff',
-      width: width
+      width: ((_viewPort$current2 = viewPort.current) === null || _viewPort$current2 === void 0 ? void 0 : _viewPort$current2.scrollWidth) || 0
     }
   }));
 };
@@ -22672,9 +22688,9 @@ var index$7 = /*#__PURE__*/forwardRef(function (props, ref) {
     className: 'editTableWrapper',
     onScroll: onScroll,
     ref: viewPort
-  }, (tableProps === null || tableProps === void 0 ? void 0 : tableProps.sticky) && /*#__PURE__*/React.createElement(FixedScrollBar$1, {
+  }, /*#__PURE__*/React.createElement(FixedScrollBar$1, {
+    stickyProps: tableProps === null || tableProps === void 0 ? void 0 : tableProps.sticky,
     viewPort: viewPort,
-    width: "".concat(config.colHeaderWidth + 1 + placeholderWidth, "px"),
     ref: topScrollBar
   }), /*#__PURE__*/React.createElement("div", {
     style: {

package/dist/index.js

@@ -22453,13 +22453,25 @@ var headersToRows = function headersToRows(originColumns) {
 var css_248z$n = ".editTableWrapper {\n  width: 1000px;\n  height: 500px;\n  overflow: auto;\n  position: relative;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n.editTableWrapper table {\n  table-layout: fixed;\n}\n.editTableWrapper .editTable {\n  position: relative;\n  overflow: hidden;\n  border-top: 0;\n  background: #fff;\n}\n.editTableWrapper .north__west {\n  position: sticky;\n  background-color: #f7f8fb;\n  left: 0px;\n  top: 0px;\n  font-size: 14px;\n  color: #606266;\n  z-index: 5;\n}\n.editTableWrapper .north__west th {\n  background: #fff;\n  font-size: 14px;\n  color: #606266;\n  z-index: 5;\n}\n.editTableWrapper .south__west {\n  z-index: 4;\n  position: absolute;\n  left: 0px;\n  top: 0;\n}\n.editTableWrapper .south__west th {\n  background: #fff;\n  font-size: 14px;\n  color: #606266;\n  z-index: 4;\n}\n.editTableWrapper .south__west td {\n  font-size: 12px;\n  background: #fff;\n  color: #6a6a6a;\n}\n.editTableWrapper .south__west td svg {\n  width: 20px;\n  height: 20px;\n  vertical-align: middle;\n}\n.editTableWrapper .editTable__block {\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  position: absolute;\n  border-collapse: collapse;\n  padding: 0;\n}\n.editTableWrapper .editTable__block th,\n.editTableWrapper .editTable__block td {\n  box-sizing: border-box;\n  font-size: 11px;\n  color: #6a6a6a;\n}\n.editTableWrapper .value_table table {\n  table-layout: fixed;\n  min-width: 100%;\n}\n.editTableWrapper .table_border_style {\n  border-collapse: separate;\n  border-spacing: 0;\n  border-left: 1px solid #f0f0f0;\n  border-top: 1px solid #f0f0f0;\n}\n.editTableWrapper .table_border_style td {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  box-sizing: border-box;\n  border-right: 1px solid #f0f0f0;\n  border-bottom: 1px solid #f0f0f0;\n  padding: 0 10px;\n  font-size: 14px;\n  line-height: 28px;\n}\n";
 styleInject(css_248z$n);
 
+var useSticky = function useSticky(sticky) {
+  var _ref = _typeof(sticky) === 'object' ? sticky : {},
+    _ref$getContainer = _ref.getContainer,
+    getContainer = _ref$getContainer === void 0 ? function () {
+      return window.document;
+    } : _ref$getContainer;
+  var container = getContainer();
+  return React__default['default'].useMemo(function () {
+    var isSticky = !!sticky;
+    return {
+      isSticky: isSticky,
+      container: container
+    };
+  }, [sticky]);
+};
+
 function getOffset(node) {
   var box = node.getBoundingClientRect();
   var docElem = document.documentElement;
-  console.log(box, 'box', {
-    left: box.left + (window.pageXOffset || docElem.scrollLeft) - (docElem.clientLeft || document.body.clientLeft || 0),
-    top: box.top + (window.pageYOffset || docElem.scrollTop) - (docElem.clientTop || document.body.clientTop || 0)
-  });
   // < ie8 不支持 win.pageXOffset, 则使用 docElem.scrollLeft
   return {
     left: box.left + (window.pageXOffset || docElem.scrollLeft) - (docElem.clientLeft || document.body.clientLeft || 0),
@@ -22467,11 +22479,14 @@ function getOffset(node) {
   };
 }
 var FixedScrollBar = function FixedScrollBar(_ref, ref) {
-  var _viewPort$current;
+  var _viewPort$current, _viewPort$current2;
   var viewPort = _ref.viewPort,
-    width = _ref.width;
+    stickyProps = _ref.stickyProps;
+  var _useSticky = useSticky(stickyProps),
+    isSticky = _useSticky.isSticky,
+    container = _useSticky.container;
   var _useState = React.useState({
-      isHiddenScrollBar: false
+      isHiddenScrollBar: !isSticky
     }),
     _useState2 = _slicedToArray(_useState, 2),
     scrollState = _useState2[0],
@@ -22500,9 +22515,10 @@ var FixedScrollBar = function FixedScrollBar(_ref, ref) {
     }
   };
   React.useEffect(function () {
-    document.addEventListener('scroll', onContainerScroll);
+    var onscroll = _.throttle(onContainerScroll, 50);
+    container.addEventListener('scroll', onscroll);
     return function () {
-      document.removeEventListener('scroll', onContainerScroll);
+      container.removeEventListener('scroll', onscroll);
     };
   }, []);
   if (scrollState.isHiddenScrollBar) {
@@ -22510,10 +22526,10 @@ var FixedScrollBar = function FixedScrollBar(_ref, ref) {
   }
   return /*#__PURE__*/React__default['default'].createElement("div", {
     ref: ref,
-    onScroll: function onScroll(e) {
+    onScroll: _.throttle(function (e) {
       // @ts-ignore
       viewPort.current.scrollTo(e.target.scrollLeft, 0);
-    },
+    }, 50),
     style: {
       position: 'fixed',
       zIndex: '9999',
@@ -22529,7 +22545,7 @@ var FixedScrollBar = function FixedScrollBar(_ref, ref) {
     style: {
       height: '1px',
       backgroundColor: '#fff',
-      width: width
+      width: ((_viewPort$current2 = viewPort.current) === null || _viewPort$current2 === void 0 ? void 0 : _viewPort$current2.scrollWidth) || 0
     }
   }));
 };
@@ -22690,9 +22706,9 @@ var index$7 = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className: 'editTableWrapper',
     onScroll: onScroll,
     ref: viewPort
-  }, (tableProps === null || tableProps === void 0 ? void 0 : tableProps.sticky) && /*#__PURE__*/React__default['default'].createElement(FixedScrollBar$1, {
+  }, /*#__PURE__*/React__default['default'].createElement(FixedScrollBar$1, {
+    stickyProps: tableProps === null || tableProps === void 0 ? void 0 : tableProps.sticky,
     viewPort: viewPort,
-    width: "".concat(config.colHeaderWidth + 1 + placeholderWidth, "px"),
     ref: topScrollBar
   }), /*#__PURE__*/React__default['default'].createElement("div", {
     style: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bit-sun/business-component",
-  "version": "2.2.43",
+  "version": "2.2.44",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",

package/src/components/Business/moreTreeTable/FixedScrollBar.tsx

@@ -1,14 +1,10 @@
 import React, {useEffect, useImperativeHandle, useRef, useState} from 'react'
+import {throttle} from "lodash";
+import useSticky from "./hooks/useSticky";
 
 function getOffset(node: any) {
   const box = node.getBoundingClientRect();
   const docElem = document.documentElement;
-  console.log(box, 'box', {
-    left: box.left + (window.pageXOffset || docElem.scrollLeft) -
-      (docElem.clientLeft || document.body.clientLeft || 0),
-    top: box.top + (window.pageYOffset || docElem.scrollTop) -
-      (docElem.clientTop || document.body.clientTop || 0),
-  })
   // < ie8 不支持 win.pageXOffset, 则使用 docElem.scrollLeft
   return {
     left: box.left + (window.pageXOffset || docElem.scrollLeft) -
@@ -18,13 +14,11 @@ function getOffset(node: any) {
   };
 }
 
-
-const FixedScrollBar = ({viewPort, width}: any, ref: any) => {
-
+const FixedScrollBar = ({viewPort, stickyProps}: any, ref: any) => {
+  const {isSticky, container} = useSticky(stickyProps)
   const [scrollState, setScrollState] = useState({
-    isHiddenScrollBar: false
+    isHiddenScrollBar: !isSticky
   })
-
   const onContainerScroll = () => {
     if (!viewPort.current) {
       return;
@@ -32,7 +26,6 @@ const FixedScrollBar = ({viewPort, width}: any, ref: any) => {
     const tableOffsetTop = getOffset(viewPort.current).top;
     const tableBottomOffset = tableOffsetTop + viewPort.current.offsetHeight;
     const currentClientOffset = document.documentElement.scrollTop + window.innerHeight
-
     if (
       tableBottomOffset - 1  <= currentClientOffset ||
       tableOffsetTop >= currentClientOffset
@@ -51,9 +44,10 @@ const FixedScrollBar = ({viewPort, width}: any, ref: any) => {
   };
 
   useEffect(() => {
-    document.addEventListener('scroll', onContainerScroll)
+    const onscroll = throttle(onContainerScroll, 50)
+    container.addEventListener('scroll', onscroll)
     return () => {
-      document.removeEventListener('scroll', onContainerScroll)
+      container.removeEventListener('scroll', onscroll)
     }
   },[])
 
@@ -64,10 +58,10 @@ const FixedScrollBar = ({viewPort, width}: any, ref: any) => {
   return (
     <div
       ref={ref}
-      onScroll={(e) => {
+      onScroll={throttle((e) => {
         // @ts-ignore
         viewPort.current.scrollTo(e.target.scrollLeft, 0)
-      }}
+      }, 50)}
       style={{
         position:'fixed',
         zIndex: '9999',
@@ -83,7 +77,7 @@ const FixedScrollBar = ({viewPort, width}: any, ref: any) => {
         style={{
           height: '1px',
           backgroundColor: '#fff',
-          width,
+          width: viewPort.current?.scrollWidth || 0,
         }}></div>
     </div>
   )

package/src/components/Business/moreTreeTable/hooks/useSticky.ts

@@ -0,0 +1,21 @@
+import React from 'react'
+
+interface TableSticky{
+  getContainer?:  () => Window | HTMLElement;
+}
+
+const useSticky = (sticky: boolean | TableSticky) => {
+  const {getContainer = () => window.document} = typeof sticky === 'object' ? sticky : {}
+
+  const container = getContainer()
+  return React.useMemo(() => {
+    const isSticky = !!sticky
+    return {
+      isSticky,
+      container,
+    }
+  },[sticky])
+
+}
+
+export default useSticky

package/src/components/Business/moreTreeTable/index.tsx

@@ -152,11 +152,11 @@ export default forwardRef((props, ref) => {
         onScroll={onScroll}
         ref={viewPort}
       >
-        {tableProps?.sticky && <FixedScrollBar
+        <FixedScrollBar
+          stickyProps={tableProps?.sticky}
           viewPort={viewPort}
-          width={`${config.colHeaderWidth + 1 + placeholderWidth}px`}
           ref={topScrollBar}
-        />}
+        />
         <div style={{
           width: `${config.colHeaderWidth + 1 + placeholderWidth}px`,
           position: 'absolute',