@hw-component/table 1.2.0 → 1.2.2

package/lib/HTableBody/index.js

@@ -34,11 +34,6 @@ var defaultRender = function defaultRender() {
     image: antd.Empty.PRESENTED_IMAGE_SIMPLE
   });
 };
-var contentStyle = {
-  paddingLeft: 24,
-  paddingRight: 24,
-  paddingBottom: 16
-};
 var Body = (function (_ref) {
   var configData = _ref.configData,
     _ref$pagination = _ref.pagination,
@@ -127,66 +122,73 @@ var Body = (function (_ref) {
   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,
+  var _useHTableConfigConte4 = TableConfig.useHTableConfigContext({
+      tableStyle: tableStyle
+    }),
+    defaultTableStyle = _useHTableConfigConte4.tableStyle;
+  return jsxRuntime.jsx("div", {
+    style: defaultTableStyle,
     className: "hw_table_body  ".concat(className),
-    children: [alwaysShowAlert && jsxRuntime.jsx("div", {
-      style: contentStyle,
-      children: jsxRuntime.jsx(antd.Alert, {
+    children: jsxRuntime.jsxs(antd.Space, {
+      size: 16,
+      direction: "vertical",
+      style: {
+        width: "100%"
+      },
+      children: [alwaysShowAlert && jsxRuntime.jsx(antd.Alert, {
         message: jsxRuntime.jsx(AlertMsg.default, {
           actionRender: actionRender
         }),
         type: "info"
-      })
-    }), 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);
-        }
-        return tableEmptyRender === null || tableEmptyRender === void 0 ? void 0 : tableEmptyRender(tableInstance);
-      },
-      children: [jsxRuntime.jsx(ProTable, _objectSpread(_objectSpread({}, props), {}, {
-        columnsState: _objectSpread(_objectSpread({}, selfColStatus), {}, {
-          value: value
-        }),
-        columns: cols,
-        size: cuSize,
-        search: false,
-        onChange: function onChange(page, filters, sorter) {
-          if (localSorter) {
-            return;
+      }), jsxRuntime.jsx(index$2.default, {
+        headerTitle: headerTitle,
+        rNode: defaultOptionsNode
+      }), jsxRuntime.jsxs(antd.ConfigProvider, {
+        renderEmpty: function renderEmpty() {
+          if (error) {
+            return tableErrorRender === null || tableErrorRender === void 0 ? void 0 : tableErrorRender(tableInstance, error);
           }
-          var field = sorter.field,
-            order = sorter.order;
-          var orderByField = typeof order === "undefined" ? undefined : field;
-          var asc = typeof order === "undefined" ? undefined : order === "ascend";
-          tableInstance.table.reloadWithParams({
-            current: 1,
-            orderByField: orderByField,
-            asc: asc
-          });
-        },
-        tableStyle: {
-          paddingBottom: 0
+          return tableEmptyRender === null || tableEmptyRender === void 0 ? void 0 : tableEmptyRender(tableInstance);
         },
-        options: false,
-        rowSelection: false,
-        loading: loading,
-        rowKey: rowKey,
-        dataSource: records,
-        pagination: false
-      })), pagination !== false && jsxRuntime.jsx(index$3.default, _objectSpread({
-        onPageChange: onPageChange,
-        paginationStyle: paginationStyle,
-        affixProps: affixProps,
-        goTop: goTop,
-        actionRender: paginationActionRender
-      }, pagination))]
-    })]
+        children: [jsxRuntime.jsx(ProTable, _objectSpread(_objectSpread({}, props), {}, {
+          columnsState: _objectSpread(_objectSpread({}, selfColStatus), {}, {
+            value: value
+          }),
+          columns: cols,
+          size: cuSize,
+          search: false,
+          onChange: function onChange(page, filters, sorter) {
+            if (localSorter) {
+              return;
+            }
+            var field = sorter.field,
+              order = sorter.order;
+            var orderByField = typeof order === "undefined" ? undefined : field;
+            var asc = typeof order === "undefined" ? undefined : order === "ascend";
+            tableInstance.table.reloadWithParams({
+              current: 1,
+              orderByField: orderByField,
+              asc: asc
+            });
+          },
+          tableStyle: {
+            paddingBottom: 0
+          },
+          options: false,
+          rowSelection: false,
+          loading: loading,
+          rowKey: rowKey,
+          dataSource: records,
+          pagination: false
+        })), pagination !== false && jsxRuntime.jsx(index$3.default, _objectSpread({
+          onPageChange: onPageChange,
+          paginationStyle: paginationStyle,
+          affixProps: affixProps,
+          goTop: goTop,
+          actionRender: paginationActionRender
+        }, pagination))]
+      })]
+    })
   });
 });
 

