Color Picker

1'use client'
2import {
3  FieldDescription,
4  FieldError,
5  FieldLabel,
6  TextInput,
7  useField,
8  useTranslation,
9} from '@payloadcms/ui'
10import { DefaultCellComponentProps, TextFieldClient, TextFieldClientProps } from 'payload'
11import React, { useCallback, useEffect, useRef, useState } from 'react'
12import './style.scss'
13import { ColorPickerProps } from './types'
14 
15const ColorPicker: React.FC<TextFieldClientProps & ColorPickerProps> = ({
16  path,
17  field,
18  colorPresets,
19  debounceDelay = 300,
20  showTextInput,
21  readOnly,
22}) => {
23  const { setValue, value, disabled, showError } = useField<string>({ path: path || field.name })
24  const [localValue, setLocalValue] = useState(value || '')
25  const colorInputRef = useRef<HTMLInputElement>(null)
26  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null)
27 
28  const actualReadOnly = readOnly || field.admin?.readOnly || false
29 
30  // Sync external value changes to local state
31  useEffect(() => {
32    if (value !== localValue) {
33      setLocalValue(value || '')
34    }
35  }, [value])
36 
37  // Debounced value update
38  const debouncedSetValue = useCallback(
39    (newValue: string) => {
40      if (debounceTimerRef.current) {
41        clearTimeout(debounceTimerRef.current)
42      }
43 
44      debounceTimerRef.current = setTimeout(() => {
45        setValue(newValue)
46      }, debounceDelay)
47    },
48    [setValue, debounceDelay],
49  )
50 
51  // Cleanup debounce timer on unmount
52  useEffect(() => {
53    return () => {
54      if (debounceTimerRef.current) {
55        clearTimeout(debounceTimerRef.current)
56      }
57    }
58  }, [])
59 
60  const handleColorChange = (e: React.ChangeEvent<HTMLInputElement>) => {
61    const newColor = e.target.value
62    setLocalValue(newColor)
63    debouncedSetValue(newColor)
64  }
65 
66  const handlePresetClick = (color: string) => {
67    if (actualReadOnly) return
68    setLocalValue(color)
69    setValue(color) // Immediate update for preset clicks
70    if (colorInputRef.current) {
71      colorInputRef.current.value = color
72    }
73  }
74 
75  const handleTextInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
76    let newColor = e.target.value
77 
78    // Auto-add # if missing
79    if (newColor && !newColor.startsWith('#')) {
80      newColor = `#${newColor}`
81    }
82 
83    setLocalValue(newColor)
84    //Update value with debounce, validation will handle incorrect formats
85    debouncedSetValue(newColor)
86  }
87 
88  const isValidHex = /^#[0-9A-Fa-f]{6}$/.test(localValue)
89 
90  return (
91    <div className="color-picker">
92      <FieldLabel
93// … truncated