From d26174e146222f3721ad8c6a4707bedac2d529b3 Mon Sep 17 00:00:00 2001
From: Vyacheslav 'SLEL' Solomin <slel64222@gmail.com>
Date: Mon, 25 Jan 2021 11:26:02 +0300
Subject: [PATCH] feat(avatars): split avatars click handlers

---
 src/components/Avatars/Avatars.js | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/Avatars/Avatars.js b/src/components/Avatars/Avatars.js
index 163dd627..40333755 100644
--- 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>