@hw-component/table 1.9.79 → 1.9.81

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/config.d.ts

@@ -7,7 +7,7 @@ declare const _default: {
     copy: (config: ConfigItemModal, itemData: any) => "-" | JSX.Element;
     link: (config: ConfigItemModal, itemData: any) => "-" | JSX.Element;
     text: (config: ConfigItemModal, itemData: any) => JSX.Element;
-    image: (config: ConfigItemModal, itemData: any) => JSX.Element;
+    image: (config: ConfigItemModal, itemData: any) => "-" | JSX.Element;
     avatar: (config: ConfigItemModal, itemData: any) => JSX.Element;
 };
 export default _default;

package/es/render/config.js

@@ -133,9 +133,13 @@ var textRender = function textRender(config, itemData) {
 var imageRender = function imageRender(config, itemData) {
   var _config$valueTypeProp6 = config.valueTypeProps,
     valueTypeProps = _config$valueTypeProp6 === void 0 ? {} : _config$valueTypeProp6;
+  var fallback = valueTypeProps.fallback;
   var tableVal = getTableVal(config, itemData);
+  if (!fallback && tableVal === null) {
+    return "-";
+  }
   return jsx(Image, _objectSpread({
-    src: tableVal,
+    src: tableVal || "",
     width: 48
   }, valueTypeProps));
 };

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/config.d.ts

@@ -7,7 +7,7 @@ declare const _default: {
     copy: (config: ConfigItemModal, itemData: any) => "-" | JSX.Element;
     link: (config: ConfigItemModal, itemData: any) => "-" | JSX.Element;
     text: (config: ConfigItemModal, itemData: any) => JSX.Element;
-    image: (config: ConfigItemModal, itemData: any) => JSX.Element;
+    image: (config: ConfigItemModal, itemData: any) => "-" | JSX.Element;
     avatar: (config: ConfigItemModal, itemData: any) => JSX.Element;
 };
 export default _default;

package/lib/render/config.js

@@ -136,9 +136,13 @@ var textRender = function textRender(config, itemData) {
 var imageRender = function imageRender(config, itemData) {
   var _config$valueTypeProp6 = config.valueTypeProps,
     valueTypeProps = _config$valueTypeProp6 === void 0 ? {} : _config$valueTypeProp6;
+  var fallback = valueTypeProps.fallback;
   var tableVal = getTableVal(config, itemData);
+  if (!fallback && tableVal === null) {
+    return "-";
+  }
   return jsxRuntime.jsx(antd.Image, _objectSpread({
-    src: tableVal,
+    src: tableVal || "",
     width: 48
   }, valueTypeProps));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hw-component/table",
-  "version": "1.9.79",
+  "version": "1.9.81",
   "description": "基于antd二次开发table组件",
   "keywords": [
     "table"
@@ -40,7 +40,7 @@
     "@babel/preset-env": "^7.23.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.5",
-    "@hw-component/form": "^1.9.12",
+    "@hw-component/form": "1.10.37",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-image": "^3.0.3",

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 {
@@ -12,16 +12,46 @@ interface IProps {
 export default ({ headerTitle, contentStyle, rNode }: IProps) => {
   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 +59,11 @@ 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} />;
 };