@ecoding/components.antd 0.3.47 → 0.3.49

package/lib/core/form.list/index.d.ts

@@ -19,6 +19,7 @@ interface IProps {
     hideHeader?: boolean;
     afterRemove?: (index: any) => void;
     afterAdd?: (index: any) => void;
+    tStyle?: React.CSSProperties;
     operation?: {
         width?: number;
         render?: (field: FormListFieldData, index: number) => React.ReactNode;

package/lib/core/form.list/index.js

@@ -1,7 +1,8 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useRef } from 'react';
 import { Typography, Form, Button, Space, Tooltip } from 'antd';
 import { PlusCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons';
-const C = ({ columns, rules, name, hideOperation, hideHeader, hideBottom, operation, i18n, afterRemove, afterAdd }) => {
+const C = ({ columns, rules, tStyle, name, hideOperation, hideHeader, hideBottom, operation, i18n, afterRemove, afterAdd }) => {
+    const tbodyRef = useRef(null);
     const tdStyle = {
         verticalAlign: 'top',
         lineHeight: '32px',
@@ -10,7 +11,10 @@ const C = ({ columns, rules, name, hideOperation, hideHeader, hideBottom, operat
     const thStyle = {
         textAlign: 'left',
         backgroundColor: '#fafafa',
-        padding: '8px'
+        padding: '8px',
+        position: "sticky",
+        top: 0,
+        zIndex: 1
     };
     const trStyle = {
         borderBottom: '1px solid #eee'
@@ -29,25 +33,31 @@ const C = ({ columns, rules, name, hideOperation, hideHeader, hideBottom, operat
         return w;
     }, []);
     return (React.createElement(Form.List, { name: name, rules: rules || [] }, (fields, { add, remove }, { errors }) => {
-        return (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: "m-form-list", style: { overflowX: 'auto', marginBottom: '4px', paddingBottom: '12px', position: 'relative' } },
+        return (React.createElement("div", { className: 'm-form-list' },
+            React.createElement("div", { ref: tbodyRef, className: "m-form-list-table", style: Object.assign({}, { marginBottom: '4px', paddingBottom: '12px', overflow: "auto", position: 'relative' }, tStyle) },
                 React.createElement("table", { style: { width: widths } },
+                    React.createElement("colgroup", null,
+                        React.createElement("col", { style: Object.assign({}, { width: 60 }) }),
+                        columns.map((column) => {
+                            return (React.createElement("col", { style: Object.assign({}, { width: column.width || 200 }) }));
+                        }),
+                        hideOperation ? null : (React.createElement("col", { style: Object.assign({}, { width: (operation === null || operation === void 0 ? void 0 : operation.width) || 150 }) }))),
                     React.createElement("thead", null, hideHeader ? null : (React.createElement("tr", null,
-                        React.createElement("th", { style: Object.assign({}, thStyle, { width: '60px' }) }, i18n ? i18n.$t("global.num", "序号") : "序号"),
+                        React.createElement("th", { style: thStyle }, i18n ? i18n.$t("global.num", "序号") : "序号"),
                         columns.map((column, i) => {
                             if (column.require) {
-                                return (React.createElement("th", { style: Object.assign({}, thStyle, { width: column.width || 200 }) },
+                                return (React.createElement("th", { style: thStyle },
                                     React.createElement("span", { style: { color: '#ff4d4f' } }, "*"),
                                     column.title,
                                     column.tooltip ? (React.createElement(Tooltip, { placement: "top", title: column.tooltip || undefined },
                                         React.createElement(QuestionCircleOutlined, { style: { paddingLeft: 4, color: "rgba(0, 0, 0, 0.45)" } }))) : null));
                             }
-                            return (React.createElement("th", { style: Object.assign({}, thStyle, { width: column.width || 200 }) },
+                            return (React.createElement("th", { style: thStyle },
                                 column.title,
                                 column.tooltip ? (React.createElement(Tooltip, { placement: "top", title: column.tooltip || undefined },
                                     React.createElement(QuestionCircleOutlined, { style: { paddingLeft: 4, color: "rgba(0, 0, 0, 0.45)" } }))) : null));
                         }),
-                        hideOperation ? null : operation ? (React.createElement("th", { style: Object.assign({}, thStyle, { width: operation.width || 150, right: 0, position: "sticky" }) }, operation.title || "操作")) : (React.createElement("th", { style: Object.assign({}, thStyle, { width: 150, right: 0, position: "sticky" }) }, i18n ? i18n.$t("global.operation", "操作") : "操作"))))),
+                        hideOperation ? null : operation ? (React.createElement("th", { style: Object.assign({}, thStyle, { right: 0 }) }, operation.title || "操作")) : (React.createElement("th", { style: Object.assign({}, thStyle, { right: 0 }) }, i18n ? i18n.$t("global.operation", "操作") : "操作"))))),
                     React.createElement("tbody", null, fields.map((field, index) => {
                         return (React.createElement("tr", { style: trStyle },
                             React.createElement("td", { style: tdStyle }, index + 1),
@@ -70,6 +80,9 @@ const C = ({ columns, rules, name, hideOperation, hideHeader, hideBottom, operat
             hideBottom ? null : (React.createElement("div", null,
                 React.createElement(Button, { icon: React.createElement(PlusCircleOutlined, null), type: "dashed", onClick: () => {
                         add();
+                        setTimeout(() => {
+                            tbodyRef.current.scrollTop = tbodyRef.current.scrollHeight;
+                        }, 10);
                         afterAdd && afterAdd(fields.length);
                     } }, i18n ? i18n.$t("global.add", "添加") : "添加")))));
     }));

package/lib/core/modal/index.d.ts

@@ -3,8 +3,11 @@ export interface IModalProps {
     key?: string;
     id?: string;
     className?: string;
+    wrapClassName?: string;
+    style?: React.CSSProperties;
     open?: boolean;
     width?: string | number;
+    height?: string | number;
     zIndex?: number;
     mask?: boolean;
     title?: React.ReactNode;
@@ -31,8 +34,9 @@ export interface IModalProps {
 export declare class Modals extends React.Component<IModalProps> {
     static defaultProps: {
         className: string;
+        wrapClassName: string;
         open: boolean;
-        bodyStyle: {};
+        style: {};
         width: string;
         zIndex: number;
         mask: boolean;
@@ -58,8 +62,11 @@ export declare class Modals extends React.Component<IModalProps> {
         key?: string | undefined;
         id?: string | undefined;
         className?: string | undefined;
+        wrapClassName?: string | undefined;
+        style?: React.CSSProperties | undefined;
         open?: boolean | undefined;
         width?: string | number | undefined;
+        height?: string | number | undefined;
         zIndex?: number | undefined;
         mask?: boolean | undefined;
         title?: React.ReactNode;

package/lib/core/modal/index.js

@@ -46,7 +46,7 @@ export class Modals extends React.Component {
     }
     render() {
         // if (!this.props.visible) return null;
-        return (React.createElement(Modal, { className: this.state.className, open: this.state.open, width: this.state.width, zIndex: this.state.zIndex, mask: this.state.mask, title: typeof this.state.title === "string" ? (React.createElement("div", { style: { boxShadow: "inset 0px -1px 0px #F0F0F0", marginBottom: "20px", paddingBottom: "12px" } }, this.state.title)) : (this.state.title), closable: this.state.closable, maskClosable: this.state.maskClosable, onCancel: this.cancel, destroyOnClose: true, keyboard: false, footer: this.state.footer === null ? null : this.state.footer ? (this.state.footer) : (React.createElement(React.Fragment, null,
+        return (React.createElement(Modal, { className: this.state.className, wrapClassName: this.state.wrapClassName, open: this.state.open, style: this.state.style, width: this.state.width, zIndex: this.state.zIndex, mask: this.state.mask, title: typeof this.state.title === "string" ? (React.createElement("div", { style: { boxShadow: "inset 0px -1px 0px #F0F0F0", marginBottom: "20px", paddingBottom: "12px" } }, this.state.title)) : (this.state.title), closable: this.state.closable, maskClosable: this.state.maskClosable, onCancel: this.cancel, destroyOnClose: true, keyboard: false, footer: this.state.footer === null ? null : this.state.footer ? (this.state.footer) : (React.createElement(React.Fragment, null,
                 this.state.addonBefore ? this.state.addonBefore : null,
                 React.createElement(Button, Object.assign({}, this.state.cancelButtonProps, { key: "back", onClick: this.cancel }), this.state.cancelText),
                 React.createElement(Button, Object.assign({}, this.state.okButtonProps, { danger: this.state.okDanger, key: "submit", type: this.state.okType, loading: this.state.loading, onClick: this.ok }), this.state.okText),
@@ -54,9 +54,10 @@ export class Modals extends React.Component {
     }
 }
 Modals.defaultProps = {
-    className: "g-modals",
+    className: "",
+    wrapClassName: "g-modals",
     open: false,
-    bodyStyle: {},
+    style: {},
     width: "80vw",
     zIndex: 950,
     mask: true,

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

@@ -8,6 +8,7 @@ interface IProps {
     className?: string;
     header?: React.ReactNode;
     buttonArea?: React.ReactNode;
+    scrollY?: string | number;
     filters?: {
         overMax?: number;
         colOpts?: ColProps;

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

@@ -4,10 +4,10 @@ import { FilterOutlined, MenuOutlined } from '@ant-design/icons';
 import TableProColumns from "./columns";
 import { getDelateTargetByClassName } from "../../helpers/dom";
 import FilterHorizontal from "./filters.horizontal";
-const TablePro = ({ className, header, buttonArea, filterArea, filters, searchInputArea, loading, rowKey, dataSource, pagination, offsetY, columns, operationColumn, bordered = false, selectChangeHandler, selectType, onChange, expandable, columnsTitle = "显示列", filterTitle = "筛选", locale }, ref) => {
+const TablePro = ({ className, header, buttonArea, filterArea, filters, searchInputArea, loading, rowKey, dataSource, pagination, offsetY, columns, operationColumn, bordered = false, selectChangeHandler, selectType, onChange, expandable, columnsTitle = "显示列", filterTitle = "筛选", locale, scrollY = '100%' }, ref) => {
     const tableRef = useRef(null);
     const disColumnRef = useRef([]);
-    const [y, setY] = useState('100%');
+    const [y, setY] = useState(scrollY);
     const [innerColumns, setColumns] = useState(columns);
     const [selectedRowKeys, setSelectedRowKeys] = useState([]);
     const flexColumnStyle = {
@@ -86,7 +86,7 @@ const TablePro = ({ className, header, buttonArea, filterArea, filters, searchIn
         }
     }, [columns]);
     useEffect(() => {
-        if (tableRef.current && innerColumns.length > 0) {
+        if (tableRef.current && innerColumns.length > 0 && scrollY == '100%') {
             const thead = tableRef.current.querySelector('thead');
             setTimeout(() => {
                 if (offsetY && offsetY > 0) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ecoding/components.antd",
-    "version": "0.3.47",
+    "version": "0.3.49",
     "author": "cxc",
     "homepage": "",
     "license": "MIT",
@@ -43,5 +43,5 @@
         "antd": "^5.8.4",
         "axios": "^1.1.2"
     },
-    "gitHead": "6ce14e373f7797fad2c5fed0a1232882a94579ff"
+    "gitHead": "ee7e6f5968f64b867060e9e6c1b7ddbad3572d92"
 }