Slug Field

1'use client'
2 
3import React, { useCallback, useState } from 'react'
4import { Button, useForm, useField, FieldLabel, TextInput } from '@payloadcms/ui'
5import './style.scss'
6import { SlugFieldProps } from './field'
7import { slugify } from './slugify'
8 
9/**
10 * @experimental This component is experimental and may change or be removed in the future. Use at your own risk.
11 */
12export const SlugField: React.FC<SlugFieldProps> = ({
13  field,
14  fieldToUse,
15  path,
16  readOnly: readOnlyFromProps,
17}) => {
18  const { label } = field
19 
20  const { setValue, value } = useField<string>({ path: path || field.name })
21 
22  const { getDataByPath } = useForm()
23 
24  const [isLocked, setIsLocked] = useState(true)
25 
26  const handleGenerate = useCallback(
27    (e: React.MouseEvent<Element>) => {
28      e.preventDefault()
29 
30      const targetFieldValue = getDataByPath(fieldToUse || 'title')
31 
32      if (targetFieldValue) {
33        const formattedSlug = slugify(targetFieldValue as string)
34 
35        if (value !== formattedSlug) {
36          setValue(formattedSlug)
37        }
38      } else {
39        if (value !== '') {
40          setValue('')
41        }
42      }
43    },
44    [setValue, value, fieldToUse, getDataByPath],
45  )
46 
47  const toggleLock = useCallback((e: React.MouseEvent<Element>) => {
48    e.preventDefault()
49    setIsLocked((prev) => !prev)
50  }, [])
51 
52  return (
53    <div className="field-type slug-field-component">
54      <div className="label-wrapper">
55        <FieldLabel htmlFor={`field-${path}`} label={label} />
56        {!isLocked && (
57          <Button buttonStyle="none" className="lock-button" onClick={handleGenerate}>
58            Generate
59          </Button>
60        )}
61        <Button buttonStyle="none" className="lock-button" onClick={toggleLock}>
62          {isLocked ? 'Unlock' : 'Lock'}
63        </Button>
64      </div>
65      <TextInput
66        onChange={setValue}
67        path={path || field.name}
68        readOnly={Boolean(readOnlyFromProps || isLocked)}
69        value={value}
70      />
71    </div>
72  )
73}