feat!: re-order DefaultCellComponentProps generics (#9207)

### What? Changes the order of the `DefaultCellComponentProps` generic type, allowing us to infer the type of cellData when a ClientField type is passed as the first generic argument. You can override the cellData type by passing the second generic. Previously: ```ts type DefaultCellComponentProps<TCellData = any, TField extends ClientField = ClientField> ``` New: ```ts type DefaultCellComponentProps<TField extends ClientField = ClientField, TCellData = undefined> ``` ### Why? Changing the ClientField type to be the first argument allows us to infer the cellData value type based on the type of field. I could have kept the same signature but the usage would look like: ```ts // Not very DX friendly const MyCellComponent<DefaultCellComponentProps<,ClientField>> = () => null ``` ### How? The changes made [here](https://github.com/payloadcms/payload/compare/chore/beta/simplify-DefaultCellComponentProps?expand=1#diff-24f3c92e546c2be3fed0bab305236bba83001309a7239c20a3e3dbd6f5f71dc6R29-R73) allow this. You can override the type by passing in the second argument to the generic.
2024-11-14 12:31:42 -05:00
parent 5ff1bb366c
commit 77c99c2f49
12 changed files with 81 additions and 23 deletions
--- a/packages/payload/src/admin/elements/Cell.ts
+++ b/packages/payload/src/admin/elements/Cell.ts
@@ -2,14 +2,75 @@ import type { I18nClient } from '@payloadcms/translations'

 import type { ClientCollectionConfig } from '../../collections/config/client.js'
 import type { SanitizedCollectionConfig } from '../../collections/config/types.js'
-import type { ClientField } from '../../fields/config/client.js'
-import type { Field } from '../../fields/config/types.js'
+import type {
+  ArrayFieldClient,
+  BlocksFieldClient,
+  CheckboxFieldClient,
+  ClientField,
+  CodeFieldClient,
+  DateFieldClient,
+  EmailFieldClient,
+  Field,
+  GroupFieldClient,
+  JSONFieldClient,
+  NumberFieldClient,
+  PointFieldClient,
+  RadioFieldClient,
+  RelationshipFieldClient,
+  SelectFieldClient,
+  TextareaFieldClient,
+  TextFieldClient,
+  UploadFieldClient,
+} from '../../fields/config/types.js'
 import type { Payload } from '../../types/index.js'

 export type RowData = Record<string, any>

-export type DefaultCellComponentProps<TCellData = any, TField extends ClientField = ClientField> = {
-  readonly cellData: TCellData
+export type DefaultCellComponentProps<
+  TField extends ClientField = ClientField,
+  TCellData = undefined,
+> = {
+  readonly cellData: TCellData extends undefined
+    ? TField extends RelationshipFieldClient
+      ? number | Record<string, any> | string
+      : TField extends NumberFieldClient
+        ? TField['hasMany'] extends true
+          ? number[]
+          : number
+        : TField extends TextFieldClient
+          ? TField['hasMany'] extends true
+            ? string[]
+            : string
+          : TField extends
+                | CodeFieldClient
+                | EmailFieldClient
+                | JSONFieldClient
+                | RadioFieldClient
+                | TextareaFieldClient
+            ? string
+            : TField extends BlocksFieldClient
+              ? {
+                  [key: string]: any
+                  blockType: string
+                }[]
+              : TField extends CheckboxFieldClient
+                ? boolean
+                : TField extends DateFieldClient
+                  ? Date | number | string
+                  : TField extends GroupFieldClient
+                    ? Record<string, any>
+                    : TField extends UploadFieldClient
+                      ? File | string
+                      : TField extends ArrayFieldClient
+                        ? Record<string, unknown>[]
+                        : TField extends SelectFieldClient
+                          ? TField['hasMany'] extends true
+                            ? string[]
+                            : string
+                          : TField extends PointFieldClient
+                            ? { x: number; y: number }
+                            : any
+    : TCellData
  readonly className?: string
  readonly collectionConfig: ClientCollectionConfig
  readonly columnIndex?: number
@@ -25,10 +86,10 @@ export type DefaultCellComponentProps<TCellData = any, TField extends ClientFiel
 }

 export type DefaultServerCellComponentProps<
-  TCellData = any,
  TField extends ClientField = ClientField,
+  TCellData = any,
 > = {
  field: Field
  i18n: I18nClient
  payload: Payload
-} & Omit<DefaultCellComponentProps<TCellData, TField>, 'field'>
+} & Omit<DefaultCellComponentProps<TField, TCellData>, 'field'>
--- a/packages/richtext-lexical/src/types.ts
+++ b/packages/richtext-lexical/src/types.ts
@@ -100,8 +100,8 @@ export type LexicalRichTextFieldProps = {
  RichTextFieldClientProps<SerializedEditorState, AdapterProps, object>

 export type LexicalRichTextCellProps = DefaultCellComponentProps<
-  SerializedEditorState,
-  RichTextFieldClient<SerializedEditorState, AdapterProps, object>
+  RichTextFieldClient<SerializedEditorState, AdapterProps, object>,
+  SerializedEditorState
 >

 export type AdapterProps = {
--- a/packages/ui/src/elements/Table/DefaultCell/fields/Array/index.tsx
+++ b/packages/ui/src/elements/Table/DefaultCell/fields/Array/index.tsx
@@ -6,8 +6,7 @@ import React from 'react'

 import { useTranslation } from '../../../../../providers/Translation/index.js'

-export interface ArrayCellProps
-  extends DefaultCellComponentProps<Record<string, unknown>[], ArrayFieldClient> {}
+export interface ArrayCellProps extends DefaultCellComponentProps<ArrayFieldClient> {}

 export const ArrayCell: React.FC<ArrayCellProps> = ({ cellData, field: { labels } }) => {
  const { i18n } = useTranslation()
--- a/packages/ui/src/elements/Table/DefaultCell/fields/Blocks/index.tsx
+++ b/packages/ui/src/elements/Table/DefaultCell/fields/Blocks/index.tsx
@@ -6,7 +6,7 @@ import React from 'react'

 import { useTranslation } from '../../../../../providers/Translation/index.js'

-export interface BlocksCellProps extends DefaultCellComponentProps<any, BlocksFieldClient> {}
+export interface BlocksCellProps extends DefaultCellComponentProps<BlocksFieldClient> {}

 export const BlocksCell: React.FC<BlocksCellProps> = ({ cellData, field: { blocks, labels } }) => {
  const { i18n } = useTranslation()
--- a/packages/ui/src/elements/Table/DefaultCell/fields/Checkbox/index.tsx
+++ b/packages/ui/src/elements/Table/DefaultCell/fields/Checkbox/index.tsx
@@ -6,7 +6,7 @@ import React from 'react'
 import { useTranslation } from '../../../../../providers/Translation/index.js'
 import './index.scss'

-export const CheckboxCell: React.FC<DefaultCellComponentProps<boolean, CheckboxFieldClient>> = ({
+export const CheckboxCell: React.FC<DefaultCellComponentProps<CheckboxFieldClient>> = ({
  cellData,
 }) => {
  const { t } = useTranslation()
--- a/packages/ui/src/elements/Table/DefaultCell/fields/Code/index.tsx
+++ b/packages/ui/src/elements/Table/DefaultCell/fields/Code/index.tsx
@@ -5,7 +5,7 @@ import React from 'react'

 import './index.scss'

-export interface CodeCellProps extends DefaultCellComponentProps<string, CodeFieldClient> {
+export interface CodeCellProps extends DefaultCellComponentProps<CodeFieldClient> {
  readonly nowrap?: boolean
 }

--- a/packages/ui/src/elements/Table/DefaultCell/fields/Date/index.tsx
+++ b/packages/ui/src/elements/Table/DefaultCell/fields/Date/index.tsx
@@ -7,9 +7,10 @@ import { useConfig } from '../../../../../providers/Config/index.js'
 import { useTranslation } from '../../../../../providers/Translation/index.js'
 import { formatDate } from '../../../../../utilities/formatDate.js'

-export const DateCell: React.FC<
-  DefaultCellComponentProps<Date | number | string, DateFieldClient>
-> = ({ cellData, field: { admin: { date } = {} } }) => {
+export const DateCell: React.FC<DefaultCellComponentProps<DateFieldClient>> = ({
+  cellData,
+  field: { admin: { date } = {} },
+}) => {
  const {
    config: {
      admin: { dateFormat: dateFormatFromRoot },
--- a/packages/ui/src/elements/Table/DefaultCell/fields/File/index.tsx
+++ b/packages/ui/src/elements/Table/DefaultCell/fields/File/index.tsx
@@ -9,7 +9,7 @@ import './index.scss'
 const baseClass = 'file'

 export interface FileCellProps
-  extends DefaultCellComponentProps<any, TextFieldClient | UploadFieldClient> {}
+  extends DefaultCellComponentProps<TextFieldClient | UploadFieldClient> {}

 export const FileCell: React.FC<FileCellProps> = ({
  cellData: filename,
--- a/packages/ui/src/elements/Table/DefaultCell/fields/JSON/index.tsx
+++ b/packages/ui/src/elements/Table/DefaultCell/fields/JSON/index.tsx
@@ -5,9 +5,7 @@ import React from 'react'

 import './index.scss'

-export const JSONCell: React.FC<DefaultCellComponentProps<string, JSONFieldClient>> = ({
-  cellData,
-}) => {
+export const JSONCell: React.FC<DefaultCellComponentProps<JSONFieldClient>> = ({ cellData }) => {
  const textToShow = cellData?.length > 100 ? `${cellData.substring(0, 100)}\u2026` : cellData

  return (
--- a/packages/ui/src/elements/Table/DefaultCell/fields/Relationship/index.tsx
+++ b/packages/ui/src/elements/Table/DefaultCell/fields/Relationship/index.tsx
@@ -24,7 +24,6 @@ const baseClass = 'relationship-cell'
 const totalToShow = 3

 export type RelationshipCellProps = DefaultCellComponentProps<
-  any,
  JoinFieldClient | RelationshipFieldClient | UploadFieldClient
 >

--- a/packages/ui/src/elements/Table/DefaultCell/fields/Select/index.tsx
+++ b/packages/ui/src/elements/Table/DefaultCell/fields/Select/index.tsx
@@ -7,7 +7,7 @@ import React from 'react'

 import { useTranslation } from '../../../../../providers/Translation/index.js'

-export interface SelectCellProps extends DefaultCellComponentProps<any, SelectFieldClient> {}
+export interface SelectCellProps extends DefaultCellComponentProps<SelectFieldClient> {}

 export const SelectCell: React.FC<SelectCellProps> = ({ cellData, field: { options } }) => {
  const { i18n } = useTranslation()
--- a/packages/ui/src/elements/Table/DefaultCell/fields/Textarea/index.tsx
+++ b/packages/ui/src/elements/Table/DefaultCell/fields/Textarea/index.tsx
@@ -3,7 +3,7 @@ import type { DefaultCellComponentProps, TextareaFieldClient } from 'payload'

 import React from 'react'

-export const TextareaCell: React.FC<DefaultCellComponentProps<string, TextareaFieldClient>> = ({
+export const TextareaCell: React.FC<DefaultCellComponentProps<TextareaFieldClient>> = ({
  cellData,
 }) => {
  const textToShow = cellData?.length > 100 ? `${cellData.substring(0, 100)}\u2026` : cellData