@hw-component/table 1.9.13 → 1.9.15

package/lib/hooks/useReq.d.ts

@@ -4,7 +4,7 @@ export interface IParamsModal {
     loading?: boolean;
     error?: Error;
     reload?: (params: any) => Promise<any>;
-    dataSource?: any;
+    dataSource?: ResultModal | any[];
     manual?: boolean;
     formInitValues?: Record<string, any>;
 }
@@ -28,8 +28,8 @@ declare const _default: ({ request, loading, error, reload, dataSource, manual,
 } | {
     loading: boolean | undefined;
     error: Error | undefined;
-    data: any;
-    run: (params?: Record<string, any>) => Promise<any>;
+    data: ResultModal;
+    run: (params?: Record<string, any>) => Promise<void>;
     saveParams: {
         old: {};
     };

package/lib/hooks/useReq.js

@@ -10,10 +10,16 @@ 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 _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
 var _asyncToGenerator = require('@babel/runtime-corejs3/helpers/asyncToGenerator');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 var _regeneratorRuntime = require('@babel/runtime-corejs3/regenerator');
+require('core-js/modules/es.object.to-string.js');
+require('core-js/modules/es.regexp.to-string.js');
+var _Number$parseInt = require('@babel/runtime-corejs3/core-js/number/parse-int');
+var _sliceInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/slice');
+var _Array$isArray = require('@babel/runtime-corejs3/core-js/array/is-array');
 var React = require('react');
 var ahooks = require('ahooks');
 
@@ -21,42 +27,99 @@ var _excluded = ["size", "current"],
   _excluded2 = ["size", "current"];
 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 _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
-var useReq = (function (_ref) {
-  var request = _ref.request,
-    loading = _ref.loading,
-    error = _ref.error,
-    reload = _ref.reload,
-    dataSource = _ref.dataSource,
-    _ref$manual = _ref.manual,
-    manual = _ref$manual === void 0 ? false : _ref$manual,
-    _ref$formInitValues = _ref.formInitValues,
-    formInitValues = _ref$formInitValues === void 0 ? {} : _ref$formInitValues;
+var defaultDataSource = {
+  records: [],
+  total: "0",
+  size: "0",
+  current: "1"
+};
+var useDataSource = function useDataSource(_ref) {
+  var reload = _ref.reload,
+    dataSource = _ref.dataSource;
+  var _useState = React.useState(_objectSpread({}, defaultDataSource)),
+    _useState2 = _slicedToArray(_useState, 2),
+    cpDataSource = _useState2[0],
+    setCpDataSource = _useState2[1];
+  var localMaker = function localMaker(params) {
+    var size = params.size,
+      current = params.current;
+    var ps = _Number$parseInt(size);
+    var pn = _Number$parseInt(current);
+    var prvPn = pn - 1;
+    var arrDataSource = dataSource;
+    var records = _sliceInstanceProperty(arrDataSource).call(arrDataSource, prvPn * ps, pn * ps);
+    var total = arrDataSource.length;
+    return {
+      records: records,
+      size: size,
+      current: current,
+      total: total.toString()
+    };
+  };
+  var defaultReload = function defaultReload(params) {
+    if (_Array$isArray(dataSource)) {
+      console.warn("@hw-component/table:非受控模式reload将不起作用");
+      setCpDataSource(localMaker(params));
+      return;
+    }
+    reload === null || reload === void 0 || reload(params);
+  };
+  React.useEffect(function () {
+    if (_Array$isArray(dataSource)) {
+      setCpDataSource(function (old) {
+        return localMaker(old);
+      });
+      return;
+    }
+    setCpDataSource(dataSource || _objectSpread({}, defaultDataSource));
+  }, [dataSource]);
+  return {
+    reload: defaultReload,
+    dataSource: cpDataSource
+  };
+};
+var useReq = (function (_ref2) {
+  var request = _ref2.request,
+    loading = _ref2.loading,
+    error = _ref2.error,
+    reload = _ref2.reload,
+    dataSource = _ref2.dataSource,
+    _ref2$manual = _ref2.manual,
+    manual = _ref2$manual === void 0 ? false : _ref2$manual,
+    _ref2$formInitValues = _ref2.formInitValues,
+    formInitValues = _ref2$formInitValues === void 0 ? {} : _ref2$formInitValues;
   var saveParams = React.useMemo(function () {
     return {
       old: {}
     };
   }, []);
+  var _useDataSource = useDataSource({
+      reload: reload,
+      dataSource: dataSource
+    }),
+    localReload = _useDataSource.reload,
+    localDataSource = _useDataSource.dataSource;
   var reloadFn = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
       var params,
         _params$size,
         size,
         _params$current,
         current,
         oParams,
-        reqParams,
+        requestParams,
         _args = arguments;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             params = _args.length > 0 && _args[0] !== undefined ? _args[0] : {};
             _params$size = params.size, size = _params$size === void 0 ? "10" : _params$size, _params$current = params.current, current = _params$current === void 0 ? "1" : _params$current, oParams = _objectWithoutProperties(params, _excluded);
-            reqParams = _objectSpread({
+            requestParams = _objectSpread({
               size: size,
               current: current
             }, oParams);
-            saveParams.old = reqParams;
-            return _context.abrupt("return", reload === null || reload === void 0 ? void 0 : reload(reqParams));
+            saveParams.old = requestParams;
+            return _context.abrupt("return", localReload(requestParams));
           case 5:
           case "end":
             return _context.stop();
@@ -64,7 +127,7 @@ var useReq = (function (_ref) {
       }, _callee);
     }));
     return function reloadFn() {
-      return _ref2.apply(this, arguments);
+      return _ref3.apply(this, arguments);
     };
   }();
   var resultAction = ahooks.useRequest(function () {
@@ -101,7 +164,7 @@ var useReq = (function (_ref) {
   return {
     loading: loading,
     error: error,
-    data: dataSource,
+    data: localDataSource,
     run: reloadFn,
     saveParams: saveParams
   };

package/lib/modal.d.ts

@@ -65,7 +65,7 @@ export interface HTableProps extends Omit<ProTableProps<any, any>, "request" | "
     error?: Error;
     reload?: (params: any) => Promise<any>;
     manual?: boolean;
-    dataSource?: ResultModal;
+    dataSource?: ResultModal | any[];
     paginationStyle?: React.CSSProperties;
     allPageCheck?: boolean;
     rowSelection?: HRowSelection | false;
@@ -103,6 +103,7 @@ export interface DialogParamsModal {
     request?: HTableProps["request"];
     params?: Record<string, any>;
     title?: string | React.ReactNode;
+    dataSource?: any[];
 }
 export interface HOnDiaLogTableInstance {
     show: (params?: DialogParamsModal) => void;
@@ -130,6 +131,7 @@ export interface ModalTableProps extends ModalProps {
     configData?: HTableProps["configData"];
     request?: HTableProps["request"];
     contentRender?: (node: React.ReactNode) => React.ReactNode;
+    dataSource?: any[];
 }
 export type ValueTypeConfigRenderFn = (config: ConfigItemModal, itemData: any, index: number, tableInstance: HTableInstance) => React.ReactNode;
 export type ValueTypeConfigModal = Record<string, ValueTypeConfigRenderFn>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hw-component/table",
-  "version": "1.9.13",
+  "version": "1.9.15",
   "description": "基于antd二次开发table组件",
   "keywords": [
     "table"
@@ -29,25 +29,29 @@
     ]
   },
   "dependencies": {
+    "copy-to-clipboard": "3.3.1",
     "core-js": "3",
-    "copy-to-clipboard": "3.3.1"
+    "react-color": "^2.19.3"
   },
   "peerDependencies": {
     "@ant-design/icons": "4.6.2",
     "@ant-design/pro-table": "2.70.0",
+    "@hw-component/form": "^1.9.4",
     "ahooks": "2.10.9",
     "antd": "4.20.7",
     "react": "17.0.0",
-    "react-dom": "17.0.2",
-    "@hw-component/form": "^1.8.8"
+    "react-dom": "17.0.2"
   },
   "devDependencies": {
+    "@ant-design/icons": "4.6.2",
+    "@ant-design/pro-table": "2.70.0",
     "@babel/core": "^7.21.8",
     "@babel/plugin-transform-runtime": "^7.23.2",
     "@babel/preset-env": "^7.23.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.5",
     "@babel/runtime-corejs3": "^7.21.5",
+    "@hw-component/form": "^1.8.3",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-image": "^3.0.3",
@@ -58,8 +62,11 @@
     "@types/react-dom": "17.0.9",
     "@typescript-eslint/eslint-plugin": "^5.59.7",
     "@umijs/fabric": "^2.14.1",
+    "ahooks": "2.10.9",
+    "antd": "4.20.7",
     "autoprefixer": "^10.4.14",
     "babel-loader": "^9.1.2",
+    "copy-to-clipboard": "3.3.1",
     "css-loader": "^6.7.4",
     "eslint": "^8.41.0",
     "eslint-plugin-jest": "^27.2.1",
@@ -73,6 +80,9 @@
     "lint-staged": "10.5.4",
     "postcss": "^8.4.23",
     "postcss-less": "^6.0.0",
+    "react": "17.0.0",
+    "react-dom": "17.0.2",
+    "react-router-dom": "^6.11.2",
     "rollup": "^3.23.0",
     "rollup-plugin-clear": "^2.0.7",
     "rollup-plugin-postcss": "4.0.0",
@@ -83,16 +93,7 @@
     "webpack": "^5.83.1",
     "webpack-cli": "^5.1.1",
     "webpack-dev-server": "^4.15.0",
-    "webpackbar": "^5.0.2",
-    "@ant-design/icons": "4.6.2",
-    "@ant-design/pro-table": "2.70.0",
-    "@hw-component/form": "^1.8.3",
-    "ahooks": "2.10.9",
-    "antd": "4.20.7",
-    "copy-to-clipboard": "3.3.1",
-    "react": "17.0.0",
-    "react-dom": "17.0.2",
-    "react-router-dom": "^6.11.2"
+    "webpackbar": "^5.0.2"
   },
   "publishConfig": {
     "access": "public",

package/src/components/DialogTable/Content.tsx

@@ -7,6 +7,7 @@ export default ({
   dialogTable,
   request,
   contentRender,
+  dataSource,
 }: ModalTableProps) => {
   const node = (
     <Table
@@ -15,6 +16,7 @@ export default ({
       table={dialogTable}
       request={request}
       affixProps={false}
+      dataSource={dataSource}
     />
   );
   return <>{contentRender ? contentRender(node) : node}</>;

package/src/components/DialogTable/DwTable.tsx

@@ -29,12 +29,18 @@ export default ({
     show: (showParams) => {
       if (showParams) {
         setModalTableParams((oldParams) => {
-          const { configData, request, title, params: oldP } = oldParams;
+          const { configData,
+            request,
+            title,
+            params: oldP ,
+              dataSource:oldDataSource
+          } = oldParams;
           const {
             title: showTitle = title,
             configData: showConfigData = configData,
             request: showReq = request,
             params = oldP,
+            dataSource=oldDataSource
           } = showParams;
           currentTable.params = params;
           return {
@@ -42,6 +48,7 @@ export default ({
             request: showReq,
             configData: showConfigData,
             params,
+            dataSource
           };
         });
       }
@@ -52,7 +59,7 @@ export default ({
     },
     dialogTable,
   });
-  const { configData, request, title, params } = modalTableParams;
+  const { configData, request,dataSource, title, params } = modalTableParams;
   const req = request
     ? (reqParams) => {
         return request({ ...params, ...reqParams });
@@ -94,6 +101,7 @@ export default ({
         configData={configData || []}
         dialogTable={currentTable}
         request={req}
+        dataSource={dataSource}
       />
     </Drawer>
   );

package/src/components/DialogTable/ModalTable.tsx

@@ -26,11 +26,18 @@ export default ({
     show: (showParams) => {
       if (showParams) {
         setModalTableParams((oldParams) => {
-          const { configData, request, title, params: oldP } = oldParams;
+          const {
+            configData,
+            request,
+            title,
+            params: oldP,
+              dataSource:oldDataSource,
+          } = oldParams;
           const {
             title: showTitle = title,
             configData: showConfigData = configData,
             request: showReq = request,
+            dataSource=oldDataSource,
             params = oldP,
           } = showParams;
           currentTable.params = params;
@@ -39,6 +46,7 @@ export default ({
             request: showReq,
             configData: showConfigData,
             params,
+            dataSource
           };
         });
       }
@@ -50,7 +58,7 @@ export default ({
     dialogTable,
   });
 
-  const { configData, request, title, params } = modalTableParams;
+  const { configData,dataSource, request, title, params } = modalTableParams;
   const req = request
     ? (reqParams) => {
         return request({ ...params, ...reqParams });
@@ -80,6 +88,7 @@ export default ({
         configData={configData || []}
         dialogTable={currentTable}
         request={req}
+        dataSource={dataSource}
       />
     </Modal>
   );

package/src/components/DialogTable/hooks.ts

@@ -26,12 +26,14 @@ export const useTableProps = ({
   params,
   title,
   request,
+  dataSource,
 }: Omit<ModalTableProps, "tableProps">) => {
   const [modalTableParams, setModalTableParams] = useState({
     params,
     title,
     configData,
     request,
+    dataSource,
   });
   return {
     modalTableParams,

package/src/components/Table.tsx

@@ -29,12 +29,16 @@ export default ({
   labelWidth,
   onReset,
   style,
+  dataSource,
+  reload,
   ...props
 }: HTableProps) => {
   const { run, loading, data, error, saveParams } = useReq({
     request,
     manual,
     formInitValues,
+    dataSource,
+    reload
   });
   const dispatch = useDispatch(action);
   const { selectedRowData, rowOnChange, allSelectChange, setSelectedRowData } =
@@ -84,10 +88,8 @@ export default ({
         labelWidth,
       }}
     >
-      <Space
-        direction={"vertical"}
-        size={0}
-        style={{ width: "100%" ,...style}}
+      <div
+        style={{ ...style}}
         className={`${contentClassName} ${className}`}
       >
         {!hideHeader && (
@@ -107,7 +109,7 @@ export default ({
           rowKey={rowKey}
           {...props}
         />
-      </Space>
+      </div>
     </HTableContext.Provider>
   );
 };

package/src/components/hooks/useReq.ts

@@ -1,15 +1,63 @@
-import { useEffect, useMemo } from "react";
-import { useRequest } from "ahooks";
-import type { ParamsModal, ResultModal } from "../modal";
+import {useEffect, useMemo, useState} from "react";
+import {useRequest} from "ahooks";
+import type {ParamsModal, ResultModal} from "../modal";
+
 export interface IParamsModal {
   request?: (params: ParamsModal) => Promise<ResultModal>;
   loading?: boolean;
   error?: Error;
   reload?: (params: any) => Promise<any>;
-  dataSource?: any;
+  dataSource?: ResultModal|any[];
   manual?: boolean;
   formInitValues?: Record<string, any>;
 }
+const defaultDataSource={
+  records:[],
+  total:"0",
+  size:"0",
+  current:"1"
+}
+const useDataSource=({reload,dataSource}:IParamsModal)=>{
+  const [cpDataSource,setCpDataSource]=useState<ResultModal>({
+   ...defaultDataSource
+  });
+  const localMaker=(params)=>{
+    const {size,current}=params;
+    const ps=Number.parseInt(size);
+    const pn=Number.parseInt(current);
+    const prvPn=pn-1;
+    const arrDataSource=(dataSource as any[]);
+    const records=arrDataSource.slice(prvPn*ps,pn*ps);
+    const total=arrDataSource.length;
+    return {
+      records,
+      size,
+      current,
+      total:total.toString()
+    }
+  }
+  const defaultReload=(params)=>{
+    if (Array.isArray(dataSource)){
+       console.warn("@hw-component/table:非受控模式reload将不起作用");
+       setCpDataSource(localMaker(params));
+       return;
+    }
+    reload?.(params);
+  }
+  useEffect(() => {
+     if (Array.isArray(dataSource)){
+       setCpDataSource((old)=>{
+         return localMaker(old);
+       })
+        return;
+     }
+    setCpDataSource(dataSource||{...defaultDataSource});
+  }, [dataSource]);
+  return {
+    reload:defaultReload,
+    dataSource:cpDataSource
+  }
+}
 export default ({
   request,
   loading,
@@ -24,11 +72,12 @@ export default ({
       old: {},
     };
   }, []);
+  const {reload:localReload,dataSource:localDataSource}=useDataSource({reload,dataSource})
   const reloadFn = async (params: Record<string, any> = {}) => {
     const { size = "10", current = "1", ...oParams } = params;
-    const reqParams = { size, current, ...oParams };
-    saveParams.old = reqParams;
-    return reload?.(reqParams);
+    const requestParams={size, current, ...oParams};
+    saveParams.old = requestParams
+    return localReload(requestParams);
   };
   const resultAction = useRequest(
     (params = {}) => {
@@ -60,7 +109,7 @@ export default ({
   return {
     loading,
     error,
-    data: dataSource,
+    data: localDataSource,
     run: reloadFn,
     saveParams,
   };

package/src/components/modal.ts

@@ -98,7 +98,7 @@ export interface HTableProps
   error?: Error;
   reload?: (params: any) => Promise<any>;
   manual?: boolean;
-  dataSource?: ResultModal;
+  dataSource?: ResultModal|any[];
   paginationStyle?: React.CSSProperties;
   allPageCheck?: boolean;
   rowSelection?: HRowSelection | false;
@@ -136,6 +136,7 @@ export interface DialogParamsModal {
   request?: HTableProps["request"];
   params?: Record<string, any>;
   title?: string | React.ReactNode;
+  dataSource?:any[];
 }
 export interface HOnDiaLogTableInstance {
   show: (params?: DialogParamsModal) => void;
@@ -164,6 +165,7 @@ export interface ModalTableProps extends ModalProps {
   configData?: HTableProps["configData"];
   request?: HTableProps["request"];
   contentRender?: (node: React.ReactNode) => React.ReactNode;
+  dataSource?:any[];
 }
 
 export type ValueTypeConfigRenderFn = (

package/src/pages/DwTable/index.tsx

@@ -119,6 +119,17 @@ const Test = () => {
     </>
   );
 };
+const maker=(name)=>{
+  const data=[];
+  for (let i=0;i<10;i+=1){
+    data.push({
+      name,
+      id:i
+    })
+  };
+  return data;
+}
+let num=0;
 export default () => {
   const dialogTable = useHDialogTable();
   const dialogTable1 = useHDialogTable();
@@ -126,14 +137,17 @@ export default () => {
     <>
       <Button
         onClick={() => {
-          dialogTable.show({ title: "3333", params: { id: 1 } });
+          num++
+          dialogTable.show({
+            title: "3333",
+            dataSource:[...maker(`第${num}一页`),...maker("第二页"),...maker("第三页")]
+          });
         }}
       >
         点我333
       </Button>
       <HDwTable
         dialogTable={dialogTable}
-        request={req2}
         width={1200}
         configData={configData}
         tableProps={{

package/src/pages/ModalTable/index.tsx

@@ -119,6 +119,16 @@ const Test = () => {
     </>
   );
 };
+const maker=(name)=>{
+  const data=[];
+  for (let i=0;i<10;i+=1){
+    data.push({
+      name,
+      id:i
+    })
+  };
+  return data;
+}
 export default () => {
   const dialogTable = useHDialogTable();
   const dialogTable1 = useHDialogTable();
@@ -126,14 +136,16 @@ export default () => {
     <>
       <Button
         onClick={() => {
-          dialogTable.show({ title: "3333", params: { id: 1 } });
+          dialogTable.show({
+            title: "3333",
+            dataSource:[...maker("第一页"),...maker("第二页"),...maker("第三页")]
+          });
         }}
       >
         点我333
       </Button>
       <HModalTable
         dialogTable={dialogTable}
-        request={req2}
         width={1200}
         configData={configData}
         tableProps={{