diff --git a/packages/core/API.md b/packages/core/API.md index 477581ae2..df1ec85bc 100644 --- a/packages/core/API.md +++ b/packages/core/API.md @@ -1048,3 +1048,46 @@ If `isDraggable` is set, the whole Grid is draggable, and `onDragStart` will be Behavior not defined or officially supported. Feel free to check out what this does in github but anything in here is up for grabs to be changed at any time. --- + +# Hooks + +## useCustomCells + +```ts +// arguments passed to the draw callback +interface DrawArgs { + ctx: CanvasRenderingContext2D; + theme: Theme; + rect: Rectangle; + hoverAmount: number; + hoverX: number | undefined; + hoverY: number | undefined; + col: number; + row: number; + highlighted: boolean; + imageLoader: ImageWindowLoader; +} + +// a standardized cell renderer consumed by the hook +type CustomCellRenderer = { + isMatch: (cell: CustomCell) => cell is T; + draw: (args: DrawArgs, cell: T) => boolean; + provideEditor: ProvideEditorCallback; +}; + +// the hook itself +declare function useCustomCells(cells: readonly CustomCellRenderer[]): { drawCell: DrawCustomCellCallback, provideEditor: ProvideEditorCallback }; +``` + +The useCustomCells hook provides a standardized method of integrating custom cells into the Glide Data Grid. All cells in the `@glideapps/glide-data-grid-source` package are already in this format and can be used individually by passing them to this hook as so. The result of the hook is an object which can be spread on the DataEditor to implement the cells. + +```tsx +import StarCell from "@glideapps/glide-data-grid-cells/cells/star-cell"; +import DropdownCell from "@glideapps/glide-data-grid-cells/cells/dropdown-cell"; + +const MyGrid = () => { + const args = useCustomCells([StarCell, DropdownCell]) + + return +} +``` \ No newline at end of file diff --git a/packages/core/src/data-editor/use-custom-cells.ts b/packages/core/src/data-editor/use-custom-cells.ts index e72070825..733211ca2 100644 --- a/packages/core/src/data-editor/use-custom-cells.ts +++ b/packages/core/src/data-editor/use-custom-cells.ts @@ -6,7 +6,7 @@ import { DataEditorProps } from "./data-editor"; type DrawCallback = NonNullable; -interface DrawArgs { +export interface DrawArgs { ctx: CanvasRenderingContext2D; theme: Theme; rect: Rectangle; diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 04f85b343..df5878c62 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -4,7 +4,7 @@ export type { OverlayImageEditorProps } from "./data-grid-overlay-editor/private export type { MarkdownDivProps } from "./markdown-div/markdown-div"; export type { SpriteMap } from "./data-grid/data-grid-sprites"; export type { Theme } from "./common/styles"; -export type { CustomCellRenderer } from "./data-editor/use-custom-cells"; +export type { CustomCellRenderer, DrawArgs } from "./data-editor/use-custom-cells"; export * from "./data-editor/data-editor"; export * from "./data-grid/data-grid-types";