3c92fbd98d
### What This PR ensures that `select` and `radio` field option labels properly accept and render JSX elements. ### Why Previously, JSX elements could be passed as option labels, but the type definition for options only allowed `LabelFunction` or `StaticLabel`, resulting in type errors. Additionally: - JSX labels did not render correctly in the list view but now do. - In the versions diff view, JSX labels were not supported since it only accepts strings. To address this, we now fallback to the option `value` when the label is a JSX element.
55 lines
1.0 KiB
TypeScript
55 lines
1.0 KiB
TypeScript
import type { CollectionConfig } from 'payload'
|
|
|
|
import { radioFieldsSlug } from '../../slugs.js'
|
|
import { CustomJSXLabel } from './CustomJSXLabel.js'
|
|
|
|
const RadioFields: CollectionConfig = {
|
|
slug: radioFieldsSlug,
|
|
fields: [
|
|
{
|
|
name: 'radio',
|
|
label: {
|
|
en: 'Radio en',
|
|
es: 'Radio es',
|
|
},
|
|
type: 'radio',
|
|
options: [
|
|
{
|
|
label: { en: 'Value One', es: 'Value Uno' },
|
|
value: 'one',
|
|
},
|
|
{
|
|
label: 'Value Two',
|
|
value: 'two',
|
|
},
|
|
{
|
|
label: 'Value Three',
|
|
value: 'three',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'radioWithJsxLabelOption',
|
|
label: 'Radio with JSX label option',
|
|
type: 'radio',
|
|
defaultValue: 'three',
|
|
options: [
|
|
{
|
|
label: 'Value One',
|
|
value: 'one',
|
|
},
|
|
{
|
|
label: 'Value Two',
|
|
value: 'two',
|
|
},
|
|
{
|
|
label: CustomJSXLabel,
|
|
value: 'three',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
}
|
|
|
|
export default RadioFields
|