150 lines
3.1 KiB
TypeScript
150 lines
3.1 KiB
TypeScript
import type { Field } from 'payload'
|
|
|
|
import deepMerge from '../utilities/deepMerge'
|
|
|
|
export const appearanceOptions = {
|
|
default: {
|
|
label: 'Default',
|
|
value: 'default',
|
|
},
|
|
primary: {
|
|
label: 'Primary Button',
|
|
value: 'primary',
|
|
},
|
|
secondary: {
|
|
label: 'Secondary Button',
|
|
value: 'secondary',
|
|
},
|
|
}
|
|
|
|
export type LinkAppearances = 'default' | 'primary' | 'secondary'
|
|
|
|
type LinkType = (options?: {
|
|
appearances?: false | LinkAppearances[]
|
|
disableLabel?: boolean
|
|
overrides?: Record<string, unknown>
|
|
}) => Field
|
|
|
|
const link: LinkType = ({ appearances, disableLabel = false, overrides = {} } = {}) => {
|
|
const linkResult: Field = {
|
|
name: 'link',
|
|
type: 'group',
|
|
admin: {
|
|
hideGutter: true,
|
|
},
|
|
fields: [
|
|
{
|
|
type: 'row',
|
|
fields: [
|
|
{
|
|
name: 'type',
|
|
type: 'radio',
|
|
admin: {
|
|
layout: 'horizontal',
|
|
width: '50%',
|
|
},
|
|
defaultValue: 'reference',
|
|
options: [
|
|
{
|
|
label: 'Internal link',
|
|
value: 'reference',
|
|
},
|
|
{
|
|
label: 'Custom URL',
|
|
value: 'custom',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'newTab',
|
|
type: 'checkbox',
|
|
admin: {
|
|
style: {
|
|
alignSelf: 'flex-end',
|
|
},
|
|
width: '50%',
|
|
},
|
|
label: 'Open in new tab',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
}
|
|
|
|
const linkTypes: Field[] = [
|
|
{
|
|
name: 'reference',
|
|
type: 'relationship',
|
|
admin: {
|
|
condition: (_, siblingData) => siblingData?.type === 'reference',
|
|
},
|
|
label: 'Document to link to',
|
|
maxDepth: 1,
|
|
relationTo: ['pages'],
|
|
required: true,
|
|
},
|
|
{
|
|
name: 'url',
|
|
type: 'text',
|
|
admin: {
|
|
condition: (_, siblingData) => siblingData?.type === 'custom',
|
|
},
|
|
label: 'Custom URL',
|
|
required: true,
|
|
},
|
|
]
|
|
|
|
if (!disableLabel) {
|
|
if (linkTypes[0].admin) {
|
|
linkTypes[0].admin.width = '50%'
|
|
}
|
|
if (linkTypes[1].admin) {
|
|
linkTypes[1].admin.width = '50%'
|
|
}
|
|
|
|
linkResult.fields.push({
|
|
type: 'row',
|
|
fields: [
|
|
...linkTypes,
|
|
{
|
|
name: 'label',
|
|
type: 'text',
|
|
admin: {
|
|
width: '50%',
|
|
},
|
|
label: 'Label',
|
|
required: true,
|
|
},
|
|
],
|
|
})
|
|
} else {
|
|
linkResult.fields = [...linkResult.fields, ...linkTypes]
|
|
}
|
|
|
|
if (appearances !== false) {
|
|
let appearanceOptionsToUse = [
|
|
appearanceOptions.default,
|
|
appearanceOptions.primary,
|
|
appearanceOptions.secondary,
|
|
]
|
|
|
|
if (appearances) {
|
|
appearanceOptionsToUse = appearances.map((appearance) => appearanceOptions[appearance])
|
|
}
|
|
|
|
linkResult.fields.push({
|
|
name: 'appearance',
|
|
type: 'select',
|
|
admin: {
|
|
description: 'Choose how the link should be rendered.',
|
|
},
|
|
defaultValue: 'default',
|
|
options: appearanceOptionsToUse,
|
|
})
|
|
}
|
|
|
|
return deepMerge(linkResult, overrides)
|
|
}
|
|
|
|
export default link
|