Skip to content

Commit 91b2843

Browse files
jassmithivoelbertlukasmasuchBrianHung
authored
* 4.0.4-alpha1 * Greatly expand support for styling the trailing row * Support indeterminate and empty states for boolean cell (glideapps#310) * Fix issue with missing cjs dist in beta release CI (glideapps#307) Related to glideapps#299 * Support indeterminate and empty states for boolean cell * Just forward the focus call to DataGrid * Fix copy data for boolean cells * Fix test for React 18 * Fix type error in story * New empty behavior * Don't even render false state if empty && cant edit * Update lying comment * Remove unnecessary check * Add early return * Improve types Co-authored-by: Lukas Masuch <[email protected]> Co-authored-by: Jason Smith <[email protected]> * Deprecate showUnchecked * Better newline handling for editors * Minor correctness improvements * Fixup clipboard handling so the data grid can differentiate display values and real values (glideapps#329) * Fixup clipboard handling so the data grid can differentiate display values and real values * Fix build * Include custom cells in search * support removing a slice in CompactSelection.remove (glideapps#325) * support removing a slice in CompactSelection.remove * fix intersection condition + add unit tests * fix invalid items + add tests checking for lengths * fix missing semicolons + new lines * Fix tests * Cleanup test warnings * Minor cleanup * Fix ideal height not counting trailing row (glideapps#330) * Allow experimentally setting the scrollbar width override * maintain-focus-when-cell-outside-viewport (glideapps#326) * Fix compile errors * Allow custom editors to cancel editing * Allow typing - to start editing a number and be more permissive in general * 4.0.4-beta1 * Fix dragging grid interaction * 4.0.4-beta2 * Hide vertical and horizontal border on edges (glideapps#332) * Add support for text alignment in theme (glideapps#331) * Add support for text alignment * Add content align cell property * Add story for content alignment * Use cell from draw args * remove any * paste improvements (glideapps#334) * Improve paste API * Add mass edit callback * Fix tests * Update docs * Add content align to additional cells (glideapps#335) * Cleanup paste * 4.0.4-beta3 * Enable easy paste handling for custom cells (glideapps#345) * Add API for paste coercion * Fix build * Reduce shape changes in render hot path * Remove breaking change * Add middle center bias algorithm (glideapps#342) * Add middle center bias algorithm * Use more places and reduce perf overhead * Fix readme * Support middle center bias on all of our custom cells * Apply middle center bias to headers * Implement simple animation support and add auto-throttle to half framerate after 600 frames of animation. * Fix build * 4.1.0-beta1 * Optimize middle center bias cache hit * This time really commit the code * Improve API docs slightly * Prep for stable Co-authored-by: Ivo Elbert <[email protected]> Co-authored-by: Lukas Masuch <[email protected]> Co-authored-by: Brian Hung <[email protected]>
1 parent dd70332 commit 91b2843

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+1522
-623
lines changed

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,12 +73,14 @@ function getData([col, row]: Item): GridCell {
7373
kind: GridCellKind.Text,
7474
data: person.firstName,
7575
allowOverlay: false,
76+
displayData: person.firstName
7677
};
7778
} else if (col === 1) {
7879
return {
7980
kind: GridCellKind.Text,
8081
data: person.lastName,
8182
allowOverlay: false,
83+
displayData: person.lastName
8284
};
8385
} else {
8486
throw new Error();

‎bootstrap.sh

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ npm install
77

88
function update {
99
echo $1 $2
10-
jq "$1" $2 > $2.tmp
10+
jq --indent 4 "$1" $2 > $2.tmp
1111
mv $2.tmp $2
1212
}
1313

‎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": "4.0.3",
3+
"version": "4.1.0",
44
"scripts": {
55
"start": "npm run storybook",
66
"bootstrap": "./bootstrap.sh",

‎packages/cells/package.json

Lines changed: 59 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,61 @@
11
{
2-
"name": "@glideapps/glide-data-grid-cells",
3-
"version": "4.0.3",
4-
"description": "Extra cells for glide-data-grid",
5-
"sideEffects": false,
6-
"type": "module",
7-
"browser": "dist/js/index.js",
8-
"main": "dist/cjs/index.js",
9-
"module": "dist/js/index.js",
10-
"types": "dist/ts/index.d.ts",
11-
"exports": {
12-
"import": "./dist/js/index.js",
13-
"require": "./dist/cjs/index.js"
14-
},
15-
"files": [
16-
"dist"
17-
],
18-
"scripts": {
19-
"build": "npm run build-js && npm run build-cjs && npm run build-types",
20-
"build-js": "babel --config-file ../../babel.config.json ./src -d dist/js --ignore '**/*.stories.tsx','src/stories/*.tsx' --extensions .ts,.tsx && tsc-esm-fix --target='dist/js'",
21-
"build-cjs": "babel --config-file ../../babel.cjs.json ./src -d dist/cjs --ignore '**/*.stories.tsx','src/stories/*.tsx' --extensions .ts,.tsx",
22-
"build-types": "tsc -p tsconfig.types.json",
23-
"lint": "eslint src --ext .ts,.tsx"
24-
},
25-
"repository": {
26-
"type": "git",
27-
"url": "git+https://github.com/glideapps/glide-data-grid.git",
28-
"directory": "packages/cells"
29-
},
30-
"homepage": "https://github.com/glideapps/glide-data-grid/tree/main/cells",
31-
"author": "Glide",
32-
"license": "MIT",
33-
"keywords": [
34-
"react",
35-
"datagrid",
36-
"data-grid",
37-
"editor",
38-
"reactjs",
39-
"scrolling",
40-
"data",
41-
"table",
42-
"cell",
43-
"canvas"
44-
],
45-
"dependencies": {
46-
"@glideapps/glide-data-grid": "4.0.3",
47-
"@toast-ui/editor": "^3.1.3",
48-
"@toast-ui/react-editor": "^3.1.3",
49-
"react-select": "^5.2.2"
50-
},
51-
"devDependencies": {
52-
"@babel/cli": "^7.16.0",
53-
"@types/prosemirror-commands": "^1.0.4",
54-
"@types/react": "16.14.21",
55-
"eslint": "^7.12.1",
56-
"eslint-plugin-import": "^2.22.0",
57-
"eslint-plugin-react": "^7.21.5",
58-
"eslint-plugin-react-hooks": "^4.2.0",
59-
"tsc-esm-fix": "^2.7.8"
60-
}
2+
"name": "@glideapps/glide-data-grid-cells",
3+
"version": "4.1.0",
4+
"description": "Extra cells for glide-data-grid",
5+
"sideEffects": false,
6+
"type": "module",
7+
"browser": "dist/js/index.js",
8+
"main": "dist/cjs/index.js",
9+
"module": "dist/js/index.js",
10+
"types": "dist/ts/index.d.ts",
11+
"exports": {
12+
"import": "./dist/js/index.js",
13+
"require": "./dist/cjs/index.js"
14+
},
15+
"files": [
16+
"dist"
17+
],
18+
"scripts": {
19+
"build": "npm run build-js && npm run build-cjs && npm run build-types",
20+
"build-js": "babel --config-file ../../babel.config.json ./src -d dist/js --ignore '**/*.stories.tsx','src/stories/*.tsx' --extensions .ts,.tsx && tsc-esm-fix --target='dist/js'",
21+
"build-cjs": "babel --config-file ../../babel.cjs.json ./src -d dist/cjs --ignore '**/*.stories.tsx','src/stories/*.tsx' --extensions .ts,.tsx",
22+
"build-types": "tsc -p tsconfig.types.json",
23+
"lint": "eslint src --ext .ts,.tsx"
24+
},
25+
"repository": {
26+
"type": "git",
27+
"url": "git+https://github.com/glideapps/glide-data-grid.git",
28+
"directory": "packages/cells"
29+
},
30+
"homepage": "https://github.com/glideapps/glide-data-grid/tree/main/cells",
31+
"author": "Glide",
32+
"license": "MIT",
33+
"keywords": [
34+
"react",
35+
"datagrid",
36+
"data-grid",
37+
"editor",
38+
"reactjs",
39+
"scrolling",
40+
"data",
41+
"table",
42+
"cell",
43+
"canvas"
44+
],
45+
"dependencies": {
46+
"@glideapps/glide-data-grid": "4.1.0",
47+
"@toast-ui/editor": "^3.1.3",
48+
"@toast-ui/react-editor": "^3.1.3",
49+
"react-select": "^5.2.2"
50+
},
51+
"devDependencies": {
52+
"@babel/cli": "^7.16.0",
53+
"@types/prosemirror-commands": "^1.0.4",
54+
"@types/react": "16.14.21",
55+
"eslint": "^7.12.1",
56+
"eslint-plugin-import": "^2.22.0",
57+
"eslint-plugin-react": "^7.21.5",
58+
"eslint-plugin-react-hooks": "^4.2.0",
59+
"tsc-esm-fix": "^2.7.8"
60+
}
6161
}

‎packages/cells/src/cell.stories.tsx

Lines changed: 76 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,17 @@ import styled from "styled-components";
22
import * as React from "react";
33
import AutoSizer from "react-virtualized-auto-sizer";
44
import { DataEditor, DataEditorProps, GridCellKind } from "@glideapps/glide-data-grid";
5-
import { useExtraCells } from ".";
5+
import { DropdownCell as DropdownRenderer, useExtraCells } from ".";
66
import { StarCell } from "./cells/star-cell";
77
import { SparklineCell } from "./cells/sparkline-cell";
88
import range from "lodash/range";
99
import uniq from "lodash/uniq";
1010
import { TagsCell } from "./cells/tags-cell";
1111
import { UserProfileCell } from "./cells/user-profile-cell";
12-
import { DropdownCell } from "./cells/dropdown-cell";
12+
import type { DropdownCell } from "./cells/dropdown-cell";
1313
import { ArticleCell } from "./cells/article-cell-types";
1414
import { RangeCell } from "./cells/range-cell";
15+
import { SpinnerCell } from "./cells/spinner-cell";
1516

1617
const SimpleWrapper = styled.div`
1718
text-rendering: optimizeLegibility;
@@ -162,14 +163,13 @@ const possibleTags = [
162163
];
163164

164165
export const CustomCells: React.VFC = () => {
165-
const { drawCell, provideEditor } = useExtraCells();
166+
const cellProps = useExtraCells();
166167

167168
return (
168169
<BeautifulWrapper title="Custom cells" description={<Description>Some of our extension cells.</Description>}>
169170
<DataEditor
170171
{...defaultProps}
171-
drawCell={drawCell}
172-
provideEditor={provideEditor}
172+
{...cellProps}
173173
onPaste={true}
174174
// eslint-disable-next-line no-console
175175
onCellEdited={(...args) => console.log("Edit Cell", ...args)}
@@ -295,6 +295,18 @@ export const CustomCells: React.VFC = () => {
295295
},
296296
};
297297
return d;
298+
} else if (col === 8) {
299+
num = row + 1;
300+
rand();
301+
const d: SpinnerCell = {
302+
kind: GridCellKind.Custom,
303+
allowOverlay: true,
304+
copyData: "4",
305+
data: {
306+
kind: "spinner-cell",
307+
},
308+
};
309+
return d;
298310
}
299311
throw new Error("Fail");
300312
}}
@@ -331,6 +343,10 @@ export const CustomCells: React.VFC = () => {
331343
title: "Article",
332344
width: 150,
333345
},
346+
{
347+
title: "Spinner",
348+
width: 150,
349+
},
334350
]}
335351
rows={500}
336352
/>
@@ -342,3 +358,58 @@ export const CustomCells: React.VFC = () => {
342358
showPanel: false,
343359
},
344360
};
361+
362+
export const CustomCellEditing: React.VFC = () => {
363+
const cellProps = useExtraCells();
364+
365+
const data = React.useRef<string[]>([]);
366+
367+
return (
368+
<BeautifulWrapper
369+
title="Custom cell editing"
370+
description={
371+
<Description>
372+
Cells can be edited and responding to copy/paste using the copyData attribute.
373+
</Description>
374+
}>
375+
<DataEditor
376+
{...defaultProps}
377+
{...cellProps}
378+
onPaste={true}
379+
onCellEdited={(cell, newVal) => {
380+
if (newVal.kind !== GridCellKind.Custom) return;
381+
if (DropdownRenderer.isMatch(newVal)) {
382+
data.current[cell[1]] = newVal.data.value;
383+
}
384+
}}
385+
getCellsForSelection={true}
386+
getCellContent={cell => {
387+
const [, row] = cell;
388+
const val = data.current[row] ?? "A";
389+
return {
390+
kind: GridCellKind.Custom,
391+
allowOverlay: true,
392+
copyData: val,
393+
data: {
394+
kind: "dropdown-cell",
395+
allowedValues: ["A", "B", "C"],
396+
value: val,
397+
},
398+
} as DropdownCell;
399+
}}
400+
columns={[
401+
{
402+
title: "Dropdown",
403+
width: 200,
404+
},
405+
]}
406+
rows={500}
407+
/>
408+
</BeautifulWrapper>
409+
);
410+
};
411+
(CustomCellEditing as any).parameters = {
412+
options: {
413+
showPanel: false,
414+
},
415+
};

‎packages/cells/src/cells/article-cell.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { ArticleCell } from "./article-cell-types";
22
import * as React from "react";
3-
import { CustomCellRenderer } from "@glideapps/glide-data-grid";
3+
import { CustomCellRenderer, getMiddleCenterBias } from "@glideapps/glide-data-grid";
44

55
const ArticleCellEditor = React.lazy(async () => await import("./article-cell-editor"));
66

@@ -22,7 +22,11 @@ const renderer: CustomCellRenderer<ArticleCell> = {
2222
}
2323

2424
ctx.fillStyle = theme.textDark;
25-
ctx.fillText(data, rect.x + theme.cellHorizontalPadding, rect.y + rect.height / 2);
25+
ctx.fillText(
26+
data,
27+
rect.x + theme.cellHorizontalPadding,
28+
rect.y + rect.height / 2 + getMiddleCenterBias(ctx, theme)
29+
);
2630

2731
return true;
2832
},
@@ -45,6 +49,10 @@ const renderer: CustomCellRenderer<ArticleCell> = {
4549
},
4650
disablePadding: true,
4751
}),
52+
onPaste: (val, d) => ({
53+
...d,
54+
markdown: val,
55+
}),
4856
};
4957

5058
export default renderer;

‎packages/cells/src/cells/dropdown-cell.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { CustomCell, ProvideEditorCallback, CustomCellRenderer } from "@glideapps/glide-data-grid";
1+
import { CustomCell, ProvideEditorCallback, CustomCellRenderer, getMiddleCenterBias } from "@glideapps/glide-data-grid";
22
import styled from "styled-components";
33
import * as React from "react";
44
import Select, { MenuProps, components } from "react-select";
@@ -81,7 +81,11 @@ const renderer: CustomCellRenderer<DropdownCell> = {
8181
const { ctx, theme, rect } = args;
8282
const { value } = cell.data;
8383
ctx.fillStyle = theme.textDark;
84-
ctx.fillText(value, rect.x + theme.cellHorizontalPadding, rect.y + rect.height / 2);
84+
ctx.fillText(
85+
value,
86+
rect.x + theme.cellHorizontalPadding,
87+
rect.y + rect.height / 2 + getMiddleCenterBias(ctx, theme)
88+
);
8589

8690
return true;
8791
},
@@ -97,6 +101,10 @@ const renderer: CustomCellRenderer<DropdownCell> = {
97101
},
98102
}),
99103
}),
104+
onPaste: (v, d) => ({
105+
...d,
106+
value: d.allowedValues.includes(v) ? v : d.value,
107+
}),
100108
};
101109

102110
export default renderer;

‎packages/cells/src/cells/range-cell.tsx

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { CustomCell, measureTextCached, CustomCellRenderer } from "@glideapps/glide-data-grid";
1+
import { CustomCell, measureTextCached, CustomCellRenderer, getMiddleCenterBias } from "@glideapps/glide-data-grid";
22
import * as React from "react";
33
import { roundedRect } from "../draw-fns";
44

@@ -78,7 +78,11 @@ const renderer: CustomCellRenderer<RangeCell> = {
7878
if (label !== undefined) {
7979
ctx.textAlign = "right";
8080
ctx.fillStyle = theme.textDark;
81-
ctx.fillText(label, rect.x + rect.width - theme.cellHorizontalPadding, yMid);
81+
ctx.fillText(
82+
label,
83+
rect.x + rect.width - theme.cellHorizontalPadding,
84+
yMid + getMiddleCenterBias(ctx, `12px ${theme.fontFamily}`)
85+
);
8286
}
8387

8488
ctx.restore();
@@ -121,6 +125,14 @@ const renderer: CustomCellRenderer<RangeCell> = {
121125
);
122126
};
123127
},
128+
onPaste: (v, d) => {
129+
let num = Number.parseFloat(v);
130+
num = Number.isNaN(num) ? d.value : Math.max(d.min, Math.min(d.max, num));
131+
return {
132+
...d,
133+
value: num,
134+
};
135+
},
124136
};
125137

126138
export default renderer;

‎packages/cells/src/cells/sparkline-cell.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,7 @@ const renderer: CustomCellRenderer<SparklineCell> = {
123123
return true;
124124
},
125125
provideEditor: () => undefined,
126+
onPaste: (_v, d) => d,
126127
};
127128

128129
export default renderer;

0 commit comments

Comments
 (0)