index.jsx 2.3 KB
Newer Older
Muhammadali's avatar
Muhammadali committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88
/** @format */

import React, { useEffect, useState } from 'react';
import MainBlock, { ModalContainer } from './style';
import VerticalAlignTopIcon from '@mui/icons-material/VerticalAlignTop';

const Modal = ({
	children,
	hidden,
	hangupButton,
	phoneNumber,
	callType,
	callAnswerType,
}) => {
	const [rollUp, setRollUp] = useState(false);
	const [modalHidden, setModalHidden] = useState(false);

	useEffect(() => {
		setModalHidden(hidden);
	}, [hidden]);

	if (!modalHidden) return;
	const boxDialer = window.BoxDialer;
	return (
		<MainBlock hidden={modalHidden || modalHidden} rollUp={rollUp}>
			<ModalContainer onClick={(e) => e.stopPropagation()} rollUp={rollUp}>
				{children}
				<ModalContainer.Top className={'top'} rollUp={rollUp}>
					{callType === 'outcoming' ? (
						<p>Звонок на {phoneNumber}</p>
					) : (
						<p>Звонок от {phoneNumber}</p>
					)}

					<p className='rollUpButton' onClick={() => setRollUp(true)}>
						Свернуть
					</p>
				</ModalContainer.Top>
				<hr />
				<ModalContainer.Head rollUp={rollUp}>
					<div className='round'></div>
					<p className='name'>No name</p>
				</ModalContainer.Head>
				<hr />
				<ModalContainer.Body rollUp={rollUp}></ModalContainer.Body>
				<hr />
				<ModalContainer.Bottom rollUp={rollUp}></ModalContainer.Bottom>
				<hr />
				{callType === 'outcoming' ? (
					<ModalContainer.Footer rollUp={rollUp} onClick={() => hangupButton()}>
						<button className='redButton'>ЗАКРЫТЬ</button>
					</ModalContainer.Footer>
				) : (
					<ModalContainer.Footer rollUp={rollUp}>
						<button
							className='redButton'
							onClick={() => boxDialer.skipButtonClick()}>
							ЗАКРЫТЬ
						</button>
						{callAnswerType !== 'answered' && (
							<button
								className='greenButton'
								onClick={() => boxDialer.answerButtonClick()}>
								ОТВЕТИТЬ
							</button>
						)}
					</ModalContainer.Footer>
				)}
			</ModalContainer>
			<div className='rollUpVesion'>
				<button
					className='close'
					onClick={() => {
						hangupButton();
						setRollUp(false);
						setModalHidden(false);
					}}>
					ЗАКРЫТЬ
				</button>
				<button className='rollUpUn' onClick={() => setRollUp(false)}>
					<VerticalAlignTopIcon />
				</button>
			</div>
		</MainBlock>
	);
};

export default Modal;