create-nextjs-cms 0.5.81 → 0.5.83
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -3,7 +3,10 @@ import getString from 'nextjs-cms/translations'
|
|
|
3
3
|
import FormInputElement from '@/components/form/FormInputElement'
|
|
4
4
|
import ProtectedDocument from '@/components/ProtectedDocument'
|
|
5
5
|
import { DocumentFieldClientConfig } from 'nextjs-cms/core/fields'
|
|
6
|
-
import { ChevronRight, X } from 'lucide-react'
|
|
6
|
+
import { ChevronRight, InfoIcon, Trash2Icon, UploadIcon, X } from 'lucide-react'
|
|
7
|
+
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
8
|
+
import { Badge } from '@/components/ui/badge'
|
|
9
|
+
import useModal from '@/hooks/useModal'
|
|
7
10
|
import { useController, useFormContext } from 'react-hook-form'
|
|
8
11
|
|
|
9
12
|
export default function DocumentFormInput({
|
|
@@ -24,13 +27,29 @@ export default function DocumentFormInput({
|
|
|
24
27
|
})
|
|
25
28
|
|
|
26
29
|
const [fileName, setFileName] = useState(getString('no_file_selected'))
|
|
27
|
-
const fileInputContainerRef = useRef<
|
|
30
|
+
const fileInputContainerRef = useRef<HTMLDivElement>(null)
|
|
28
31
|
const [image, setImage] = useState<string | null>(null)
|
|
32
|
+
const { setModal } = useModal()
|
|
29
33
|
|
|
30
34
|
const onImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
31
35
|
if (event.target.files && event.target.files[0]) {
|
|
32
|
-
|
|
33
|
-
|
|
36
|
+
const file = event.target.files[0]
|
|
37
|
+
const fileExtension = file.name.split('.').pop()?.toLowerCase()
|
|
38
|
+
|
|
39
|
+
// Check if file extension is allowed
|
|
40
|
+
if (input.extensions && !input.extensions.includes(fileExtension || '')) {
|
|
41
|
+
// File extension not allowed - reset and don't display
|
|
42
|
+
setFileName(getString('no_file_selected'))
|
|
43
|
+
setImage(null)
|
|
44
|
+
// Clear the input value
|
|
45
|
+
if (fileInputContainerRef.current?.firstChild) {
|
|
46
|
+
;(fileInputContainerRef.current.firstChild as HTMLInputElement).value = ''
|
|
47
|
+
}
|
|
48
|
+
return
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
setFileName(file.name || getString('no_file_selected'))
|
|
52
|
+
setImage(URL.createObjectURL(file))
|
|
34
53
|
} else {
|
|
35
54
|
setFileName(getString('no_file_selected'))
|
|
36
55
|
setImage(null)
|
|
@@ -48,6 +67,8 @@ export default function DocumentFormInput({
|
|
|
48
67
|
/>
|
|
49
68
|
)
|
|
50
69
|
|
|
70
|
+
const handleDocumentDelete = () => {}
|
|
71
|
+
|
|
51
72
|
return (
|
|
52
73
|
<FormInputElement
|
|
53
74
|
validationError={error}
|
|
@@ -56,69 +77,145 @@ export default function DocumentFormInput({
|
|
|
56
77
|
label={input.label}
|
|
57
78
|
required={input.required}
|
|
58
79
|
>
|
|
59
|
-
<
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
<
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
80
|
+
<Card className='flex max-w-full flex-col'>
|
|
81
|
+
<CardHeader>
|
|
82
|
+
<CardTitle className='flex flex-wrap content-center items-center gap-1.5'>
|
|
83
|
+
<span>{input.label} </span>
|
|
84
|
+
{['true', 1, true].includes(input.required) ? <Badge>{getString('mandatory')}</Badge> : null}
|
|
85
|
+
</CardTitle>
|
|
86
|
+
</CardHeader>
|
|
87
|
+
<CardContent className='flex flex-col gap-1'>
|
|
88
|
+
<div className='mb-2 flex flex-col text-sm'>
|
|
89
|
+
{input.maxFileSize ? (
|
|
90
|
+
<div className='flex flex-wrap items-center gap-2'>
|
|
91
|
+
<InfoIcon size={14} />
|
|
92
|
+
<span>{getString('maxFileSize')}:</span>
|
|
93
|
+
<Badge
|
|
94
|
+
variant={'secondary'}
|
|
95
|
+
>{`${input.maxFileSize.size} ${input.maxFileSize.unit.toUpperCase()}`}</Badge>
|
|
96
|
+
</div>
|
|
97
|
+
) : null}
|
|
98
|
+
{input.extensions ? (
|
|
99
|
+
<div className='flex flex-wrap items-center gap-2'>
|
|
100
|
+
<InfoIcon size={14} />
|
|
101
|
+
<span>{getString('allowedExtensions')}:</span>
|
|
102
|
+
<Badge variant={'secondary'}>{input.extensions.join(', ')}</Badge>
|
|
103
|
+
</div>
|
|
104
|
+
) : null}
|
|
105
|
+
</div>
|
|
106
|
+
<div className='flex flex-col gap-4'>
|
|
107
|
+
{input.value ? document : null}
|
|
108
|
+
{image ? (
|
|
109
|
+
<div className='relative flex items-center'>
|
|
110
|
+
<ChevronRight fontSize='large' />
|
|
111
|
+
<div className='relative'>
|
|
112
|
+
<X
|
|
113
|
+
className='absolute -top-3 -right-3 z-10 cursor-pointer rounded-full border-2 border-gray-500 bg-white p-1'
|
|
114
|
+
onClick={() => {
|
|
115
|
+
setImage(null)
|
|
116
|
+
setFileName(getString('no_file_selected'))
|
|
117
|
+
field.onChange(undefined)
|
|
118
|
+
if (fileInputContainerRef.current) {
|
|
119
|
+
/**
|
|
120
|
+
* Clear the child input value
|
|
121
|
+
*/
|
|
122
|
+
if (fileInputContainerRef.current?.firstChild) {
|
|
123
|
+
;(
|
|
124
|
+
fileInputContainerRef.current.firstChild as HTMLInputElement
|
|
125
|
+
).value = ''
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
}}
|
|
129
|
+
/>
|
|
130
|
+
<embed
|
|
131
|
+
src={image}
|
|
132
|
+
className='mb-4 max-w-full rounded p-1 ring-3 ring-green-600'
|
|
133
|
+
width={350}
|
|
134
|
+
height={520}
|
|
135
|
+
/>
|
|
136
|
+
</div>
|
|
137
|
+
</div>
|
|
138
|
+
) : null}
|
|
139
|
+
</div>
|
|
140
|
+
<div ref={fileInputContainerRef}>
|
|
141
|
+
<input
|
|
142
|
+
type='file'
|
|
143
|
+
className='hidden'
|
|
144
|
+
name={field.name}
|
|
145
|
+
ref={field.ref}
|
|
146
|
+
accept={input.extensions ? input.extensions.map((ext) => `.${ext}`).join(',') : undefined}
|
|
147
|
+
onChange={(e) => {
|
|
148
|
+
onImageChange(e)
|
|
149
|
+
if (!input.value) {
|
|
150
|
+
field.onChange(e.target?.files?.length ? e.target.files[0] : undefined)
|
|
151
|
+
}
|
|
152
|
+
}}
|
|
153
|
+
/>
|
|
154
|
+
</div>
|
|
155
|
+
<div className='flex flex-col items-center gap-2 md:flex-row'>
|
|
156
|
+
<div className='flex w-full flex-col'>
|
|
157
|
+
{[false, 'false', 0].includes(input.required) &&
|
|
158
|
+
!['', null, undefined].includes(input.value) ? (
|
|
159
|
+
<div className='w-[400px] max-w-full'>
|
|
160
|
+
<button
|
|
161
|
+
type='button'
|
|
162
|
+
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'
|
|
163
|
+
onClick={() => {
|
|
164
|
+
setModal({
|
|
165
|
+
title: getString('deletePhoto'),
|
|
166
|
+
body: (
|
|
167
|
+
<div className='p-4'>
|
|
168
|
+
<div className='flex flex-col gap-4'>
|
|
169
|
+
<div>{getString('deletePhotoText')}</div>
|
|
170
|
+
<div className='flex gap-2'>
|
|
171
|
+
<button
|
|
172
|
+
className='rounded bg-green-600 px-2 py-1 text-white'
|
|
173
|
+
onClick={handleDocumentDelete}
|
|
174
|
+
>
|
|
175
|
+
{getString('yes')}
|
|
176
|
+
</button>
|
|
177
|
+
<button
|
|
178
|
+
className='rounded bg-red-800 px-2 py-1 text-white'
|
|
179
|
+
onClick={() => {
|
|
180
|
+
setModal(null)
|
|
181
|
+
}}
|
|
182
|
+
>
|
|
183
|
+
{getString('no')}
|
|
184
|
+
</button>
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
188
|
+
),
|
|
189
|
+
headerColor: 'bg-red-700',
|
|
190
|
+
titleColor: 'text-white',
|
|
191
|
+
lang: 'en',
|
|
192
|
+
})
|
|
193
|
+
}}
|
|
194
|
+
>
|
|
195
|
+
<Trash2Icon size={20} /> {getString('delete')}
|
|
196
|
+
</button>
|
|
197
|
+
</div>
|
|
198
|
+
) : null}
|
|
199
|
+
<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'>
|
|
200
|
+
<button
|
|
201
|
+
type='button'
|
|
202
|
+
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'
|
|
203
|
+
onClick={() => {
|
|
204
|
+
if (fileInputContainerRef.current?.firstChild) {
|
|
205
|
+
;(fileInputContainerRef.current.firstChild as HTMLInputElement).click()
|
|
206
|
+
}
|
|
207
|
+
}}
|
|
208
|
+
>
|
|
209
|
+
<UploadIcon size={20} /> {getString('selectFile')}
|
|
210
|
+
</button>
|
|
211
|
+
<div className='flex w-full ps-2'>
|
|
212
|
+
<div className='break-all'>{fileName}</div>
|
|
213
|
+
</div>
|
|
214
|
+
</div>
|
|
86
215
|
</div>
|
|
87
216
|
</div>
|
|
88
|
-
|
|
89
|
-
</
|
|
90
|
-
<div ref={fileInputContainerRef}>
|
|
91
|
-
<input
|
|
92
|
-
type='file'
|
|
93
|
-
className='hidden'
|
|
94
|
-
name={field.name}
|
|
95
|
-
ref={field.ref}
|
|
96
|
-
onChange={(e) => {
|
|
97
|
-
onImageChange(e)
|
|
98
|
-
if (!input.value) {
|
|
99
|
-
field.onChange(e.target?.files?.length ? e.target.files[0] : undefined)
|
|
100
|
-
}
|
|
101
|
-
}}
|
|
102
|
-
/>
|
|
103
|
-
</div>
|
|
104
|
-
<div className='flex flex-col items-center gap-2 md:flex-row'>
|
|
105
|
-
<div className='w-full flex-1 md:flex-[0.5]'>
|
|
106
|
-
<button
|
|
107
|
-
type='button'
|
|
108
|
-
className='w-full rounded border bg-linear-to-r from-blue-700 to-sky-500 p-2 text-center text-sm font-bold uppercase text-white drop-shadow-sm'
|
|
109
|
-
onClick={() => {
|
|
110
|
-
if (fileInputContainerRef.current?.firstChild) {
|
|
111
|
-
;(fileInputContainerRef.current.firstChild as HTMLInputElement).click()
|
|
112
|
-
}
|
|
113
|
-
}}
|
|
114
|
-
>
|
|
115
|
-
Upload
|
|
116
|
-
</button>
|
|
117
|
-
</div>
|
|
118
|
-
<div className='w-full flex-1'>
|
|
119
|
-
<span>{fileName}</span>
|
|
120
|
-
</div>
|
|
121
|
-
</div>
|
|
217
|
+
</CardContent>
|
|
218
|
+
</Card>
|
|
122
219
|
</FormInputElement>
|
|
123
220
|
)
|
|
124
221
|
}
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
"nanoid": "^5.1.2",
|
|
65
65
|
"next": "16.1.1",
|
|
66
66
|
"next-themes": "^0.4.6",
|
|
67
|
-
"nextjs-cms": "0.5.
|
|
67
|
+
"nextjs-cms": "0.5.83",
|
|
68
68
|
"plaiceholder": "^3.0.0",
|
|
69
69
|
"prettier-plugin-tailwindcss": "^0.7.2",
|
|
70
70
|
"qrcode": "^1.5.4",
|
|
@@ -97,7 +97,7 @@
|
|
|
97
97
|
"eslint-config-prettier": "^10.0.1",
|
|
98
98
|
"eslint-plugin-prettier": "^5.2.3",
|
|
99
99
|
"fs-extra": "^11.3.3",
|
|
100
|
-
"nextjs-cms-kit": "0.5.
|
|
100
|
+
"nextjs-cms-kit": "0.5.83",
|
|
101
101
|
"postcss": "^8.5.1",
|
|
102
102
|
"prettier": "3.5.0",
|
|
103
103
|
"raw-loader": "^4.0.2",
|