@hw-component/table 1.9.71 → 1.9.76

package/es/HTableBody/HeaderTitle/index.js

@@ -16,6 +16,7 @@ var HeaderTitle = (function (_ref) {
     allSelectChange = _useHTableContext.allSelectChange;
   var headerBox = useClassName("hw-table-header-title-box");
   var headerBoxContent = useClassName("hw-table-header-title-box-content");
+  var rightNodeClassname = useClassName("hw-table-header-right-node");
   if (!headerTitle && !rNode) {
     return null;
   }
@@ -34,7 +35,10 @@ var HeaderTitle = (function (_ref) {
           tableInstance: tableInstance
         })
       })
-    }), rNode && rNode]
+    }), rNode && jsx("div", {
+      className: rightNodeClassname,
+      children: rNode
+    })]
   });
 });
 

package/es/index.css

@@ -118,12 +118,17 @@
   display: -ms-flexbox;
   display: flex;
   position: relative;
-  margin-right: 12px;
-  overflow: auto;
+  padding: 10px;
+  margin: -10px;
+  overflow-x: auto;
+  box-sizing: border-box;
 }
 .ant-hw-table-header-title-box .ant-hw-table-header-title-box-content {
   white-space: nowrap;
 }
+.ant-hw-table-header-right-node {
+  padding-left: 12px;
+}
 .ant-hw-table-render-copy {
   margin-bottom: 0 !important;
   color: #1890ff !important;

package/es/render/TagsComponent.d.ts

@@ -17,6 +17,7 @@ interface IProps {
     maxLen?: number | null;
     popoverContentRender?: (node: React.ReactNode) => React.ReactNode;
     contentItemRender?: (item: any) => React.ReactNode;
+    extra?: React.ReactNode;
 }
 declare const TagsComponent: (props: IProps) => JSX.Element;
 export default TagsComponent;

package/es/render/TagsComponent.js

@@ -48,7 +48,8 @@ var TagsComponent = function TagsComponent(props) {
     tooltip = props.tooltip,
     tableInstance = props.tableInstance,
     maxLen = props.maxLen,
-    popoverContentRender = props.popoverContentRender;
+    popoverContentRender = props.popoverContentRender,
+    extra = props.extra;
   var _fieldNames$label = fieldNames.label,
     label = _fieldNames$label === void 0 ? "label" : _fieldNames$label,
     _fieldNames$value = fieldNames.value,
@@ -118,7 +119,7 @@ var TagsComponent = function TagsComponent(props) {
       children: jsxs(Tag, {
         children: ["...\u7B49", data.length, "\u4E2A"]
       })
-    })]
+    }), extra]
   });
 };
 

package/lib/HTableBody/HeaderTitle/index.js

@@ -19,6 +19,7 @@ var HeaderTitle = (function (_ref) {
     allSelectChange = _useHTableContext.allSelectChange;
   var headerBox = index.useClassName("hw-table-header-title-box");
   var headerBoxContent = index.useClassName("hw-table-header-title-box-content");
+  var rightNodeClassname = index.useClassName("hw-table-header-right-node");
   if (!headerTitle && !rNode) {
     return null;
   }
@@ -37,7 +38,10 @@ var HeaderTitle = (function (_ref) {
           tableInstance: tableInstance
         })
       })
-    }), rNode && rNode]
+    }), rNode && jsxRuntime.jsx("div", {
+      className: rightNodeClassname,
+      children: rNode
+    })]
   });
 });
 

package/lib/index.css

@@ -118,12 +118,17 @@
   display: -ms-flexbox;
   display: flex;
   position: relative;
-  margin-right: 12px;
-  overflow: auto;
+  padding: 10px;
+  margin: -10px;
+  overflow-x: auto;
+  box-sizing: border-box;
 }
 .ant-hw-table-header-title-box .ant-hw-table-header-title-box-content {
   white-space: nowrap;
 }
