@hw-component/table 1.9.88 → 1.9.89

package/es/HTableBody/HeaderTitle/hooks.d.ts

@@ -0,0 +1,8 @@
+import { MutableRefObject } from "react";
+interface HeaderStyleParams {
+    bodyRef: MutableRefObject<HTMLDivElement | null>;
+    titleContentRef: MutableRefObject<HTMLDivElement | null>;
+    rightNodeRef: MutableRefObject<HTMLDivElement | null>;
+}
+export declare const useHeaderStyle: ({ bodyRef, titleContentRef, rightNodeRef }: HeaderStyleParams) => {};
+export {};

package/es/HTableBody/HeaderTitle/hooks.js

@@ -0,0 +1,54 @@
+// welcome to hoo hoo hoo
+import _slicedToArray from '@babel/runtime-corejs3/helpers/slicedToArray';
+import { useState, useLayoutEffect, useEffect } from 'react';
+
+var useHeaderStyle = function useHeaderStyle(_ref) {
+  var bodyRef = _ref.bodyRef,
+    titleContentRef = _ref.titleContentRef,
+    rightNodeRef = _ref.rightNodeRef;
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    style = _useState2[0],
+    setStyle = _useState2[1];
+  var setHeaderStyle = function setHeaderStyle() {
+    var _bodyRef$current, _titleContentRef$curr, _rightNodeRef$current;
+    var headerWidth = ((_bodyRef$current = bodyRef.current) === null || _bodyRef$current === void 0 ? void 0 : _bodyRef$current.clientWidth) || 0;
+    console.log(headerWidth, "headerWidth");
+    var titleWidth = ((_titleContentRef$curr = titleContentRef.current) === null || _titleContentRef$curr === void 0 ? void 0 : _titleContentRef$curr.clientWidth) || 0;
+    var rightNodeWidth = ((_rightNodeRef$current = rightNodeRef.current) === null || _rightNodeRef$current === void 0 ? void 0 : _rightNodeRef$current.clientWidth) || 0;
+    if (rightNodeWidth + titleWidth >= headerWidth) {
+      setStyle({
+        overflow: "auto"
+      });
+      return;
+    }
+    setStyle({});
+  };
+  useLayoutEffect(function () {
+    setHeaderStyle();
+  }, []);
+  useEffect(function () {
+    var resizeFn = function resizeFn() {
+      setHeaderStyle();
+    };
+    window.addEventListener("resize", resizeFn);
+    return function () {
+      window.removeEventListener("resize", resizeFn);
+    };
+  }, []);
+  useEffect(function () {
+    var element = titleContentRef.current;
+    if (!element || !window.ResizeObserver) return;
+    var observer = new ResizeObserver(function () {
+      setHeaderStyle();
+    });
+    observer.observe(element);
+    return function () {
+      observer.disconnect();
+    };
+  }, []);
+  return style;
+};
+
+export { useHeaderStyle };
+// powered by hdj

package/es/HTableBody/HeaderTitle/index.js

@@ -1,9 +1,9 @@
 // welcome to hoo hoo hoo
-import _slicedToArray from '@babel/runtime-corejs3/helpers/slicedToArray';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useRef, useState, useLayoutEffect, useEffect } from 'react';
+import React, { useRef } from 'react';
 import { useHTableContext } from '../../context.js';
 import { useClassName } from '../../hooks/index.js';
