4.1.0 (#324)

* 4.0.4-alpha1

* Greatly expand support for styling the trailing row

* Support indeterminate and empty states for boolean cell (#310)

* Fix issue with missing cjs dist in beta release CI (#307)

Related to #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 <Lukas.Masuch@gmail.com>
Co-authored-by: Jason Smith <jason@heyglide.com>

* Deprecate showUnchecked

* Better newline handling for editors

* Minor correctness improvements

* Fixup clipboard handling so the data grid can differentiate display values and real values (#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 (#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 (#330)

* Allow experimentally setting the scrollbar width override

* maintain-focus-when-cell-outside-viewport (#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 (#332)

* Add support for text alignment in theme (#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 (#334)

* Improve paste API

* Add mass edit callback

* Fix tests

* Update docs

* Add content align to additional cells (#335)

* Cleanup paste

* 4.0.4-beta3

* Enable easy paste handling for custom cells (#345)

* Add API for paste coercion

* Fix build

* Reduce shape changes in render hot path

* Remove breaking change

* Add middle center bias algorithm (#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 <ivo.elbert1@gmail.com>
Co-authored-by: Lukas Masuch <Lukas.Masuch@gmail.com>
Co-authored-by: Brian Hung <brianlhung@gmail.com>

Author: 4 people

README.md

@@ -73,12 +73,14 @@ function getData([col, row]: Item): GridCell {
             kind: GridCellKind.Text,
             data: person.firstName,
             allowOverlay: false,
+            displayData: person.firstName
         };
     } else if (col === 1) {
         return {
             kind: GridCellKind.Text,
             data: person.lastName,
             allowOverlay: false,
+            displayData: person.lastName
         };
     } else {
         throw new Error();

bootstrap.sh

@@ -7,7 +7,7 @@ npm install
 
 function update {
     echo $1 $2
-    jq "$1" $2 > $2.tmp
+    jq --indent 4 "$1" $2 > $2.tmp
     mv $2.tmp $2
 }
 

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "root",
-    "version": "4.0.3",
+    "version": "4.1.0",
     "scripts": {
         "start": "npm run storybook",
         "bootstrap": "./bootstrap.sh",

package.json

@@ -1,61 +1,61 @@
 {
-  "name": "@glideapps/glide-data-grid-cells",
-  "version": "4.0.3",
-  "description": "Extra cells for glide-data-grid",
-  "sideEffects": false,
-  "type": "module",
-  "browser": "dist/js/index.js",
-  "main": "dist/cjs/index.js",
-  "module": "dist/js/index.js",
-  "types": "dist/ts/index.d.ts",
-  "exports": {
-    "import": "./dist/js/index.js",
-    "require": "./dist/cjs/index.js"
-  },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "npm run build-js && npm run build-cjs && npm run build-types",
-    "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'",
-    "build-cjs": "babel --config-file ../../babel.cjs.json ./src -d dist/cjs --ignore '**/*.stories.tsx','src/stories/*.tsx' --extensions .ts,.tsx",
-    "build-types": "tsc -p tsconfig.types.json",
-    "lint": "eslint src --ext .ts,.tsx"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/glideapps/glide-data-grid.git",
-    "directory": "packages/cells"
-  },
-  "homepage": "https://github.com/glideapps/glide-data-grid/tree/main/cells",
-  "author": "Glide",
-  "license": "MIT",
-  "keywords": [
-    "react",
-    "datagrid",
-    "data-grid",
-    "editor",
-    "reactjs",
-    "scrolling",
-    "data",
-    "table",
-    "cell",
-    "canvas"
-  ],
-  "dependencies": {
-    "@glideapps/glide-data-grid": "4.0.3",
-    "@toast-ui/editor": "^3.1.3",
-    "@toast-ui/react-editor": "^3.1.3",
-    "react-select": "^5.2.2"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.16.0",
-    "@types/prosemirror-commands": "^1.0.4",
-    "@types/react": "16.14.21",
-    "eslint": "^7.12.1",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "tsc-esm-fix": "^2.7.8"
-  }
+    "name": "@glideapps/glide-data-grid-cells",
+    "version": "4.1.0",
+    "description": "Extra cells for glide-data-grid",
+    "sideEffects": false,
+    "type": "module",
+    "browser": "dist/js/index.js",
+    "main": "dist/cjs/index.js",
+    "module": "dist/js/index.js",
+    "types": "dist/ts/index.d.ts",
+    "exports": {
+        "import": "./dist/js/index.js",
+        "require": "./dist/cjs/index.js"
+    },
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build": "npm run build-js && npm run build-cjs && npm run build-types",
+        "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'",
+        "build-cjs": "babel --config-file ../../babel.cjs.json ./src -d dist/cjs --ignore '**/*.stories.tsx','src/stories/*.tsx' --extensions .ts,.tsx",
+        "build-types": "tsc -p tsconfig.types.json",
+        "lint": "eslint src --ext .ts,.tsx"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/glideapps/glide-data-grid.git",
+        "directory": "packages/cells"
+    },
+    "homepage": "https://github.com/glideapps/glide-data-grid/tree/main/cells",
+    "author": "Glide",
+    "license": "MIT",
+    "keywords": [
+        "react",
+        "datagrid",
+        "data-grid",
+        "editor",
+        "reactjs",
+        "scrolling",
+        "data",
+        "table",
+        "cell",
+        "canvas"
+    ],
+    "dependencies": {
+        "@glideapps/glide-data-grid": "4.1.0",
+        "@toast-ui/editor": "^3.1.3",
+        "@toast-ui/react-editor": "^3.1.3",
+        "react-select": "^5.2.2"
+    },
+    "devDependencies": {
+        "@babel/cli": "^7.16.0",
+        "@types/prosemirror-commands": "^1.0.4",
+        "@types/react": "16.14.21",
+        "eslint": "^7.12.1",
+        "eslint-plugin-import": "^2.22.0",
+        "eslint-plugin-react": "^7.21.5",
+        "eslint-plugin-react-hooks": "^4.2.0",
+        "tsc-esm-fix": "^2.7.8"
+    }
 }

packages/cells/package.json

@@ -2,16 +2,17 @@ import styled from "styled-components";
 import * as React from "react";
 import AutoSizer from "react-virtualized-auto-sizer";
 import { DataEditor, DataEditorProps, GridCellKind } from "@glideapps/glide-data-grid";
-import { useExtraCells } from ".";
+import { DropdownCell as DropdownRenderer, useExtraCells } from ".";
 import { StarCell } from "./cells/star-cell";
 import { SparklineCell } from "./cells/sparkline-cell";
 import range from "lodash/range";
 import uniq from "lodash/uniq";
 import { TagsCell } from "./cells/tags-cell";
 import { UserProfileCell } from "./cells/user-profile-cell";
-import { DropdownCell } from "./cells/dropdown-cell";
+import type { DropdownCell } from "./cells/dropdown-cell";
 import { ArticleCell } from "./cells/article-cell-types";
 import { RangeCell } from "./cells/range-cell";
+import { SpinnerCell } from "./cells/spinner-cell";
 
 const SimpleWrapper = styled.div`
     text-rendering: optimizeLegibility;
@@ -162,14 +163,13 @@ const possibleTags = [
 ];
 
 export const CustomCells: React.VFC = () => {
-    const { drawCell, provideEditor } = useExtraCells();
+    const cellProps = useExtraCells();
 
     return (
         <BeautifulWrapper title="Custom cells" description={<Description>Some of our extension cells.</Description>}>
             <DataEditor
                 {...defaultProps}
-                drawCell={drawCell}
-                provideEditor={provideEditor}
+                {...cellProps}
                 onPaste={true}
                 // eslint-disable-next-line no-console
                 onCellEdited={(...args) => console.log("Edit Cell", ...args)}
@@ -295,6 +295,18 @@ export const CustomCells: React.VFC = () => {
                             },
                         };
                         return d;
+                    } else if (col === 8) {
+                        num = row + 1;
+                        rand();
+                        const d: SpinnerCell = {
+                            kind: GridCellKind.Custom,
+                            allowOverlay: true,
+                            copyData: "4",
+                            data: {
+                                kind: "spinner-cell",
+                            },
+                        };
+                        return d;
                     }
                     throw new Error("Fail");
                 }}
@@ -331,6 +343,10 @@ export const CustomCells: React.VFC = () => {
                         title: "Article",
                         width: 150,
                     },
+                    {
+                        title: "Spinner",
+                        width: 150,
+                    },
                 ]}
                 rows={500}
             />
@@ -342,3 +358,58 @@ export const CustomCells: React.VFC = () => {
         showPanel: false,
     },
 };
+
+export const CustomCellEditing: React.VFC = () => {
+    const cellProps = useExtraCells();
+
+    const data = React.useRef<string[]>([]);
+
+    return (
+        <BeautifulWrapper
+            title="Custom cell editing"
+            description={
+                <Description>
+                    Cells can be edited and responding to copy/paste using the copyData attribute.
+                </Description>
+            }>
+            <DataEditor
+                {...defaultProps}
+                {...cellProps}
+                onPaste={true}
+                onCellEdited={(cell, newVal) => {
+                    if (newVal.kind !== GridCellKind.Custom) return;
+                    if (DropdownRenderer.isMatch(newVal)) {
+                        data.current[cell[1]] = newVal.data.value;
+                    }
+                }}
+                getCellsForSelection={true}
+                getCellContent={cell => {
+                    const [, row] = cell;
+                    const val = data.current[row] ?? "A";
+                    return {
+                        kind: GridCellKind.Custom,
+                        allowOverlay: true,
+                        copyData: val,
+                        data: {
+                            kind: "dropdown-cell",
+                            allowedValues: ["A", "B", "C"],
+                            value: val,
+                        },
+                    } as DropdownCell;
+                }}
+                columns={[
+                    {
+                        title: "Dropdown",
+                        width: 200,
+                    },
+                ]}
+                rows={500}
+            />
+        </BeautifulWrapper>
+    );
+};
+(CustomCellEditing as any).parameters = {
+    options: {
+        showPanel: false,
+    },
+};

packages/cells/src/cell.stories.tsx

@@ -1,6 +1,6 @@
 import type { ArticleCell } from "./article-cell-types";
 import * as React from "react";
-import { CustomCellRenderer } from "@glideapps/glide-data-grid";
+import { CustomCellRenderer, getMiddleCenterBias } from "@glideapps/glide-data-grid";
 
 const ArticleCellEditor = React.lazy(async () => await import("./article-cell-editor"));
 
@@ -22,7 +22,11 @@ const renderer: CustomCellRenderer<ArticleCell> = {
         }
 
         ctx.fillStyle = theme.textDark;
-        ctx.fillText(data, rect.x + theme.cellHorizontalPadding, rect.y + rect.height / 2);
+        ctx.fillText(
+            data,
+            rect.x + theme.cellHorizontalPadding,
+            rect.y + rect.height / 2 + getMiddleCenterBias(ctx, theme)
+        );
 
         return true;
     },
@@ -45,6 +49,10 @@ const renderer: CustomCellRenderer<ArticleCell> = {
         },
         disablePadding: true,
     }),
+    onPaste: (val, d) => ({
+        ...d,
+        markdown: val,
+    }),
 };
 
 export default renderer;

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

@@ -1,4 +1,4 @@
-import { CustomCell, ProvideEditorCallback, CustomCellRenderer } from "@glideapps/glide-data-grid";
+import { CustomCell, ProvideEditorCallback, CustomCellRenderer, getMiddleCenterBias } from "@glideapps/glide-data-grid";
 import styled from "styled-components";
 import * as React from "react";
 import Select, { MenuProps, components } from "react-select";
@@ -81,7 +81,11 @@ const renderer: CustomCellRenderer<DropdownCell> = {
         const { ctx, theme, rect } = args;
         const { value } = cell.data;
         ctx.fillStyle = theme.textDark;
-        ctx.fillText(value, rect.x + theme.cellHorizontalPadding, rect.y + rect.height / 2);
+        ctx.fillText(
+            value,
+            rect.x + theme.cellHorizontalPadding,
+            rect.y + rect.height / 2 + getMiddleCenterBias(ctx, theme)
+        );
 
         return true;
     },
@@ -97,6 +101,10 @@ const renderer: CustomCellRenderer<DropdownCell> = {
             },
         }),
     }),
+    onPaste: (v, d) => ({
+        ...d,
+        value: d.allowedValues.includes(v) ? v : d.value,
+    }),
 };
 
 export default renderer;

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

@@ -1,4 +1,4 @@
-import { CustomCell, measureTextCached, CustomCellRenderer } from "@glideapps/glide-data-grid";
+import { CustomCell, measureTextCached, CustomCellRenderer, getMiddleCenterBias } from "@glideapps/glide-data-grid";
 import * as React from "react";
 import { roundedRect } from "../draw-fns";
 
@@ -78,7 +78,11 @@ const renderer: CustomCellRenderer<RangeCell> = {
         if (label !== undefined) {
             ctx.textAlign = "right";
             ctx.fillStyle = theme.textDark;
-            ctx.fillText(label, rect.x + rect.width - theme.cellHorizontalPadding, yMid);
+            ctx.fillText(
+                label,
+                rect.x + rect.width - theme.cellHorizontalPadding,
+                yMid + getMiddleCenterBias(ctx, `12px ${theme.fontFamily}`)
+            );
         }
 
         ctx.restore();
@@ -121,6 +125,14 @@ const renderer: CustomCellRenderer<RangeCell> = {
             );
         };
     },
+    onPaste: (v, d) => {
+        let num = Number.parseFloat(v);
+        num = Number.isNaN(num) ? d.value : Math.max(d.min, Math.min(d.max, num));
+        return {
+            ...d,
+            value: num,
+        };
+    },
 };
 
 export default renderer;

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

@@ -123,6 +123,7 @@ const renderer: CustomCellRenderer<SparklineCell> = {
         return true;
     },
     provideEditor: () => undefined,
+    onPaste: (_v, d) => d,
 };
 
 export default renderer;