amis-ui 3.5.2 → 3.6.0

package/lib/components/table/Head.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @file table/Head
+ * @author fex
+ */
+import React from 'react';
+import { ThemeProps } from 'amis-core';
+import { ColumnProps, ThProps, TdProps, RowSelectionOptionProps } from './index';
+export interface Props extends ThemeProps {
+    draggable: boolean;
+    selectable: boolean;
+    rowSelectionFixed: boolean;
+    rowSelectionType?: string;
+    selections?: Array<RowSelectionOptionProps>;
+    columns: Array<ColumnProps>;
+    rowSelectionKeyField: string;
+    maxSelectedLength?: number;
+    isRightExpandable?: boolean;
+    isLeftExpandable?: boolean;
+    selectedRowKeys: Array<string | number>;
+    dataSource: Array<any>;
+    resizable?: boolean;
+    expandable: boolean;
+    expandableFixed?: string | boolean;
+    childrenColumnName: string;
+    orderBy?: string;
+    popOverContainer?: () => HTMLElement;
+    isExpandable: boolean;
+    onSort: Function;
+    onSelectAll: Function;
+    onFilter?: Function;
+    onResizeMouseDown: Function;
+}
+export default class Head extends React.PureComponent<Props> {
+    domRef: React.RefObject<HTMLTableSectionElement>;
+    thColumns: Array<Array<ThProps>>;
+    tdColumns: Array<TdProps>;
+    prependColumns(columns: Array<any>): void;
+    updateFixedRow(): void;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    render(): React.JSX.Element;
+}

package/lib/components/table/Head.js

