@hw-component/table 1.6.7 → 1.6.9

package/lib/index.css

@@ -106,6 +106,9 @@
 .ant-hw-table-pointer:hover {
   color: #1890ff;
 }
+.ant-hw-table-pointer-not-hover {
+  cursor: pointer;
+}
 .ant-hw-table-header-title-box {
   -webkit-box-flex: 1;
   -webkit-flex: 1;
@@ -118,3 +121,11 @@
   position: relative;
   margin-right: 12px;
 }
+.ant-hw-table-render-copy {
+  margin-bottom: 0 !important;
+  color: #1890ff !important;
+  cursor: pointer;
+}
+.ant-hw-table-render-text-basic {
+  width: 100%;
+}

package/lib/index.d.ts

@@ -8,5 +8,6 @@ export { default as HTableBody } from "./HTableBody";
 export { default as HTableFooter } from "./HTableFooter";
 export { default as HTableHeader } from "./HTableHeader";
 export { default as HTablePagination } from "./HTablePagination";
-export { default as HModalTable } from "./ModalTable";
-export { useHDialogTable } from "./ModalTable/hooks";
+export { default as HModalTable } from "./DialogTable/ModalTable";
+export { useHDialogTable } from "./DialogTable/hooks";
+export { default as DwTable } from "./DialogTable/DwTable";

package/lib/index.js

@@ -8,8 +8,9 @@ var index = require('./HTableBody/index.js');
 var index$1 = require('./HTableFooter/index.js');
 var index$2 = require('./HTableHeader/index.js');
 var index$3 = require('./HTablePagination/index.js');
-var index$4 = require('./ModalTable/index.js');
-var hooks = require('./ModalTable/hooks.js');
+var ModalTable = require('./DialogTable/ModalTable.js');
+var hooks = require('./DialogTable/hooks.js');
+var DwTable = require('./DialogTable/DwTable.js');
 
 
 
@@ -21,6 +22,7 @@ exports.HTableBody = index.default;
 exports.HTableFooter = index$1.default;
 exports.HTableHeader = index$2.default;
 exports.HTablePagination = index$3.default;
-exports.HModalTable = index$4.default;
+exports.HModalTable = ModalTable.default;
 exports.useHDialogTable = hooks.useHDialogTable;
+exports.DwTable = DwTable.default;
 // powered by h

package/lib/modal.d.ts

@@ -7,6 +7,7 @@ import type { ModalProps } from "antd";
 import type { TableProps } from "antd/lib/table";
 import type { AffixProps } from "antd/lib/affix";
 import type { OptionModal } from "./HTableBody";
