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", "name": "boxdialer",
"version": "4.8.74", "version": "4.8.75",
"description": "", "description": "",
"main": "src/boxDialer.js", "main": "src/boxDialer.js",
"scripts": { "scripts": {
......
src/components/Modal/index.jsx
View file @ 245af567
/** @format */ /** @format */
import React, { useEffect, useState } from 'react'; import React, {useEffect, useState} from 'react';
import MainBlock, { ModalContainer } from './style'; import MainBlock, {ModalContainer} from './style';
import VerticalAlignTopIcon from '@mui/icons-material/VerticalAlignTop'; import VerticalAlignTopIcon from '@mui/icons-material/VerticalAlignTop';
import CallEndIcon from '@mui/icons-material/CallEnd'; import CallEndIcon from '@mui/icons-material/CallEnd';
import MicIcon from '@mui/icons-material/Mic'; import MicIcon from '@mui/icons-material/Mic';
...@@ -14,180 +14,159 @@ import CallCardDropDown from '../CallCardDropDown'; ...@@ -14,180 +14,159 @@ import CallCardDropDown from '../CallCardDropDown';
import ModalNumpad from '../ModalNumpad'; import ModalNumpad from '../ModalNumpad';
import {useConfigHoldMute} from "../../storage" import {useConfigHoldMute} from "../../storage"
const Modal = ({ children, hidden, hangupButton, phoneNumber, callType }) => { const Modal = ({children, hidden, hangupButton, phoneNumber, callType}) => {
const boxDialer = window.BoxDialer; const boxDialer = window.BoxDialer;
const configHoldMute = useConfigHoldMute((state) => state) const configHoldMute = useConfigHoldMute((state) => state)
const [rollUp, setRollUp] = useState(false); const [rollUp, setRollUp] = useState(false);
const [modalHidden, setModalHidden] = useState(false); const [modalHidden, setModalHidden] = useState(false);
const [transferModel, setTransferModel] = useState(true); const [transferModel, setTransferModel] = useState(true);
const [numpadModal, setNumpadModal] = useState(false); const [numpadModal, setNumpadModal] = useState(false);
useEffect(() => { useEffect(() => {
setModalHidden(hidden); setModalHidden(hidden);
}, [hidden]); }, [hidden]);
const selectUserFunc = (e) => { const selectUserFunc = (e) => {
if (e) { if (e) {
boxDialer.transferButtonClick(e); boxDialer.transferButtonClick(e);
setTransferModel(true); setTransferModel(true);
} }
}; };
const openNumpad = () => { const openNumpad = () => {
if (window.BX) { if (window.BX) {
} else { } else {
setNumpadModal(!numpadModal); setNumpadModal(!numpadModal);
} }
}; };
if (!modalHidden) return; if (!modalHidden) return;
const selectModalType = (type) => { const selectModalType = (type) => {
switch (type) { console.log('selectModalType_inset_component: ', type)
case 'incoming': switch (type) {
return ( case 'incoming':
<ModalContainer.Footer rollUp={rollUp}> return (<ModalContainer.Footer rollUp={rollUp}>
<button <button
className='redButton' className='redButton'
onClick={() => boxDialer.skipButtonClick()}> onClick={() => boxDialer.skipButtonClick()}>
<CallEndIcon /> <CallEndIcon/>
ЗАКРЫТЬ ЗАКРЫТЬ
</button> </button>
<button <button
className='greenButton' className='greenButton'
onClick={() => boxDialer.answerButtonClick()}> onClick={() => boxDialer.answerButtonClick()}>
ОТВЕТИТЬ ОТВЕТИТЬ
</button> </button>
</ModalContainer.Footer> </ModalContainer.Footer>);
); case 'outgoing':
case 'outgoing': return (<ModalContainer.Footer rollUp={rollUp}>
return ( <button
<ModalContainer.Footer rollUp={rollUp}> className='greenButton'
<button onClick={() => boxDialer.answerButtonClick()}>
className='greenButton' ОТВЕТИТЬ
onClick={() => boxDialer.answerButtonClick()}> </button>
ОТВЕТИТЬ </ModalContainer.Footer>);
</button> case 'connectingIncoming':
</ModalContainer.Footer> return (<ModalContainer.Footer rollUp={rollUp}>
); <button
case 'connectingIncoming': className='redButton'
return ( onClick={() => boxDialer.skipButtonClick()}>
<ModalContainer.Footer rollUp={rollUp}> <CallEndIcon/>
<button ЗАКРЫТЬ
className='redButton' </button>
onClick={() => boxDialer.skipButtonClick()}> </ModalContainer.Footer>);
<CallEndIcon /> case 'connectingOutgoing':
ЗАКРЫТЬ return (<ModalContainer.Footer rollUp={rollUp}>
</button> <button
</ModalContainer.Footer> className='redButton'
); onClick={() => boxDialer.skipButtonClick()}>
case 'connectingOutgoing': <CallEndIcon/>
return ( ЗАКРЫТЬ
<ModalContainer.Footer rollUp={rollUp}> </button>
<button </ModalContainer.Footer>);
className='redButton' case 'connected':
onClick={() => boxDialer.skipButtonClick()}> return (<ModalContainer.Footer justify={'space-between'} rollUp={rollUp}>
<CallEndIcon /> <div className='outcomingEventStyle'>
ЗАКРЫТЬ <div onClick={() => boxDialer.holdButtonClick()}>
</button> {configHoldMute?.state?.callHold ? (<PlayArrowIcon style={{color: '#fff'}}/>) : (
</ModalContainer.Footer> <PauseIcon style={{color: '#fff'}}/>)}
); </div>
case 'connected': <div onClick={() => boxDialer.muteButtonClick()}>
return ( {configHoldMute?.state?.callMute ? (<MicOffIcon style={{color: '#fff'}}/>) : (
<ModalContainer.Footer justify={'space-between'} rollUp={rollUp}> <MicIcon style={{color: '#fff'}}/>)}
<div className='outcomingEventStyle'> </div>
<div onClick={() => boxDialer.holdButtonClick()}> <div
{configHoldMute?.state?.callHold ? ( className='transferAreaIcon'
<PlayArrowIcon style={{ color: '#fff' }} /> onClick={() => {
) : ( window.BX ? boxDialer.selectUser() : setTransferModel(!transferModel);
<PauseIcon style={{ color: '#fff' }} /> }}>
)} <SendToMobileIcon style={{color: '#fff'}}/>
</div> <CallCardDropDown
<div onClick={() => boxDialer.muteButtonClick()}> hiddenState={transferModel}
{configHoldMute?.state?.callMute ? ( selectUserFunc={selectUserFunc}
<MicOffIcon style={{ color: '#fff' }} /> />
) : ( </div>
<MicIcon style={{ color: '#fff' }} /> <div className={'openNumpadAreaIcon'}>
)} <DialpadIcon
</div> style={{color: '#fff'}}
<div onClick={() => openNumpad()}
className='transferAreaIcon' />
onClick={() => { <ModalNumpad hidden={numpadModal}/>
window.BX </div>
? boxDialer.selectUser() </div>
: setTransferModel(!transferModel); <button
}}> className='redButton'
<SendToMobileIcon style={{ color: '#fff' }} /> onClick={() => boxDialer.skipButtonClick()}>
<CallCardDropDown <CallEndIcon/>
hiddenState={transferModel} ЗАКРЫТЬ
selectUserFunc={selectUserFunc} </button>
/> </ModalContainer.Footer>);
</div> default:
<div className={'openNumpadAreaIcon'}> return (<ModalContainer.Footer rollUp={rollUp}>
<DialpadIcon Do not fount event
style={{ color: '#fff' }} </ModalContainer.Footer>);
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 ( return (<MainBlock
<MainBlock hidden={modalHidden || modalHidden}
hidden={modalHidden || modalHidden} rollUp={rollUp}
rollUp={rollUp} onClick={(e) => e.stopPropagation()}>
onClick={(e) => e.stopPropagation()}> <ModalContainer onClick={(e) => e.stopPropagation()} rollUp={rollUp}>
<ModalContainer onClick={(e) => e.stopPropagation()} rollUp={rollUp}> {children}
{children} <ModalContainer.Top className={'top'} rollUp={rollUp}>
<ModalContainer.Top className={'top'} rollUp={rollUp}> <p>
<p> Звонок {callType === 'outcoming' ? 'на' : 'от'} {phoneNumber}
Звонок {callType === 'outcoming' ? 'на' : 'от'} {phoneNumber} </p>
</p>
<p className='rollUpButton' onClick={() => setRollUp(true)}> <p className='rollUpButton' onClick={() => setRollUp(true)}>
Свернуть Свернуть
</p> </p>
</ModalContainer.Top> </ModalContainer.Top>
<hr /> <hr/>
<ModalContainer.Head rollUp={rollUp}> <ModalContainer.Head rollUp={rollUp}>
<div className='round'></div> <div className='round'></div>
<p className='name'>No name</p> <p className='name'>No name</p>
</ModalContainer.Head> </ModalContainer.Head>
{selectModalType(callType)} {selectModalType(callType)}
</ModalContainer> </ModalContainer>
<div className='rollUpVesion'> <div className='rollUpVesion'>
<button <button
className='close' className='close'
onClick={() => { onClick={() => {
hangupButton(); hangupButton();
setRollUp(false); setRollUp(false);
setModalHidden(false); setModalHidden(false);
}}> }}>
ЗАКРЫТЬ ЗАКРЫТЬ
</button> </button>
<button className='rollUpUn' onClick={() => setRollUp(false)}> <button className='rollUpUn' onClick={() => setRollUp(false)}>
<VerticalAlignTopIcon /> <VerticalAlignTopIcon/>
</button> </button>
</div> </div>
</MainBlock> </MainBlock>);
);
}; };
export default Modal; 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