parent
3cd90d8e03
commit
75016e9540
17 changed files with 660 additions and 553 deletions
@ -1,87 +1,112 @@ |
||||
import React, { Component, useState } from 'react'; |
||||
import MoreHorizIcon from '@material-ui/icons/MoreHoriz'; |
||||
import Video from '../../QR/VideoBox/React-video-js-player/index'; |
||||
import Modal from './Modal/index'; |
||||
import React, { Component, useState } from "react"; |
||||
import MoreHorizIcon from "@material-ui/icons/MoreHoriz"; |
||||
import Video from "../../QR/VideoBox/React-video-js-player/index"; |
||||
import Modal from "./Modal/index"; |
||||
|
||||
import './index.scss'; |
||||
import "./index.scss"; |
||||
export default function Gallery(props) { |
||||
const [selectedMedia,setSelectedMedia] = useState(props.gallery[1]); |
||||
const [selectedMedia, setSelectedMedia] = useState(props.gallery[0]); |
||||
const [modal, setModal] = useState(null); |
||||
|
||||
return( |
||||
return ( |
||||
<> |
||||
{ |
||||
window.innerWidth > 1000 ?
|
||||
{window.innerWidth > 1000 ? ( |
||||
<section className="product-gallery d-flex flex-column"> |
||||
<div className="product-gallery__top"> |
||||
{ |
||||
selectedMedia ?
|
||||
{selectedMedia ? ( |
||||
<> |
||||
{ |
||||
selectedMedia.type === 'image' ? |
||||
<img src={selectedMedia.value} alt={'عکس'} /> : null |
||||
} |
||||
{ |
||||
selectedMedia.type === 'film' ? |
||||
<Video /> : null |
||||
} |
||||
</> : null |
||||
} |
||||
{selectedMedia.type === "image" ? ( |
||||
<img |
||||
src={`https://dnvn.ir/api/v1/file/${selectedMedia.id}`} |
||||
alt={"عکس"} |
||||
/> |
||||
) : null} |
||||
{selectedMedia.type === "film" ? <Video /> : null} |
||||
</> |
||||
) : null} |
||||
</div> |
||||
<div className="product-gallery__list d-flex"> |
||||
{ |
||||
props.gallery.length > 3 ? |
||||
{props.gallery.length > 3 ? ( |
||||
<> |
||||
<Item active={selectedMedia === props.gallery[0]} item={props.gallery[0]} key={props.gallery[0].id} more={false} setSelectedMedia={setSelectedMedia} setModal={setModal} /> |
||||
<Item active={selectedMedia === props.gallery[1]} item={props.gallery[1]} key={props.gallery[1].id} more={false} setSelectedMedia={setSelectedMedia} setModal={setModal} /> |
||||
<Item active={selectedMedia === props.gallery[2]} item={props.gallery[2]} key={props.gallery[2].id} more={true} setSelectedMedia={setSelectedMedia} setModal={setModal} /> |
||||
</> : |
||||
<Item |
||||
active={selectedMedia === props.gallery[0]} |
||||
item={props.gallery[0]} |
||||
key={props.gallery[0].id} |
||||
more={false} |
||||
setSelectedMedia={setSelectedMedia} |
||||
setModal={setModal} |
||||
/> |
||||
<Item |
||||
active={selectedMedia === props.gallery[1]} |
||||
item={props.gallery[1]} |
||||
key={props.gallery[1].id} |
||||
more={false} |
||||
setSelectedMedia={setSelectedMedia} |
||||
setModal={setModal} |
||||
/> |
||||
<Item |
||||
active={selectedMedia === props.gallery[2]} |
||||
item={props.gallery[2]} |
||||
key={props.gallery[2].id} |
||||
more={true} |
||||
setSelectedMedia={setSelectedMedia} |
||||
setModal={setModal} |
||||
/> |
||||
</> |
||||
) : ( |
||||
<> |
||||
{ |
||||
props.gallery.map((item, i) => ( |
||||
<Item active={selectedMedia === item} item={item} key={item.id} more={false} setSelectedMedia={setSelectedMedia} setModal={setModal} /> |
||||
)) |
||||
} |
||||
{props.gallery.map((item, i) => ( |
||||
<Item |
||||
active={selectedMedia === item} |
||||
item={item} |
||||
key={item.id} |
||||
more={false} |
||||
setSelectedMedia={setSelectedMedia} |
||||
setModal={setModal} |
||||
/> |
||||
))} |
||||
</> |
||||
} |
||||
)} |
||||
</div> |
||||
{ |
||||
modal ? |
||||
<Modal first={modal} gallery={props.gallery} setModal={setModal} /> : null |
||||
} |
||||
</section> : null |
||||
} |
||||
{modal ? ( |
||||
<Modal first={modal} gallery={props.gallery} setModal={setModal} /> |
||||
) : null} |
||||
</section> |
||||
) : null} |
||||
</> |
||||
); |
||||
} |
||||
|
||||
const Item = (props) => { |
||||
const {item, more, setSelectedMedia, setModal, active} = props; |
||||
return( |
||||
const { item, more, setSelectedMedia, setModal, active } = props; |
||||
return ( |
||||
<> |
||||
{ |
||||
window.innerWidth > 1000 ? |
||||
<div style={{ border: active ? '4px solid #1BBC6E' : ''}} className="product-gallery-item d-flex"> |
||||
{ |
||||
item.type === 'image' ? |
||||
<img src={item.value} alt={'عکس'} /> : null |
||||
} |
||||
{ |
||||
item.type === 'film' ? |
||||
<Video /> : null |
||||
} |
||||
{ |
||||
!more ? |
||||
<div className="product-gallery-item__cover" onClick={() => setSelectedMedia(item)}> |
||||
|
||||
</div> : |
||||
<div className="product-gallery-item__cover product-gallery-item__more d-flex justify-content-center align-items-center" onClick={() => setModal(item)}> |
||||
<MoreHorizIcon style={{ fontSize: 60, color: 'white'}} /> |
||||
{window.innerWidth > 1000 ? ( |
||||
<div |
||||
style={{ border: active ? "4px solid #1BBC6E" : "" }} |
||||
className="product-gallery-item d-flex" |
||||
> |
||||
{item.type === "image" ? ( |
||||
<img src={`https://dnvn.ir/api/v1/file/${item.id}`} alt={"عکس"} /> |
||||
) : null} |
||||
{item.type === "film" ? ( |
||||
<Video fileId={`https://dnvn.ir/api/v1/file/${item.id}`} /> |
||||
) : null} |
||||
{!more ? ( |
||||
<div |
||||
className="product-gallery-item__cover" |
||||
onClick={() => setSelectedMedia(item)} |
||||
></div> |
||||
) : ( |
||||
<div |
||||
className="product-gallery-item__cover product-gallery-item__more d-flex justify-content-center align-items-center" |
||||
onClick={() => setModal(item)} |
||||
> |
||||
<MoreHorizIcon style={{ fontSize: 60, color: "white" }} /> |
||||
</div> |
||||
} |
||||
</div> : null |
||||
} |
||||
)} |
||||
</div> |
||||
) : null} |
||||
</> |
||||
|
||||
); |
||||
} |
||||
}; |
||||
|
||||
Loading…
Reference in new issue