@bit-sun/business-component 2.3.21 → 2.3.23

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

@@ -1,87 +1,87 @@
-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;
-  // < ie8 不支持 win.pageXOffset, 则使用 docElem.scrollLeft
-  return {
-    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),
-  };
-}
-
-const FixedScrollBar = ({viewPort, stickyProps}: any, ref: any) => {
-  const {isSticky, container} = useSticky(stickyProps)
-  const [scrollState, setScrollState] = useState({
-    isHiddenScrollBar: !isSticky
-  })
-  const onContainerScroll = () => {
-    if (!viewPort.current) {
-      return;
-    }
-    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
-    ) {
-      setScrollState(state => ({
-        ...state,
-        isHiddenScrollBar: true,
-      }));
-    } else {
-      ref.current?.scrollTo(viewPort.current.scrollLeft, 0)
-      setScrollState(state => ({
-        ...state,
-        isHiddenScrollBar: false,
-      }));
-    }
-  };
-
-  useEffect(() => {
-    onContainerScroll()
-    const onscroll = throttle(onContainerScroll, 50)
-    container.addEventListener('scroll', onscroll)
-    return () => {
-      container.removeEventListener('scroll', onscroll)
-    }
-  },[])
-
-  if(scrollState.isHiddenScrollBar){
-    return null
-  }
-
-  return (
-    <div
-      ref={ref}
-      onScroll={throttle((e) => {
-        // @ts-ignore
-        viewPort.current.scrollTo(e.target.scrollLeft, 0)
-      }, 50)}
-      style={{
-        position:'fixed',
-        zIndex: '9999',
-        bottom: '45px',
-        overflowY: 'hidden',
-        overflowX: 'auto',
-        width: viewPort.current?.offsetWidth || 0,
-        background:'#fff',
-        opacity: 0.6,
-      }}>
-      <div
-        className={'ant-table-sticky-scroll-bar'}
-        style={{
-          height: '1px',
-          backgroundColor: '#fff',
-          width: viewPort.current?.scrollWidth || 0,
-        }}></div>
-    </div>
-  )
-}
-
-export default React.forwardRef(FixedScrollBar)
+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;
+  // < ie8 不支持 win.pageXOffset, 则使用 docElem.scrollLeft
+  return {
+    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),
+  };
+}
+
+const FixedScrollBar = ({viewPort, stickyProps}: any, ref: any) => {
+  const {isSticky, container} = useSticky(stickyProps)
+  const [scrollState, setScrollState] = useState({
+    isHiddenScrollBar: !isSticky
+  })
+  const onContainerScroll = () => {
+    if (!viewPort.current) {
+      return;
+    }
+    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
+    ) {
+      setScrollState(state => ({
+        ...state,
+        isHiddenScrollBar: true,
+      }));
+    } else {
+      ref.current?.scrollTo(viewPort.current.scrollLeft, 0)
+      setScrollState(state => ({
+        ...state,
+        isHiddenScrollBar: false,
+      }));
+    }
+  };
+
+  useEffect(() => {
+    onContainerScroll()
+    const onscroll = throttle(onContainerScroll, 50)
+    container.addEventListener('scroll', onscroll)
+    return () => {
+      container.removeEventListener('scroll', onscroll)
+    }
+  },[])
+
+  if(scrollState.isHiddenScrollBar){
+    return null
+  }
+
+  return (
+    <div
+      ref={ref}
+      onScroll={throttle((e) => {
+        // @ts-ignore
+        viewPort.current.scrollTo(e.target.scrollLeft, 0)
+      }, 50)}
+      style={{
+        position:'fixed',
+        zIndex: '9999',
+        bottom: '45px',
+        overflowY: 'hidden',
+        overflowX: 'auto',
+        width: viewPort.current?.offsetWidth || 0,
+        background:'#fff',
+        opacity: 0.6,
+      }}>
+      <div
+        className={'ant-table-sticky-scroll-bar'}
+        style={{
+          height: '1px',
+          backgroundColor: '#fff',
+          width: viewPort.current?.scrollWidth || 0,
+        }}></div>
+    </div>
+  )
+}
+
+export default React.forwardRef(FixedScrollBar)

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