package/lib/HTableHeader/index.js

@@ -2,15 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _Object$keys = require('@babel/runtime-corejs3/core-js/object/keys');
-var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js/object/get-own-property-symbols');
-var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/filter');
-var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js/object/get-own-property-descriptor');
-var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/for-each');
-var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js/object/get-own-property-descriptors');
-var _Object$defineProperties = require('@babel/runtime-corejs3/core-js/object/define-properties');
-var _Object$defineProperty = require('@babel/runtime-corejs3/core-js/object/define-property');
-var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var jsxRuntime = require('react/jsx-runtime');
 var antd = require('antd');
 var context = require('../context.js');
@@ -18,9 +9,8 @@ var form = require('@hw-component/form');
 var index = require('../hooks/index.js');
 var hooks = require('./hooks.js');
 var Context = require('./Context.js');
+var TableConfig = require('../TableConfig.js');
 
-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; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var defaultSearchSpan = {
   xxl: 4,
   xl: 6,
@@ -56,11 +46,12 @@ var Header = (function (_ref) {
   var tableHideLabel = typeof hideLabel === "undefined" ? contextHideLabel : hideLabel;
   var tableLabelWidth = labelWidth || contextLabelWidth;
   var className = index.useClassName("hw-table-header");
+  var _useHTableConfigConte = TableConfig.useHTableConfigContext({
+      headerStyle: headerStyle
+    }),
+    defaultHeaderStyle = _useHTableConfigConte.headerStyle;
   return jsxRuntime.jsx(antd.Card, {
-    style: _objectSpread({
-      borderBottomLeftRadius: 0,
-      borderBottomRightRadius: 0
-    }, headerStyle),
+    style: defaultHeaderStyle,
     bordered: false,
     className: "hw_table_header ".concat(className),
     bodyStyle: {

package/lib/HTablePagination/index.js

@@ -21,6 +21,7 @@ var context = require('../context.js');
 var index = require('../hooks/index.js');
 var React = require('react');
 var index$1 = require('../GoTop/index.js');
+var TableConfig = require('../TableConfig.js');
 
 var _excluded = ["onPageChange", "paginationStyle", "affixProps", "goTop", "actionRender"],
   _excluded2 = ["offsetBottom"];
@@ -53,12 +54,16 @@ var HTablePagination = (function (_ref) {
   if (!data) {
     return jsxRuntime.jsx(jsxRuntime.Fragment, {});
   }
+  var _useHTableConfigConte = TableConfig.useHTableConfigContext({
+      paginationStyle: paginationStyle
+    }),
+    defaultPaginationStyle = _useHTableConfigConte.paginationStyle;
   if (affixProps === false) {
     return jsxRuntime.jsxs(antd.Row, {
       justify: "space-between",
       align: "middle",
       className: className,
-      style: paginationStyle,
+      style: defaultPaginationStyle,
       children: [jsxRuntime.jsx("div", {
         children: actionRender === null || actionRender === void 0 ? void 0 : actionRender(tableInstance)
       }), jsxRuntime.jsx(antd.Pagination, _objectSpread({
@@ -104,7 +109,7 @@ var HTablePagination = (function (_ref) {
       justify: "space-between",
       className: className,
       align: "middle",
-      style: _objectSpread(_objectSpread({}, paginationStyle), style),
+      style: _objectSpread(_objectSpread({}, defaultPaginationStyle), style),
       children: [jsxRuntime.jsx("div", {
         children: actionRender === null || actionRender === void 0 ? void 0 : actionRender(tableInstance)
       }), jsxRuntime.jsx(antd.Pagination, _objectSpread({

package/lib/Table.js

@@ -14,8 +14,8 @@ var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
 var jsxRuntime = require('react/jsx-runtime');
-var index = require('./HTableHeader/index.js');
-var index$1 = require('./HTableBody/index.js');
+var index$1 = require('./HTableHeader/index.js');
+var index$2 = require('./HTableBody/index.js');
 var useCurrentTable = require('./hooks/useCurrentTable.js');
 var useRowObj = require('./hooks/useRowObj.js');
 var context = require('./context.js');
@@ -23,6 +23,7 @@ var antd = require('antd');
 var useReq = require('./hooks/useReq.js');
 var useDispatch = require('./hooks/useDispatch.js');
 var React = require('react');
+var index = require('./hooks/index.js');
 
 var _excluded = ["request", "configData", "searchSpan", "table", "hideHeader", "headerStyle", "tableStyle", "action", "spaceSize", "className", "paginationStyle", "rowKey", "onFinish", "manual", "formInitValues", "hideLabel", "labelWidth", "onReset"];
 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; }
@@ -33,10 +34,8 @@ var Table = (function (_ref) {
     searchSpan = _ref.searchSpan,
     table = _ref.table,
     hideHeader = _ref.hideHeader,
-    _ref$headerStyle = _ref.headerStyle,
-    headerStyle = _ref$headerStyle === void 0 ? {} : _ref$headerStyle,
-    _ref$tableStyle = _ref.tableStyle,
-    tableStyle = _ref$tableStyle === void 0 ? {} : _ref$tableStyle,
+    headerStyle = _ref.headerStyle,
+    tableStyle = _ref.tableStyle,
     _ref$action = _ref.action,
     action = _ref$action === void 0 ? {} : _ref$action;
     _ref.spaceSize;
@@ -90,6 +89,7 @@ var Table = (function (_ref) {
     selectedRowData: selectedRowData,
     dataSource: data
   });
+  var contentClassName = index.useClassName("hw-table-content");
   return jsxRuntime.jsx(context.HTableContext.Provider, {
     value: {
       tableInstance: tableInstance,
@@ -121,13 +121,14 @@ var Table = (function (_ref) {
       style: {
         width: "100%"
       },
-      children: [!hideHeader && jsxRuntime.jsx(index.default, {
+      className: contentClassName,
+      children: [!hideHeader && jsxRuntime.jsx(index$1.default, {
         searchSpan: searchSpan,
         headerStyle: headerStyle,
         onFinish: onFinish,
         initValues: formInitValues,
         onReset: onReset
-      }), jsxRuntime.jsx(index$1.default, _objectSpread({
+      }), jsxRuntime.jsx(index$2.default, _objectSpread({
         tableStyle: hideHeader ? _objectSpread({
           paddingTop: 24
         }, tableStyle) : tableStyle,

package/lib/TableConfig.d.ts

@@ -3,11 +3,17 @@ import type { HTableInstance } from "src/components/modal";
 interface HTableConfigContextModal {
     emptyRender?: (table: HTableInstance) => React.ReactNode;
     errorRender?: (table: HTableInstance, error: Error) => React.ReactNode;
+    headerStyle?: React.CSSProperties;
+    tableStyle?: React.CSSProperties;
+    paginationStyle?: React.CSSProperties;
 }
 export declare const HTableConfigContext: React.Context<HTableConfigContextModal | null>;
-export declare const useHTableConfigContext: ({ emptyRender, errorRender, }: HTableConfigContextModal) => {
+export declare const useHTableConfigContext: ({ emptyRender, errorRender, headerStyle, tableStyle, paginationStyle }: HTableConfigContextModal) => {
     errorRender: ((table: HTableInstance, error: Error) => React.ReactNode) | undefined;
     emptyRender: ((table: HTableInstance) => React.ReactNode) | undefined;
+    headerStyle: React.CSSProperties | undefined;
+    tableStyle: React.CSSProperties | undefined;
+    paginationStyle: React.CSSProperties | undefined;
 };
 declare const Index: React.FC<HTableConfigContextModal>;
 export default Index;

package/lib/TableConfig.js

@@ -10,13 +10,22 @@ var _excluded = ["children"];
 var HTableConfigContext = /*#__PURE__*/React.createContext(null);
 var useHTableConfigContext = function useHTableConfigContext(_ref) {
   var emptyRender = _ref.emptyRender,
-    errorRender = _ref.errorRender;
+    errorRender = _ref.errorRender,
+    headerStyle = _ref.headerStyle,
+    tableStyle = _ref.tableStyle,
+    paginationStyle = _ref.paginationStyle;
   var _ref2 = React.useContext(HTableConfigContext) || {},
     configErrorRender = _ref2.errorRender,
-    configEmptyRender = _ref2.emptyRender;
+    configEmptyRender = _ref2.emptyRender,
+    configHeaderStyle = _ref2.headerStyle,
+    configTableStyle = _ref2.tableStyle,
+    configPaginationStyle = _ref2.paginationStyle;
   return {
     errorRender: errorRender || configErrorRender,
-    emptyRender: emptyRender || configEmptyRender
+    emptyRender: emptyRender || configEmptyRender,
+    headerStyle: headerStyle || configHeaderStyle,
+    tableStyle: tableStyle || configTableStyle,
+    paginationStyle: paginationStyle || configPaginationStyle
   };
 };
 var Index = function Index(_ref3) {

package/lib/index.css

@@ -1,14 +1,28 @@
+.ant-hw-table-content .ant-hw-table-body {
+  padding-top: 0px;
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+}
+.ant-hw-table-content .ant-hw-table-header {
+  border-bottom-left-radius: 0px !important;
+  border-bottom-right-radius: 0px !important;
+}
 .ant-hw-table-body {
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
   background-color: #fff;
   position: relative;
+  padding-right: 20px;
+  padding-left: 20px;
+  padding-top: 16px;
+  border-radius: 4px;
+  overflow: hidden;
 }
 .ant-hw-table-body .ant-hw-table-pagination {
   padding: 12px 24px;
   background-color: #ffffff;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
+  margin-left: -20px;
+  margin-right: -20px;
 }
 .ant-hw-table-body .ant-hw-table-pagination .ant-select {
   width: auto;
@@ -19,8 +33,11 @@
 .ant-hw-table-body .ant-pro-table-list-toolbar-container {
   padding-top: 0px;
 }
+.ant-hw-table-body .ant-pro-table > .ant-pro-card > .ant-pro-card-body {
+  padding: 0px;
+}
 .ant-hw-table-pagination {
-  padding: 24px;
+  padding: 20px;
   border-radius: 4px;
   background-color: #ffffff;
   position: relative;
@@ -37,13 +54,18 @@
   background-size: 100%;
 }
 .ant-hw-table-header {
-  border-top-left-radius: 4px !important;
-  border-top-right-radius: 4px !important;
+  border-radius: 4px !important;
   padding-bottom: 0px;
 }
 .ant-hw-table-header .ant-hw-table-header-item-hide {
   display: none;
 }
+.ant-hw-table-header .ant-card-body {
+  padding: 24px 20px;
+}
+.ant-hw-table-header .ant-form-item {
+  margin-bottom: 16px;
+}
 .ant-hw-table-body-option-icon {
   font-size: 16px;
 }

package/lib/modal.d.ts

@@ -6,7 +6,7 @@ import type React from "react";
 import type { ModalProps } from "antd";
 import type { TableProps } from "antd/lib/table";
 import type { AffixProps } from "antd/lib/affix";
-import { OptionModal } from "./HTableBody";
+import type { OptionModal } from "./HTableBody";
 export interface RowObj {
     keys?: React.Key[];
     rowData?: any[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hw-component/table",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "基于antd二次开发table组件",
   "keywords": [
     "table"
@@ -31,7 +31,7 @@
   "dependencies": {
     "@ant-design/icons": "4.6.2",
     "@ant-design/pro-table": "2.70.0",
-    "@hw-component/form": "1.4.8",
+    "@hw-component/form": "1.4.9",
     "ahooks": "2.10.9",
     "antd": "4.20.7",
     "core-js": "3",

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

@@ -79,27 +79,33 @@ export default ({
           </Tooltip>
         )}
         <Popover
-            content={
-              <ColsSettingContent
-                  columns={columns}
-                  checkKeys={checkKeys}
-                  onCheck={onChange}
-              />
-            }
-            title={
-              <Title
-                  columns={columns}
-                  reset={reset}
-                  checkKeys={checkKeys}
-                  onCheck={onChange}
-              />
-            }
-            placement="bottomRight"
-            getPopupContainer={() => ref.current || document.body}
-            arrowPointAtCenter
-            trigger="click"
+          content={
+            <ColsSettingContent
+              columns={columns}
+              checkKeys={checkKeys}
+              onCheck={onChange}
+            />
+          }
+          title={
+            <Title
+              columns={columns}
+              reset={reset}
+              checkKeys={checkKeys}
+              onCheck={onChange}
+            />
+          }
+          placement="bottomRight"
+          getPopupContainer={() => ref.current || document.body}
+          arrowPointAtCenter
+          trigger="click"
         >
-          {settingRender?settingRender():<Tooltip title="列设置"><SettingOutlined className={pointer} width={24} /></Tooltip>}
+          {settingRender ? (
+            settingRender()
+          ) : (
+            <Tooltip title="列设置">
+              <SettingOutlined className={pointer} width={24} />
+            </Tooltip>
+          )}
         </Popover>
       </Space>
     </Row>

package/src/components/HTableBody/Options/modal.d.ts

@@ -2,7 +2,7 @@ import type { OptionConfig } from "@ant-design/pro-table/lib/components/ToolBar"
 import type { SizeType } from "antd/lib/config-provider/SizeContext";
 import type { ConfigDataModal } from "../../modal";
 import type { ColumnsState } from "@ant-design/pro-table/es/container";
-import React from "react";
+import type React from "react";
 
 export interface IProps extends OptionConfig {
   size?: SizeType;
@@ -11,7 +11,7 @@ export interface IProps extends OptionConfig {
   onChange: (keys: string[], notCheck: string[]) => void;
   colStatusValue: Record<string, ColumnsState>;
   reset: VoidFunction;
-  settingRender?:()=>React.ReactNode
+  settingRender?: () => React.ReactNode;
 }
 
 export interface ItemProps {