@hw-component/table 1.9.79 → 1.9.80

package/es/HTableBody/HeaderTitle/index.js

@@ -1,7 +1,7 @@
 // welcome to hoo hoo hoo
+import _slicedToArray from '@babel/runtime-corejs3/helpers/slicedToArray';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Row } from 'antd';
-import React from 'react';
+import React, { useRef, useState, useLayoutEffect, useEffect } from 'react';
 import { useHTableContext } from '../../context.js';
 import { useClassName } from '../../hooks/index.js';
 
@@ -14,20 +14,55 @@ var HeaderTitle = (function (_ref) {
     selectedRowData = _useHTableContext.selectedRowData,
     rowOnChange = _useHTableContext.rowOnChange,
     allSelectChange = _useHTableContext.allSelectChange;
+  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);
+    };
+  }, []);
   if (!headerTitle && !rNode) {
     return null;
   }
-  return jsxs(Row, {
-    justify: "space-between",
-    align: "middle",
+  return jsxs("div", {
+    ref: bodyRef,
+    className: titleClassname,
     style: contentStyle,
     children: [jsx("div", {
       className: headerBox,
+      style: style,
       children: jsx("div", {
         className: headerBoxContent,
+        ref: titleContentRef,
         children: headerTitle && /*#__PURE__*/React.cloneElement(headerTitle, {
           selectedRowData: selectedRowData,
           allSelectChange: allSelectChange,
@@ -37,6 +72,7 @@ var HeaderTitle = (function (_ref) {
       })
     }), rNode && jsx("div", {
       className: rightNodeClassname,
+      ref: rightNodeRef,
       children: rNode
     })]
   });

package/es/HTableBody/RowCheckBox/Title.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { HRowSelection } from "@/components/modal";
+import type { HRowSelection } from "@/components/modal";
 declare const _default: ({ allPageCheck, onChange, getCheckboxProps, }: HRowSelection) => JSX.Element;
 export default _default;

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

@@ -1,4 +1,4 @@
-import { Key } from "react";
+import type { Key } from "react";
 import type { HRowSelection } from "../../modal";
 export declare const useAllChecked: (keys?: Key[], data?: any[]) => boolean;
 export declare const useCheckControl: (data: any[] | undefined, onChange: HRowSelection["onChange"]) => {

package/es/HTableBody/RowRadioBoxSelection.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { HRowSelection } from "@/components/modal";
-interface RowRadioSelection {
+import type { HRowSelection } from "@/components/modal";
+interface RowRadioSelectionProps {
     data: any;
     onChange?: HRowSelection["onChange"];
     getCheckboxProps?: HRowSelection["getCheckboxProps"];
     index: number;
 }
-export declare const RowRadioSelection: ({ data, onChange, index, getCheckboxProps, }: RowRadioSelection) => JSX.Element;
+export declare const RowRadioSelection: ({ data, onChange, index, getCheckboxProps, }: RowRadioSelectionProps) => JSX.Element;
 export {};

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { HRowSelection } from "@/components/modal";
+import type { HRowSelection } from "@/components/modal";
 export declare const checkBoxSelectionCol: (rowSelection: HRowSelection) => {
     title: JSX.Element;
     width: number;

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

@@ -2,7 +2,7 @@ import type React from "react";
 import type { SizeType } from "antd/lib/config-provider/SizeContext";
 import type { HTableBodyProps } from "../modal";
 import type { GetRowKey } from "rc-table/lib/interface";
-import { RowObj } from "@/components/modal";
+import type { RowObj } from "@/components/modal";
 export declare const useSize: (size: SizeType) => {
     cuSize: "small" | "middle" | "large" | undefined;
     setCuSize: React.Dispatch<React.SetStateAction<"small" | "middle" | "large" | undefined>>;

package/es/index.css

@@ -119,14 +119,36 @@
   display: flex;
   position: relative;
   box-sizing: border-box;
-  overflow: auto;
   margin: -10px 0px;
   padding: 10px 0px;
-  margin-right: 12px;
 }
 .ant-hw-table-header-title-box .ant-hw-table-header-title-box-content {
   white-space: nowrap;
 }
+.ant-hw-table-header-title {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -webkit-align-content: center;
+      -ms-flex-line-pack: center;
+          align-content: center;
+}
+.ant-hw-table-header-right-node {
+  padding-left: 12px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
 .ant-hw-table-render-copy {
   margin-bottom: 0 !important;
   color: #1890ff !important;

package/es/render/Text.d.ts

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

package/lib/HTableBody/HeaderTitle/index.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 var jsxRuntime = require('react/jsx-runtime');
-var antd = require('antd');
 var React = require('react');
 var context = require('../../context.js');
 var index = require('../../hooks/index.js');
@@ -17,20 +17,55 @@ var HeaderTitle = (function (_ref) {
     selectedRowData = _useHTableContext.selectedRowData,
     rowOnChange = _useHTableContext.rowOnChange,
     allSelectChange = _useHTableContext.allSelectChange;
+  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);
+    };
+  }, []);
   if (!headerTitle && !rNode) {
     return null;
   }
-  return jsxRuntime.jsxs(antd.Row, {
-    justify: "space-between",
-    align: "middle",
+  return jsxRuntime.jsxs("div", {
+    ref: bodyRef,
+    className: titleClassname,
     style: contentStyle,
     children: [jsxRuntime.jsx("div", {
       className: headerBox,
+      style: style,
       children: jsxRuntime.jsx("div", {
         className: headerBoxContent,
+        ref: titleContentRef,
         children: headerTitle && /*#__PURE__*/React.cloneElement(headerTitle, {
           selectedRowData: selectedRowData,
           allSelectChange: allSelectChange,
@@ -40,6 +75,7 @@ var HeaderTitle = (function (_ref) {
       })
     }), rNode && jsxRuntime.jsx("div", {
       className: rightNodeClassname,
+      ref: rightNodeRef,
       children: rNode
     })]
   });

package/lib/HTableBody/RowCheckBox/Title.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { HRowSelection } from "@/components/modal";
+import type { HRowSelection } from "@/components/modal";
 declare const _default: ({ allPageCheck, onChange, getCheckboxProps, }: HRowSelection) => JSX.Element;
 export default _default;

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

@@ -1,4 +1,4 @@
-import { Key } from "react";
+import type { Key } from "react";
 import type { HRowSelection } from "../../modal";
 export declare const useAllChecked: (keys?: Key[], data?: any[]) => boolean;
 export declare const useCheckControl: (data: any[] | undefined, onChange: HRowSelection["onChange"]) => {

package/lib/HTableBody/RowRadioBoxSelection.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { HRowSelection } from "@/components/modal";
-interface RowRadioSelection {
+import type { HRowSelection } from "@/components/modal";
+interface RowRadioSelectionProps {
     data: any;
     onChange?: HRowSelection["onChange"];
     getCheckboxProps?: HRowSelection["getCheckboxProps"];
     index: number;
 }
-export declare const RowRadioSelection: ({ data, onChange, index, getCheckboxProps, }: RowRadioSelection) => JSX.Element;
+export declare const RowRadioSelection: ({ data, onChange, index, getCheckboxProps, }: RowRadioSelectionProps) => JSX.Element;
 export {};

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { HRowSelection } from "@/components/modal";
+import type { HRowSelection } from "@/components/modal";
 export declare const checkBoxSelectionCol: (rowSelection: HRowSelection) => {
     title: JSX.Element;
     width: number;

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

@@ -2,7 +2,7 @@ import type React from "react";
 import type { SizeType } from "antd/lib/config-provider/SizeContext";
 import type { HTableBodyProps } from "../modal";
 import type { GetRowKey } from "rc-table/lib/interface";
-import { RowObj } from "@/components/modal";
+import type { RowObj } from "@/components/modal";
 export declare const useSize: (size: SizeType) => {
     cuSize: "small" | "middle" | "large" | undefined;
     setCuSize: React.Dispatch<React.SetStateAction<"small" | "middle" | "large" | undefined>>;

package/lib/index.css

@@ -119,14 +119,36 @@
   display: flex;
   position: relative;
   box-sizing: border-box;
-  overflow: auto;
   margin: -10px 0px;
   padding: 10px 0px;
-  margin-right: 12px;
 }
 .ant-hw-table-header-title-box .ant-hw-table-header-title-box-content {
   white-space: nowrap;
 }
+.ant-hw-table-header-title {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -webkit-align-content: center;
+      -ms-flex-line-pack: center;
+          align-content: center;
+}
+.ant-hw-table-header-right-node {
+  padding-left: 12px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
 .ant-hw-table-render-copy {
   margin-bottom: 0 !important;
   color: #1890ff !important;

package/lib/render/Text.d.ts

@@ -1,3 +1,2 @@
-/// <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.79",
+  "version": "1.9.80",
   "description": "基于antd二次开发table组件",
   "keywords": [
     "table"

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

@@ -1,7 +1,7 @@
 import { Row } from "antd";
 import type { HTableBodyProps } from "../modal";
 import type { DetailedReactHTMLElement } from "react";
-import React from "react";
+import React, {useEffect, useLayoutEffect, useRef, useState} from "react";
 import { useHTableContext } from "../../context";
 import { useClassName } from "../../hooks";
 interface IProps {
@@ -10,18 +10,49 @@ interface IProps {
   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 rightNodeClassname=useClassName("hw-table-header-right-node");
+  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);
+    }
+  },[]);
   if (!headerTitle && !rNode) {
     return null;
   }
+
   return (
-    <Row justify={"space-between"} align={"middle"} style={contentStyle}>
-      <div className={headerBox} >
-        <div className={headerBoxContent}>
+    <div  ref={bodyRef}  className={titleClassname}  style={contentStyle}>
+      <div className={headerBox} style={style}>
+        <div className={headerBoxContent} ref={titleContentRef}>
           {headerTitle &&
             React.cloneElement(
               headerTitle as DetailedReactHTMLElement<any, any>,
@@ -29,7 +60,7 @@ export default ({ headerTitle, contentStyle, rNode }: IProps) => {
             )}
         </div>
       </div>
-      {rNode && <div className={rightNodeClassname}>{rNode}</div>}
-    </Row>
+      {rNode && <div className={rightNodeClassname} ref={rightNodeRef}>{rNode}</div>}
+    </div>
   );
 };

package/src/components/HTableBody/RowCheckBox/RowItem.tsx

@@ -2,48 +2,47 @@ import { useHTableContext } from "../../context";
 import { Checkbox } from "antd";
 import type { HRowSelection } from "../../modal";
 
-
 interface RowSelectionBoxProps {
-    data: any;
-    onChange?: HRowSelection["onChange"];
-    getCheckboxProps?: HRowSelection["getCheckboxProps"];
-    index: number;
+  data: any;
+  onChange?: HRowSelection["onChange"];
+  getCheckboxProps?: HRowSelection["getCheckboxProps"];
+  index: number;
 }
 export default ({
-                                         data,
-                                         onChange,
-                                         index,
-                                         getCheckboxProps,
-                                     }: RowSelectionBoxProps) => {
-    const { selectedRowData, rowOnChange, rowKey = "id" } = useHTableContext();
-    const { rowData = [], keys = [] } = selectedRowData;
-    const key = typeof rowKey === "function" ? rowKey(data, index) : data[rowKey];
-    const add = () => {
-        const newKeys = [...keys];
-        const newRowData = [...rowData];
-        newKeys.push(key);
-        newRowData.push(data);
-        rowOnChange(newKeys, newRowData);
-        onChange?.(newKeys, newRowData);
-    };
-    const cancel = () => {
-        const newKeys = [...keys];
-        const newRowData = [...rowData];
-        const keyIndex = newKeys.indexOf(key);
-        newKeys.splice(keyIndex, 1);
-        newRowData.splice(keyIndex, 1);
-        rowOnChange(newKeys, newRowData);
-        onChange?.(newKeys, newRowData);
-    };
-    const check = (e) => {
-        const checked = e.target.checked;
-        if (checked) {
-            add();
-            return;
-        }
-        cancel();
-    };
-    const { disabled = false } = getCheckboxProps?.(data) || {};
-    const checked = keys.indexOf(key) !== -1;
-    return <Checkbox checked={checked} onChange={check} disabled={disabled} />;
+  data,
+  onChange,
+  index,
+  getCheckboxProps,
+}: RowSelectionBoxProps) => {
+  const { selectedRowData, rowOnChange, rowKey = "id" } = useHTableContext();
+  const { rowData = [], keys = [] } = selectedRowData;
+  const key = typeof rowKey === "function" ? rowKey(data, index) : data[rowKey];
+  const add = () => {
+    const newKeys = [...keys];
+    const newRowData = [...rowData];
+    newKeys.push(key);
+    newRowData.push(data);
+    rowOnChange(newKeys, newRowData);
+    onChange?.(newKeys, newRowData);
+  };
+  const cancel = () => {
+    const newKeys = [...keys];
+    const newRowData = [...rowData];
+    const keyIndex = newKeys.indexOf(key);
+    newKeys.splice(keyIndex, 1);
+    newRowData.splice(keyIndex, 1);
+    rowOnChange(newKeys, newRowData);
+    onChange?.(newKeys, newRowData);
+  };
+  const check = (e) => {
+    const checked = e.target.checked;
+    if (checked) {
+      add();
+      return;
+    }
+    cancel();
+  };
+  const { disabled = false } = getCheckboxProps?.(data) || {};
+  const checked = keys.indexOf(key) !== -1;
+  return <Checkbox checked={checked} onChange={check} disabled={disabled} />;
 };

package/src/components/HTableBody/RowCheckBox/Title.tsx

@@ -1,66 +1,62 @@
-import {HRowSelection} from "@/components/modal";
-import {useHTableContext} from "@/components/context";
-import {useMemo} from "react";
-import {Checkbox, Dropdown, Menu} from "antd";
-import {useAllChecked, useCheckControl} from "./hooks";
-export default  ({
-                                              allPageCheck = true,
-                                              onChange,
-                                              getCheckboxProps,
-                                          }: HRowSelection) => {
-    const {
-        data,
-        selectedRowData,
-        rowKey = "id",
-    } = useHTableContext();
-    const { records = [] } = data || {};
-    const newData = records?.filter((item) => {
-        const { disabled = false } = getCheckboxProps?.(item) || {};
-        return !disabled;
-    });
-    const { keys, selectAll } = selectedRowData;
-    const {checkChange,menuClick}=useCheckControl(newData,onChange);
-    const dataLen = newData?.length || 0;
-    const checked = useAllChecked(keys,newData);
-    const configItems = useMemo(() => {
-        const fsArray = checked
-            ? {
-                label: "取消此页数据",
-                key: "cancel",
-            }
-            : {
-                label: "选择此页数据",
-                key: "check",
-            };
-        const enArray = selectAll
-            ? {
-                label: "取消全部数据",
-                key: "cancelAll",
-            }
-            : {
-                label: "选择全部数据",
-                key: "checkAll",
-            };
-        return [fsArray, enArray];
-    }, [checked, selectAll]);
+import type { HRowSelection } from "@/components/modal";
+import { useHTableContext } from "@/components/context";
+import { useMemo } from "react";
+import { Checkbox, Dropdown, Menu } from "antd";
+import { useAllChecked, useCheckControl } from "./hooks";
+export default ({
+  allPageCheck = true,
+  onChange,
+  getCheckboxProps,
+}: HRowSelection) => {
+  const { data, selectedRowData, rowKey = "id" } = useHTableContext();
+  const { records = [] } = data || {};
+  const newData = records?.filter((item) => {
+    const { disabled = false } = getCheckboxProps?.(item) || {};
+    return !disabled;
+  });
+  const { keys, selectAll } = selectedRowData;
+  const { checkChange, menuClick } = useCheckControl(newData, onChange);
+  const dataLen = newData?.length || 0;
+  const checked = useAllChecked(keys, newData);
+  const configItems = useMemo(() => {
+    const fsArray = checked
+      ? {
+          label: "取消此页数据",
+          key: "cancel",
+        }
+      : {
+          label: "选择此页数据",
+          key: "check",
+        };
+    const enArray = selectAll
+      ? {
+          label: "取消全部数据",
+          key: "cancelAll",
+        }
+      : {
+          label: "选择全部数据",
+          key: "checkAll",
+        };
+    return [fsArray, enArray];
+  }, [checked, selectAll]);
 
-    const menu = () => {
-        const MenuEle = Menu as any;
-        return <MenuEle onClick={menuClick} items={configItems} />;
-    };
-    const disabled = dataLen === 0;
-    if (allPageCheck) {
-        return (
-            <Dropdown overlay={menu} arrow placement={"bottom"} disabled={disabled}>
-                <Checkbox
-                    checked={checked}
-                    onChange={checkChange}
-                    disabled={disabled}
-                />
-            </Dropdown>
-        );
-    }
+  const menu = () => {
+    const MenuEle = Menu as any;
+    return <MenuEle onClick={menuClick} items={configItems} />;
+  };
+  const disabled = dataLen === 0;
+  if (allPageCheck) {
     return (
-        <Checkbox checked={checked} onChange={checkChange} disabled={disabled} />
+      <Dropdown overlay={menu} arrow placement={"bottom"} disabled={disabled}>
+        <Checkbox
+          checked={checked}
+          onChange={checkChange}
+          disabled={disabled}
+        />
+      </Dropdown>
     );
-};
+  }
+  return (
+    <Checkbox checked={checked} onChange={checkChange} disabled={disabled} />
+  );
+};