image section

2025-12-04 09:34:04 +03:30
parent 2c28218488
commit 26d3bd26ab
7 changed files with 292 additions and 27 deletions
@@ -0,0 +1,151 @@
+import { CloseCircle, DocumentUpload, Gallery } from 'iconsax-react'
+import { type FC, useCallback, useEffect, useState } from 'react'
+import { useDropzone } from 'react-dropzone';
+import { clx } from '../helpers/utils';
+
+type Props = {
+    label: string;
+    onChange: (file: File[]) => void;
+    isMultiple?: boolean;
+    isFile?: boolean,
+    preview?: string[],
+    onChangePreview?: (preview: string[]) => void,
+    getCover?: (url: string) => void,
+    coverUrl?: string
+}
+
+const UploadBoxDraggble: FC<Props> = (props: Props) => {
+
+    const [files, setFiles] = useState<File[]>([])
+    const [perviews, setPerviews] = useState<string[]>(props.preview ? props.preview : [])
+    const [isFill, setIsFill] = useState<boolean>(false)
+    const [cover, setCover] = useState<string>(props.coverUrl ? props.coverUrl : '')
+
+    const onDrop = useCallback((acceptedFiles: File[]) => {
+        if (props.isMultiple) {
+            const array = [...files, ...acceptedFiles]
+            setFiles(array)
+            props.onChange(array)
+        } else {
+            setFiles([acceptedFiles[0]])
+            props.onChange([acceptedFiles[0]])
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [files])
+    const { getRootProps, getInputProps } = useDropzone({ onDrop })
+
+    const handleDelete = (index: number) => {
+        const array = [...files]
+        array.splice(index, 1)
+        setFiles(array)
+        props.onChange(array)
+    }
+
+    const handleDeletePreview = (index: number) => {
+        const array = [...perviews];
+        array.splice(index, 1);
+        setPerviews(array);
+        if (props.onChangePreview) {
+            props.onChangePreview(array);
+        }
+    }
+
+    useEffect(() => {
+
+        if (props.preview && props.preview.length > 0 && !isFill) {
+            setPerviews(props.preview)
+            console.log('preview', props.preview);
+
+            setIsFill(true)
+        }
+
+    }, [props.preview, isFill])
+
+    useEffect(() => {
+        setCover(props.coverUrl ? props.coverUrl : '')
+    }, [props.coverUrl])
+
+
+    return (
+        <div>
+            <div {...getRootProps()} className='w-full py-8 border border-dashed border-description flex flex-col justify-center items-center gap-4 rounded-2xl'>
+                <input {...getInputProps()} />
+                <Gallery
+                    className='size-8'
+                    color='#8C90A3'
+                />
+                <div className='text-description text-xs'>
+                    {props.label}
+                </div>
+
+                <div className='flex items-center gap-2'>
+                    <DocumentUpload
+                        className='size-4'
+                        color='black'
+                    />
+                    <div className='text-xs'>آپلود</div>
+                </div>
+            </div>
+
+            {
+                files.length > 0 || perviews.length > 0 ? (
+                    <div className='mt-4 flex gap-4 items-center'>
+                        {
+                            perviews && perviews.map((item, index) => {
+                                return (
+                                    <div key={index} className='flex items-center gap-2'>
+                                        <div key={index} className='flex relative items-center gap-2'>
+                                            <img onClick={() => {
+                                                if (props.getCover) {
+                                                    setCover(item)
+                                                    props.getCover(item)
+                                                }
+                                            }} src={item}
+                                                className={clx(
+                                                    'size-10 rounded-full object-cover',
+                                                    cover === item ? 'border-2 border-red-400' : ''
+                                                )} />
+                                            <div onClick={() => handleDeletePreview(index)} className='absolute -left-2 -top-2 shadow-md bg-white size-5 rounded-full flex justify-center items-center'>
+                                                <CloseCircle className='size-4 ' color='red' />
+                                            </div>
+                                        </div>
+                                    </div>
+                                )
+                            })
+                        }
+                        {
+                            files.map((file, index) => {
+                                if (props.isFile) {
+                                    return (
+                                        <div key={index} className='flex border p-2 rounded-lg items-center gap-2'>
+                                            <div className='flex relative items-center gap-2'>
+                                                <div className='text-xs'>{file.name}</div>
+                                                <div className='absolute -left-4 -top-4 shadow-md bg-white size-5 rounded-full flex justify-center items-center'>
+                                                    <CloseCircle onClick={() => handleDelete(index)} className='size-4 ' color='red' />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    )
+                                }
+                                else
+                                    return (
+                                        <div key={index} className='flex items-center gap-2'>
+                                            <div key={index} className='flex relative items-center gap-2'>
+                                                <img src={URL.createObjectURL(file)} alt={file.name} className='size-10 rounded-full object-cover' />
+                                                <div className='absolute -left-2 -top-2 shadow-md bg-white size-5 rounded-full flex justify-center items-center'>
+                                                    <CloseCircle onClick={() => handleDelete(index)} className='size-4 ' color='red' />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    )
+                            })
+                        }
+                    </div>
+                ) : null
+            }
+
+        </div>
+    )
+}
+
+export default UploadBoxDraggble