@hw-component/table 0.0.9-beta-v3 → 0.0.9-beta-v6

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

@@ -0,0 +1,9 @@
+import { HTableBodyProps } from "../index";
+import React from "react";
+interface IProps {
+    headerTitle: HTableBodyProps["headerTitle"];
+    contentStyle?: React.CSSProperties;
+    rNode?: React.ReactNode;
+}
+declare const _default: ({ headerTitle, contentStyle, rNode }: IProps) => JSX.Element | null;
+export default _default;

package/es/HTableBody/HeaderTitle/index.js

@@ -0,0 +1,38 @@
+// welcome to hoo hoo hoo
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Row } from 'antd';
+import React from 'react';
+import { useHTableContext } from '../../context.js';
+import { useClassName } from '../../hooks/index.js';
+
+var HeaderTitle = (function (_ref) {
+  var headerTitle = _ref.headerTitle,
+    contentStyle = _ref.contentStyle,
+    rNode = _ref.rNode;
+  var _useHTableContext = useHTableContext(),
+    tableInstance = _useHTableContext.tableInstance,
+    selectedRowData = _useHTableContext.selectedRowData,
+    rowOnChange = _useHTableContext.rowOnChange,
+    allSelectChange = _useHTableContext.allSelectChange;
+  var headerBox = useClassName('hw-table-header-title-box');
+  if (!headerTitle && !rNode) {
+    return null;
+  }
+  return jsxs(Row, {
+    justify: "space-between",
+    align: "middle",
+    style: contentStyle,
+    children: [jsx("div", {
+      className: headerBox,
+      children: headerTitle && /*#__PURE__*/React.cloneElement(headerTitle, {
+        selectedRowData: selectedRowData,
+        allSelectChange: allSelectChange,
+        rowOnChange: rowOnChange,
+        tableInstance: tableInstance
+      })
+    }), rNode && rNode]
+  });
+});
+
+export { HeaderTitle as default };
+// powered by hdj

package/es/HTableBody/Options/index.js