+import { useHeaderStyle } from './hooks.js';
 
 var HeaderTitle = (function (_ref) {
   var headerTitle = _ref.headerTitle,
@@ -17,39 +17,15 @@ var HeaderTitle = (function (_ref) {
   var bodyRef = useRef();
   var titleContentRef = useRef();
   var rightNodeRef = useRef();
-  var _useState = useState({}),
-    _useState2 = _slicedToArray(_useState, 2),
-    style = _useState2[0],
-    setStyle = _useState2[1];
   var headerBox = useClassName("hw-table-header-title-box");
   var headerBoxContent = useClassName("hw-table-header-title-box-content");
   var titleClassname = useClassName("hw-table-header-title");
   var rightNodeClassname = useClassName("hw-table-header-right-node");
-  var setHeaderStyle = function setHeaderStyle() {
-    var _bodyRef$current, _titleContentRef$curr, _rightNodeRef$current;
-    var headerWidth = ((_bodyRef$current = bodyRef.current) === null || _bodyRef$current === void 0 ? void 0 : _bodyRef$current.clientWidth) || 0;
-    var titleWidth = ((_titleContentRef$curr = titleContentRef.current) === null || _titleContentRef$curr === void 0 ? void 0 : _titleContentRef$curr.clientWidth) || 0;
-    var rightNodeWidth = ((_rightNodeRef$current = rightNodeRef.current) === null || _rightNodeRef$current === void 0 ? void 0 : _rightNodeRef$current.clientWidth) || 0;
-    if (rightNodeWidth + titleWidth >= headerWidth) {
-      setStyle({
-        overflow: "auto"
-      });
-      return;
-    }
-    setStyle({});
-  };
-  useLayoutEffect(function () {
-    setHeaderStyle();
-  }, []);
-  useEffect(function () {
-    var resizeFn = function resizeFn() {
-      setHeaderStyle();
-    };
-    window.addEventListener("resize", resizeFn);
-    return function () {
-      window.removeEventListener("resize", resizeFn);
-    };
-  }, []);
+  var style = useHeaderStyle({
+    bodyRef: bodyRef,
+    titleContentRef: titleContentRef,
+    rightNodeRef: rightNodeRef
+  });
   if (!headerTitle && !rNode) {
     return null;
   }

package/es/render/Text.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const _default: () => JSX.Element;
 export default _default;

package/lib/HTableBody/HeaderTitle/hooks.d.ts

@@ -0,0 +1,8 @@
+import { MutableRefObject } from "react";
+interface HeaderStyleParams {
+    bodyRef: MutableRefObject<HTMLDivElement | null>;
+    titleContentRef: MutableRefObject<HTMLDivElement | null>;
+    rightNodeRef: MutableRefObject<HTMLDivElement | null>;
+}
+export declare const useHeaderStyle: ({ bodyRef, titleContentRef, rightNodeRef }: HeaderStyleParams) => {};
+export {};

package/lib/HTableBody/HeaderTitle/hooks.js

@@ -0,0 +1,55 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var React = require('react');
+
+var useHeaderStyle = function useHeaderStyle(_ref) {
+  var bodyRef = _ref.bodyRef,
+    titleContentRef = _ref.titleContentRef,
+    rightNodeRef = _ref.rightNodeRef;
+  var _useState = React.useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    style = _useState2[0],
+    setStyle = _useState2[1];
+  var setHeaderStyle = function setHeaderStyle() {
+    var _bodyRef$current, _titleContentRef$curr, _rightNodeRef$current;
+    var headerWidth = ((_bodyRef$current = bodyRef.current) === null || _bodyRef$current === void 0 ? void 0 : _bodyRef$current.clientWidth) || 0;
+    console.log(headerWidth, "headerWidth");
+    var titleWidth = ((_titleContentRef$curr = titleContentRef.current) === null || _titleContentRef$curr === void 0 ? void 0 : _titleContentRef$curr.clientWidth) || 0;
+    var rightNodeWidth = ((_rightNodeRef$current = rightNodeRef.current) === null || _rightNodeRef$current === void 0 ? void 0 : _rightNodeRef$current.clientWidth) || 0;
+    if (rightNodeWidth + titleWidth >= headerWidth) {
+      setStyle({
+        overflow: "auto"
+      });
+      return;
+    }
+    setStyle({});
+  };
+  React.useLayoutEffect(function () {
+    setHeaderStyle();
+  }, []);
+  React.useEffect(function () {
+    var resizeFn = function resizeFn() {
+      setHeaderStyle();
+    };
+    window.addEventListener("resize", resizeFn);
+    return function () {
+      window.removeEventListener("resize", resizeFn);
+    };
+  }, []);
+  React.useEffect(function () {
+    var element = titleContentRef.current;
+    if (!element || !window.ResizeObserver) return;
+    var observer = new ResizeObserver(function () {
+      setHeaderStyle();
+    });
+    observer.observe(element);
+    return function () {
+      observer.disconnect();
+    };
+  }, []);
+  return style;
+};
+
+exports.useHeaderStyle = useHeaderStyle;
+// powered by h

package/lib/HTableBody/HeaderTitle/index.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var context = require('../../context.js');
 var index = require('../../hooks/index.js');
+var hooks = require('./hooks.js');
 
 var HeaderTitle = (function (_ref) {
   var headerTitle = _ref.headerTitle,
@@ -20,39 +20,15 @@ var HeaderTitle = (function (_ref) {
   var bodyRef = React.useRef();
   var titleContentRef = React.useRef();
   var rightNodeRef = React.useRef();
-  var _useState = React.useState({}),
-    _useState2 = _slicedToArray(_useState, 2),
-    style = _useState2[0],
-    setStyle = _useState2[1];
   var headerBox = index.useClassName("hw-table-header-title-box");
   var headerBoxContent = index.useClassName("hw-table-header-title-box-content");
   var titleClassname = index.useClassName("hw-table-header-title");
   var rightNodeClassname = index.useClassName("hw-table-header-right-node");
-  var setHeaderStyle = function setHeaderStyle() {
-    var _bodyRef$current, _titleContentRef$curr, _rightNodeRef$current;
-    var headerWidth = ((_bodyRef$current = bodyRef.current) === null || _bodyRef$current === void 0 ? void 0 : _bodyRef$current.clientWidth) || 0;
-    var titleWidth = ((_titleContentRef$curr = titleContentRef.current) === null || _titleContentRef$curr === void 0 ? void 0 : _titleContentRef$curr.clientWidth) || 0;
-    var rightNodeWidth = ((_rightNodeRef$current = rightNodeRef.current) === null || _rightNodeRef$current === void 0 ? void 0 : _rightNodeRef$current.clientWidth) || 0;
-    if (rightNodeWidth + titleWidth >= headerWidth) {
-      setStyle({
-        overflow: "auto"
-      });
-      return;
-    }
-    setStyle({});
-  };
-  React.useLayoutEffect(function () {
-    setHeaderStyle();
-  }, []);
-  React.useEffect(function () {
-    var resizeFn = function resizeFn() {
-      setHeaderStyle();
-    };
-    window.addEventListener("resize", resizeFn);
-    return function () {
-      window.removeEventListener("resize", resizeFn);
-    };
-  }, []);
+  var style = hooks.useHeaderStyle({
+    bodyRef: bodyRef,
+    titleContentRef: titleContentRef,
+    rightNodeRef: rightNodeRef
+  });
   if (!headerTitle && !rNode) {
     return null;
   }

package/lib/render/Text.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const _default: () => JSX.Element;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hw-component/table",
-  "version": "1.9.88",
+  "version": "1.9.89",
   "description": "基于antd二次开发table组件",
   "keywords": [
     "table"

package/src/components/HTableBody/HeaderTitle/hooks.ts

@@ -0,0 +1,48 @@
+import {MutableRefObject, useEffect, useLayoutEffect, useState} from "react";
+
+interface HeaderStyleParams {
+    bodyRef:MutableRefObject<HTMLDivElement|null>;
+    titleContentRef:MutableRefObject<HTMLDivElement|null>;
+    rightNodeRef:MutableRefObject<HTMLDivElement|null>;
+}
+
+export const useHeaderStyle = ({bodyRef,titleContentRef,rightNodeRef}:HeaderStyleParams) => {
+    const [style, setStyle] = useState({});
+    const setHeaderStyle = () => {
+        const headerWidth = bodyRef.current?.clientWidth || 0;
+        console.log(headerWidth,"headerWidth")
+        const titleWidth = titleContentRef.current?.clientWidth || 0;
+        const rightNodeWidth = rightNodeRef.current?.clientWidth || 0;
+        if (rightNodeWidth + titleWidth >= headerWidth) {
+            setStyle({
+                overflow: "auto",
+            });
+            return;
+        }
+        setStyle({});
+    };
+    useLayoutEffect(() => {
+        setHeaderStyle();
+    }, []);
+    useEffect(() => {
+        const resizeFn = () => {
+            setHeaderStyle();
+        };
+        window.addEventListener("resize", resizeFn);
+        return () => {
+            window.removeEventListener("resize", resizeFn);
+        };
+    }, []);
+    useEffect(() => {
+        const element = titleContentRef.current;
+        if (!element||!window.ResizeObserver) return;
+        const observer = new ResizeObserver(() => {
+           setHeaderStyle();
+        });
+        observer.observe(element);
+        return () => {
+          observer.disconnect();
+        }
+    }, []);
+    return style;
+}

package/src/components/HTableBody/HeaderTitle/index.tsx

@@ -1,53 +1,32 @@
-import { Row } from "antd";
 import type { HTableBodyProps } from "../modal";
-import type { DetailedReactHTMLElement } from "react";
-import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import {DetailedReactHTMLElement, useLayoutEffect} from "react";
+import React, { useRef } from "react";
 import { useHTableContext } from "../../context";
 import { useClassName } from "../../hooks";
+import {useHeaderStyle} from "./hooks";
+
 interface IProps {
   headerTitle: HTableBodyProps["headerTitle"];
   contentStyle?: React.CSSProperties;
   rNode?: React.ReactNode;
 }
 export default ({ headerTitle, contentStyle, rNode }: IProps) => {
-  const { tableInstance, selectedRowData, rowOnChange, allSelectChange } =
-    useHTableContext();
+  const { tableInstance, selectedRowData, rowOnChange, allSelectChange } = useHTableContext();
   const bodyRef = useRef<any>();
   const titleContentRef = useRef<any>();
   const rightNodeRef = useRef<any>();
-  const [style, setStyle] = useState({});
   const headerBox = useClassName("hw-table-header-title-box");
   const headerBoxContent = useClassName("hw-table-header-title-box-content");
   const titleClassname = useClassName("hw-table-header-title");
   const rightNodeClassname = useClassName("hw-table-header-right-node");
-  const setHeaderStyle = () => {
-    const headerWidth = bodyRef.current?.clientWidth || 0;
-    const titleWidth = titleContentRef.current?.clientWidth || 0;
-    const rightNodeWidth = rightNodeRef.current?.clientWidth || 0;
-    if (rightNodeWidth + titleWidth >= headerWidth) {
-      setStyle({
-        overflow: "auto",
-      });
-      return;
-    }
-    setStyle({});
-  };
-  useLayoutEffect(() => {
-    setHeaderStyle();
-  }, []);
-  useEffect(() => {
-    const resizeFn = () => {
-      setHeaderStyle();
-    };
-    window.addEventListener("resize", resizeFn);
-    return () => {
-      window.removeEventListener("resize", resizeFn);
-    };
-  }, []);
+  const style=useHeaderStyle({
+    bodyRef,
+    titleContentRef,
+    rightNodeRef
+  });
   if (!headerTitle && !rNode) {
     return null;
   }
-
   return (
     <div ref={bodyRef} className={titleClassname} style={contentStyle}>
       <div className={headerBox} style={style}>

package/src/pages/Table/index.tsx

@@ -77,6 +77,7 @@ const maker = (name) => {
 };
 export default () => {
   const hTable = useHTable();
+  const [width,setWidth]=useState(0);
   const { loading, data } = useRequest(() => {
     const arrayData: any[] = [];
     for (let i = 0; i < 10; i = i + 1) {
@@ -153,29 +154,19 @@ export default () => {
             dataSource={[{}, {}, {}]}
             headerTitle={
               <Space size={8}>
-                <div style={{ width: 1000 }}>
-                  <Button
+                <Button
                     onClick={() => {
+                      setTimeout(()=>{
+                        setWidth(1000);
+                      },1000)
                       console.log(hTable.table.getColSettingKeys());
                     }}
-                  >
-                    操作
-                  </Button>
-                </div>
-                <Button
-                  onClick={() => {
-                    console.log(hTable.table.getColSettingKeys());
-                  }}
-                >
-                  操作
-                </Button>
-                <Button
-                  onClick={() => {
-                    console.log(hTable.table.getColSettingKeys());
-                  }}
                 >
                   操作
                 </Button>
+               <div>
+                 <div style={{width,height:50,backgroundColor:"red"}}></div>
+               </div>
               </Space>
             }
             options={{