254 lines
8.4 KiB
JavaScript
254 lines
8.4 KiB
JavaScript
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
||
|
|
import _typeof from "@babel/runtime/helpers/esm/typeof";
|
||
|
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
||
|
|
import { useContext } from '@rc-component/context';
|
||
|
|
import classNames from 'classnames';
|
||
|
|
import VirtualList from 'rc-virtual-list';
|
||
|
|
import * as React from 'react';
|
||
|
|
import Cell from "../Cell";
|
||
|
|
import TableContext, { responseImmutable } from "../context/TableContext";
|
||
|
|
import useFlattenRecords from "../hooks/useFlattenRecords";
|
||
|
|
import BodyLine from "./BodyLine";
|
||
|
|
import { GridContext, StaticContext } from "./context";
|
||
|
|
var Grid = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
||
|
|
var data = props.data,
|
||
|
|
onScroll = props.onScroll;
|
||
|
|
var _useContext = useContext(TableContext, ['flattenColumns', 'onColumnResize', 'getRowKey', 'prefixCls', 'expandedKeys', 'childrenColumnName', 'emptyNode', 'scrollX']),
|
||
|
|
flattenColumns = _useContext.flattenColumns,
|
||
|
|
onColumnResize = _useContext.onColumnResize,
|
||
|
|
getRowKey = _useContext.getRowKey,
|
||
|
|
expandedKeys = _useContext.expandedKeys,
|
||
|
|
prefixCls = _useContext.prefixCls,
|
||
|
|
childrenColumnName = _useContext.childrenColumnName,
|
||
|
|
emptyNode = _useContext.emptyNode,
|
||
|
|
scrollX = _useContext.scrollX;
|
||
|
|
var _useContext2 = useContext(StaticContext),
|
||
|
|
sticky = _useContext2.sticky,
|
||
|
|
scrollY = _useContext2.scrollY,
|
||
|
|
listItemHeight = _useContext2.listItemHeight;
|
||
|
|
|
||
|
|
// =========================== Ref ============================
|
||
|
|
var listRef = React.useRef();
|
||
|
|
|
||
|
|
// =========================== Data ===========================
|
||
|
|
var flattenData = useFlattenRecords(data, childrenColumnName, expandedKeys, getRowKey);
|
||
|
|
|
||
|
|
// ========================== Column ==========================
|
||
|
|
var columnsWidth = React.useMemo(function () {
|
||
|
|
var total = 0;
|
||
|
|
return flattenColumns.map(function (_ref) {
|
||
|
|
var width = _ref.width,
|
||
|
|
key = _ref.key;
|
||
|
|
total += width;
|
||
|
|
return [key, width, total];
|
||
|
|
});
|
||
|
|
}, [flattenColumns]);
|
||
|
|
var columnsOffset = React.useMemo(function () {
|
||
|
|
return columnsWidth.map(function (colWidth) {
|
||
|
|
return colWidth[2];
|
||
|
|
});
|
||
|
|
}, [columnsWidth]);
|
||
|
|
React.useEffect(function () {
|
||
|
|
columnsWidth.forEach(function (_ref2) {
|
||
|
|
var _ref3 = _slicedToArray(_ref2, 2),
|
||
|
|
key = _ref3[0],
|
||
|
|
width = _ref3[1];
|
||
|
|
onColumnResize(key, width);
|
||
|
|
});
|
||
|
|
}, [columnsWidth]);
|
||
|
|
|
||
|
|
// =========================== Ref ============================
|
||
|
|
React.useImperativeHandle(ref, function () {
|
||
|
|
var obj = {};
|
||
|
|
Object.defineProperty(obj, 'scrollLeft', {
|
||
|
|
get: function get() {
|
||
|
|
var _listRef$current;
|
||
|
|
return ((_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.getScrollInfo().x) || 0;
|
||
|
|
},
|
||
|
|
set: function set(value) {
|
||
|
|
var _listRef$current2;
|
||
|
|
(_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 ? void 0 : _listRef$current2.scrollTo({
|
||
|
|
left: value
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return obj;
|
||
|
|
});
|
||
|
|
|
||
|
|
// ======================= Col/Row Span =======================
|
||
|
|
var getRowSpan = function getRowSpan(column, index) {
|
||
|
|
var _flattenData$index;
|
||
|
|
var record = (_flattenData$index = flattenData[index]) === null || _flattenData$index === void 0 ? void 0 : _flattenData$index.record;
|
||
|
|
var onCell = column.onCell;
|
||
|
|
if (onCell) {
|
||
|
|
var _cellProps$rowSpan;
|
||
|
|
var cellProps = onCell(record, index);
|
||
|
|
return (_cellProps$rowSpan = cellProps === null || cellProps === void 0 ? void 0 : cellProps.rowSpan) !== null && _cellProps$rowSpan !== void 0 ? _cellProps$rowSpan : 1;
|
||
|
|
}
|
||
|
|
return 1;
|
||
|
|
};
|
||
|
|
var extraRender = function extraRender(info) {
|
||
|
|
var start = info.start,
|
||
|
|
end = info.end,
|
||
|
|
getSize = info.getSize,
|
||
|
|
offsetY = info.offsetY;
|
||
|
|
|
||
|
|
// Do nothing if no data
|
||
|
|
if (end < 0) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Find first rowSpan column
|
||
|
|
var firstRowSpanColumns = flattenColumns.filter(
|
||
|
|
// rowSpan is 0
|
||
|
|
function (column) {
|
||
|
|
return getRowSpan(column, start) === 0;
|
||
|
|
});
|
||
|
|
var startIndex = start;
|
||
|
|
var _loop = function _loop(i) {
|
||
|
|
firstRowSpanColumns = firstRowSpanColumns.filter(function (column) {
|
||
|
|
return getRowSpan(column, i) === 0;
|
||
|
|
});
|
||
|
|
if (!firstRowSpanColumns.length) {
|
||
|
|
startIndex = i;
|
||
|
|
return "break";
|
||
|
|
}
|
||
|
|
};
|
||
|
|
for (var i = start; i >= 0; i -= 1) {
|
||
|
|
var _ret = _loop(i);
|
||
|
|
if (_ret === "break") break;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Find last rowSpan column
|
||
|
|
var lastRowSpanColumns = flattenColumns.filter(
|
||
|
|
// rowSpan is not 1
|
||
|
|
function (column) {
|
||
|
|
return getRowSpan(column, end) !== 1;
|
||
|
|
});
|
||
|
|
var endIndex = end;
|
||
|
|
var _loop2 = function _loop2(_i) {
|
||
|
|
lastRowSpanColumns = lastRowSpanColumns.filter(function (column) {
|
||
|
|
return getRowSpan(column, _i) !== 1;
|
||
|
|
});
|
||
|
|
if (!lastRowSpanColumns.length) {
|
||
|
|
endIndex = Math.max(_i - 1, end);
|
||
|
|
return "break";
|
||
|
|
}
|
||
|
|
};
|
||
|
|
for (var _i = end; _i < flattenData.length; _i += 1) {
|
||
|
|
var _ret2 = _loop2(_i);
|
||
|
|
if (_ret2 === "break") break;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Collect the line who has rowSpan
|
||
|
|
var spanLines = [];
|
||
|
|
var _loop3 = function _loop3(_i2) {
|
||
|
|
var item = flattenData[_i2];
|
||
|
|
|
||
|
|
// This code will never reach, just incase
|
||
|
|
if (!item) {
|
||
|
|
return "continue";
|
||
|
|
}
|
||
|
|
if (flattenColumns.some(function (column) {
|
||
|
|
return getRowSpan(column, _i2) > 1;
|
||
|
|
})) {
|
||
|
|
spanLines.push(_i2);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
for (var _i2 = startIndex; _i2 <= endIndex; _i2 += 1) {
|
||
|
|
var _ret3 = _loop3(_i2);
|
||
|
|
if (_ret3 === "continue") continue;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Patch extra line on the page
|
||
|
|
var nodes = spanLines.map(function (index) {
|
||
|
|
var item = flattenData[index];
|
||
|
|
var rowKey = getRowKey(item.record, index);
|
||
|
|
var getHeight = function getHeight(rowSpan) {
|
||
|
|
var endItemIndex = index + rowSpan - 1;
|
||
|
|
var endItemKey = getRowKey(flattenData[endItemIndex].record, endItemIndex);
|
||
|
|
var sizeInfo = getSize(rowKey, endItemKey);
|
||
|
|
return sizeInfo.bottom - sizeInfo.top;
|
||
|
|
};
|
||
|
|
var sizeInfo = getSize(rowKey);
|
||
|
|
return /*#__PURE__*/React.createElement(BodyLine, {
|
||
|
|
key: index,
|
||
|
|
data: item,
|
||
|
|
rowKey: rowKey,
|
||
|
|
index: index,
|
||
|
|
style: {
|
||
|
|
top: -offsetY + sizeInfo.top
|
||
|
|
},
|
||
|
|
extra: true,
|
||
|
|
getHeight: getHeight
|
||
|
|
});
|
||
|
|
});
|
||
|
|
return nodes;
|
||
|
|
};
|
||
|
|
|
||
|
|
// ========================= Context ==========================
|
||
|
|
var gridContext = React.useMemo(function () {
|
||
|
|
return {
|
||
|
|
columnsOffset: columnsOffset
|
||
|
|
};
|
||
|
|
}, [columnsOffset]);
|
||
|
|
|
||
|
|
// ========================== Render ==========================
|
||
|
|
var tblPrefixCls = "".concat(prefixCls, "-tbody");
|
||
|
|
var bodyContent;
|
||
|
|
if (flattenData.length) {
|
||
|
|
// ========================== Sticky Scroll Bar ==========================
|
||
|
|
var horizontalScrollBarStyle = {};
|
||
|
|
if (sticky) {
|
||
|
|
horizontalScrollBarStyle.position = 'sticky';
|
||
|
|
horizontalScrollBarStyle.bottom = 0;
|
||
|
|
if (_typeof(sticky) === 'object' && sticky.offsetScroll) {
|
||
|
|
horizontalScrollBarStyle.bottom = sticky.offsetScroll;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
bodyContent = /*#__PURE__*/React.createElement(VirtualList, {
|
||
|
|
fullHeight: false,
|
||
|
|
ref: listRef,
|
||
|
|
styles: {
|
||
|
|
horizontalScrollBar: horizontalScrollBarStyle
|
||
|
|
},
|
||
|
|
className: classNames(tblPrefixCls, "".concat(tblPrefixCls, "-virtual")),
|
||
|
|
height: scrollY,
|
||
|
|
itemHeight: listItemHeight || 24,
|
||
|
|
data: flattenData,
|
||
|
|
itemKey: function itemKey(item) {
|
||
|
|
return getRowKey(item.record);
|
||
|
|
},
|
||
|
|
scrollWidth: scrollX,
|
||
|
|
onVirtualScroll: function onVirtualScroll(_ref4) {
|
||
|
|
var x = _ref4.x;
|
||
|
|
onScroll({
|
||
|
|
scrollLeft: x
|
||
|
|
});
|
||
|
|
},
|
||
|
|
extraRender: extraRender
|
||
|
|
}, function (item, index, itemProps) {
|
||
|
|
var rowKey = getRowKey(item.record, index);
|
||
|
|
return /*#__PURE__*/React.createElement(BodyLine, _extends({
|
||
|
|
data: item,
|
||
|
|
rowKey: rowKey,
|
||
|
|
index: index
|
||
|
|
}, itemProps));
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
bodyContent = /*#__PURE__*/React.createElement("div", {
|
||
|
|
className: classNames("".concat(prefixCls, "-placeholder"))
|
||
|
|
}, /*#__PURE__*/React.createElement(Cell, {
|
||
|
|
component: "div",
|
||
|
|
prefixCls: prefixCls
|
||
|
|
}, emptyNode));
|
||
|
|
}
|
||
|
|
return /*#__PURE__*/React.createElement(GridContext.Provider, {
|
||
|
|
value: gridContext
|
||
|
|
}, bodyContent);
|
||
|
|
});
|
||
|
|
var ResponseGrid = responseImmutable(Grid);
|
||
|
|
if (process.env.NODE_ENV !== 'production') {
|
||
|
|
ResponseGrid.displayName = 'ResponseGrid';
|
||
|
|
}
|
||
|
|
export default ResponseGrid;
|