Genesis
This commit is contained in:
seb
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
48
AGENTS.md
Normal file
48
AGENTS.md
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
# AGENTS — react-virtual-aggridautomat
|
||||||
|
|
||||||
|
## What
|
||||||
|
PureComponent wrapper: AG Grid infinite-scroll + react-automat state. Library in `src/lib/`, demo in `src/demo/`.
|
||||||
|
|
||||||
|
## Exports (`src/lib/index.ts`)
|
||||||
|
- `AutomatGrid` — PureComponent. Props: `automat` (required), `columnDefs` (required), `rowIdField` (default `'id'`), `cacheBlockSize`, `rowBuffer`, `height`, `width`, `onGridApiReady`, plus standard AG Grid overrides.
|
||||||
|
- `createGridAutomat(options)` — Factory returning `Automat<GridAutomatState, GridAutomatActions>`.
|
||||||
|
|
||||||
|
## createGridAutomat
|
||||||
|
```ts
|
||||||
|
createGridAutomat({ fetchRows, name?, blockSize? })
|
||||||
|
```
|
||||||
|
- `fetchRows: ({startRow, endRow, sortModel, filterModel}) => Promise<{rows, lastRow?}>` — the only required option.
|
||||||
|
- State: `ready`, `loading`, `totalRows`, `sortModel`, `filterModel`, `revision`, `error`.
|
||||||
|
- Actions: `reload()`, `setSort(model)`, `setFilter(model)`.
|
||||||
|
|
||||||
|
## AutomatGrid internals
|
||||||
|
- Uses `InfiniteRowModelModule` (community, no enterprise needed).
|
||||||
|
- Constructor: sync read `automat.state`. Mount: `automat.subscribe(this, selector)`. Unmount: `unsub()`.
|
||||||
|
- On `revision` change (via `componentDidUpdate`): rebuilds `IDatasource` and calls `api.setGridOption('datasource', ds)`.
|
||||||
|
- `onSortChanged`/`onFilterChanged` → `automat.actions.setSort/setFilter` → bumps revision → datasource reset.
|
||||||
|
- `getRowId` uses `props.rowIdField` (default `'id'`) from row data.
|
||||||
|
|
||||||
|
## Patterns
|
||||||
|
```tsx
|
||||||
|
// 1. Create automat (module scope)
|
||||||
|
const grid = createGridAutomat({ fetchRows: myFetcher });
|
||||||
|
// 2. Render
|
||||||
|
<AutomatGrid automat={grid} columnDefs={cols} rowIdField="id" />
|
||||||
|
// 3. Reload externally
|
||||||
|
grid.actions.reload();
|
||||||
|
// 4. Subscribe from another component
|
||||||
|
this.unsub = grid.subscribe(this, s => ({ loading: s.loading }));
|
||||||
|
```
|
||||||
|
|
||||||
|
## Rules
|
||||||
|
- Never use hooks — PureComponent only.
|
||||||
|
- Subscribe in `componentDidMount`, unsubscribe in `componentWillUnmount`.
|
||||||
|
- Read `automat.state` in constructor for zero-flash initial render.
|
||||||
|
- `fetchRows` must return `{ rows, lastRow? }`. Set `lastRow` to total count to stop infinite scrolling.
|
||||||
|
- AG Grid modules: only `InfiniteRowModelModule` is registered by `AutomatGrid`.
|
||||||
|
|
||||||
|
## Commands
|
||||||
|
```
|
||||||
|
npm run dev # Vite dev server
|
||||||
|
npm run build # tsc + vite build
|
||||||
|
```
|
||||||
12
LICENSE
Normal file
12
LICENSE
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
Copyright (C) 2026 by Sebastian Green-Huber
|
||||||
|
|
||||||
|
Permission to use, copy, modify, and/or distribute this software for any
|
||||||
|
purpose with or without fee is hereby granted.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
|
||||||
|
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
|
||||||
|
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
|
||||||
|
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
|
||||||
|
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
|
||||||
|
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
|
||||||
|
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
|
||||||
232
README.md
Normal file
232
README.md
Normal file
@@ -0,0 +1,232 @@
|
|||||||
|
# ⚡ react-virtual-aggridautomat
|
||||||
|
|
||||||
|
> Opinionated, fully-virtualized AG Grid component powered by [react-automat](https://github.com/sebseb7/react-automat) — infinite-scroll data grids as React `PureComponent` with zero hooks, HOCs, or Context Providers.
|
||||||
|
|
||||||
|
[](https://www.ag-grid.com/)
|
||||||
|
[](https://github.com/sebseb7/react-automat)
|
||||||
|
[](https://react.dev/)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## What is this?
|
||||||
|
|
||||||
|
A reusable `<AutomatGrid />` PureComponent that wires AG Grid's [Infinite Row Model](https://www.ag-grid.com/react-data-grid/infinite-scrolling/) to a `react-automat` store. Your async data fetcher is the only thing you provide — the library handles:
|
||||||
|
|
||||||
|
- **Virtual row loading** — only visible rows exist in the DOM
|
||||||
|
- **Block caching** — configurable cache size, debounced scroll loading
|
||||||
|
- **Server-side sort & filter** — sort/filter changes flow through the automat and trigger datasource resets
|
||||||
|
- **Reactive state** — loading indicators, error state, row counts, and revision tracking all live in the automat
|
||||||
|
- **Zero hooks** — designed for `PureComponent` with synchronous constructor reads and fine-grained automat subscriptions
|
||||||
|
|
||||||
|
## Install
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install ag-grid-community ag-grid-react react-automat
|
||||||
|
```
|
||||||
|
|
||||||
|
> This library is not yet published to npm. Clone or copy `src/lib/` into your project.
|
||||||
|
|
||||||
|
## Quick Start
|
||||||
|
|
||||||
|
### 1. Create a grid automat
|
||||||
|
|
||||||
|
```ts
|
||||||
|
// myGridAutomat.ts
|
||||||
|
import { createGridAutomat } from './lib';
|
||||||
|
|
||||||
|
export const myGridAutomat = createGridAutomat({
|
||||||
|
fetchRows: async ({ startRow, endRow, sortModel, filterModel }) => {
|
||||||
|
const res = await fetch(`/api/items?start=${startRow}&end=${endRow}`);
|
||||||
|
const { items, total } = await res.json();
|
||||||
|
return { rows: items, lastRow: total };
|
||||||
|
},
|
||||||
|
name: 'myGrid', // Visible in window.__AUTOMATS__
|
||||||
|
blockSize: 100, // Rows per block (passed to AG Grid's cacheBlockSize)
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. Render the grid
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
// MyView.tsx
|
||||||
|
import { PureComponent } from 'react';
|
||||||
|
import { AutomatGrid } from './lib';
|
||||||
|
import { myGridAutomat } from './myGridAutomat';
|
||||||
|
|
||||||
|
class MyView extends PureComponent {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<AutomatGrid
|
||||||
|
automat={myGridAutomat}
|
||||||
|
columnDefs={[
|
||||||
|
{ field: 'id', maxWidth: 80 },
|
||||||
|
{ field: 'name', flex: 2, filter: 'agTextColumnFilter' },
|
||||||
|
{ field: 'price', valueFormatter: p => `€${p.value?.toFixed(2)}` },
|
||||||
|
]}
|
||||||
|
rowIdField="id"
|
||||||
|
height="600px"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. React to grid state
|
||||||
|
|
||||||
|
The automat is a standard `react-automat` store — subscribe to it from any PureComponent:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
class StatusBar extends PureComponent {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
loading: myGridAutomat.state.loading,
|
||||||
|
totalRows: myGridAutomat.state.totalRows,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.unsub = myGridAutomat.subscribe(this, (s) => ({
|
||||||
|
loading: s.loading,
|
||||||
|
totalRows: s.totalRows,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
this.unsub();
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{this.state.loading ? 'Loading…' : `${this.state.totalRows} rows`}
|
||||||
|
<button onClick={() => myGridAutomat.actions.reload()}>↻ Reload</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## API Reference
|
||||||
|
|
||||||
|
### `createGridAutomat(options)`
|
||||||
|
|
||||||
|
Creates a `react-automat` store to back the grid.
|
||||||
|
|
||||||
|
| Option | Type | Default | Description |
|
||||||
|
|---|---|---|---|
|
||||||
|
| `fetchRows` | `(params: GridFetchParams) => Promise<GridFetchResult>` | **required** | Async function called by AG Grid's datasource for each block |
|
||||||
|
| `name` | `string` | `null` | Automat registry name (visible in `window.__AUTOMATS__`) |
|
||||||
|
| `blockSize` | `number` | `100` | Rows per cache block |
|
||||||
|
|
||||||
|
#### `GridFetchParams`
|
||||||
|
|
||||||
|
```ts
|
||||||
|
{
|
||||||
|
startRow: number;
|
||||||
|
endRow: number;
|
||||||
|
sortModel: SortModelItem[];
|
||||||
|
filterModel: Record<string, unknown>;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### `GridFetchResult<TRow>`
|
||||||
|
|
||||||
|
```ts
|
||||||
|
{
|
||||||
|
rows: TRow[];
|
||||||
|
lastRow?: number; // Total count. undefined/-1 = unknown (infinite scroll continues)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Automat State
|
||||||
|
|
||||||
|
| Field | Type | Description |
|
||||||
|
|---|---|---|
|
||||||
|
| `ready` | `boolean` | `true` after first block loads |
|
||||||
|
| `loading` | `boolean` | `true` while any block is in-flight |
|
||||||
|
| `totalRows` | `number` | Known row count (`-1` if unknown) |
|
||||||
|
| `sortModel` | `SortModelItem[]` | Current sort state |
|
||||||
|
| `filterModel` | `Record<string, unknown>` | Current filter state |
|
||||||
|
| `revision` | `number` | Increments on reload/sort/filter change |
|
||||||
|
| `error` | `string \| null` | Last fetch error message |
|
||||||
|
|
||||||
|
#### Automat Actions
|
||||||
|
|
||||||
|
| Action | Description |
|
||||||
|
|---|---|
|
||||||
|
| `reload()` | Bumps revision, clears cache, forces full refetch |
|
||||||
|
| `setSort(sortModel)` | Updates sort model + reloads |
|
||||||
|
| `setFilter(filterModel)` | Updates filter model + reloads |
|
||||||
|
|
||||||
|
### `<AutomatGrid />` Props
|
||||||
|
|
||||||
|
| Prop | Type | Default | Description |
|
||||||
|
|---|---|---|---|
|
||||||
|
| `automat` | `Automat<GridAutomatState, GridAutomatActions>` | **required** | The grid automat store |
|
||||||
|
| `columnDefs` | `ColDef[]` | **required** | AG Grid column definitions |
|
||||||
|
| `defaultColDef` | `ColDef` | `{ flex: 1, minWidth: 100, sortable: true, resizable: true }` | Default column config |
|
||||||
|
| `rowIdField` | `string` | `'id'` | Row data field used for stable row IDs |
|
||||||
|
| `cacheBlockSize` | `number` | automat's `blockSize` | Override cache block size |
|
||||||
|
| `rowBuffer` | `number` | `0` | Extra rows rendered outside viewport |
|
||||||
|
| `infiniteInitialRowCount` | `number` | `200` | Scrollbar size hint |
|
||||||
|
| `maxConcurrentDatasourceRequests` | `number` | `2` | Parallel block fetches |
|
||||||
|
| `maxBlocksInCache` | `number` | `10` | Max cached blocks before eviction |
|
||||||
|
| `blockLoadDebounceMillis` | `number` | `100` | Scroll debounce |
|
||||||
|
| `height` | `string \| number` | `'100%'` | Container height |
|
||||||
|
| `width` | `string \| number` | `'100%'` | Container width |
|
||||||
|
| `rowHeight` | `number` | AG Grid default (42) | Row height in pixels |
|
||||||
|
| `theme` | `string` | `'ag-theme-alpine ag-theme-alpine-dark'` | Container theme class |
|
||||||
|
| `modules` | `Module[]` | InfiniteRowModel + Text/Number/Date/Custom filters | Additional AG Grid modules |
|
||||||
|
| `onGridApiReady` | `(api: GridApi) => void` | — | Callback when AG Grid API is available |
|
||||||
|
| `className` | `string` | — | Container CSS class |
|
||||||
|
| `style` | `CSSProperties` | — | Container inline styles |
|
||||||
|
|
||||||
|
## Data Flow
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────────────────────┐
|
||||||
|
│ AutomatGrid (PureComponent) │
|
||||||
|
│ │
|
||||||
|
│ constructor: reads automat.state synchronously │
|
||||||
|
│ componentDidMount: subscribes with selector │
|
||||||
|
│ componentDidUpdate: if revision changed → reset ds │
|
||||||
|
│ │
|
||||||
|
│ ┌──────────────┐ ┌────────────────────────┐ │
|
||||||
|
│ │ AG Grid │────▶│ IDatasource.getRows() │ │
|
||||||
|
│ │ (infinite │ │ calls automat._fetcher │ │
|
||||||
|
│ │ row model) │◀────│ → successCallback() │ │
|
||||||
|
│ └──────────────┘ └────────────────────────┘ │
|
||||||
|
│ │ │ │
|
||||||
|
│ onSortChanged ──────▶ automat.actions.setSort() │
|
||||||
|
│ onFilterChanged ────▶ automat.actions.setFilter() │
|
||||||
|
│ │ │ │
|
||||||
|
│ └──── revision bump ─────┘ │
|
||||||
|
└─────────────────────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
## Running the Demo
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
The demo generates 10,000 fake product rows and serves them through a simulated async fetcher with artificial latency. Open http://localhost:5173 to see infinite scroll in action.
|
||||||
|
|
||||||
|
## Project Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
src/
|
||||||
|
├── lib/ # Reusable library
|
||||||
|
│ ├── createGridAutomat.ts # Automat factory
|
||||||
|
│ ├── AutomatGrid.tsx # PureComponent grid wrapper
|
||||||
|
│ └── index.ts # Barrel exports
|
||||||
|
└── demo/ # Demo app
|
||||||
|
├── demoAutomat.ts # 10k fake rows + fetcher
|
||||||
|
└── DemoGrid.tsx # Demo consumer component
|
||||||
|
```
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
0BSD
|
||||||
22
eslint.config.js
Normal file
22
eslint.config.js
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
import tseslint from 'typescript-eslint'
|
||||||
|
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||||
|
|
||||||
|
export default defineConfig([
|
||||||
|
globalIgnores(['dist']),
|
||||||
|
{
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
extends: [
|
||||||
|
js.configs.recommended,
|
||||||
|
tseslint.configs.recommended,
|
||||||
|
reactHooks.configs.flat.recommended,
|
||||||
|
reactRefresh.configs.vite,
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
globals: globals.browser,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
14
index.html
Normal file
14
index.html
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta name="description" content="Opinionated virtualized AG Grid powered by react-automat PureComponent state management" />
|
||||||
|
<title>AutomatGrid — Virtualized AG Grid + react-automat</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
3282
package-lock.json
generated
Normal file
3282
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
52
package.json
Normal file
52
package.json
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
{
|
||||||
|
"name": "react-virtual-aggridautomat",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"license": "0BSD",
|
||||||
|
"type": "module",
|
||||||
|
"sideEffects": false,
|
||||||
|
"main": "./src/lib/index.ts",
|
||||||
|
"types": "./src/lib/index.ts",
|
||||||
|
"exports": {
|
||||||
|
".": {
|
||||||
|
"types": "./src/lib/index.ts",
|
||||||
|
"import": "./src/lib/index.ts",
|
||||||
|
"default": "./src/lib/index.ts"
|
||||||
|
},
|
||||||
|
"./createGridAutomat": {
|
||||||
|
"types": "./src/lib/createGridAutomat.ts",
|
||||||
|
"import": "./src/lib/createGridAutomat.ts",
|
||||||
|
"default": "./src/lib/createGridAutomat.ts"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc -b && vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@types/prismjs": "^1.26.6",
|
||||||
|
"ag-grid-community": "^36.2.0",
|
||||||
|
"ag-grid-react": "^36.2.0",
|
||||||
|
"marked": "^18.0.14",
|
||||||
|
"prismjs": "^1.30.0",
|
||||||
|
"react": "^19.3.0",
|
||||||
|
"react-automat": "file:../automat",
|
||||||
|
"react-dom": "^19.3.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^10.0.1",
|
||||||
|
"@types/node": "^26.6.4",
|
||||||
|
"@types/react": "^19.3.0",
|
||||||
|
"@types/react-dom": "^19.3.0",
|
||||||
|
"@vitejs/plugin-react": "^6.1.2",
|
||||||
|
"eslint": "^10.12.0",
|
||||||
|
"eslint-plugin-react-hooks": "^7.1.1",
|
||||||
|
"eslint-plugin-react-refresh": "^0.5.7",
|
||||||
|
"globals": "^17.13.0",
|
||||||
|
"typescript": "~7.0.2",
|
||||||
|
"typescript-eslint": "^8.71.0",
|
||||||
|
"vite": "^8.3.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
public/favicon.svg
Normal file
1
public/favicon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.3 KiB |
24
public/icons.svg
Normal file
24
public/icons.svg
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
||||||
|
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
||||||
|
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="discord-icon" viewBox="0 0 20 19">
|
||||||
|
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="github-icon" viewBox="0 0 19 19">
|
||||||
|
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="social-icon" viewBox="0 0 20 20">
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="x-icon" viewBox="0 0 19 19">
|
||||||
|
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
||||||
|
</symbol>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.9 KiB |
156
src/App.tsx
Normal file
156
src/App.tsx
Normal file
@@ -0,0 +1,156 @@
|
|||||||
|
import { PureComponent } from 'react';
|
||||||
|
import { DemoGrid } from './demo/DemoGrid';
|
||||||
|
import { DocViewer } from './demo/DocViewer';
|
||||||
|
import { CodeViewer } from './demo/CodeViewer';
|
||||||
|
|
||||||
|
export type AppView = 'demo' | 'docs' | 'code' | 'split';
|
||||||
|
|
||||||
|
interface AppState {
|
||||||
|
view: AppView;
|
||||||
|
splitRightTab: 'docs' | 'code';
|
||||||
|
}
|
||||||
|
|
||||||
|
class App extends PureComponent<Record<string, never>, AppState> {
|
||||||
|
constructor(props: Record<string, never>) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
view: 'demo',
|
||||||
|
splitRightTab: 'docs',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
private handleSetView = (view: AppView): void => {
|
||||||
|
this.setState({ view });
|
||||||
|
};
|
||||||
|
|
||||||
|
private handleSetSplitRightTab = (tab: 'docs' | 'code'): void => {
|
||||||
|
this.setState({ splitRightTab: tab });
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { view, splitRightTab } = this.state;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="app-shell">
|
||||||
|
{/* ── Main Top Navigation Bar ── */}
|
||||||
|
<header className="app-topbar">
|
||||||
|
<div className="app-topbar-brand">
|
||||||
|
<span className="app-brand-icon">⚡</span>
|
||||||
|
<div className="app-brand-text">
|
||||||
|
<span className="app-brand-title">react-virtual-aggridautomat</span>
|
||||||
|
<span className="app-brand-subtitle">Infinite AG Grid + react-automat</span>
|
||||||
|
</div>
|
||||||
|
<div className="app-brand-badges">
|
||||||
|
<span className="badge-chip badge-ag">AG Grid v36</span>
|
||||||
|
<span className="badge-chip badge-automat">react-automat</span>
|
||||||
|
<span className="badge-chip badge-pure">PureComponent</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav className="app-nav-tabs" aria-label="Main Navigation">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`nav-tab-btn ${view === 'demo' ? 'active' : ''}`}
|
||||||
|
onClick={() => this.handleSetView('demo')}
|
||||||
|
>
|
||||||
|
<span className="nav-tab-icon">⚡</span>
|
||||||
|
<span>Live Demo</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`nav-tab-btn ${view === 'docs' ? 'active' : ''}`}
|
||||||
|
onClick={() => this.handleSetView('docs')}
|
||||||
|
>
|
||||||
|
<span className="nav-tab-icon">📖</span>
|
||||||
|
<span>Documentation</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`nav-tab-btn ${view === 'code' ? 'active' : ''}`}
|
||||||
|
onClick={() => this.handleSetView('code')}
|
||||||
|
>
|
||||||
|
<span className="nav-tab-icon">💻</span>
|
||||||
|
<span>Demo Code</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`nav-tab-btn ${view === 'split' ? 'active' : ''}`}
|
||||||
|
onClick={() => this.handleSetView('split')}
|
||||||
|
title="View Demo and Documentation / Code side by side"
|
||||||
|
>
|
||||||
|
<span className="nav-tab-icon">🪟</span>
|
||||||
|
<span>Split View</span>
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div className="app-topbar-actions">
|
||||||
|
<a
|
||||||
|
href="https://github.com/sebseb7/react-automat"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="app-github-link"
|
||||||
|
title="GitHub repository"
|
||||||
|
>
|
||||||
|
GitHub ↗
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* ── Content View Area ── */}
|
||||||
|
<main className="app-viewport">
|
||||||
|
{view === 'demo' && (
|
||||||
|
<DemoGrid onNavigateView={this.handleSetView} />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{view === 'docs' && (
|
||||||
|
<DocViewer />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{view === 'code' && (
|
||||||
|
<CodeViewer />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{view === 'split' && (
|
||||||
|
<div className="split-view-container">
|
||||||
|
<div className="split-pane split-pane-left">
|
||||||
|
<DemoGrid onNavigateView={this.handleSetView} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="split-divider" />
|
||||||
|
|
||||||
|
<div className="split-pane split-pane-right">
|
||||||
|
<div className="split-right-header">
|
||||||
|
<div className="split-tab-switcher">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`split-tab-btn ${splitRightTab === 'docs' ? 'active' : ''}`}
|
||||||
|
onClick={() => this.handleSetSplitRightTab('docs')}
|
||||||
|
>
|
||||||
|
📖 Documentation
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`split-tab-btn ${splitRightTab === 'code' ? 'active' : ''}`}
|
||||||
|
onClick={() => this.handleSetSplitRightTab('code')}
|
||||||
|
>
|
||||||
|
💻 Demo & Core Code
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="split-right-content">
|
||||||
|
{splitRightTab === 'docs' ? <DocViewer /> : <CodeViewer />}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
BIN
src/assets/hero.png
Normal file
BIN
src/assets/hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
1
src/assets/vite.svg
Normal file
1
src/assets/vite.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
208
src/demo/CodeViewer.tsx
Normal file
208
src/demo/CodeViewer.tsx
Normal file
@@ -0,0 +1,208 @@
|
|||||||
|
import { PureComponent } from 'react';
|
||||||
|
import Prism from 'prismjs';
|
||||||
|
import 'prismjs/components/prism-typescript';
|
||||||
|
import 'prismjs/components/prism-jsx';
|
||||||
|
import 'prismjs/components/prism-tsx';
|
||||||
|
|
||||||
|
import demoGridCode from './DemoGrid.tsx?raw';
|
||||||
|
import demoAutomatCode from './demoAutomat.ts?raw';
|
||||||
|
import automatGridCode from '../lib/AutomatGrid.tsx?raw';
|
||||||
|
import createGridAutomatCode from '../lib/createGridAutomat.ts?raw';
|
||||||
|
|
||||||
|
interface SourceFile {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
category: 'demo' | 'lib';
|
||||||
|
description: string;
|
||||||
|
content: string;
|
||||||
|
language: 'tsx' | 'typescript';
|
||||||
|
}
|
||||||
|
|
||||||
|
const FILES: SourceFile[] = [
|
||||||
|
{
|
||||||
|
id: 'demo-grid',
|
||||||
|
name: 'DemoGrid.tsx',
|
||||||
|
category: 'demo',
|
||||||
|
description: 'Showcase PureComponent wiring AutomatGrid, columns, and live stats',
|
||||||
|
content: demoGridCode,
|
||||||
|
language: 'tsx',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'demo-automat',
|
||||||
|
name: 'demoAutomat.ts',
|
||||||
|
category: 'demo',
|
||||||
|
description: '10,000 fake items generator, simulated async server fetcher & store factory',
|
||||||
|
content: demoAutomatCode,
|
||||||
|
language: 'typescript',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'lib-grid',
|
||||||
|
name: 'AutomatGrid.tsx',
|
||||||
|
category: 'lib',
|
||||||
|
description: 'Reusable PureComponent wrapper for AG Grid InfiniteRowModel & react-automat',
|
||||||
|
content: automatGridCode,
|
||||||
|
language: 'tsx',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'lib-factory',
|
||||||
|
name: 'createGridAutomat.ts',
|
||||||
|
category: 'lib',
|
||||||
|
description: 'Automat store factory managing scroll revisions, sort, filter, and state',
|
||||||
|
content: createGridAutomatCode,
|
||||||
|
language: 'typescript',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
interface CodeViewerProps {
|
||||||
|
initialFileId?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CodeViewerState {
|
||||||
|
activeFileId: string;
|
||||||
|
copied: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class CodeViewer extends PureComponent<CodeViewerProps, CodeViewerState> {
|
||||||
|
private copyTimeout: ReturnType<typeof setTimeout> | null = null;
|
||||||
|
|
||||||
|
constructor(props: CodeViewerProps) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
activeFileId: props.initialFileId || 'demo-grid',
|
||||||
|
copied: false,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount(): void {
|
||||||
|
if (this.copyTimeout) {
|
||||||
|
clearTimeout(this.copyTimeout);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private handleSelectFile = (fileId: string): void => {
|
||||||
|
this.setState({ activeFileId: fileId, copied: false });
|
||||||
|
};
|
||||||
|
|
||||||
|
private handleCopy = (): void => {
|
||||||
|
const activeFile = FILES.find((f) => f.id === this.state.activeFileId);
|
||||||
|
if (!activeFile) return;
|
||||||
|
|
||||||
|
navigator.clipboard.writeText(activeFile.content).then(() => {
|
||||||
|
this.setState({ copied: true });
|
||||||
|
if (this.copyTimeout) clearTimeout(this.copyTimeout);
|
||||||
|
this.copyTimeout = setTimeout(() => {
|
||||||
|
this.setState({ copied: false });
|
||||||
|
}, 2000);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
private lineNumbersRef: HTMLDivElement | null = null;
|
||||||
|
|
||||||
|
private handleCodeScroll = (e: React.UIEvent<HTMLPreElement>): void => {
|
||||||
|
if (this.lineNumbersRef) {
|
||||||
|
this.lineNumbersRef.scrollTop = e.currentTarget.scrollTop;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { activeFileId, copied } = this.state;
|
||||||
|
const activeFile = FILES.find((f) => f.id === activeFileId) || FILES[0];
|
||||||
|
|
||||||
|
// Compute line count
|
||||||
|
const lines = activeFile.content.split('\n');
|
||||||
|
const lineCount = lines.length;
|
||||||
|
|
||||||
|
// Highlight code using Prism
|
||||||
|
const grammar = Prism.languages.tsx || Prism.languages.typescript;
|
||||||
|
const highlightedHtml = Prism.highlight(
|
||||||
|
activeFile.content,
|
||||||
|
grammar,
|
||||||
|
activeFile.language,
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="code-viewer-container">
|
||||||
|
{/* Top File Selector Bar */}
|
||||||
|
<div className="code-viewer-tabs">
|
||||||
|
<div className="code-tabs-group">
|
||||||
|
<span className="code-tabs-label">Demo Files:</span>
|
||||||
|
{FILES.filter((f) => f.category === 'demo').map((f) => (
|
||||||
|
<button
|
||||||
|
key={f.id}
|
||||||
|
type="button"
|
||||||
|
className={`code-tab-btn ${activeFileId === f.id ? 'active' : ''}`}
|
||||||
|
onClick={() => this.handleSelectFile(f.id)}
|
||||||
|
>
|
||||||
|
<span className="code-tab-icon">📄</span>
|
||||||
|
<span className="code-tab-name">{f.name}</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="code-tabs-group">
|
||||||
|
<span className="code-tabs-label">Library Core:</span>
|
||||||
|
{FILES.filter((f) => f.category === 'lib').map((f) => (
|
||||||
|
<button
|
||||||
|
key={f.id}
|
||||||
|
type="button"
|
||||||
|
className={`code-tab-btn ${activeFileId === f.id ? 'active' : ''}`}
|
||||||
|
onClick={() => this.handleSelectFile(f.id)}
|
||||||
|
>
|
||||||
|
<span className="code-tab-icon">⚙</span>
|
||||||
|
<span className="code-tab-name">{f.name}</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Active File Header info */}
|
||||||
|
<div className="code-file-meta">
|
||||||
|
<div className="code-file-details">
|
||||||
|
<span className="code-file-tag">
|
||||||
|
{activeFile.category === 'demo' ? 'DEMO SOURCE' : 'CORE LIBRARY'}
|
||||||
|
</span>
|
||||||
|
<span className="code-file-name">{activeFile.name}</span>
|
||||||
|
<span className="code-file-desc">{activeFile.description}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="code-file-actions">
|
||||||
|
<span className="code-file-lines">{lineCount} lines</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`code-copy-full-btn ${copied ? 'copied' : ''}`}
|
||||||
|
onClick={this.handleCopy}
|
||||||
|
>
|
||||||
|
{copied ? '✓ Copied to Clipboard' : '📋 Copy File'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Code Content with Line Numbers */}
|
||||||
|
<div className="code-editor-layout">
|
||||||
|
{/* Gutter / Line numbers */}
|
||||||
|
<div
|
||||||
|
className="code-line-numbers"
|
||||||
|
ref={(el) => {
|
||||||
|
this.lineNumbersRef = el;
|
||||||
|
}}
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
{lines.map((_, idx) => (
|
||||||
|
<div key={idx + 1} className="code-line-number">
|
||||||
|
{idx + 1}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Syntax Highlighted Code */}
|
||||||
|
<pre className="code-syntax-area" onScroll={this.handleCodeScroll}>
|
||||||
|
<code
|
||||||
|
className={`language-${activeFile.language}`}
|
||||||
|
dangerouslySetInnerHTML={{ __html: highlightedHtml }}
|
||||||
|
/>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
517
src/demo/DemoGrid.tsx
Normal file
517
src/demo/DemoGrid.tsx
Normal file
@@ -0,0 +1,517 @@
|
|||||||
|
/**
|
||||||
|
* DemoGrid.tsx
|
||||||
|
*
|
||||||
|
* Demo PureComponent showing AutomatGrid in action.
|
||||||
|
* Subscribes to demoGridAutomat for status display and
|
||||||
|
* demonstrates interactive server-side sorting, column filtering,
|
||||||
|
* floating filter rows, and quick presets.
|
||||||
|
*/
|
||||||
|
import { PureComponent } from 'react';
|
||||||
|
import type { ChangeEvent } from 'react';
|
||||||
|
import { AutomatGrid } from '../lib/AutomatGrid';
|
||||||
|
import { demoGridAutomat } from './demoAutomat';
|
||||||
|
import type { ProductRow } from './demoAutomat';
|
||||||
|
import type { ColDef } from 'ag-grid-community';
|
||||||
|
import type { SortModelItem } from '../lib/createGridAutomat';
|
||||||
|
|
||||||
|
// ─── Status badge renderer ──────────────────────────────────────
|
||||||
|
|
||||||
|
function StatusBadge({ value }: { value: string }) {
|
||||||
|
const colors: Record<string, { bg: string; fg: string }> = {
|
||||||
|
active: { bg: '#059669', fg: '#ecfdf5' },
|
||||||
|
pending: { bg: '#d97706', fg: '#fffbeb' },
|
||||||
|
discontinued: { bg: '#dc2626', fg: '#fef2f2' },
|
||||||
|
};
|
||||||
|
const c = colors[value] ?? { bg: '#4b5563', fg: '#f3f4f6' };
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
background: c.bg,
|
||||||
|
color: c.fg,
|
||||||
|
padding: '3px 10px',
|
||||||
|
borderRadius: 12,
|
||||||
|
fontSize: 11,
|
||||||
|
fontWeight: 600,
|
||||||
|
textTransform: 'capitalize',
|
||||||
|
letterSpacing: 0.3,
|
||||||
|
display: 'inline-block',
|
||||||
|
lineHeight: 1.2,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{value}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Column definitions with full filter & sort support ──────────
|
||||||
|
|
||||||
|
const COLUMN_DEFS: ColDef<ProductRow>[] = [
|
||||||
|
{
|
||||||
|
headerName: '#',
|
||||||
|
field: 'id',
|
||||||
|
maxWidth: 90,
|
||||||
|
sortable: true,
|
||||||
|
filter: 'agNumberColumnFilter',
|
||||||
|
floatingFilter: true,
|
||||||
|
cellStyle: { fontVariantNumeric: 'tabular-nums' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
headerName: 'SKU',
|
||||||
|
field: 'sku',
|
||||||
|
maxWidth: 140,
|
||||||
|
sortable: true,
|
||||||
|
filter: 'agTextColumnFilter',
|
||||||
|
floatingFilter: true,
|
||||||
|
cellStyle: { fontVariantNumeric: 'tabular-nums' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
headerName: 'Product Name',
|
||||||
|
field: 'name',
|
||||||
|
minWidth: 220,
|
||||||
|
flex: 2,
|
||||||
|
sortable: true,
|
||||||
|
filter: 'agTextColumnFilter',
|
||||||
|
floatingFilter: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
headerName: 'Category',
|
||||||
|
field: 'category',
|
||||||
|
minWidth: 150,
|
||||||
|
sortable: true,
|
||||||
|
filter: 'agTextColumnFilter',
|
||||||
|
floatingFilter: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
headerName: 'Price',
|
||||||
|
field: 'price',
|
||||||
|
maxWidth: 130,
|
||||||
|
sortable: true,
|
||||||
|
filter: 'agNumberColumnFilter',
|
||||||
|
floatingFilter: true,
|
||||||
|
valueFormatter: (p) => (p.value != null ? `€${Number(p.value).toFixed(2)}` : ''),
|
||||||
|
cellStyle: { textAlign: 'right', fontVariantNumeric: 'tabular-nums' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
headerName: 'Stock',
|
||||||
|
field: 'stock',
|
||||||
|
maxWidth: 110,
|
||||||
|
sortable: true,
|
||||||
|
filter: 'agNumberColumnFilter',
|
||||||
|
floatingFilter: true,
|
||||||
|
cellStyle: { textAlign: 'right', fontVariantNumeric: 'tabular-nums' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
headerName: 'Supplier',
|
||||||
|
field: 'supplier',
|
||||||
|
minWidth: 160,
|
||||||
|
sortable: true,
|
||||||
|
filter: 'agTextColumnFilter',
|
||||||
|
floatingFilter: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
headerName: 'Rating',
|
||||||
|
field: 'rating',
|
||||||
|
maxWidth: 100,
|
||||||
|
sortable: true,
|
||||||
|
filter: 'agNumberColumnFilter',
|
||||||
|
floatingFilter: true,
|
||||||
|
valueFormatter: (p) => (p.value != null ? `${Number(p.value).toFixed(1)} ★` : ''),
|
||||||
|
cellStyle: { textAlign: 'center' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
headerName: 'Status',
|
||||||
|
field: 'status',
|
||||||
|
maxWidth: 140,
|
||||||
|
sortable: true,
|
||||||
|
filter: 'agTextColumnFilter',
|
||||||
|
floatingFilter: true,
|
||||||
|
cellRenderer: StatusBadge,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
headerName: 'Updated',
|
||||||
|
field: 'lastUpdated',
|
||||||
|
maxWidth: 130,
|
||||||
|
sortable: true,
|
||||||
|
filter: 'agTextColumnFilter',
|
||||||
|
floatingFilter: true,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// ─── Component Props & State ─────────────────────────────────────
|
||||||
|
|
||||||
|
export interface DemoGridProps {
|
||||||
|
onNavigateView?: (view: 'demo' | 'docs' | 'code' | 'split') => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DemoGridState {
|
||||||
|
loading: boolean;
|
||||||
|
ready: boolean;
|
||||||
|
totalRows: number;
|
||||||
|
error: string | null;
|
||||||
|
sortModel: SortModelItem[];
|
||||||
|
filterModel: Record<string, unknown>;
|
||||||
|
revision: number;
|
||||||
|
searchValue: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Demo Component ──────────────────────────────────────────────
|
||||||
|
|
||||||
|
export class DemoGrid extends PureComponent<DemoGridProps, DemoGridState> {
|
||||||
|
private unsub: (() => void) | null = null;
|
||||||
|
private searchTimeout: ReturnType<typeof setTimeout> | null = null;
|
||||||
|
|
||||||
|
constructor(props: DemoGridProps) {
|
||||||
|
super(props);
|
||||||
|
const s = demoGridAutomat.state;
|
||||||
|
this.state = {
|
||||||
|
loading: s.loading,
|
||||||
|
ready: s.ready,
|
||||||
|
totalRows: s.totalRows,
|
||||||
|
error: s.error,
|
||||||
|
sortModel: s.sortModel,
|
||||||
|
filterModel: s.filterModel,
|
||||||
|
revision: s.revision,
|
||||||
|
searchValue: '',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount(): void {
|
||||||
|
this.unsub = demoGridAutomat.subscribe(
|
||||||
|
this as unknown as import('react').PureComponent,
|
||||||
|
(s) => ({
|
||||||
|
loading: s.loading,
|
||||||
|
ready: s.ready,
|
||||||
|
totalRows: s.totalRows,
|
||||||
|
error: s.error,
|
||||||
|
sortModel: s.sortModel,
|
||||||
|
filterModel: s.filterModel,
|
||||||
|
revision: s.revision,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount(): void {
|
||||||
|
this.unsub?.();
|
||||||
|
if (this.searchTimeout) {
|
||||||
|
clearTimeout(this.searchTimeout);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Actions ───────────────────────────────────────────────────
|
||||||
|
|
||||||
|
private handleReload = (): void => {
|
||||||
|
demoGridAutomat.actions.reload();
|
||||||
|
};
|
||||||
|
|
||||||
|
private handleSetSort = (colId: string, dir: 'asc' | 'desc'): void => {
|
||||||
|
demoGridAutomat.actions.setSort([{ colId, sort: dir }]);
|
||||||
|
};
|
||||||
|
|
||||||
|
private handleClearSort = (): void => {
|
||||||
|
demoGridAutomat.actions.setSort([]);
|
||||||
|
};
|
||||||
|
|
||||||
|
private handleSetFilterPreset = (filterModel: Record<string, unknown>): void => {
|
||||||
|
this.setState({ searchValue: '' });
|
||||||
|
demoGridAutomat.actions.setFilter(filterModel);
|
||||||
|
};
|
||||||
|
|
||||||
|
private handleClearFilter = (): void => {
|
||||||
|
this.setState({ searchValue: '' });
|
||||||
|
demoGridAutomat.actions.setFilter({});
|
||||||
|
};
|
||||||
|
|
||||||
|
private handleSearchInput = (e: ChangeEvent<HTMLInputElement>): void => {
|
||||||
|
const val = e.target.value;
|
||||||
|
this.setState({ searchValue: val });
|
||||||
|
|
||||||
|
if (this.searchTimeout) {
|
||||||
|
clearTimeout(this.searchTimeout);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.searchTimeout = setTimeout(() => {
|
||||||
|
const current = { ...demoGridAutomat.state.filterModel };
|
||||||
|
if (!val.trim()) {
|
||||||
|
delete current.name;
|
||||||
|
} else {
|
||||||
|
current.name = {
|
||||||
|
filterType: 'text',
|
||||||
|
type: 'contains',
|
||||||
|
filter: val.trim(),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
demoGridAutomat.actions.setFilter(current);
|
||||||
|
}, 200);
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { loading, totalRows, error, sortModel, filterModel, revision, searchValue } = this.state;
|
||||||
|
|
||||||
|
const hasFilters = Object.keys(filterModel).length > 0;
|
||||||
|
const hasSort = sortModel.length > 0;
|
||||||
|
|
||||||
|
// Formatting active sort description
|
||||||
|
const currentSort = sortModel[0];
|
||||||
|
const sortSummary = currentSort
|
||||||
|
? `${currentSort.colId.toUpperCase()} (${currentSort.sort === 'asc' ? '↑ Asc' : '↓ Desc'})`
|
||||||
|
: 'None (Natural)';
|
||||||
|
|
||||||
|
// Formatting active filter keys
|
||||||
|
const filterKeys = Object.keys(filterModel);
|
||||||
|
const filterSummary = filterKeys.length > 0
|
||||||
|
? filterKeys.map((k) => `${k}`).join(', ')
|
||||||
|
: 'None (All Rows)';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="demo-container">
|
||||||
|
{/* ── Top Header bar ── */}
|
||||||
|
<header className="demo-header">
|
||||||
|
<div className="demo-header-left">
|
||||||
|
<h1 className="demo-title">
|
||||||
|
<span className="demo-title-icon">⚡</span>
|
||||||
|
AutomatGrid Demo
|
||||||
|
</h1>
|
||||||
|
<span className="demo-subtitle">
|
||||||
|
10,000 rows · Infinite scroll · Server sort & filter · Automat-driven
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="demo-header-right">
|
||||||
|
<div className="demo-stats">
|
||||||
|
{totalRows >= 0 && (
|
||||||
|
<span className="demo-stat">
|
||||||
|
{totalRows.toLocaleString()} rows
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{error && (
|
||||||
|
<span className="demo-stat demo-stat--error">
|
||||||
|
⚠ {error}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{this.props.onNavigateView && (
|
||||||
|
<div className="demo-header-actions">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="demo-pill-btn"
|
||||||
|
onClick={() => this.props.onNavigateView?.('docs')}
|
||||||
|
title="View full README documentation"
|
||||||
|
>
|
||||||
|
📖 Docs
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="demo-pill-btn"
|
||||||
|
onClick={() => this.props.onNavigateView?.('code')}
|
||||||
|
title="View demo & library source code"
|
||||||
|
>
|
||||||
|
💻 Code
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="demo-reload-btn"
|
||||||
|
onClick={this.handleReload}
|
||||||
|
disabled={loading}
|
||||||
|
title="Reload data (bumps automat revision)"
|
||||||
|
>
|
||||||
|
↻ Reload
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* ── Sort & Filter Interactive Control Showcase ── */}
|
||||||
|
<section className="demo-toolbar" aria-label="Sort and Filter Controls">
|
||||||
|
{/* Row 1: Filters */}
|
||||||
|
<div className="demo-toolbar-row">
|
||||||
|
<div className="demo-search-box">
|
||||||
|
<span className="demo-search-icon">🔍</span>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="demo-search-input"
|
||||||
|
placeholder="Filter by Product Name..."
|
||||||
|
value={searchValue}
|
||||||
|
onChange={this.handleSearchInput}
|
||||||
|
/>
|
||||||
|
{searchValue && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="demo-search-clear"
|
||||||
|
onClick={() => {
|
||||||
|
this.setState({ searchValue: '' });
|
||||||
|
const current = { ...demoGridAutomat.state.filterModel };
|
||||||
|
delete current.name;
|
||||||
|
demoGridAutomat.actions.setFilter(current);
|
||||||
|
}}
|
||||||
|
title="Clear name filter"
|
||||||
|
>
|
||||||
|
✕
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="demo-preset-group">
|
||||||
|
<span className="demo-group-label">Filter Presets:</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`demo-filter-btn ${!hasFilters ? 'active' : ''}`}
|
||||||
|
onClick={this.handleClearFilter}
|
||||||
|
>
|
||||||
|
All (10k)
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`demo-filter-btn ${filterModel.status ? 'active' : ''}`}
|
||||||
|
onClick={() => this.handleSetFilterPreset({ status: { filterType: 'text', type: 'equals', filter: 'active' } })}
|
||||||
|
>
|
||||||
|
🟢 Active
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`demo-filter-btn`}
|
||||||
|
onClick={() => this.handleSetFilterPreset({ status: { filterType: 'text', type: 'equals', filter: 'pending' } })}
|
||||||
|
>
|
||||||
|
🟡 Pending
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`demo-filter-btn`}
|
||||||
|
onClick={() => this.handleSetFilterPreset({ status: { filterType: 'text', type: 'equals', filter: 'discontinued' } })}
|
||||||
|
>
|
||||||
|
🔴 Discontinued
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`demo-filter-btn ${filterModel.category ? 'active' : ''}`}
|
||||||
|
onClick={() => this.handleSetFilterPreset({ category: { filterType: 'text', type: 'contains', filter: 'Electronics' } })}
|
||||||
|
>
|
||||||
|
⚡ Electronics
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`demo-filter-btn ${filterModel.rating ? 'active' : ''}`}
|
||||||
|
onClick={() => this.handleSetFilterPreset({ rating: { filterType: 'number', type: 'greaterThanOrEqual', filter: 4 } })}
|
||||||
|
>
|
||||||
|
★ Rating ≥ 4.0
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`demo-filter-btn ${filterModel.stock ? 'active' : ''}`}
|
||||||
|
onClick={() => this.handleSetFilterPreset({ stock: { filterType: 'number', type: 'lessThan', filter: 500 } })}
|
||||||
|
>
|
||||||
|
📉 Low Stock (<500)
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`demo-filter-btn ${filterModel.price ? 'active' : ''}`}
|
||||||
|
onClick={() => this.handleSetFilterPreset({ price: { filterType: 'number', type: 'lessThan', filter: 50 } })}
|
||||||
|
>
|
||||||
|
🏷 Price < €50
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Row 2: Sorts & Live State Indicator */}
|
||||||
|
<div className="demo-toolbar-row demo-toolbar-row--sub">
|
||||||
|
<div className="demo-preset-group">
|
||||||
|
<span className="demo-group-label">Quick Sort:</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`demo-sort-btn ${currentSort?.colId === 'price' && currentSort?.sort === 'asc' ? 'active' : ''}`}
|
||||||
|
onClick={() => this.handleSetSort('price', 'asc')}
|
||||||
|
>
|
||||||
|
Price: Low → High
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`demo-sort-btn ${currentSort?.colId === 'price' && currentSort?.sort === 'desc' ? 'active' : ''}`}
|
||||||
|
onClick={() => this.handleSetSort('price', 'desc')}
|
||||||
|
>
|
||||||
|
Price: High → Low
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`demo-sort-btn ${currentSort?.colId === 'rating' && currentSort?.sort === 'desc' ? 'active' : ''}`}
|
||||||
|
onClick={() => this.handleSetSort('rating', 'desc')}
|
||||||
|
>
|
||||||
|
Rating: High → Low
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`demo-sort-btn ${currentSort?.colId === 'name' && currentSort?.sort === 'asc' ? 'active' : ''}`}
|
||||||
|
onClick={() => this.handleSetSort('name', 'asc')}
|
||||||
|
>
|
||||||
|
Name: A → Z
|
||||||
|
</button>
|
||||||
|
{hasSort && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="demo-clear-btn"
|
||||||
|
onClick={this.handleClearSort}
|
||||||
|
>
|
||||||
|
✕ Clear Sort
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Live Automat State Pills */}
|
||||||
|
<div className="demo-automat-state-bar">
|
||||||
|
<span className="state-badge state-badge--sort" title="Active Sort Model in demoGridAutomat">
|
||||||
|
Sort: <strong>{sortSummary}</strong>
|
||||||
|
</span>
|
||||||
|
<span className="state-badge state-badge--filter" title="Active Filter Model in demoGridAutomat">
|
||||||
|
Filter: <strong>{filterSummary}</strong>
|
||||||
|
</span>
|
||||||
|
<span className="state-badge state-badge--rev" title="Current store revision count">
|
||||||
|
Rev: <strong>#{revision}</strong>
|
||||||
|
</span>
|
||||||
|
{(hasFilters || hasSort) && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="demo-reset-all-btn"
|
||||||
|
onClick={() => {
|
||||||
|
this.handleClearFilter();
|
||||||
|
this.handleClearSort();
|
||||||
|
}}
|
||||||
|
title="Reset all filters and sorting"
|
||||||
|
>
|
||||||
|
Reset All
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── Virtual Grid ── */}
|
||||||
|
<div className="demo-grid-wrapper">
|
||||||
|
<AutomatGrid<ProductRow>
|
||||||
|
automat={demoGridAutomat}
|
||||||
|
columnDefs={COLUMN_DEFS}
|
||||||
|
defaultColDef={{
|
||||||
|
sortable: true,
|
||||||
|
resizable: true,
|
||||||
|
filter: true,
|
||||||
|
floatingFilter: true,
|
||||||
|
}}
|
||||||
|
rowIdField="id"
|
||||||
|
cacheBlockSize={100}
|
||||||
|
maxBlocksInCache={100}
|
||||||
|
infiniteInitialRowCount={10000}
|
||||||
|
blockLoadDebounceMillis={80}
|
||||||
|
height="100%"
|
||||||
|
width="100%"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── Footer ── */}
|
||||||
|
<footer className="demo-footer">
|
||||||
|
<span>
|
||||||
|
<code>react-automat</code> + <code>ag-grid-react</code> · Virtualized PureComponent with Server-Side Sort & Filter
|
||||||
|
</span>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
195
src/demo/DocViewer.tsx
Normal file
195
src/demo/DocViewer.tsx
Normal file
@@ -0,0 +1,195 @@
|
|||||||
|
import { PureComponent } from 'react';
|
||||||
|
import { marked } from 'marked';
|
||||||
|
import Prism from 'prismjs';
|
||||||
|
import 'prismjs/components/prism-typescript';
|
||||||
|
import 'prismjs/components/prism-jsx';
|
||||||
|
import 'prismjs/components/prism-tsx';
|
||||||
|
import 'prismjs/components/prism-bash';
|
||||||
|
import 'prismjs/components/prism-json';
|
||||||
|
import 'prismjs/components/prism-markdown';
|
||||||
|
import readmeRaw from '../../README.md?raw';
|
||||||
|
|
||||||
|
interface TocItem {
|
||||||
|
id: string;
|
||||||
|
text: string;
|
||||||
|
depth: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DocViewerState {
|
||||||
|
html: string;
|
||||||
|
toc: TocItem[];
|
||||||
|
activeHeadingId: string | null;
|
||||||
|
copiedIndex: number | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class DocViewer extends PureComponent<Record<string, never>, DocViewerState> {
|
||||||
|
private contentRef: HTMLElement | null = null;
|
||||||
|
|
||||||
|
constructor(props: Record<string, never>) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
const { html, toc } = this.parseMarkdown(readmeRaw);
|
||||||
|
this.state = {
|
||||||
|
html,
|
||||||
|
toc,
|
||||||
|
activeHeadingId: toc[0]?.id ?? null,
|
||||||
|
copiedIndex: null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
private parseMarkdown(markdown: string): { html: string; toc: TocItem[] } {
|
||||||
|
const toc: TocItem[] = [];
|
||||||
|
|
||||||
|
marked.use({
|
||||||
|
gfm: true,
|
||||||
|
breaks: false,
|
||||||
|
renderer: {
|
||||||
|
heading({ text, depth }) {
|
||||||
|
// Generate URL-friendly slug
|
||||||
|
const plainText = text.replace(/<[^>]+>/g, '').trim();
|
||||||
|
const id = plainText
|
||||||
|
.toLowerCase()
|
||||||
|
.replace(/[^\w\s-]/g, '')
|
||||||
|
.replace(/\s+/g, '-');
|
||||||
|
|
||||||
|
if (depth === 2 || depth === 3) {
|
||||||
|
toc.push({ id, text: plainText, depth });
|
||||||
|
}
|
||||||
|
|
||||||
|
return `<h${depth} id="${id}" class="doc-heading doc-heading-${depth}"><a href="#${id}" class="heading-anchor">#</a>${text}</h${depth}>`;
|
||||||
|
},
|
||||||
|
code({ text, lang }) {
|
||||||
|
const validLang = lang && Prism.languages[lang] ? lang : 'typescript';
|
||||||
|
const grammar = Prism.languages[validLang] || Prism.languages.typescript;
|
||||||
|
let highlighted: string;
|
||||||
|
try {
|
||||||
|
highlighted = Prism.highlight(text, grammar, validLang);
|
||||||
|
} catch {
|
||||||
|
highlighted = text;
|
||||||
|
}
|
||||||
|
|
||||||
|
const encodedRaw = encodeURIComponent(text);
|
||||||
|
return `
|
||||||
|
<div class="doc-code-block" data-raw="${encodedRaw}">
|
||||||
|
<div class="doc-code-header">
|
||||||
|
<span class="doc-code-lang">${lang || 'code'}</span>
|
||||||
|
<button class="doc-code-copy" type="button" aria-label="Copy snippet">Copy</button>
|
||||||
|
</div>
|
||||||
|
<pre class="language-${lang}"><code class="language-${lang}">${highlighted}</code></pre>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
},
|
||||||
|
table({ header, rows }) {
|
||||||
|
return `<div class="doc-table-wrapper"><table class="doc-table"><thead>${header}</thead><tbody>${rows}</tbody></table></div>`;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const html = marked.parse(markdown) as string;
|
||||||
|
return { html, toc };
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount(): void {
|
||||||
|
if (this.contentRef) {
|
||||||
|
this.contentRef.addEventListener('click', this.handleContentClick);
|
||||||
|
}
|
||||||
|
window.addEventListener('scroll', this.handleScroll, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount(): void {
|
||||||
|
if (this.contentRef) {
|
||||||
|
this.contentRef.removeEventListener('click', this.handleContentClick);
|
||||||
|
}
|
||||||
|
window.removeEventListener('scroll', this.handleScroll, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
private handleContentClick = (e: MouseEvent): void => {
|
||||||
|
const target = e.target as HTMLElement;
|
||||||
|
if (target?.classList.contains('doc-code-copy')) {
|
||||||
|
const wrapper = target.closest('.doc-code-block');
|
||||||
|
if (wrapper) {
|
||||||
|
const raw = decodeURIComponent(wrapper.getAttribute('data-raw') || '');
|
||||||
|
navigator.clipboard.writeText(raw).then(() => {
|
||||||
|
const original = target.textContent;
|
||||||
|
target.textContent = 'Copied!';
|
||||||
|
target.classList.add('copied');
|
||||||
|
setTimeout(() => {
|
||||||
|
target.textContent = original;
|
||||||
|
target.classList.remove('copied');
|
||||||
|
}, 1800);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
private handleScroll = (): void => {
|
||||||
|
if (!this.contentRef) return;
|
||||||
|
const headings = this.contentRef.querySelectorAll('.doc-heading');
|
||||||
|
const scrollPos = this.contentRef.scrollTop + 100;
|
||||||
|
|
||||||
|
let currentId: string | null = null;
|
||||||
|
headings.forEach((h) => {
|
||||||
|
const el = h as HTMLElement;
|
||||||
|
if (el.offsetTop <= scrollPos) {
|
||||||
|
currentId = el.id;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (currentId && currentId !== this.state.activeHeadingId) {
|
||||||
|
this.setState({ activeHeadingId: currentId });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
private scrollToHeading = (id: string): void => {
|
||||||
|
if (!this.contentRef) return;
|
||||||
|
const target = this.contentRef.querySelector(`#${id}`) as HTMLElement;
|
||||||
|
if (target) {
|
||||||
|
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||||
|
this.setState({ activeHeadingId: id });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { html, toc, activeHeadingId } = this.state;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="doc-layout">
|
||||||
|
{/* Table of contents sidebar */}
|
||||||
|
<aside className="doc-sidebar">
|
||||||
|
<div className="doc-sidebar-header">
|
||||||
|
<span className="doc-sidebar-icon">📑</span>
|
||||||
|
<span>Documentation</span>
|
||||||
|
</div>
|
||||||
|
<nav className="doc-toc">
|
||||||
|
{toc.map((item) => (
|
||||||
|
<button
|
||||||
|
key={item.id}
|
||||||
|
type="button"
|
||||||
|
className={`doc-toc-item doc-toc-depth-${item.depth} ${
|
||||||
|
activeHeadingId === item.id ? 'active' : ''
|
||||||
|
}`}
|
||||||
|
onClick={() => this.scrollToHeading(item.id)}
|
||||||
|
>
|
||||||
|
{item.text}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
{/* Main rendered documentation */}
|
||||||
|
<main
|
||||||
|
className="doc-content-container"
|
||||||
|
ref={(el) => {
|
||||||
|
this.contentRef = el;
|
||||||
|
}}
|
||||||
|
onScroll={this.handleScroll}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="doc-content"
|
||||||
|
dangerouslySetInnerHTML={{ __html: html }}
|
||||||
|
/>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
222
src/demo/demoAutomat.ts
Normal file
222
src/demo/demoAutomat.ts
Normal file
@@ -0,0 +1,222 @@
|
|||||||
|
/**
|
||||||
|
* demoAutomat.ts
|
||||||
|
*
|
||||||
|
* Demo data generator & grid automat for the showcase app.
|
||||||
|
* Generates 10,000 fake product rows and serves them through a simulated
|
||||||
|
* async fetcher with configurable latency — demonstrating how AutomatGrid
|
||||||
|
* virtualizes a large dataset.
|
||||||
|
*/
|
||||||
|
import { createGridAutomat } from '../lib/createGridAutomat';
|
||||||
|
import type { GridFetchParams, GridFetchResult } from '../lib/createGridAutomat';
|
||||||
|
|
||||||
|
// ─── Demo row type ───────────────────────────────────────────────
|
||||||
|
|
||||||
|
export interface ProductRow {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
sku: string;
|
||||||
|
category: string;
|
||||||
|
price: number;
|
||||||
|
stock: number;
|
||||||
|
supplier: string;
|
||||||
|
rating: number;
|
||||||
|
status: 'active' | 'discontinued' | 'pending';
|
||||||
|
lastUpdated: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Fake data generation ────────────────────────────────────────
|
||||||
|
|
||||||
|
const CATEGORIES = [
|
||||||
|
'Electronics', 'Clothing', 'Home & Garden', 'Sports', 'Books',
|
||||||
|
'Toys', 'Automotive', 'Health', 'Food & Beverage', 'Office',
|
||||||
|
];
|
||||||
|
|
||||||
|
const SUPPLIERS = [
|
||||||
|
'Globex Corp', 'Initech', 'Umbrella Co', 'Stark Industries',
|
||||||
|
'Wayne Enterprises', 'Cyberdyne', 'Acme Corp', 'Soylent',
|
||||||
|
'Weyland-Yutani', 'Tyrell Corp',
|
||||||
|
];
|
||||||
|
|
||||||
|
const ADJECTIVES = [
|
||||||
|
'Ultra', 'Premium', 'Elite', 'Pro', 'Max', 'Nano', 'Hyper',
|
||||||
|
'Mega', 'Smart', 'Eco', 'Turbo', 'Quantum', 'Apex', 'Prime',
|
||||||
|
];
|
||||||
|
|
||||||
|
const PRODUCTS = [
|
||||||
|
'Widget', 'Gadget', 'Module', 'Sensor', 'Drive', 'Board',
|
||||||
|
'Panel', 'Switch', 'Cable', 'Adapter', 'Battery', 'Display',
|
||||||
|
'Controller', 'Router', 'Hub', 'Filter', 'Valve', 'Motor',
|
||||||
|
];
|
||||||
|
|
||||||
|
const STATUSES: ProductRow['status'][] = ['active', 'discontinued', 'pending'];
|
||||||
|
|
||||||
|
function seededRandom(seed: number): () => number {
|
||||||
|
let s = seed;
|
||||||
|
return () => {
|
||||||
|
s = (s * 16807 + 0) % 2147483647;
|
||||||
|
return s / 2147483647;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateProducts(count: number): ProductRow[] {
|
||||||
|
const rng = seededRandom(42);
|
||||||
|
const rows: ProductRow[] = [];
|
||||||
|
|
||||||
|
for (let i = 0; i < count; i++) {
|
||||||
|
const adj = ADJECTIVES[Math.floor(rng() * ADJECTIVES.length)];
|
||||||
|
const prod = PRODUCTS[Math.floor(rng() * PRODUCTS.length)];
|
||||||
|
const cat = CATEGORIES[Math.floor(rng() * CATEGORIES.length)];
|
||||||
|
const sup = SUPPLIERS[Math.floor(rng() * SUPPLIERS.length)];
|
||||||
|
const status = STATUSES[Math.floor(rng() * STATUSES.length)];
|
||||||
|
|
||||||
|
const year = 2024 + Math.floor(rng() * 3);
|
||||||
|
const month = 1 + Math.floor(rng() * 12);
|
||||||
|
const day = 1 + Math.floor(rng() * 28);
|
||||||
|
|
||||||
|
rows.push({
|
||||||
|
id: i + 1,
|
||||||
|
name: `${adj} ${prod} ${i + 1}`,
|
||||||
|
sku: `SKU-${String(i + 1).padStart(6, '0')}`,
|
||||||
|
category: cat,
|
||||||
|
price: Math.round((rng() * 999 + 1) * 100) / 100,
|
||||||
|
stock: Math.floor(rng() * 5000),
|
||||||
|
supplier: sup,
|
||||||
|
rating: Math.round(rng() * 50) / 10,
|
||||||
|
status,
|
||||||
|
lastUpdated: `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return rows;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pre-generate the dataset once at module load
|
||||||
|
const ALL_PRODUCTS = generateProducts(10_000);
|
||||||
|
|
||||||
|
// ─── Simulated fetcher ───────────────────────────────────────────
|
||||||
|
|
||||||
|
/** Helper to evaluate a single filter condition on a row value. */
|
||||||
|
function matchesCondition(rawVal: unknown, filter: {
|
||||||
|
filter?: string | number;
|
||||||
|
filterTo?: number;
|
||||||
|
type?: string;
|
||||||
|
filterType?: string;
|
||||||
|
}): boolean {
|
||||||
|
if (filter.type === 'blank') {
|
||||||
|
return rawVal == null || rawVal === '';
|
||||||
|
}
|
||||||
|
if (filter.type === 'notBlank') {
|
||||||
|
return rawVal != null && rawVal !== '';
|
||||||
|
}
|
||||||
|
if (filter.filter == null && filter.filterTo == null) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Number comparison if filter is numeric or value is numeric
|
||||||
|
if (typeof filter.filter === 'number' || filter.filterType === 'number' || typeof rawVal === 'number') {
|
||||||
|
const val = Number(rawVal);
|
||||||
|
const target = Number(filter.filter);
|
||||||
|
if (isNaN(val)) return false;
|
||||||
|
|
||||||
|
switch (filter.type) {
|
||||||
|
case 'equals': return val === target;
|
||||||
|
case 'notEqual': return val !== target;
|
||||||
|
case 'greaterThan': return val > target;
|
||||||
|
case 'greaterThanOrEqual': return val >= target;
|
||||||
|
case 'lessThan': return val < target;
|
||||||
|
case 'lessThanOrEqual': return val <= target;
|
||||||
|
case 'inRange': {
|
||||||
|
const to = Number(filter.filterTo ?? target);
|
||||||
|
return val >= target && val <= to;
|
||||||
|
}
|
||||||
|
default: return val === target;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// String comparison
|
||||||
|
const strVal = String(rawVal ?? '').toLowerCase();
|
||||||
|
const filterText = String(filter.filter).toLowerCase().trim();
|
||||||
|
|
||||||
|
switch (filter.type) {
|
||||||
|
case 'equals': return strVal === filterText;
|
||||||
|
case 'notEqual': return strVal !== filterText;
|
||||||
|
case 'startsWith': return strVal.startsWith(filterText);
|
||||||
|
case 'endsWith': return strVal.endsWith(filterText);
|
||||||
|
case 'contains':
|
||||||
|
default:
|
||||||
|
return strVal.includes(filterText);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Simulated server-side sort & filter + paginated fetch with artificial latency. */
|
||||||
|
async function fetchProducts(params: GridFetchParams): Promise<GridFetchResult<ProductRow>> {
|
||||||
|
// Simulate network latency (40-100ms)
|
||||||
|
await new Promise((r) => setTimeout(r, 40 + Math.random() * 60));
|
||||||
|
|
||||||
|
let data = [...ALL_PRODUCTS];
|
||||||
|
|
||||||
|
// 1. Server-side sorting
|
||||||
|
if (params.sortModel.length > 0) {
|
||||||
|
const sorts = params.sortModel;
|
||||||
|
data.sort((a, b) => {
|
||||||
|
for (const sort of sorts) {
|
||||||
|
const dir = sort.sort === 'asc' ? 1 : -1;
|
||||||
|
const aVal = a[sort.colId as keyof ProductRow];
|
||||||
|
const bVal = b[sort.colId as keyof ProductRow];
|
||||||
|
|
||||||
|
if (typeof aVal === 'number' && typeof bVal === 'number') {
|
||||||
|
if (aVal !== bVal) return (aVal - bVal) * dir;
|
||||||
|
} else {
|
||||||
|
const aStr = String(aVal ?? '');
|
||||||
|
const bStr = String(bVal ?? '');
|
||||||
|
const cmp = aStr.localeCompare(bStr, undefined, { numeric: true });
|
||||||
|
if (cmp !== 0) return cmp * dir;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. Server-side filtering
|
||||||
|
const filterKeys = Object.keys(params.filterModel);
|
||||||
|
if (filterKeys.length > 0) {
|
||||||
|
for (const key of filterKeys) {
|
||||||
|
const model = params.filterModel[key] as {
|
||||||
|
operator?: 'AND' | 'OR';
|
||||||
|
conditions?: Array<{ filter?: string | number; filterTo?: number; type?: string; filterType?: string }>;
|
||||||
|
filter?: string | number;
|
||||||
|
filterTo?: number;
|
||||||
|
type?: string;
|
||||||
|
filterType?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
if (model.conditions && model.conditions.length > 0) {
|
||||||
|
data = data.filter((row) => {
|
||||||
|
const rawVal = row[key as keyof ProductRow];
|
||||||
|
if (model.operator === 'OR') {
|
||||||
|
return model.conditions!.some((cond) => matchesCondition(rawVal, cond));
|
||||||
|
}
|
||||||
|
return model.conditions!.every((cond) => matchesCondition(rawVal, cond));
|
||||||
|
});
|
||||||
|
} else if (model.filter != null || model.type === 'blank' || model.type === 'notBlank') {
|
||||||
|
data = data.filter((row) => {
|
||||||
|
const rawVal = row[key as keyof ProductRow];
|
||||||
|
return matchesCondition(rawVal, model);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const rows = data.slice(params.startRow, params.endRow);
|
||||||
|
const lastRow = data.length;
|
||||||
|
|
||||||
|
return { rows, lastRow };
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Grid automat instance ───────────────────────────────────────
|
||||||
|
|
||||||
|
export const demoGridAutomat = createGridAutomat<ProductRow>({
|
||||||
|
fetchRows: fetchProducts,
|
||||||
|
name: 'demoGrid',
|
||||||
|
blockSize: 100,
|
||||||
|
});
|
||||||
429
src/index.css
Normal file
429
src/index.css
Normal file
@@ -0,0 +1,429 @@
|
|||||||
|
*, *::before, *::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body, #root {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
font-family: system-ui, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-shell {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-topbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-topbar-brand {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-nav-tabs, .app-split-tabs, .code-viewer-tabs {
|
||||||
|
display: flex;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-tab-btn, .split-tab-btn, .code-tab-btn, .demo-filter-btn, .demo-sort-btn, .demo-reload-btn, .demo-reset-all-btn {
|
||||||
|
padding: 4px 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-tab-btn.active, .split-tab-btn.active, .code-tab-btn.active, .demo-filter-btn.active, .demo-sort-btn.active {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-viewport, .split-right-content {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.split-view-container {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.split-pane {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.split-pane-right {
|
||||||
|
border-left: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.split-right-header {
|
||||||
|
padding: 6px 12px;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-container, .demo-page {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
padding: 8px;
|
||||||
|
gap: 6px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 8px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-header-left, .demo-header-right, .demo-stats, .demo-header-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-toolbar-row, .demo-automat-state-bar, .code-file-meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-toolbar {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
padding: 6px 8px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-search-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-preset-group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-grid-wrapper {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-layout {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-sidebar {
|
||||||
|
width: 220px;
|
||||||
|
overflow-y: auto;
|
||||||
|
border-right: 1px solid #ccc;
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-toc {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-toc-item {
|
||||||
|
text-align: left;
|
||||||
|
cursor: pointer;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-toc-item.active {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-content-container, .doc-content-wrapper {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 20px 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-content {
|
||||||
|
max-width: 900px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-content h1 {
|
||||||
|
font-size: 24px;
|
||||||
|
margin: 0 0 16px 0;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-content h2 {
|
||||||
|
font-size: 18px;
|
||||||
|
margin: 24px 0 12px 0;
|
||||||
|
padding-bottom: 6px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-content h3 {
|
||||||
|
font-size: 15px;
|
||||||
|
margin: 16px 0 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-content p {
|
||||||
|
margin: 0 0 12px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-content ul, .doc-content ol {
|
||||||
|
margin: 0 0 12px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-content li {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-content code {
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
background: #f0f0f0;
|
||||||
|
padding: 2px 4px;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-code-block {
|
||||||
|
margin: 12px 0;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-code-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
background: #f4f4f4;
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-code-copy {
|
||||||
|
padding: 2px 6px;
|
||||||
|
font-size: 11px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-code-block pre {
|
||||||
|
margin: 0;
|
||||||
|
padding: 10px;
|
||||||
|
overflow-x: auto;
|
||||||
|
background: #fafafa;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-table-wrapper {
|
||||||
|
overflow-x: auto;
|
||||||
|
margin: 12px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-table th, .doc-table td {
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
padding: 6px 10px;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-table th {
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-viewer-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-viewer-tabs {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
background: #f8f9fa;
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-tabs-group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-tabs-label {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #666;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-tab-btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 3px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-tab-btn.active {
|
||||||
|
background: #0066cc;
|
||||||
|
color: #fff;
|
||||||
|
border-color: #0066cc;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-file-meta {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 6px 12px;
|
||||||
|
background: #fff;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
font-size: 12px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-file-details {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-file-tag {
|
||||||
|
font-size: 10px;
|
||||||
|
padding: 1px 5px;
|
||||||
|
background: #eee;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-file-name {
|
||||||
|
font-weight: 600;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-file-desc {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-file-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-file-lines {
|
||||||
|
color: #888;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-copy-full-btn {
|
||||||
|
padding: 3px 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-editor-layout {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #fdfdfd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-line-numbers {
|
||||||
|
padding: 10px 8px;
|
||||||
|
border-right: 1px solid #e0e0e0;
|
||||||
|
background: #f7f7f7;
|
||||||
|
user-select: none;
|
||||||
|
text-align: right;
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: #999;
|
||||||
|
overflow: hidden;
|
||||||
|
flex-shrink: 0;
|
||||||
|
min-width: 45px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-line-number {
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-syntax-area, .code-pre-container {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
min-height: 0;
|
||||||
|
overflow: auto;
|
||||||
|
padding: 10px 12px;
|
||||||
|
margin: 0;
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.5;
|
||||||
|
background: transparent;
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
393
src/lib/AutomatGrid.tsx
Normal file
393
src/lib/AutomatGrid.tsx
Normal file
@@ -0,0 +1,393 @@
|
|||||||
|
/**
|
||||||
|
* AutomatGrid.tsx
|
||||||
|
*
|
||||||
|
* Opinionated, fully-virtualized AG Grid component powered by react-automat.
|
||||||
|
*
|
||||||
|
* This is a React PureComponent that:
|
||||||
|
* - Subscribes to a GridAutomat store for reactive state (loading, revision, sort, filter)
|
||||||
|
* - Wires the automat's fetcher into AG Grid's infinite-scroll IDatasource
|
||||||
|
* - Automatically resets the datasource when the automat's revision bumps
|
||||||
|
* - Exposes the AG Grid API ref via `onGridApiReady` callback prop
|
||||||
|
*
|
||||||
|
* Usage:
|
||||||
|
* import { AutomatGrid } from 'react-virtual-aggridautomat';
|
||||||
|
* import { createGridAutomat } from 'react-virtual-aggridautomat';
|
||||||
|
*
|
||||||
|
* const gridAutomat = createGridAutomat({ fetchRows: myFetcher });
|
||||||
|
*
|
||||||
|
* class MyView extends PureComponent {
|
||||||
|
* render() {
|
||||||
|
* return <AutomatGrid automat={gridAutomat} columnDefs={cols} />;
|
||||||
|
* }
|
||||||
|
* }
|
||||||
|
*/
|
||||||
|
import { PureComponent, createRef } from 'react';
|
||||||
|
import type { RefObject } from 'react';
|
||||||
|
import {
|
||||||
|
type ColDef,
|
||||||
|
type GridApi,
|
||||||
|
type GridReadyEvent,
|
||||||
|
type IDatasource,
|
||||||
|
type IGetRowsParams,
|
||||||
|
type SortChangedEvent,
|
||||||
|
type FilterChangedEvent,
|
||||||
|
type GetRowIdParams,
|
||||||
|
type Module,
|
||||||
|
InfiniteRowModelModule,
|
||||||
|
TextFilterModule,
|
||||||
|
NumberFilterModule,
|
||||||
|
CustomFilterModule,
|
||||||
|
DateFilterModule,
|
||||||
|
CellStyleModule,
|
||||||
|
ColumnApiModule,
|
||||||
|
ColumnAutoSizeModule,
|
||||||
|
} from 'ag-grid-community';
|
||||||
|
import { AgGridProvider, AgGridReact } from 'ag-grid-react';
|
||||||
|
import type { Automat } from 'react-automat';
|
||||||
|
import type { GridAutomatState, GridAutomatActions, GridFetchParams, SortModelItem } from './createGridAutomat';
|
||||||
|
|
||||||
|
// ─── Props ───────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
export interface AutomatGridProps<TRow = Record<string, unknown>> {
|
||||||
|
/** The GridAutomat store instance created by createGridAutomat(). */
|
||||||
|
automat: Automat<GridAutomatState<TRow>, GridAutomatActions>;
|
||||||
|
|
||||||
|
/** AG Grid column definitions. */
|
||||||
|
columnDefs: ColDef<TRow>[];
|
||||||
|
|
||||||
|
/** Default column definition applied to all columns. */
|
||||||
|
defaultColDef?: ColDef<TRow>;
|
||||||
|
|
||||||
|
/** Row ID field name for stable infinite-scroll selection. Defaults to 'id'. */
|
||||||
|
rowIdField?: string;
|
||||||
|
|
||||||
|
/** Cache block size override (defaults to automat's _blockSize). */
|
||||||
|
cacheBlockSize?: number;
|
||||||
|
|
||||||
|
/** Number of rows rendered outside the visible area. Default 0 (optimal for virtualization). */
|
||||||
|
rowBuffer?: number;
|
||||||
|
|
||||||
|
/** Initial row count hint for the scrollbar. Default 200. */
|
||||||
|
infiniteInitialRowCount?: number;
|
||||||
|
|
||||||
|
/** Max concurrent datasource requests. Default 2. */
|
||||||
|
maxConcurrentDatasourceRequests?: number;
|
||||||
|
|
||||||
|
/** Max blocks to keep in the cache. Default 10. */
|
||||||
|
maxBlocksInCache?: number;
|
||||||
|
|
||||||
|
/** Debounce (ms) before loading blocks on scroll. Default 100. */
|
||||||
|
blockLoadDebounceMillis?: number;
|
||||||
|
|
||||||
|
/** CSS height for the grid container. Default '100%'. */
|
||||||
|
height?: string | number;
|
||||||
|
|
||||||
|
/** CSS width for the grid container. Default '100%'. */
|
||||||
|
width?: string | number;
|
||||||
|
|
||||||
|
/** Additional AG Grid theme CSS class. Defaults to 'ag-theme-alpine ag-theme-alpine-dark'. */
|
||||||
|
theme?: string;
|
||||||
|
|
||||||
|
/** Optional AG Grid modules to register. Defaults to InfiniteRowModelModule + Text/Number/Custom/Date filters. */
|
||||||
|
modules?: Module[];
|
||||||
|
|
||||||
|
/** Called once when the AG Grid API is available. */
|
||||||
|
onGridApiReady?: (api: GridApi<TRow>) => void;
|
||||||
|
|
||||||
|
/** Row height in pixels. Default undefined (uses AG Grid default of 42). */
|
||||||
|
rowHeight?: number;
|
||||||
|
|
||||||
|
/** Header height in pixels. */
|
||||||
|
headerHeight?: number;
|
||||||
|
|
||||||
|
/** Additional AG Grid props passed through. */
|
||||||
|
gridOptions?: Record<string, unknown>;
|
||||||
|
|
||||||
|
/** Whether to suppress horizontal scrollbar. */
|
||||||
|
suppressHorizontalScroll?: boolean;
|
||||||
|
|
||||||
|
/** Whether to animate rows on sort change. */
|
||||||
|
animateRows?: boolean;
|
||||||
|
|
||||||
|
/** Row selection mode. */
|
||||||
|
rowSelection?: 'single' | 'multiple';
|
||||||
|
|
||||||
|
/** Additional class for the grid container div. */
|
||||||
|
className?: string;
|
||||||
|
|
||||||
|
/** Inline style for the grid container div. */
|
||||||
|
style?: React.CSSProperties;
|
||||||
|
|
||||||
|
/** Loading overlay component or text. */
|
||||||
|
loadingOverlayText?: string;
|
||||||
|
|
||||||
|
/** No rows overlay text. */
|
||||||
|
noRowsOverlayText?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Internal state (from automat subscription) ──────────────────
|
||||||
|
|
||||||
|
interface AutomatGridState {
|
||||||
|
loading: boolean;
|
||||||
|
ready: boolean;
|
||||||
|
revision: number;
|
||||||
|
error: string | null;
|
||||||
|
totalRows: number;
|
||||||
|
sortModel: SortModelItem[];
|
||||||
|
filterModel: Record<string, unknown>;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Modules ─────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const DEFAULT_GRID_MODULES: Module[] = [
|
||||||
|
InfiniteRowModelModule,
|
||||||
|
TextFilterModule,
|
||||||
|
NumberFilterModule,
|
||||||
|
CustomFilterModule,
|
||||||
|
DateFilterModule,
|
||||||
|
CellStyleModule,
|
||||||
|
ColumnApiModule,
|
||||||
|
ColumnAutoSizeModule,
|
||||||
|
];
|
||||||
|
|
||||||
|
// ─── Component ───────────────────────────────────────────────────
|
||||||
|
|
||||||
|
export class AutomatGrid<TRow = Record<string, unknown>> extends PureComponent<
|
||||||
|
AutomatGridProps<TRow>,
|
||||||
|
AutomatGridState
|
||||||
|
> {
|
||||||
|
private unsub: (() => void) | null = null;
|
||||||
|
private gridApiRef: RefObject<GridApi<TRow> | null> = createRef<GridApi<TRow>>();
|
||||||
|
private isUpdatingFromGrid = false;
|
||||||
|
|
||||||
|
constructor(props: AutomatGridProps<TRow>) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
// Sync read from automat in constructor — zero blank flash
|
||||||
|
const s = props.automat.state;
|
||||||
|
this.state = {
|
||||||
|
loading: s.loading,
|
||||||
|
ready: s.ready,
|
||||||
|
revision: s.revision,
|
||||||
|
error: s.error,
|
||||||
|
totalRows: s.totalRows,
|
||||||
|
sortModel: s.sortModel,
|
||||||
|
filterModel: s.filterModel,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount(): void {
|
||||||
|
// Subscribe with a selector that extracts fields we react to
|
||||||
|
this.unsub = this.props.automat.subscribe(
|
||||||
|
this as unknown as import('react').PureComponent,
|
||||||
|
(state: GridAutomatState<TRow>) => ({
|
||||||
|
loading: state.loading,
|
||||||
|
ready: state.ready,
|
||||||
|
revision: state.revision,
|
||||||
|
error: state.error,
|
||||||
|
totalRows: state.totalRows,
|
||||||
|
sortModel: state.sortModel,
|
||||||
|
filterModel: state.filterModel,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidUpdate(_prevProps: AutomatGridProps<TRow>, prevState: AutomatGridState): void {
|
||||||
|
const api = this.gridApiRef.current;
|
||||||
|
|
||||||
|
// When revision changes, reset the AG Grid datasource to force a refetch
|
||||||
|
if (this.state.revision !== prevState.revision) {
|
||||||
|
if (api && !this.isUpdatingFromGrid) {
|
||||||
|
// Sync external sort model if changed outside grid
|
||||||
|
if (this.state.sortModel !== prevState.sortModel) {
|
||||||
|
const currentCols = api.getColumnState();
|
||||||
|
const targetCols = currentCols.map((c) => {
|
||||||
|
const match = this.state.sortModel.find((s) => s.colId === c.colId);
|
||||||
|
return {
|
||||||
|
colId: c.colId,
|
||||||
|
sort: match ? match.sort : null,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
api.applyColumnState({ state: targetCols });
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sync external filter model if changed outside grid
|
||||||
|
if (this.state.filterModel !== prevState.filterModel) {
|
||||||
|
api.setFilterModel(this.state.filterModel);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.applyDatasource();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount(): void {
|
||||||
|
this.unsub?.();
|
||||||
|
this.unsub = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── AG Grid datasource wiring ──────────────────────────────
|
||||||
|
|
||||||
|
private buildDatasource(): IDatasource {
|
||||||
|
const { automat } = this.props;
|
||||||
|
const fetcher = automat.state._fetcher;
|
||||||
|
const actions = automat.actions;
|
||||||
|
|
||||||
|
return {
|
||||||
|
getRows: (params: IGetRowsParams) => {
|
||||||
|
const fetchParams: GridFetchParams = {
|
||||||
|
startRow: params.startRow,
|
||||||
|
endRow: params.endRow,
|
||||||
|
sortModel: params.sortModel?.length ? params.sortModel : automat.state.sortModel,
|
||||||
|
filterModel: Object.keys(params.filterModel ?? {}).length ? params.filterModel : automat.state.filterModel,
|
||||||
|
};
|
||||||
|
|
||||||
|
actions._fetchStarted();
|
||||||
|
|
||||||
|
fetcher(fetchParams)
|
||||||
|
.then((result) => {
|
||||||
|
const lastRow =
|
||||||
|
result.lastRow != null && result.lastRow >= 0
|
||||||
|
? result.lastRow
|
||||||
|
: undefined;
|
||||||
|
params.successCallback(result.rows, lastRow);
|
||||||
|
actions._fetchCompleted(lastRow ?? -1);
|
||||||
|
})
|
||||||
|
.catch((err: Error) => {
|
||||||
|
params.failCallback();
|
||||||
|
actions._fetchFailed(err?.message ?? 'Fetch failed');
|
||||||
|
});
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
private applyDatasource(): void {
|
||||||
|
const api = this.gridApiRef.current;
|
||||||
|
if (api) {
|
||||||
|
api.setGridOption('datasource', this.buildDatasource());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private handleGridReady = (event: GridReadyEvent<TRow>): void => {
|
||||||
|
(this.gridApiRef as { current: GridApi<TRow> | null }).current = event.api;
|
||||||
|
this.applyDatasource();
|
||||||
|
this.props.onGridApiReady?.(event.api);
|
||||||
|
};
|
||||||
|
|
||||||
|
private handleSortChanged = (event: SortChangedEvent<TRow>): void => {
|
||||||
|
if (this.isUpdatingFromGrid) return;
|
||||||
|
const sortModel = event.api.getColumnState()
|
||||||
|
.filter((c) => c.sort != null)
|
||||||
|
.map((c) => ({ colId: c.colId, sort: c.sort! }));
|
||||||
|
this.isUpdatingFromGrid = true;
|
||||||
|
try {
|
||||||
|
this.props.automat.actions.setSort(sortModel);
|
||||||
|
} finally {
|
||||||
|
this.isUpdatingFromGrid = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
private handleFilterChanged = (event: FilterChangedEvent<TRow>): void => {
|
||||||
|
if (this.isUpdatingFromGrid) return;
|
||||||
|
const filterModel = event.api.getFilterModel();
|
||||||
|
this.isUpdatingFromGrid = true;
|
||||||
|
try {
|
||||||
|
this.props.automat.actions.setFilter(filterModel as Record<string, unknown>);
|
||||||
|
} finally {
|
||||||
|
this.isUpdatingFromGrid = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
private getRowId = (params: GetRowIdParams<TRow>): string => {
|
||||||
|
const field = this.props.rowIdField ?? 'id';
|
||||||
|
const data = params.data as Record<string, unknown>;
|
||||||
|
return data[field] != null ? String(data[field]) : String(params.level);
|
||||||
|
};
|
||||||
|
|
||||||
|
// ─── Render ──────────────────────────────────────────────────
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
columnDefs,
|
||||||
|
defaultColDef,
|
||||||
|
cacheBlockSize,
|
||||||
|
rowBuffer = 0,
|
||||||
|
infiniteInitialRowCount = 200,
|
||||||
|
maxConcurrentDatasourceRequests = 2,
|
||||||
|
maxBlocksInCache = 10,
|
||||||
|
blockLoadDebounceMillis = 100,
|
||||||
|
height = '100%',
|
||||||
|
width = '100%',
|
||||||
|
rowHeight,
|
||||||
|
headerHeight,
|
||||||
|
suppressHorizontalScroll,
|
||||||
|
animateRows,
|
||||||
|
className,
|
||||||
|
style,
|
||||||
|
loadingOverlayText,
|
||||||
|
noRowsOverlayText,
|
||||||
|
automat,
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const effectiveBlockSize = cacheBlockSize ?? automat.state._blockSize ?? 100;
|
||||||
|
|
||||||
|
const mergedDefaultColDef: ColDef<TRow> = {
|
||||||
|
flex: 1,
|
||||||
|
minWidth: 100,
|
||||||
|
sortable: true,
|
||||||
|
resizable: true,
|
||||||
|
...defaultColDef,
|
||||||
|
};
|
||||||
|
|
||||||
|
const containerStyle: React.CSSProperties = {
|
||||||
|
height,
|
||||||
|
width,
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
flex: 1,
|
||||||
|
minHeight: 0,
|
||||||
|
...style,
|
||||||
|
};
|
||||||
|
|
||||||
|
const themeClass = this.props.theme ?? 'ag-theme-alpine';
|
||||||
|
const effectiveModules = this.props.modules ?? DEFAULT_GRID_MODULES;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AgGridProvider modules={effectiveModules}>
|
||||||
|
<div className={`${themeClass} ${className ?? ''}`} style={containerStyle}>
|
||||||
|
<AgGridReact<TRow>
|
||||||
|
theme="legacy"
|
||||||
|
columnDefs={columnDefs}
|
||||||
|
defaultColDef={mergedDefaultColDef}
|
||||||
|
rowModelType="infinite"
|
||||||
|
cacheBlockSize={effectiveBlockSize}
|
||||||
|
cacheOverflowSize={2}
|
||||||
|
rowBuffer={rowBuffer}
|
||||||
|
infiniteInitialRowCount={infiniteInitialRowCount}
|
||||||
|
maxConcurrentDatasourceRequests={maxConcurrentDatasourceRequests}
|
||||||
|
maxBlocksInCache={maxBlocksInCache}
|
||||||
|
blockLoadDebounceMillis={blockLoadDebounceMillis}
|
||||||
|
rowHeight={rowHeight}
|
||||||
|
headerHeight={headerHeight}
|
||||||
|
suppressHorizontalScroll={suppressHorizontalScroll}
|
||||||
|
animateRows={animateRows}
|
||||||
|
getRowId={this.getRowId}
|
||||||
|
onGridReady={this.handleGridReady}
|
||||||
|
onSortChanged={this.handleSortChanged}
|
||||||
|
onFilterChanged={this.handleFilterChanged}
|
||||||
|
overlayLoadingTemplate={
|
||||||
|
loadingOverlayText
|
||||||
|
? `<span class="ag-overlay-loading-center">${loadingOverlayText}</span>`
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
overlayNoRowsTemplate={
|
||||||
|
noRowsOverlayText
|
||||||
|
? `<span class="ag-overlay-no-rows-center">${noRowsOverlayText}</span>`
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</AgGridProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
159
src/lib/createGridAutomat.ts
Normal file
159
src/lib/createGridAutomat.ts
Normal file
@@ -0,0 +1,159 @@
|
|||||||
|
/**
|
||||||
|
* createGridAutomat.ts
|
||||||
|
*
|
||||||
|
* Factory that creates a react-automat store to back an AG Grid with
|
||||||
|
* infinite-scroll (virtual) row loading. The automat owns the grid's
|
||||||
|
* data lifecycle — fetching pages, caching blocks, tracking sort/filter,
|
||||||
|
* and exposing reload/invalidate actions.
|
||||||
|
*
|
||||||
|
* Usage:
|
||||||
|
* const gridAutomat = createGridAutomat({ fetchRows, name: 'myGrid' });
|
||||||
|
*
|
||||||
|
* The returned automat is consumed by <AutomatGrid />.
|
||||||
|
*/
|
||||||
|
import { Automat } from 'react-automat';
|
||||||
|
import type { SortModelItem } from 'ag-grid-community';
|
||||||
|
export type { SortModelItem } from 'ag-grid-community';
|
||||||
|
|
||||||
|
// ─── Public types ────────────────────────────────────────────────
|
||||||
|
|
||||||
|
/** The shape of a single page request sent to the consumer's fetch function. */
|
||||||
|
export interface GridFetchParams {
|
||||||
|
startRow: number;
|
||||||
|
endRow: number;
|
||||||
|
sortModel: SortModelItem[];
|
||||||
|
filterModel: Record<string, unknown>;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Consumer-provided async function that returns a page of data. */
|
||||||
|
export interface GridFetchResult<TRow = Record<string, unknown>> {
|
||||||
|
rows: TRow[];
|
||||||
|
/** Total row count. Pass `undefined` / `-1` if unknown (infinite). */
|
||||||
|
lastRow?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type GridFetcher<TRow = Record<string, unknown>> = (
|
||||||
|
params: GridFetchParams,
|
||||||
|
) => Promise<GridFetchResult<TRow>>;
|
||||||
|
|
||||||
|
/** Configuration for createGridAutomat(). */
|
||||||
|
export interface GridAutomatOptions<TRow = Record<string, unknown>> {
|
||||||
|
/** Async data fetcher invoked by the AG Grid datasource. */
|
||||||
|
fetchRows: GridFetcher<TRow>;
|
||||||
|
/** Optional automat registry name (visible in window.__AUTOMATS__). */
|
||||||
|
name?: string;
|
||||||
|
/** Cache block size passed to AG Grid's `cacheBlockSize`. Default 100. */
|
||||||
|
blockSize?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── State shape ─────────────────────────────────────────────────
|
||||||
|
|
||||||
|
export interface GridAutomatState<TRow = Record<string, unknown>> {
|
||||||
|
/** Whether the very first block has finished loading. */
|
||||||
|
ready: boolean;
|
||||||
|
/** True while any block request is in-flight. */
|
||||||
|
loading: boolean;
|
||||||
|
/** Total known row count (may be -1 / undefined while streaming). */
|
||||||
|
totalRows: number;
|
||||||
|
/** Last-applied sort model (mirrors AG Grid). */
|
||||||
|
sortModel: SortModelItem[];
|
||||||
|
/** Last-applied filter model (mirrors AG Grid). */
|
||||||
|
filterModel: Record<string, unknown>;
|
||||||
|
/** An incrementing counter — bumped on reload() to force AG Grid datasource reset. */
|
||||||
|
revision: number;
|
||||||
|
/** Optional error from the last failed fetch. */
|
||||||
|
error: string | null;
|
||||||
|
/** The fetcher — stored in state so AutomatGrid can read it. */
|
||||||
|
_fetcher: GridFetcher<TRow>;
|
||||||
|
/** Block size config. */
|
||||||
|
_blockSize: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface GridAutomatActions {
|
||||||
|
/** Force a full reload (clears cache, bumps revision). */
|
||||||
|
reload: () => void;
|
||||||
|
/** Update the sort model externally (triggers reload). */
|
||||||
|
setSort: (sortModel: SortModelItem[]) => void;
|
||||||
|
/** Update the filter model externally (triggers reload). */
|
||||||
|
setFilter: (filterModel: Record<string, unknown>) => void;
|
||||||
|
/** Mark a fetch as started (called internally by the datasource adapter). */
|
||||||
|
_fetchStarted: () => void;
|
||||||
|
/** Mark a fetch as completed (called internally by the datasource adapter). */
|
||||||
|
_fetchCompleted: (totalRows: number) => void;
|
||||||
|
/** Mark a fetch as failed. */
|
||||||
|
_fetchFailed: (error: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Factory ─────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
export function createGridAutomat<TRow = Record<string, unknown>>(
|
||||||
|
options: GridAutomatOptions<TRow>,
|
||||||
|
): Automat<GridAutomatState<TRow>, GridAutomatActions> {
|
||||||
|
const { fetchRows, name, blockSize = 100 } = options;
|
||||||
|
|
||||||
|
const initialState: GridAutomatState<TRow> = {
|
||||||
|
ready: false,
|
||||||
|
loading: false,
|
||||||
|
totalRows: -1,
|
||||||
|
sortModel: [],
|
||||||
|
filterModel: {},
|
||||||
|
revision: 0,
|
||||||
|
error: null,
|
||||||
|
_fetcher: fetchRows,
|
||||||
|
_blockSize: blockSize,
|
||||||
|
};
|
||||||
|
|
||||||
|
const automat: Automat<GridAutomatState<TRow>, GridAutomatActions> = new Automat(
|
||||||
|
initialState,
|
||||||
|
{
|
||||||
|
reload() {
|
||||||
|
automat.setState((prev) => ({
|
||||||
|
revision: prev.revision + 1,
|
||||||
|
ready: false,
|
||||||
|
loading: false,
|
||||||
|
totalRows: -1,
|
||||||
|
error: null,
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
|
||||||
|
setSort(sortModel: SortModelItem[]) {
|
||||||
|
automat.setState((prev) => ({
|
||||||
|
sortModel,
|
||||||
|
revision: prev.revision + 1,
|
||||||
|
ready: false,
|
||||||
|
loading: false,
|
||||||
|
totalRows: -1,
|
||||||
|
error: null,
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
|
||||||
|
setFilter(filterModel: Record<string, unknown>) {
|
||||||
|
automat.setState((prev) => ({
|
||||||
|
filterModel,
|
||||||
|
revision: prev.revision + 1,
|
||||||
|
ready: false,
|
||||||
|
loading: false,
|
||||||
|
totalRows: -1,
|
||||||
|
error: null,
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
|
||||||
|
_fetchStarted() {
|
||||||
|
automat.setState({ loading: true, error: null });
|
||||||
|
},
|
||||||
|
|
||||||
|
_fetchCompleted(totalRows: number) {
|
||||||
|
automat.setState({ loading: false, ready: true, totalRows });
|
||||||
|
},
|
||||||
|
|
||||||
|
_fetchFailed(error: string) {
|
||||||
|
automat.setState({ loading: false, error });
|
||||||
|
},
|
||||||
|
} as GridAutomatActions,
|
||||||
|
{
|
||||||
|
name: name ?? null,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
return automat;
|
||||||
|
}
|
||||||
20
src/lib/index.ts
Normal file
20
src/lib/index.ts
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
/**
|
||||||
|
* Library barrel export.
|
||||||
|
*
|
||||||
|
* Consumers import from 'react-virtual-aggridautomat':
|
||||||
|
* import { AutomatGrid, createGridAutomat } from 'react-virtual-aggridautomat';
|
||||||
|
*/
|
||||||
|
|
||||||
|
export { AutomatGrid } from './AutomatGrid';
|
||||||
|
export type { AutomatGridProps } from './AutomatGrid';
|
||||||
|
|
||||||
|
export { createGridAutomat } from './createGridAutomat';
|
||||||
|
export type {
|
||||||
|
GridAutomatOptions,
|
||||||
|
GridAutomatState,
|
||||||
|
GridAutomatActions,
|
||||||
|
GridFetchParams,
|
||||||
|
GridFetchResult,
|
||||||
|
GridFetcher,
|
||||||
|
SortModelItem,
|
||||||
|
} from './createGridAutomat';
|
||||||
13
src/main.tsx
Normal file
13
src/main.tsx
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import { StrictMode } from 'react';
|
||||||
|
import { createRoot } from 'react-dom/client';
|
||||||
|
import App from './App';
|
||||||
|
import 'ag-grid-community/styles/ag-grid.css';
|
||||||
|
import 'ag-grid-community/styles/ag-theme-alpine.css';
|
||||||
|
import 'prismjs/themes/prism.css';
|
||||||
|
import './index.css';
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>,
|
||||||
|
);
|
||||||
26
tsconfig.app.json
Normal file
26
tsconfig.app.json
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
"target": "es2023",
|
||||||
|
"lib": ["ES2023", "DOM"],
|
||||||
|
"module": "esnext",
|
||||||
|
"types": ["vite/client"],
|
||||||
|
"allowArbitraryExtensions": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
7
tsconfig.json
Normal file
7
tsconfig.json
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
23
tsconfig.node.json
Normal file
23
tsconfig.node.json
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
"target": "es2023",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"types": ["node"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"module": "nodenext",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
15
vite.config.ts
Normal file
15
vite.config.ts
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import path from 'path'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
// The git HEAD of react-automat doesn't ship pre-built dist/.
|
||||||
|
// Resolve directly to the ESM source so Vite bundles it.
|
||||||
|
'react-automat': path.resolve(import.meta.dirname, 'node_modules/react-automat/src/lib/index.js'),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user