amis-ui 3.5.2 → 3.6.0

package/lib/components/table/Row.js

@@ -0,0 +1,190 @@
+/**
+ * amis-ui v3.6.0
+ * Copyright 2018-2023 fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var amisCore = require('amis-core');
+var Checkbox = require('../Checkbox.js');
+var icons = require('../icons.js');
+var Cell = require('./Cell.js');
+var util = require('./util.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
+var BodyRow = /** @class */ (function (_super) {
+    tslib.__extends(BodyRow, _super);
+    function BodyRow() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.domRef = React__default["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 ? (_J$X_("i", { className: cx('Table-expandBtn', 'is-active'), onClick: this.onCollapse },
+            _J$X_(icons.Icon, { icon: "right-arrow-bold", className: "icon" }))) : (_J$X_("i", { className: cx('Table-expandBtn'), onClick: this.onExpand },
+            _J$X_(icons.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 = tslib.__spreadArray([], tslib.__read(this.tdColumns), false);
+        this.prependColumns(columns);
+        if (util.hasFixedColumn(columns)) {
+            util.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 = tslib.__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 = util.getBuildColumns(columns).tdColumns;
+        this.tdColumns = tdColumns;
+        var level = util.levelsSplit(levels).length;
+        // 设置缩进效果
+        var indentDom = levels.length > 0 ? (_J$X_("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, util.levelsSplit(levels))
+                : null;
+            var props = { rowSpan: 1, colSpan: 1 };
+            var children = render;
+            if (render && !React__default["default"].isValidElement(render) && amisCore.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 : (_J$X_(Cell["default"], tslib.__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 }),
+                _J$X_("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 ? (_J$X_("tr", { key: "expandedRow", className: cx('Table-expanded-row', expandedRowClassName) },
+            _J$X_(Cell["default"], { 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 ? (_J$X_(Cell["default"], { 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 [
+            _J$X_("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 ? (_J$X_(Cell["default"], { key: "drag", classPrefix: classPrefix, classnames: cx, className: cx('Table-dragCell') },
+                    _J$X_(icons.Icon, { icon: "drag-bar", className: "icon" }))) : null,
+                !draggable && selectable ? (_J$X_(Cell["default"], { key: "select", classPrefix: classPrefix, classnames: cx, fixed: rowSelectionFixed ? 'left' : '', className: cx('Table-checkCell') },
+                    _J$X_(Checkbox["default"], tslib.__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
+        ];
+    };
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", []),
+        tslib.__metadata("design:returntype", void 0)
+    ], BodyRow.prototype, "onExpand", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", []),
+        tslib.__metadata("design:returntype", void 0)
+    ], BodyRow.prototype, "onCollapse", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Boolean]),
+        tslib.__metadata("design:returntype", void 0)
+    ], BodyRow.prototype, "onCheckChange", null);
+    return BodyRow;
+}(React__default["default"].PureComponent));
+
+exports["default"] = BodyRow;

package/lib/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/lib/components/table/SummaryRow.js

@@ -0,0 +1,81 @@
+/**
+ * amis-ui v3.6.0
+ * Copyright 2018-2023 fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var util = require('./util.js');
+var Cell = require('./Cell.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
+var SummaryRow = /** @class */ (function (_super) {
+    tslib.__extends(SummaryRow, _super);
+    function SummaryRow() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.domRef = React__default["default"].createRef();
+        return _this;
+    }
+    SummaryRow.prototype.updateFixedRow = function () {
+        var _a = this.props, cx = _a.classnames, row = _a.row;
+        if (row && util.hasFixedColumn(row)) {
+            var tr = this.domRef.current;
+            util.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(_J$X_(Cell["default"], { 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 (_J$X_("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["default"].PureComponent));
+var SummaryRows = /** @class */ (function (_super) {
+    tslib.__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 = tslib.__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 (_J$X_(SummaryRow, tslib.__assign({ key: "summary-".concat(index) }, rest, { row: row }))); });
+    };
+    return SummaryRows;
+}(React__default["default"].PureComponent));
+
+exports.SummaryRow = SummaryRow;
+exports["default"] = SummaryRows;