parent
8c9ec9bbb2
commit
1d1fa3e99c
42 changed files with 288 additions and 213 deletions
@ -1,68 +1,68 @@ |
||||
import React, {useState} from 'react'; |
||||
import Carousel from 'react-elastic-carousel'; |
||||
import Video from '../../../QR/VideoBox/React-video-js-player/index'; |
||||
import exit from '../../../../assets/icons/exit.svg'; |
||||
import React, { useState } from "react"; |
||||
import Carousel from "react-elastic-carousel"; |
||||
import Video from "../../../QR/VideoBox/React-video-js-player/index"; |
||||
import exit from "../../../../assets/icons/exit.svg"; |
||||
|
||||
import './index.scss'; |
||||
import "./index.scss"; |
||||
const Modal = (props) => { |
||||
const [displayed, setDisplayed] = useState(props.first ? props.first : props.gallery[0]) |
||||
const {gallery, setModal} = props; |
||||
return( |
||||
const [displayed, setDisplayed] = useState( |
||||
props.first ? props.first : props.gallery[0] |
||||
); |
||||
const { gallery, setModal } = props; |
||||
return ( |
||||
<> |
||||
{ |
||||
window.innerWidth > 1000 ? |
||||
{window.innerWidth > 1000 ? ( |
||||
<section className="modal d-flex flex-column align-items-center justify-content-center"> |
||||
<img className="modal__exit" src={exit} alt="خروح" onClick={() => setModal(null)} /> |
||||
<img |
||||
className="modal__exit" |
||||
src={exit} |
||||
alt="خروح" |
||||
onClick={() => setModal(null)} |
||||
/> |
||||
<div className="modal__display"> |
||||
{ |
||||
displayed.type === 'image' ? |
||||
<img src={displayed.value} alt=window.t("عکس") /> : null |
||||
} |
||||
{ |
||||
displayed.type === 'film' ? |
||||
<Video /> : null |
||||
} |
||||
{displayed.type === "image" ? ( |
||||
<img src={displayed.value} alt={window.t("عکس")} /> |
||||
) : null} |
||||
{displayed.type === "film" ? <Video /> : null} |
||||
</div> |
||||
<footer className="modal__footer d-flex"> |
||||
<Carousel |
||||
itemsToShow={4} |
||||
isRTL={true} |
||||
enableTilt={false} |
||||
showArrows={true} |
||||
pagination={false} |
||||
> |
||||
{gallery.map((item, i) => ( |
||||
<Item |
||||
data={item} |
||||
key={i} |
||||
setDisplayed={setDisplayed} |
||||
active={item === displayed} |
||||
/> |
||||
))} |
||||
</Carousel> |
||||
itemsToShow={4} |
||||
isRTL={true} |
||||
enableTilt={false} |
||||
showArrows={true} |
||||
pagination={false} |
||||
> |
||||
{gallery.map((item, i) => ( |
||||
<Item |
||||
data={item} |
||||
key={i} |
||||
setDisplayed={setDisplayed} |
||||
active={item === displayed} |
||||
/> |
||||
))} |
||||
</Carousel> |
||||
</footer> |
||||
</section> : null |
||||
} |
||||
</section> |
||||
) : null} |
||||
</> |
||||
); |
||||
} |
||||
}; |
||||
|
||||
export default Modal; |
||||
|
||||
const Item = (props) => { |
||||
return( |
||||
return ( |
||||
<div className="modal-carousel-item"> |
||||
{ |
||||
props.data.type === 'image' ? |
||||
<img src={props.data.value} alt=window.t("عکس") /> : null |
||||
} |
||||
{ |
||||
props.data.type === 'film' ? |
||||
<Video /> : null |
||||
} |
||||
<div style={{ border: props.active ? '4px solid #1BBC6E' : '' }} className="modal-carousel-item__cover" onClick={() => props.setDisplayed(props.data)}> |
||||
|
||||
</div> |
||||
{props.data.type === "image" ? ( |
||||
<img src={props.data.value} alt={window.t("عکس")} /> |
||||
) : null} |
||||
{props.data.type === "film" ? <Video /> : null} |
||||
<div |
||||
style={{ border: props.active ? "4px solid #1BBC6E" : "" }} |
||||
className="modal-carousel-item__cover" |
||||
onClick={() => props.setDisplayed(props.data)} |
||||
></div> |
||||
</div> |
||||
); |
||||
}
|
||||
}; |
||||
|
||||
Loading…
Reference in new issue