amis-ui 3.5.2 → 3.6.0

package/esm/components/table/HeadCellSort.d.ts

@@ -19,7 +19,7 @@ export interface State {
     orderDir: string;
     orderBy: string;
 }
-export declare class HeadCellSort extends React.Component<Props, State> {
+export declare class HeadCellSort extends React.PureComponent<Props, State> {
     constructor(props: Props);
     componentDidUpdate(prevProps: Readonly<Props>): void;
     render(): React.JSX.Element;

package/esm/components/table/HeadCellSort.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.5.2
+ * amis-ui v3.6.0
  * Copyright 2018-2023 fex
  */
 
@@ -82,7 +82,7 @@ var HeadCellSort = /** @class */ (function (_super) {
                 React__default.createElement(Icon, { icon: "sort-default", className: "icon", iconContent: "table-sort-default" }))));
     };
     return HeadCellSort;
-}(React__default.Component));
+}(React__default.PureComponent));
 var HeadCellSort$1 = themeable(localeable(HeadCellSort));
 
 export { HeadCellSort, HeadCellSort$1 as default };

package/esm/components/table/ItemActionsWrapper.d.ts

@@ -5,6 +5,6 @@ export interface ItemActionsProps {
     children?: React.ReactNode | Array<React.ReactNode>;
     dom: HTMLTableRowElement;
 }
-export default class ItemActionsWrapper extends React.Component<ItemActionsProps, {}> {
+export default class ItemActionsWrapper extends React.PureComponent<ItemActionsProps, {}> {
     render(): React.JSX.Element | undefined;
 }

package/esm/components/table/ItemActionsWrapper.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.5.2
+ * amis-ui v3.6.0
  * Copyright 2018-2023 fex
  */
 
@@ -24,6 +24,6 @@ var ItemActionsWrapper = /** @class */ (function (_super) {
         return (React__default.createElement("div", { className: cx('Table-itemActions-wrap'), style: { top: top + 'px', height: height + 'px' } }, children));
     };
     return ItemActionsWrapper;
-}(React__default.Component));
+}(React__default.PureComponent));
 
 export { ItemActionsWrapper as default };

package/esm/components/table/Row.d.ts

@@ -0,0 +1,60 @@
+/**
+ * @file table/BodyRow
+ * @author fex
+ */
+import React from 'react';
+import { ThemeProps } from 'amis-core';
+import { ColumnProps, TdProps } from './index';
+export interface Props extends ThemeProps {
+    data: any;
+    rowIndex: number;
+    columns: ColumnProps[];
+    expandable: boolean;
+    expandableFixed?: boolean;
+    indentSize: number;
+    lineHeight?: string;
+    keyField?: string;
+    draggable: boolean;
+    levels: string;
+    isExpandable: boolean;
+    isExpandableRow: boolean;
+    colCount: number;
+    isRightExpandable?: boolean;
+    isLeftExpandable?: boolean;
+    isChecked: boolean;
+    rowClassName?: Function;
+    onExpand?: Function;
+    onCollapse?: Function;
+    onMouseEnter: Function;
+    onMouseLeave: Function;
+    onClick: Function;
+    onDoubleClick: Function;
+    onChange: Function;
+    childrenColumnName: string;
+    selectable: boolean;
+    rowSelectionFixed?: boolean;
+    rowSelectionType?: 'radio' | 'checkbox';
+    hasChildrenRow: boolean;
+    hasChildrenChecked: boolean;
+    expandedRowClassName: string;
+    expandedRowRender?: Function;
+    isExpanded: boolean;
+    [propName: string]: any;
+}
+export default class BodyRow extends React.PureComponent<Props> {
+    domRef: React.RefObject<HTMLTableRowElement>;
+    tdColumns: Array<TdProps>;
+    onExpand(): void;
+    onCollapse(): void;
+    onMouseEnter(event: React.ChangeEvent<any>, record?: any, rowIndex?: number): void;
+    onMouseLeave(event: React.ChangeEvent<any>, record?: any, rowIndex?: number): void;
+    onClick(event: React.ChangeEvent<any>, record?: any, rowIndex?: number): void;
+    onDoubleClick(event: React.ChangeEvent<any>, record?: any, rowIndex?: number): void;
+    getExpandedIcons(): React.JSX.Element;
+    prependColumns(columns: Array<any>): void;
+    updateFixedRow(): void;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    onCheckChange(value: boolean): void;
+    render(): (React.JSX.Element | null)[];
+}