+.ant-hw-table-header-right-node {
+  padding-left: 12px;
+}
 .ant-hw-table-render-copy {
   margin-bottom: 0 !important;
   color: #1890ff !important;

package/lib/render/TagsComponent.d.ts

@@ -17,6 +17,7 @@ interface IProps {
     maxLen?: number | null;
     popoverContentRender?: (node: React.ReactNode) => React.ReactNode;
     contentItemRender?: (item: any) => React.ReactNode;
+    extra?: React.ReactNode;
 }
 declare const TagsComponent: (props: IProps) => JSX.Element;
 export default TagsComponent;

package/lib/render/TagsComponent.js

@@ -51,7 +51,8 @@ var TagsComponent = function TagsComponent(props) {
     tooltip = props.tooltip,
     tableInstance = props.tableInstance,
     maxLen = props.maxLen,
-    popoverContentRender = props.popoverContentRender;
+    popoverContentRender = props.popoverContentRender,
+    extra = props.extra;
   var _fieldNames$label = fieldNames.label,
     label = _fieldNames$label === void 0 ? "label" : _fieldNames$label,
     _fieldNames$value = fieldNames.value,
@@ -121,7 +122,7 @@ var TagsComponent = function TagsComponent(props) {
       children: jsxRuntime.jsxs(antd.Tag, {
         children: ["...\u7B49", data.length, "\u4E2A"]
       })
-    })]
+    }), extra]
   });
 };
 

package/package.json

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

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

@@ -14,7 +14,7 @@ export default ({ headerTitle, contentStyle, rNode }: IProps) => {
     useHTableContext();
   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");
   if (!headerTitle && !rNode) {
     return null;
   }
@@ -29,7 +29,7 @@ export default ({ headerTitle, contentStyle, rNode }: IProps) => {
             )}
         </div>
       </div>
-      {rNode && rNode}
+      {rNode && <div className={rightNodeClassname}>{rNode}</div>}
     </Row>
   );
 };

package/src/components/index.less

@@ -109,16 +109,22 @@
 .@{ant-prefix}-hw-table-pointer-not-hover{
   cursor: pointer;
 }
+
 .@{ant-prefix}-hw-table-header-title-box{
   flex: 1;
   display: flex;
   position: relative;
-  margin-right: 12px;
-  overflow: auto;
+  padding: 10px;
+  margin: -10px;
+  overflow-x: auto;
+  box-sizing: border-box;
  .@{ant-prefix}-hw-table-header-title-box-content{
     white-space: nowrap;
  }
 }
+.@{ant-prefix}-hw-table-header-right-node{
+  padding-left: 12px;
+}
 
 .@{ant-prefix}-hw-table-render-copy{
  margin-bottom: 0 !important;

package/src/components/render/TagsComponent.tsx

@@ -15,6 +15,7 @@ interface IProps {
   maxLen?: number | null;
   popoverContentRender?:(node:React.ReactNode)=>React.ReactNode;
   contentItemRender?:(item:any)=>React.ReactNode;
+  extra?:React.ReactNode;
 }
 const getTooltipProps = (
   title: string,
@@ -46,7 +47,8 @@ const TagsComponent = (props: IProps) => {
     tooltip,
     tableInstance,
     maxLen,
-    popoverContentRender
+    popoverContentRender,
+    extra
   } = props;
   const { label = "label", value = "value" } = fieldNames;
   const { tagData, moreTag } = useMemo(() => {
@@ -118,6 +120,7 @@ const TagsComponent = (props: IProps) => {
           <Tag>...等{data.length}个</Tag>
         </Popover>
       )}
+      {extra}
     </Row>
   );
 };

package/src/pages/Table/index.tsx

@@ -5,7 +5,7 @@ import {
   HTableHeaderSubBtn,
   HTableHeader,
 } from "@/components";
-import { Button, Card, Tooltip, Typography, Tag, Row } from "antd";
+import {Button, Card, Tooltip, Typography, Tag, Row, Space} from "antd";
 import { HFormConfigProvider } from "@hw-component/form";
 import { SettingOutlined } from "@ant-design/icons";
 import ProTable from "@ant-design/pro-table";
@@ -230,22 +230,32 @@ export default () => {
               total: 100,
             });
           }}
-          tableExtraRender={() => {
-            return <div>ffff</div>;
-          }}
           headerTitle={
-            <div>
-              <div style={{ width: "2000px", backgroundColor: "red" }}>
-                <Button
-                  type={"primary"}
+            <Space size={8} style={{backgroundColor:"red"}}>
+             <div style={{width:2000}}>
+               <Button
+                   onClick={() => {
+                     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>
+              >
+                操作
+              </Button>
+            </Space>
           }
           options={{
             settingRender: () => {