tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): properly handles column selector labels

Browse Source
This commit is contained in:
Jacob Fletcher
2024-03-27 15:25:40 -04:00
parent 91b4e91e9c
commit a882cc7e8e
9 changed files with 50 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/next/src/views/Versions/buildColumns.tsx
View File

@@ -29,6 +29,7 @@ export const buildVersionColumns = ({
}): Column[] => [
{
name: '',
Label: '',
accessor: 'updatedAt',
active: true,
components: {
@@ -39,28 +40,27 @@ export const buildVersionColumns = ({
globalSlug={globalConfig?.slug}
/>
),
Heading: <SortColumn label={t('general:updatedAt')} name="updatedAt" />,
Heading: <SortColumn Label={t('general:updatedAt')} name="updatedAt" />,
},
label: '',
},
{
name: '',
Label: '',
accessor: 'id',
active: true,
components: {
Cell: <IDCell />,
Heading: <SortColumn disable label={t('version:versionID')} name="id" />,
Heading: <SortColumn Label={t('version:versionID')} disable name="id" />,
},
label: '',
},
{
name: '',
Label: '',
accessor: 'autosave',
active: true,
components: {
Cell: <AutosaveCell />,
Heading: <SortColumn disable label={t('version:type')} name="autosave" />,
Heading: <SortColumn Label={t('version:type')} disable name="autosave" />,
},
label: '',
},
]

4
packages/ui/src/elements/ColumnSelector/index.tsx
View File

@@ -41,7 +41,7 @@ export const ColumnSelector: React.FC<Props> = ({ collectionSlug }) => {
{columns.map((col, i) => {
if (!col) return null
const { name, accessor, active, label } = col
const { Label, accessor, active } = col
if (col.accessor === '_select') return null
@@ -60,7 +60,7 @@ export const ColumnSelector: React.FC<Props> = ({ collectionSlug }) => {
toggleColumn(accessor)
}}
>
{label}
{Label}
</Pill>
)
})}

9
packages/ui/src/elements/SortColumn/index.tsx
View File

