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