@ecoding/components.antd 0.3.36 → 0.3.37

package/lib/core/table-pro/filters.horizontal.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface IProps {
+    items?: React.ReactElement[];
+    onFinish?: (v: any) => Promise<void>;
+    onClear?: () => Promise<void>;
+    y?: string | number;
+    setY?: any;
+}
+declare const FiltersHorizontal: React.FC<IProps>;
+export default FiltersHorizontal;

package/lib/core/table-pro/filters.horizontal.js

@@ -0,0 +1,65 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React, { useRef, useEffect, useState } from 'react';
+import { Button, Form, Row, Col } from 'antd';
+const FiltersHorizontal = ({ items, onFinish, onClear, y, setY }) => {
+    const [form] = Form.useForm(); // 该组件内form全局变量
+    const ref = useRef(null);
+    const refInitY = useRef(undefined);
+    const [showMore, setShowMore] = useState(false);
+    const [moreFlag, setMoreFlag] = useState(false);
+    const [wrapH, setWrapH] = useState(items && items.length > 6 ? 110 : 'auto');
+    const finish = (v) => __awaiter(void 0, void 0, void 0, function* () {
+        onFinish && (yield onFinish(v));
+    });
+    const clear = () => __awaiter(void 0, void 0, void 0, function* () {
+        form.resetFields();
+        onClear && (yield onClear());
+    });
+    const switchShow = () => {
+        if (moreFlag) {
+            setMoreFlag(false);
+            setWrapH(110);
+            setY(refInitY.current);
+        }
+        else {
+            setMoreFlag(true);
+            setWrapH('auto');
+            setTimeout(() => {
+                const h = ref.current.clientHeight;
+                setY(refInitY.current - (h - 110));
+            }, 50);
+        }
+    };
+    useEffect(() => {
+        if (ref.current) {
+            setTimeout(() => {
+                if (items && items.length > 6) {
+                    setShowMore(true);
+                    setWrapH(110);
+                }
+            }, 200);
+        }
+    }, []);
+    useEffect(() => {
+        if (!refInitY.current && y != "100%") {
+            refInitY.current = y;
+        }
+    }, [y]);
+    return (React.createElement(Form, { form: form, onFinish: finish, style: { width: '100%', paddingBottom: 18, position: "relative" } },
+        React.createElement(Row, { gutter: 20, style: { overflow: "hidden", width: '100%', height: Number(wrapH) > 0 ? wrapH : 'auto' }, ref: ref }, items && items.map((item) => {
+            return (React.createElement(Col, { span: 8 }, item));
+        })),
+        React.createElement("div", { style: { textAlign: "right" } },
+            React.createElement(Button, { className: "mr10", onClick: clear }, "\u6E05\u7A7A"),
+            React.createElement(Button, { type: "primary", htmlType: "submit" }, "\u641C\u7D22")),
+        showMore ? (React.createElement(Button, { type: 'link', onClick: switchShow, style: { position: "absolute", bottom: 20, left: '50%', transform: "translateX(-50%)" }, size: 'small' }, moreFlag ? "收起" : "展开更多")) : null));
+};
+export default FiltersHorizontal;

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

@@ -4,8 +4,12 @@ interface IProps {
     className?: string;
     header?: React.ReactNode;
     buttonArea?: React.ReactNode;
+    filters?: {
+        items: React.ReactElement[];
+        onFinish?: (v: any) => Promise<void>;
+        onClear?: () => Promise<void>;
+    };
     filterArea?: React.ReactElement;
-    horizontalArea?: React.ReactElement;
     searchInputArea?: React.ReactElement;
     loading?: boolean;
     rowKey: string;

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

@@ -3,7 +3,8 @@ import { Popover, Button, Typography, Table } from 'antd';
 import { FilterOutlined, MenuOutlined } from '@ant-design/icons';
 import TableProColumns from "./columns";
 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 }) => {
+import FilterHorizontal from "./filters.horizontal";
+const TablePro = memo(({ className, header, buttonArea, filterArea, filters, 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%');
@@ -73,8 +74,9 @@ const TablePro = memo(({ className, header, buttonArea, filterArea, horizontalAr
     }, [header, loading, innerColumns]);
     return (React.createElement("div", { style: flexColumnStyle, className: className || '' },
         header ? header : null,
-        horizontalArea ? (React.createElement("div", { style: operationWrap }, horizontalArea)) : (React.createElement("div", { style: operationWrap },
-            buttonArea ? React.createElement("div", null, buttonArea) : null,
+        filters ? (React.createElement(FilterHorizontal, Object.assign({ y: y, setY: setY }, filters))) : null,
+        React.createElement("div", { style: operationWrap },
+            buttonArea ? React.createElement("div", null, buttonArea) : React.createElement("div", null),
             React.createElement("div", null,
                 searchInputArea ? searchInputArea : null,
                 filterArea ? (React.createElement(Popover, { placement: "leftBottom", title: React.createElement(Typography.Title, { level: 5 }, filterTitle), content: React.cloneElement(filterArea, { hide: hideOpenFilter }), trigger: "click", open: openFilter, onOpenChange: (newOpen) => {
@@ -84,7 +86,7 @@ const TablePro = memo(({ className, header, buttonArea, filterArea, horizontalAr
                 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, onRow: (record, index) => {
                     return {

package/package.json

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