Skip to content

B
BoxDialer
Commit 245af567 authored by Muhammadali's avatar Muhammadali
Browse files
Options

update

parent 54e0e39e
Hide whitespace changes
Inline Side-by-side
Showing with 148 additions and 169 deletions
package.json
View file @ 245af567
{
"name": "boxdialer",
"version": "4.8.74",
"version": "4.8.75",
"description": "",
"main": "src/boxDialer.js",
"scripts": {
......
src/components/Modal/index.jsx
View file @ 245af567
/** @format */
import React, { useEffect, useState } from 'react';
import MainBlock, { ModalContainer } from './style';
import React, {useEffect, useState} from 'react';
import MainBlock, {ModalContainer} from './style';
import VerticalAlignTopIcon from '@mui/icons-material/VerticalAlignTop';
import CallEndIcon from '@mui/icons-material/CallEnd';
import MicIcon from '@mui/icons-material/Mic';
......@@ -14,180 +14,159 @@ import CallCardDropDown from '../CallCardDropDown';
import ModalNumpad from '../ModalNumpad';
import {useConfigHoldMute} from "../../storage"
const Modal = ({ children, hidden, hangupButton, phoneNumber, callType }) => {
const boxDialer = window.BoxDialer;
const Modal = ({children, hidden, hangupButton, phoneNumber, callType}) => {
const boxDialer = window.BoxDialer;
const configHoldMute = useConfigHoldMute((state) => state)
const [rollUp, setRollUp] = useState(false);
const [modalHidden, setModalHidden] = useState(false);
const [transferModel, setTransferModel] = useState(true);
const [numpadModal, setNumpadModal] = useState(false);
const configHoldMute = useConfigHoldMute((state) => state)
const [rollUp, setRollUp] = useState(false);
const [modalHidden, setModalHidden] = useState(false);
const [transferModel, setTransferModel] = useState(true);
const [numpadModal, setNumpadModal] = useState(false);
useEffect(() => {
setModalHidden(hidden);
}, [hidden]);
useEffect(() => {
setModalHidden(hidden);
}, [hidden]);
const selectUserFunc = (e) => {
if (e) {
boxDialer.transferButtonClick(e);
setTransferModel(true);
}
};
const selectUserFunc = (e) => {
if (e) {
boxDialer.transferButtonClick(e);
setTransferModel(true);
}
};
const openNumpad = () => {
if (window.BX) {
} else {
setNumpadModal(!numpadModal);
}
};
if (!modalHidden) return;
const openNumpad = () => {
if (window.BX) {
} else {
setNumpadModal(!numpadModal);
}
};
if (!modalHidden) return;
const selectModalType = (type) => {
switch (type) {
case 'incoming':
return (
<ModalContainer.Footer rollUp={rollUp}>
<button
className='redButton'
onClick={() => boxDialer.skipButtonClick()}>
<CallEndIcon />
ЗАКРЫТЬ
</button>
<button
className='greenButton'
onClick={() => boxDialer.answerButtonClick()}>
ОТВЕТИТЬ
</button>
</ModalContainer.Footer>
);
case 'outgoing':
return (
<ModalContainer.Footer rollUp={rollUp}>
<button
className='greenButton'
onClick={() => boxDialer.answerButtonClick()}>
ОТВЕТИТЬ
</button>
</ModalContainer.Footer>
);
case 'connectingIncoming':
return (
<ModalContainer.Footer rollUp={rollUp}>
<button
className='redButton'
onClick={() => boxDialer.skipButtonClick()}>
<CallEndIcon />
ЗАКРЫТЬ
</button>
</ModalContainer.Footer>
);
case 'connectingOutgoing':
return (
<ModalContainer.Footer rollUp={rollUp}>
<button
className='redButton'
onClick={() => boxDialer.skipButtonClick()}>
<CallEndIcon />
ЗАКРЫТЬ
</button>
</ModalContainer.Footer>
);
case 'connected':
return (
<ModalContainer.Footer justify={'space-between'} rollUp={rollUp}>
<div className='outcomingEventStyle'>
<div onClick={() => boxDialer.holdButtonClick()}>
{configHoldMute?.state?.callHold ? (
<PlayArrowIcon style={{ color: '#fff' }} />
) : (
<PauseIcon style={{ color: '#fff' }} />
)}
</div>
<div onClick={() => boxDialer.muteButtonClick()}>
{configHoldMute?.state?.callMute ? (
<MicOffIcon style={{ color: '#fff' }} />
) : (
<MicIcon style={{ color: '#fff' }} />
)}
</div>
<div
className='transferAreaIcon'
onClick={() => {
window.BX
? boxDialer.selectUser()
: setTransferModel(!transferModel);
}}>
<SendToMobileIcon style={{ color: '#fff' }} />
<CallCardDropDown
hiddenState={transferModel}
selectUserFunc={selectUserFunc}
/>
</div>
<div className={'openNumpadAreaIcon'}>
<DialpadIcon
style={{ color: '#fff' }}
onClick={() => openNumpad()}
/>
<ModalNumpad hidden={numpadModal} />
</div>
</div>
<button
className='redButton'
onClick={() => boxDialer.skipButtonClick()}>
<CallEndIcon />
ЗАКРЫТЬ
</button>
</ModalContainer.Footer>
);
default:
return (
<ModalContainer.Footer rollUp={rollUp}>
Do not fount event
</ModalContainer.Footer>
);
}
};
const selectModalType = (type) => {
console.log('selectModalType_inset_component: ', type)
switch (type) {
case 'incoming':
return (<ModalContainer.Footer rollUp={rollUp}>
<button
className='redButton'
onClick={() => boxDialer.skipButtonClick()}>
<CallEndIcon/>
ЗАКРЫТЬ
</button>
<button
className='greenButton'
onClick={() => boxDialer.answerButtonClick()}>
ОТВЕТИТЬ
</button>
</ModalContainer.Footer>);
case 'outgoing':
return (<ModalContainer.Footer rollUp={rollUp}>
<button
className='greenButton'
onClick={() => boxDialer.answerButtonClick()}>
ОТВЕТИТЬ
</button>
</ModalContainer.Footer>);
case 'connectingIncoming':
return (<ModalContainer.Footer rollUp={rollUp}>
<button
className='redButton'
onClick={() => boxDialer.skipButtonClick()}>
<CallEndIcon/>
ЗАКРЫТЬ
</button>
</ModalContainer.Footer>);
case 'connectingOutgoing':
return (<ModalContainer.Footer rollUp={rollUp}>
<button
className='redButton'
onClick={() => boxDialer.skipButtonClick()}>
<CallEndIcon/>
ЗАКРЫТЬ
</button>
</ModalContainer.Footer>);
case 'connected':
return (<ModalContainer.Footer justify={'space-between'} rollUp={rollUp}>
<div className='outcomingEventStyle'>
<div onClick={() => boxDialer.holdButtonClick()}>
{configHoldMute?.state?.callHold ? (<PlayArrowIcon style={{color: '#fff'}}/>) : (
<PauseIcon style={{color: '#fff'}}/>)}
</div>
<div onClick={() => boxDialer.muteButtonClick()}>
{configHoldMute?.state?.callMute ? (<MicOffIcon style={{color: '#fff'}}/>) : (
<MicIcon style={{color: '#fff'}}/>)}
</div>
<div
className='transferAreaIcon'
onClick={() => {
window.BX ? boxDialer.selectUser() : setTransferModel(!transferModel);
}}>
<SendToMobileIcon style={{color: '#fff'}}/>
<CallCardDropDown
hiddenState={transferModel}
selectUserFunc={selectUserFunc}
/>
</div>
<div className={'openNumpadAreaIcon'}>
<DialpadIcon
style={{color: '#fff'}}
onClick={() => openNumpad()}
/>
<ModalNumpad hidden={numpadModal}/>
</div>
</div>
<button
className='redButton'
onClick={() => boxDialer.skipButtonClick()}>
<CallEndIcon/>
ЗАКРЫТЬ
</button>
</ModalContainer.Footer>);
default:
return (<ModalContainer.Footer rollUp={rollUp}>
Do not fount event
</ModalContainer.Footer>);
}
};
return (
<MainBlock
hidden={modalHidden || modalHidden}
rollUp={rollUp}
onClick={(e) => e.stopPropagation()}>
<ModalContainer onClick={(e) => e.stopPropagation()} rollUp={rollUp}>
{children}
<ModalContainer.Top className={'top'} rollUp={rollUp}>
<p>
Звонок {callType === 'outcoming' ? 'на' : 'от'} {phoneNumber}
</p>
return (<MainBlock
hidden={modalHidden || modalHidden}
rollUp={rollUp}
onClick={(e) => e.stopPropagation()}>
<ModalContainer onClick={(e) => e.stopPropagation()} rollUp={rollUp}>
{children}
<ModalContainer.Top className={'top'} rollUp={rollUp}>
<p>
Звонок {callType === 'outcoming' ? 'на' : 'от'} {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>
{selectModalType(callType)}
</ModalContainer>
<div className='rollUpVesion'>
<button
className='close'
onClick={() => {
hangupButton();
setRollUp(false);
setModalHidden(false);
}}>
ЗАКРЫТЬ
</button>
<button className='rollUpUn' onClick={() => setRollUp(false)}>
<VerticalAlignTopIcon />
</button>
</div>
</MainBlock>
);
<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>
{selectModalType(callType)}
</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;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Technounit-GROUP 2023