1
This commit is contained in:
+13
@@ -0,0 +1,13 @@
|
||||
import * as React from 'react';
|
||||
import type { OnCustomizeScroll, ScrollConfig } from '../interface';
|
||||
export interface GridProps<RecordType = any> {
|
||||
data: RecordType[];
|
||||
onScroll: OnCustomizeScroll;
|
||||
}
|
||||
export interface GridRef {
|
||||
scrollLeft: number;
|
||||
nativeElement: HTMLDivElement;
|
||||
scrollTo: (scrollConfig: ScrollConfig) => void;
|
||||
}
|
||||
declare const ResponseGrid: React.ForwardRefExoticComponent<GridProps<any> & React.RefAttributes<GridRef>>;
|
||||
export default ResponseGrid;
|
||||
+270
@@ -0,0 +1,270 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
var _context = require("@rc-component/context");
|
||||
var _virtualList = _interopRequireDefault(require("@rc-component/virtual-list"));
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
var _TableContext = _interopRequireWildcard(require("../context/TableContext"));
|
||||
var _useFlattenRecords = _interopRequireDefault(require("../hooks/useFlattenRecords"));
|
||||
var _BodyLine = _interopRequireDefault(require("./BodyLine"));
|
||||
var _context2 = require("./context");
|
||||
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
||||
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
|
||||
const {
|
||||
data,
|
||||
onScroll
|
||||
} = props;
|
||||
const {
|
||||
flattenColumns,
|
||||
onColumnResize,
|
||||
getRowKey,
|
||||
expandedKeys,
|
||||
prefixCls,
|
||||
childrenColumnName,
|
||||
scrollX,
|
||||
direction
|
||||
} = (0, _context.useContext)(_TableContext.default, ['flattenColumns', 'onColumnResize', 'getRowKey', 'prefixCls', 'expandedKeys', 'childrenColumnName', 'scrollX', 'direction']);
|
||||
const {
|
||||
sticky,
|
||||
scrollY,
|
||||
listItemHeight,
|
||||
getComponent,
|
||||
onScroll: onTablePropScroll
|
||||
} = (0, _context.useContext)(_context2.StaticContext);
|
||||
|
||||
// =========================== Ref ============================
|
||||
const listRef = React.useRef(null);
|
||||
|
||||
// =========================== Data ===========================
|
||||
const flattenData = (0, _useFlattenRecords.default)(data, childrenColumnName, expandedKeys, getRowKey);
|
||||
|
||||
// ========================== Column ==========================
|
||||
const columnsWidth = React.useMemo(() => {
|
||||
let total = 0;
|
||||
return flattenColumns.map(({
|
||||
width,
|
||||
minWidth,
|
||||
key
|
||||
}) => {
|
||||
const finalWidth = Math.max(width || 0, minWidth || 0);
|
||||
total += finalWidth;
|
||||
return [key, finalWidth, total];
|
||||
});
|
||||
}, [flattenColumns]);
|
||||
const columnsOffset = React.useMemo(() => columnsWidth.map(colWidth => colWidth[2]), [columnsWidth]);
|
||||
React.useEffect(() => {
|
||||
columnsWidth.forEach(([key, width]) => {
|
||||
onColumnResize(key, width);
|
||||
});
|
||||
}, [columnsWidth]);
|
||||
|
||||
// =========================== Ref ============================
|
||||
React.useImperativeHandle(ref, () => {
|
||||
const obj = {
|
||||
scrollTo: config => {
|
||||
const {
|
||||
offset,
|
||||
...restConfig
|
||||
} = config;
|
||||
|
||||
// If offset is provided, force align to 'top' for consistent behavior
|
||||
if (offset) {
|
||||
listRef.current?.scrollTo({
|
||||
...restConfig,
|
||||
offset,
|
||||
align: 'top'
|
||||
});
|
||||
} else {
|
||||
listRef.current?.scrollTo(config);
|
||||
}
|
||||
},
|
||||
nativeElement: listRef.current?.nativeElement
|
||||
};
|
||||
Object.defineProperty(obj, 'scrollLeft', {
|
||||
get: () => listRef.current?.getScrollInfo().x || 0,
|
||||
set: value => {
|
||||
listRef.current?.scrollTo({
|
||||
left: value
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/54734
|
||||
Object.defineProperty(obj, 'scrollTop', {
|
||||
get: () => listRef.current?.getScrollInfo().y || 0,
|
||||
set: value => {
|
||||
listRef.current?.scrollTo({
|
||||
top: value
|
||||
});
|
||||
}
|
||||
});
|
||||
return obj;
|
||||
});
|
||||
|
||||
// ======================= Col/Row Span =======================
|
||||
const getRowSpan = (column, index) => {
|
||||
const record = flattenData[index]?.record;
|
||||
const {
|
||||
onCell
|
||||
} = column;
|
||||
if (onCell) {
|
||||
const cellProps = onCell(record, index);
|
||||
return cellProps?.rowSpan ?? 1;
|
||||
}
|
||||
return 1;
|
||||
};
|
||||
const extraRender = info => {
|
||||
const {
|
||||
start,
|
||||
end,
|
||||
getSize,
|
||||
offsetY
|
||||
} = info;
|
||||
|
||||
// Do nothing if no data
|
||||
if (end < 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Find first rowSpan column
|
||||
let firstRowSpanColumns = flattenColumns.filter(
|
||||
// rowSpan is 0
|
||||
column => getRowSpan(column, start) === 0);
|
||||
let startIndex = start;
|
||||
for (let i = start; i >= 0; i -= 1) {
|
||||
firstRowSpanColumns = firstRowSpanColumns.filter(column => getRowSpan(column, i) === 0);
|
||||
if (!firstRowSpanColumns.length) {
|
||||
startIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Find last rowSpan column
|
||||
let lastRowSpanColumns = flattenColumns.filter(
|
||||
// rowSpan is not 1
|
||||
column => getRowSpan(column, end) !== 1);
|
||||
let endIndex = end;
|
||||
for (let i = end; i < flattenData.length; i += 1) {
|
||||
lastRowSpanColumns = lastRowSpanColumns.filter(column => getRowSpan(column, i) !== 1);
|
||||
if (!lastRowSpanColumns.length) {
|
||||
endIndex = Math.max(i - 1, end);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Collect the line who has rowSpan
|
||||
const spanLines = [];
|
||||
for (let i = startIndex; i <= endIndex; i += 1) {
|
||||
const item = flattenData[i];
|
||||
|
||||
// This code will never reach, just incase
|
||||
if (!item) {
|
||||
continue;
|
||||
}
|
||||
if (flattenColumns.some(column => getRowSpan(column, i) > 1)) {
|
||||
spanLines.push(i);
|
||||
}
|
||||
}
|
||||
|
||||
// Patch extra line on the page
|
||||
const nodes = spanLines.map(index => {
|
||||
const item = flattenData[index];
|
||||
const rowKey = getRowKey(item.record, index);
|
||||
const getHeight = rowSpan => {
|
||||
const endItemIndex = index + rowSpan - 1;
|
||||
const endItem = flattenData[endItemIndex];
|
||||
if (!endItem || !endItem.record) {
|
||||
// clamp 到当前可用的最后一行,或退化为默认高度
|
||||
const safeEndIndex = Math.min(endItemIndex, flattenData.length - 1);
|
||||
const safeEndItem = flattenData[safeEndIndex];
|
||||
const endItemKey = getRowKey(safeEndItem.record, safeEndIndex);
|
||||
const sizeInfo = getSize(rowKey, endItemKey);
|
||||
return sizeInfo.bottom - sizeInfo.top;
|
||||
}
|
||||
const endItemKey = getRowKey(endItem.record, endItemIndex);
|
||||
const sizeInfo = getSize(rowKey, endItemKey);
|
||||
return sizeInfo.bottom - sizeInfo.top;
|
||||
};
|
||||
const sizeInfo = getSize(rowKey);
|
||||
return /*#__PURE__*/React.createElement(_BodyLine.default, {
|
||||
key: index,
|
||||
data: item,
|
||||
rowKey: rowKey,
|
||||
index: index,
|
||||
style: {
|
||||
top: -offsetY + sizeInfo.top
|
||||
},
|
||||
extra: true,
|
||||
getHeight: getHeight
|
||||
});
|
||||
});
|
||||
return nodes;
|
||||
};
|
||||
|
||||
// ========================= Context ==========================
|
||||
const gridContext = React.useMemo(() => ({
|
||||
columnsOffset
|
||||
}), [columnsOffset]);
|
||||
|
||||
// ========================== Render ==========================
|
||||
const tblPrefixCls = `${prefixCls}-tbody`;
|
||||
|
||||
// default 'div' in @rc-component/virtual-list
|
||||
const wrapperComponent = getComponent(['body', 'wrapper']);
|
||||
|
||||
// ========================== Sticky Scroll Bar ==========================
|
||||
const horizontalScrollBarStyle = {};
|
||||
if (sticky) {
|
||||
horizontalScrollBarStyle.position = 'sticky';
|
||||
horizontalScrollBarStyle.bottom = 0;
|
||||
if (typeof sticky === 'object' && sticky.offsetScroll) {
|
||||
horizontalScrollBarStyle.bottom = sticky.offsetScroll;
|
||||
}
|
||||
}
|
||||
return /*#__PURE__*/React.createElement(_context2.GridContext.Provider, {
|
||||
value: gridContext
|
||||
}, /*#__PURE__*/React.createElement(_virtualList.default, {
|
||||
fullHeight: false,
|
||||
ref: listRef,
|
||||
prefixCls: `${tblPrefixCls}-virtual`,
|
||||
styles: {
|
||||
horizontalScrollBar: horizontalScrollBarStyle
|
||||
},
|
||||
className: tblPrefixCls,
|
||||
height: scrollY,
|
||||
itemHeight: listItemHeight || 24,
|
||||
data: flattenData,
|
||||
itemKey: item => getRowKey(item.record),
|
||||
component: wrapperComponent,
|
||||
scrollWidth: scrollX,
|
||||
direction: direction,
|
||||
onVirtualScroll: ({
|
||||
x
|
||||
}) => {
|
||||
onScroll({
|
||||
currentTarget: listRef.current?.nativeElement,
|
||||
scrollLeft: x
|
||||
});
|
||||
},
|
||||
onScroll: onTablePropScroll,
|
||||
extraRender: extraRender
|
||||
}, (item, index, itemProps) => {
|
||||
const rowKey = getRowKey(item.record, index);
|
||||
return /*#__PURE__*/React.createElement(_BodyLine.default, {
|
||||
data: item,
|
||||
rowKey: rowKey,
|
||||
index: index,
|
||||
style: itemProps.style
|
||||
});
|
||||
}));
|
||||
});
|
||||
const ResponseGrid = (0, _TableContext.responseImmutable)(Grid);
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
ResponseGrid.displayName = 'ResponseGrid';
|
||||
}
|
||||
var _default = exports.default = ResponseGrid;
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
import * as React from 'react';
|
||||
import type { FlattenData } from '../hooks/useFlattenRecords';
|
||||
export interface BodyLineProps<RecordType = any> {
|
||||
data: FlattenData<RecordType>;
|
||||
index: number;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
rowKey: React.Key;
|
||||
/** Render cell only when it has `rowSpan > 1` */
|
||||
extra?: boolean;
|
||||
getHeight?: (rowSpan: number) => number;
|
||||
}
|
||||
declare const ResponseBodyLine: React.ForwardRefExoticComponent<BodyLineProps<any> & React.RefAttributes<HTMLDivElement>>;
|
||||
export default ResponseBodyLine;
|
||||
+128
@@ -0,0 +1,128 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
var _context = require("@rc-component/context");
|
||||
var _clsx = require("clsx");
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
var _Cell = _interopRequireDefault(require("../Cell"));
|
||||
var _TableContext = _interopRequireWildcard(require("../context/TableContext"));
|
||||
var _useRowInfo = _interopRequireDefault(require("../hooks/useRowInfo"));
|
||||
var _VirtualCell = _interopRequireDefault(require("./VirtualCell"));
|
||||
var _context2 = require("./context");
|
||||
var _expandUtil = require("../utils/expandUtil");
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
||||
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
||||
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
||||
const BodyLine = /*#__PURE__*/React.forwardRef((props, ref) => {
|
||||
const {
|
||||
data,
|
||||
index,
|
||||
className,
|
||||
rowKey,
|
||||
style,
|
||||
extra,
|
||||
getHeight,
|
||||
...restProps
|
||||
} = props;
|
||||
const {
|
||||
record,
|
||||
indent,
|
||||
index: renderIndex
|
||||
} = data;
|
||||
const {
|
||||
scrollX,
|
||||
flattenColumns,
|
||||
prefixCls,
|
||||
fixColumn,
|
||||
componentWidth
|
||||
} = (0, _context.useContext)(_TableContext.default, ['prefixCls', 'flattenColumns', 'fixColumn', 'componentWidth', 'scrollX']);
|
||||
const {
|
||||
getComponent
|
||||
} = (0, _context.useContext)(_context2.StaticContext, ['getComponent']);
|
||||
const rowInfo = (0, _useRowInfo.default)(record, rowKey, index, indent);
|
||||
const RowComponent = getComponent(['body', 'row'], 'div');
|
||||
const cellComponent = getComponent(['body', 'cell'], 'div');
|
||||
|
||||
// ========================== Expand ==========================
|
||||
const {
|
||||
rowSupportExpand,
|
||||
expanded,
|
||||
rowProps,
|
||||
expandedRowRender,
|
||||
expandedRowClassName
|
||||
} = rowInfo;
|
||||
let expandRowNode;
|
||||
if (rowSupportExpand && expanded) {
|
||||
const expandContent = expandedRowRender(record, index, indent + 1, expanded);
|
||||
const expandedClsName = (0, _expandUtil.computedExpandedClassName)(expandedRowClassName, record, index, indent);
|
||||
let additionalProps = {};
|
||||
if (fixColumn) {
|
||||
additionalProps = {
|
||||
style: {
|
||||
['--virtual-width']: `${componentWidth}px`
|
||||
}
|
||||
};
|
||||
}
|
||||
const rowCellCls = `${prefixCls}-expanded-row-cell`;
|
||||
expandRowNode = /*#__PURE__*/React.createElement(RowComponent, {
|
||||
className: (0, _clsx.clsx)(`${prefixCls}-expanded-row`, `${prefixCls}-expanded-row-level-${indent + 1}`, expandedClsName)
|
||||
}, /*#__PURE__*/React.createElement(_Cell.default, {
|
||||
component: cellComponent,
|
||||
prefixCls: prefixCls,
|
||||
className: (0, _clsx.clsx)(rowCellCls, {
|
||||
[`${rowCellCls}-fixed`]: fixColumn
|
||||
}),
|
||||
additionalProps: additionalProps
|
||||
}, expandContent));
|
||||
}
|
||||
|
||||
// ========================== Render ==========================
|
||||
const rowStyle = {
|
||||
...style,
|
||||
width: scrollX
|
||||
};
|
||||
if (extra) {
|
||||
rowStyle.position = 'absolute';
|
||||
rowStyle.pointerEvents = 'none';
|
||||
}
|
||||
const rowNode = /*#__PURE__*/React.createElement(RowComponent, _extends({}, rowProps, restProps, {
|
||||
"data-row-key": rowKey,
|
||||
ref: rowSupportExpand ? null : ref,
|
||||
className: (0, _clsx.clsx)(className, `${prefixCls}-row`, rowProps?.className, {
|
||||
[`${prefixCls}-row-extra`]: extra
|
||||
}),
|
||||
style: {
|
||||
...rowStyle,
|
||||
...rowProps?.style
|
||||
}
|
||||
}), flattenColumns.map((column, colIndex) => {
|
||||
return /*#__PURE__*/React.createElement(_VirtualCell.default, {
|
||||
key: colIndex,
|
||||
component: cellComponent,
|
||||
rowInfo: rowInfo,
|
||||
column: column,
|
||||
colIndex: colIndex,
|
||||
indent: indent,
|
||||
index: index,
|
||||
renderIndex: renderIndex,
|
||||
record: record,
|
||||
inverse: extra,
|
||||
getHeight: getHeight
|
||||
});
|
||||
}));
|
||||
if (rowSupportExpand) {
|
||||
return /*#__PURE__*/React.createElement("div", {
|
||||
ref: ref
|
||||
}, rowNode, expandRowNode);
|
||||
}
|
||||
return rowNode;
|
||||
});
|
||||
const ResponseBodyLine = (0, _TableContext.responseImmutable)(BodyLine);
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
ResponseBodyLine.displayName = 'BodyLine';
|
||||
}
|
||||
var _default = exports.default = ResponseBodyLine;
|
||||
Generated
Vendored
+26
@@ -0,0 +1,26 @@
|
||||
import * as React from 'react';
|
||||
import type useRowInfo from '../hooks/useRowInfo';
|
||||
import type { ColumnType, CustomizeComponent } from '../interface';
|
||||
export interface VirtualCellProps<RecordType> {
|
||||
rowInfo: ReturnType<typeof useRowInfo<RecordType>>;
|
||||
column: ColumnType<RecordType>;
|
||||
colIndex: number;
|
||||
indent: number;
|
||||
index: number;
|
||||
component?: CustomizeComponent;
|
||||
/** Used for `column.render` */
|
||||
renderIndex: number;
|
||||
record: RecordType;
|
||||
style?: React.CSSProperties;
|
||||
className?: string;
|
||||
/** Render cell only when it has `rowSpan > 1` */
|
||||
inverse?: boolean;
|
||||
getHeight?: (rowSpan: number) => number;
|
||||
}
|
||||
/**
|
||||
* Return the width of the column by `colSpan`.
|
||||
* When `colSpan` is `0` will be trade as `1`.
|
||||
*/
|
||||
export declare function getColumnWidth(colIndex: number, colSpan: number, columnsOffset: number[]): number;
|
||||
declare const VirtualCell: <RecordType>(props: VirtualCellProps<RecordType>) => React.JSX.Element;
|
||||
export default VirtualCell;
|
||||
+130
@@ -0,0 +1,130 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
exports.getColumnWidth = getColumnWidth;
|
||||
var _context = require("@rc-component/context");
|
||||
var _clsx = require("clsx");
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
var _BodyRow = require("../Body/BodyRow");
|
||||
var _Cell = _interopRequireDefault(require("../Cell"));
|
||||
var _context2 = require("./context");
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
||||
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
||||
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
||||
/**
|
||||
* Return the width of the column by `colSpan`.
|
||||
* When `colSpan` is `0` will be trade as `1`.
|
||||
*/
|
||||
function getColumnWidth(colIndex, colSpan, columnsOffset) {
|
||||
const mergedColSpan = colSpan || 1;
|
||||
return columnsOffset[colIndex + mergedColSpan] - (columnsOffset[colIndex] || 0);
|
||||
}
|
||||
const VirtualCell = props => {
|
||||
const {
|
||||
rowInfo,
|
||||
column,
|
||||
colIndex,
|
||||
indent,
|
||||
index,
|
||||
component,
|
||||
renderIndex,
|
||||
record,
|
||||
style,
|
||||
className,
|
||||
inverse,
|
||||
getHeight
|
||||
} = props;
|
||||
const {
|
||||
render,
|
||||
dataIndex,
|
||||
className: columnClassName,
|
||||
width: colWidth
|
||||
} = column;
|
||||
const {
|
||||
columnsOffset
|
||||
} = (0, _context.useContext)(_context2.GridContext, ['columnsOffset']);
|
||||
|
||||
// TODO: support `expandableRowOffset`
|
||||
const {
|
||||
key,
|
||||
fixedInfo,
|
||||
appendCellNode,
|
||||
additionalCellProps
|
||||
} = (0, _BodyRow.getCellProps)(rowInfo, column, colIndex, indent, index);
|
||||
const {
|
||||
style: cellStyle,
|
||||
colSpan = 1,
|
||||
rowSpan = 1
|
||||
} = additionalCellProps;
|
||||
|
||||
// ========================= ColWidth =========================
|
||||
// column width
|
||||
const startColIndex = colIndex - 1;
|
||||
const concatColWidth = getColumnWidth(startColIndex, colSpan, columnsOffset);
|
||||
|
||||
// margin offset
|
||||
const marginOffset = colSpan > 1 ? colWidth - concatColWidth : 0;
|
||||
|
||||
// ========================== Style ===========================
|
||||
const mergedStyle = {
|
||||
...cellStyle,
|
||||
...style,
|
||||
flex: `0 0 ${concatColWidth}px`,
|
||||
width: `${concatColWidth}px`,
|
||||
marginRight: marginOffset,
|
||||
pointerEvents: 'auto'
|
||||
};
|
||||
|
||||
// When `colSpan` or `rowSpan` is `0`, should skip render.
|
||||
const needHide = React.useMemo(() => {
|
||||
if (inverse) {
|
||||
return rowSpan <= 1;
|
||||
} else {
|
||||
return colSpan === 0 || rowSpan === 0 || rowSpan > 1;
|
||||
}
|
||||
}, [rowSpan, colSpan, inverse]);
|
||||
|
||||
// 0 rowSpan or colSpan should not render
|
||||
if (needHide) {
|
||||
mergedStyle.visibility = 'hidden';
|
||||
} else if (inverse) {
|
||||
mergedStyle.height = getHeight?.(rowSpan);
|
||||
}
|
||||
const mergedRender = needHide ? () => null : render;
|
||||
|
||||
// ========================== Render ==========================
|
||||
const cellSpan = {};
|
||||
|
||||
// Virtual should reset `colSpan` & `rowSpan`
|
||||
if (rowSpan === 0 || colSpan === 0) {
|
||||
cellSpan.rowSpan = 1;
|
||||
cellSpan.colSpan = 1;
|
||||
}
|
||||
return /*#__PURE__*/React.createElement(_Cell.default, _extends({
|
||||
className: (0, _clsx.clsx)(columnClassName, className),
|
||||
ellipsis: column.ellipsis,
|
||||
align: column.align,
|
||||
scope: column.rowScope,
|
||||
component: component,
|
||||
prefixCls: rowInfo.prefixCls,
|
||||
key: key,
|
||||
record: record,
|
||||
index: index,
|
||||
renderIndex: renderIndex,
|
||||
dataIndex: dataIndex,
|
||||
render: mergedRender,
|
||||
shouldCellUpdate: column.shouldCellUpdate
|
||||
}, fixedInfo, {
|
||||
appendNode: appendCellNode,
|
||||
additionalProps: {
|
||||
...additionalCellProps,
|
||||
style: mergedStyle,
|
||||
...cellSpan
|
||||
}
|
||||
}));
|
||||
};
|
||||
var _default = exports.default = VirtualCell;
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
/// <reference types="react" />
|
||||
import type { GetComponent, TableSticky } from '../interface';
|
||||
export interface StaticContextProps {
|
||||
scrollY: number;
|
||||
listItemHeight: number;
|
||||
sticky: boolean | TableSticky;
|
||||
getComponent: GetComponent;
|
||||
onScroll?: React.UIEventHandler<HTMLDivElement>;
|
||||
}
|
||||
export declare const StaticContext: import("@rc-component/context").SelectorContext<StaticContextProps>;
|
||||
export interface GridContextProps {
|
||||
columnsOffset: number[];
|
||||
}
|
||||
export declare const GridContext: import("@rc-component/context").SelectorContext<GridContextProps>;
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.StaticContext = exports.GridContext = void 0;
|
||||
var _context = require("@rc-component/context");
|
||||
const StaticContext = exports.StaticContext = (0, _context.createContext)(null);
|
||||
const GridContext = exports.GridContext = (0, _context.createContext)(null);
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
import type { CompareProps } from '@rc-component/context/lib/Immutable';
|
||||
import * as React from 'react';
|
||||
import type { Reference } from '../interface';
|
||||
import { type TableProps } from '../Table';
|
||||
export interface VirtualTableProps<RecordType> extends Omit<TableProps<RecordType>, 'scroll'> {
|
||||
listItemHeight?: number;
|
||||
scroll: {
|
||||
x?: number;
|
||||
y?: number;
|
||||
};
|
||||
}
|
||||
export type ForwardGenericVirtualTable = (<RecordType>(props: TableProps<RecordType> & React.RefAttributes<Reference>) => React.ReactElement<any>) & {
|
||||
displayName?: string;
|
||||
};
|
||||
export declare const genVirtualTable: (shouldTriggerRender?: CompareProps<ForwardGenericVirtualTable>) => ForwardGenericVirtualTable;
|
||||
declare const _default: ForwardGenericVirtualTable;
|
||||
export default _default;
|
||||
+105
@@ -0,0 +1,105 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.genVirtualTable = exports.default = void 0;
|
||||
var _clsx = require("clsx");
|
||||
var _util = require("@rc-component/util");
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
var _constant = require("../constant");
|
||||
var _TableContext = require("../context/TableContext");
|
||||
var _Table = _interopRequireWildcard(require("../Table"));
|
||||
var _BodyGrid = _interopRequireDefault(require("./BodyGrid"));
|
||||
var _context = require("./context");
|
||||
var _get = _interopRequireDefault(require("@rc-component/util/lib/utils/get"));
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
||||
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
||||
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
||||
const renderBody = (rawData, props) => {
|
||||
const {
|
||||
ref,
|
||||
onScroll
|
||||
} = props;
|
||||
return /*#__PURE__*/React.createElement(_BodyGrid.default, {
|
||||
ref: ref,
|
||||
data: rawData,
|
||||
onScroll: onScroll
|
||||
});
|
||||
};
|
||||
const VirtualTable = (props, ref) => {
|
||||
const {
|
||||
data,
|
||||
columns,
|
||||
scroll,
|
||||
sticky,
|
||||
prefixCls = _Table.DEFAULT_PREFIX,
|
||||
className,
|
||||
listItemHeight,
|
||||
components,
|
||||
onScroll
|
||||
} = props;
|
||||
let {
|
||||
x: scrollX,
|
||||
y: scrollY
|
||||
} = scroll || {};
|
||||
|
||||
// Fill scrollX
|
||||
if (typeof scrollX !== 'number') {
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
(0, _util.warning)(!scrollX, '`scroll.x` in virtual table must be number.');
|
||||
}
|
||||
scrollX = 1;
|
||||
}
|
||||
|
||||
// Fill scrollY
|
||||
if (typeof scrollY !== 'number') {
|
||||
scrollY = 500;
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
(0, _util.warning)(false, '`scroll.y` in virtual table must be number.');
|
||||
}
|
||||
}
|
||||
const getComponent = (0, _util.useEvent)((path, defaultComponent) => (0, _get.default)(components, path) || defaultComponent);
|
||||
|
||||
// Memo this
|
||||
const onInternalScroll = (0, _util.useEvent)(onScroll);
|
||||
|
||||
// ========================= Context ==========================
|
||||
const context = React.useMemo(() => ({
|
||||
sticky,
|
||||
scrollY,
|
||||
listItemHeight,
|
||||
getComponent,
|
||||
onScroll: onInternalScroll
|
||||
}), [sticky, scrollY, listItemHeight, getComponent, onInternalScroll]);
|
||||
|
||||
// ========================== Render ==========================
|
||||
return /*#__PURE__*/React.createElement(_context.StaticContext.Provider, {
|
||||
value: context
|
||||
}, /*#__PURE__*/React.createElement(_Table.default, _extends({}, props, {
|
||||
className: (0, _clsx.clsx)(className, `${prefixCls}-virtual`),
|
||||
scroll: {
|
||||
...scroll,
|
||||
x: scrollX
|
||||
},
|
||||
components: {
|
||||
...components,
|
||||
// fix https://github.com/ant-design/ant-design/issues/48991
|
||||
body: data?.length ? renderBody : undefined
|
||||
},
|
||||
columns: columns,
|
||||
internalHooks: _constant.INTERNAL_HOOKS,
|
||||
tailor: true,
|
||||
ref: ref
|
||||
})));
|
||||
};
|
||||
const RefVirtualTable = /*#__PURE__*/React.forwardRef(VirtualTable);
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
RefVirtualTable.displayName = 'VirtualTable';
|
||||
}
|
||||
const genVirtualTable = shouldTriggerRender => {
|
||||
return (0, _TableContext.makeImmutable)(RefVirtualTable, shouldTriggerRender);
|
||||
};
|
||||
exports.genVirtualTable = genVirtualTable;
|
||||
var _default = exports.default = genVirtualTable();
|
||||
Reference in New Issue
Block a user