virtualized-table
Version:
Large data volume table
1,096 lines (918 loc) • 182 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("react"));
else if(typeof define === 'function' && define.amd)
define(["react"], factory);
else {
var a = typeof exports === 'object' ? factory(require("react")) : factory(root["React"]);
for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
}
})(window, function(__WEBPACK_EXTERNAL_MODULE_react__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./libs/index.js");
/******/ })
/************************************************************************/
/******/ ({
/***/ "./libs/VTable2.0/Grid.js":
/*!********************************!*\
!*** ./libs/VTable2.0/Grid.js ***!
\********************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! prop-types */ "./node_modules/prop-types/index.js");
/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _utils_gridCell__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils/gridCell */ "./libs/VTable2.0/utils/gridCell.js");
/* harmony import */ var _utils_fixUtil__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./utils/fixUtil */ "./libs/VTable2.0/utils/fixUtil.js");
/* harmony import */ var _styles_grid_less__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./styles/grid.less */ "./libs/VTable2.0/styles/grid.less");
/* harmony import */ var _styles_grid_less__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_styles_grid_less__WEBPACK_IMPORTED_MODULE_4__);
/* harmony import */ var _utils_gridScrollInfo__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./utils/gridScrollInfo */ "./libs/VTable2.0/utils/gridScrollInfo.js");
/* harmony import */ var _utils_columns__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./utils/columns */ "./libs/VTable2.0/utils/columns.js");
/* harmony import */ var _utils_base__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./utils/base */ "./libs/VTable2.0/utils/base.js");
/* harmony import */ var _context_VTableContext__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./context/VTableContext */ "./libs/VTable2.0/context/VTableContext.js");
/* harmony import */ var _utils_rowKey__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./utils/rowKey */ "./libs/VTable2.0/utils/rowKey.js");
/* harmony import */ var _utils_deepClone__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./utils/deepClone */ "./libs/VTable2.0/utils/deepClone.js");
/* harmony import */ var _utils_timer__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./utils/timer */ "./libs/VTable2.0/utils/timer.js");
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
// const whyDidYouRender = require('@welldone-software/why-did-you-render');
// whyDidYouRender(React, {
// trackAllPureComponents: true
// });
var Grid = function Grid(props, ref) {
// 要向父MultiGrid暴露的
var gridContainer = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])(null);
Object(react__WEBPACK_IMPORTED_MODULE_0__["useImperativeHandle"])(ref, function () {
return {
gridContainer: gridContainer.current
};
});
var realGridContainer = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])(null);
var resetIsScrollingTimeoutIdRef = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])(null);
var scrollRef = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])({
gridScrollTop: 0,
gridScrollLeft: 0
});
var _VTableContext = Object(react__WEBPACK_IMPORTED_MODULE_0__["useContext"])(_context_VTableContext__WEBPACK_IMPORTED_MODULE_8__["default"]);
var isSticky = _VTableContext.isSticky;
var visibleHeight = props.visibleHeight || 400;
var estimatedRowHeight = props.estimatedRowHeight || 40;
var estimatedRowVisibleCount = Math.ceil(visibleHeight / estimatedRowHeight);
var clientWidth = gridContainer.current && gridContainer.current.clientWidth;
var visibleWidth = props.visibleWidth || clientWidth || 1200;
var estimatedColumnWidth = props.estimatedColumnWidth || 150;
var estimatedColumnVisibleCount = Math.ceil(visibleWidth / estimatedColumnWidth); // const
var stateProps = {
// 固定行高 boolean (需要行合并/分组表头时设置为true)
fixedRowHeight: props.fixedRowHeight,
// 列 #
columns: props.columns || [],
// 源数据 #
dataSource: props.dataSource || [],
// 可视区域高度
visibleHeight: visibleHeight,
// 一行的高度（预估）
estimatedRowHeight: estimatedRowHeight,
minRowHeight: props.minRowHeight || 40,
// 可渲染的元素个数
rowVisibleCount: props.rowVisibleCount || estimatedRowVisibleCount,
// 上下偏移渲染个数
rowOffsetCount: props.rowOffsetCount || 10,
// 可视区域宽度
visibleWidth: visibleWidth,
// 预估的每列宽度
estimatedColumnWidth: estimatedColumnWidth,
// 可渲染个数（水平）
columnVisibleCount: props.columnVisibleCount || estimatedColumnVisibleCount,
// 左右偏移渲染个数
columnOffsetCount: props.columnOffsetCount || 4,
fixedLeftColumns: props.fixedLeftColumns || [],
fixedRightColumns: props.fixedRightColumns || []
};
var _props$type = props.type,
type = _props$type === void 0 ? 'body' : _props$type,
mgType = props.mgType,
className = props.className,
gridStyle = props.gridStyle,
shouldRowHeightSync = props.shouldRowHeightSync,
rowKey = props.rowKey,
_props$rowSelection = props.rowSelection,
rowSelection = _props$rowSelection === void 0 ? {} : _props$rowSelection,
_props$components = props.components,
components = _props$components === void 0 ? {} : _props$components,
onRow = props.onRow,
headerBordered = props.headerBordered,
bordered = props.bordered,
onScrollTopSync = props.onScrollTopSync,
onCellTap = props.onCellTap;
var _useState = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])({
// 虚拟列
virtualColumns: [],
// 虚拟数据
virtualData: [],
// 可视区坐标（rowIndex垂直）
startRowIndex: 0,
endRowIndex: 0,
// 可视区坐标（columnIndex水平）
startColumnIndex: 0,
endColumnIndex: 0,
// padding偏移量(垂直)
startVerticalOffset: 0,
endVerticalOffset: 0,
// padding偏移量(水平)
startHorizontalOffset: 0,
endHorizontalOffset: 0
}),
_useState2 = _slicedToArray(_useState, 2),
grid = _useState2[0],
setGrid = _useState2[1]; // 真实展示的列
var displayedColumns = Object(react__WEBPACK_IMPORTED_MODULE_0__["useMemo"])(function () {
return [].concat(_toConsumableArray(stateProps.fixedLeftColumns), _toConsumableArray(grid.virtualColumns), _toConsumableArray(stateProps.fixedRightColumns));
}, [stateProps.fixedLeftColumns, grid.virtualColumns, stateProps.fixedRightColumns]);
var displayedFooterColumns = Object(react__WEBPACK_IMPORTED_MODULE_0__["useMemo"])(function () {
var columns = displayedColumns;
if (displayedColumns.length > 0 && displayedColumns[0].type === 'checkBox') {
columns = Object(_utils_deepClone__WEBPACK_IMPORTED_MODULE_10__["deepClone"])(displayedColumns);
columns[0].render = null;
}
return columns;
}, [displayedColumns]); //
var Components = Object(react__WEBPACK_IMPORTED_MODULE_0__["useMemo"])(function () {
return {
header: {
row: components.header && components.header.row || 'div',
cell: components.header && components.header.cell || 'div'
},
body: {
row: components.body && components.body.row || 'div',
cell: components.body && components.body.cell || 'div'
},
footer: {
row: components.footer && components.footer.row || 'div',
cell: components.footer && components.footer.cell || 'div'
}
};
}, [components]); // 更新grid信息
var updateGrid = function updateGrid(partialState) {
setGrid(function (oldState) {
return _objectSpread(_objectSpread({}, oldState), partialState);
});
};
Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(function () {
_onScrollEvent(true); //
if (type === 'body' && mgType === 'mainMultiGrid') {
setTimeout(function () {
_VTableContext.getBodyScrollBar({
ref: gridContainer
});
}, 0);
}
}, [stateProps.dataSource, stateProps.columns]);
/**
* 滚动事件
* @param {Boolean} didMount 是否didMount阶段执行
* @private
*/
var _onScrollEvent = function _onScrollEvent(didMount) {
// window.requestAnimationFrame(() => {
// 垂直方向滚动
_onVerticalScroll(didMount); // 水平方向滚动
_onHorizontalScroll(didMount); // });
};
/**
* 垂直方向滚动
* @param {Boolean} didMount 是否didMount阶段执行
* @private
*/
var _onVerticalScroll = function _onVerticalScroll(didMount) {
var scrollTop = gridContainer.current.scrollTop;
var gridScrollTop = scrollRef.current.gridScrollTop;
var doUpdate = Math.abs(scrollTop - gridScrollTop) > 40;
if (didMount || doUpdate) {
scrollRef.current.gridScrollTop = scrollTop;
var dataSource = stateProps.dataSource,
_estimatedRowHeight = stateProps.estimatedRowHeight,
rowOffsetCount = stateProps.rowOffsetCount,
rowVisibleCount = stateProps.rowVisibleCount; // 当前scrollTop
var gridInfo = Object(_utils_gridScrollInfo__WEBPACK_IMPORTED_MODULE_5__["getRealGridVerticalScrollInfo"])({
scrollTop: scrollTop,
dataSource: dataSource,
estimatedRowHeight: _estimatedRowHeight,
rowOffsetCount: rowOffsetCount,
rowVisibleCount: rowVisibleCount
}); // 更新渲染
updateGrid(gridInfo);
}
};
/**
* 水平方向滚动
* @param {Boolean} didMount 是否didMount阶段执行
* @private
*/
var _onHorizontalScroll = function _onHorizontalScroll(didMount) {
var scrollLeft = gridContainer.current.scrollLeft;
var gridScrollLeft = scrollRef.current.gridScrollLeft;
var doUpdate = Math.abs(scrollLeft - gridScrollLeft) > 80;
if (didMount || doUpdate) {
scrollRef.current.gridScrollLeft = scrollLeft;
var dataSource = stateProps.dataSource,
columns = stateProps.columns,
_estimatedColumnWidth = stateProps.estimatedColumnWidth,
columnOffsetCount = stateProps.columnOffsetCount,
columnVisibleCount = stateProps.columnVisibleCount; // 当前scrollLeft
var gridInfo = Object(_utils_gridScrollInfo__WEBPACK_IMPORTED_MODULE_5__["getRealGridHorizontalScrollInfo"])({
scrollLeft: scrollLeft,
dataSource: dataSource,
columns: columns,
estimatedColumnWidth: _estimatedColumnWidth,
columnOffsetCount: columnOffsetCount,
columnVisibleCount: columnVisibleCount
}); // 更新渲染
updateGrid(gridInfo);
}
};
/**
* 获取单元格合并列信息
* @param {Object} row 行信息
* @param {Number} rowIndex 可视行坐标
* @param {Number} realRowIndex 真实的行坐标
* @param {Object} column 列信息
* @param {Number} columnIndex 可视列坐标
* @param {Number} realColumnIndex 真实的列坐标
* @param {Number} colSpan 跨列
* @param {Number} rowSpan 跨行
* @returns {object}
* @private
*/
var getCellColRowSpanStyle = function getCellColRowSpanStyle(_ref) {
var row = _ref.row,
rowIndex = _ref.rowIndex,
realRowIndex = _ref.realRowIndex,
column = _ref.column,
columnIndex = _ref.columnIndex,
realColumnIndex = _ref.realColumnIndex,
colSpan = _ref.colSpan,
rowSpan = _ref.rowSpan,
type = _ref.type;
colSpan = colSpan === 0 ? 0 : Number(colSpan || 1);
rowSpan = rowSpan === 0 ? 0 : Number(rowSpan || 1);
var columns = stateProps.columns,
estimatedColumnWidth = stateProps.estimatedColumnWidth,
minRowHeight = stateProps.minRowHeight; // 获取宽/高
var height = rowSpan * minRowHeight;
var width = column.width || estimatedColumnWidth;
var rowMergeColumns = columns.slice(realColumnIndex, realColumnIndex + colSpan);
if (rowMergeColumns.length > 1) {
width = Object(_utils_columns__WEBPACK_IMPORTED_MODULE_6__["getColumnsWidth"])(rowMergeColumns);
} // 该行设置colSpan=0，直接隐藏，就不设置width=0了； 不隐藏设置width=0，会显示border和value，有问题
var display = colSpan === 0 ? 'none' : 'flex'; // 如果虚拟列的第一列是合并导致隐藏的，需要让它占个位置，不然这行会错位
// 如果是尾部列不用考虑这个问题
var vFirstColumn = grid.virtualColumns[0] || {};
var vFirstColumnRender = type === 'header' ? vFirstColumn._headerCellProps : vFirstColumn.render;
if (vFirstColumnRender) {
var vFirstValue = row[vFirstColumn['key'] || vFirstColumn['dataIndex']];
var vFirstRealColumnsIndex = grid.startColumnIndex;
var vFirstRenderData = vFirstColumnRender(vFirstValue, row, rowIndex, realRowIndex, vFirstColumn, 0, vFirstRealColumnsIndex);
if (Object(_utils_base__WEBPACK_IMPORTED_MODULE_7__["isRenderCellObj"])(vFirstRenderData)) {
var vFirstCellProps = type === 'header' ? vFirstRenderData : vFirstRenderData.props || {};
if (vFirstCellProps.colSpan === 0) {
// 截取第一列到当前列
var startVirtualColumns = grid.virtualColumns.slice(0, columnIndex + 1); // 过滤出第一列到当前列display none的列
var svHiddenColumns = startVirtualColumns.filter(function (svColumn, svColumnIndex) {
var svColumnRender = type === 'header' ? svColumn._headerCellProps : svColumn.render;
if (svColumnRender) {
var svValue = row[svColumn['key'] || svColumn['dataIndex']];
var svRealColumnIndex = svColumnIndex + vFirstRealColumnsIndex;
var svRenderData = svColumnRender(svValue, row, rowIndex, realRowIndex, svColumn, svColumnIndex, svRealColumnIndex);
if (Object(_utils_base__WEBPACK_IMPORTED_MODULE_7__["isRenderCellObj"])(svRenderData)) {
var svCellProps = type === 'header' ? svRenderData : svRenderData.props || {};
return svCellProps.colSpan === 0;
}
}
}); // 这两个columns相等，说明第一列到当前列全是隐藏到列
if (startVirtualColumns.length === svHiddenColumns.length) {
display = 'flex';
}
}
}
}
return {
width: width,
height: height,
display: display,
visibility: rowSpan < 1 ? 'hidden' : undefined // 这个是为了隐藏跨行
};
};
/**
* 单元格
* @param {Object} row 行信息
* @param {Number} rowIndex 可视行坐标
* @param {Object} column 列信息
* @param {Number} columnIndex 可视列坐标
* @param {String} type 类型 header|body|footer
* @returns Element
* @private
*/
var _cellRender = function _cellRender(row, rowIndex, column, columnIndex, _ref2) {
var type = _ref2.type;
var realRowIndex = rowIndex + grid.startRowIndex;
var realColumnIndex = column.fixed ? column.realFcIndex : columnIndex + grid.startColumnIndex;
var value = row[column['key'] || column['dataIndex']];
var _getCellChildNode2 = _getCellChildNode(value, row, rowIndex, realRowIndex, column, columnIndex, realColumnIndex, {
type: type
}),
childNode = _getCellChildNode2.childNode,
cellProps = _getCellChildNode2.cellProps;
var colSpan = cellProps.colSpan,
rowSpan = cellProps.rowSpan; // 获取cell信息
var _getCellColRowSpanSty = getCellColRowSpanStyle({
row: row,
rowIndex: rowIndex,
realRowIndex: realRowIndex,
column: column,
columnIndex: columnIndex,
realColumnIndex: realColumnIndex,
colSpan: colSpan,
rowSpan: rowSpan,
type: type
}),
width = _getCellColRowSpanSty.width,
height = _getCellColRowSpanSty.height,
display = _getCellColRowSpanSty.display,
visibility = _getCellColRowSpanSty.visibility; // 是否显示边框
var cellBordered = Object(_utils_gridCell__WEBPACK_IMPORTED_MODULE_2__["getCellBordered"])({
type: type,
isSticky: isSticky,
headerBordered: headerBordered,
bordered: bordered
}); // 对齐方式 'left' | 'right' | 'center'
var align = Object(_utils_gridCell__WEBPACK_IMPORTED_MODULE_2__["getCellAlign"])({
type: type,
column: column
}); // 固定列阴影
var fixedLeftColumns = stateProps.fixedLeftColumns,
fixedRightColumns = stateProps.fixedRightColumns;
var cellInfo = Object(_utils_fixUtil__WEBPACK_IMPORTED_MODULE_3__["getFixedCellInfo"])({
column: column,
fixedLeftColumns: fixedLeftColumns,
fixedRightColumns: fixedRightColumns
});
var cellFixedShadow = Object(_utils_fixUtil__WEBPACK_IMPORTED_MODULE_3__["getCellFixedShadow"])({
cellInfo: cellInfo
});
var cellFixedStyle = Object(_utils_fixUtil__WEBPACK_IMPORTED_MODULE_3__["getFixedCellStyle"])({
cellInfo: cellInfo
}); // className
var _column$className = column.className,
className = _column$className === void 0 ? '' : _column$className,
_column$ellipsisTitle = column.ellipsisTitle,
ellipsisTitle = _column$ellipsisTitle === void 0 ? true : _column$ellipsisTitle; // 有要重写对应header|body|footer的cell
var CellComponent = Components[type].cell; // {width, onResize}
var defaultCellProps = typeof column.onCell === 'function' ? column.onCell(column, realRowIndex) : {};
var cellPropsMap = {
header: Object(_utils_base__WEBPACK_IMPORTED_MODULE_7__["sameType"])(column.onHeaderCell, 'Function') ? column.onHeaderCell(column, realRowIndex) : undefined,
body: Object(_utils_base__WEBPACK_IMPORTED_MODULE_7__["sameType"])(column.onBodyCell, 'Function') ? column.onBodyCell(column, realRowIndex) : undefined,
footer: Object(_utils_base__WEBPACK_IMPORTED_MODULE_7__["sameType"])(column.onFooterCell, 'Function') ? column.onFooterCell(column, realRowIndex) : undefined
};
var additionalCellProps = cellPropsMap[type] || defaultCellProps;
var cellKey = "cell_".concat(type === 'body' ? realRowIndex : type, "_").concat(realColumnIndex);
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(CellComponent, _extends({}, additionalCellProps, {
key: cellKey,
"data-key": cellKey,
className: "vt-grid-cell ".concat(cellFixedShadow, " ").concat(cellBordered, " ").concat(align, " ").concat(className),
onClick: function onClick(e) {
return __onCellTap(e, value, row, rowIndex, realRowIndex, column, columnIndex, realColumnIndex);
},
colSpan: colSpan,
rowSpan: rowSpan,
style: _objectSpread(_objectSpread({
width: width,
minWidth: width,
minHeight: stateProps.minRowHeight,
height: stateProps.fixedRowHeight ? height : undefined,
display: display,
visibility: visibility
}, column.style), cellFixedStyle)
}), column.ellipsis ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: 'vt-ellipsis',
title: ellipsisTitle ? value : undefined
}, childNode) : childNode);
};
/**
* 获取单元格渲染信息
* @param {String} value 值
* @param {Object} row 行信息
* @param {Number} rowIndex 可视行坐标
* @param {Number} realRowIndex 真实的行坐标
* @param {Object} column 列信息
* @param {Number} columnIndex 可视列坐标
* @param {Number} realColumnIndex 真实的列坐标
* @param {String} type 类型 header|body|footer
* @returns {{cellProps: {}, childNode: null}}
* @private
*/
var _getCellChildNode = function _getCellChildNode(value, row, rowIndex, realRowIndex, column, columnIndex, realColumnIndex, _ref3) {
var type = _ref3.type;
var cellProps = {};
var childNode = value;
if (type === 'header') {
if (column.headRender) {
// TODO 后续废弃
childNode = Object(_utils_base__WEBPACK_IMPORTED_MODULE_7__["sameType"])(column.headRender, 'Function') ? column.headRender(value, row, rowIndex, realRowIndex, column, columnIndex, realColumnIndex) : value;
}
if (Object(_utils_base__WEBPACK_IMPORTED_MODULE_7__["sameType"])(column.title, 'Function')) {
childNode = column.title(value, row, rowIndex);
}
if (Object(_utils_base__WEBPACK_IMPORTED_MODULE_7__["sameType"])(column._headerCellProps, 'Function')) {
cellProps = column._headerCellProps(value, row, rowIndex);
}
} else {
if (column.render) {
var renderData = column.render(value, row, rowIndex, realRowIndex, column, columnIndex, realColumnIndex);
if (Object(_utils_base__WEBPACK_IMPORTED_MODULE_7__["isRenderCellObj"])(renderData)) {
childNode = renderData.children;
cellProps = renderData.props || {};
} else {
childNode = renderData;
}
}
} // Not crash if final `childNode` is not validate ReactNode
if (Object(_utils_base__WEBPACK_IMPORTED_MODULE_7__["sameType"])(childNode, 'Object') && !react__WEBPACK_IMPORTED_MODULE_0___default.a.isValidElement(childNode)) {
childNode = null;
}
return {
childNode: childNode,
cellProps: cellProps
};
};
/**
* 点击单元格函数
* @param {Event} e
* @param {String} value 值
* @param {Object} row 行信息
* @param {Number} rowIndex 可视行坐标
* @param {Number} realRowIndex 真实的行坐标
* @param {Object} column 列信息
* @param {Number} columnIndex 可视列坐标
* @param {Number} realColumnIndex 真实的列坐标
* @private
*/
var __onCellTap = function __onCellTap(e, value, row, rowIndex, realRowIndex, column, columnIndex, realColumnIndex) {
e.preventDefault();
if (typeof onCellTap === 'function') {
onCellTap(value, row, rowIndex, realRowIndex, column, columnIndex, realColumnIndex);
}
}; // 移入行 新增class vt-grid-row-hover
var __onMouseEnter = function __onMouseEnter(_ref4) {
var type = _ref4.type,
rowKey = _ref4.rowKey;
// sticky不需要下面方法，直接css：hover就能支持
if (type === 'body' && !isSticky) {
// 使用这种方式，减少hover时的重新渲染
try {
var scopeDOM = document.querySelectorAll('div.vt-grid-row');
var rowsCollection = Object(_utils_base__WEBPACK_IMPORTED_MODULE_7__["queryCustomAttributeDOM"])(scopeDOM, 'data-key', "row_".concat(rowKey));
rowsCollection.forEach(function (rowDom) {
var className = rowDom.getAttribute('class') + ' vt-grid-row-hover';
rowDom.setAttribute('class', className);
});
} catch (e) {
console.warn(e);
}
}
}; // 移出行 移除class vt-grid-row-hover
var __onMouseLeave = function __onMouseLeave(_ref5) {
var type = _ref5.type,
rowKey = _ref5.rowKey;
if (type === 'body' && !isSticky) {
try {
var scopeDOM = document.querySelectorAll('div.vt-grid-row');
var rowsCollection = Object(_utils_base__WEBPACK_IMPORTED_MODULE_7__["queryCustomAttributeDOM"])(scopeDOM, 'data-key', "row_".concat(rowKey));
rowsCollection.forEach(function (rowDom) {
var className = rowDom.getAttribute('class').replace(' vt-grid-row-hover', '');
rowDom.setAttribute('class', className);
});
} catch (e) {
console.warn(e);
}
}
};
/**
* 获取同步固定列的行高
* @param {String} type 类型 header|body|footer
* @param {Number} rowIndex 可视行坐标
* @return height
*/
function getRowHeight(_ref6) {
var type = _ref6.type,
rowIndex = _ref6.rowIndex;
var height = undefined;
if (shouldRowHeightSync && !_VTableContext.isSticky && type === 'body' && mgType !== 'mainMultiGrid') {
var _props$rowsHeightArr = props.rowsHeightArr,
rowsHeightArr = _props$rowsHeightArr === void 0 ? [] : _props$rowsHeightArr;
height = rowsHeightArr[rowIndex];
}
if (type === 'footer') {
height = stateProps.minRowHeight;
}
return height;
}
;
/**
* 行
* @param {Object} row 行数据
* @param {Number} rowIndex 可视行坐标
* @param {String} type 类型 header|body|footer
* @param {Array} displayedFooterColumns footer列 []
* @return Element
*/
var _gridRowRender = function _gridRowRender(row, rowIndex, _ref7) {
var type = _ref7.type,
displayedFooterColumns = _ref7.displayedFooterColumns;
var realRowIndex = rowIndex + grid.startRowIndex; // 是否选中
var _rowSelection$selecte = rowSelection.selectedRowKeys,
selectedRowKeys = _rowSelection$selecte === void 0 ? [] : _rowSelection$selecte;
var _rowKey = Object(_utils_rowKey__WEBPACK_IMPORTED_MODULE_9__["getRowKey"])(rowKey, row, realRowIndex);
var selected = selectedRowKeys.includes(_rowKey); // isSticky:true时设置
var height = stateProps.fixedRowHeight ? stateProps.minRowHeight : getRowHeight({
type: type,
rowIndex: rowIndex
}); // 有要重写对应header|body|footer的row
var RowComponent = Components[type].row; // {index, moveRow}
var additionalRowProps = typeof onRow === 'function' ? onRow(row, realRowIndex) : {};
var mouseEvent = {
onMouseEnter: function onMouseEnter(event) {
__onMouseEnter({
type: type,
rowKey: _rowKey
});
if (additionalRowProps.onMouseEnter) {
additionalRowProps.onMouseEnter(event);
}
},
onMouseLeave: function onMouseLeave(event) {
__onMouseLeave({
type: type,
rowKey: _rowKey
});
if (additionalRowProps.onMouseLeave) {
additionalRowProps.onMouseLeave(event);
}
}
};
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(RowComponent, _extends({}, additionalRowProps, mouseEvent, {
key: "row_".concat(_rowKey),
"data-key": "row_".concat(_rowKey),
className: Object(_utils_base__WEBPACK_IMPORTED_MODULE_7__["classNames"])('vt-grid-row', {
'vt-grid-row-selected': selected
}, additionalRowProps.className),
style: {
height: height,
contain: stateProps.fixedRowHeight ? 'none' : '' // height: stateProps.estimatedRowHeight,
// width: stateProps.visibleWidth
}
}), // footer不展示勾选框
(displayedFooterColumns || displayedColumns).map(function (column, columnIndex) {
return _cellRender(row, rowIndex, column, columnIndex, {
type: type
});
}));
};
var onScrollCapture = function onScrollCapture(e) {
if ((!_VTableContext.isSticky || _VTableContext.headerNotSticky) && mgType === 'mainMultiGrid') _VTableContext.onScroll(e);
if (type === 'body' && onScrollTopSync) onScrollTopSync(e);
_onScrollEvent(); // 设置元素不对指针事件做出反应
realGridContainer.current.style.pointerEvents = 'none';
_resetIsScrollingDebounced();
};
var _resetIsScrollingDebounced = function _resetIsScrollingDebounced() {
if (resetIsScrollingTimeoutIdRef.current !== null) {
Object(_utils_timer__WEBPACK_IMPORTED_MODULE_11__["cancelTimeout"])(resetIsScrollingTimeoutIdRef.current);
}
resetIsScrollingTimeoutIdRef.current = Object(_utils_timer__WEBPACK_IMPORTED_MODULE_11__["requestTimeout"])(_resetIsScrolling, 150);
};
var _resetIsScrolling = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(function () {
resetIsScrollingTimeoutIdRef.current = null;
realGridContainer.current.style.pointerEvents = ''; // if (type === 'body' && props.syncRowHeight) props.syncRowHeight('setState');
}, []);
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: Object(_utils_base__WEBPACK_IMPORTED_MODULE_7__["classNames"])('vt-grid-container', className),
ref: gridContainer,
onScrollCapture: onScrollCapture,
style: _objectSpread({
height: stateProps.visibleHeight
}, gridStyle || {})
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
ref: realGridContainer,
style: {
willChange: 'transform',
// pointerEvents: 'none',
// transform: `translateY(${grid.startVerticalOffset}px)`,
paddingTop: grid.startVerticalOffset,
paddingBottom: grid.endVerticalOffset,
paddingLeft: grid.startHorizontalOffset,
paddingRight: grid.endHorizontalOffset
}
}, // sticky header
_VTableContext.isSticky && !_VTableContext.headerNotSticky && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: "vt-table-header vt-header-sticky"
}, _VTableContext.headerTitle.map(function (row, rowIndex) {
// 行渲染
return _gridRowRender(row, rowIndex, {
type: 'header'
});
})), grid.virtualData.map(function (row, rowIndex) {
// 行渲染
return _gridRowRender(row, rowIndex, {
type: type
});
}), // sticky footer
_VTableContext.isSticky && _VTableContext.summaryData && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: "vt-table-footer vt-footer-sticky"
}, _VTableContext.summaryData.map(function (row, rowIndex) {
// 行渲染
return _gridRowRender(row, rowIndex, {
type: 'footer',
displayedFooterColumns: displayedFooterColumns
});
})))));
};
Grid.propTypes = {
columns: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.array,
dataSource: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.array,
visibleWidth: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,
visibleHeight: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,
estimatedRowHeight: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,
minRowHeight: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,
rowVisibleCount: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,
rowOffsetCount: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,
estimatedColumnWidth: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,
columnVisibleCount: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,
columnOffsetCount: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,
fixedRowHeight: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.bool,
fixedLeftColumns: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.array,
fixedRightColumns: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.array,
// 类型 header
type: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string,
mgType: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string,
className: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string,
// .vt-grid-container 样式
gridStyle: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.object,
shouldRowHeightSync: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.bool,
headerBordered: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.bool,
bordered: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.bool,
rowKey: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string, prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func]),
components: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.object,
onRow: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func,
onScrollTopSync: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func,
onCellTap: prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.func
}; // Grid.whyDidYouRender = true;
/* harmony default export */ __webpack_exports__["default"] = (react__WEBPACK_IMPORTED_MODULE_0___default.a.memo(react__WEBPACK_IMPORTED_MODULE_0___default.a.forwardRef(Grid)));
/***/ }),
/***/ "./libs/VTable2.0/MultiGrid.js":
/*!*************************************!*\
!*** ./libs/VTable2.0/MultiGrid.js ***!
\*************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _Grid__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Grid */ "./libs/VTable2.0/Grid.js");
/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! prop-types */ "./node_modules/prop-types/index.js");
/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _utils_fixUtil__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./utils/fixUtil */ "./libs/VTable2.0/utils/fixUtil.js");
/* harmony import */ var _utils_deepClone__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./utils/deepClone */ "./libs/VTable2.0/utils/deepClone.js");
/* harmony import */ var _utils_base__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./utils/base */ "./libs/VTable2.0/utils/base.js");
/* harmony import */ var _styles_multi_grid_less__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./styles/multi-grid.less */ "./libs/VTable2.0/styles/multi-grid.less");
/* harmony import */ var _styles_multi_grid_less__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_styles_multi_grid_less__WEBPACK_IMPORTED_MODULE_6__);
/* harmony import */ var _context_VTableContext__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./context/VTableContext */ "./libs/VTable2.0/context/VTableContext.js");
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var MultiGrid = function MultiGrid(props, ref) {
var _multiGridContainer = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])(null); // 要向父VTable暴露的
var multiGridContainer = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])(null);
Object(react__WEBPACK_IMPORTED_MODULE_0__["useImperativeHandle"])(ref, function () {
return {
// multiGridContainer: multiGridContainer.current,
gridContainer: multiGridContainer.current.gridContainer
};
}); //
var type = props.type,
mgClassName = props.mgClassName,
shouldRowHeightSync = props.shouldRowHeightSync,
columns = props.columns,
hasFixed = props.hasFixed,
dataSource = props.dataSource,
_props$fixedLeftColum = props.fixedLeftColumnCount,
fixedLeftColumnCount = _props$fixedLeftColum === void 0 ? 0 : _props$fixedLeftColum,
_props$fixedRightColu = props.fixedRightColumnCount,
fixedRightColumnCount = _props$fixedRightColu === void 0 ? 0 : _props$fixedRightColu,
bodyScrollBarWidth = props.bodyScrollBarWidth,
bodyScrollBarHeight = props.bodyScrollBarHeight; //
var multiGridContainerLeft = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])(null);
var multiGridContainerRight = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])(null);
var _VTableContext = Object(react__WEBPACK_IMPORTED_MODULE_0__["useContext"])(_context_VTableContext__WEBPACK_IMPORTED_MODULE_7__["default"]); // let [rowsHeightCacheId, setRowsHeightCacheId] = useState([]);
var _useState = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])([]),
_useState2 = _slicedToArray(_useState, 2),
rowsHeightArr = _useState2[0],
setRowsHeightArr = _useState2[1];
Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(function () {
// 同步固定列的高度
if (shouldRowHeightSync && !_VTableContext.isSticky && type === 'body' && hasFixed) {
var timer = setTimeout(function () {
// syncRowHeight({forceUpdate: true});
var current = multiGridContainer.current;
if (current) {
current.gridContainer.scrollLeft += 1;
var slTimer = setTimeout(function () {
current.gridContainer.scrollLeft -= 1;
clearTimeout(slTimer);
}, 50);
}
clearTimeout(timer);
}, 150);
}
}, [columns, dataSource, hasFixed]); // main columns
var getColumns = Object(react__WEBPACK_IMPORTED_MODULE_0__["useMemo"])(function () {
if (!hasFixed) {
return columns;
}
var end = fixedRightColumnCount ? -fixedRightColumnCount : undefined;
return fixedLeftColumnCount || fixedRightColumnCount ? Object(_utils_deepClone__WEBPACK_IMPORTED_MODULE_4__["deepClone"])(columns).slice(fixedLeftColumnCount, end) : columns;
}, [hasFixed, columns, fixedLeftColumnCount, fixedRightColumnCount]); // fixed left columns
var getFixedLeftColumns = Object(react__WEBPACK_IMPORTED_MODULE_0__["useMemo"])(function () {
if (!hasFixed) {
return [];
}
var fixedLeftColumns = fixedLeftColumnCount ? columns.slice(0, fixedLeftColumnCount) : [];
return Object(_utils_fixUtil__WEBPACK_IMPORTED_MODULE_3__["formatFixedLeftColumns"])({
fixedLeftColumns: fixedLeftColumns
});
}, [hasFixed, columns, fixedLeftColumnCount]); // fixed right columns
var getFixedRightColumns = Object(react__WEBPACK_IMPORTED_MODULE_0__["useMemo"])(function () {
if (!hasFixed) {
return [];
}
var fixedRightColumns = fixedRightColumnCount ? columns.slice(-fixedRightColumnCount) : [];
return Object(_utils_fixUtil__WEBPACK_IMPORTED_MODULE_3__["formatFixedRightColumns"])({
fixedRightColumns: fixedRightColumns,
columnsLength: columns.length
});
}, [hasFixed, columns, fixedRightColumnCount]); // 未使用sticky的主内容列
var mainColumns = Object(react__WEBPACK_IMPORTED_MODULE_0__["useMemo"])(function () {
return [].concat(_toConsumableArray(getFixedLeftColumns), _toConsumableArray(getColumns), _toConsumableArray(getFixedRightColumns));
}, [getFixedLeftColumns, getColumns, getFixedRightColumns]); //
var onScrollTopSync = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(function (e) {
var scrollTop = e && e.target && e.target.scrollTop; // window.requestAnimationFrame(() => {
var leftCurrent = multiGridContainerLeft.current;
var rightCurrent = multiGridContainerRight.current; //
if (leftCurrent) {
e.preventDefault();
leftCurrent.gridContainer.scrollTop = scrollTop;
}
if (rightCurrent) {
e.preventDefault();
rightCurrent.gridContainer.scrollTop = scrollTop;
} // });
syncRowHeight('setState');
}, []); // no isSticky
var syncRowHeight = function syncRowHeight() {
var syncType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'setDomStyle';
// 同步固定列的高度
if (shouldRowHeightSync && !_VTableContext.isSticky && type === 'body' && hasFixed) {
var multiGridCurrent = multiGridContainer.current;
var gridRowCollection = multiGridCurrent.gridContainer.querySelectorAll('.vt-grid-row'); // if (syncType === 'setDomStyle') {
// const multiGridContainerLeftCurrent = multiGridContainerLeft.current;
// const multiGridContainerRightCurrent = multiGridContainerRight.current;
// gridRowCollection.forEach((gridRowDom) => {
// const dataKey = gridRowDom.getAttribute('data-key');
// const leftRowDom = multiGridContainerLeftCurrent && multiGridContainerLeftCurrent.gridContainer.querySelector(`[data-key=${dataKey}]`);
// if (leftRowDom) leftRowDom.style.height = gridRowDom.clientHeight + 'px';
//
// const rightRowDom = multiGridContainerRightCurrent && multiGridContainerRightCurrent.gridContainer.querySelector(`[data-key=${dataKey}]`);
// if (rightRowDom) rightRowDom.style.height = gridRowDom.clientHeight + 'px';
// });
// }
if (syncType === 'setState') {
var gridRowHeightArr = Array.prototype.slice.call(gridRowCollection).map(function (item) {
return item.clientHeight;
});
setRowsHeightArr(gridRowHeightArr);
}
}
};
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: Object(_utils_base__WEBPACK_IMPORTED_MODULE_5__["classNames"])('vt-multi-grid-container', mgClassName),
ref: _multiGridContainer
}, _VTableContext.isSticky ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Grid__WEBPACK_IMPORTED_MODULE_1__["default"], _extends({}, props, {
ref: multiGridContainer // 加这个key是因为固定列变化 列数据多渲染一列 todo 原因
,
key: "".concat(fixedLeftColumnCount, "_").concat(fixedRightColumnCount, "_").concat(hasFixed