@ecoding/components.antd 0.2.8 → 0.2.9

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

@@ -0,0 +1,8 @@
+import React from 'react';
+interface IProps {
+    columns: any[];
+    setColumns: any;
+    disColumnRef: any;
+}
+declare const TableProColumns: React.FC<IProps>;
+export default TableProColumns;

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

@@ -0,0 +1,56 @@
+import React, { memo, useMemo } from 'react';
+import { Checkbox } from 'antd';
+const ddStyle = {
+    display: "flex",
+    alignItems: "center",
+    height: 40,
+    border: "1px solid #eee",
+    padding: "0 10px",
+    marginTop: '8px'
+};
+const dtStyle = {
+    display: "flex",
+    alignItems: "center",
+    height: 26,
+    padding: "0 11px",
+    marginTop: '8px'
+};
+const TableProColumns = memo(({ columns, setColumns, disColumnRef }) => {
+    const checkedALl = useMemo(() => {
+        let flag = true;
+        if (columns.find((c) => c.checked === false)) {
+            flag = false;
+        }
+        return flag;
+    }, [columns]);
+    const changeAllHandler = (e) => {
+        disColumnRef.current = [];
+        const checked = e.target.checked;
+        const temp = columns.map((c) => {
+            c.checked = checked;
+            if (checked === false) {
+                disColumnRef.current.push(c.key);
+            }
+            return c;
+        });
+        setColumns(temp);
+    };
+    const changeHandler = (e, item) => {
+        const checked = e.target.checked;
+        const index = columns.findIndex((c) => c.key === item.key);
+        columns[index].checked = checked;
+        const newColumns = columns.concat([]);
+        if (checked === false && !disColumnRef.current.includes(item.key)) {
+            disColumnRef.current.push(item.key);
+        }
+        setColumns(newColumns);
+    };
+    return (React.createElement("dl", { style: { minWidth: 300 } },
+        React.createElement("dt", { style: dtStyle },
+            React.createElement(Checkbox, { checked: checkedALl, onChange: (e) => changeAllHandler(e) }, "ALL")),
+        columns.map((item) => {
+            return (React.createElement("dd", { style: ddStyle },
+                React.createElement(Checkbox, { checked: item.checked === false ? false : true, onChange: (e) => changeHandler(e, item) }, item.title)));
+        })));
+});
+export default TableProColumns;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+interface IProps {
+    className?: string;
+    header?: React.ReactNode;
+    buttonArea?: React.ReactNode;
+    filterArea?: React.ReactElement;
+    loading?: boolean;
+    rowKey: string;
+    dataSource: any;
+    columns: any[];
+    operationColumn?: any[];
+    pagination?: any;
+    offsetY?: number;
+    filterTitle?: string;
+    columnsTitle?: string;
+}
+declare const TablePro: React.FC<IProps>;
+export default TablePro;

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

@@ -0,0 +1,76 @@
+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, loading, rowKey, dataSource, pagination, offsetY, columns, operationColumn, columnsTitle, filterTitle }) => {
+    const ref = useRef(null);
+    const disColumnRef = useRef([]);
+    const [y, setY] = useState('100%');
+    const [innerColumns, setColumns] = useState(columns);
+    const flexColumnStyle = {
+        display: 'flex',
+        height: '100%',
+        flexDirection: 'column'
+    };
+    const operationWrap = {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 20
+    };
+    const [openFilter, setOpenFilter] = useState(false);
+    const [openColumnFilter, setOpenColumnFilter] = useState(false);
+    const hideOpenFilter = () => {
+        setOpenFilter(false);
+    };
+    const showColumns = useMemo(() => {
+        return innerColumns.filter((c) => c.checked !== false).concat(operationColumn || []);
+    }, [innerColumns]);
+    useEffect(() => {
+        if (disColumnRef.current && disColumnRef.current.length > 0 && columns.length > 0) {
+            setColumns(columns.map((c) => {
+                if (disColumnRef.current.includes(c.key)) {
+                    return Object.assign(Object.assign({}, c), { checked: false });
+                }
+                return c;
+            }));
+            return;
+        }
+        if (columns.length > 0) {
+            setColumns(columns);
+        }
+    }, [columns]);
+    useEffect(() => {
+        if (ref.current && innerColumns.length > 0) {
+            const thead = ref.current.querySelector('thead');
+            setTimeout(() => {
+                if (offsetY && offsetY > 0) {
+                    setY(ref.current.clientHeight - offsetY);
+                }
+                else {
+                    setY(ref.current.clientHeight - (thead.clientHeight && thead.clientHeight + (pagination ? 64 : 20)));
+                }
+            }, 100);
+        }
+    }, [header, loading, innerColumns]);
+    return (React.createElement("div", { style: flexColumnStyle, className: className || '' },
+        header ? header : null,
+        React.createElement("div", { style: operationWrap },
+            buttonArea ? React.createElement("div", null, buttonArea) : null,
+            React.createElement("div", 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) => {
+                        setOpenFilter(newOpen);
+                    } },
+                    React.createElement(Button, { type: "text", icon: React.createElement(FilterOutlined, null) }, filterTitle))) : null,
+                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)),
+        dataSource ? (React.createElement("div", { style: { height: '100%', overflow: 'hidden' }, ref: ref },
+            React.createElement(Table, { bordered: true, rowKey: rowKey, columns: showColumns, dataSource: dataSource, scroll: { y }, loading: loading, pagination: pagination || false }))) : null));
+});
+TablePro.defaultProps = {
+    filterTitle: "筛选",
+    columnsTitle: "显示列"
+};
+export default TablePro;

package/lib/index.d.ts

@@ -11,5 +11,6 @@ export { default as SingleImgUpload } from "./core/single-img-upload";
 export { default as SingleFileUpload } from "./core/single-file-upload";
 export { default as AsyncSelect } from "./core/async-select";
 export { default as AsyncTransfer } from "./core/async-transfer";
+export { default as TablePro } from "./core/table-pro";
 export { default as Quill } from "./core/quill";
 export { default as http } from "./helpers/http";

package/lib/index.js

@@ -11,5 +11,6 @@ export { default as SingleImgUpload } from "./core/single-img-upload";
 export { default as SingleFileUpload } from "./core/single-file-upload";
 export { default as AsyncSelect } from "./core/async-select";
 export { default as AsyncTransfer } from "./core/async-transfer";
+export { default as TablePro } from "./core/table-pro";
 export { default as Quill } from "./core/quill";
 export { default as http } from "./helpers/http";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ecoding/components.antd",
-    "version": "0.2.8",
+    "version": "0.2.9",
     "author": "cxc",
     "homepage": "",
     "license": "MIT",
@@ -44,5 +44,5 @@
     "dependencies": {
         "react-quill": "^2.0.0"
     },
-    "gitHead": "8c05c73f96bc4b402164ed6df9ae457588f88562"
+    "gitHead": "70c2987ae1386cfce5977396381f641072ebcdda"
 }