fastlion-amis/lib/components/VirtualTable.js

一种MIS页面生成工具

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var antd_1 = require("antd");
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var rc_resize_observer_1 = (0, tslib_1.__importDefault)(require("rc-resize-observer"));
var react_1 = tslib_1.__importStar(require("react"));
var react_window_1 = require("react-window");
var VirtualTable = function (props) {
    var columns = props.columns, scroll = props.scroll, tempList = props.tempList, rowKey = props.rowKey, onOneScreen = props.onOneScreen;
    var _a = (0, react_1.useState)(0), tableWidth = _a[0], setTableWidth = _a[1];
    var hasWidthColumns = columns.filter(function (_a) {
        var width = _a.width;
        return !width;
    });
    var widthColumnCount = hasWidthColumns.length;
    var hasWidthColumnsTotalWidh = columns.filter(function (_a) {
        var width = _a.width;
        return width;
    }).reduce(function (pre, cur) { return +((cur === null || cur === void 0 ? void 0 : cur.width) || 0) + pre; }, 0);
    var resetWidth = tableWidth - hasWidthColumnsTotalWidh;
    // 所有宽度总和
    var mergedColumns = columns.map(function (column) {
        if (column.width) {
            return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, column), { 
                // 通过比例计算出这一列应该多大 超过了原始宽度用原来的 否则等比例放大
                width: hasWidthColumnsTotalWidh > tableWidth ? column.width : (column.width / hasWidthColumnsTotalWidh) * tableWidth });
        }
        // 仅在一屏幕展示的情况下调整一下
        if (!onOneScreen) {
            return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, column), { width: Math.floor(tableWidth / widthColumnCount) });
        }
        else {
            return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, column), { width: Math.floor(resetWidth / widthColumnCount) });
        }
    });
    var gridRef = (0, react_1.useRef)();
    var connectObject = (0, react_1.useState)(function () {
        var obj = {};
        Object.defineProperty(obj, 'scrollLeft', {
            get: function () {
                var _a, _b;
                if (gridRef.current) {
                    return (_b = (_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.scrollLeft;
                }
                return null;
            },
            set: function (scrollLeft) {
                if (gridRef.current) {
                    gridRef.current.scrollTo({ scrollLeft: scrollLeft });
                }
            },
        });
        return obj;
    })[0];
    var resetVirtualGrid = function () {
        var _a;
        (_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.resetAfterIndices({
            columnIndex: 0,
            shouldForceUpdate: true,
        });
    };
    (0, react_1.useEffect)(function () { return resetVirtualGrid; }, [tableWidth, columns]);
    var renderVirtualList = function (rawData, _a) {
        var scrollbarSize = _a.scrollbarSize, ref = _a.ref, onScroll = _a.onScroll;
        ref.current = connectObject;
        var totalHeight = rawData.length * 42;
        return (react_1.default.createElement(react_window_1.VariableSizeGrid, { ref: gridRef, className: "virtual-grid", columnCount: mergedColumns.length, columnWidth: function (index) {
                var width = mergedColumns[index].width;
                return totalHeight > (scroll === null || scroll === void 0 ? void 0 : scroll.y) && index === mergedColumns.length - 1
                    ? width - scrollbarSize - 1
                    : width;
            }, height: scroll.y, rowCount: rawData.length, rowHeight: function () { return props.height || 42; }, width: tableWidth, onScroll: function (_a) {
                var scrollLeft = _a.scrollLeft;
                onScroll({ scrollLeft: scrollLeft });
            } }, function (_a) {
            var _b, _c;
            var columnIndex = _a.columnIndex, rowIndex = _a.rowIndex, style = _a.style;
            var value = rawData[rowIndex][mergedColumns[columnIndex].dataIndex];
            return (react_1.default.createElement("div", { className: (0, classnames_1.default)('virtual-table-cell', {
                    'virtual-table-cell-last': columnIndex === mergedColumns.length - 1,
                }), onClick: function (e) {
                    var _a, _b;
                    e.stopPropagation();
                    (_b = (_a = columns === null || columns === void 0 ? void 0 : columns[columnIndex]) === null || _a === void 0 ? void 0 : _a.cellClick) === null || _b === void 0 ? void 0 : _b.call(_a, rawData[rowIndex]);
                }, style: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, style), { boxSizing: 'border-box', padding: '7px 4px', lineHeight: '28px', borderBottom: "1px solid rgba(5, 5, 5, 0.06)", overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', background: tempList.includes((rawData[rowIndex])[rowKey]) ? '#f7ef9c' : '#fff' }) }, (_c = (_b = columns === null || columns === void 0 ? void 0 : columns[columnIndex]) === null || _b === void 0 ? void 0 : _b.render) === null || _c === void 0 ? void 0 : _c.call(_b, value, rawData[rowIndex], 0)
            // (typeof (rawData[rowIndex] as any)[(mergedColumns as any)[columnIndex].dataIndex] === 'object') ? '-' :
            //   (rawData[rowIndex] as any)[(mergedColumns as any)[columnIndex].dataIndex]
            ));
        }));
    };
    return (react_1.default.createElement(rc_resize_observer_1.default, { onResize: function (_a) {
            var width = _a.width;
            setTableWidth(width);
        } },
        react_1.default.createElement(antd_1.Table, (0, tslib_1.__assign)({}, props, { onRow: props.onRow, className: "virtual-table", columns: mergedColumns, pagination: false, components: {
                body: renderVirtualList,
            } }))));
};
exports.default = react_1.default.memo(VirtualTable);
//# sourceMappingURL=./components/VirtualTable.js.map