@@ -20,7 +20,6 @@ var Options = (function (_ref) {
     setSizeChange = _ref.setSizeChange,
     columns = _ref.columns,
     onChange = _ref.onChange;
-  var className = useClassName("hw-table-body-option");
   var pointer = useClassName(["hw-table-pointer", "hw-table-body-option-icon"]);
   var ref = useRef(null);
   var _useState = useState([]),
@@ -69,7 +68,6 @@ var Options = (function (_ref) {
   };
   return jsx(Row, {
     justify: "end",
-    className: className,
     ref: ref,
     children: jsxs(Space, {
       size: 20,

package/es/HTableBody/Options/utils.d.ts

@@ -55,7 +55,7 @@ export declare const getItemValue: (data: ConfigItemModal) => {
     render?: ((dom: React.ReactNode, data: any, index: number, tableInstance: import("../../modal").HTableInstance) => React.ReactNode) | undefined;
     showSearch?: boolean | undefined;
     searchType?: string | undefined;
-    searchRender?: ((props: import("@hw-component/form/es/Form/modal").HItemProps, node: React.ReactNode, form: import("antd").FormInstance<any>) => React.ReactNode) | undefined;
+    searchRender?: ((item: import("@hw-component/form/es/Form/modal").HItemProps, node: React.ReactNode, form: import("antd").FormInstance<any>, tableInstance: import("../../modal").HTableInstance) => React.ReactNode) | undefined;
     rowSelectionTitle?: boolean | undefined;
     index?: number | undefined;
     filters?: boolean | import("antd/lib/table/interface").ColumnFilterItem[] | undefined;

package/es/HTableBody/index.js

@@ -14,13 +14,13 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import ProTable from '@ant-design/pro-table';
 import { useSize, useCols, useSynchronousKeys } from './hooks.js';
 import { useHTableContext } from '../context.js';
-import React from 'react';
-import { Row, Alert, ConfigProvider, Empty } from 'antd';
+import { Alert, ConfigProvider, Empty } from 'antd';
 import { useHTableConfigContext } from '../TableConfig.js';
 import HTablePagination from '../HTablePagination/index.js';
 import { useClassName } from '../hooks/index.js';
 import AlertMsg from './AlertMsg.js';
 import Options from './Options/index.js';
+import HeaderTitle from './HeaderTitle/index.js';
 
 var _excluded = ["configData", "pagination", "onPageChange", "rowSelection", "rowKey", "emptyRender", "errorRender", "tableStyle", "paginationStyle", "headerTitle", "options", "actionRender", "affixProps", "goTop", "size", "optionsRender"];
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -64,11 +64,11 @@ var Body = (function (_ref) {
     tableInstance = _useHTableContext.tableInstance,
     contextConfigData = _useHTableContext.configData,
     data = _useHTableContext.data,
-    selectedRowData = _useHTableContext.selectedRowData,
-    rowOnChange = _useHTableContext.rowOnChange,
-    error = _useHTableContext.error,
-    loading = _useHTableContext.loading,
-    allSelectChange = _useHTableContext.allSelectChange;
+    selectedRowData = _useHTableContext.selectedRowData;
+    _useHTableContext.rowOnChange;
+    var error = _useHTableContext.error,
+    loading = _useHTableContext.loading;
+    _useHTableContext.allSelectChange;
   var _useHTableConfigConte = useHTableConfigContext({
       emptyRender: emptyRender,
       errorRender: errorRender
@@ -108,21 +108,13 @@ var Body = (function (_ref) {
   var _selectedRowData$keys = _keysInstanceProperty(selectedRowData),
     keys = _selectedRowData$keys === void 0 ? [] : _selectedRowData$keys,
     selectAll = selectedRowData.selectAll;
+  var defaultOptionsNode = optionsRender ? optionsRender(optionsNode) : optionsNode;
   var alwaysShowAlert = keys.length > 0 || selectAll || configAlwaysShowAlert;
   var className = useClassName("hw-table-body");
   return jsxs("div", {
     style: tableStyle,
     className: "hw_table_body  ".concat(className),
-    children: [headerTitle && jsx(Row, {
-      gutter: [0, 8],
-      style: contentStyle,
-      children: /*#__PURE__*/React.cloneElement(headerTitle, {
-        selectedRowData: selectedRowData,
-        allSelectChange: allSelectChange,
-        rowOnChange: rowOnChange,
-        tableInstance: tableInstance
-      })
-    }), alwaysShowAlert && jsx("div", {
+    children: [alwaysShowAlert && jsx("div", {
       style: contentStyle,
       children: jsx(Alert, {
         message: jsx(AlertMsg, {
@@ -130,7 +122,11 @@ var Body = (function (_ref) {
         }),
         type: "info"
       })
-    }), optionsRender ? optionsRender(optionsNode) : optionsNode, jsxs(ConfigProvider, {
+    }), jsx(HeaderTitle, {
+      headerTitle: headerTitle,
+      contentStyle: contentStyle,
+      rNode: defaultOptionsNode
+    }), jsxs(ConfigProvider, {
       renderEmpty: function renderEmpty() {
         if (error) {
           return tableErrorRender === null || tableErrorRender === void 0 ? void 0 : tableErrorRender(tableInstance, error);
@@ -141,6 +137,9 @@ var Body = (function (_ref) {
         columns: cols,
         size: cuSize,
         search: false,
+        onChange: function onChange(pagination, filters, sorter) {
+          console.log(filters, sorter);
+        },
         options: false,
         tableStyle: {
           paddingBottom: 0

package/es/index.css

@@ -41,9 +41,6 @@
 .ant-hw-table-header .ant-hw-table-header-item-hide {
   display: none;
 }
-.ant-hw-table-body-option {
-  padding: 0px 24px 16px 24px;
-}
 .ant-hw-table-body-option-icon {
   font-size: 16px;
 }
@@ -84,3 +81,15 @@
 .ant-hw-table-pointer:hover {
   color: #1890ff;
 }
+.ant-hw-table-header-title-box {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  margin-right: 12px;
+}

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

@@ -0,0 +1,9 @@
+import { HTableBodyProps } from "../index";
+import React from "react";
+interface IProps {
+    headerTitle: HTableBodyProps["headerTitle"];
+    contentStyle?: React.CSSProperties;
+    rNode?: React.ReactNode;
+}
+declare const _default: ({ headerTitle, contentStyle, rNode }: IProps) => JSX.Element | null;
+export default _default;

package/lib/HTableBody/HeaderTitle/index.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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');
+
+var HeaderTitle = (function (_ref) {
+  var headerTitle = _ref.headerTitle,
+    contentStyle = _ref.contentStyle,
+    rNode = _ref.rNode;
+  var _useHTableContext = context.useHTableContext(),
+    tableInstance = _useHTableContext.tableInstance,
+    selectedRowData = _useHTableContext.selectedRowData,
+    rowOnChange = _useHTableContext.rowOnChange,
+    allSelectChange = _useHTableContext.allSelectChange;
+  var headerBox = index.useClassName('hw-table-header-title-box');
+  if (!headerTitle && !rNode) {
+    return null;
+  }
+  return jsxRuntime.jsxs(antd.Row, {
+    justify: "space-between",
+    align: "middle",
+    style: contentStyle,
+    children: [jsxRuntime.jsx("div", {
+      className: headerBox,
+      children: headerTitle && /*#__PURE__*/React.cloneElement(headerTitle, {
+        selectedRowData: selectedRowData,
+        allSelectChange: allSelectChange,
+        rowOnChange: rowOnChange,
+        tableInstance: tableInstance
+      })
+    }), rNode && rNode]
+  });
+});
+
+exports.default = HeaderTitle;
+// powered by h

package/lib/HTableBody/Options/index.js

@@ -23,7 +23,6 @@ var Options = (function (_ref) {
     setSizeChange = _ref.setSizeChange,
     columns = _ref.columns,
     onChange = _ref.onChange;
-  var className = index.useClassName("hw-table-body-option");
   var pointer = index.useClassName(["hw-table-pointer", "hw-table-body-option-icon"]);
   var ref = React.useRef(null);
   var _useState = React.useState([]),
@@ -72,7 +71,6 @@ var Options = (function (_ref) {
   };
   return jsxRuntime.jsx(antd.Row, {
     justify: "end",
-    className: className,
     ref: ref,
     children: jsxRuntime.jsxs(antd.Space, {
       size: 20,

package/lib/HTableBody/Options/utils.d.ts

@@ -55,7 +55,7 @@ export declare const getItemValue: (data: ConfigItemModal) => {
     render?: ((dom: React.ReactNode, data: any, index: number, tableInstance: import("../../modal").HTableInstance) => React.ReactNode) | undefined;
     showSearch?: boolean | undefined;
     searchType?: string | undefined;
-    searchRender?: ((props: import("@hw-component/form/es/Form/modal").HItemProps, node: React.ReactNode, form: import("antd").FormInstance<any>) => React.ReactNode) | undefined;
+    searchRender?: ((item: import("@hw-component/form/es/Form/modal").HItemProps, node: React.ReactNode, form: import("antd").FormInstance<any>, tableInstance: import("../../modal").HTableInstance) => React.ReactNode) | undefined;
     rowSelectionTitle?: boolean | undefined;
     index?: number | undefined;
     filters?: boolean | import("antd/lib/table/interface").ColumnFilterItem[] | undefined;

package/lib/HTableBody/index.js

@@ -17,13 +17,13 @@ var jsxRuntime = require('react/jsx-runtime');
 var ProTable = require('@ant-design/pro-table');
 var hooks = require('./hooks.js');
 var context = require('../context.js');
-var React = require('react');
 var antd = require('antd');
 var TableConfig = require('../TableConfig.js');
-var index$2 = require('../HTablePagination/index.js');
+var index$3 = require('../HTablePagination/index.js');
 var index$1 = require('../hooks/index.js');
 var AlertMsg = require('./AlertMsg.js');
 var index = require('./Options/index.js');
+var index$2 = require('./HeaderTitle/index.js');
 
 var _excluded = ["configData", "pagination", "onPageChange", "rowSelection", "rowKey", "emptyRender", "errorRender", "tableStyle", "paginationStyle", "headerTitle", "options", "actionRender", "affixProps", "goTop", "size", "optionsRender"];
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -67,11 +67,11 @@ var Body = (function (_ref) {
     tableInstance = _useHTableContext.tableInstance,
     contextConfigData = _useHTableContext.configData,
     data = _useHTableContext.data,
-    selectedRowData = _useHTableContext.selectedRowData,
-    rowOnChange = _useHTableContext.rowOnChange,
-    error = _useHTableContext.error,
-    loading = _useHTableContext.loading,
-    allSelectChange = _useHTableContext.allSelectChange;
+    selectedRowData = _useHTableContext.selectedRowData;
+    _useHTableContext.rowOnChange;
+    var error = _useHTableContext.error,
+    loading = _useHTableContext.loading;
+    _useHTableContext.allSelectChange;
   var _useHTableConfigConte = TableConfig.useHTableConfigContext({
       emptyRender: emptyRender,
       errorRender: errorRender
@@ -111,21 +111,13 @@ var Body = (function (_ref) {
   var _selectedRowData$keys = _keysInstanceProperty(selectedRowData),
     keys = _selectedRowData$keys === void 0 ? [] : _selectedRowData$keys,
     selectAll = selectedRowData.selectAll;
+  var defaultOptionsNode = optionsRender ? optionsRender(optionsNode) : optionsNode;
   var alwaysShowAlert = keys.length > 0 || selectAll || configAlwaysShowAlert;
   var className = index$1.useClassName("hw-table-body");
   return jsxRuntime.jsxs("div", {
     style: tableStyle,
     className: "hw_table_body  ".concat(className),
-    children: [headerTitle && jsxRuntime.jsx(antd.Row, {
-      gutter: [0, 8],
-      style: contentStyle,
-      children: /*#__PURE__*/React.cloneElement(headerTitle, {
-        selectedRowData: selectedRowData,
-        allSelectChange: allSelectChange,
-        rowOnChange: rowOnChange,
-        tableInstance: tableInstance
-      })
-    }), alwaysShowAlert && jsxRuntime.jsx("div", {
+    children: [alwaysShowAlert && jsxRuntime.jsx("div", {
       style: contentStyle,
       children: jsxRuntime.jsx(antd.Alert, {
         message: jsxRuntime.jsx(AlertMsg.default, {
@@ -133,7 +125,11 @@ var Body = (function (_ref) {
         }),
         type: "info"
       })
-    }), optionsRender ? optionsRender(optionsNode) : optionsNode, jsxRuntime.jsxs(antd.ConfigProvider, {
+    }), jsxRuntime.jsx(index$2.default, {
+      headerTitle: headerTitle,
+      contentStyle: contentStyle,
+      rNode: defaultOptionsNode
+    }), jsxRuntime.jsxs(antd.ConfigProvider, {
       renderEmpty: function renderEmpty() {
         if (error) {
           return tableErrorRender === null || tableErrorRender === void 0 ? void 0 : tableErrorRender(tableInstance, error);
@@ -144,6 +140,9 @@ var Body = (function (_ref) {
         columns: cols,
         size: cuSize,
         search: false,
+        onChange: function onChange(pagination, filters, sorter) {
+          console.log(filters, sorter);
+        },
         options: false,
         tableStyle: {
           paddingBottom: 0
@@ -153,7 +152,7 @@ var Body = (function (_ref) {
         rowKey: rowKey,
         dataSource: records,
         pagination: false
-      })), pagination !== false && jsxRuntime.jsx(index$2.default, _objectSpread({
+      })), pagination !== false && jsxRuntime.jsx(index$3.default, _objectSpread({
         onPageChange: onPageChange,
         paginationStyle: paginationStyle,
         affixProps: affixProps,

package/lib/index.css

@@ -41,9 +41,6 @@
 .ant-hw-table-header .ant-hw-table-header-item-hide {
   display: none;
 }
-.ant-hw-table-body-option {
-  padding: 0px 24px 16px 24px;
-}
 .ant-hw-table-body-option-icon {
   font-size: 16px;
 }
@@ -84,3 +81,15 @@
 .ant-hw-table-pointer:hover {
   color: #1890ff;
 }
+.ant-hw-table-header-title-box {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  margin-right: 12px;
+}

package/package.json

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

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

@@ -0,0 +1,31 @@
+import {Row, Space} from "antd";
+import {HTableBodyProps} from "../index";
+import React, {DetailedReactHTMLElement} from "react";
+import { useHTableContext } from "../../context";
+import {useClassName} 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 headerBox=useClassName('hw-table-header-title-box');
+    if (!headerTitle&&!rNode){
+        return null
+    }
+    return <Row justify={"space-between"} align={"middle"} style={contentStyle}>
+        <div className={headerBox}>
+            {headerTitle && React.cloneElement(
+                headerTitle as DetailedReactHTMLElement<any, any>,
+                { selectedRowData, allSelectChange, rowOnChange, tableInstance }
+            )}
+        </div>
+        {rNode&&rNode}
+    </Row>
+}

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

@@ -20,7 +20,6 @@ export default ({
   columns,
   onChange,
 }: IProps) => {
-  const className = useClassName("hw-table-body-option");
   const pointer = useClassName([
     "hw-table-pointer",
     "hw-table-body-option-icon",
@@ -59,7 +58,7 @@ export default ({
     );
   };
   return (
-    <Row justify={"end"} className={className} ref={ref}>
+    <Row justify={"end"} ref={ref}>
       <Space size={20}>
         {reload && (
           <Tooltip title="刷新">

package/src/components/HTableBody/index.tsx

@@ -14,6 +14,7 @@ import AlertMsg from "./AlertMsg";
 import type { HRowSelection } from "../modal";
 import type { AffixProps } from "antd/lib/affix";
 import Options from "./Options";
+import HeaderTitle from './HeaderTitle';
 export interface HTableBodyProps
   extends Omit<ProTableProps<any, any>, "dataSource" | "rowSelection"> {
   configData?: ConfigDataModal;
@@ -97,19 +98,11 @@ export default ({
     />
   );
   const { keys = [], selectAll } = selectedRowData;
-
+  const defaultOptionsNode=optionsRender ? optionsRender(optionsNode) : optionsNode;
   const alwaysShowAlert = keys.length > 0 || selectAll || configAlwaysShowAlert;
   const className = useClassName("hw-table-body");
   return (
     <div style={tableStyle} className={`hw_table_body  ${className}`}>
-      {headerTitle && (
-        <Row gutter={[0, 8]} style={contentStyle}>
-          {React.cloneElement(
-            headerTitle as DetailedReactHTMLElement<any, any>,
-            { selectedRowData, allSelectChange, rowOnChange, tableInstance }
-          )}
-        </Row>
-      )}
       {alwaysShowAlert && (
         <div style={contentStyle}>
           <Alert
@@ -118,7 +111,7 @@ export default ({
           />
         </div>
       )}
-      {optionsRender ? optionsRender(optionsNode) : optionsNode}
+      <HeaderTitle headerTitle={headerTitle} contentStyle={contentStyle} rNode={defaultOptionsNode}/>
       <ConfigProvider
         renderEmpty={() => {
           if (error) {
@@ -132,6 +125,9 @@ export default ({
           columns={cols as any}
           size={cuSize}
           search={false}
+          onChange={(pagination, filters, sorter)=>{
+            console.log(filters,sorter)
+          }}
           options={false}
           tableStyle={{
             paddingBottom: 0,

package/src/components/index.less

@@ -44,10 +44,6 @@
   }
 }
 
-.@{ant-prefix}-hw-table-body-option{
-  padding: 0px 24px 16px 24px;
-
-}
 .@{ant-prefix}-hw-table-body-option-icon{
  font-size: 16px;
 }
@@ -84,4 +80,10 @@
     color:#1890ff;
   }
 }
+.@{ant-prefix}-hw-table-header-title-box{
+  flex: 1;
+  display: flex;
+  position: relative;
+  margin-right: 12px;
+}
 

package/src/pages/Table/index.tsx

@@ -7,16 +7,11 @@ const configData = [
     title: "座位21321",
     showSearch: true,
     searchType: "select",
-    hideInTable: true,
     dataIndex: "name",
+    sorter: true,
     itemProps: {
       options: [{ label: "1", value: 1 }],
     },
-    searchRender:(item,node,form,tableInstance)=>{
-      return <div onClick={()=>{
-        tableInstance.table.dispatch("test",{name:"111"})
-      }}>点击</div>
-    }
   },
   {
     title: "座位断开",
@@ -69,36 +64,22 @@ export default () => {
           configData={configData}
           rowKey={"id"}
           table={hTable}
-          optionsRender={(node) => {
-            return <Space>ffff{node}</Space>;
-          }}
           action={{
             test:(params)=>{
                 console.log(params,"lllll")
             }
           }}
           rowSelection={{
-            alwaysShowAlert: true,
             allPageCheck: false,
           }}
           affixProps={{
             target: () => document.querySelector(".body"),
           }}
-          actionRender={() => {
-            return (
-              <Button
-                onClick={() => {
-                  console.log(hTable.table.settingKeys);
-                }}
-              >
-                你大爷
-              </Button>
-            );
-          }}
           scroll={{
             x: 1000,
           }}
           headerTitle={<Button type={"primary"}>操作</Button>}
+          options={false}
           request={(params) => {
             console.log(params,".....");
             const { current = 1 } = params;