@ecoding/components.antd 0.3.34 → 0.3.36

package/lib/core/table-pro/index.d.ts

@@ -5,6 +5,7 @@ interface IProps {
     header?: React.ReactNode;
     buttonArea?: React.ReactNode;
     filterArea?: React.ReactElement;
+    horizontalArea?: React.ReactElement;
     searchInputArea?: React.ReactElement;
     loading?: boolean;
     rowKey: string;
@@ -15,6 +16,7 @@ interface IProps {
     pagination?: any;
     offsetY?: number;
     onChange?: (pagination: TablePaginationConfig, filters: Record<string, FilterValue | null>, sorter: SorterResult<any> | SorterResult<any>[], extra: TableCurrentDataSource<any>) => void;
+    expandable?: any;
     filterTitle?: string;
     columnsTitle?: string;
     selectType?: "checkbox" | "radio";

package/lib/core/table-pro/index.js

@@ -2,7 +2,8 @@ import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { Popover, Button, Typography, Table } from 'antd';
 import { FilterOutlined, MenuOutlined } from '@ant-design/icons';
 import TableProColumns from "./columns";
-const TablePro = memo(({ className, header, buttonArea, filterArea, searchInputArea, loading, rowKey, dataSource, pagination, offsetY, columns, operationColumn, bordered, selectChangeHandler, selectType, onChange, columnsTitle, filterTitle }) => {
+import { getDelateTargetByClassName } from "../../helpers/dom";
+const TablePro = memo(({ className, header, buttonArea, filterArea, horizontalArea, searchInputArea, loading, rowKey, dataSource, pagination, offsetY, columns, operationColumn, bordered, selectChangeHandler, selectType, onChange, expandable, columnsTitle, filterTitle }) => {
     const ref = useRef(null);
     const disColumnRef = useRef([]);
     const [y, setY] = useState('100%');
@@ -72,7 +73,7 @@ const TablePro = memo(({ className, header, buttonArea, filterArea, searchInputA
     }, [header, loading, innerColumns]);
     return (React.createElement("div", { style: flexColumnStyle, className: className || '' },
         header ? header : null,
-        React.createElement("div", { style: operationWrap },
+        horizontalArea ? (React.createElement("div", { style: operationWrap }, horizontalArea)) : (React.createElement("div", { style: operationWrap },
             buttonArea ? React.createElement("div", null, buttonArea) : null,
             React.createElement("div", null,
                 searchInputArea ? searchInputArea : null,
@@ -83,9 +84,22 @@ const TablePro = memo(({ className, header, buttonArea, filterArea, searchInputA
                 innerColumns ? (React.createElement(Popover, { placement: "leftBottom", title: React.createElement(Typography.Title, { level: 5 }, columnsTitle), content: React.createElement(TableProColumns, { disColumnRef: disColumnRef, columns: innerColumns, setColumns: setColumns }), trigger: "click", open: openColumnFilter, onOpenChange: (newOpen) => {
                         setOpenColumnFilter(newOpen);
                     } },
-                    React.createElement(Button, { type: "text", icon: React.createElement(MenuOutlined, null) }, columnsTitle))) : null)),
+                    React.createElement(Button, { type: "text", icon: React.createElement(MenuOutlined, null) }, columnsTitle))) : null))),
         dataSource ? (React.createElement("div", { style: { height: '100%', overflow: 'hidden' }, ref: ref },
-            React.createElement(Table, { rowSelection: selectType ? rowSelection : undefined, bordered: bordered, rowKey: rowKey, columns: showColumns, dataSource: dataSource, scroll: { y }, loading: loading, pagination: pagination || false, onChange: onChange || undefined }))) : null));
+            React.createElement(Table, { rowSelection: selectType ? rowSelection : undefined, onRow: (record, index) => {
+                    return {
+                        onClick: (e) => {
+                            const parent = getDelateTargetByClassName(e.target, "ant-table-tbody");
+                            if (parent) {
+                                const list = parent.querySelectorAll(".ant-table-row");
+                                list.forEach(elem => {
+                                    elem.style = "";
+                                });
+                                list[index].style = "background: #e6f4ff";
+                            }
+                        }, // 点击行
+                    };
+                }, expandable: expandable || undefined, bordered: bordered, rowKey: rowKey, columns: showColumns, dataSource: dataSource, scroll: { y }, loading: loading, pagination: pagination || false, onChange: onChange || undefined }))) : null));
 });
 TablePro.defaultProps = {
     filterTitle: "筛选",

package/lib/helpers/dom.d.ts

@@ -0,0 +1 @@
+export declare const getDelateTargetByClassName: (elem: any, str: string) => any;

package/lib/helpers/dom.js

@@ -0,0 +1,61 @@
+export const getDelateTargetByClassName = (elem, str) => {
+    if (!elem) {
+        return null;
+    }
+    const re = new RegExp("(\\s|^)" + str + "(\\s|$)", "i");
+    let parent = elem;
+    while (parent && !re.test(parent.className)) {
+        parent = parent.parentNode;
+    }
+    return parent ? parent : null;
+};
+// export const addClass = (elem, className: string) => {
+//     if (!className) {
+//         return this;
+//     }
+//     let arr;
+//     if (elem!.className) {
+//         // 解析当前 className 转换为数组
+//         arr = elem!.className.split(/\s/);
+//         arr = arr.filter((item) => {
+//             return !!item.trim();
+//         });
+//         // 添加 class
+//         if (arr.indexOf(className) < 0) {
+//             arr.push(className);
+//         }
+//         // 修改 elem.class
+//         elem!.className = arr.join(" ");
+//     } else {
+//         elem!.className = className;
+//     }
+//     return this;
+// }
+// // 删除 class
+// export const removeClass = (elem, className: string) => {
+//     if (!className) {
+//         return this;
+//     }
+//     let arr;
+//     if (elem!.className) {
+//         // 解析当前 className 转换为数组
+//         arr = elem!.className.split(/\s/);
+//         arr = arr.filter((item) => {
+//             item = item.trim();
+//             // 删除 class
+//             if (!item || item === className) {
+//                 return false;
+//             }
+//             return true;
+//         });
+//         // 修改 elem.class
+//         elem!.className = arr.join(" ");
+//     }
+//     return this;
+// }
+// export const hasClass = (elem, className) => {
+//     if (!className) {
+//         return false;
+//     }
+//     return elem.className.match(new RegExp(`(\\s|^)${className}(\\s|$)`));
+// }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ecoding/components.antd",
-    "version": "0.3.34",
+    "version": "0.3.36",
     "author": "cxc",
     "homepage": "",
     "license": "MIT",
@@ -43,5 +43,5 @@
         "antd": "^5.8.4",
         "axios": "^1.1.2"
     },
-    "gitHead": "aec3b5b35f5a1ebedc7f09c378da17403aa2e574"
+    "gitHead": "972f3418fd6fdf656f374823d1c804d6519bcb6b"
 }