Support element rows

master
Vitaliy Filippov 2019-02-08 19:45:21 +03:00
parent 67297ccdce
commit 5880fa26ea
1 changed files with 81 additions and 59 deletions

View File

@ -37,7 +37,8 @@ export class FixedHeaderGridTable extends React.PureComponent
{
static propTypes = {
theme: PropTypes.object,
rows: PropTypes.arrayOf(PropTypes.array).isRequired,
rows: PropTypes.array.isRequired,
columnWidths: PropTypes.arrayOf(PropTypes.string),
isResizable: PropTypes.arrayOf(PropTypes.bool),
noWrapDefault: PropTypes.bool,
hasRowHover: PropTypes.bool,
@ -295,26 +296,22 @@ export class FixedHeaderGridTable extends React.PureComponent
this.rootNode = e;
}
render()
decorateCells(row, decorateProps)
{
const css = this.props.theme || default_css;
let rows = this.props.rows;
let cells = [];
let i = 0;
for (let row of rows)
{
let j = 0;
for (let cell of row)
{
if (cell == null)
{
// skip null or undefined cells
// Skip null or undefined cells
continue;
}
const isDiv = React.isValidElement(cell) && cell.type == 'div';
const className = ' ' + css.cell + ' ' +
(i == 0 ? ' '+css.first_row : '') +
(i == rows.length-1 ? ' '+css.last_row : '') +
(decorateProps.rowIndex == 0 ? ' '+css.first_row : '') +
(decorateProps.rowIndex == decorateProps.rowCount-1 ? ' '+css.last_row : '') +
(j == 0 && (!isDiv || !cell.props.style ||
!cell.props.style.gridColumn && !cell.props.style.gridColumnStart ||
cell.props.style.gridColumn == 1 || cell.props.style.gridColumnStart == 1) ? ' '+css.first_col : '') +
@ -322,7 +319,7 @@ export class FixedHeaderGridTable extends React.PureComponent
(j & 1 ? ' '+css.even : '');
if (!isDiv)
{
cell = (<div className={className} row={i} col={j} key={i+'-'+j}>
cell = (<div className={className} row={decorateProps.rowIndex} col={j} key={decorateProps.rowIndex+'-'+j}>
{this.props.noWrapDefault
? <div className={css.ellipsis}>{cell}</div>
: cell}
@ -343,9 +340,9 @@ export class FixedHeaderGridTable extends React.PureComponent
else if (cell.props.sticky_row > 0)
cls = cls + ' ' + css.stick_top;
let props = {
row: i,
row: decorateProps.rowIndex,
col: j,
key: i+'-'+j,
key: decorateProps.rowIndex+'-'+j,
className: cls+className,
};
if (spec.wrap || !this.props.noWrapDefault)
@ -363,6 +360,31 @@ export class FixedHeaderGridTable extends React.PureComponent
cells.push(cell);
j++;
}
return cells;
}
render()
{
const css = this.props.theme || default_css;
let rows = this.props.rows;
let cells = [];
let i = 0;
for (let row of rows)
{
const rowProps = { rowIndex: i, rowCount: rows.length };
if (React.isValidElement(row))
{
// Allow element rows
// In fact, this should be the default use-case
rowProps.decorateCells = (cells) => this.decorateCells(cells, rowProps);
cells.push(React.cloneElement(row, rowProps));
}
else
{
// In other case just process cells in-place
// BUT this is slow, because such cells are reconciled on each render
cells.push.apply(cells, this.decorateCells(row, rowProps));
}
i++;
}
if (this.props.hasMultiSticky)