Skip to content

Commit 61e45b0

Browse files
cromatikapcromatikap
committed
split any remaining legacy stuff in separate row and column + put back the original cellHeight value
1 parent 76a803a commit 61e45b0

File tree

10 files changed

+47
-32
lines changed

10 files changed

+47
-32
lines changed

‎cypress/e2e/common/utils.ts

+8-4
Original file line numberDiff line numberDiff line change
@@ -672,8 +672,12 @@ export class Utilities {
672672
return cy.get(".rg-shadow");
673673
}
674674

675-
resizeHint() {
676-
return cy.get(".rg-column-resize-hint");
675+
resizeHintColumn() {
676+
return cy.get(`.rg-column-resize-hint`);
677+
}
678+
679+
resizeHintRow() {
680+
return cy.get(`.rg-row-resize-hint`);
677681
}
678682

679683
getRightStickyPane() {
@@ -850,7 +854,7 @@ export class Utilities {
850854
});
851855
}
852856
this.getLine().should("exist");
853-
this.resizeHint().should("exist");
857+
this.resizeHintColumn().should("exist");
854858
beforePointerUp();
855859
body.trigger("pointerup", {
856860
clientX: endingPoint + offsetLeft,
@@ -902,7 +906,7 @@ export class Utilities {
902906
});
903907
}
904908
this.getLine().should("exist");
905-
this.resizeHint().should("exist");
909+
this.resizeHintRow().should("exist");
906910
beforePointerUp();
907911
body.trigger("pointerup", {
908912
clientX: startX + offsetLeft,

‎cypress/e2e/tests/columnAndRowSelections/scroll.spec.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,9 @@ context("Scroll", () => {
4343
utils.resizeColumn(config.cellWidth, utils.getCellYCenter(), RESIZE_WIDTH, {
4444
useTouch: true,
4545
beforePointerUp: () => {
46-
utils.resizeHint().should("be.visible");
46+
utils.resizeHintColumn().should("be.visible");
4747
utils
48-
.resizeHint()
48+
.resizeHintColumn()
4949
.and("contain.text", `Width: ${NEW_WIDTH + 5 /* 5px is the resize handle offset */}px`);
5050
},
5151
});

‎cypress/e2e/tests/standard/resize.spec.ts

+16-16
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@ context("Resize", () => {
1616
utils.scrollTo(SCROLL, 0);
1717
utils.resizeColumn(SCROLL + (SCROLL % config.cellWidth), 1, RESIZE_WIDTH, {
1818
beforePointerUp: () => {
19-
utils.resizeHint().should("be.visible");
19+
utils.resizeHintColumn().should("be.visible");
2020
// 🟠 TODO - hint should contain exact value
21-
// utils.resizeHint().and('contain.text', `Width: ${config.cellWidth + RESIZE_WIDTH}px`)
21+
// utils.resizeHintColumn().and('contain.text', `Width: ${config.cellWidth + RESIZE_WIDTH}px`)
2222
},
2323
});
2424

@@ -33,9 +33,9 @@ context("Resize", () => {
3333
-RESIZE_WIDTH,
3434
{
3535
beforePointerUp: () => {
36-
utils.resizeHint().should("be.visible");
36+
utils.resizeHintColumn().should("be.visible");
3737
// 🟠 TODO - hint should contain exact value
38-
// utils.resizeHint().and('contain.text', `Width: ${config.cellWidth}px`)
38+
// utils.resizeHintColumn().and('contain.text', `Width: ${config.cellWidth}px`)
3939
},
4040
}
4141
);
@@ -48,9 +48,9 @@ context("Resize", () => {
4848

4949
utils.resizeColumn(config.cellWidth, utils.getCellYCenter(), RESIZE_WIDTH, {
5050
beforePointerUp: () => {
51-
utils.resizeHint().should("be.visible");
51+
utils.resizeHintColumn().should("be.visible");
5252
utils
53-
.resizeHint()
53+
.resizeHintColumn()
5454
.and("contain.text", `Width: ${config.minCellWidth}px`);
5555
},
5656
});
@@ -74,9 +74,9 @@ context("Resize", () => {
7474
{
7575
// 17 px - scroll width
7676
beforePointerUp: () => {
77-
utils.resizeHint().should("be.visible");
77+
utils.resizeHintColumn().should("be.visible");
7878
utils
79-
.resizeHint()
79+
.resizeHintColumn()
8080
.and("contain.text", `Width: ${config.minCellWidth}px`);
8181
},
8282
}
@@ -105,7 +105,7 @@ context("Resize", () => {
105105
// 17 px - scroll width
106106
beforePointerUp: () => {
107107
// 🟠 TODO - hint should contain exact value
108-
utils.resizeHint().and('contain.text', `Width: ${config.cellWidth + RESIZE_WIDTH + 3}px`)
108+
utils.resizeHintColumn().and('contain.text', `Width: ${config.cellWidth + RESIZE_WIDTH + 3}px`)
109109
},
110110
}
111111
);
@@ -118,29 +118,29 @@ context("Resize", () => {
118118

119119
it("Should increase and reduce row height on scrolled view with content in vertical axis", () => { // ✅
120120
const RESIZE_HEIGHT = 100;
121-
const SCROLL = 60;
121+
const SCROLL = 15;
122122

123123
utils.scrollTo(0, SCROLL);
124124
utils.resizeRow(1, SCROLL + (SCROLL % config.cellHeight), RESIZE_HEIGHT, {
125125
beforePointerUp: () => {
126-
utils.resizeHint().should("be.visible");
127-
utils.resizeHint().and('contain.text', `Height: ${config.cellHeight + RESIZE_HEIGHT}px`)
126+
utils.resizeHintRow().should("be.visible");
127+
utils.resizeHintRow().and('contain.text', `Height: ${config.cellHeight + RESIZE_HEIGHT+1}px`)
128128
},
129129
});
130130

131131
utils.assertElementHeightIsEqual(
132-
utils.getCell(0, 2),
132+
utils.getCell(0, 0),
133133
config.cellHeight + RESIZE_HEIGHT
134134
);
135135

136136
utils.resizeRow(1, SCROLL + RESIZE_HEIGHT + (SCROLL % config.cellHeight), -RESIZE_HEIGHT, {
137137
beforePointerUp: () => {
138-
utils.resizeHint().should("be.visible");
139-
utils.resizeHint().and('contain.text', `Height: ${config.cellHeight+3}px`)
138+
utils.resizeHintRow().should("be.visible");
139+
utils.resizeHintRow().and('contain.text', `Height: ${config.cellHeight+3}px`)
140140
},
141141
});
142142

143-
utils.assertElementHeightIsEqual(utils.getCell(0, 2), config.cellHeight);
143+
utils.assertElementHeightIsEqual(utils.getCell(0, 0), config.cellHeight);
144144

145145
});
146146

‎src/lib/Behaviors/DefaultBehavior.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export class DefaultBehavior extends Behavior {
5656
((event.pointerType === "mouse" &&
5757
target.className === "rg-resize-handle") ||
5858
(event.pointerType === "touch" &&
59-
(target.className === "rg-touch-resize-handle" ||
59+
(target.className === "rg-touch-column-resize-handle" ||
6060
target.className === "rg-resize-handle"))) &&
6161
location.row.idx === 0 &&
6262
location.column.resizable &&
@@ -72,7 +72,7 @@ export class DefaultBehavior extends Behavior {
7272
((event.pointerType === "mouse" &&
7373
target.className === "rg-resize-handle") ||
7474
(event.pointerType === "touch" &&
75-
(target.className === "rg-touch-resize-handle-vertical" ||
75+
(target.className === "rg-touch-row-resize-handle" ||
7676
target.className === "rg-resize-handle"))) &&
7777
location.column.idx === 0 &&
7878
location.row.resizable &&

‎src/lib/Components/ResizeHandle.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@ import * as React from 'react';
22

33
export const ResizeColumnHandle: React.FC = () => {
44
return (
5-
<div className="rg-touch-resize-handle" data-cy="rg-touch-resize-handle">
5+
<div className="rg-touch-column-resize-handle" data-cy="rg-touch-column-resize-handle">
66
<div className="rg-resize-handle" data-cy="rg-resize-handle" />
77
</div>
88
);
99
};
1010

1111
export const ResizeRowHandle: React.FC = () => {
1212
return (
13-
<div className="rg-touch-resize-handle-vertical" data-cy="rg-touch-resize-handle-vertical">
13+
<div className="rg-touch-row-resize-handle" data-cy="rg-touch-row-resize-handle">
1414
<div className="rg-resize-handle" data-cy="rg-resize-handle" />
1515
</div>
1616
);

‎src/lib/Components/ResizeHint.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export const ResizeVerticalHint: React.FC<VerticalHintProps> = ({ top, linePosit
3535
<>
3636
{linePosition !== -1 &&
3737
<div
38-
className={`rg-column-resize-hint`}
38+
className={`rg-row-resize-hint`}
3939
style={{
4040
top: linePosition - offset,
4141
}}

‎src/lib/Model/CellMatrixBuilder.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,11 @@ export class CellMatrixBuilder implements ICellMatrixBuilder {
5959
this.cellMatrix.rows = this.cellMatrix.props.rows.reduce<GridRow[]>(
6060
(rows, row, idx) => {
6161
const top = this.getTop(idx, topStickyRows, bottomStickyRows, rows);
62-
const height = row.height || CellMatrix.DEFAULT_ROW_HEIGHT;
62+
const height = row.height
63+
? row.height < (this.cellMatrix.props?.minRowHeight ?? CellMatrix.MIN_ROW_HEIGHT)
64+
? (this.cellMatrix.props?.minRowHeight ?? CellMatrix.MIN_ROW_HEIGHT)
65+
: row.height
66+
: CellMatrix.DEFAULT_ROW_HEIGHT;
6367
rows.push({
6468
...row,
6569
top,

‎src/lib/Model/PublicModel.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ export interface ReactGridProps {
104104
readonly minColumnWidth?: number;
105105

106106
/**
107-
* Minimum column width (by default `25`), in pixels
107+
* Minimum row height (by default `25`), in pixels
108108
* Used to limit the height row can be resized down to.
109109
*/
110110
readonly minRowHeight?: number;

‎src/main.scss

+9-2
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
border-color: $cell-border-color;
5858
color: $cell-text-color;
5959

60-
.rg-touch-resize-handle {
60+
.rg-touch-column-resize-handle {
6161
position: absolute;
6262
top: 0;
6363
right: 0;
@@ -78,7 +78,7 @@
7878
}
7979
}
8080

81-
.rg-touch-resize-handle-vertical {
81+
.rg-touch-row-resize-handle {
8282
position: absolute;
8383
bottom: 0;
8484
left: 0;
@@ -237,6 +237,13 @@
237237
border-radius: 0 5px 5px 0;
238238
}
239239

240+
.rg-row-resize-hint {
241+
background-color: $resize-hint-bg-color;
242+
position: absolute;
243+
padding: 5px;
244+
border-radius: 0 5px 5px 0;
245+
}
246+
240247
.rg-line {
241248
position: absolute;
242249
background-color: $resize-line-color;

‎src/test/testEnvConfig.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const config: TestConfig = {
1919
disableVirtualScrolling: false,
2020
moveRightOnEnter: true,
2121

22-
cellHeight: 40,
22+
cellHeight: 25,
2323
cellWidth: 150,
2424
minCellWidth: 40,
2525
minCellHeight: 25,

0 commit comments

Comments
 (0)