@@ -0,0 +1,149 @@
+/**
+ * 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 Checkbox = require('../Checkbox.js');
+var Cell = require('./Cell.js');
+var HeadCellSort = require('./HeadCellSort.js');
+var HeadCellFilter = require('./HeadCellFilter.js');
+var HeadCellSelect = require('./HeadCellSelect.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 Head = /** @class */ (function (_super) {
+    tslib.__extends(Head, _super);
+    function Head() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.domRef = React__default["default"].createRef();
+        return _this;
+    }
+    Head.prototype.prependColumns = function (columns) {
+        var _a = this.props, rowSelectionFixed = _a.rowSelectionFixed, expandableFixed = _a.expandableFixed, draggable = _a.draggable;
+        if (draggable) {
+            columns.unshift({});
+        }
+        else {
+            if (expandableFixed) {
+                columns.unshift({ fixed: expandableFixed });
+            }
+            if (rowSelectionFixed) {
+                columns.unshift({ fixed: true });
+            }
+        }
+    };
+    Head.prototype.updateFixedRow = function () {
+        var cx = this.props.classnames;
+        var thead = this.domRef.current;
+        var children = thead === null || thead === void 0 ? void 0 : thead.children;
+        for (var i = 0; i < ((children === null || children === void 0 ? void 0 : children.length) || 0); i++) {
+            var cols = tslib.__spreadArray([], tslib.__read(this.thColumns[i]), false);
+            if (i === 0) {
+                this.prependColumns(cols);
+            }
+            if (util.hasFixedColumn(cols)) {
+                util.updateFixedRow(children === null || children === void 0 ? void 0 : children[i], cols, cx);
+            }
+        }
+    };
+    Head.prototype.componentDidMount = function () {
+        this.updateFixedRow();
+    };
+    Head.prototype.componentDidUpdate = function () {
+        this.updateFixedRow();
+    };
+    Head.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, dataSource = _a.dataSource, cx = _a.classnames, classPrefix = _a.classPrefix, expandable = _a.expandable, draggable = _a.draggable, resizable = _a.resizable, selectable = _a.selectable, rowSelectionKeyField = _a.rowSelectionKeyField, isExpandable = _a.isExpandable, childrenColumnName = _a.childrenColumnName, selectedRowKeys = _a.selectedRowKeys, maxSelectedLength = _a.maxSelectedLength, rowSelectionFixed = _a.rowSelectionFixed, rowSelectionType = _a.rowSelectionType, popOverContainer = _a.popOverContainer, isRightExpandable = _a.isRightExpandable, isLeftExpandable = _a.isLeftExpandable, orderBy = _a.orderBy, columns = _a.columns, selections = _a.selections, expandableFixed = _a.expandableFixed, onSort = _a.onSort, onSelectAll = _a.onSelectAll, onFilter = _a.onFilter, onResizeMouseDown = _a.onResizeMouseDown;
+        var _b = util.getBuildColumns(columns), thColumns = _b.thColumns, tdColumns = _b.tdColumns;
+        this.thColumns = thColumns;
+        this.tdColumns = tdColumns;
+        // 获取一行最多th个数
+        var maxCount = 0;
+        columns.forEach(function (cols) {
+            if (cols.length > maxCount) {
+                maxCount = cols.length;
+            }
+        });
+        var expandableCell = !draggable && isExpandable ? (_J$X_(Cell["default"], { key: "expandable", wrapperComponent: "th", rowSpan: columns.length, fixed: expandableFixed ? 'left' : '', className: cx('Table-row-expand-icon-cell'), classnames: cx, classPrefix: classPrefix })) : null;
+        var _c = util.getAllSelectableRows(dataSource, rowSelectionKeyField, childrenColumnName, expandable, selectedRowKeys, maxSelectedLength), rows = _c.rows, rowKeys = _c.rowKeys, restSelectedKeys = _c.restSelectedKeys;
+        // 从renderers的table传来的数据 可能不在当前页 因此需要过滤一下
+        var selectedKeys = selectedRowKeys.filter(function (key) {
+            return rowKeys.includes(key);
+        });
+        return (_J$X_("thead", { ref: this.domRef, className: cx('Table-thead') }, this.thColumns.map(function (data, index) {
+            return (_J$X_("tr", { key: 'th-cell-' + index },
+                draggable && index === 0 ? (_J$X_(Cell["default"], { key: "drag-".concat(index), wrapperComponent: "th", rowSpan: _this.thColumns.length, className: cx('Table-dragCell'), col: "drag", classnames: cx, classPrefix: classPrefix })) : null,
+                !draggable && selectable && index === 0 ? (_J$X_(Cell["default"], { key: "select-".concat(index), wrapperComponent: "th", rowSpan: _this.thColumns.length, fixed: rowSelectionFixed ? 'left' : '', className: cx('Table-checkCell'), col: "select", classnames: cx, classPrefix: classPrefix }, rowSelectionType !== 'radio'
+                    ? [
+                        _J$X_(Checkbox["default"], { key: "checkAll", partial: selectedKeys.length > 0 &&
+                                selectedKeys.length < rowKeys.length, checked: selectedKeys.length > 0, onChange: function (value) { return tslib.__awaiter(_this, void 0, void 0, function () {
+                                var selectedRows, selectedRowKeys;
+                                return tslib.__generator(this, function (_a) {
+                                    selectedRows = value ? rows : [];
+                                    selectedRowKeys = value ? rowKeys : [];
+                                    onSelectAll &&
+                                        onSelectAll(value, selectedRowKeys, selectedRows, restSelectedKeys);
+                                    return [2 /*return*/];
+                                });
+                            }); } }),
+                        selections && selections.length > 0 ? (_J$X_(HeadCellSelect["default"], { key: "checkSelection", keys: rowKeys, selections: selections, popOverContainer: popOverContainer })) : null
+                    ]
+                    : null)) : null,
+                isLeftExpandable && index === 0 ? expandableCell : null,
+                data.map(function (item, i) {
+                    var _a, _b;
+                    var sort = null;
+                    if (item.sorter) {
+                        sort = (_J$X_(HeadCellSort["default"], { column: item, active: !!orderBy && orderBy === (item === null || item === void 0 ? void 0 : item.name), onSort: function (payload) {
+                                onSort && onSort(payload, item);
+                            } }));
+                    }
+                    var filter = null;
+                    if (item.filterDropdown) {
+                        filter = item.filterDropdown;
+                    }
+                    else if (item.filters && item.filters.length > 0) {
+                        filter = (_J$X_(HeadCellFilter["default"], { column: item, popOverContainer: popOverContainer, onFilter: onFilter }));
+                    }
+                    // th的最后一行才可调整列宽
+                    // 分组情况下 最后一行才和列配置个数对应
+                    // 就可以根据index找到col 不依赖name
+                    var noChildren = !((_a = item.children) === null || _a === void 0 ? void 0 : _a.length);
+                    var cIndex = -1;
+                    if (noChildren) {
+                        // 根据name去tdColumns匹配出index
+                        // 没设置name的 那一定不是要绑定数据的列 一般都是分组的上层 也不会出现调整列宽
+                        cIndex = _this.tdColumns.findIndex(function (c) { return c.name === item.name; });
+                    }
+                    var children = !((_b = item.children) === null || _b === void 0 ? void 0 : _b.length) ? (_J$X_(React__default["default"].Fragment, null,
+                        sort,
+                        filter,
+                        resizable ? (_J$X_("i", { className: cx('Table-thead-resizable'), onMouseDown: function (e) {
+                                onResizeMouseDown && onResizeMouseDown(e, cIndex);
+                            } })) : null)) : null;
+                    return (_J$X_(Cell["default"], { key: "cell-".concat(i), wrapperComponent: "th", rowSpan: item.rowSpan, colSpan: item.colSpan, classnames: cx, classPrefix: classPrefix, fixed: item.fixed === true ? 'left' : item.fixed, className: cx({
+                            'Table-cell-last': i === maxCount - 1 && i === data.length - 1
+                        }), depth: item.depth, col: cIndex > -1 ? cIndex.toString() : undefined }, typeof item.title === 'function'
+                        ? item.title(children)
+                        : item.title));
+                }),
+                isRightExpandable && index === 0 ? expandableCell : null));
+        })));
+    };
+    return Head;
+}(React__default["default"].PureComponent));
+
+exports["default"] = Head;

package/lib/components/table/HeadCellDropDown.d.ts

@@ -29,7 +29,7 @@ export interface Props extends ThemeProps, LocaleProps {
 export interface State {
     isOpened: boolean;
 }
-export declare class HeadCellDropDown extends React.Component<Props, State> {
+export declare class HeadCellDropDown extends React.PureComponent<Props, State> {
     constructor(props: Props);
     render(): React.JSX.Element;
     openLayer(): void;

package/lib/components/table/HeadCellDropDown.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.5.2
+ * amis-ui v3.6.0
  * Copyright 2018-2023 fex
  */
 
@@ -45,7 +45,9 @@ var HeadCellDropDown = /** @class */ (function (_super) {
                                 _this.closeLayer();
                             }
                         } }))
-                    : filterDropdown || null))) : null));
+                    : React__default["default"].isValidElement(filterDropdown)
+                        ? filterDropdown
+                        : null))) : null));
     };
     HeadCellDropDown.prototype.openLayer = function () {
         this.setState({ isOpened: true });
@@ -54,7 +56,7 @@ var HeadCellDropDown = /** @class */ (function (_super) {
         this.setState({ isOpened: false });
     };
     return HeadCellDropDown;
-}(React__default["default"].Component));
+}(React__default["default"].PureComponent));
 var HeadCellDropDown$1 = amisCore.themeable(amisCore.localeable(HeadCellDropDown));
 
 exports.HeadCellDropDown = HeadCellDropDown;