package/esm/components/table/Row.js

@@ -0,0 +1,183 @@
+/**
+ * amis-ui v3.6.0
+ * Copyright 2018-2023 fex
+ */
+
+import { __extends, __spreadArray, __read, __rest, __assign, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import { isObject, autobind } from 'amis-core';
+import Checkbox from '../Checkbox.js';
+import { Icon } from '../icons.js';
+import BodyCell from './Cell.js';
+import { hasFixedColumn, updateFixedRow, getBuildColumns, levelsSplit } from './util.js';
+
+/**
+ * @file table/BodyRow
+ * @author fex
+ */
+var BodyRow = /** @class */ (function (_super) {
+    __extends(BodyRow, _super);
+    function BodyRow() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.domRef = React__default.createRef();
+        return _this;
+    }
+    BodyRow.prototype.onExpand = function () {
+        var _a = this.props, onExpand = _a.onExpand, data = _a.data;
+        onExpand && onExpand([data]);
+    };
+    BodyRow.prototype.onCollapse = function () {
+        var _a = this.props, onCollapse = _a.onCollapse, data = _a.data;
+        onCollapse && onCollapse([data]);
+    };
+    BodyRow.prototype.onMouseEnter = function (event, record, rowIndex) {
+        var onMouseEnter = this.props.onMouseEnter;
+        onMouseEnter && onMouseEnter(event, record, rowIndex);
+    };
+    BodyRow.prototype.onMouseLeave = function (event, record, rowIndex) {
+        var onMouseLeave = this.props.onMouseLeave;
+        onMouseLeave && onMouseLeave(event, record, rowIndex);
+    };
+    BodyRow.prototype.onClick = function (event, record, rowIndex) {
+        var onClick = this.props.onClick;
+        onClick && onClick(event, record, rowIndex);
+    };
+    BodyRow.prototype.onDoubleClick = function (event, record, rowIndex) {
+        var onDoubleClick = this.props.onDoubleClick;
+        onDoubleClick && onDoubleClick(event, record, rowIndex);
+    };
+    BodyRow.prototype.getExpandedIcons = function () {
+        var _a = this.props, cx = _a.classnames, isExpanded = _a.isExpanded;
+        return isExpanded ? (React__default.createElement("i", { className: cx('Table-expandBtn', 'is-active'), onClick: this.onCollapse },
+            React__default.createElement(Icon, { icon: "right-arrow-bold", className: "icon" }))) : (React__default.createElement("i", { className: cx('Table-expandBtn'), onClick: this.onExpand },
+            React__default.createElement(Icon, { icon: "right-arrow-bold", className: "icon" })));
+    };
+    BodyRow.prototype.prependColumns = function (columns) {
+        var _a = this.props, selectable = _a.selectable, expandable = _a.expandable, expandableFixed = _a.expandableFixed, draggable = _a.draggable, rowSelectionFixed = _a.rowSelectionFixed;
+        if (draggable) {
+            columns.unshift({});
+        }
+        else {
+            if (expandable) {
+                columns.unshift({ fixed: expandableFixed });
+            }
+            if (selectable) {
+                columns.unshift({ fixed: rowSelectionFixed });
+            }
+        }
+    };
+    BodyRow.prototype.updateFixedRow = function () {
+        var cx = this.props.classnames;
+        var columns = __spreadArray([], __read(this.tdColumns), false);
+        this.prependColumns(columns);
+        if (hasFixedColumn(columns)) {
+            updateFixedRow(this.domRef.current, columns, cx);
+        }
+    };
+    BodyRow.prototype.componentDidMount = function () {
+        this.updateFixedRow();
+    };
+    BodyRow.prototype.componentDidUpdate = function () {
+        this.updateFixedRow();
+    };
+    BodyRow.prototype.onCheckChange = function (value) {
+        var data = this.props.data;
+        this.props.onChange && this.props.onChange(value, data);
+        event && event.stopPropagation();
+    };
+    BodyRow.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, cx = _a.classnames, isChecked = _a.isChecked, selectable = _a.selectable, expandable = _a.expandable, draggable = _a.draggable, indentSize = _a.indentSize, rowClassName = _a.rowClassName, lineHeight = _a.lineHeight, levels = _a.levels, columns = _a.columns, data = _a.data, isExpandable = _a.isExpandable, rowIndex = _a.rowIndex, keyField = _a.keyField, colCount = _a.colCount, isRightExpandable = _a.isRightExpandable, isLeftExpandable = _a.isLeftExpandable, classPrefix = _a.classPrefix, rowSelectionFixed = _a.rowSelectionFixed, rowSelectionType = _a.rowSelectionType, isExpandableRow = _a.isExpandableRow, hasChildrenRow = _a.hasChildrenRow, hasChildrenChecked = _a.hasChildrenChecked, expandedRowClassName = _a.expandedRowClassName, expandedRowRender = _a.expandedRowRender, isExpanded = _a.isExpanded; _a.childrenColumnName; var expandableFixed = _a.expandableFixed; _a.onExpand; _a.onCollapse; _a.onMouseEnter; _a.onMouseLeave; _a.onClick; _a.onChange; var rest = __rest(_a, ["classnames", "isChecked", "selectable", "expandable", "draggable", "indentSize", "rowClassName", "lineHeight", "levels", "columns", "data", "isExpandable", "rowIndex", "keyField", "colCount", "isRightExpandable", "isLeftExpandable", "classPrefix", "rowSelectionFixed", "rowSelectionType", "isExpandableRow", "hasChildrenRow", "hasChildrenChecked", "expandedRowClassName", "expandedRowRender", "isExpanded", "childrenColumnName", "expandableFixed", "onExpand", "onCollapse", "onMouseEnter", "onMouseLeave", "onClick", "onChange"]);
+        var tdColumns = getBuildColumns(columns).tdColumns;
+        this.tdColumns = tdColumns;
+        var level = levelsSplit(levels).length;
+        // 设置缩进效果
+        var indentDom = levels.length > 0 ? (React__default.createElement("span", { className: cx('Table-row-indent', "indent-level-".concat(level)), style: (levels === null || levels === void 0 ? void 0 : levels.length) > 0 ? { width: indentSize * level + 'px' } : {} })) : null;
+        var cells = tdColumns.map(function (item, i) {
+            var _a, _b;
+            // 为了支持灵活合并单元格，renderers层的Table2传递的render方法，返回{children: <ReactElement>, props: {rowSpan, colSpan}}
+            // 但直接使用amis-ui的table，render方法一般直接返回ReactElement
+            var render = item.render && typeof item.render === 'function'
+                ? item.render(data[item.name], data, rowIndex, i, levelsSplit(levels))
+                : null;
+            var props = { rowSpan: 1, colSpan: 1 };
+            var children = render;
+            if (render && !React__default.isValidElement(render) && isObject(render)) {
+                if (render.props) {
+                    props = render.props;
+                }
+                children = render.children;
+                // 如果合并行 且有展开行，那么合并行不生效
+                if (props.rowSpan > 1 && isExpandableRow && hasChildrenRow) {
+                    props.rowSpan === 1;
+                }
+            }
+            var className = typeof item.className === 'function'
+                ? item.className(data, rowIndex)
+                : '';
+            return props.rowSpan === 0 || props.colSpan === 0 ? null : (React__default.createElement(BodyCell, __assign({ classnames: cx, classPrefix: classPrefix, key: i }, props, { fixed: item.fixed === true ? 'left' : item.fixed, column: item, className: cx((_a = {},
+                    _a["".concat(className)] = !!className,
+                    _a)), col: i > -1 ? i.toString() : undefined }),
+                React__default.createElement("div", { className: cx('Table-cell-wrapper', (_b = {},
+                        _b[cx('Table-cell-wrapper-prefix')] = i === 0 &&
+                            (!!indentDom || (levels.length === 0 && hasChildrenRow)),
+                        _b[cx("Table-cell-height-".concat(lineHeight))] = !!lineHeight,
+                        _b)) },
+                    i === 0 && levels.length > 0 ? indentDom : null,
+                    i === 0 && hasChildrenRow ? _this.getExpandedIcons() : null,
+                    render ? children : data[item.name])));
+        });
+        var rowClassNameClass = rowClassName && typeof rowClassName === 'function'
+            ? rowClassName(data, rowIndex)
+            : '';
+        // 可展开和嵌套不能同时支持
+        // 设置了expandable 数据源里有children也就不生效了
+        // 拖拽排序 可选、可展开都先不支持了，可以支持嵌套展示
+        var children = !draggable && isExpandableRow && isExpanded ? (React__default.createElement("tr", { key: "expandedRow", className: cx('Table-expanded-row', expandedRowClassName) },
+            React__default.createElement(BodyCell, { key: "expanded", classnames: cx, classPrefix: classPrefix, colSpan: tdColumns.length + colCount }, expandable &&
+                expandedRowRender &&
+                typeof expandedRowRender === 'function'
+                ? expandedRowRender(data, rowIndex)
+                : null))) : null;
+        var isRadio = rowSelectionType === 'radio';
+        var expandableCell = !draggable && isExpandable ? (React__default.createElement(BodyCell, { key: "expandable", classnames: cx, classPrefix: classPrefix, fixed: expandable && expandableFixed
+                ? isRightExpandable
+                    ? 'right'
+                    : 'left'
+                : '', className: cx('Table-cell-expand-icon-cell') }, isExpandableRow || hasChildrenRow ? this.getExpandedIcons() : null)) : null;
+        return [
+            React__default.createElement("tr", { ref: this.domRef, key: "".concat(data[keyField || 'key'] || rowIndex), "row-index": rowIndex, "row-levels": levels, className: cx('Table-row', "Table-row-level-".concat(level), rowClassNameClass, {
+                    'Table-row-disabled': !!rest.disabled
+                }), onMouseEnter: function (e) { return _this.onMouseEnter(e, data, rowIndex); }, onMouseLeave: function (e) { return _this.onMouseLeave(e, data, rowIndex); }, onClick: function (e) { return _this.onClick(e, data, rowIndex); }, onDoubleClick: function (e) { return _this.onDoubleClick(e, data, rowIndex); } },
+                draggable ? (React__default.createElement(BodyCell, { key: "drag", classPrefix: classPrefix, classnames: cx, className: cx('Table-dragCell') },
+                    React__default.createElement(Icon, { icon: "drag-bar", className: "icon" }))) : null,
+                !draggable && selectable ? (React__default.createElement(BodyCell, { key: "select", classPrefix: classPrefix, classnames: cx, fixed: rowSelectionFixed ? 'left' : '', className: cx('Table-checkCell') },
+                    React__default.createElement(Checkbox, __assign({ name: 'Table-checkbox', type: rowSelectionType || 'checkbox', partial: !isRadio && hasChildrenChecked && !isChecked, checked: isRadio ? isChecked : hasChildrenChecked || isChecked, onChange: this.onCheckChange }, rest)))) : null,
+                isLeftExpandable ? expandableCell : null,
+                cells,
+                isRightExpandable ? expandableCell : null),
+            children
+        ];
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], BodyRow.prototype, "onExpand", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], BodyRow.prototype, "onCollapse", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Boolean]),
+        __metadata("design:returntype", void 0)
+    ], BodyRow.prototype, "onCheckChange", null);
+    return BodyRow;
+}(React__default.PureComponent));
+
+export { BodyRow as default };

