ringcentral · huanhulan · Sep 5, 2018 · Sep 5, 2018 · Sep 5, 2018
diff --git a/packages/ringcentral-widgets/components/ActiveCallItem/index.js b/packages/ringcentral-widgets/components/ActiveCallItem/index.js
@@ -44,7 +44,6 @@ function CallIcon({
           isOnConferenceCall={isOnConferenceCall}
           avatarUrl={avatarUrl}
           extraNum={extraNum}
-          shouldBubbleClick
           />
       </div>
     );

diff --git a/packages/ringcentral-widgets/components/ActiveCallItemV2/index.js b/packages/ringcentral-widgets/components/ActiveCallItemV2/index.js
@@ -399,7 +399,7 @@ export default class ActiveCallItem extends Component {
                 isOnConferenceCall={isOnConferenceCall}
                 avatarUrl={avatarUrl}
                 extraNum={extraNum}
-                shouldBubbleClick />
+                 />
             </div>
           }
           bodyCls={styles.content}

diff --git a/packages/ringcentral-widgets/components/ActiveCallPanel/CallInfo.js b/packages/ringcentral-widgets/components/ActiveCallPanel/CallInfo.js
@@ -9,9 +9,9 @@ import CallAvatar from '../CallAvatar';
 export default function CallInfo(props) {
   let avatar;
   if (props.avatarUrl) {
-    avatar = (<CallAvatar avatarUrl={props.avatarUrl} shouldBubbleClick />);
+    avatar = (<CallAvatar avatarUrl={props.avatarUrl} />);
   } else {
-    avatar = (<CallAvatar avatarUrl={null} shouldBubbleClick />);
+    avatar = (<CallAvatar avatarUrl={null} />);
   }
   return (
     <div className={styles.userInfo}>

diff --git a/packages/ringcentral-widgets/components/ActiveCallPanel/ConferenceInfo.js b/packages/ringcentral-widgets/components/ActiveCallPanel/ConferenceInfo.js
@@ -42,7 +42,6 @@ function ConferenceInfo({
                     className={styles.avatar}>
                     <CallAvatar
                       avatarUrl={avatarUrl}
-                      shouldBubbleClick
                     />
                   </div>
                 )

diff --git a/packages/ringcentral-widgets/components/ActiveCallPanel/MergeInfo.js b/packages/ringcentral-widgets/components/ActiveCallPanel/MergeInfo.js
@@ -100,7 +100,6 @@ class MergeInfo extends Component {
               extraNum={isOnConferenceCall ? lastCallInfo.extraNum : 0}
               isOnConferenceCall={isOnConferenceCall}
               spinnerMode={showSpinner}
-              shouldBubbleClick
             />
           </div>
           {
@@ -151,8 +150,8 @@ class MergeInfo extends Component {
           <div className={styles.callee_avatar_active} >
             {
               currentCallAvatarUrl
-                ? <CallAvatar avatarUrl={currentCallAvatarUrl} shouldBubbleClick />
-                : <CallAvatar avatarUrl={null} shouldBubbleClick />
+                ? <CallAvatar avatarUrl={currentCallAvatarUrl} />
+                : <CallAvatar avatarUrl={null} />
             }
           </div>
           <div className={styles.callee_name_active}>

diff --git a/packages/ringcentral-widgets/components/CallAvatar/index.js b/packages/ringcentral-widgets/components/CallAvatar/index.js
@@ -84,7 +84,7 @@ class CallAvatar extends Component {
 
   render() {
     const {
-      extraNum, isOnConferenceCall, spinnerMode, shouldBubbleClick
+      extraNum, isOnConferenceCall, spinnerMode, className, onClick
     } = this.props;
     const { avatarUrl } = this.state;
     const initialSize = 38;
@@ -104,7 +104,13 @@ class CallAvatar extends Component {
     const clipId = `circleClip-${hash}`;
     const avatarStyle = { stroke: $dark, strokeWidth: `${circleBorder}px` };
     const showingSpinner = spinnerMode;
-
+    const aspectRatio = 'xMidYMid meet';
+    const xmlns = 'http://www.w3.org/2000/svg';
+    const svgCls = classnames(
+      styles.callAvatar,
+      onClick ? styles.autoPointerEvents : styles.disabledPointerEvents,
+      className
+    );
     // spinner sizing
     const spinnerId = `spinner-${hash}`;
     const spinnerScaleSize = 1.5;
@@ -116,18 +122,15 @@ class CallAvatar extends Component {
       spinnerScaleSize
     }, ${spinnerScaleSize})`;
 
-    let res;
-
     if (isOnConferenceCallWithExtraNum) {
-      res = (
+      return (
         <svg
-          className={shouldBubbleClick ?
-            classnames(styles.callAvatar, styles.bubbleSvg) :
-            styles.callAvatar}
+          onClick={onClick ? () => onClick() : null}
+          className={svgCls}
           style={avatarUrl ? avatarStyle : null}
           viewBox={`0 0 ${initialSize} ${initialSize}`}
-          preserveAspectRatio="xMidYMid meet"
-          xmlns="http://www.w3.org/2000/svg"
+          preserveAspectRatio={aspectRatio}
+          xmlns={xmlns}
         >
           <defs>
             <g id={textId}>
@@ -212,63 +215,66 @@ class CallAvatar extends Component {
           </text>
         </svg>
       );
-    } else {
-      res = (
-        <svg
-          className={styles.callAvatar}
-          style={avatarUrl ? avatarStyle : null}
-          viewBox={`0 0 ${initialSize} ${initialSize}`}
-          xmlns="http://www.w3.org/2000/svg">
-          <defs>
-            <g id={textId}>
-              <text
-                x="0"
-                y="0"
-                dy={`${initialSize - 10}px`}
-                dx="2"
-                style={{
+    }
+    return (
+      <svg
+        className={svgCls}
+        onClick={onClick ? () => onClick() : null}
+        style={avatarUrl ? avatarStyle : null}
+        viewBox={`0 0 ${initialSize} ${initialSize}`}
+        preserveAspectRatio={aspectRatio}
+        xmlns={xmlns}
+          >
+        <defs>
+          <g id={textId}>
+            <text
+              x="0"
+              y="0"
+              dy={`${initialSize - 10}px`}
+              dx="2"
+              style={{
                       fontSize: `${(initialSize / 2 - 2) * 2}px`,
                       fill: $blue,
                       opacity: '.5'
                     }}
-                className={styles.portrait}>
-                {'\ue904'}
-              </text>
-            </g>
-            <SpinnerIcon id={spinnerId} />
-          </defs>
-          <circle
-            cx={initialSize / 2}
-            cy={initialSize / 2}
-            r={initialSize / 2 - circleBorder}
-            fill={$snow}
-            stroke={showingSpinner ? $dark : 'inherit'}
-            strokeOpacity={showingSpinner ? $transparency : '1'}
+              className={styles.portrait}>
+              {'\ue904'}
+            </text>
+          </g>
+          <SpinnerIcon id={spinnerId} />
+        </defs>
+        <circle
+          cx={initialSize / 2}
+          cy={initialSize / 2}
+          r={initialSize / 2 - circleBorder}
+          fill={$snow}
+          stroke={showingSpinner ? $dark : 'inherit'}
+          strokeOpacity={showingSpinner ? $transparency : '1'}
           />
-          <g>
-            <clipPath id={clipId}>
-              <circle
-                cx={initialSize / 2}
-                cy={initialSize / 2}
-                r={initialSize / 2 - 1}
+        <g>
+          <clipPath id={clipId}>
+            <circle
+              cx={initialSize / 2}
+              cy={initialSize / 2}
+              r={initialSize / 2 - 1}
               />
-            </clipPath>
-          </g>
-          {
+          </clipPath>
+        </g>
+        {
             showingSpinner && (
               <g transform={spinnerTransform} >
                 <use xlinkHref={`#${spinnerId}`} />
               </g>
             )
           }
-          {
+        {
             showingSpinner && (
               <g transform={spinnerTransform} >
                 <use xlinkHref={`#${spinnerId}`} />
               </g>
             )
           }
-          {
+        {
             avatarUrl && (<image
               clipPath={`url(#${clipId})`}
               height="100%"
@@ -277,18 +283,16 @@ class CallAvatar extends Component {
               preserveAspectRatio="xMinYMin slice" />
             )
           }
-          {
+        {
             (!avatarUrl && !showingSpinner) &&
             <use
               xlinkHref={`#${textId}`}
               clipPath={`url(#${clipId})`}
               style={defaultAvatarStyle}
             />
           }
-        </svg>
-      );
-    }
-    return res;
+      </svg>
+    );
   }
 }
 
@@ -301,15 +305,17 @@ CallAvatar.propTypes = {
    * Set to true to make it always show the loading spinner.
    */
   spinnerMode: PropTypes.bool,
-  shouldBubbleClick: PropTypes.bool
+  className: PropTypes.string,
+  onClick: PropTypes.func,
 };
 
 CallAvatar.defaultProps = {
   isOnConferenceCall: false,
   avatarUrl: null,
   extraNum: 0,
   spinnerMode: false,
-  shouldBubbleClick: false,
+  className: null,
+  onClick: null,
 };
 
 

diff --git a/packages/ringcentral-widgets/components/CallAvatar/styles.scss b/packages/ringcentral-widgets/components/CallAvatar/styles.scss
@@ -1,13 +1,21 @@
 @import '../../lib/commonStyles/fonts';
+
 .callAvatar {
   width: 100%;
+
   &:not(:root) {
     overflow: visible;
   }
+
   text.portrait {
     font-family: 'dynamics_icon' !important;
   }
 }
-.bubbleSvg {
+
+.disabledPointerEvents {
   pointer-events: none;
 }
+
+.autoPointerEvents {
+  pointer-events: auto;
+}
diff --git a/packages/ringcentral-widgets/components/ConferenceParticipantPanel/ParticipantItem.js b/packages/ringcentral-widgets/components/ConferenceParticipantPanel/ParticipantItem.js
@@ -24,7 +24,7 @@ function ParticipantItem({
       containerCls={styles.participantItem}
       mediaLeft={
         <div className={styles.avatar}>
-          <CallAvatar isOnConferenceCall={false} avatarUrl={avatarUrl} shouldBubbleClick />
+          <CallAvatar isOnConferenceCall={false} avatarUrl={avatarUrl} />
         </div>
       }
       mediaBody={detail}

diff --git a/packages/ringcentral-widgets/components/ConfirmMergeModal/index.js b/packages/ringcentral-widgets/components/ConfirmMergeModal/index.js
@@ -38,7 +38,7 @@ export default function ConfirmMergeModal({
               avatarUrl={avatarUrls[0]}
               isOnConferenceCall
               extraNum={avatarUrls.length - 1}
-              shouldBubbleClick />
+            />
           </div>
           <span>{i18n.getString('conferenceCall', currentLocale)}</span>
         </div>