Skip to content

Commit 45d91bf

Browse files
web-padawanweb-padawan
authored
feat: add header and footer Grid column shorthands (#195)
1 parent 5d7cf31 commit 45d91bf

File tree

8 files changed

+222
-37
lines changed

8 files changed

+222
-37
lines changed

‎src/GridColumn.tsx‎

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1-
import { type ComponentType, type ForwardedRef, forwardRef, type ReactElement, type RefAttributes } from 'react';
1+
import {
2+
type ComponentType,
3+
type ForwardedRef,
4+
forwardRef,
5+
type ReactElement,
6+
type ReactNode,
7+
type RefAttributes,
8+
} from 'react';
29
import type { GridDefaultItem } from './generated/Grid.js';
310
import {
411
GridColumn as _GridColumn,
@@ -7,7 +14,7 @@ import {
714
} from './generated/GridColumn.js';
815
import type { GridBodyReactRendererProps, GridEdgeReactRendererProps } from './renderers/grid.js';
916
import { useModelRenderer } from './renderers/useModelRenderer.js';
10-
import { useSimpleRenderer } from './renderers/useSimpleRenderer.js';
17+
import { useSimpleOrChildrenRenderer } from './renderers/useSimpleOrChildrenRenderer.js';
1118

1219
export * from './generated/GridColumn.js';
1320

@@ -20,23 +27,30 @@ export type OmittedGridColumnHTMLAttributes<TItem> = Omit<
2027
export type GridColumnProps<TItem> = Partial<
2128
Omit<
2229
_GridColumnProps<TItem>,
23-
'children' | 'footerRenderer' | 'headerRenderer' | 'renderer' | keyof OmittedGridColumnHTMLAttributes<TItem>
30+
| 'children'
31+
| 'footerRenderer'
32+
| 'header'
33+
| 'headerRenderer'
34+
| 'renderer'
35+
| keyof OmittedGridColumnHTMLAttributes<TItem>
2436
>
2537
> &
2638
Readonly<{
2739
children?: ComponentType<GridBodyReactRendererProps<TItem>> | null;
40+
footer?: ReactNode;
2841
footerRenderer?: ComponentType<GridEdgeReactRendererProps<TItem>> | null;
42+
header?: ReactNode;
2943
headerRenderer?: ComponentType<GridEdgeReactRendererProps<TItem>> | null;
3044
renderer?: ComponentType<GridBodyReactRendererProps<TItem>> | null;
3145
}>;
3246

3347
function GridColumn<TItem = GridDefaultItem>(
34-
props: GridColumnProps<TItem>,
48+
{ children, footer, header, ...props }: GridColumnProps<TItem>,
3549
ref: ForwardedRef<GridColumnElement<TItem>>,
3650
): ReactElement | null {
37-
const [headerPortals, headerRenderer] = useSimpleRenderer(props.headerRenderer);
38-
const [footerPortals, footerRenderer] = useSimpleRenderer(props.footerRenderer);
39-
const [bodyPortals, bodyRenderer] = useModelRenderer(props.renderer ?? props.children);
51+
const [headerPortals, headerRenderer] = useSimpleOrChildrenRenderer(props.headerRenderer, header);
52+
const [footerPortals, footerRenderer] = useSimpleOrChildrenRenderer(props.footerRenderer, footer);
53+
const [bodyPortals, bodyRenderer] = useModelRenderer(props.renderer ?? children);
4054

4155
return (
4256
<_GridColumn<TItem>

‎src/GridColumnGroup.tsx‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,47 @@
1-
import { forwardRef, type ComponentType, type ForwardedRef, type ReactElement, type RefAttributes } from 'react';
1+
import {
2+
forwardRef,
3+
type ComponentType,
4+
type ForwardedRef,
5+
type ReactElement,
6+
type ReactNode,
7+
type RefAttributes,
8+
} from 'react';
29
import {
310
GridColumnGroup as _GridColumnGroup,
411
type GridColumnGroupElement,
512
type GridColumnGroupProps as _GridColumnGroupProps,
613
} from './generated/GridColumnGroup.js';
7-
import { useSimpleRenderer, type ReactSimpleRendererProps } from './renderers/useSimpleRenderer.js';
14+
import { type ReactSimpleRendererProps } from './renderers/useSimpleRenderer.js';
15+
import { useSimpleOrChildrenRenderer } from './renderers/useSimpleOrChildrenRenderer.js';
816
import type { OmittedGridColumnHTMLAttributes } from './GridColumn.js';
917

1018
export * from './generated/GridColumnGroup.js';
1119

1220
export type GridColumnGroupProps = Partial<
13-
Omit<_GridColumnGroupProps, 'footerRenderer' | 'headerRenderer' | keyof OmittedGridColumnHTMLAttributes<any>>
21+
Omit<
22+
_GridColumnGroupProps,
23+
'footerRenderer' | 'header' | 'headerRenderer' | keyof OmittedGridColumnHTMLAttributes<any>
24+
>
1425
> &
1526
Readonly<{
27+
footer?: ReactNode;
1628
footerRenderer?: ComponentType<ReactSimpleRendererProps<GridColumnGroupElement>> | null;
29+
header?: ReactNode;
1730
headerRenderer?: ComponentType<ReactSimpleRendererProps<GridColumnGroupElement>> | null;
1831
}>;
1932

20-
function GridColumnGroup(props: GridColumnGroupProps, ref: ForwardedRef<GridColumnGroupElement>): ReactElement | null {
21-
const [headerPortals, headerRenderer] = useSimpleRenderer(props.headerRenderer);
22-
const [footerPortals, footerRenderer] = useSimpleRenderer(props.footerRenderer);
33+
function GridColumnGroup(
34+
{ children, footer, header, ...props }: GridColumnGroupProps,
35+
ref: ForwardedRef<GridColumnGroupElement>,
36+
): ReactElement | null {
37+
const [headerPortals, headerRenderer] = useSimpleOrChildrenRenderer(props.headerRenderer, header);
38+
const [footerPortals, footerRenderer] = useSimpleOrChildrenRenderer(props.footerRenderer, footer);
2339

2440
return (
2541
<_GridColumnGroup {...props} footerRenderer={footerRenderer} headerRenderer={headerRenderer} ref={ref}>
2642
{headerPortals}
2743
{footerPortals}
28-
{props.children}
44+
{children}
2945
</_GridColumnGroup>
3046
);
3147
}

‎src/GridFilterColumn.tsx‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1-
import { type ComponentType, type ForwardedRef, forwardRef, type ReactElement, type RefAttributes } from 'react';
1+
import {
2+
type ComponentType,
3+
type ForwardedRef,
4+
forwardRef,
5+
type ReactElement,
6+
type ReactNode,
7+
type RefAttributes,
8+
} from 'react';
29
import type { GridDefaultItem } from './generated/Grid.js';
310
import {
411
GridFilterColumn as _GridFilterColumn,
@@ -7,7 +14,7 @@ import {
714
} from './generated/GridFilterColumn.js';
815
import type { GridBodyReactRendererProps, GridEdgeReactRendererProps } from './renderers/grid.js';
916
import { useModelRenderer } from './renderers/useModelRenderer.js';
10-
import { useSimpleRenderer } from './renderers/useSimpleRenderer.js';
17+
import { useSimpleOrChildrenRenderer } from './renderers/useSimpleOrChildrenRenderer.js';
1118
import type { OmittedGridColumnHTMLAttributes } from './GridColumn.js';
1219

1320
export * from './generated/GridFilterColumn.js';
@@ -24,15 +31,16 @@ export type GridFilterColumnProps<TItem> = Partial<
2431
> &
2532
Readonly<{
2633
children?: ComponentType<GridBodyReactRendererProps<TItem>> | null;
34+
footer?: ReactNode;
2735
footerRenderer?: ComponentType<GridEdgeReactRendererProps<TItem>> | null;
2836
renderer?: ComponentType<GridBodyReactRendererProps<TItem>> | null;
2937
}>;
3038

3139
function GridFilterColumn<TItem = GridDefaultItem>(
32-
props: GridFilterColumnProps<TItem>,
40+
{ footer, ...props }: GridFilterColumnProps<TItem>,
3341
ref: ForwardedRef<GridFilterColumnElement<TItem>>,
3442
): ReactElement | null {
35-
const [footerPortals, footerRenderer] = useSimpleRenderer(props.footerRenderer);
43+
const [footerPortals, footerRenderer] = useSimpleOrChildrenRenderer(props.footerRenderer, footer);
3644
const [bodyPortals, bodyRenderer] = useModelRenderer(props.renderer ?? props.children);
3745

3846
return (

‎src/GridProEditColumn.tsx‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1-
import { type ComponentType, type ForwardedRef, forwardRef, type ReactElement, type RefAttributes } from 'react';
1+
import {
2+
type ComponentType,
3+
type ForwardedRef,
4+
forwardRef,
5+
type ReactElement,
6+
type ReactNode,
7+
type RefAttributes,
8+
} from 'react';
29
import type { GridDefaultItem } from './generated/Grid.js';
310
import {
411
GridProEditColumn as _GridProEditColumn,
@@ -7,7 +14,7 @@ import {
714
} from './generated/GridProEditColumn.js';
815
import type { GridBodyReactRendererProps, GridEdgeReactRendererProps } from './renderers/grid.js';
916
import { useModelRenderer } from './renderers/useModelRenderer.js';
10-
import { useSimpleRenderer } from './renderers/useSimpleRenderer.js';
17+
import { useSimpleOrChildrenRenderer } from './renderers/useSimpleOrChildrenRenderer.js';
1118
import type { OmittedGridColumnHTMLAttributes } from './GridColumn.js';
1219

1320
export * from './generated/GridProEditColumn.js';
@@ -18,6 +25,7 @@ export type GridProEditColumnProps<TItem> = Partial<
1825
| 'children'
1926
| 'editModeRenderer'
2027
| 'footerRenderer'
28+
| 'header'
2129
| 'headerRenderer'
2230
| 'renderer'
2331
| keyof OmittedGridColumnHTMLAttributes<TItem>
@@ -26,19 +34,21 @@ export type GridProEditColumnProps<TItem> = Partial<
2634
Readonly<{
2735
children?: ComponentType<GridBodyReactRendererProps<TItem>> | null;
2836
editModeRenderer?: ComponentType<GridBodyReactRendererProps<TItem>> | null;
37+
footer?: ReactNode;
2938
footerRenderer?: ComponentType<GridEdgeReactRendererProps<TItem>> | null;
39+
header?: ReactNode;
3040
headerRenderer?: ComponentType<GridEdgeReactRendererProps<TItem>> | null;
3141
renderer?: ComponentType<GridBodyReactRendererProps<TItem>> | null;
3242
}>;
3343

3444
function GridProEditColumn<TItem = GridDefaultItem>(
35-
props: GridProEditColumnProps<TItem>,
45+
{ children, footer, header, ...props }: GridProEditColumnProps<TItem>,
3646
ref: ForwardedRef<GridProEditColumnElement<TItem>>,
3747
): ReactElement | null {
3848
const [editModePortals, editModeRenderer] = useModelRenderer(props.editModeRenderer);
39-
const [headerPortals, headerRenderer] = useSimpleRenderer(props.headerRenderer);
40-
const [footerPortals, footerRenderer] = useSimpleRenderer(props.footerRenderer);
41-
const [bodyPortals, bodyRenderer] = useModelRenderer(props.renderer ?? props.children);
49+
const [headerPortals, headerRenderer] = useSimpleOrChildrenRenderer(props.headerRenderer, header);
50+
const [footerPortals, footerRenderer] = useSimpleOrChildrenRenderer(props.footerRenderer, footer);
51+
const [bodyPortals, bodyRenderer] = useModelRenderer(props.renderer ?? children);
4252

4353
return (
4454
<_GridProEditColumn<TItem>

‎src/GridSelectionColumn.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1-
import { type ComponentType, type ForwardedRef, forwardRef, type ReactElement, type RefAttributes } from 'react';
1+
import {
2+
type ComponentType,
3+
type ForwardedRef,
4+
forwardRef,
5+
type ReactElement,
6+
type ReactNode,
7+
type RefAttributes,
8+
} from 'react';
29
import type { GridDefaultItem } from './generated/Grid.js';
310
import {
411
GridSelectionColumn as _GridSelectionColumn,
@@ -7,6 +14,7 @@ import {
714
} from './generated/GridSelectionColumn.js';
815
import type { GridBodyReactRendererProps, GridEdgeReactRendererProps } from './renderers/grid.js';
916
import { useModelRenderer } from './renderers/useModelRenderer.js';
17+
import { useSimpleOrChildrenRenderer } from './renderers/useSimpleOrChildrenRenderer.js';
1018
import { useSimpleRenderer } from './renderers/useSimpleRenderer.js';
1119
import type { OmittedGridColumnHTMLAttributes } from './GridColumn.js';
1220

@@ -20,17 +28,18 @@ export type GridSelectionColumnProps<TItem> = Partial<
2028
> &
2129
Readonly<{
2230
children?: ComponentType<GridBodyReactRendererProps<TItem>> | null;
31+
footer?: ReactNode;
2332
footerRenderer?: ComponentType<GridEdgeReactRendererProps<TItem>> | null;
2433
headerRenderer?: ComponentType<GridEdgeReactRendererProps<TItem>> | null;
2534
renderer?: ComponentType<GridBodyReactRendererProps<TItem>> | null;
2635
}>;
2736

2837
function GridSelectionColumn<TItem = GridDefaultItem>(
29-
props: GridSelectionColumnProps<TItem>,
38+
{ footer, ...props }: GridSelectionColumnProps<TItem>,
3039
ref: ForwardedRef<GridSelectionColumnElement<TItem>>,
3140
): ReactElement | null {
3241
const [headerPortals, headerRenderer] = useSimpleRenderer(props.headerRenderer);
33-
const [footerPortals, footerRenderer] = useSimpleRenderer(props.footerRenderer);
42+
const [footerPortals, footerRenderer] = useSimpleOrChildrenRenderer(props.footerRenderer, footer);
3443
const [bodyPortals, bodyRenderer] = useModelRenderer(props.renderer ?? props.children);
3544

3645
return (

‎src/GridSortColumn.tsx‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1-
import { type ComponentType, type ForwardedRef, forwardRef, type ReactElement, type RefAttributes } from 'react';
1+
import {
2+
type ComponentType,
3+
type ForwardedRef,
4+
forwardRef,
5+
type ReactElement,
6+
type ReactNode,
7+
type RefAttributes,
8+
} from 'react';
29
import type { GridDefaultItem } from './generated/Grid.js';
310
import {
411
GridSortColumn as _GridSortColumn,
@@ -7,7 +14,7 @@ import {
714
} from './generated/GridSortColumn.js';
815
import type { GridBodyReactRendererProps, GridEdgeReactRendererProps } from './renderers/grid.js';
916
import { useModelRenderer } from './renderers/useModelRenderer.js';
10-
import { useSimpleRenderer } from './renderers/useSimpleRenderer.js';
17+
import { useSimpleOrChildrenRenderer } from './renderers/useSimpleOrChildrenRenderer.js';
1118
import type { OmittedGridColumnHTMLAttributes } from './GridColumn.js';
1219

1320
export * from './generated/GridSortColumn.js';
@@ -23,15 +30,16 @@ export type GridSortColumnProps<TItem> = Partial<
2330
> &
2431
Readonly<{
2532
children?: ComponentType<GridBodyReactRendererProps<TItem>> | null;
33+
footer?: ReactNode;
2634
footerRenderer?: ComponentType<GridEdgeReactRendererProps<TItem>> | null;
2735
renderer?: ComponentType<GridBodyReactRendererProps<TItem>> | null;
2836
}>;
2937

3038
function GridSortColumn<TItem = GridDefaultItem>(
31-
props: GridSortColumnProps<TItem>,
39+
{ footer, ...props }: GridSortColumnProps<TItem>,
3240
ref: ForwardedRef<GridSortColumnElement<TItem>>,
3341
): ReactElement | null {
34-
const [footerPortals, footerRenderer] = useSimpleRenderer(props.footerRenderer);
42+
const [footerPortals, footerRenderer] = useSimpleOrChildrenRenderer(props.footerRenderer, footer);
3543
const [bodyPortals, bodyRenderer] = useModelRenderer(props.renderer ?? props.children);
3644

3745
return (

‎src/GridTreeColumn.tsx‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,47 @@
1-
import { type ComponentType, type ForwardedRef, forwardRef, type ReactElement, type RefAttributes } from 'react';
1+
import {
2+
type ComponentType,
3+
type ForwardedRef,
4+
forwardRef,
5+
type ReactElement,
6+
type ReactNode,
7+
type RefAttributes,
8+
} from 'react';
29
import type { GridDefaultItem } from './generated/Grid.js';
310
import {
411
GridTreeColumnElement,
512
GridTreeColumn as _GridTreeColumn,
613
type GridTreeColumnProps as _GridTreeColumnProps,
714
} from './generated/GridTreeColumn.js';
815
import type { GridEdgeReactRendererProps } from './renderers/grid.js';
9-
import { useSimpleRenderer } from './renderers/useSimpleRenderer.js';
16+
import { useSimpleOrChildrenRenderer } from './renderers/useSimpleOrChildrenRenderer.js';
1017
import type { OmittedGridColumnHTMLAttributes } from './GridColumn.js';
1118

1219
export * from './generated/GridTreeColumn.js';
1320

1421
export type GridTreeColumnProps<TItem> = Partial<
1522
Omit<
1623
_GridTreeColumnProps<TItem>,
17-
'children' | 'footerRenderer' | 'headerRenderer' | 'renderer' | keyof OmittedGridColumnHTMLAttributes<TItem>
24+
| 'children'
25+
| 'footerRenderer'
26+
| 'header'
27+
| 'headerRenderer'
28+
| 'renderer'
29+
| keyof OmittedGridColumnHTMLAttributes<TItem>
1830
>
1931
> &
2032
Readonly<{
33+
footer?: ReactNode;
2134
footerRenderer?: ComponentType<GridEdgeReactRendererProps<TItem>> | null;
35+
header?: ReactNode;
2236
headerRenderer?: ComponentType<GridEdgeReactRendererProps<TItem>> | null;
2337
}>;
2438

2539
function GridTreeColumn<TItem = GridDefaultItem>(
26-
props: GridTreeColumnProps<TItem>,
40+
{ footer, header, ...props }: GridTreeColumnProps<TItem>,
2741
ref: ForwardedRef<GridTreeColumnElement<TItem>>,
2842
): ReactElement | null {
29-
const [headerPortals, headerRenderer] = useSimpleRenderer(props.headerRenderer);
30-
const [footerPortals, footerRenderer] = useSimpleRenderer(props.footerRenderer);
43+
const [headerPortals, headerRenderer] = useSimpleOrChildrenRenderer(props.headerRenderer, header);
44+
const [footerPortals, footerRenderer] = useSimpleOrChildrenRenderer(props.footerRenderer, footer);
3145

3246
return (
3347
<_GridTreeColumn<TItem> {...props} headerRenderer={headerRenderer} footerRenderer={footerRenderer} ref={ref}>

0 commit comments

Comments
 (0)