Skip to content

Commit a34b159

Browse files
embbnuxembbnux
authored
add active calls list (#356)
* add calls panel and call item * adjust ActiveCallItem * add active call action menu * multi calls list * use await * remove unused codes * add onCallRing * upgrade commons and SDK
1 parent a54cdd6 commit a34b159

File tree

24 files changed

+1413
-82
lines changed

24 files changed

+1413
-82
lines changed

‎dev-server/Phone.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -302,7 +302,14 @@ export default class Phone extends RcModule {
302302
this.router.push('/calls/active');
303303
},
304304
onCallRing: () => {
305-
console.log('it is ringing');
305+
if (
306+
this.webphone.ringSessions.length > 1
307+
) {
308+
if (this.router.currentPath !== '/calls') {
309+
this.router.push('/calls');
310+
}
311+
this.webphone.toggleMinimized(this.webphone.ringSessionId);
312+
}
306313
}
307314
}));
308315
reducers.webphone = this.webphone.reducer;

‎dev-server/containers/App/index.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import ConversationPage from '../../../src/containers/ConversationPage';
1414
import ConferencePage from '../../../src/containers/ConferencePage';
1515
import MessagesPage from '../../../src/containers/MessagesPage';
1616
import SettingsPage from '../../../src/containers/SettingsPage';
17-
import CallMonitorPage from '../../../src/containers/CallMonitorPage';
17+
import ActiveCallsPage from '../../../src/containers/ActiveCallsPage';
1818
import CallHistoryPage from '../../../src/containers/CallHistoryPage';
1919
import IncomingCallPage from '../../../src/containers/IncomingCallPage';
2020
import CallCtrlPage from '../../../src/containers/CallCtrlPage';
@@ -189,21 +189,22 @@ export default function App({
189189
<Route
190190
path="/calls"
191191
component={() => (
192-
<CallMonitorPage
192+
<ActiveCallsPage
193193
locale={phone.locale}
194194
callMonitor={phone.callMonitor}
195195
contactMatcher={phone.contactMatcher}
196196
contactSearch={phone.contactSearch}
197197
regionSettings={phone.regionSettings}
198198
connectivityMonitor={phone.connectivityMonitor}
199199
rateLimiter={phone.rateLimiter}
200-
dateTimeFormat={phone.dateTimeFormat}
201200
onLogCall={async () => { await sleep(1000); }}
202201
onViewContact={() => { }}
202+
onCreateContact={() => { }}
203203
router={phone.router}
204204
composeText={phone.composeText}
205205
rolesAndPermissions={phone.rolesAndPermissions}
206206
webphone={phone.webphone}
207+
brand={phone.brand}
207208
/>
208209
)} />
209210
<Route

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,9 @@
3232
"react-redux": "^5.0.1",
3333
"react-router": "^3.0.0",
3434
"react-router-redux": "^4.0.7",
35-
"ringcentral": "^3.1.2",
35+
"ringcentral": "^3.1.3",
3636
"ringcentral-client": "^1.0.0-rc1",
37-
"ringcentral-integration": "^0.7.0",
37+
"ringcentral-integration": "^0.7.12",
3838
"whatwg-fetch": "^2.0.1"
3939
},
4040
"devDependencies": {
@@ -85,9 +85,9 @@
8585
"redux": "^3.7.2",
8686
"redux-logger": "^3.0.6",
8787
"redux-thunk": "^2.2.0",
88-
"ringcentral": "^3.1.2",
88+
"ringcentral": "^3.1.3",
8989
"ringcentral-client": "^1.0.0-rc1",
90-
"ringcentral-integration": "^0.7.9",
90+
"ringcentral-integration": "^0.7.12",
9191
"sass-loader": "^6.0.5",
9292
"source-map-loader": "^0.2.1",
9393
"style-loader": "^0.18.2",

‎src/components/ActionMenu/index.js‎

Lines changed: 6 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React, { Component } from 'react';
22
import PropTypes from 'prop-types';
33
import classnames from 'classnames';
4-
import Spinner from '../Spinner';
54
import SlideMenu from '../SlideMenu';
5+
import EntityButton from '../EntityButton';
66
import EntityModal from '../EntityModal';
77
import Button from '../Button';
88
import LogButton from '../LogButton';
@@ -24,7 +24,7 @@ function ClickToDialButton({
2424
disabled={disableLinks || disableClickToDial || !phoneNumber} >
2525
<span
2626
className={dynamicsFont.call}
27-
title={title}/>
27+
title={title} />
2828
</Button>
2929
);
3030
}
@@ -34,13 +34,15 @@ ClickToDialButton.propTypes = {
3434
disableLinks: PropTypes.bool,
3535
disableClickToDial: PropTypes.bool,
3636
phoneNumber: PropTypes.string,
37+
title: PropTypes.string,
3738
};
3839
ClickToDialButton.defaultProps = {
3940
className: undefined,
4041
onClickToDial: undefined,
4142
disableLinks: false,
4243
disableClickToDial: false,
4344
phoneNumber: undefined,
45+
title: undefined,
4446
};
4547

4648
function ClickToSmsButton({
@@ -74,59 +76,6 @@ ClickToSmsButton.defaultProps = {
7476
phoneNumber: undefined,
7577
};
7678

77-
function EntityButton({
78-
className,
79-
onViewEntity,
80-
onCreateEntity,
81-
hasEntity,
82-
isCreating,
83-
disableLinks,
84-
viewEntityTitle,
85-
createEntityTitle,
86-
}) {
87-
// console.debug('isCreating', isCreating);
88-
const spinner = isCreating ?
89-
(
90-
<div className={styles.spinnerContainer}>
91-
<Spinner ringWidth={2} />
92-
</div>
93-
) :
94-
null;
95-
const icon = hasEntity ? dynamicsFont.record : dynamicsFont.addEntity;
96-
const onClick = hasEntity ? onViewEntity : onCreateEntity;
97-
const title = hasEntity ? viewEntityTitle : createEntityTitle;
98-
return (
99-
<Button
100-
className={classnames(styles.entity, className)}
101-
onClick={onClick}
102-
disabled={disableLinks} >
103-
104-
<span
105-
className={icon}
106-
title={title}
107-
/>
108-
{spinner}
109-
</Button>
110-
);
111-
}
112-
EntityButton.propTypes = {
113-
className: PropTypes.string,
114-
onViewEntity: PropTypes.func,
115-
onCreateEntity: PropTypes.func,
116-
hasEntity: PropTypes.bool,
117-
isCreating: PropTypes.bool,
118-
disableLinks: PropTypes.bool,
119-
};
120-
EntityButton.defaultProps = {
121-
className: undefined,
122-
onViewEntity: undefined,
123-
hasEntity: false,
124-
onCreateEntity: undefined,
125-
isCreating: false,
126-
disableLinks: false,
127-
};
128-
129-
13079
export default class ActionMenu extends Component {
13180
constructor(props) {
13281
super(props);
@@ -176,7 +125,6 @@ export default class ActionMenu extends Component {
176125
phoneNumber,
177126
disableLinks,
178127
disableClickToDial,
179-
stopPropagation,
180128
addLogTitle,
181129
editLogTitle,
182130
callTitle,
@@ -203,15 +151,15 @@ export default class ActionMenu extends Component {
203151
let entityButton;
204152
if (hasEntity && onViewEntity) {
205153
entityButton = (<EntityButton
206-
className={styles.baseGroup}
154+
className={classnames(styles.entity, styles.baseGroup)}
207155
onViewEntity={onViewEntity}
208156
hasEntity={hasEntity}
209157
disableLinks={disableLinks}
210158
viewEntityTitle={viewEntityTitle}
211159
/>);
212160
} else if (!hasEntity && phoneNumber && onCreateEntity) {
213161
entityButton = (<EntityButton
214-
className={styles.baseGroup}
162+
className={classnames(styles.entity, styles.baseGroup)}
215163
onCreateEntity={this.openEntityModal}
216164
hasEntity={hasEntity}
217165
disableLinks={disableLinks}
@@ -318,7 +266,6 @@ ActionMenu.propTypes = {
318266
disableLinks: PropTypes.bool,
319267
disableClickToDial: PropTypes.bool,
320268
stopPropagation: PropTypes.bool,
321-
captureClick: PropTypes.bool,
322269
addLogTitle: PropTypes.string,
323270
editLogTitle: PropTypes.string,
324271
textTitle: PropTypes.string,
@@ -342,7 +289,6 @@ ActionMenu.defaultProps = {
342289
disableLinks: false,
343290
disableClickToDial: false,
344291
stopPropagation: false,
345-
captureClick: false,
346292
addLogTitle: undefined,
347293
editLogTitle: undefined,
348294
textTitle: undefined,

‎src/components/ActionMenu/styles.scss‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,3 @@
3636
position: absolute;
3737
top: 10px;
3838
}
39-
40-
.spinnerContainer {
41-
position: absolute;
42-
width: 12px;
43-
bottom: 0;
44-
right: 0;
45-
}

‎src/components/ActiveCallActionMenu/index.js‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
import React, { Component } from 'react';
2+
import PropTypes from 'prop-types';
3+
import classnames from 'classnames';
4+
5+
import dynamicsFont from '../../assets/DynamicsFont/DynamicsFont.scss';
6+
import Button from '../Button';
7+
import LogButton from '../LogButton';
8+
import EntityButton from '../EntityButton';
9+
10+
import styles from './styles.scss';
11+
12+
export default class ActiveCallActionMenu extends Component {
13+
constructor(props) {
14+
super(props);
15+
16+
this.captureClick = (e) => {
17+
// e.captureClick = this.props.captureClick;
18+
if (this.props.stopPropagation) {
19+
e.stopPropagation();
20+
}
21+
};
22+
}
23+
24+
render() {
25+
const {
26+
className,
27+
onClickToSms,
28+
disableLinks,
29+
phoneNumber,
30+
textTitle,
31+
onLog,
32+
isLogged,
33+
isLogging,
34+
currentLocale,
35+
addLogTitle,
36+
editLogTitle,
37+
hasEntity,
38+
onViewEntity,
39+
onCreateEntity,
40+
createEntityTitle,
41+
viewEntityTitle,
42+
} = this.props;
43+
44+
const smsButton = onClickToSms ?
45+
(
46+
<Button
47+
className={classnames(styles.actionButton, styles.sms)}
48+
onClick={onClickToSms}
49+
disabled={disableLinks || !phoneNumber} >
50+
<span
51+
className={dynamicsFont.composeText}
52+
title={textTitle}
53+
/>
54+
</Button>
55+
) : null;
56+
const logButton = onLog ?
57+
(
58+
<LogButton
59+
className={classnames(styles.actionButton, styles.log)}
60+
onLog={onLog}
61+
disableLinks={disableLinks}
62+
isLogged={isLogged}
63+
isLogging={isLogging}
64+
currentLocale={currentLocale}
65+
addTitle={addLogTitle}
66+
editTitle={editLogTitle}
67+
/>
68+
) :
69+
null;
70+
let entityButton;
71+
if (hasEntity && onViewEntity) {
72+
entityButton = (<EntityButton
73+
className={classnames(styles.actionButton, styles.entity)}
74+
onViewEntity={onViewEntity}
75+
hasEntity={hasEntity}
76+
disableLinks={disableLinks}
77+
viewEntityTitle={viewEntityTitle}
78+
/>);
79+
} else if (!hasEntity && phoneNumber && onCreateEntity) {
80+
entityButton = (
81+
<Button
82+
className={classnames(styles.actionButton, styles.addContact)}
83+
onClick={onCreateEntity}
84+
disabled={disableLinks || !phoneNumber} >
85+
<span
86+
className={dynamicsFont.add2}
87+
title={createEntityTitle}
88+
/>
89+
</Button>
90+
);
91+
} else {
92+
entityButton = null;
93+
}
94+
return (
95+
<div
96+
className={classnames(
97+
styles.root,
98+
className,
99+
)}
100+
onClick={this.captureClick}
101+
>
102+
{smsButton}
103+
{entityButton}
104+
{logButton}
105+
</div>
106+
);
107+
}
108+
}
109+
110+
ActiveCallActionMenu.propTypes = {
111+
className: PropTypes.string,
112+
onClickToSms: PropTypes.func,
113+
disableLinks: PropTypes.bool,
114+
phoneNumber: PropTypes.string,
115+
textTitle: PropTypes.string,
116+
currentLocale: PropTypes.string.isRequired,
117+
onLog: PropTypes.func,
118+
isLogged: PropTypes.bool,
119+
isLogging: PropTypes.bool,
120+
addLogTitle: PropTypes.string,
121+
editLogTitle: PropTypes.string,
122+
stopPropagation: PropTypes.bool,
123+
onCreateEntity: PropTypes.func,
124+
hasEntity: PropTypes.bool,
125+
onViewEntity: PropTypes.func,
126+
createEntityTitle: PropTypes.string,
127+
viewEntityTitle: PropTypes.string,
128+
};
129+
130+
ActiveCallActionMenu.defaultProps = {
131+
className: undefined,
132+
onClickToSms: undefined,
133+
disableLinks: false,
134+
phoneNumber: undefined,
135+
textTitle: undefined,
136+
onLog: undefined,
137+
isLogged: false,
138+
isLogging: false,
139+
addLogTitle: undefined,
140+
editLogTitle: undefined,
141+
stopPropagation: false,
142+
onCreateEntity: undefined,
143+
createEntityTitle: undefined,
144+
viewEntityTitle: undefined,
145+
onViewEntity: undefined,
146+
hasEntity: false,
147+
};

0 commit comments

Comments
 (0)