@nethesis/phone-island 0.7.64 → 0.7.65
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../Button.js");require("../../node_modules/react-redux/es/index.js");var r=require("../../node_modules/@nethesis/nethesis-light-svg-icons/index.mjs.js"),a=require("../../node_modules/@fortawesome/react-fontawesome/index.es.js"),n=require("./Actions.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../Button.js");require("../../node_modules/react-redux/es/index.js");var r=require("../../node_modules/@nethesis/nethesis-light-svg-icons/index.mjs.js"),a=require("../../node_modules/@fortawesome/react-fontawesome/index.es.js"),n=require("./Actions.js"),i=require("../../lib/webrtc/messages.js"),u=require("../../lib/island/island.js"),l=require("../../lib/phone/call.js"),s=require("../Hangup.js"),o=require("../../node_modules/react-redux/es/hooks/useDispatch.js"),c=require("../../node_modules/react-redux/es/hooks/useSelector.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var f=d(e),p=["0","1","2","3","4","5","6","7","8","9","*","#"];exports.default=function(){var d=o.useDispatch(),m=c.useSelector((function(e){return e.currentCall})).keypadValue,x=c.useSelector((function(e){return e.island})).isOpen,v=e.useRef(m);function b(e){d.currentCall.updateKeypadValue("".concat(v.current).concat(e)),v.current="".concat(v.current).concat(e),l.playDtmfAudio(e),i.sendDTMF(e)}return e.useEffect((function(){function e(e){p.includes(e.key)&&b(e.key)}return window.addEventListener("keydown",e),function(){return window.removeEventListener("keydown",e)}}),[]),f.default.createElement(f.default.Fragment,null,x?f.default.createElement("div",{className:"pi-flex pi-flex-col pi-gap-7"},f.default.createElement("div",{className:"pi-flex pi-gap-4"},f.default.createElement(t.Button,{variant:"transparent",onClick:u.backToCallView},f.default.createElement(a.FontAwesomeIcon,{size:"xl",icon:r.faArrowLeft})),f.default.createElement("input",{"data-stop-propagation":!0,type:"text",readOnly:!0,value:m,autoFocus:!0,className:"pi-w-full pi-rounded-full pi-bg-black pi-border-2 pi-border-emerald-500 active:pi-border-emerald-500 focus:pi-border-emerald-500 pi-text-white pi-font-sans pi-font-light pi-text-xl pi-text-center pi-px-2 focus:pi-outline-0 focus:pi-ring-0"})),f.default.createElement(n.default,{keyCallback:b}),f.default.createElement("div",{className:"pi-flex pi-justify-center"},f.default.createElement(s.default,null))):f.default.createElement("div",{className:"pi-font-medium pi-text-base"},"Keypad"))};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/KeypadView/index.tsx"],"sourcesContent":["// Copyright (C) 2022 Nethesis S.r.l.\n// SPDX-License-Identifier: AGPL-3.0-or-later\n\nimport React, { type FC, useEffect, useRef } from 'react'\nimport { Button } from '../Button'\nimport { useDispatch, useSelector } from 'react-redux'\nimport { Dispatch, RootState } from '../../store'\nimport { faArrowLeft } from '@nethesis/nethesis-light-svg-icons'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport Actions from './Actions'\nimport { sendDTMF } from '../../lib/webrtc/messages'\nimport { backToCallView } from '../../lib/island/island'\nimport { playDtmfAudio } from '../../lib/phone/call'\nimport Hangup from '../Hangup'\n\nconst DTMF_KEYS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '#']\n\nconst KeypadView: FC<KeypadViewTypes> = () => {\n const dispatch = useDispatch<Dispatch>()\n const { keypadValue } = useSelector((state: RootState) => state.currentCall)\n const { isOpen } = useSelector((state: RootState) => state.island)\n const keypadValueRef = useRef<typeof keypadValue>(keypadValue)\n\n function sendKey(key: string) {\n dispatch.currentCall.updateKeypadValue(`${keypadValueRef.current}${key}`)\n keypadValueRef.current = `${keypadValueRef.current}${key}`\n playDtmfAudio(key)\n sendDTMF(key)\n }\n\n useEffect(() => {\n function handlePhysicalKeydown(event) {\n if (DTMF_KEYS.includes(event.key)) {\n sendKey(event.key)\n }\n }\n window.addEventListener('keydown', handlePhysicalKeydown)\n return () => window.removeEventListener('keydown', handlePhysicalKeydown)\n }, [])\n\n return (\n <>\n {isOpen ? (\n <div className='pi-flex pi-flex-col pi-gap-7'>\n <div className='pi-flex pi-gap-4'>\n <Button variant='transparent' onClick={backToCallView}>\n <FontAwesomeIcon size='xl' icon={faArrowLeft} />\n </Button>\n <input\n data-stop-propagation={true}\n type='text'\n readOnly\n value={keypadValue}\n autoFocus\n className='pi-w-full pi-rounded-full pi-bg-black pi-border-2 pi-border-emerald-500 active:pi-border-emerald-500 focus:pi-border-emerald-500 pi-text-white pi-font-sans pi-font-light pi-text-xl pi-text-center pi-px-2 focus:pi-outline-0'\n />\n </div>\n <Actions keyCallback={sendKey} />\n <div className='pi-flex pi-justify-center'>\n {/* The button to hangup the currentCall */}\n <Hangup />\n </div>\n </div>\n ) : (\n <div className='pi-font-medium pi-text-base'>Keypad</div>\n )}\n </>\n )\n}\n\nexport default KeypadView\n\nexport interface KeypadViewTypes {}\n"],"names":["DTMF_KEYS","dispatch","useDispatch","keypadValue","useSelector","state","currentCall","isOpen","island","keypadValueRef","useRef","sendKey","key","updateKeypadValue","concat","current","playDtmfAudio","sendDTMF","useEffect","handlePhysicalKeydown","event","includes","window","addEventListener","removeEventListener","React","createElement","Fragment","className","Button","variant","onClick","backToCallView","FontAwesomeIcon","size","icon","faArrowLeft","type","readOnly","value","autoFocus","Actions","keyCallback","Hangup"],"mappings":"gtBAeMA,EAAY,CAAC,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,qBAElC,WACtC,IAAMC,EAAWC,EAAAA,cACTC,EAAgBC,eAAY,SAACC,GAAqB,OAAAA,EAAMC,2BACxDC,EAAWH,eAAY,SAACC,GAAqB,OAAAA,EAAMG,iBACrDC,EAAiBC,SAA2BP,GAElD,SAASQ,EAAQC,GACfX,EAASK,YAAYO,kBAAkB,GAAAC,OAAGL,EAAeM,SAAOD,OAAGF,IACnEH,EAAeM,QAAU,GAAGD,OAAAL,EAAeM,SAAOD,OAAGF,GACrDI,EAAaA,cAACJ,GACdK,EAAQA,SAACL,EACV,CAYD,OAVAM,EAAAA,WAAU,WACR,SAASC,EAAsBC,GACzBpB,EAAUqB,SAASD,EAAMR,MAC3BD,EAAQS,EAAMR,IAEjB,CAED,OADAU,OAAOC,iBAAiB,UAAWJ,GAC5B,WAAM,OAAAG,OAAOE,oBAAoB,UAAWL,GACpD,GAAE,IAGDM,UACGC,cAAAD,EAAA,QAAAE,SAAA,KAAApB,EACCkB,EAAAA,QAAAC,cAAA,MAAA,CAAKE,UAAU,gCACbH,EAAAA,QAAKC,cAAA,MAAA,CAAAE,UAAU,oBACbH,EAAC,QAAAC,cAAAG,UAAOC,QAAQ,cAAcC,QAASC,kBACrCP,UAACC,cAAAO,EAAAA,gBAAgB,CAAAC,KAAK,KAAKC,KAAMC,EAAWA,eAE9CX,EAAA,QAAAC,cAAA,QAAA,CAAA,yBACyB,EACvBW,KAAK,OACLC,UACA,EAAAC,MAAOpC,EACPqC,WAAS,EACTZ,UAAU,
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/KeypadView/index.tsx"],"sourcesContent":["// Copyright (C) 2022 Nethesis S.r.l.\n// SPDX-License-Identifier: AGPL-3.0-or-later\n\nimport React, { type FC, useEffect, useRef } from 'react'\nimport { Button } from '../Button'\nimport { useDispatch, useSelector } from 'react-redux'\nimport { Dispatch, RootState } from '../../store'\nimport { faArrowLeft } from '@nethesis/nethesis-light-svg-icons'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport Actions from './Actions'\nimport { sendDTMF } from '../../lib/webrtc/messages'\nimport { backToCallView } from '../../lib/island/island'\nimport { playDtmfAudio } from '../../lib/phone/call'\nimport Hangup from '../Hangup'\n\nconst DTMF_KEYS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '#']\n\nconst KeypadView: FC<KeypadViewTypes> = () => {\n const dispatch = useDispatch<Dispatch>()\n const { keypadValue } = useSelector((state: RootState) => state.currentCall)\n const { isOpen } = useSelector((state: RootState) => state.island)\n const keypadValueRef = useRef<typeof keypadValue>(keypadValue)\n\n function sendKey(key: string) {\n dispatch.currentCall.updateKeypadValue(`${keypadValueRef.current}${key}`)\n keypadValueRef.current = `${keypadValueRef.current}${key}`\n playDtmfAudio(key)\n sendDTMF(key)\n }\n\n useEffect(() => {\n function handlePhysicalKeydown(event) {\n if (DTMF_KEYS.includes(event.key)) {\n sendKey(event.key)\n }\n }\n window.addEventListener('keydown', handlePhysicalKeydown)\n return () => window.removeEventListener('keydown', handlePhysicalKeydown)\n }, [])\n\n return (\n <>\n {isOpen ? (\n <div className='pi-flex pi-flex-col pi-gap-7'>\n <div className='pi-flex pi-gap-4'>\n <Button variant='transparent' onClick={backToCallView}>\n <FontAwesomeIcon size='xl' icon={faArrowLeft} />\n </Button>\n <input\n data-stop-propagation={true}\n type='text'\n readOnly\n value={keypadValue}\n autoFocus\n className='pi-w-full pi-rounded-full pi-bg-black pi-border-2 pi-border-emerald-500 active:pi-border-emerald-500 focus:pi-border-emerald-500 pi-text-white pi-font-sans pi-font-light pi-text-xl pi-text-center pi-px-2 focus:pi-outline-0 focus:pi-ring-0'\n />\n </div>\n <Actions keyCallback={sendKey} />\n <div className='pi-flex pi-justify-center'>\n {/* The button to hangup the currentCall */}\n <Hangup />\n </div>\n </div>\n ) : (\n <div className='pi-font-medium pi-text-base'>Keypad</div>\n )}\n </>\n )\n}\n\nexport default KeypadView\n\nexport interface KeypadViewTypes {}\n"],"names":["DTMF_KEYS","dispatch","useDispatch","keypadValue","useSelector","state","currentCall","isOpen","island","keypadValueRef","useRef","sendKey","key","updateKeypadValue","concat","current","playDtmfAudio","sendDTMF","useEffect","handlePhysicalKeydown","event","includes","window","addEventListener","removeEventListener","React","createElement","Fragment","className","Button","variant","onClick","backToCallView","FontAwesomeIcon","size","icon","faArrowLeft","type","readOnly","value","autoFocus","Actions","keyCallback","Hangup"],"mappings":"gtBAeMA,EAAY,CAAC,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,qBAElC,WACtC,IAAMC,EAAWC,EAAAA,cACTC,EAAgBC,eAAY,SAACC,GAAqB,OAAAA,EAAMC,2BACxDC,EAAWH,eAAY,SAACC,GAAqB,OAAAA,EAAMG,iBACrDC,EAAiBC,SAA2BP,GAElD,SAASQ,EAAQC,GACfX,EAASK,YAAYO,kBAAkB,GAAAC,OAAGL,EAAeM,SAAOD,OAAGF,IACnEH,EAAeM,QAAU,GAAGD,OAAAL,EAAeM,SAAOD,OAAGF,GACrDI,EAAaA,cAACJ,GACdK,EAAQA,SAACL,EACV,CAYD,OAVAM,EAAAA,WAAU,WACR,SAASC,EAAsBC,GACzBpB,EAAUqB,SAASD,EAAMR,MAC3BD,EAAQS,EAAMR,IAEjB,CAED,OADAU,OAAOC,iBAAiB,UAAWJ,GAC5B,WAAM,OAAAG,OAAOE,oBAAoB,UAAWL,GACpD,GAAE,IAGDM,UACGC,cAAAD,EAAA,QAAAE,SAAA,KAAApB,EACCkB,EAAAA,QAAAC,cAAA,MAAA,CAAKE,UAAU,gCACbH,EAAAA,QAAKC,cAAA,MAAA,CAAAE,UAAU,oBACbH,EAAC,QAAAC,cAAAG,UAAOC,QAAQ,cAAcC,QAASC,kBACrCP,UAACC,cAAAO,EAAAA,gBAAgB,CAAAC,KAAK,KAAKC,KAAMC,EAAWA,eAE9CX,EAAA,QAAAC,cAAA,QAAA,CAAA,yBACyB,EACvBW,KAAK,OACLC,UACA,EAAAC,MAAOpC,EACPqC,WAAS,EACTZ,UAAU,oPAGdH,EAAAA,QAAAC,cAACe,EAAAA,QAAO,CAACC,YAAa/B,IACtBc,EAAAA,QAAKC,cAAA,MAAA,CAAAE,UAAU,6BAEbH,EAAAA,QAAAC,cAACiB,EAAAA,QAAS,QAIdlB,EAAA,QAAAC,cAAA,MAAA,CAAKE,UAAU,yCAIvB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/tslib/tslib.es6.js"),t=require("react"),n=require("../Button.js");require("../../node_modules/react-redux/es/index.js");var r=require("../../node_modules/@fortawesome/react-fontawesome/index.es.js"),i=require("../../lib/island/island.js"),a=require("./ListAvatar.js"),l=require("../../node_modules/@nethesis/nethesis-light-svg-icons/index.mjs.js"),s=require("../../lib/phone/call.js"),u=require("../../utils/genericFunctions/timestamp.js"),o=require("../Hangup.js"),c=require("../../node_modules/react-redux/es/hooks/useSelector.js"),f=require("../../node_modules/react-redux/es/hooks/useDispatch.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=d(t);exports.TransferListView=function(){var d=c.useSelector((function(e){return e.island})).isOpen,m=c.useSelector((function(e){return e.users})).endpoints,v=c.useSelector((function(e){return e.currentUser})).username,x=t.useState(!1),w=x[0],h=x[1],E=t.useState([]),b=E[0],g=E[1],N=t.useRef(""),j=t.useState(),_=j[0],C=j[1],y=t.useRef(null),T=t.useState(!1),L=T[0],q=T[1],S=t.useState(10),k=S[0],A=S[1],F=t.useState(""),I=F[0],z=F[1],B=f.useDispatch(),W=c.useSelector((function(e){return e.currentCall})),P=W.displayName,V=W.number,D=W.startTime;function H(e){return v&&delete e[v],Object.values(e).filter((function(e){return e.endpoints.extension.find((function(e){return e.id.toLowerCase().startsWith(N.current.toLowerCase())}))||e.username.toLowerCase().startsWith(N.current.toLowerCase())||e.name.toLowerCase().startsWith(N.current.toLowerCase())}))}return t.useEffect((function(){m&&v&&(g(H(m)),h(!0))}),[m,v]),t.useEffect((function(){var e,t,n=function(){var e,t,n;q(!!(y.current&&y.current.scrollTop>3)),y.current&&(null===(e=y.current)||void 0===e?void 0:e.offsetHeight)+(null===(t=y.current)||void 0===t?void 0:t.scrollTop)>=(null===(n=y.current)||void 0===n?void 0:n.scrollHeight)-10&&A((function(e){return e+10}))};return d?null===(e=y.current)||void 0===e||e.addEventListener("scroll",n):null===(t=y.current)||void 0===t||t.removeEventListener("scroll",n),function(){var e;return null===(e=y.current)||void 0===e?void 0:e.removeEventListener("scroll",n)}}),[d]),t.useEffect((function(){z("")}),[N.current]),p.default.createElement(p.default.Fragment,null,d?p.default.createElement("div",{className:"pi-relative pi-flex pi-flex-col pi-gap-7"},p.default.createElement("div",{className:"pi-flex pi-gap-4"},p.default.createElement(n.Button,{variant:"transparent",onClick:i.backToCallView},p.default.createElement(r.FontAwesomeIcon,{size:"xl",icon:l.faArrowLeft})),p.default.createElement("input",{"data-stop-propagation":!0,type:"text",onChange:function(e){N.current=e.currentTarget.value,m&&g(H(m)),/^[0-9*#+]+$/.test(N.current)?C(!0):C(!1)},value:N.current,autoFocus:!0,className:"pi-w-full pi-rounded-full pi-bg-black pi-border-2 pi-border-emerald-500 active:pi-border-emerald-500 focus:pi-border-emerald-500 pi-text-white pi-font-sans pi-font-light pi-text-xl pi-text-center pi-px-2 focus:pi-outline-0"})),p.default.createElement("div",{style:{height:"272px"},ref:y,className:"pi-relative pi-w-full pi-flex pi-flex-col pi-gap-2 pi-overflow-y-auto pi-overflow-x-hidden"},L&&p.default.createElement("div",{style:{right:"35px",left:"35px"},className:"pi-fixed pi-z-10 pi-h-6 pi-bg-gradient-to-b pi-from-black pi-to-transparent pi-pointer-events-none"}),_&&0===b.length&&p.default.createElement("div",{className:"pi-flex pi-items-center pi-w-full pi-justify-between pi-px-3 pi-py-1"},p.default.createElement("div",{className:"pi-flex pi-items-center pi-gap-4"},p.default.createElement(a.default,null),p.default.createElement("div",{style:{maxWidth:"146px"},className:"pi-h-fit pi-max-w-40 pi-font-sans pi-truncate pi-text-sm pi-font-bold"},N.current)),p.default.createElement("div",{className:"pi-flex pi-gap-3.5"},p.default.createElement(n.Button,{variant:"default"},p.default.createElement(r.FontAwesomeIcon,{size:"xl",icon:l.faArrowUpToLine})),p.default.createElement(n.Button,{onClick:function(){return s.blindTransfer(N.current)},variant:"default"},p.default.createElement(r.FontAwesomeIcon,{size:"xl",icon:l.faPhone})))),b&&b.slice(0,k).map((function(t,i){return p.default.createElement("div",{key:i,className:"pi-flex pi-items-center pi-w-full pi-justify-between pi-px-3 pi-py-1"},p.default.createElement("div",{className:"pi-flex pi-items-center pi-gap-4"},p.default.createElement(a.default,{username:t.username,status:t.mainPresence}),p.default.createElement("div",{style:{maxWidth:"146px"},className:"pi-h-fit pi-max-w-40 pi-font-sans pi-truncate pi-text-sm pi-font-bold"},t.name)),p.default.createElement("div",{className:"pi-flex pi-gap-3.5"},p.default.createElement(n.Button,{active:t.username===I,onClick:function(){return z(t.username)},variant:"default"},p.default.createElement(r.FontAwesomeIcon,{size:"xl",icon:l.faArrowUpToLine})),p.default.createElement(n.Button,{onClick:function(){return function(t){return e.__awaiter(this,void 0,void 0,(function(){return e.__generator(this,(function(e){switch(e.label){case 0:return[4,s.attendedTransfer(t.endpoints.mainextension[0].id)];case 1:return e.sent()&&(B.island.setIslandView("call"),B.currentCall.updateCurrentCall({username:t.username,displayName:t.name,number:t.endpoints.mainextension[0].id,startTime:"".concat(u.getTimestampInSeconds()),transferring:!0,transferringName:P,transferringNumber:V,transferringStartTime:D})),[2]}}))}))}(t)},variant:"default"},p.default.createElement(r.FontAwesomeIcon,{size:"xl",icon:l.faPhone}))))})),w&&0===b.length&&!_&&p.default.createElement("p",{className:"pi-font-sans pi-font-bold pi-w-full pi-flex pi-justify-center pi-text-sm"},"No users found.")),p.default.createElement(o.default,{isDestination:""!==I,clickCallback:function(){return e.__awaiter(this,void 0,void 0,(function(){return e.__generator(this,(function(e){switch(e.label){case 0:return I?[4,s.blindTransfer(m&&m[I].endpoints.mainextension[0].id||"")]:[3,2];case 1:!0===e.sent()&&(B.alerts.setAlert("call_transfered"),B.island.setIslandView("call"),setTimeout((function(){B.alerts.removeAlert("call_transfered")}),4e3)),e.label=2;case 2:return[2]}}))}))}})):p.default.createElement("div",{className:"pi-font-medium pi-text-base pi-font-sans"},"Transfer"))};
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/tslib/tslib.es6.js"),t=require("react"),n=require("../Button.js");require("../../node_modules/react-redux/es/index.js");var r=require("../../node_modules/@fortawesome/react-fontawesome/index.es.js"),i=require("../../lib/island/island.js"),a=require("./ListAvatar.js"),l=require("../../node_modules/@nethesis/nethesis-light-svg-icons/index.mjs.js"),s=require("../../lib/phone/call.js"),u=require("../../utils/genericFunctions/timestamp.js"),o=require("../Hangup.js"),c=require("../../node_modules/react-redux/es/hooks/useSelector.js"),f=require("../../node_modules/react-redux/es/hooks/useDispatch.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=d(t);exports.TransferListView=function(){var d=c.useSelector((function(e){return e.island})).isOpen,m=c.useSelector((function(e){return e.users})).endpoints,v=c.useSelector((function(e){return e.currentUser})).username,x=t.useState(!1),w=x[0],h=x[1],E=t.useState([]),b=E[0],g=E[1],N=t.useRef(""),j=t.useState(),_=j[0],C=j[1],y=t.useRef(null),T=t.useState(!1),L=T[0],q=T[1],S=t.useState(10),k=S[0],A=S[1],F=t.useState(""),I=F[0],z=F[1],B=f.useDispatch(),W=c.useSelector((function(e){return e.currentCall})),P=W.displayName,V=W.number,D=W.startTime;function H(e){return v&&delete e[v],Object.values(e).filter((function(e){return e.endpoints.extension.find((function(e){return e.id.toLowerCase().startsWith(N.current.toLowerCase())}))||e.username.toLowerCase().startsWith(N.current.toLowerCase())||e.name.toLowerCase().startsWith(N.current.toLowerCase())}))}return t.useEffect((function(){m&&v&&(g(H(m)),h(!0))}),[m,v]),t.useEffect((function(){var e,t,n=function(){var e,t,n;q(!!(y.current&&y.current.scrollTop>3)),y.current&&(null===(e=y.current)||void 0===e?void 0:e.offsetHeight)+(null===(t=y.current)||void 0===t?void 0:t.scrollTop)>=(null===(n=y.current)||void 0===n?void 0:n.scrollHeight)-10&&A((function(e){return e+10}))};return d?null===(e=y.current)||void 0===e||e.addEventListener("scroll",n):null===(t=y.current)||void 0===t||t.removeEventListener("scroll",n),function(){var e;return null===(e=y.current)||void 0===e?void 0:e.removeEventListener("scroll",n)}}),[d]),t.useEffect((function(){z("")}),[N.current]),p.default.createElement(p.default.Fragment,null,d?p.default.createElement("div",{className:"pi-relative pi-flex pi-flex-col pi-gap-7"},p.default.createElement("div",{className:"pi-flex pi-gap-4"},p.default.createElement(n.Button,{variant:"transparent",onClick:i.backToCallView},p.default.createElement(r.FontAwesomeIcon,{size:"xl",icon:l.faArrowLeft})),p.default.createElement("input",{"data-stop-propagation":!0,type:"text",onChange:function(e){N.current=e.currentTarget.value,m&&g(H(m)),/^[0-9*#+]+$/.test(N.current)?C(!0):C(!1)},value:N.current,autoFocus:!0,className:"pi-w-full pi-rounded-full pi-bg-black pi-border-2 pi-border-emerald-500 active:pi-border-emerald-500 focus:pi-border-emerald-500 pi-text-white pi-font-sans pi-font-light pi-text-xl pi-text-center pi-px-2 focus:pi-outline-0 focus:pi-ring-0"})),p.default.createElement("div",{style:{height:"272px"},ref:y,className:"pi-relative pi-w-full pi-flex pi-flex-col pi-gap-2 pi-overflow-y-auto pi-overflow-x-hidden pi-custom-scrollbar"},L&&p.default.createElement("div",{style:{right:"35px",left:"35px"},className:"pi-fixed pi-z-10 pi-h-6 pi-bg-gradient-to-b pi-from-black pi-to-transparent pi-pointer-events-none"}),_&&0===b.length&&p.default.createElement("div",{className:"pi-flex pi-items-center pi-w-full pi-justify-between pi-px-3 pi-py-1"},p.default.createElement("div",{className:"pi-flex pi-items-center pi-gap-4"},p.default.createElement(a.default,null),p.default.createElement("div",{style:{maxWidth:"146px"},className:"pi-h-fit pi-max-w-40 pi-font-sans pi-truncate pi-text-sm pi-font-bold"},N.current)),p.default.createElement("div",{className:"pi-flex pi-gap-3.5"},p.default.createElement(n.Button,{variant:"default"},p.default.createElement(r.FontAwesomeIcon,{size:"xl",icon:l.faArrowUpToLine})),p.default.createElement(n.Button,{onClick:function(){return s.blindTransfer(N.current)},variant:"default"},p.default.createElement(r.FontAwesomeIcon,{size:"xl",icon:l.faPhone})))),b&&b.slice(0,k).map((function(t,i){return p.default.createElement("div",{key:i,className:"pi-flex pi-items-center pi-w-full pi-justify-between pi-px-3 pi-py-1"},p.default.createElement("div",{className:"pi-flex pi-items-center pi-gap-4"},p.default.createElement(a.default,{username:t.username,status:t.mainPresence}),p.default.createElement("div",{style:{maxWidth:"146px"},className:"pi-h-fit pi-max-w-40 pi-font-sans pi-truncate pi-text-sm pi-font-bold"},t.name)),p.default.createElement("div",{className:"pi-flex pi-gap-3.5"},p.default.createElement(n.Button,{active:t.username===I,onClick:function(){return z(t.username)},variant:"default"},p.default.createElement(r.FontAwesomeIcon,{size:"xl",icon:l.faArrowUpToLine})),p.default.createElement(n.Button,{onClick:function(){return function(t){return e.__awaiter(this,void 0,void 0,(function(){return e.__generator(this,(function(e){switch(e.label){case 0:return[4,s.attendedTransfer(t.endpoints.mainextension[0].id)];case 1:return e.sent()&&(B.island.setIslandView("call"),B.currentCall.updateCurrentCall({username:t.username,displayName:t.name,number:t.endpoints.mainextension[0].id,startTime:"".concat(u.getTimestampInSeconds()),transferring:!0,transferringName:P,transferringNumber:V,transferringStartTime:D})),[2]}}))}))}(t)},variant:"default"},p.default.createElement(r.FontAwesomeIcon,{size:"xl",icon:l.faPhone}))))})),w&&0===b.length&&!_&&p.default.createElement("p",{className:"pi-font-sans pi-font-bold pi-w-full pi-flex pi-justify-center pi-text-sm"},"No users found.")),p.default.createElement(o.default,{isDestination:""!==I,clickCallback:function(){return e.__awaiter(this,void 0,void 0,(function(){return e.__generator(this,(function(e){switch(e.label){case 0:return I?[4,s.blindTransfer(m&&m[I].endpoints.mainextension[0].id||"")]:[3,2];case 1:!0===e.sent()&&(B.alerts.setAlert("call_transfered"),B.island.setIslandView("call"),setTimeout((function(){B.alerts.removeAlert("call_transfered")}),4e3)),e.label=2;case 2:return[2]}}))}))}})):p.default.createElement("div",{className:"pi-font-medium pi-text-base pi-font-sans"},"Transfer"))};
|
|
2
2
|
//# sourceMappingURL=TransferList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TransferList.js","sources":["../../../src/components/TransferView/TransferList.tsx"],"sourcesContent":["// Copyright (C) 2022 Nethesis S.r.l.\n// SPDX-License-Identifier: AGPL-3.0-or-later\n\nimport React, { type FC, useEffect, useState, FormEvent, useRef } from 'react'\nimport { Button } from '../Button'\nimport { RootState } from '../../store'\nimport { useDispatch, useSelector } from 'react-redux'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { backToCallView } from '../../lib/island/island'\nimport ListAvatar from './ListAvatar'\nimport {\n faArrowUpToLine,\n faPhone as faPhoneLight,\n faArrowLeft,\n} from '@nethesis/nethesis-light-svg-icons'\nimport { UserEndpointsTypes, UsersEndpointsTypes } from '../../types'\nimport { blindTransfer, attendedTransfer } from '../../lib/phone/call'\nimport { Dispatch } from '../../store'\nimport { getTimestampInSeconds } from '../../utils/genericFunctions/timestamp'\nimport Hangup from '../Hangup'\n\nconst USERS_NUMBER_PER_PAGE = 10\nconst SHOW_LIST_GRADIENT_DISTANCE = 3\n\nexport const TransferListView: FC<TransferListViewProps> = () => {\n const { isOpen } = useSelector((state: RootState) => state.island)\n const { endpoints } = useSelector((state: RootState) => state.users)\n const { username } = useSelector((state: RootState) => state.currentUser)\n const [loaded, setLoaded] = useState<boolean>(false)\n const [listUsers, setListUsers] = useState<UserEndpointsTypes[]>([])\n const searchValue = useRef<string>('')\n const [showCustomUser, setShowCustomUser] = useState<boolean>()\n const relativeRef = useRef<HTMLDivElement>(null)\n const [showGradient, setShowGradient] = useState<boolean>(false)\n const [showingUsers, setShowingUsers] = useState<number>(USERS_NUMBER_PER_PAGE)\n const [transferDestination, setTransferDestination] = useState<string>('')\n const dispatch = useDispatch<Dispatch>()\n const { displayName, number, startTime } = useSelector((state: RootState) => state.currentCall)\n\n function handleChange(event: FormEvent<HTMLInputElement>) {\n // Update search value\n searchValue.current = event.currentTarget.value\n // Filter the users list\n endpoints && setListUsers(filterUsers(endpoints))\n // Check if custom user to call must be visible\n if (/^[0-9*#+]+$/.test(searchValue.current)) {\n setShowCustomUser(true)\n } else {\n setShowCustomUser(false)\n }\n }\n\n function filterUsers(endpoints: UsersEndpointsTypes) {\n // Remove the currentUser from the list\n username && delete endpoints[username]\n // Filter the users\n return Object.values(endpoints).filter(\n (userEndpoints: UserEndpointsTypes) =>\n userEndpoints.endpoints.extension.find((extension) =>\n extension.id.toLowerCase().startsWith(searchValue.current.toLowerCase()),\n ) ||\n userEndpoints.username.toLowerCase().startsWith(searchValue.current.toLowerCase()) ||\n userEndpoints.name.toLowerCase().startsWith(searchValue.current.toLowerCase()),\n )\n }\n\n async function handleHangupAndTransfer() {\n // Manage blind transfer and hangup\n if (transferDestination) {\n const transfered = await blindTransfer(\n (endpoints && endpoints[transferDestination].endpoints.mainextension[0].id) || '',\n )\n if (transfered === true) {\n dispatch.alerts.setAlert('call_transfered')\n dispatch.island.setIslandView('call')\n setTimeout(() => {\n dispatch.alerts.removeAlert('call_transfered')\n }, 4000)\n }\n }\n }\n\n async function handleAttendedTransfer(userEndpoints: UserEndpointsTypes) {\n const transferring = await attendedTransfer(userEndpoints.endpoints.mainextension[0].id)\n if (transferring) {\n dispatch.island.setIslandView('call')\n // Force current call to achieve the expected behavior\n dispatch.currentCall.updateCurrentCall({\n username: userEndpoints.username,\n displayName: userEndpoints.name,\n number: userEndpoints.endpoints.mainextension[0].id,\n startTime: `${getTimestampInSeconds()}`,\n transferring: true,\n transferringName: displayName,\n transferringNumber: number,\n transferringStartTime: startTime,\n })\n }\n }\n\n // Initialize users list\n useEffect(() => {\n if (endpoints && username) {\n setListUsers(filterUsers(endpoints))\n setLoaded(true)\n }\n }, [endpoints, username])\n\n useEffect(() => {\n // Handle users list scrolling\n const handleScroll = () => {\n setShowGradient(\n relativeRef.current && relativeRef.current.scrollTop > SHOW_LIST_GRADIENT_DISTANCE\n ? true\n : false,\n )\n // Manage scroll to bottom\n if (\n relativeRef.current &&\n relativeRef.current?.offsetHeight + relativeRef.current?.scrollTop >=\n relativeRef.current?.scrollHeight - 10\n ) {\n // Improve showing users\n setShowingUsers((state) => state + USERS_NUMBER_PER_PAGE)\n }\n }\n // Manage expansion and collapsing\n if (isOpen) {\n relativeRef.current?.addEventListener('scroll', handleScroll)\n } else {\n relativeRef.current?.removeEventListener('scroll', handleScroll)\n }\n return () => relativeRef.current?.removeEventListener('scroll', handleScroll)\n }, [isOpen])\n\n // Reset transfer destination value when search value changes\n useEffect(() => {\n setTransferDestination('')\n }, [searchValue.current])\n\n return (\n <>\n {isOpen ? (\n <div className='pi-relative pi-flex pi-flex-col pi-gap-7'>\n <div className='pi-flex pi-gap-4'>\n <Button variant='transparent' onClick={backToCallView}>\n <FontAwesomeIcon size='xl' icon={faArrowLeft} />\n </Button>\n <input\n data-stop-propagation={true}\n type='text'\n onChange={handleChange}\n value={searchValue.current}\n autoFocus\n className='pi-w-full pi-rounded-full pi-bg-black pi-border-2 pi-border-emerald-500 active:pi-border-emerald-500 focus:pi-border-emerald-500 pi-text-white pi-font-sans pi-font-light pi-text-xl pi-text-center pi-px-2 focus:pi-outline-0'\n />\n </div>\n <div\n style={{ height: '272px' }}\n ref={relativeRef}\n className='pi-relative pi-w-full pi-flex pi-flex-col pi-gap-2 pi-overflow-y-auto pi-overflow-x-hidden'\n >\n {showGradient && (\n <div\n style={{ right: '35px', left: '35px' }}\n className='pi-fixed pi-z-10 pi-h-6 pi-bg-gradient-to-b pi-from-black pi-to-transparent pi-pointer-events-none'\n ></div>\n )}\n {/* The custom user */}\n {showCustomUser && listUsers.length === 0 && (\n <div className='pi-flex pi-items-center pi-w-full pi-justify-between pi-px-3 pi-py-1'>\n <div className='pi-flex pi-items-center pi-gap-4'>\n <ListAvatar />\n <div\n style={{ maxWidth: '146px' }}\n className='pi-h-fit pi-max-w-40 pi-font-sans pi-truncate pi-text-sm pi-font-bold'\n >\n {searchValue.current}\n </div>\n </div>\n <div className='pi-flex pi-gap-3.5'>\n <Button variant='default'>\n <FontAwesomeIcon size='xl' icon={faArrowUpToLine} />\n </Button>\n <Button onClick={() => blindTransfer(searchValue.current)} variant='default'>\n <FontAwesomeIcon size='xl' icon={faPhoneLight} />\n </Button>\n </div>\n </div>\n )}\n {/* The users list */}\n {listUsers &&\n listUsers.slice(0, showingUsers).map((userEndpoints, i) => (\n <div\n key={i}\n className='pi-flex pi-items-center pi-w-full pi-justify-between pi-px-3 pi-py-1'\n >\n <div className='pi-flex pi-items-center pi-gap-4'>\n <ListAvatar\n username={userEndpoints.username}\n status={userEndpoints.mainPresence}\n />\n <div\n style={{ maxWidth: '146px' }}\n className='pi-h-fit pi-max-w-40 pi-font-sans pi-truncate pi-text-sm pi-font-bold'\n >\n {userEndpoints.name}\n </div>\n </div>\n <div className='pi-flex pi-gap-3.5'>\n <Button\n active={userEndpoints.username === transferDestination}\n onClick={() => setTransferDestination(userEndpoints.username)}\n variant='default'\n >\n <FontAwesomeIcon size='xl' icon={faArrowUpToLine} />\n </Button>\n <Button onClick={() => handleAttendedTransfer(userEndpoints)} variant='default'>\n <FontAwesomeIcon size='xl' icon={faPhoneLight} />\n </Button>\n </div>\n </div>\n ))}\n {loaded && listUsers.length === 0 && !showCustomUser && (\n <p className='pi-font-sans pi-font-bold pi-w-full pi-flex pi-justify-center pi-text-sm'>\n No users found.\n </p>\n )}\n </div>\n <Hangup\n isDestination={transferDestination !== ''}\n clickCallback={handleHangupAndTransfer}\n />\n </div>\n ) : (\n <div className='pi-font-medium pi-text-base pi-font-sans'>Transfer</div>\n )}\n </>\n )\n}\n\ninterface TransferListViewProps {}\n"],"names":["isOpen","useSelector","state","island","endpoints","users","username","currentUser","_a","useState","loaded","setLoaded","_b","listUsers","setListUsers","searchValue","useRef","_c","showCustomUser","setShowCustomUser","relativeRef","_d","showGradient","setShowGradient","_e","showingUsers","setShowingUsers","_f","transferDestination","setTransferDestination","dispatch","useDispatch","_g","currentCall","displayName","number","startTime","filterUsers","Object","values","filter","userEndpoints","extension","find","id","toLowerCase","startsWith","current","name","useEffect","handleScroll","scrollTop","offsetHeight","scrollHeight","addEventListener","removeEventListener","React","createElement","Fragment","className","Button","variant","onClick","backToCallView","FontAwesomeIcon","size","icon","faArrowLeft","type","onChange","event","currentTarget","value","test","autoFocus","style","height","ref","right","left","length","ListAvatar","maxWidth","faArrowUpToLine","blindTransfer","faPhoneLight","faPhone","slice","map","i","key","status","mainPresence","active","attendedTransfer","mainextension","sent","setIslandView","updateCurrentCall","concat","getTimestampInSeconds","transferring","transferringName","transferringNumber","transferringStartTime","handleAttendedTransfer","Hangup","isDestination","clickCallback","alerts","setAlert","setTimeout","removeAlert"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TransferList.js","sources":["../../../src/components/TransferView/TransferList.tsx"],"sourcesContent":["// Copyright (C) 2022 Nethesis S.r.l.\n// SPDX-License-Identifier: AGPL-3.0-or-later\n\nimport React, { type FC, useEffect, useState, FormEvent, useRef } from 'react'\nimport { Button } from '../Button'\nimport { RootState } from '../../store'\nimport { useDispatch, useSelector } from 'react-redux'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { backToCallView } from '../../lib/island/island'\nimport ListAvatar from './ListAvatar'\nimport {\n faArrowUpToLine,\n faPhone as faPhoneLight,\n faArrowLeft,\n} from '@nethesis/nethesis-light-svg-icons'\nimport { UserEndpointsTypes, UsersEndpointsTypes } from '../../types'\nimport { blindTransfer, attendedTransfer } from '../../lib/phone/call'\nimport { Dispatch } from '../../store'\nimport { getTimestampInSeconds } from '../../utils/genericFunctions/timestamp'\nimport Hangup from '../Hangup'\n\nconst USERS_NUMBER_PER_PAGE = 10\nconst SHOW_LIST_GRADIENT_DISTANCE = 3\n\nexport const TransferListView: FC<TransferListViewProps> = () => {\n const { isOpen } = useSelector((state: RootState) => state.island)\n const { endpoints } = useSelector((state: RootState) => state.users)\n const { username } = useSelector((state: RootState) => state.currentUser)\n const [loaded, setLoaded] = useState<boolean>(false)\n const [listUsers, setListUsers] = useState<UserEndpointsTypes[]>([])\n const searchValue = useRef<string>('')\n const [showCustomUser, setShowCustomUser] = useState<boolean>()\n const relativeRef = useRef<HTMLDivElement>(null)\n const [showGradient, setShowGradient] = useState<boolean>(false)\n const [showingUsers, setShowingUsers] = useState<number>(USERS_NUMBER_PER_PAGE)\n const [transferDestination, setTransferDestination] = useState<string>('')\n const dispatch = useDispatch<Dispatch>()\n const { displayName, number, startTime } = useSelector((state: RootState) => state.currentCall)\n\n function handleChange(event: FormEvent<HTMLInputElement>) {\n // Update search value\n searchValue.current = event.currentTarget.value\n // Filter the users list\n endpoints && setListUsers(filterUsers(endpoints))\n // Check if custom user to call must be visible\n if (/^[0-9*#+]+$/.test(searchValue.current)) {\n setShowCustomUser(true)\n } else {\n setShowCustomUser(false)\n }\n }\n\n function filterUsers(endpoints: UsersEndpointsTypes) {\n // Remove the currentUser from the list\n username && delete endpoints[username]\n // Filter the users\n return Object.values(endpoints).filter(\n (userEndpoints: UserEndpointsTypes) =>\n userEndpoints.endpoints.extension.find((extension) =>\n extension.id.toLowerCase().startsWith(searchValue.current.toLowerCase()),\n ) ||\n userEndpoints.username.toLowerCase().startsWith(searchValue.current.toLowerCase()) ||\n userEndpoints.name.toLowerCase().startsWith(searchValue.current.toLowerCase()),\n )\n }\n\n async function handleHangupAndTransfer() {\n // Manage blind transfer and hangup\n if (transferDestination) {\n const transfered = await blindTransfer(\n (endpoints && endpoints[transferDestination].endpoints.mainextension[0].id) || '',\n )\n if (transfered === true) {\n dispatch.alerts.setAlert('call_transfered')\n dispatch.island.setIslandView('call')\n setTimeout(() => {\n dispatch.alerts.removeAlert('call_transfered')\n }, 4000)\n }\n }\n }\n\n async function handleAttendedTransfer(userEndpoints: UserEndpointsTypes) {\n const transferring = await attendedTransfer(userEndpoints.endpoints.mainextension[0].id)\n if (transferring) {\n dispatch.island.setIslandView('call')\n // Force current call to achieve the expected behavior\n dispatch.currentCall.updateCurrentCall({\n username: userEndpoints.username,\n displayName: userEndpoints.name,\n number: userEndpoints.endpoints.mainextension[0].id,\n startTime: `${getTimestampInSeconds()}`,\n transferring: true,\n transferringName: displayName,\n transferringNumber: number,\n transferringStartTime: startTime,\n })\n }\n }\n\n // Initialize users list\n useEffect(() => {\n if (endpoints && username) {\n setListUsers(filterUsers(endpoints))\n setLoaded(true)\n }\n }, [endpoints, username])\n\n useEffect(() => {\n // Handle users list scrolling\n const handleScroll = () => {\n setShowGradient(\n relativeRef.current && relativeRef.current.scrollTop > SHOW_LIST_GRADIENT_DISTANCE\n ? true\n : false,\n )\n // Manage scroll to bottom\n if (\n relativeRef.current &&\n relativeRef.current?.offsetHeight + relativeRef.current?.scrollTop >=\n relativeRef.current?.scrollHeight - 10\n ) {\n // Improve showing users\n setShowingUsers((state) => state + USERS_NUMBER_PER_PAGE)\n }\n }\n // Manage expansion and collapsing\n if (isOpen) {\n relativeRef.current?.addEventListener('scroll', handleScroll)\n } else {\n relativeRef.current?.removeEventListener('scroll', handleScroll)\n }\n return () => relativeRef.current?.removeEventListener('scroll', handleScroll)\n }, [isOpen])\n\n // Reset transfer destination value when search value changes\n useEffect(() => {\n setTransferDestination('')\n }, [searchValue.current])\n\n return (\n <>\n {isOpen ? (\n <div className='pi-relative pi-flex pi-flex-col pi-gap-7'>\n <div className='pi-flex pi-gap-4'>\n <Button variant='transparent' onClick={backToCallView}>\n <FontAwesomeIcon size='xl' icon={faArrowLeft} />\n </Button>\n <input\n data-stop-propagation={true}\n type='text'\n onChange={handleChange}\n value={searchValue.current}\n autoFocus\n className='pi-w-full pi-rounded-full pi-bg-black pi-border-2 pi-border-emerald-500 active:pi-border-emerald-500 focus:pi-border-emerald-500 pi-text-white pi-font-sans pi-font-light pi-text-xl pi-text-center pi-px-2 focus:pi-outline-0 focus:pi-ring-0'\n />\n </div>\n <div\n style={{ height: '272px' }}\n ref={relativeRef}\n className='pi-relative pi-w-full pi-flex pi-flex-col pi-gap-2 pi-overflow-y-auto pi-overflow-x-hidden pi-custom-scrollbar'\n >\n {showGradient && (\n <div\n style={{ right: '35px', left: '35px' }}\n className='pi-fixed pi-z-10 pi-h-6 pi-bg-gradient-to-b pi-from-black pi-to-transparent pi-pointer-events-none'\n ></div>\n )}\n {/* The custom user */}\n {showCustomUser && listUsers.length === 0 && (\n <div className='pi-flex pi-items-center pi-w-full pi-justify-between pi-px-3 pi-py-1'>\n <div className='pi-flex pi-items-center pi-gap-4'>\n <ListAvatar />\n <div\n style={{ maxWidth: '146px' }}\n className='pi-h-fit pi-max-w-40 pi-font-sans pi-truncate pi-text-sm pi-font-bold'\n >\n {searchValue.current}\n </div>\n </div>\n <div className='pi-flex pi-gap-3.5'>\n <Button variant='default'>\n <FontAwesomeIcon size='xl' icon={faArrowUpToLine} />\n </Button>\n <Button onClick={() => blindTransfer(searchValue.current)} variant='default'>\n <FontAwesomeIcon size='xl' icon={faPhoneLight} />\n </Button>\n </div>\n </div>\n )}\n {/* The users list */}\n {listUsers &&\n listUsers.slice(0, showingUsers).map((userEndpoints, i) => (\n <div\n key={i}\n className='pi-flex pi-items-center pi-w-full pi-justify-between pi-px-3 pi-py-1'\n >\n <div className='pi-flex pi-items-center pi-gap-4'>\n <ListAvatar\n username={userEndpoints.username}\n status={userEndpoints.mainPresence}\n />\n <div\n style={{ maxWidth: '146px' }}\n className='pi-h-fit pi-max-w-40 pi-font-sans pi-truncate pi-text-sm pi-font-bold'\n >\n {userEndpoints.name}\n </div>\n </div>\n <div className='pi-flex pi-gap-3.5'>\n <Button\n active={userEndpoints.username === transferDestination}\n onClick={() => setTransferDestination(userEndpoints.username)}\n variant='default'\n >\n <FontAwesomeIcon size='xl' icon={faArrowUpToLine} />\n </Button>\n <Button onClick={() => handleAttendedTransfer(userEndpoints)} variant='default'>\n <FontAwesomeIcon size='xl' icon={faPhoneLight} />\n </Button>\n </div>\n </div>\n ))}\n {loaded && listUsers.length === 0 && !showCustomUser && (\n <p className='pi-font-sans pi-font-bold pi-w-full pi-flex pi-justify-center pi-text-sm'>\n No users found.\n </p>\n )}\n </div>\n <Hangup\n isDestination={transferDestination !== ''}\n clickCallback={handleHangupAndTransfer}\n />\n </div>\n ) : (\n <div className='pi-font-medium pi-text-base pi-font-sans'>Transfer</div>\n )}\n </>\n )\n}\n\ninterface TransferListViewProps {}\n"],"names":["isOpen","useSelector","state","island","endpoints","users","username","currentUser","_a","useState","loaded","setLoaded","_b","listUsers","setListUsers","searchValue","useRef","_c","showCustomUser","setShowCustomUser","relativeRef","_d","showGradient","setShowGradient","_e","showingUsers","setShowingUsers","_f","transferDestination","setTransferDestination","dispatch","useDispatch","_g","currentCall","displayName","number","startTime","filterUsers","Object","values","filter","userEndpoints","extension","find","id","toLowerCase","startsWith","current","name","useEffect","handleScroll","scrollTop","offsetHeight","scrollHeight","addEventListener","removeEventListener","React","createElement","Fragment","className","Button","variant","onClick","backToCallView","FontAwesomeIcon","size","icon","faArrowLeft","type","onChange","event","currentTarget","value","test","autoFocus","style","height","ref","right","left","length","ListAvatar","maxWidth","faArrowUpToLine","blindTransfer","faPhoneLight","faPhone","slice","map","i","key","status","mainPresence","active","attendedTransfer","mainextension","sent","setIslandView","updateCurrentCall","concat","getTimestampInSeconds","transferring","transferringName","transferringNumber","transferringStartTime","handleAttendedTransfer","Hangup","isDestination","clickCallback","alerts","setAlert","setTimeout","removeAlert"],"mappings":"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"}
|