Custom Array Row Label

1'use client'
2import { useRowLabel } from '@payloadcms/ui'
3import { ArrayRowLabelArgs } from './types'
4import { useMemo } from 'react'
5 
6/**
7 * Helper function to get nested value from an object using dot notation
8 * e.g. getNestedValue(obj, 'nested.fieldName')
9 */
10const getNestedValue = (obj: unknown, path: string): unknown => {
11  return path.split('.').reduce((acc, part) => {
12    if (acc && typeof acc === 'object' && acc !== null && part in acc) {
13      return (acc as Record<string, unknown>)[part]
14    }
15    return undefined
16  }, obj)
17}
18 
19/**
20 * Helper function to check if all field variables in a template are empty
21 */
22const hasEmptyFieldValues = (template: string, data: unknown): boolean => {
23  const fieldMatches = template.match(/{{\s*([\w.]+)\s*}}/g)
24 
25  if (!fieldMatches) {
26    return false
27  }
28 
29  // Check if all field variables (excluding 'index') are empty
30  return fieldMatches.every((match) => {
31    const fieldPath = match.replace(/{{\s*|\s*}}/g, '')
32 
33    // Skip 'index' as it's always populated
34    if (fieldPath === 'index') {
35      return false
36    }
37 
38    const value = getNestedValue(data, fieldPath)
39    return !value || (typeof value === 'string' && value.trim() === '')
40  })
41}
42 
43/**
44 * Helper function to process template strings with variable replacement
45 */
46const processTemplate = (template: string, data: unknown, rowNumber?: number): string => {
47  let result = template.replace(/{{\s*index\s*}}/g, String(rowNumber || 0))
48 
49  result = result.replace(/{{\s*([\w.]+)\s*}}/g, (_, fieldPath) => {
50    const value = getNestedValue(data, fieldPath)
51    if (typeof value === 'string' || typeof value === 'number') {
52      return String(value)
53    }
54    return ''
55  })
56 
57  return result
58}
59 
60const ArrayCustomLabel: React.FC<ArrayRowLabelArgs> = ({
61  fieldToUse,
62  template = false,
63  fallbackLabel = 'Item {{index}}',
64}) => {
65  // eslint-disable-next-line @typescript-eslint/no-explicit-any
66  const { data, rowNumber } = useRowLabel<any>()
67 
68  const customLabel = useMemo(() => {
69    let labelValue = ''
70    let shouldUseFallback = false
71 
72    if (!template) {
73      // Simple field mode
74      const value = getNestedValue(data, fieldToUse)
75      if (typeof value === 'string' || typeof value === 'number') {
76        labelValue = String(value).trim()
77      }
78      shouldUseFallback = !labelValue
79    } else {
80      // Template mode - check if all field values are empty
81      shouldUseFallback = hasEmptyFieldValues(fieldToUse, data)
82 
83      if (!shouldUseFallback) {
84// … truncated