Skip to content

Commit

Permalink
Merge pull request #1 from lolatravel/merge-cells
Browse files Browse the repository at this point in the history 
Merge cells
  • Loading branch information
@grahamvo
grahamvo authored Jul 6, 2021
2 parents 5925e67 + 553d1dd commit 6bbcb4b
Show file tree
Hide file tree
Showing 12 changed files with 158 additions and 57 deletions.
59 changes: 45 additions & 14 deletions lib/bundle.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,8 +126,7 @@ function SelectCellFormatter({
disabled: disabled,
checked: value,
onChange: handleChange,
onClick: onClick,
onCopy: e => console.log(e)
onClick: onClick
}), /*#__PURE__*/React.createElement("div", {
className: "rdg-checkbox"
}));
Expand Down Expand Up @@ -640,13 +639,15 @@ function getNextSelectedCellPosition({
cellNavigationMode,
columns,
rowsCount,
nextPosition
nextPosition,
row
}) {
const {
idx,
rowIdx
} = nextPosition;

if (cellNavigationMode !== 'NONE') {
const {
idx,
rowIdx
} = nextPosition;
const columnsCount = columns.length;
const isAfterLastColumn = idx === columnsCount;
const isBeforeFirstColumn = idx === -1;
Expand Down Expand Up @@ -686,6 +687,22 @@ function getNextSelectedCellPosition({
}
}

const col = columns[idx];
const nextCell = row[col.key];

if ((nextCell == null ? void 0 : nextCell.span) === 0) {
const newRow = Object.entries(row).find(r => {
var _r$;

return ((_r$ = r[1]) == null ? void 0 : _r$.span) > 1;
});
const newColIdx = columns.findIndex(c => newRow && c.key === newRow[0]);
return {
idx: newColIdx,
rowIdx
};
}

return nextPosition;
}
function canExitGrid({
Expand Down Expand Up @@ -823,6 +840,7 @@ function Cell({
const error = typeof cell === 'object' && cell.error;
const alert = typeof cell === 'object' && cell.alert;
const warning = typeof cell === 'object' && cell.warning;
const span = typeof cell === 'object' && typeof cell.span === 'number' ? cell.span : 1;
const {
frozen
} = column;
Expand All @@ -831,7 +849,7 @@ function Cell({
const {
cellClass
} = column;
className = clsx('rdg-cell', typeof cellClass === 'function' ? cellClass(row) : cellClass, className, disabled ? 'rdg-cell-disabled' : isCopied && 'rdg-cell-copied', alert ? 'rdg-cell-alert' : checkIsDraggedOver(true) && 'rdg-cell-dragged-over', frozenRightAlign && 'rdg-cell-frozen-align-right' + (scrolledToEnd ? " rdg-cell-frozen-align-right-no-shadow" : ""), column.frozen && 'rdg-cell-frozen', column.isLastFrozenColumn && scrollLeft > 0 && 'rdg-cell-frozen-last', isCellSelected && 'rdg-cell-selected', error && 'rdg-cell-error', warning && 'rdg-cell-warning', hasChildren && 'rdg-cell-children', column.alignment === 'right' && 'rdg-cell-align-right');
className = clsx('rdg-cell', typeof cellClass === 'function' ? cellClass(row) : cellClass, className, disabled ? 'rdg-cell-disabled' : isCopied && 'rdg-cell-copied', alert ? 'rdg-cell-alert' : checkIsDraggedOver(true) && 'rdg-cell-dragged-over', frozenRightAlign && 'rdg-cell-frozen-align-right' + (scrolledToEnd ? " rdg-cell-frozen-align-right-no-shadow" : ""), column.frozen && 'rdg-cell-frozen', column.isLastFrozenColumn && scrollLeft > 0 && 'rdg-cell-frozen-last', isCellSelected && 'rdg-cell-selected', error && 'rdg-cell-error', warning && 'rdg-cell-warning', hasChildren && 'rdg-cell-children', !span && 'rdg-cell-span-none', column.alignment === 'right' && 'rdg-cell-align-right');
const [showTooltip, setShowTooltip] = React.useState(false);
const [reference, setReference] = React.useState(null);
const [popper, setPopper] = React.useState(null);
Expand All @@ -852,6 +870,10 @@ function Cell({
return false;
}

if (span > 1) {
return false;
}

if (frozen != null ? frozen : !isDraggedOver) {
return false;
}
Expand Down Expand Up @@ -908,7 +930,7 @@ function Cell({
}

function handleDoubleClick() {
if (!disabled && !frozen && !frozenRightAlign) {
if (!disabled && !frozenRightAlign) {
selectCellWrapper(true);
}
}
Expand Down Expand Up @@ -990,14 +1012,17 @@ function Cell({
role: "gridcell",
"aria-colindex": column.idx + 1,
"aria-selected": isCellSelected,
"aria-colspan": span,
ref: useCombinedRefs(cellRef, ref),
className: className,
style: column.frozenAlignment === 'right' ? {
width: column.width,
left: gridWidth - column.width
} : {
width: column.width,
left: column.left
width: column.width * span,
padding: span ? '0 18px' : 0,
left: column.left,
textAlign: span > 1 ? 'center' : 'right'
},
onMouseDown: handleMouseDown,
onMouseEnter: handleMouseEnter,
Expand All @@ -1016,7 +1041,7 @@ function Cell({
isRowSelected: isRowSelected,
onRowSelectionChange: onRowSelectionChange,
onRowChange: handleRowChange
}), dragHandleProps && !disabled && !frozenRightAlign && !frozen && /*#__PURE__*/React.createElement("div", {
}), dragHandleProps && !disabled && !frozenRightAlign && !frozen && span === 1 && /*#__PURE__*/React.createElement("div", {
className: "rdg-cell-drag-handle",
...dragHandleProps
})), (alert || warning) && showTooltip && /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React.createElement("div", {
Expand Down Expand Up @@ -1061,9 +1086,11 @@ function EditCell({
row,
rowIdx,
editorProps,
cell,
...props
}) {
const [dimensions, setDimensions] = React.useState(null);
const span = typeof cell === 'object' && typeof cell.span === 'number' ? cell.span : 1;
const cellRef = React.useCallback(node => {
if (node !== null) {
const {
Expand Down Expand Up @@ -1110,7 +1137,7 @@ function EditCell({
ref: cellRef,
className: className,
style: {
width: column.width,
width: column.width * span,
left: column.left
},
...props
Expand Down Expand Up @@ -1210,6 +1237,7 @@ function Row({
rowIdx: rowIdx,
column: column,
row: row,
cell: cell,
onKeyDown: selectedCellProps.onKeyDown,
editorProps: selectedCellProps.editorProps
});
Expand Down Expand Up @@ -2037,6 +2065,8 @@ function DataGrid({
}

function navigate(event) {
var _nextPosition;

if (selectedPosition.mode === 'EDIT') {
var _columns$selectedPosi2, _columns$selectedPosi3;

Expand Down Expand Up @@ -2072,7 +2102,8 @@ function DataGrid({
columns,
rowsCount: rows.length,
cellNavigationMode: mode,
nextPosition
nextPosition,
row: rows[(_nextPosition = nextPosition) == null ? void 0 : _nextPosition.rowIdx]
});
selectCell(nextPosition);
}
Expand Down
2 changes: 1 addition & 1 deletion lib/bundle.cjs.map
View file

Large diffs are not rendered by default.

59 changes: 45 additions & 14 deletions lib/bundle.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion lib/bundle.js.map
View file

Large diffs are not rendered by default.

19 changes: 14 additions & 5 deletions src/Cell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ function Cell<R, SR>({
const error = typeof cell === 'object' && cell.error;
const alert = typeof cell === 'object' && cell.alert;
const warning = typeof cell === 'object' && cell.warning;
const span = typeof cell === 'object' && typeof cell.span === 'number' ? cell.span : 1;
const { frozen } = column;
const frozenRightAlign = column.frozenAlignment && column.frozenAlignment === 'right';
const hasChildren = row.children && row.children.length > 0;
Expand All @@ -62,7 +63,8 @@ function Cell<R, SR>({
'rdg-cell-error': error,
'rdg-cell-alert': alert,
'rdg-cell-warning': warning,
'rdg-cell-children': hasChildren
'rdg-cell-children': hasChildren,
'rdg-cell-span-none': !span
},
typeof cellClass === 'function' ? cellClass(row) : cellClass,
className
Expand All @@ -80,6 +82,10 @@ function Cell<R, SR>({
return false;
}

if (span > 1) {
return false;
}

if (frozen ?? !isDraggedOver) {
return false;
}
Expand Down Expand Up @@ -130,7 +136,7 @@ function Cell<R, SR>({
}

function handleDoubleClick() {
if (!disabled && !frozen && !frozenRightAlign) {
if (!disabled && !frozenRightAlign) {
selectCellWrapper(true);
}
}
Expand Down Expand Up @@ -216,11 +222,14 @@ function Cell<R, SR>({
role="gridcell"
aria-colindex={column.idx + 1} // aria-colindex is 1-based
aria-selected={isCellSelected}
aria-colspan={span}
ref={useCombinedRefs(cellRef, ref)}
className={className}
style={column.frozenAlignment === 'right' ? { width: column.width, left: gridWidth - column.width } : {
width: column.width,
left: column.left
width: column.width * span,
padding: span ? '0 18px' : 0,
left: column.left,
textAlign: span > 1 ? 'center' : 'right'
}}
onMouseDown={handleMouseDown}
onMouseEnter={handleMouseEnter}
Expand Down Expand Up @@ -250,7 +259,7 @@ function Cell<R, SR>({
onRowSelectionChange={onRowSelectionChange}
onRowChange={handleRowChange}
/>
{dragHandleProps && !disabled && !frozenRightAlign && !frozen && (
{dragHandleProps && !disabled && !frozenRightAlign && !frozen && span === 1 && (
<div className="rdg-cell-drag-handle" {...dragHandleProps} />
)}
</>
Expand Down
Loading

0 comments on commit 6bbcb4b

Please sign in to comment.