feat(avatars): split avatars click handlers

8base · Jan 25, 2021 · d26174e · d26174e
1 parent 0f112c4
commit d26174e
Showing 1 changed file with 15 additions and 5 deletions.
diff --git a/src/components/Avatars/Avatars.js b/src/components/Avatars/Avatars.js
@@ -16,7 +16,9 @@ type AvatarsProps = {
     lastName: string,
     avatarUrl: string,
   }>,
-  onClick: Function,
+  onAvatarsClick?: Function,
+  onCounterClick?: Function,
+  onPlusClick?: Function,
 };
 
 const tooltipClassName = css`
@@ -30,13 +32,21 @@ const avatarClassName = css`
   cursor: pointer;
 `;
 
-const Avatars = ({ users, size, onClick, ...rest }: AvatarsProps) => {
+const Avatars = ({
+  users,
+  size,
+  onAvatarsClick,
+  onCounterClick,
+  onPlusClick,
+  ...rest
+}: AvatarsProps) => {
   return (
-    <AvatarsTag { ...rest } tagName="div" onClick={ onClick }>
+    <AvatarsTag { ...rest } tagName="div">
       { React.Children.toArray(
         users.slice(0, 4).map(({ firstName, lastName, avatarUrl }, index) => (
           <Tooltip css={ css(tooltipClassName) } message={ `${firstName} ${lastName}` }>
             <Avatar
+              onClick={ onAvatarsClick }
               css={ css(avatarClassName) }
               style={{ zIndex: Math.abs(index - 7) }}
               firstName={ firstName }
@@ -49,9 +59,9 @@ const Avatars = ({ users, size, onClick, ...rest }: AvatarsProps) => {
       ) }
 
       <If condition={ users.length > 4 }>
-        <AvatarsCounterTag size={ size }>+ { users.length - 4 }</AvatarsCounterTag>
+        <AvatarsCounterTag onClick={ onCounterClick } size={ size }>+ { users.length - 4 }</AvatarsCounterTag>
       </If>
-      <AvatarsHandleTag size={ size }>
+      <AvatarsHandleTag onClick={ onPlusClick } size={ size }>
         <Icon name="Plus" size="xs" color="PRIMARY" />
       </AvatarsHandleTag>
     </AvatarsTag>