@@ -1,21 +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
+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.less

@@ -1,100 +1,100 @@
-.editTableWrapper {
-  width: 1000px;
-  height: 500px;
-  overflow: auto;
-  position: relative;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-
-  table {
-    table-layout: fixed;
-  }
-  .editTable {
-    position: relative;
-    overflow: hidden;
-    // border: 1px solid #dcdfe6;
-    border-top: 0;
-    background: #fff;
-  }
-  .north__west {
-    position: sticky;
-    background-color: #f7f8fb;
-    left: 0px;
-    top: 0px;
-    font-size: 14px;
-    color: #606266;
-    z-index: 5;
-    th {
-      // background: #f0f2f5;
-      background: #fff;
-      font-size: 14px;
-      color: #606266;
-      z-index: 5;
-      // border: 1px solid #dcdfe6
-    }
-  }
-  .south__west {
-    z-index: 4;
-    position: absolute;
-    left: 0px;
-    top: 0;
-    th {
-      background: #fff;
-      font-size: 14px;
-      color: #606266;
-      z-index: 4;
-    }
-    td {
-      font-size: 12px;
-      background: #fff;
-      color: #6a6a6a;
-      svg {
-        width: 20px;
-        height: 20px;
-        vertical-align: middle;
-      }
-    }
-  }
-  .editTable__block {
-    user-select: none;
-    position: absolute;
-    border-collapse: collapse;
-    padding: 0;
-  
-    & th,
-    td {
-      box-sizing: border-box;
-      font-size: 11px;
-      color: #6a6a6a;
-    }
-  }
-
-
-  .value_table {
-    table {
-      table-layout: fixed;
-      min-width: 100%;
-      
-    }
-  }
-  
-  .table_border_style {
-    border-collapse: separate;
-    border-spacing: 0;
-    border-left: 1px solid #f0f0f0;
-    border-top: 1px solid #f0f0f0;
-    td {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      box-sizing: border-box;
-      border-right: 1px solid #f0f0f0;
-      border-bottom: 1px solid #f0f0f0;
-      padding: 0 10px;
-      font-size: 14px;
-      line-height: 28px;
-    }
-  }
+.editTableWrapper {
+  width: 1000px;
+  height: 500px;
+  overflow: auto;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  table {
+    table-layout: fixed;
+  }
+  .editTable {
+    position: relative;
+    overflow: hidden;
+    // border: 1px solid #dcdfe6;
+    border-top: 0;
+    background: #fff;
+  }
+  .north__west {
+    position: sticky;
+    background-color: #f7f8fb;
+    left: 0px;
+    top: 0px;
+    font-size: 14px;
+    color: #606266;
+    z-index: 5;
+    th {
+      // background: #f0f2f5;
+      background: #fff;
+      font-size: 14px;
+      color: #606266;
+      z-index: 5;
+      // border: 1px solid #dcdfe6
+    }
+  }
+  .south__west {
+    z-index: 4;
+    position: absolute;
+    left: 0px;
+    top: 0;
+    th {
+      background: #fff;
+      font-size: 14px;
+      color: #606266;
+      z-index: 4;
+    }
+    td {
+      font-size: 12px;
+      background: #fff;
+      color: #6a6a6a;
+      svg {
+        width: 20px;
+        height: 20px;
+        vertical-align: middle;
+      }
+    }
+  }
+  .editTable__block {
+    user-select: none;
+    position: absolute;
+    border-collapse: collapse;
+    padding: 0;
+  
+    & th,
+    td {
+      box-sizing: border-box;
+      font-size: 11px;
+      color: #6a6a6a;
+    }
+  }
+
+
+  .value_table {
+    table {
+      table-layout: fixed;
+      min-width: 100%;
+      
+    }
+  }
+  
+  .table_border_style {
+    border-collapse: separate;
+    border-spacing: 0;
+    border-left: 1px solid #f0f0f0;
+    border-top: 1px solid #f0f0f0;
+    td {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      box-sizing: border-box;
+      border-right: 1px solid #f0f0f0;
+      border-bottom: 1px solid #f0f0f0;
+      padding: 0 10px;
+      font-size: 14px;
+      line-height: 28px;
+    }
+  }
 }