+import { DrawerProps } from "antd";
 export interface RowObj {
     keys?: React.Key[];
     rowData?: any[];
@@ -113,12 +114,21 @@ export interface HDiaLogTableInstance {
     hide: () => void;
     params: any;
 }
+export interface DwTableProps extends DrawerProps {
+    tableProps?: Omit<HTableProps, "configData" | "request">;
+    dialogTable?: HDiaLogTableInstance;
+    params?: Record<string, any>;
+    configData?: HTableProps["configData"];
+    request?: HTableProps["request"];
+    contentRender?: (node: React.ReactNode) => React.ReactNode;
+}
 export interface ModalTableProps extends ModalProps {
     tableProps?: Omit<HTableProps, "configData" | "request">;
     dialogTable?: HDiaLogTableInstance;
     params?: Record<string, any>;
     configData?: HTableProps["configData"];
     request?: HTableProps["request"];
+    contentRender?: (node: React.ReactNode) => React.ReactNode;
 }
 export type ValueTypeConfigRenderFn = (config: ConfigItemModal, itemData: any, index: number, tableInstance: HTableInstance) => React.ReactNode;
 export type ValueTypeConfigModal = Record<string, ValueTypeConfigRenderFn>;

package/lib/render/CopyComponent.d.ts

@@ -0,0 +1,9 @@
+import { EllipsisConfig } from "antd/lib/typography/Base";
+interface IProps {
+    text: string;
+    cpText?: string;
+    successMsg: string;
+    ellipsis?: boolean | EllipsisConfig;
+}
+declare const _default: ({ cpText, text, successMsg, ellipsis }: IProps) => JSX.Element;
+export default _default;

package/lib/render/CopyComponent.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var copy = require('copy-to-clipboard');
+var antd = require('antd');
+var index = require('../hooks/index.js');
+
+var Paragraph = antd.Typography.Paragraph;
+var CopyComponent = (function (_ref) {
+  var cpText = _ref.cpText,
+    text = _ref.text,
+    successMsg = _ref.successMsg,
+    ellipsis = _ref.ellipsis;
+  var className = index.useClassName("hw-table-render-copy");
+  return jsxRuntime.jsx(Paragraph, {
+    ellipsis: ellipsis,
+    className: className,
+    onClick: function onClick() {
+      copy(cpText || text);
+      antd.message.success(successMsg);
+    },
+    children: text
+  });
+});
+
+exports.default = CopyComponent;
+// powered by h

package/lib/render/Text.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element;
+export default _default;

package/lib/render/config.js

@@ -14,8 +14,8 @@ var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var jsxRuntime = require('react/jsx-runtime');
 var moment = require('moment');
 var TagsComponent = require('./TagsComponent.js');
-var copy = require('copy-to-clipboard');
 var antd = require('antd');
+var CopyComponent = require('./CopyComponent.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; }
@@ -59,7 +59,8 @@ var copyRender = function copyRender(config, itemData) {
     title = config.title,
     titleStr = config.titleStr;
   var successMsg = valueTypeProps.successMsg,
-    text = valueTypeProps.text;
+    text = valueTypeProps.text,
+    ellipsis = valueTypeProps.ellipsis;
   var msg = successMsg || "\u590D\u5236".concat(title || titleStr, "\u6210\u529F!");
   var tableVal = getTableVal(config, itemData);
   if (!tableVal) {
@@ -69,15 +70,11 @@ var copyRender = function copyRender(config, itemData) {
   if (typeof text === "function") {
     cpText = text(itemData);
   }
-  return jsxRuntime.jsx(Link, {
-    style: {
-      wordBreak: "break-all"
-    },
-    onClick: function onClick() {
-      copy(cpText || tableVal);
-      antd.message.success(msg);
-    },
-    children: tableVal
+  return jsxRuntime.jsx(CopyComponent.default, {
+    ellipsis: ellipsis,
+    successMsg: msg,
+    text: tableVal,
+    cpText: cpText
   });
 };
 var linkRender = function linkRender(config, itemData) {

package/package.json

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

package/src/components/DialogTable/Content.tsx

@@ -0,0 +1,15 @@
+import Table from "@/components/Table";
+import {ModalTableProps} from "@/components/modal";
+
+export default ({tableProps,configData,dialogTable,request,contentRender}:ModalTableProps)=>{
+    const node=<Table
+        {...tableProps}
+        configData={configData || []}
+        table={dialogTable}
+        request={request}
+        affixProps={false}
+    />
+    return  <>
+        {contentRender?contentRender(node):node}
+    </>
+}

package/src/components/DialogTable/DwTable.tsx

@@ -0,0 +1,90 @@
+import {Drawer} from 'antd';
+import type { DwTableProps } from "../modal";
+import {useCurrentTable, useTableProps, useVisible} from "./hooks";
+import Content from "./Content";
+import {CloseOutlined} from '@ant-design/icons'
+import {useClassName} from "../hooks";
+export default ({
+                    configData: configDataProps,
+                    request: requestProps,
+                    tableProps = {},
+                    dialogTable,
+                    visible = false,
+                    bodyStyle = {},
+                    onClose,
+                    afterVisibleChange,
+                    contentRender,
+                    width=666,
+                    ...props
+                }:DwTableProps)=>{
+    const { modalVisible, setModalVisible } = useVisible(visible);
+    const className=useClassName('hw-table-pointer-not-hover');
+    const { modalTableParams, setModalTableParams } = useTableProps({
+        ...props,
+        configData: configDataProps,
+        request: requestProps,
+    });
+    const currentTable = useCurrentTable({
+        show: (showParams) => {
+            if (showParams) {
+                setModalTableParams((oldParams) => {
+                    const { configData, request, title, params: oldP } = oldParams;
+                    const {
+                        title: showTitle = title,
+                        configData: showConfigData = configData,
+                        request: showReq = request,
+                        params = oldP,
+                    } = showParams;
+                    currentTable.params = params;
+                    return {
+                        title: showTitle,
+                        request: showReq,
+                        configData: showConfigData,
+                        params,
+                    };
+                });
+            }
+            setModalVisible(true);
+        },
+        hide: () => {
+            setModalVisible(false);
+        },
+        dialogTable,
+    });
+    const { configData, request, title, params } = modalTableParams;
+    const req = request
+        ? (reqParams) => {
+            return request({ ...params, ...reqParams });
+        }
+        : undefined;
+    return <Drawer
+        {...props}
+        visible={modalVisible}
+        onClose={(e) => {
+            setModalVisible(false);
+            onClose?.(e);
+        }}
+        destroyOnClose
+        title={title}
+        closable={false}
+        extra={
+            <CloseOutlined className={className}/>
+        }
+        width={width}
+        bodyStyle={{ padding: 0, paddingBottom: 12, ...bodyStyle }}
+        afterVisibleChange={(visible) => {
+           if (!visible){
+               currentTable.form.resetFields();
+           }
+           afterVisibleChange?.(visible);
+        }}
+    >
+        <Content
+            contentRender={contentRender}
+            tableProps={tableProps}
+            configData={configData||[]}
+            dialogTable={currentTable}
+            request={req}
+        />
+    </Drawer>
+}

package/src/components/{ModalTable/index.tsx → DialogTable/ModalTable.tsx}

@@ -1,7 +1,7 @@
 import { Modal } from "antd";
-import Table from "../Table";
 import type { ModalTableProps } from "../modal";
 import { useCurrentTable, useTableProps, useVisible } from "./hooks";
+import Content from './Content';
 export default ({
   configData: configDataProps,
   request: requestProps,
@@ -11,6 +11,8 @@ export default ({
   onCancel,
   bodyStyle = {},
   afterClose,
+ contentRender,
+  width=666,
   ...props
 }: ModalTableProps) => {
   const { modalVisible, setModalVisible } = useVisible(visible);
@@ -63,18 +65,19 @@ export default ({
       }}
       destroyOnClose
       title={title}
+      width={width}
       bodyStyle={{ padding: 0, paddingBottom: 12, ...bodyStyle }}
       afterClose={() => {
         currentTable.form.resetFields();
         afterClose?.();
       }}
     >
-      <Table
-        {...tableProps}
-        configData={configData || []}
-        table={currentTable}
-        request={req}
-        affixProps={false}
+      <Content
+          contentRender={contentRender}
+          tableProps={tableProps}
+          configData={configData||[]}
+          dialogTable={currentTable}
+          request={req}
       />
     </Modal>
   );

package/src/components/{ModalTable → DialogTable}/hooks.ts

@@ -6,7 +6,6 @@ import type {
   DialogParamsModal,
 } from "../modal";
 import { useEffect, useMemo, useState } from "react";
-import { HTableProps } from "../modal";
 
 export const useHDialogTable = () => {
   const tableInstance = useHTable();

package/src/components/index.less

@@ -107,6 +107,9 @@
     color:#1890ff;
   }
 }
+.@{ant-prefix}-hw-table-pointer-not-hover{
+  cursor: pointer;
+}
 .@{ant-prefix}-hw-table-header-title-box{
   flex: 1;
   display: flex;
@@ -114,3 +117,14 @@
   margin-right: 12px;
 }
 
+.@{ant-prefix}-hw-table-render-copy{
+ margin-bottom: 0 !important;
+ color:#1890ff !important;
+ cursor: pointer;
+}
+
+.@{ant-prefix}-hw-table-render-text-basic{
+  width: 100%;
+
+}
+

package/src/components/index.tsx

@@ -8,5 +8,6 @@ export { default as HTableBody } from "./HTableBody";
 export { default as HTableFooter } from "./HTableFooter";
 export { default as HTableHeader } from "./HTableHeader";
 export { default as HTablePagination } from "./HTablePagination";
-export { default as HModalTable } from "./ModalTable";
-export { useHDialogTable } from "./ModalTable/hooks";
+export { default as HModalTable } from "./DialogTable/ModalTable";
+export { useHDialogTable } from "./DialogTable/hooks";
+export { default as DwTable } from "./DialogTable/DwTable";

package/src/components/modal.ts

@@ -11,6 +11,7 @@ import type { TableProps } from "antd/lib/table";
 import type { AffixProps } from "antd/lib/affix";
 import type { OptionModal } from "./HTableBody";
 import { GetRowKey } from "rc-table/lib/interface";
+import {DrawerProps} from "antd";
 
 export interface RowObj {
   keys?: React.Key[];
@@ -146,12 +147,22 @@ export interface HDiaLogTableInstance {
   hide: () => void;
   params: any;
 }
+export interface DwTableProps  extends DrawerProps{
+  tableProps?: Omit<HTableProps, "configData" | "request">;
+  dialogTable?: HDiaLogTableInstance;
+  params?: Record<string, any>;
+  configData?: HTableProps["configData"];
+  request?: HTableProps["request"];
+  contentRender?:(node:React.ReactNode)=>React.ReactNode;
+}
+
 export interface ModalTableProps extends ModalProps {
   tableProps?: Omit<HTableProps, "configData" | "request">;
   dialogTable?: HDiaLogTableInstance;
   params?: Record<string, any>;
   configData?: HTableProps["configData"];
   request?: HTableProps["request"];
+  contentRender?:(node:React.ReactNode)=>React.ReactNode;
 }
 
 export type ValueTypeConfigRenderFn = (

package/src/components/render/CopyComponent.tsx

@@ -0,0 +1,24 @@
+import copy from "copy-to-clipboard";
+import {message,Typography} from "antd";
+import {EllipsisConfig} from "antd/lib/typography/Base";
+import {useClassName} from "../hooks";
+const {Paragraph}=Typography;
+interface IProps {
+    text:string;
+    cpText?:string;
+    successMsg:string;
+    ellipsis?:boolean | EllipsisConfig;
+}
+export default ({cpText,text,successMsg,ellipsis}:IProps)=>{
+    const className=useClassName("hw-table-render-copy");
+    return  <Paragraph
+        ellipsis={ellipsis}
+        className={className}
+        onClick={() => {
+            copy(cpText || text);
+            message.success(successMsg);
+        }}
+    >
+        {text}
+    </Paragraph>
+}

package/src/components/render/Text.tsx

@@ -0,0 +1,8 @@
+import {useClassName} from "@/components/hooks";
+
+export default ()=>{
+    const className=useClassName("hw-table-render-text-basic");
+    return <div className={className}>
+
+    </div>
+}

package/src/components/render/config.tsx

@@ -1,8 +1,8 @@
 import moment from "moment";
 import type { ConfigItemModal, HTableInstance } from "@/components/modal";
 import TagsComponent from "./TagsComponent";
-import copy from "copy-to-clipboard";
-import { Image, message, Typography, Avatar } from "antd";
+import { Image, Typography, Avatar } from "antd";
+import CopyComponent from "./CopyComponent";
 
 const { Link, Paragraph } = Typography;
 const getTableVal = (config: ConfigItemModal, itemData: any) => {
@@ -42,7 +42,7 @@ const tagsRender = (
 };
 const copyRender = (config: ConfigItemModal, itemData: any) => {
   const { valueTypeProps = {}, title, titleStr } = config;
-  const { successMsg, text } = valueTypeProps;
+  const { successMsg, text ,ellipsis} = valueTypeProps;
   const msg = successMsg || `复制${title || titleStr}成功!`;
   const tableVal = getTableVal(config, itemData);
   if (!tableVal) {
@@ -52,17 +52,12 @@ const copyRender = (config: ConfigItemModal, itemData: any) => {
   if (typeof text === "function") {
     cpText = text(itemData);
   }
-  return (
-    <Link
-      style={{ wordBreak: "break-all" }}
-      onClick={() => {
-        copy(cpText || tableVal);
-        message.success(msg);
-      }}
-    >
-      {tableVal}
-    </Link>
-  );
+  return  <CopyComponent
+       ellipsis={ellipsis}
+       successMsg={msg}
+       text={tableVal}
+       cpText={cpText}
+  />
 };
 const linkRender = (config: ConfigItemModal, itemData: any) => {
   const { valueTypeProps = {} } = config;

package/src/pages/DwTable/index.tsx

@@ -0,0 +1,152 @@
+import { Button } from "antd";
+import { DwTable, HTable, useHDialogTable } from "@/components";
+const configData = [
+    {
+        title: "座位",
+        showSearch: true,
+        searchType: "select",
+        dataIndex: "name",
+        itemProps: {
+            options: [{ label: "1", value: 1 }],
+        },
+    },
+    {
+        title: "操作",
+        name: "aaa",
+        fixed: "right",
+        width: 200,
+        showSearch: true,
+        render: () => {
+            return <div>fff</div>;
+        },
+    },
+];
+const req1 = (params) => {
+    console.log(params, "req1");
+    const { current = 1 } = params;
+    return new Promise((resolve, reject) => {
+        setTimeout(() => {
+            // reject(new Error("错误"));
+            resolve({
+                size: "10",
+                current: current.toString(10),
+                total: "100",
+                records: [
+                    {
+                        id: 1,
+                        name: "111",
+                    },
+                ],
+            });
+        }, 2000);
+    });
+};
+
+const req2 = (params) => {
+    const { current = 1 } = params;
+    console.log("请求")
+    return new Promise((resolve, reject) => {
+        setTimeout(() => {
+            // reject(new Error("错误"));
+            resolve({
+                size: "10",
+                current: current.toString(10),
+                total: "100",
+                records: [
+                    {
+                        id: 1,
+                        name: "111",
+                    },
+                    {
+                        id: 2,
+                        name: "111",
+                    },
+                    {
+                        id: 3,
+                        name: "111",
+                    },
+                    {
+                        id: 4,
+                        name: "111",
+                    },
+                    {
+                        id: 5,
+                        name: "111",
+                    },
+                    {
+                        id: 6,
+                        name: "111",
+                    },
+                    {
+                        id: 7,
+                        name: "111",
+                    },
+                    {
+                        id: 8,
+                        name: "111",
+                    },
+                ],
+            });
+        }, 2000);
+    });
+};
+const Test = () => {
+    const dialogTable1 = useHDialogTable();
+
+    return (
+        <>
+            <DwTable
+                dialogTable={dialogTable1}
+                title="111"
+                configData={configData}
+                request={req2}
+                contentRender={(node)=>{
+                    return <>
+                        <div>fsafsfsa</div>
+                        {node}
+                    </>
+                }}
+            />
+            <Button
+                onClick={() => {
+                    dialogTable1.show();
+                }}
+            >
+                点我
+            </Button>
+        </>
+    );
+};
+export default () => {
+    const dialogTable = useHDialogTable();
+    const dialogTable1 = useHDialogTable();
+    return (
+        <>
+            <Button
+                onClick={() => {
+                    dialogTable.show({ title: "3333", params: { id: 1 } });
+                }}
+            >
+                点我333
+            </Button>
+            <DwTable
+                dialogTable={dialogTable}
+                request={req2}
+                width={1200}
+                configData={configData}
+                tableProps={{
+                    headerTitle: (
+                        <div
+                            onClick={() => {
+                                console.log(dialogTable.params);
+                            }}
+                        >
+                            点我
+                        </div>
+                    ),
+                }}
+            />
+            <HTable configData={configData} headerTitle={<Test />} />
+        </>
+    );
+};

package/src/pages/ModalTable/index.tsx

@@ -44,6 +44,7 @@ const req1 = (params) => {
 
 const req2 = (params) => {
   const { current = 1 } = params;
+  console.log("请求")
   return new Promise((resolve, reject) => {
     setTimeout(() => {
       // reject(new Error("错误"));
@@ -98,6 +99,13 @@ const Test = () => {
         dialogTable={dialogTable1}
         title="111"
         configData={configData}
+        request={req2}
+        contentRender={(node)=>{
+           return <>
+             <div>fsafsfsa</div>
+             {node}
+           </>
+        }}
       />
       <Button
         onClick={() => {