package/esm/components/table/SummaryRow.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @file table/SummaryRow
+ * @author fex
+ */
+import React from 'react';
+import { ThemeProps } from 'amis-core';
+import { SummaryProps } from './index';
+export interface RowProps extends ThemeProps {
+    dataSource: Array<any>;
+    colCount: number;
+    isRightExpandable?: boolean;
+    row?: Array<SummaryProps>;
+    onMouseEnter: Function;
+    onMouseLeave: Function;
+}
+export interface Props extends RowProps {
+    summary: Array<SummaryProps | Array<SummaryProps>>;
+}
+export declare class SummaryRow extends React.PureComponent<RowProps> {
+    domRef: React.RefObject<HTMLTableRowElement>;
+    updateFixedRow(): void;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    render(): React.JSX.Element;
+}
+export default class SummaryRows extends React.PureComponent<Props> {
+    render(): React.JSX.Element[];
+}

package/esm/components/table/SummaryRow.js

@@ -0,0 +1,73 @@
+/**
+ * amis-ui v3.6.0
+ * Copyright 2018-2023 fex
+ */
+
+import { __extends, __rest, __assign } from 'tslib';
+import React__default from 'react';
+import { hasFixedColumn, updateFixedRow } from './util.js';
+import BodyCell from './Cell.js';
+
+/**
+ * @file table/SummaryRow
+ * @author fex
+ */
+var SummaryRow = /** @class */ (function (_super) {
+    __extends(SummaryRow, _super);
+    function SummaryRow() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.domRef = React__default.createRef();
+        return _this;
+    }
+    SummaryRow.prototype.updateFixedRow = function () {
+        var _a = this.props, cx = _a.classnames, row = _a.row;
+        if (row && hasFixedColumn(row)) {
+            var tr = this.domRef.current;
+            updateFixedRow(tr, row || [], cx);
+        }
+    };
+    SummaryRow.prototype.componentDidMount = function () {
+        this.updateFixedRow();
+    };
+    SummaryRow.prototype.componentDidUpdate = function () {
+        this.updateFixedRow();
+    };
+    SummaryRow.prototype.render = function () {
+        var _a = this.props, cx = _a.classnames, dataSource = _a.dataSource, classPrefix = _a.classPrefix, row = _a.row, colCount = _a.colCount, isRightExpandable = _a.isRightExpandable, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave;
+        var cells = [];
+        var extraCount = isRightExpandable ? 1 : 0;
+        row === null || row === void 0 ? void 0 : row.forEach(function (s, index) {
+            cells.push(React__default.createElement(BodyCell, { classnames: cx, classPrefix: classPrefix, key: 'summary-cell-' + index, fixed: s.fixed, colSpan: cells.length === 0
+                    ? (s.colSpan || 1) + colCount - extraCount
+                    : index === row.length - 1
+                        ? (s.colSpan || 1) + extraCount
+                        : s.colSpan }, typeof s.render === 'function' ? s.render(dataSource) : s.render));
+        });
+        return (React__default.createElement("tr", { ref: this.domRef, onMouseEnter: function (e) { return onMouseEnter && onMouseEnter(e); }, onMouseLeave: function (e) { return onMouseLeave && onMouseLeave(e); }, className: cx('Table-summary-row') }, cells));
+    };
+    return SummaryRow;
+}(React__default.PureComponent));
+var SummaryRows = /** @class */ (function (_super) {
+    __extends(SummaryRows, _super);
+    function SummaryRows() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    SummaryRows.prototype.render = function () {
+        var _a = this.props, summary = _a.summary, rest = __rest(_a, ["summary"]);
+        var rows = [[]];
+        if (Array.isArray(summary)) {
+            summary.forEach(function (s) {
+                if (Array.isArray(s)) {
+                    rows.push(s);
+                }
+                else {
+                    rows[0].push(s);
+                }
+            });
+        }
+        return rows.map(function (row, index) { return (React__default.createElement(SummaryRow, __assign({ key: "summary-".concat(index) }, rest, { row: row }))); });
+    };
+    return SummaryRows;
+}(React__default.PureComponent));
+
+export { SummaryRow, SummaryRows as default };