Skip to content

Commit 3bf5f18

Browse files
jassmithivoelbert
jassmith
and
ivoelbert
authored
3.3.0 (#176)
* 3.3.0-alpha1 * Fix onCellClick firing weirdly * Also fix click issues for header and groupheader * Allow for unstyled custom editors (#153) * Allow for unstyled custom editors * Less conflicty class names * Oops * Add tests for onCellClick with mouseDown !== mouseUp * 3.3.0-beta1 * Fix export in index.js * Fix issue where fonts may not always reset, fixes #157 * Prep for 3.3.0 stable Co-authored-by: ivoelbert <[email protected]>
1 parent 974defa commit 3bf5f18

File tree

11 files changed

+96
-29
lines changed

11 files changed

+96
-29
lines changed

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "root",
3-
"version": "3.2.1",
3+
"version": "3.3.0",
44
"scripts": {
55
"bootstrap": "./bootstrap.sh",
66
"build": "./build-all.sh",

‎packages/cells/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@glideapps/glide-data-grid-cells",
3-
"version": "3.2.1",
3+
"version": "3.3.0",
44
"description": "Extra cells for glide-data-grid",
55
"sideEffects": false,
66
"type": "module",
@@ -41,7 +41,7 @@
4141
"canvas"
4242
],
4343
"dependencies": {
44-
"@glideapps/glide-data-grid": "3.2.1"
44+
"@glideapps/glide-data-grid": "3.3.0"
4545
},
4646
"devDependencies": {
4747
"@babel/cli": "^7.16.0",

‎packages/core/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@glideapps/glide-data-grid",
3-
"version": "3.2.1",
3+
"version": "3.3.0",
44
"description": "Super fast, pure canvas Data Grid Editor",
55
"sideEffects": false,
66
"type": "module",

‎packages/core/src/data-editor/data-editor.test.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -293,6 +293,52 @@ describe("data-editor", () => {
293293
expect(spy).toHaveBeenCalledWith([1, 1], expect.anything());
294294
});
295295

296+
test("Doesn't emit cell click if mouseDown happened in a different cell", async () => {
297+
const spy = jest.fn();
298+
299+
jest.useFakeTimers();
300+
render(<DataEditor {...basicProps} onCellClicked={spy} />, {
301+
wrapper: Context,
302+
});
303+
prep();
304+
305+
const canvas = screen.getByTestId("data-grid-canvas");
306+
fireEvent.mouseDown(canvas, {
307+
clientX: 300, // Col B, ends at x = 310
308+
clientY: 36 + 32 + 16, // Row 1 (0 indexed)
309+
});
310+
311+
fireEvent.mouseUp(canvas, {
312+
clientX: 320, // Col C, started at x = 310
313+
clientY: 36 + 32 + 16, // Row 1 (0 indexed)
314+
});
315+
316+
expect(spy).not.toHaveBeenCalled();
317+
});
318+
319+
test("Doesn't emit header click if mouseDown happened in a different cell", async () => {
320+
const spy = jest.fn();
321+
322+
jest.useFakeTimers();
323+
render(<DataEditor {...basicProps} onHeaderClicked={spy} />, {
324+
wrapper: Context,
325+
});
326+
prep();
327+
328+
const canvas = screen.getByTestId("data-grid-canvas");
329+
fireEvent.mouseDown(canvas, {
330+
clientX: 300, // Col B, ends at x = 310
331+
clientY: 16, // Header
332+
});
333+
334+
fireEvent.mouseUp(canvas, {
335+
clientX: 320, // Col C, started at x = 310
336+
clientY: 16, // Header
337+
});
338+
339+
expect(spy).not.toHaveBeenCalled();
340+
});
341+
296342
test("Uneven rows cell click", async () => {
297343
const spy = jest.fn();
298344

‎packages/core/src/data-editor/data-editor.tsx‎

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -610,6 +610,8 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
610610

611611
const lastSelectedRowRef = React.useRef<number>();
612612
const lastSelectedColRef = React.useRef<number>();
613+
614+
const lastMouseDownCellLocation = React.useRef<[number, number]>();
613615
const onMouseDown = React.useCallback(
614616
(args: GridMouseEventArgs) => {
615617
if (args.button !== 0) {
@@ -618,10 +620,16 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
618620
mouseState.current = {
619621
previousSelection: gridSelection,
620622
};
623+
624+
lastMouseDownCellLocation.current = undefined;
625+
621626
const isMultiKey = browserIsOSX.value ? args.metaKey : args.ctrlKey;
627+
const [col, row] = args.location;
622628
if (args.kind === "cell") {
623629
lastSelectedColRef.current = undefined;
624-
const [col, row] = args.location;
630+
631+
lastMouseDownCellLocation.current = [col, row];
632+
625633
if (col === 0 && hasRowMarkers) {
626634
if ((showTrailingBlankRow === true && row === rows) || rowMarkers === "number") return;
627635
setGridSelection(undefined);
@@ -695,7 +703,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
695703
}
696704
}
697705
} else if (args.kind === "header") {
698-
const [col] = args.location;
706+
lastMouseDownCellLocation.current = [col, row];
699707
setGridSelection(undefined);
700708
setOverlay(undefined);
701709
if (hasRowMarkers && col === 0) {
@@ -741,7 +749,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
741749
lastSelectedRowRef.current = undefined;
742750
lastSelectedColRef.current = undefined;
743751
} else if (args.kind === "group-header") {
744-
const [col] = args.location;
752+
lastMouseDownCellLocation.current = [col, row];
745753

746754
if (col < rowMarkerOffset) return;
747755

@@ -817,16 +825,19 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
817825
window.clearInterval(scrollTimer.current);
818826
}
819827

828+
const [lastMouseDownCol, lastMouseDownRow] = lastMouseDownCellLocation.current ?? [];
829+
const [col, row] = args.location;
830+
820831
if (args.kind === "header") {
821-
if (args.button === 0) {
832+
if (args.button === 0 && col === lastMouseDownCol && row === lastMouseDownRow) {
822833
onHeaderClicked?.(args.location[0] - rowMarkerOffset, { ...args, preventDefault });
823834
} else if (args.button === 2) {
824835
onHeaderContextMenu?.(args.location[0] - rowMarkerOffset, { ...args, preventDefault });
825836
}
826837
}
827838

828839
if (args.kind === "group-header") {
829-
if (args.button === 0) {
840+
if (args.button === 0 && col === lastMouseDownCol && row === lastMouseDownRow) {
830841
onGroupHeaderClicked?.(args.location[0] - rowMarkerOffset, { ...args, preventDefault });
831842
} else if (args.button === 2) {
832843
onGroupHeaderContextMenu?.(args.location[0] - rowMarkerOffset, { ...args, preventDefault });
@@ -837,9 +848,13 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
837848
return;
838849
}
839850
if (args.button === 0) {
840-
onCellClicked?.([args.location[0] - rowMarkerOffset, args.location[1]], { ...args, preventDefault });
851+
if (lastMouseDownCol === col && lastMouseDownRow === row) {
852+
onCellClicked?.([col - rowMarkerOffset, row], {
853+
...args,
854+
preventDefault,
855+
});
856+
}
841857
if (gridSelection !== undefined && mouse?.previousSelection?.cell !== undefined && !prevented) {
842-
const [col, row] = args.location;
843858
const [selectedCol, selectedRow] = gridSelection.cell;
844859
const [prevCol, prevRow] = mouse.previousSelection.cell;
845860
const c = getMangedCellContent([col, row]);

‎packages/core/src/data-grid-overlay-editor/data-grid-overlay-editor-style.tsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -24,17 +24,9 @@ export const DataGridOverlayEditorStyle = styled.div<Props>`
2424
max-width: 400px;
2525
max-height: calc(100vh - ${p => p.targetRect.y + 10}px);
2626
27-
border-radius: 2px;
28-
background-color: ${p => p.theme.bgCell};
29-
30-
box-shadow: 0 0 0 1px ${p => p.theme.accentColor}, 0px 0px 1px rgba(62, 65, 86, 0.4),
31-
0px 6px 12px rgba(62, 65, 86, 0.15);
32-
3327
font-family: ${p => p.theme.fontFamily};
3428
font-size: 13px;
3529
36-
${p => p.pad && `padding: ${Math.max(0, (p.targetRect.height - 28) / 2)}px 8.5px 3px;`}
37-
3830
@keyframes glide_fade_in {
3931
from {
4032
opacity: 0%;
@@ -45,7 +37,16 @@ export const DataGridOverlayEditorStyle = styled.div<Props>`
4537
}
4638
}
4739
48-
animation: glide_fade_in 60ms 1;
40+
&.gdg-style {
41+
border-radius: 2px;
42+
background-color: ${p => p.theme.bgCell};
43+
${p => p.pad && `padding: ${Math.max(0, (p.targetRect.height - 28) / 2)}px 8.5px 3px;`}
44+
45+
box-shadow: 0 0 0 1px ${p => p.theme.accentColor}, 0px 0px 1px rgba(62, 65, 86, 0.4),
46+
0px 6px 12px rgba(62, 65, 86, 0.15);
47+
48+
animation: glide_fade_in 60ms 1;
49+
}
4950
5051
.clip-region {
5152
display: flex;

‎packages/core/src/data-grid-overlay-editor/data-grid-overlay-editor.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,9 +77,11 @@ const DataGridOverlayEditor: React.FunctionComponent<DataGridOverlayEditorProps>
7777

7878
let pad = true;
7979
let editor: React.ReactNode;
80+
let style = true;
8081

8182
if (CustomEditor !== undefined) {
8283
pad = CustomEditor.disablePadding !== true;
84+
style = CustomEditor.disableStyling !== true;
8385
editor = (
8486
<CustomEditor
8587
isHighlighted={highlight}
@@ -115,7 +117,11 @@ const DataGridOverlayEditor: React.FunctionComponent<DataGridOverlayEditorProps>
115117
}
116118
const portal = createPortal(
117119
<ClickOutsideContainer className={className} onClickOutside={onClickOutside}>
118-
<DataGridOverlayEditorStyle as={useLabel === true ? "label" : undefined} targetRect={target} pad={pad}>
120+
<DataGridOverlayEditorStyle
121+
className={style ? "gdg-style" : "gdg-unstyle"}
122+
as={useLabel === true ? "label" : undefined}
123+
targetRect={target}
124+
pad={pad}>
119125
<div className="clip-region" onKeyDown={CustomEditor === undefined ? undefined : onKeyDown}>
120126
{editor}
121127
</div>

‎packages/core/src/data-grid/data-grid-render.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -990,12 +990,10 @@ function drawCells(
990990
const hoverValue = hoverValues.find(hv => hv.item[0] === c.sourceIndex && hv.item[1] === row);
991991

992992
if (c.width > 10) {
993-
if (theme !== colTheme) {
994-
const cellFont = `${theme.baseFontStyle} ${theme.fontFamily}`;
995-
if (cellFont !== font) {
996-
ctx.font = cellFont;
997-
font = cellFont;
998-
}
993+
const cellFont = `${theme.baseFontStyle} ${theme.fontFamily}`;
994+
if (cellFont !== font) {
995+
ctx.font = cellFont;
996+
font = cellFont;
999997
}
1000998
const drawResult = drawCell(
1001999
ctx,

‎packages/core/src/data-grid/data-grid-types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -289,6 +289,7 @@ export type ProvideEditorCallback<T extends GridCell> = (
289289
readonly value: T;
290290
}> & {
291291
disablePadding?: boolean;
292+
disableStyling?: boolean;
292293
})
293294
| undefined;
294295

0 commit comments

Comments
 (0)