Skip to content

Commit b34b6ba

Browse files
embbnuxembbnux
authored
add PresenceStatusIcon component (#307)
1 parent e963f68 commit b34b6ba

File tree

4 files changed

+128
-96
lines changed

4 files changed

+128
-96
lines changed

‎src/components/PresenceSettingSection/index.js‎

Lines changed: 45 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -8,30 +8,52 @@ import dndStatus from 'ringcentral-integration/modules/Presence/dndStatus';
88
import IconLine from '../IconLine';
99
import Line from '../Line';
1010
import Switch from '../Switch';
11+
import PresenceStatusIcon from '../PresenceStatusIcon';
1112
import dynamicsFont from '../../assets/DynamicsFont/DynamicsFont.scss';
1213
import styles from './styles.scss';
1314
import i18n from './i18n';
1415

16+
function getPresenceStatusName(currentUserStatus, currentDndStatus, currentLocale) {
17+
if (currentUserStatus !== presenceStatus.busy) {
18+
return i18n.getString(currentUserStatus, currentLocale);
19+
}
20+
return i18n.getString(currentUserStatus + currentDndStatus, currentLocale);
21+
}
22+
1523
function PresenceItem(props) {
1624
const className = classnames(
1725
styles.presenceItem,
1826
props.selected ? styles.selected : null
1927
);
28+
const name = getPresenceStatusName(
29+
props.userStatus,
30+
props.dndStatus,
31+
props.currentLocale
32+
);
2033
return (
2134
<a className={className} onClick={props.onClick}>
22-
{props.icon}
35+
<PresenceStatusIcon
36+
className={styles.statusIcon}
37+
userStatus={props.userStatus}
38+
dndStatus={props.dndStatus}
39+
/>
2340
<span className={styles.statusName}>
24-
{props.name}
41+
{name}
2542
</span>
2643
</a>
2744
);
2845
}
2946

3047
PresenceItem.propTypes = {
3148
onClick: PropTypes.func.isRequired,
32-
icon: PropTypes.node.isRequired,
33-
name: PropTypes.string.isRequired,
49+
userStatus: PropTypes.string.isRequired,
50+
dndStatus: PropTypes.string,
3451
selected: PropTypes.bool.isRequired,
52+
currentLocale: PropTypes.string.isRequired,
53+
};
54+
55+
PresenceItem.defaultProps = {
56+
dndStatus: null,
3557
};
3658

3759
export default class PresenceSettingSection extends Component {
@@ -62,32 +84,6 @@ export default class PresenceSettingSection extends Component {
6284
};
6385
}
6486

65-
_getPresenceStatus(currentUserStatus, currentDndStatus) {
66-
if (currentUserStatus !== presenceStatus.busy) {
67-
return i18n.getString(currentUserStatus, this.props.currentLocale);
68-
}
69-
return i18n.getString(currentUserStatus + currentDndStatus, this.props.currentLocale);
70-
}
71-
72-
_getPresenceStatusIcon(currentUserStatus, currentDndStatus) {
73-
let iconClassName;
74-
if (currentUserStatus === presenceStatus.offline) {
75-
iconClassName = styles.invisible;
76-
}
77-
if (currentUserStatus === presenceStatus.busy) {
78-
if (currentDndStatus === dndStatus.doNotAcceptAnyCalls) {
79-
iconClassName = classnames(styles.status, styles.busy, styles.notDisturb);
80-
} else {
81-
iconClassName = classnames(styles.status, styles.busy);
82-
}
83-
}
84-
return (
85-
<span className={classnames(styles.status, iconClassName)}>
86-
<i className={dynamicsFont.collapse} />
87-
</span>
88-
);
89-
}
90-
9187
render() {
9288
const sectionClass = classnames(
9389
styles.section,
@@ -104,15 +100,11 @@ export default class PresenceSettingSection extends Component {
104100
>
105101
{i18n.getString('acceptQueueCalls', this.props.currentLocale)}
106102
</IconLine>
107-
) :
108-
null;
109-
const currentStatus = this._getPresenceStatus(
110-
this.props.userStatus,
111-
this.props.dndStatus
112-
);
113-
const currentStatusIcon = this._getPresenceStatusIcon(
103+
) : null;
104+
const currentStatus = getPresenceStatusName(
114105
this.props.userStatus,
115-
this.props.dndStatus
106+
this.props.dndStatus,
107+
this.props.currentLocale
116108
);
117109
return (
118110
<section className={sectionClass}>
@@ -128,54 +120,46 @@ export default class PresenceSettingSection extends Component {
128120
{i18n.getString('status', this.props.currentLocale)}
129121
</div>
130122
<div className={styles.subTitle}>
131-
{currentStatusIcon}
123+
<PresenceStatusIcon
124+
className={styles.statusIcon}
125+
userStatus={this.props.userStatus}
126+
dndStatus={this.props.dndStatus}
127+
/>
132128
<span className={styles.statusName}>
133129
{currentStatus}
134130
</span>
135131
</div>
136132
</IconLine>
137133
<Line className={styles.presenceList}>
138134
<PresenceItem
139-
icon={this._getPresenceStatusIcon(presenceStatus.available)}
140-
name={i18n.getString(presenceStatus.available, this.props.currentLocale)}
135+
userStatus={presenceStatus.available}
136+
currentLocale={this.props.currentLocale}
141137
onClick={this.props.setAvailable}
142138
selected={this.props.userStatus === presenceStatus.available}
143139
/>
144140
<PresenceItem
145-
icon={this._getPresenceStatusIcon(
146-
presenceStatus.busy, dndStatus.takeAllCalls
147-
)}
148-
name={
149-
i18n.getString(
150-
presenceStatus.busy + dndStatus.takeAllCalls,
151-
this.props.currentLocale
152-
)
153-
}
141+
userStatus={presenceStatus.busy}
142+
dndStatus={dndStatus.takeAllCalls}
143+
currentLocale={this.props.currentLocale}
154144
onClick={this.props.setBusy}
155145
selected={
156146
this.props.userStatus === presenceStatus.busy &&
157147
this.props.dndStatus !== dndStatus.doNotAcceptAnyCalls
158148
}
159149
/>
160150
<PresenceItem
161-
icon={this._getPresenceStatusIcon(
162-
presenceStatus.busy, dndStatus.doNotAcceptAnyCalls
163-
)}
164-
name={
165-
i18n.getString(
166-
presenceStatus.busy + dndStatus.doNotAcceptAnyCalls,
167-
this.props.currentLocale
168-
)
169-
}
151+
userStatus={presenceStatus.busy}
152+
dndStatus={dndStatus.doNotAcceptAnyCalls}
153+
currentLocale={this.props.currentLocale}
170154
onClick={this.props.setDoNotDisturb}
171155
selected={
172156
this.props.userStatus === presenceStatus.busy &&
173157
this.props.dndStatus === dndStatus.doNotAcceptAnyCalls
174158
}
175159
/>
176160
<PresenceItem
177-
icon={this._getPresenceStatusIcon(presenceStatus.offline)}
178-
name={i18n.getString(presenceStatus.offline, this.props.currentLocale)}
161+
userStatus={presenceStatus.offline}
162+
currentLocale={this.props.currentLocale}
179163
onClick={this.props.setInvisible}
180164
selected={this.props.userStatus === presenceStatus.offline}
181165
/>

‎src/components/PresenceSettingSection/styles.scss‎

Lines changed: 4 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@ $icon-min-width: 120px;
88
}
99

1010
.statusIcon {
11-
display: block;
11+
display: inline-block;
12+
position: relative;
13+
margin-right: 5px;
14+
top: 2px;
1215
}
1316

1417
.title {
@@ -24,40 +27,6 @@ $icon-min-width: 120px;
2427
text-align: right;
2528
}
2629

27-
.status {
28-
display: inline-block;
29-
width: 14px;
30-
height: 14px;
31-
border-radius: 7px;
32-
background: #5fb95c;
33-
margin-right: 5px;
34-
color: transparent;
35-
line-height: 1;
36-
position: relative;
37-
top: 2px;
38-
i {
39-
display: block;
40-
font-weight: bold;
41-
width: 8px;
42-
overflow: hidden;
43-
margin: 0 auto;
44-
position: relative;
45-
top: -1px;
46-
}
47-
}
48-
49-
.notDisturb {
50-
color: #fff;
51-
}
52-
53-
.busy {
54-
background: #f95b5c;
55-
}
56-
57-
.invisible {
58-
background: #cdcdcd;
59-
}
60-
6130
.dropdownIcon {
6231
display: inline-block;
6332
}

‎src/components/PresenceStatusIcon/index.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import classnames from 'classnames';
4+
5+
import styles from './styles.scss';
6+
7+
function PresenceStatusIcon({
8+
userStatus,
9+
dndStatus,
10+
className,
11+
}) {
12+
return (
13+
<div
14+
className={
15+
classnames(
16+
styles.presence,
17+
styles[userStatus],
18+
styles[dndStatus],
19+
className,
20+
)
21+
}
22+
>
23+
<div className={styles.presenceBar} />
24+
</div>
25+
);
26+
}
27+
28+
PresenceStatusIcon.propTypes = {
29+
className: PropTypes.string,
30+
dndStatus: PropTypes.string,
31+
userStatus: PropTypes.string,
32+
};
33+
34+
PresenceStatusIcon.defaultProps = {
35+
className: null,
36+
dndStatus: null,
37+
userStatus: null,
38+
};
39+
40+
export default PresenceStatusIcon;

‎src/components/PresenceStatusIcon/styles.scss‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
.presence {
2+
position: relative;
3+
height: 14px;
4+
width: 14px;
5+
border-radius: 8px;
6+
display: none;
7+
}
8+
9+
.Offline {
10+
display: block;
11+
background: #cdcdcd;
12+
}
13+
14+
.Busy {
15+
display: block;
16+
background: #f95b5c;
17+
}
18+
19+
.Available {
20+
display: block;
21+
background-color: #32ae31;
22+
}
23+
24+
.presenceBar {
25+
display: none;
26+
position: absolute;
27+
width: 57%;
28+
height: 2px;
29+
border-radius: 1.5px;
30+
background-color: #ffffff;
31+
transform-origin: 50% 50%;
32+
transform: translate(3px, 6px);
33+
}
34+
35+
.DoNotAcceptAnyCalls {
36+
.presenceBar {
37+
display: block;
38+
}
39+
}

0 commit comments

Comments
 (0)