aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2026-01-04 23:14:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

update: add img upload overlay to insertImageModal

Browse Source
This commit is contained in:
MTG2000
2022-08-28 14:53:47 +03:00
committed by Dolu
parent 96cbc39eef
commit b2811cf6ec
1 changed files with 35 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/Components/Modals/InsertImageModal/InsertImageModal.tsx
View File

@@ -1,13 +1,14 @@
import React, { FormEvent, useState } from 'react'
import React, { FormEvent, useRef, useState } from 'react'
import { ModalCard, modalCardVariants } from 'src/Components/Modals/ModalsContainer/ModalsContainer'
import { motion } from 'framer-motion'
import { IoClose } from 'react-icons/io5'
import Button from 'src/Components/Button/Button'
import { useAppDispatch } from 'src/utils/hooks'
import { useAppDispatch, useIsDraggingOnElement } from 'src/utils/hooks'
import { PayloadAction } from '@reduxjs/toolkit'
import { RotatingLines } from 'react-loader-spinner'
import { FaExchangeAlt, FaImage } from 'react-icons/fa'
import SingleImageUploadInput, { ImageType } from 'src/Components/Inputs/FilesInputs/SingleImageUploadInput/SingleImageUploadInput'
import { AiOutlineCloudUpload } from 'react-icons/ai'
interface Props extends ModalCard {
callbackAction: PayloadAction<{ src: string, alt?: string }>
@@ -19,6 +20,9 @@ export default function InsertImageModal({ onClose, direction, callbackAction, .
const [altInput, setAltInput] = useState("")
const dispatch = useAppDispatch();
const dropAreaRef = useRef<HTMLDivElement>(null!)
const isDragging = useIsDraggingOnElement({ ref: dropAreaRef });
const handleSubmit = (e: FormEvent) => {
e.preventDefault()
console.log(uploadedImage?.url);
@@ -85,7 +89,7 @@ export default function InsertImageModal({ onClose, direction, callbackAction, .
value={uploadedImage}
onChange={setUploadedImage}
wrapperClass='h-full mt-32'
render={({ img, isUploading }) => <div className="w-full group aspect-video bg-gray-100 cursor-pointer rounded-16 border-2 border-gray200 overflow-hidden relative flex flex-col justify-center items-center">
render={({ img, isUploading, isDraggingOnWindow }) => <div ref={dropAreaRef} className="w-full group aspect-video bg-gray-100 cursor-pointer rounded-16 border-2 border-gray200 overflow-hidden relative flex flex-col justify-center items-center">
{img && <>
<img src={img.url} className='w-full h-full object-cover rounded-16' alt="" />
{!isUploading &&
@@ -113,6 +117,34 @@ export default function InsertImageModal({ onClose, direction, callbackAction, .
/>
</div>
}
{isDraggingOnWindow &&
<div
className={
`absolute inset-0 ${isDragging ? 'bg-primary-600' : 'bg-primary-400'} bg-opacity-80 flex flex-col justify-center items-center text-white font-bold transition-transform`
}
>
<motion.div
initial={{ y: 0 }}
animate={
isDragging ? {
y: 5,
transition: {
duration: .4,
repeat: Infinity,
repeatType: 'mirror',
}
} : {
y: 0
}}
className='text-center text-body1'
>
<AiOutlineCloudUpload className="scale-150 text-h1 mb-16" />
<br />
Drop here to upload
</motion.div>
</div>
}
</div>}
/>
<div className='mt-24'>