create-nextjs-cms 0.8.7 → 0.8.8

package/templates/default/components/form/inputs/DocumentFormInput.tsx

@@ -1,222 +1,222 @@
-import React, { useRef, useState } from 'react'
-import { useI18n } from 'nextjs-cms/translations/client'
-import FormInputElement from '@/components/form/FormInputElement'
-import ProtectedDocument from '@/components/ProtectedDocument'
-import { DocumentFieldClientConfig } from 'nextjs-cms/core/fields'
-import { ChevronRight, InfoIcon, Trash2Icon, UploadIcon, X } from 'lucide-react'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { Badge } from '@/components/ui/badge'
-import useModal from '@/hooks/useModal'
-import { useController, useFormContext } from 'react-hook-form'
-
-export default function DocumentFormInput({
-    input,
-    sectionName,
-}: {
-    input: DocumentFieldClientConfig
-    sectionName: string
-}) {
-    const t = useI18n()
-    const { control } = useFormContext()
-    const {
-        field,
-        fieldState: { invalid, isTouched, isDirty, error },
-    } = useController({
-        name: input.name,
-        control,
-        defaultValue: input.value ?? '',
-    })
-
-    const [fileName, setFileName] = useState(t('noFileSelected'))
-    const fileInputContainerRef = useRef<HTMLDivElement>(null)
-    const [image, setImage] = useState<string | null>(null)
-    const { setModal } = useModal()
-
-    const onImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        if (event.target.files && event.target.files[0]) {
-            const file = event.target.files[0]
-            const fileExtension = file.name.split('.').pop()?.toLowerCase()
-
-            // Check if file extension is allowed
-            if (input.extensions && !input.extensions.includes(fileExtension || '')) {
-                // File extension not allowed - reset and don't display
-                setFileName(t('noFileSelected'))
-                setImage(null)
-                // Clear the input value
-                if (fileInputContainerRef.current?.firstChild) {
-                    ;(fileInputContainerRef.current.firstChild as HTMLInputElement).value = ''
-                }
-                return
-            }
-
-            setFileName(file.name || t('noFileSelected'))
-            setImage(URL.createObjectURL(file))
-        } else {
-            setFileName(t('noFileSelected'))
-            setImage(null)
-        }
-    }
-
-    const document = (
-        <ProtectedDocument
-            section={sectionName}
-            fieldName={input.name}
-            file={input.value}
-            width={450}
-            height={620}
-            className='mb-4 rounded p-1 ring-3 ring-gray-400'
-        />
-    )
-
-    const handleDocumentDelete = () => {}
-
-    return (
-        <FormInputElement
-            validationError={error}
-            value={document}
-            readonly={input.readonly}
-            label={input.label}
-            required={input.required}
-        >
-            <Card className='flex max-w-full flex-col'>
-                <CardHeader>
-                    <CardTitle className='flex flex-wrap content-center items-center gap-1.5'>
-                        <span>{input.label} </span>
-                        {['true', 1, true].includes(input.required) ? <Badge>{t('mandatory')}</Badge> : null}
-                    </CardTitle>
-                </CardHeader>
-                <CardContent className='flex flex-col gap-1'>
-                    <div className='mb-2 flex flex-col text-sm'>
-                        {input.maxFileSize ? (
-                            <div className='flex flex-wrap items-center gap-2'>
-                                <InfoIcon size={14} />
-                                <span>{t('maxFileSize')}:</span>
-                                <Badge
-                                    variant={'secondary'}
-                                >{`${input.maxFileSize.size} ${input.maxFileSize.unit.toUpperCase()}`}</Badge>
-                            </div>
-                        ) : null}
-                        {input.extensions ? (
-                            <div className='flex flex-wrap items-center gap-2'>
-                                <InfoIcon size={14} />
-                                <span>{t('allowedExtensions')}:</span>
-                                <Badge variant={'secondary'}>{input.extensions.join(', ')}</Badge>
-                            </div>
-                        ) : null}
-                    </div>
-                    <div className='flex flex-col gap-4'>
-                        {input.value ? document : null}
-                        {image ? (
-                            <div className='relative flex items-center'>
-                                <ChevronRight fontSize='large' />
-                                <div className='relative'>
-                                    <X
-                                        className='absolute -top-3 -right-3 z-10 cursor-pointer rounded-full border-2 border-gray-500 bg-white p-1'
-                                        onClick={() => {
-                                            setImage(null)
-                                            setFileName(t('noFileSelected'))
-                                            field.onChange(undefined)
-                                            if (fileInputContainerRef.current) {
-                                                /**
-                                                 * Clear the child input value
-                                                 */
-                                                if (fileInputContainerRef.current?.firstChild) {
-                                                    ;(
-                                                        fileInputContainerRef.current.firstChild as HTMLInputElement
-                                                    ).value = ''
-                                                }
-                                            }
-                                        }}
-                                    />
-                                    <embed
-                                        src={image}
-                                        className='mb-4 max-w-full rounded p-1 ring-3 ring-green-600'
-                                        width={350}
-                                        height={520}
-                                    />
-                                </div>
-                            </div>
-                        ) : null}
-                    </div>
-                    <div ref={fileInputContainerRef}>
-                        <input
-                            type='file'
-                            className='hidden'
-                            name={field.name}
-                            ref={field.ref}
-                            accept={input.extensions ? input.extensions.map((ext) => `.${ext}`).join(',') : undefined}
-                            onChange={(e) => {
-                                onImageChange(e)
-                                if (!input.value) {
-                                    field.onChange(e.target?.files?.length ? e.target.files[0] : undefined)
-                                }
-                            }}
-                        />
-                    </div>
-                    <div className='flex flex-col items-center gap-2 md:flex-row'>
-                        <div className='flex w-full flex-col'>
-                            {[false, 'false', 0].includes(input.required) &&
-                            !['', null, undefined].includes(input.value) ? (
-                                <div className='w-[400px] max-w-full'>
-                                    <button
-                                        type='button'
-                                        className='flex w-full flex-wrap items-center justify-center gap-1.5 rounded border bg-linear-to-r from-red-600 to-amber-500 p-2 text-center text-sm font-bold text-white uppercase drop-shadow-sm hover:from-red-400 hover:to-amber-400'
-                                        onClick={() => {
-                                            setModal({
-                                                title: t('deletePhoto'),
-                                                body: (
-                                                    <div className='p-4'>
-                                                        <div className='flex flex-col gap-4'>
-                                                            <div>{t('deletePhotoText')}</div>
-                                                            <div className='flex gap-2'>
-                                                                <button
-                                                                    className='rounded bg-green-600 px-2 py-1 text-white'
-                                                                    onClick={handleDocumentDelete}
-                                                                >
-                                                                    {t('yes')}
-                                                                </button>
-                                                                <button
-                                                                    className='rounded bg-red-800 px-2 py-1 text-white'
-                                                                    onClick={() => {
-                                                                        setModal(null)
-                                                                    }}
-                                                                >
-                                                                    {t('no')}
-                                                                </button>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                ),
-                                                headerColor: 'bg-red-700',
-                                                titleColor: 'text-white',
-                                                lang: 'en',
-                                            })
-                                        }}
-                                    >
-                                        <Trash2Icon size={20} /> {t('delete')}
-                                    </button>
-                                </div>
-                            ) : null}
-                            <div className='dark:border-neutral my-2 flex w-[400px] max-w-full flex-col gap-1 rounded-lg border border-gray-400 p-2'>
-                                <button
-                                    type='button'
-                                    className='flex w-full flex-wrap items-center justify-center gap-1.5 rounded border bg-linear-to-r from-blue-700 to-sky-500 p-2 text-center text-sm font-bold text-white uppercase drop-shadow-sm hover:from-blue-500 hover:to-sky-400'
-                                    onClick={() => {
-                                        if (fileInputContainerRef.current?.firstChild) {
-                                            ;(fileInputContainerRef.current.firstChild as HTMLInputElement).click()
-                                        }
-                                    }}
-                                >
-                                    <UploadIcon size={20} /> {t('selectFile')}
-                                </button>
-                                <div className='flex w-full ps-2'>
-                                    <div className='break-all'>{fileName}</div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </CardContent>
-            </Card>
-        </FormInputElement>
-    )
-}
+import React, { useRef, useState } from 'react'
+import { useI18n } from 'nextjs-cms/translations/client'
+import FormInputElement from '@/components/form/FormInputElement'
+import ProtectedDocument from '@/components/ProtectedDocument'
+import { DocumentFieldClientConfig } from 'nextjs-cms/core/fields'
+import { ChevronRight, InfoIcon, Trash2Icon, UploadIcon, X } from 'lucide-react'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import useModal from '@/hooks/useModal'
+import { useController, useFormContext } from 'react-hook-form'
+
+export default function DocumentFormInput({
+    input,
+    sectionName,
+}: {
+    input: DocumentFieldClientConfig
+    sectionName: string
+}) {
+    const t = useI18n()
+    const { control } = useFormContext()
+    const {
+        field,
+        fieldState: { invalid, isTouched, isDirty, error },
+    } = useController({
+        name: input.name,
+        control,
+        defaultValue: input.value ?? '',
+    })
+
+    const [fileName, setFileName] = useState(t('noFileSelected'))
+    const fileInputContainerRef = useRef<HTMLDivElement>(null)
+    const [image, setImage] = useState<string | null>(null)
+    const { setModal } = useModal()
+
+    const onImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        if (event.target.files && event.target.files[0]) {
+            const file = event.target.files[0]
+            const fileExtension = file.name.split('.').pop()?.toLowerCase()
+
+            // Check if file extension is allowed
+            if (input.extensions && !input.extensions.includes(fileExtension || '')) {
+                // File extension not allowed - reset and don't display
+                setFileName(t('noFileSelected'))
+                setImage(null)
+                // Clear the input value
+                if (fileInputContainerRef.current?.firstChild) {
+                    ;(fileInputContainerRef.current.firstChild as HTMLInputElement).value = ''
+                }
+                return
+            }
+
+            setFileName(file.name || t('noFileSelected'))
+            setImage(URL.createObjectURL(file))
+        } else {
+            setFileName(t('noFileSelected'))
+            setImage(null)
+        }
+    }
+
+    const document = (
+        <ProtectedDocument
+            section={sectionName}
+            fieldName={input.name}
+            file={input.value}
+            width={450}
+            height={620}
+            className='mb-4 rounded p-1 ring-3 ring-gray-400'
+        />
+    )
+
+    const handleDocumentDelete = () => {}
+
+    return (
+        <FormInputElement
+            validationError={error}
+            value={document}
+            readonly={input.readonly}
+            label={input.label}
+            required={input.required}
+        >
+            <Card className='flex max-w-full flex-col'>
+                <CardHeader>
+                    <CardTitle className='flex flex-wrap content-center items-center gap-1.5'>
+                        <span>{input.label} </span>
+                        {['true', 1, true].includes(input.required) ? <Badge>{t('mandatory')}</Badge> : null}
+                    </CardTitle>
+                </CardHeader>
+                <CardContent className='flex flex-col gap-1'>
+                    <div className='mb-2 flex flex-col text-sm'>
+                        {input.maxFileSize ? (
+                            <div className='flex flex-wrap items-center gap-2'>
+                                <InfoIcon size={14} />
+                                <span>{t('maxFileSize')}:</span>
+                                <Badge
+                                    variant={'secondary'}
+                                >{`${input.maxFileSize.size} ${input.maxFileSize.unit.toUpperCase()}`}</Badge>
+                            </div>
+                        ) : null}
+                        {input.extensions ? (
+                            <div className='flex flex-wrap items-center gap-2'>
+                                <InfoIcon size={14} />
+                                <span>{t('allowedExtensions')}:</span>
+                                <Badge variant={'secondary'}>{input.extensions.join(', ')}</Badge>
+                            </div>
+                        ) : null}
+                    </div>
+                    <div className='flex flex-col gap-4'>
+                        {input.value ? document : null}
+                        {image ? (
+                            <div className='relative flex items-center'>
+                                <ChevronRight fontSize='large' />
+                                <div className='relative'>
+                                    <X
+                                        className='absolute -top-3 -right-3 z-10 cursor-pointer rounded-full border-2 border-gray-500 bg-white p-1'
+                                        onClick={() => {
+                                            setImage(null)
+                                            setFileName(t('noFileSelected'))
+                                            field.onChange(undefined)
+                                            if (fileInputContainerRef.current) {
+                                                /**
+                                                 * Clear the child input value
+                                                 */
+                                                if (fileInputContainerRef.current?.firstChild) {
+                                                    ;(
+                                                        fileInputContainerRef.current.firstChild as HTMLInputElement
+                                                    ).value = ''
+                                                }
+                                            }
+                                        }}
+                                    />
+                                    <embed
+                                        src={image}
+                                        className='mb-4 max-w-full rounded p-1 ring-3 ring-green-600'
+                                        width={350}
+                                        height={520}
+                                    />
+                                </div>
+                            </div>
+                        ) : null}
+                    </div>
+                    <div ref={fileInputContainerRef}>
+                        <input
+                            type='file'
+                            className='hidden'
+                            name={field.name}
+                            ref={field.ref}
+                            accept={input.extensions ? input.extensions.map((ext) => `.${ext}`).join(',') : undefined}
+                            onChange={(e) => {
+                                onImageChange(e)
+                                if (!input.value) {
+                                    field.onChange(e.target?.files?.length ? e.target.files[0] : undefined)
+                                }
+                            }}
+                        />
+                    </div>
+                    <div className='flex flex-col items-center gap-2 md:flex-row'>
+                        <div className='flex w-full flex-col'>
+                            {[false, 'false', 0].includes(input.required) &&
+                            !['', null, undefined].includes(input.value) ? (
+                                <div className='w-[400px] max-w-full'>
+                                    <button
+                                        type='button'
+                                        className='flex w-full flex-wrap items-center justify-center gap-1.5 rounded border bg-linear-to-r from-red-600 to-amber-500 p-2 text-center text-sm font-bold text-white uppercase drop-shadow-sm hover:from-red-400 hover:to-amber-400'
+                                        onClick={() => {
+                                            setModal({
+                                                title: t('deletePhoto'),
+                                                body: (
+                                                    <div className='p-4'>
+                                                        <div className='flex flex-col gap-4'>
+                                                            <div>{t('deletePhotoText')}</div>
+                                                            <div className='flex gap-2'>
+                                                                <button
+                                                                    className='rounded bg-green-600 px-2 py-1 text-white'
+                                                                    onClick={handleDocumentDelete}
+                                                                >
+                                                                    {t('yes')}
+                                                                </button>
+                                                                <button
+                                                                    className='rounded bg-red-800 px-2 py-1 text-white'
+                                                                    onClick={() => {
+                                                                        setModal(null)
+                                                                    }}
+                                                                >
+                                                                    {t('no')}
+                                                                </button>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                ),
+                                                headerColor: 'bg-red-700',
+                                                titleColor: 'text-white',
+                                                lang: 'en',
+                                            })
+                                        }}
+                                    >
+                                        <Trash2Icon size={20} /> {t('delete')}
+                                    </button>
+                                </div>
+                            ) : null}
+                            <div className='dark:border-neutral my-2 flex w-[400px] max-w-full flex-col gap-1 rounded-lg border border-gray-400 p-2'>
+                                <button
+                                    type='button'
+                                    className='flex w-full flex-wrap items-center justify-center gap-1.5 rounded border bg-linear-to-r from-blue-700 to-sky-500 p-2 text-center text-sm font-bold text-white uppercase drop-shadow-sm hover:from-blue-500 hover:to-sky-400'
+                                    onClick={() => {
+                                        if (fileInputContainerRef.current?.firstChild) {
+                                            ;(fileInputContainerRef.current.firstChild as HTMLInputElement).click()
+                                        }
+                                    }}
+                                >
+                                    <UploadIcon size={20} /> {t('selectFile')}
+                                </button>
+                                <div className='flex w-full ps-2'>
+                                    <div className='break-all'>{fileName}</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </CardContent>
+            </Card>
+        </FormInputElement>
+    )
+}