feat: add header and footer Grid column shorthands

vaadin · Dec 19, 2023 · d9de930 · d9de930
1 parent 68d9b2a
commit d9de930
Show file tree

Hide file tree

Showing 8 changed files with 222 additions and 37 deletions.
diff --git a/src/GridColumn.tsx b/src/GridColumn.tsx
@@ -1,4 +1,11 @@
-import { type ComponentType, type ForwardedRef, forwardRef, type ReactElement, type RefAttributes } from 'react';
+import {
+  type ComponentType,
+  type ForwardedRef,
+  forwardRef,
+  type ReactElement,
+  type ReactNode,
+  type RefAttributes,
+} from 'react';
 import type { GridDefaultItem } from './generated/Grid.js';
 import {
   GridColumn as _GridColumn,
@@ -7,7 +14,7 @@ import {
 } from './generated/GridColumn.js';
 import type { GridBodyReactRendererProps, GridEdgeReactRendererProps } from './renderers/grid.js';
 import { useModelRenderer } from './renderers/useModelRenderer.js';
-import { useSimpleRenderer } from './renderers/useSimpleRenderer.js';
+import { useSimpleOrChildrenRenderer } from './renderers/useSimpleOrChildrenRenderer.js';
 
 export * from './generated/GridColumn.js';
 
@@ -20,23 +27,30 @@ export type OmittedGridColumnHTMLAttributes<TItem> = Omit<
 export type GridColumnProps<TItem> = Partial<
   Omit<
     _GridColumnProps<TItem>,
-    'children' | 'footerRenderer' | 'headerRenderer' | 'renderer' | keyof OmittedGridColumnHTMLAttributes<TItem>
+    | 'children'
+    | 'footerRenderer'
+    | 'header'
+    | 'headerRenderer'
+    | 'renderer'
+    | keyof OmittedGridColumnHTMLAttributes<TItem>
   >
 > &
   Readonly<{
     children?: ComponentType<GridBodyReactRendererProps<TItem>> | null;
+    footer?: ReactNode;
     footerRenderer?: ComponentType<GridEdgeReactRendererProps<TItem>> | null;
+    header?: ReactNode | string | null;
     headerRenderer?: ComponentType<GridEdgeReactRendererProps<TItem>> | null;
     renderer?: ComponentType<GridBodyReactRendererProps<TItem>> | null;
   }>;
 
 function GridColumn<TItem = GridDefaultItem>(
-  props: GridColumnProps<TItem>,
+  { children, footer, header, ...props }: GridColumnProps<TItem>,
   ref: ForwardedRef<GridColumnElement<TItem>>,
 ): ReactElement | null {
-  const [headerPortals, headerRenderer] = useSimpleRenderer(props.headerRenderer);
-  const [footerPortals, footerRenderer] = useSimpleRenderer(props.footerRenderer);
-  const [bodyPortals, bodyRenderer] = useModelRenderer(props.renderer ?? props.children);
+  const [headerPortals, headerRenderer] = useSimpleOrChildrenRenderer(props.headerRenderer, header);
+  const [footerPortals, footerRenderer] = useSimpleOrChildrenRenderer(props.footerRenderer, footer);
+  const [bodyPortals, bodyRenderer] = useModelRenderer(props.renderer ?? children);
 
   return (
     <_GridColumn<TItem>

diff --git a/src/GridColumnGroup.tsx b/src/GridColumnGroup.tsx
@@ -1,31 +1,47 @@
-import { forwardRef, type ComponentType, type ForwardedRef, type ReactElement, type RefAttributes } from 'react';
+import {
+  forwardRef,
+  type ComponentType,
+  type ForwardedRef,
+  type ReactElement,
+  type ReactNode,
+  type RefAttributes,
+} from 'react';
 import {
   GridColumnGroup as _GridColumnGroup,
   type GridColumnGroupElement,
   type GridColumnGroupProps as _GridColumnGroupProps,
 } from './generated/GridColumnGroup.js';
-import { useSimpleRenderer, type ReactSimpleRendererProps } from './renderers/useSimpleRenderer.js';
+import { type ReactSimpleRendererProps } from './renderers/useSimpleRenderer.js';
+import { useSimpleOrChildrenRenderer } from './renderers/useSimpleOrChildrenRenderer.js';
 import type { OmittedGridColumnHTMLAttributes } from './GridColumn.js';
 
 export * from './generated/GridColumnGroup.js';
 
 export type GridColumnGroupProps = Partial<
-  Omit<_GridColumnGroupProps, 'footerRenderer' | 'headerRenderer' | keyof OmittedGridColumnHTMLAttributes<any>>
+  Omit<
+    _GridColumnGroupProps,
+    'footerRenderer' | 'header' | 'headerRenderer' | keyof OmittedGridColumnHTMLAttributes<any>
+  >
 > &
   Readonly<{
+    footer?: ReactNode;
     footerRenderer?: ComponentType<ReactSimpleRendererProps<GridColumnGroupElement>> | null;
+    header?: ReactNode | string | null;
     headerRenderer?: ComponentType<ReactSimpleRendererProps<GridColumnGroupElement>> | null;
   }>;
 
-function GridColumnGroup(props: GridColumnGroupProps, ref: ForwardedRef<GridColumnGroupElement>): ReactElement | null {
-  const [headerPortals, headerRenderer] = useSimpleRenderer(props.headerRenderer);
-  const [footerPortals, footerRenderer] = useSimpleRenderer(props.footerRenderer);
+function GridColumnGroup(
+  { children, footer, header, ...props }: GridColumnGroupProps,
+  ref: ForwardedRef<GridColumnGroupElement>,
+): ReactElement | null {
+  const [headerPortals, headerRenderer] = useSimpleOrChildrenRenderer(props.headerRenderer, header);
+  const [footerPortals, footerRenderer] = useSimpleOrChildrenRenderer(props.footerRenderer, footer);
 
   return (
     <_GridColumnGroup {...props} footerRenderer={footerRenderer} headerRenderer={headerRenderer} ref={ref}>
       {headerPortals}
       {footerPortals}
-      {props.children}
+      {children}
     </_GridColumnGroup>
   );
 }

diff --git a/src/GridFilterColumn.tsx b/src/GridFilterColumn.tsx
@@ -1,4 +1,11 @@
-import { type ComponentType, type ForwardedRef, forwardRef, type ReactElement, type RefAttributes } from 'react';
+import {
+  type ComponentType,
+  type ForwardedRef,
+  forwardRef,
+  type ReactElement,
+  type ReactNode,
+  type RefAttributes,
+} from 'react';
 import type { GridDefaultItem } from './generated/Grid.js';
 import {
   GridFilterColumn as _GridFilterColumn,
@@ -7,7 +14,7 @@ import {
 } from './generated/GridFilterColumn.js';
 import type { GridBodyReactRendererProps, GridEdgeReactRendererProps } from './renderers/grid.js';
 import { useModelRenderer } from './renderers/useModelRenderer.js';
-import { useSimpleRenderer } from './renderers/useSimpleRenderer.js';
+import { useSimpleOrChildrenRenderer } from './renderers/useSimpleOrChildrenRenderer.js';
 import type { OmittedGridColumnHTMLAttributes } from './GridColumn.js';
 
 export * from './generated/GridFilterColumn.js';
@@ -24,15 +31,16 @@ export type GridFilterColumnProps<TItem> = Partial<
 > &
   Readonly<{
     children?: ComponentType<GridBodyReactRendererProps<TItem>> | null;
+    footer?: ReactNode;
     footerRenderer?: ComponentType<GridEdgeReactRendererProps<TItem>> | null;
     renderer?: ComponentType<GridBodyReactRendererProps<TItem>> | null;
   }>;
 
 function GridFilterColumn<TItem = GridDefaultItem>(
-  props: GridFilterColumnProps<TItem>,
+  { footer, ...props }: GridFilterColumnProps<TItem>,
   ref: ForwardedRef<GridFilterColumnElement<TItem>>,
 ): ReactElement | null {
-  const [footerPortals, footerRenderer] = useSimpleRenderer(props.footerRenderer);
+  const [footerPortals, footerRenderer] = useSimpleOrChildrenRenderer(props.footerRenderer, footer);
   const [bodyPortals, bodyRenderer] = useModelRenderer(props.renderer ?? props.children);
 
   return (

diff --git a/src/GridProEditColumn.tsx b/src/GridProEditColumn.tsx
@@ -1,4 +1,11 @@
-import { type ComponentType, type ForwardedRef, forwardRef, type ReactElement, type RefAttributes } from 'react';
+import {
+  type ComponentType,
+  type ForwardedRef,
+  forwardRef,
+  type ReactElement,
+  type ReactNode,
+  type RefAttributes,
+} from 'react';
 import type { GridDefaultItem } from './generated/Grid.js';
 import {
   GridProEditColumn as _GridProEditColumn,
@@ -7,7 +14,7 @@ import {
 } from './generated/GridProEditColumn.js';
 import type { GridBodyReactRendererProps, GridEdgeReactRendererProps } from './renderers/grid.js';
 import { useModelRenderer } from './renderers/useModelRenderer.js';
-import { useSimpleRenderer } from './renderers/useSimpleRenderer.js';
+import { useSimpleOrChildrenRenderer } from './renderers/useSimpleOrChildrenRenderer.js';
 import type { OmittedGridColumnHTMLAttributes } from './GridColumn.js';
 
 export * from './generated/GridProEditColumn.js';
@@ -18,6 +25,7 @@ export type GridProEditColumnProps<TItem> = Partial<
     | 'children'
     | 'editModeRenderer'
     | 'footerRenderer'
+    | 'header'
     | 'headerRenderer'
     | 'renderer'
     | keyof OmittedGridColumnHTMLAttributes<TItem>
@@ -26,19 +34,21 @@ export type GridProEditColumnProps<TItem> = Partial<
   Readonly<{
     children?: ComponentType<GridBodyReactRendererProps<TItem>> | null;
     editModeRenderer?: ComponentType<GridBodyReactRendererProps<TItem>> | null;
+    footer?: ReactNode;
     footerRenderer?: ComponentType<GridEdgeReactRendererProps<TItem>> | null;
+    header?: ReactNode | string | null;
     headerRenderer?: ComponentType<GridEdgeReactRendererProps<TItem>> | null;
     renderer?: ComponentType<GridBodyReactRendererProps<TItem>> | null;
   }>;
 
 function GridProEditColumn<TItem = GridDefaultItem>(
-  props: GridProEditColumnProps<TItem>,
+  { children, footer, header, ...props }: GridProEditColumnProps<TItem>,
   ref: ForwardedRef<GridProEditColumnElement<TItem>>,
 ): ReactElement | null {
   const [editModePortals, editModeRenderer] = useModelRenderer(props.editModeRenderer);
-  const [headerPortals, headerRenderer] = useSimpleRenderer(props.headerRenderer);
-  const [footerPortals, footerRenderer] = useSimpleRenderer(props.footerRenderer);
-  const [bodyPortals, bodyRenderer] = useModelRenderer(props.renderer ?? props.children);
+  const [headerPortals, headerRenderer] = useSimpleOrChildrenRenderer(props.headerRenderer, header);
+  const [footerPortals, footerRenderer] = useSimpleOrChildrenRenderer(props.footerRenderer, footer);
+  const [bodyPortals, bodyRenderer] = useModelRenderer(props.renderer ?? children);
 
   return (
     <_GridProEditColumn<TItem>

diff --git a/src/GridSelectionColumn.tsx b/src/GridSelectionColumn.tsx
@@ -1,4 +1,11 @@
-import { type ComponentType, type ForwardedRef, forwardRef, type ReactElement, type RefAttributes } from 'react';
+import {
+  type ComponentType,
+  type ForwardedRef,
+  forwardRef,
+  type ReactElement,
+  type ReactNode,
+  type RefAttributes,
+} from 'react';
 import type { GridDefaultItem } from './generated/Grid.js';
 import {
   GridSelectionColumn as _GridSelectionColumn,
@@ -7,6 +14,7 @@ import {
 } from './generated/GridSelectionColumn.js';
 import type { GridBodyReactRendererProps, GridEdgeReactRendererProps } from './renderers/grid.js';
 import { useModelRenderer } from './renderers/useModelRenderer.js';
+import { useSimpleOrChildrenRenderer } from './renderers/useSimpleOrChildrenRenderer.js';
 import { useSimpleRenderer } from './renderers/useSimpleRenderer.js';
 import type { OmittedGridColumnHTMLAttributes } from './GridColumn.js';
 
@@ -20,17 +28,18 @@ export type GridSelectionColumnProps<TItem> = Partial<
 > &
   Readonly<{
     children?: ComponentType<GridBodyReactRendererProps<TItem>> | null;
+    footer?: ReactNode;
     footerRenderer?: ComponentType<GridEdgeReactRendererProps<TItem>> | null;
     headerRenderer?: ComponentType<GridEdgeReactRendererProps<TItem>> | null;
     renderer?: ComponentType<GridBodyReactRendererProps<TItem>> | null;
   }>;
 
 function GridSelectionColumn<TItem = GridDefaultItem>(
-  props: GridSelectionColumnProps<TItem>,
+  { footer, ...props }: GridSelectionColumnProps<TItem>,
   ref: ForwardedRef<GridSelectionColumnElement<TItem>>,
 ): ReactElement | null {
   const [headerPortals, headerRenderer] = useSimpleRenderer(props.headerRenderer);
-  const [footerPortals, footerRenderer] = useSimpleRenderer(props.footerRenderer);
+  const [footerPortals, footerRenderer] = useSimpleOrChildrenRenderer(props.footerRenderer, footer);
   const [bodyPortals, bodyRenderer] = useModelRenderer(props.renderer ?? props.children);
 
   return (

diff --git a/src/GridSortColumn.tsx b/src/GridSortColumn.tsx
@@ -1,4 +1,11 @@
-import { type ComponentType, type ForwardedRef, forwardRef, type ReactElement, type RefAttributes } from 'react';
+import {
+  type ComponentType,
+  type ForwardedRef,
+  forwardRef,
+  type ReactElement,
+  type ReactNode,
+  type RefAttributes,
+} from 'react';
 import type { GridDefaultItem } from './generated/Grid.js';
 import {
   GridSortColumn as _GridSortColumn,
@@ -7,7 +14,7 @@ import {
 } from './generated/GridSortColumn.js';
 import type { GridBodyReactRendererProps, GridEdgeReactRendererProps } from './renderers/grid.js';
 import { useModelRenderer } from './renderers/useModelRenderer.js';
-import { useSimpleRenderer } from './renderers/useSimpleRenderer.js';
+import { useSimpleOrChildrenRenderer } from './renderers/useSimpleOrChildrenRenderer.js';
 import type { OmittedGridColumnHTMLAttributes } from './GridColumn.js';
 
 export * from './generated/GridSortColumn.js';
@@ -23,15 +30,16 @@ export type GridSortColumnProps<TItem> = Partial<
 > &
   Readonly<{
     children?: ComponentType<GridBodyReactRendererProps<TItem>> | null;
+    footer?: ReactNode;
     footerRenderer?: ComponentType<GridEdgeReactRendererProps<TItem>> | null;
     renderer?: ComponentType<GridBodyReactRendererProps<TItem>> | null;
   }>;
 
 function GridSortColumn<TItem = GridDefaultItem>(
-  props: GridSortColumnProps<TItem>,
+  { footer, ...props }: GridSortColumnProps<TItem>,
   ref: ForwardedRef<GridSortColumnElement<TItem>>,
 ): ReactElement | null {
-  const [footerPortals, footerRenderer] = useSimpleRenderer(props.footerRenderer);
+  const [footerPortals, footerRenderer] = useSimpleOrChildrenRenderer(props.footerRenderer, footer);
   const [bodyPortals, bodyRenderer] = useModelRenderer(props.renderer ?? props.children);
 
   return (

diff --git a/src/GridTreeColumn.tsx b/src/GridTreeColumn.tsx
@@ -1,33 +1,47 @@
-import { type ComponentType, type ForwardedRef, forwardRef, type ReactElement, type RefAttributes } from 'react';
+import {
+  type ComponentType,
+  type ForwardedRef,
+  forwardRef,
+  type ReactElement,
+  type ReactNode,
+  type RefAttributes,
+} from 'react';
 import type { GridDefaultItem } from './generated/Grid.js';
 import {
   GridTreeColumnElement,
   GridTreeColumn as _GridTreeColumn,
   type GridTreeColumnProps as _GridTreeColumnProps,
 } from './generated/GridTreeColumn.js';
 import type { GridEdgeReactRendererProps } from './renderers/grid.js';
-import { useSimpleRenderer } from './renderers/useSimpleRenderer.js';
+import { useSimpleOrChildrenRenderer } from './renderers/useSimpleOrChildrenRenderer.js';
 import type { OmittedGridColumnHTMLAttributes } from './GridColumn.js';
 
 export * from './generated/GridTreeColumn.js';
 
 export type GridTreeColumnProps<TItem> = Partial<
   Omit<
     _GridTreeColumnProps<TItem>,
-    'children' | 'footerRenderer' | 'headerRenderer' | 'renderer' | keyof OmittedGridColumnHTMLAttributes<TItem>
+    | 'children'
+    | 'footerRenderer'
+    | 'header'
+    | 'headerRenderer'
+    | 'renderer'
+    | keyof OmittedGridColumnHTMLAttributes<TItem>
   >
 > &
   Readonly<{
+    footer?: ReactNode;
     footerRenderer?: ComponentType<GridEdgeReactRendererProps<TItem>> | null;
+    header?: ReactNode | string | null;
     headerRenderer?: ComponentType<GridEdgeReactRendererProps<TItem>> | null;
   }>;
 
 function GridTreeColumn<TItem = GridDefaultItem>(
-  props: GridTreeColumnProps<TItem>,
+  { footer, header, ...props }: GridTreeColumnProps<TItem>,
   ref: ForwardedRef<GridTreeColumnElement<TItem>>,
 ): ReactElement | null {
-  const [headerPortals, headerRenderer] = useSimpleRenderer(props.headerRenderer);
-  const [footerPortals, footerRenderer] = useSimpleRenderer(props.footerRenderer);
+  const [headerPortals, headerRenderer] = useSimpleOrChildrenRenderer(props.headerRenderer, header);
+  const [footerPortals, footerRenderer] = useSimpleOrChildrenRenderer(props.footerRenderer, footer);
 
   return (
     <_GridTreeColumn<TItem> {...props} headerRenderer={headerRenderer} footerRenderer={footerRenderer} ref={ref}>