@@ -5,11 +5,14 @@ import queryString from 'qs'
import React, { useCallback } from 'react'
export type SortColumnProps = {
Label: React.ReactNode
disable?: boolean
label: React.ReactNode
label?: FieldBase['label']
name: string
}
import type { FieldBase } from 'payload/types'
import { Chevron } from '../../icons/Chevron/index.js'
import { useSearchParams } from '../../providers/SearchParams/index.js'
import { useTranslation } from '../../providers/Translation/index.js'
@@ -18,7 +21,7 @@ import './index.scss'
const baseClass = 'sort-column'
export const SortColumn: React.FC<SortColumnProps> = (props) => {
const { name, disable = false, label } = props
const { name, Label, disable = false, label } = props
const { searchParams } = useSearchParams()
const router = useRouter()
const pathname = usePathname()
@@ -52,7 +55,7 @@ export const SortColumn: React.FC<SortColumnProps> = (props) => {
return (
<div className={baseClass}>
<span className={`${baseClass}__label`}>{label}</span>
<span className={`${baseClass}__label`}>{Label}</span>
{!disable && (
<div className={`${baseClass}__buttons`}>
<button

2
packages/ui/src/elements/Table/index.tsx
View File

@@ -16,6 +16,7 @@ export { TableCellProvider }
const baseClass = 'table'
export type Column = {
Label: React.ReactNode
accessor: string
active: boolean
cellProps?: Partial<CellComponentProps>
@@ -23,7 +24,6 @@ export type Column = {
Cell: React.ReactNode
Heading: React.ReactNode
}
label: React.ReactNode
name: FieldBase['name']
}

26
packages/ui/src/elements/TableColumns/buildColumnState.tsx
View File

@@ -72,20 +72,24 @@ export const buildColumnState = (args: {
<DefaultCell {...field.cellComponentProps} />
)
const Label = (
<FieldLabel
CustomLabel={field.fieldComponentProps.CustomLabel}
{...field.fieldComponentProps.labelProps}
unstyled
/>
)
const Heading = (
<SortColumn
Label={Label}
disable={
('disableSort' in field && Boolean(field.disableSort)) ||
fieldIsPresentationalOnly(field) ||
undefined
}
label={
<FieldLabel
CustomLabel={field.fieldComponentProps.CustomLabel}
{...field.fieldComponentProps.labelProps}
unstyled
/>
}
// eslint-disable-next-line react/jsx-no-duplicate-props
label={'label' in field.fieldComponentProps ? field.fieldComponentProps.label : undefined}
name={'name' in field ? field.name : undefined}
/>
)
@@ -93,6 +97,7 @@ export const buildColumnState = (args: {
if (field) {
const column: Column = {
name,
Label,
accessor: name,
active,
cellProps: {
@@ -103,13 +108,6 @@ export const buildColumnState = (args: {
Cell,
Heading,
},
label: (
<FieldLabel
CustomLabel={field.fieldComponentProps.CustomLabel}
{...field.fieldComponentProps.labelProps}
unstyled
/>
),
}
acc.push(column)

3
packages/ui/src/fields/Collapsible/index.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import type { DocumentPreferences, RowLabel as RowLabelType } from 'payload/types'
import type { DocumentPreferences, FieldBase, RowLabel as RowLabelType } from 'payload/types'
import React, { Fragment, useCallback, useEffect, useState } from 'react'
@@ -28,6 +28,7 @@ import type { FormFieldBase } from '../shared/index.js'
export type CollapsibleFieldProps = FormFieldBase & {
fieldMap: FieldMap
initCollapsed?: boolean
label?: FieldBase['label']
permissions: FieldPermissions
width?: string
}

3
packages/ui/src/fields/Relationship/types.ts
View File

@@ -1,5 +1,5 @@
import type { I18n } from '@payloadcms/translations'
import type { ClientCollectionConfig, RelationshipField } from 'payload/types'
import type { ClientCollectionConfig, FieldBase, RelationshipField } from 'payload/types'
import type { SanitizedConfig } from 'payload/types'
import type { FormFieldBase } from '../shared/index.js'
@@ -8,6 +8,7 @@ export type RelationshipFieldProps = FormFieldBase & {
allowCreate?: RelationshipField['admin']['allowCreate']
hasMany?: boolean
isSortable?: boolean
label?: FieldBase['label']
name: string
relationTo?: RelationshipField['relationTo']
sortOptions?: RelationshipField['admin']['sortOptions']

2
packages/ui/src/fields/RichText/index.tsx
View File

@@ -1,9 +1,11 @@
import type { FieldBase } from 'packages/payload/src/exports/types.js'
import type React from 'react'
import type { MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js'
import type { FormFieldBase } from '../shared/index.js'
export type RichTextFieldProps = FormFieldBase & {
label?: FieldBase['label']
name: string
richTextComponentMap?: Map<string, MappedField[] | React.ReactNode>
width?: string

17
packages/ui/src/providers/ComponentMap/buildComponentMap/mapFields.tsx
View File

@@ -2,6 +2,7 @@ import type { FieldDescriptionProps } from '@payloadcms/ui/forms/FieldDescriptio
import type {
CellComponentProps,
Field,
FieldBase,
FieldWithPath,
LabelProps,
RowLabelComponent,
@@ -353,6 +354,7 @@ export const mapFields = (args: {
readOnly: readOnlyOverride,
}),
initCollapsed: field.admin?.initCollapsed,
label: !CustomCollapsibleLabel ? (field.label as FieldBase['label']) : undefined,
readOnly: field.admin?.readOnly,
required: field.required,
style: field.admin?.style,
@@ -387,6 +389,7 @@ export const mapFields = (args: {
name: field.name,
className: field.admin?.className,
disabled: field.admin?.disabled,
label: field.label,
placeholder: field.admin?.placeholder,
readOnly: field.admin?.readOnly,
required: field.required,
@@ -411,6 +414,7 @@ export const mapFields = (args: {
parentPath: path,
readOnly: readOnlyOverride,
}),
label: field.label,
readOnly: field.admin?.readOnly,
style: field.admin?.style,
width: field.admin?.width,
@@ -426,6 +430,7 @@ export const mapFields = (args: {
className: field.admin?.className,
disabled: field.admin?.disabled,
editorOptions: field.admin?.editorOptions,
label: field.label,
readOnly: field.admin?.readOnly,
required: field.required,
style: field.admin?.style,
@@ -442,6 +447,7 @@ export const mapFields = (args: {
className: field.admin?.className,
disabled: field.admin?.disabled,
hasMany: field.hasMany,
label: field.label,
max: field.max,
maxRows: field.maxRows,
min: field.min,
@@ -461,6 +467,7 @@ export const mapFields = (args: {
name: field.name,
className: field.admin?.className,
disabled: field.admin?.disabled,
label: field.label,
readOnly: field.admin?.readOnly,
required: field.required,
style: field.admin?.style,
@@ -478,6 +485,7 @@ export const mapFields = (args: {
className: field.admin?.className,
disabled: field.admin?.disabled,
hasMany: field.hasMany,
label: field.label,
readOnly: field.admin?.readOnly,
relationTo: field.relationTo,
required: field.required,
@@ -495,6 +503,7 @@ export const mapFields = (args: {
name: field.name,
className: field.admin?.className,
disabled: field.admin?.disabled,
label: field.label,
options: field.options,
readOnly: field.admin?.readOnly,
required: field.required,
@@ -511,6 +520,7 @@ export const mapFields = (args: {
name: field.name,
className: field.admin?.className,
disabled: field.admin?.disabled,
label: field.label,
readOnly: field.admin?.readOnly,
required: field.required,
style: field.admin?.style,
@@ -603,6 +613,7 @@ export const mapFields = (args: {
className: field.admin?.className,
disabled: field.admin?.disabled,
hasMany: field.hasMany,
label: field.label,
maxLength: field.maxLength,
minLength: field.minLength,
placeholder: field.admin?.placeholder,
@@ -621,6 +632,7 @@ export const mapFields = (args: {
name: field.name,
className: field.admin?.className,
disabled: field.admin?.disabled,
label: field.label,
maxLength: field.maxLength,
minLength: field.minLength,
placeholder: field.admin?.placeholder,
@@ -645,6 +657,7 @@ export const mapFields = (args: {
className: field.admin?.className,
disabled: field.admin?.disabled,
filterOptions: field.filterOptions,
label: field.label,
readOnly: field.admin?.readOnly,
relationTo: field.relationTo,
required: field.required,
@@ -663,6 +676,7 @@ export const mapFields = (args: {
disabled: field.admin?.disabled,
hasMany: field.hasMany,
isClearable: field.admin?.isClearable,
label: field.label,
options: field.options,
readOnly: field.admin?.readOnly,
required: field.required,
@@ -722,6 +736,9 @@ export const mapFields = (args: {
fieldComponentProps: {
name: 'id',
label: 'ID',
labelProps: {
label: 'ID',
},
},
fieldIsPresentational: false,
isFieldAffectingData: true,