@hw-component/table 0.0.5-beta-v2 → 0.0.5-beta-v3

package/es/HTableBody/index.js

@@ -32,7 +32,7 @@ var defaultRender = function defaultRender() {
 var contentStyle = {
   paddingLeft: 24,
   paddingRight: 24,
-  marginBottom: 12
+  marginBottom: 16
 };
 var Body = (function (_ref) {
   var configData = _ref.configData,

package/es/HTablePagination/index.d.ts

@@ -1,9 +1,11 @@
 import type { PaginationProps } from "antd";
 import type { ParamsModal } from "@/components/modal";
 import React from "react";
+import type { AffixProps } from "antd/lib/affix";
 interface IPaginationProps extends PaginationProps {
     onPageChange?: (params: ParamsModal) => void;
     paginationStyle?: React.CSSProperties;
+    affixProps?: AffixProps | false;
 }
-declare const _default: ({ onPageChange, paginationStyle, ...props }: IPaginationProps) => JSX.Element;
+declare const _default: ({ onPageChange, paginationStyle, affixProps, ...props }: IPaginationProps) => JSX.Element;
 export default _default;

package/es/HTablePagination/index.js

@@ -7,22 +7,25 @@ import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js/instance/fo
 import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js/object/get-own-property-descriptors';
 import _Object$defineProperties from '@babel/runtime-corejs3/core-js/object/define-properties';
 import _Object$defineProperty from '@babel/runtime-corejs3/core-js/object/define-property';
-import _slicedToArray from '@babel/runtime-corejs3/helpers/slicedToArray';
 import _defineProperty from '@babel/runtime-corejs3/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime-corejs3/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/objectWithoutProperties';
 import _Number$parseInt from '@babel/runtime-corejs3/core-js/number/parse-int';
 import _concatInstanceProperty from '@babel/runtime-corejs3/core-js/instance/concat';
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { Row, Pagination } from 'antd';
+import { Row, Pagination, Affix } from 'antd';
 import { useHTableContext } from '../context.js';
 import { useClassName } from '../hooks/index.js';
+import { useState } from 'react';
 
-var _excluded = ["onPageChange", "paginationStyle"];
+var _excluded = ["onPageChange", "paginationStyle", "affixProps"],
+  _excluded2 = ["offsetBottom"];
 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 _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context4 = ownKeys(Object(t))).call(_context4, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context5, _context6; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context5 = ownKeys(Object(t), !0)).call(_context5, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context6 = ownKeys(Object(t))).call(_context6, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var HTablePagination = (function (_ref) {
   var onPageChange = _ref.onPageChange,
     paginationStyle = _ref.paginationStyle,
+    affixProps = _ref.affixProps,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useHTableContext = useHTableContext(),
     contextOnPageChange = _useHTableContext.onPageChange,
@@ -36,7 +39,14 @@ var HTablePagination = (function (_ref) {
   var pageSize = _Number$parseInt(size || "10", 10);
   var pageTotal = _Number$parseInt(total || "0", 10);
   var className = useClassName("hw-table-pagination");
-  if (data) {
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    style = _useState2[0],
+    setStyle = _useState2[1];
+  if (!data) {
+    return jsx(Fragment, {});
+  }
+  if (affixProps === false) {
     return jsx(Row, {
       justify: "end",
       className: className,
@@ -63,7 +73,48 @@ var HTablePagination = (function (_ref) {
       }, props))
     });
   }
-  return jsx(Fragment, {});
+  var _ref5 = affixProps || {},
+    _ref5$offsetBottom = _ref5.offsetBottom,
+    offsetBottom = _ref5$offsetBottom === void 0 ? 0 : _ref5$offsetBottom,
+    afProps = _objectWithoutProperties(_ref5, _excluded2);
+  return jsx(Affix, _objectSpread(_objectSpread({
+    offsetBottom: offsetBottom,
+    onChange: function onChange(affixed) {
+      if (!affixed) {
+        setStyle({});
+        return;
+      }
+      setStyle({
+        boxShadow: "0px -3px 10px 1px rgba(165,165,165,0.16)"
+      });
+    }
+  }, afProps), {}, {
+    children: jsx(Row, {
+      justify: "end",
+      className: className,
+      style: _objectSpread(_objectSpread({}, paginationStyle), style),
+      children: jsx(Pagination, _objectSpread({
+        size: "small",
+        showQuickJumper: true,
+        pageSize: pageSize,
+        current: pageCurrent,
+        showTotal: function showTotal(totalNum, _ref6) {
+          var _context3, _context4;
+          var _ref7 = _slicedToArray(_ref6, 2),
+            showCurrent = _ref7[0],
+            showCurrentEnd = _ref7[1];
+          return _concatInstanceProperty(_context3 = _concatInstanceProperty(_context4 = "\u7B2C".concat(showCurrent, "-")).call(_context4, showCurrentEnd, "/\u603B\u5171")).call(_context3, totalNum, "\u6761");
+        },
+        total: pageTotal,
+        onChange: function onChange(pn, ps) {
+          tableOnPageChange({
+            size: ps,
+            current: pn
+          });
+        }
+      }, props))
+    })
+  }));
 });
 
 export { HTablePagination as default };

package/es/index.css

@@ -5,7 +5,15 @@
   overflow: hidden;
 }
 .ant-hw-table-body .ant-hw-table-pagination {
-  padding: 0 24px 24px;
+  padding: 12px 24px;
+  background-color: #ffffff;
+  border-radius: 0px;
+}
+.ant-hw-table-body .ant-pro-card-body {
+  padding-bottom: 0px;
+}
+.ant-hw-table-body .ant-pro-table-list-toolbar-container {
+  padding-top: 0px;
 }
 .ant-hw-table-pagination {
   padding: 24px;

package/lib/HTableBody/index.js

@@ -35,7 +35,7 @@ var defaultRender = function defaultRender() {
 var contentStyle = {
   paddingLeft: 24,
   paddingRight: 24,
-  marginBottom: 12
+  marginBottom: 16
 };
 var Body = (function (_ref) {
   var configData = _ref.configData,

package/lib/HTablePagination/index.d.ts

@@ -1,9 +1,11 @@
 import type { PaginationProps } from "antd";
 import type { ParamsModal } from "@/components/modal";
 import React from "react";
+import type { AffixProps } from "antd/lib/affix";
 interface IPaginationProps extends PaginationProps {
     onPageChange?: (params: ParamsModal) => void;
     paginationStyle?: React.CSSProperties;
+    affixProps?: AffixProps | false;
 }
-declare const _default: ({ onPageChange, paginationStyle, ...props }: IPaginationProps) => JSX.Element;
+declare const _default: ({ onPageChange, paginationStyle, affixProps, ...props }: IPaginationProps) => JSX.Element;
 export default _default;

package/lib/HTablePagination/index.js

@@ -10,8 +10,8 @@ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/
 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 _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 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 _Number$parseInt = require('@babel/runtime-corejs3/core-js/number/parse-int');
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/concat');
@@ -19,13 +19,16 @@ var jsxRuntime = require('react/jsx-runtime');
 var antd = require('antd');
 var context = require('../context.js');
 var index = require('../hooks/index.js');
+var React = require('react');
 
-var _excluded = ["onPageChange", "paginationStyle"];
+var _excluded = ["onPageChange", "paginationStyle", "affixProps"],
+  _excluded2 = ["offsetBottom"];
 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 _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context4 = ownKeys(Object(t))).call(_context4, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context5, _context6; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context5 = ownKeys(Object(t), !0)).call(_context5, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context6 = ownKeys(Object(t))).call(_context6, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var HTablePagination = (function (_ref) {
   var onPageChange = _ref.onPageChange,
     paginationStyle = _ref.paginationStyle,
+    affixProps = _ref.affixProps,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useHTableContext = context.useHTableContext(),
     contextOnPageChange = _useHTableContext.onPageChange,
@@ -39,7 +42,14 @@ var HTablePagination = (function (_ref) {
   var pageSize = _Number$parseInt(size || "10", 10);
   var pageTotal = _Number$parseInt(total || "0", 10);
   var className = index.useClassName("hw-table-pagination");
-  if (data) {
+  var _useState = React.useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    style = _useState2[0],
+    setStyle = _useState2[1];
+  if (!data) {
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+  }
+  if (affixProps === false) {
     return jsxRuntime.jsx(antd.Row, {
       justify: "end",
       className: className,
@@ -66,7 +76,48 @@ var HTablePagination = (function (_ref) {
       }, props))
     });
   }
-  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+  var _ref5 = affixProps || {},
+    _ref5$offsetBottom = _ref5.offsetBottom,
+    offsetBottom = _ref5$offsetBottom === void 0 ? 0 : _ref5$offsetBottom,
+    afProps = _objectWithoutProperties(_ref5, _excluded2);
+  return jsxRuntime.jsx(antd.Affix, _objectSpread(_objectSpread({
+    offsetBottom: offsetBottom,
+    onChange: function onChange(affixed) {
+      if (!affixed) {
+        setStyle({});
+        return;
+      }
+      setStyle({
+        boxShadow: "0px -3px 10px 1px rgba(165,165,165,0.16)"
+      });
+    }
+  }, afProps), {}, {
+    children: jsxRuntime.jsx(antd.Row, {
+      justify: "end",
+      className: className,
+      style: _objectSpread(_objectSpread({}, paginationStyle), style),
+      children: jsxRuntime.jsx(antd.Pagination, _objectSpread({
+        size: "small",
+        showQuickJumper: true,
+        pageSize: pageSize,
+        current: pageCurrent,
+        showTotal: function showTotal(totalNum, _ref6) {
+          var _context3, _context4;
+          var _ref7 = _slicedToArray(_ref6, 2),
+            showCurrent = _ref7[0],
+            showCurrentEnd = _ref7[1];
+          return _concatInstanceProperty(_context3 = _concatInstanceProperty(_context4 = "\u7B2C".concat(showCurrent, "-")).call(_context4, showCurrentEnd, "/\u603B\u5171")).call(_context3, totalNum, "\u6761");
+        },
+        total: pageTotal,
+        onChange: function onChange(pn, ps) {
+          tableOnPageChange({
+            size: ps,
+            current: pn
+          });
+        }
+      }, props))
+    })
+  }));
 });
 
 exports.default = HTablePagination;

package/lib/index.css

@@ -5,7 +5,15 @@
   overflow: hidden;
 }
 .ant-hw-table-body .ant-hw-table-pagination {
-  padding: 0 24px 24px;
+  padding: 12px 24px;
+  background-color: #ffffff;
+  border-radius: 0px;
+}
+.ant-hw-table-body .ant-pro-card-body {
+  padding-bottom: 0px;
+}
+.ant-hw-table-body .ant-pro-table-list-toolbar-container {
+  padding-top: 0px;
 }
 .ant-hw-table-pagination {
   padding: 24px;

package/package.json

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

package/src/components/HTableBody/index.tsx

@@ -4,7 +4,7 @@ import type { ActionRenderFn, ConfigDataModal, ParamsModal } from "../modal";
 import { useCols, useSynchronousKeys } from "./hooks";
 import { useHTableContext } from "../context";
 import type { DetailedReactHTMLElement } from "react";
-import React from "react";
+import React, { useRef } from "react";
 import { ConfigProvider, Empty, Row, Alert } from "antd";
 import type { HTableInstance } from "../modal";
 import { useHTableConfigContext } from "../TableConfig";
@@ -32,7 +32,7 @@ const defaultRender = () => {
 const contentStyle = {
   paddingLeft: 24,
   paddingRight: 24,
-  marginBottom: 12,
+  marginBottom: 16,
 };
 export default ({
   configData,
@@ -79,7 +79,6 @@ export default ({
 
   const alwaysShowAlert = keys.length > 0 || selectAll;
   const className = useClassName("hw-table-body");
-
   return (
     <div style={tableStyle} className={`hw_table_body  ${className}`}>
       <ConfigProvider

package/src/components/HTablePagination/index.tsx

@@ -1,16 +1,19 @@
 import type { PaginationProps } from "antd";
-import { Button, Pagination, Row, Space, Typography } from "antd";
+import { Affix, Button, Pagination, Row, Space, Typography } from "antd";
 import { useHTableContext } from "../context";
 import type { ParamsModal } from "@/components/modal";
 import { useClassName } from "../hooks";
-import React from "react";
+import React, { useState } from "react";
+import type { AffixProps } from "antd/lib/affix";
 interface IPaginationProps extends PaginationProps {
   onPageChange?: (params: ParamsModal) => void;
   paginationStyle?: React.CSSProperties;
+  affixProps?: AffixProps | false;
 }
 export default ({
   onPageChange,
   paginationStyle,
+  affixProps,
   ...props
 }: IPaginationProps) => {
   const { onPageChange: contextOnPageChange, data } = useHTableContext();
@@ -20,7 +23,11 @@ export default ({
   const pageSize = Number.parseInt(size || "10", 10);
   const pageTotal = Number.parseInt(total || "0", 10);
   const className = useClassName("hw-table-pagination");
-  if (data) {
+  const [style, setStyle] = useState({});
+  if (!data) {
+    return <></>;
+  }
+  if (affixProps === false) {
     return (
       <Row justify={"end"} className={className} style={paginationStyle}>
         <Pagination
@@ -40,5 +47,41 @@ export default ({
       </Row>
     );
   }
-  return <></>;
+  const { offsetBottom = 0, ...afProps } = affixProps || {};
+  return (
+    <Affix
+      offsetBottom={offsetBottom}
+      onChange={(affixed) => {
+        if (!affixed) {
+          setStyle({});
+          return;
+        }
+        setStyle({
+          boxShadow: "0px -3px 10px 1px rgba(165,165,165,0.16)",
+        });
+      }}
+      {...afProps}
+    >
+      <Row
+        justify={"end"}
+        className={className}
+        style={{ ...paginationStyle, ...style }}
+      >
+        <Pagination
+          size={"small"}
+          showQuickJumper={true}
+          pageSize={pageSize}
+          current={pageCurrent}
+          showTotal={(totalNum, [showCurrent, showCurrentEnd]) => {
+            return `第${showCurrent}-${showCurrentEnd}/总共${totalNum}条`;
+          }}
+          total={pageTotal}
+          onChange={(pn, ps) => {
+            tableOnPageChange({ size: ps, current: pn });
+          }}
+          {...props}
+        />
+      </Row>
+    </Affix>
+  );
 };

package/src/components/index.less

@@ -5,7 +5,15 @@
   background-color: #fff;
   overflow: hidden;
   .@{ant-prefix}-hw-table-pagination{
-    padding: 0 24px 24px;
+    padding: 12px 24px;
+    background-color:#ffffff;
+    border-radius: 0px;
+  }
+  .@{ant-prefix}-pro-card-body{
+   padding-bottom: 0px;
+  }
+  .@{ant-prefix}-pro-table-list-toolbar-container{
+        padding-top: 0px;
   }
 }
 .@{ant-prefix}-hw-table-pagination{

package/src/pages/Table/index.tsx

@@ -49,7 +49,7 @@ export default () => {
           request={(params) => {
             const { current = 1 } = params;
             const arrayData = [];
-            for (let i = 0; i < 10; i = i + 1) {
+            for (let i = 0; i < 100; i = i + 1) {
               arrayData.push({
                 id: i,
                 name: "11",