feat: ✨add onTap callback for reacted users in reactions sheet

- Added onTap for reacted user from reactions on any message.
SimformSolutionsPvtLtd · May 22, 2024 · 0014edd · 0014edd
1 parent 631648c
commit 0014edd
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 45 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,7 @@
 ## [1.3.2] (Unreleased)
 
+* **Feat**: [157](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/157)
+  Added onTap of reacted user from reacted user list
 * **Fix**: [137](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/137) Added
   support for cancel voice recording and field to provide cancel record icon.
 * **Feat**: [93](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/93) Added support

diff --git a/README.md b/README.md
@@ -600,7 +600,6 @@ ChatView(
 )
 ```
 
-
 26. Added `chatSeparatorDatePattern` in `DefaultGroupSeparatorConfiguration` to separate chats with provided pattern.
 
 ```dart
@@ -640,6 +639,26 @@ ChatView(
 )
 ```
 
+28. Added callback of onTap on list of reacted users in reaction sheet `reactedUserCallback`.
+```dart
+
+ChatView(
+   ...
+      messageConfig: MessageConfiguration(
+      ...
+        messageReactionConfig: MessageReactionConfiguration(
+          reactionsBottomSheetConfig: ReactionsBottomSheetConfiguration(
+            reactedUserCallback: (reactedUser, reaction) {
+              debugPrint(reaction);
+            },
+          ),
+        ),
+      ...
+      ),
+  ...
+),
+```
+
 
 ## How to use
 

diff --git a/lib/src/models/message_reaction_configuration.dart b/lib/src/models/message_reaction_configuration.dart
@@ -21,6 +21,8 @@
  */
 import 'package:flutter/material.dart';
 
+import '../values/typedefs.dart';
+
 class MessageReactionConfiguration {
   /// Used for giving size of reaction on message.
   final double? reactionSize;
@@ -85,6 +87,7 @@ class ReactionsBottomSheetConfiguration {
     this.reactedUserTextStyle,
     this.profileCircleRadius,
     this.reactionSize,
+    this.reactedUserCallback,
   });
 
   /// Used for giving padding of bottom sheet.
@@ -110,4 +113,7 @@ class ReactionsBottomSheetConfiguration {
 
   /// Used for giving size of reaction in bottom sheet.
   final double? reactionSize;
+
+  /// Called when user tap on reacted user from reaction list
+  final ReactedUserCallback? reactedUserCallback;
 }
diff --git a/lib/src/values/typedefs.dart b/lib/src/values/typedefs.dart
@@ -43,3 +43,7 @@ typedef ReactionCallback = void Function(
   Message message,
   String emoji,
 );
+typedef ReactedUserCallback = void Function(
+  ChatUser reactedUser,
+  String reaction,
+);
diff --git a/lib/src/widgets/reactions_bottomsheet.dart b/lib/src/widgets/reactions_bottomsheet.dart
@@ -1,6 +1,7 @@
 import 'package:chatview/src/controller/chat_controller.dart';
 import 'package:chatview/src/models/models.dart';
 import 'package:chatview/src/utils/constants/constants.dart';
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 
 class ReactionsBottomSheet {
@@ -33,54 +34,64 @@ class ReactionsBottomSheet {
             itemBuilder: (_, index) {
               final reactedUser =
                   chatController.getUserFromId(reaction.reactedUserIds[index]);
-              return Container(
-                margin: reactionsBottomSheetConfig?.reactionWidgetMargin ??
-                    const EdgeInsets.only(bottom: 8),
-                padding: reactionsBottomSheetConfig?.reactionWidgetPadding ??
-                    const EdgeInsets.all(8),
-                decoration:
-                    reactionsBottomSheetConfig?.reactionWidgetDecoration ??
-                        BoxDecoration(
-                          color: Colors.white,
-                          boxShadow: [
-                            BoxShadow(
-                              color: Colors.grey.shade200,
-                              offset: const Offset(0, 20),
-                              blurRadius: 40,
-                            )
-                          ],
-                          borderRadius: BorderRadius.circular(10),
-                        ),
-                child: Row(
-                  children: [
-                    Expanded(
-                      child: Row(
-                        children: [
-                          CircleAvatar(
-                            radius: reactionsBottomSheetConfig
-                                    ?.profileCircleRadius ??
-                                16,
-                            backgroundImage: NetworkImage(
-                              reactedUser.profilePhoto ?? profileImage,
+              return GestureDetector(
+                onTap: () {
+                  reactionsBottomSheetConfig?.reactedUserCallback?.call(
+                    reactedUser,
+                    reaction.reactions[index],
+                  );
+                },
+                child: Container(
+                  margin: reactionsBottomSheetConfig?.reactionWidgetMargin ??
+                      const EdgeInsets.only(bottom: 8),
+                  padding: reactionsBottomSheetConfig?.reactionWidgetPadding ??
+                      const EdgeInsets.all(8),
+                  decoration:
+                      reactionsBottomSheetConfig?.reactionWidgetDecoration ??
+                          BoxDecoration(
+                            color: Colors.white,
+                            boxShadow: [
+                              BoxShadow(
+                                color: Colors.grey.shade200,
+                                offset: const Offset(0, 20),
+                                blurRadius: 40,
+                              )
+                            ],
+                            borderRadius: const BorderRadius.all(
+                              Radius.circular(
+                                10,
+                              ),
                             ),
                           ),
-                          const SizedBox(width: 12),
-                          Text(
-                            reactedUser.name,
-                            style: reactionsBottomSheetConfig
-                                ?.reactedUserTextStyle,
-                          ),
-                        ],
+                  child: Row(
+                    children: [
+                      CircleAvatar(
+                        radius:
+                            reactionsBottomSheetConfig?.profileCircleRadius ??
+                                16,
+                        backgroundImage: NetworkImage(
+                          reactedUser.profilePhoto ?? profileImage,
+                        ),
                       ),
-                    ),
-                    Text(
-                      reaction.reactions[index],
-                      style: TextStyle(
-                        fontSize:
-                            reactionsBottomSheetConfig?.reactionSize ?? 14,
+                      const SizedBox(width: 12),
+                      Expanded(
+                        child: Text(
+                          reactedUser.name,
+                          maxLines: 1,
+                          overflow: TextOverflow.ellipsis,
+                          style:
+                              reactionsBottomSheetConfig?.reactedUserTextStyle,
+                        ),
                       ),
-                    )
-                  ],
+                      Text(
+                        reaction.reactions[index],
+                        style: TextStyle(
+                          fontSize:
+                              reactionsBottomSheetConfig?.reactionSize ?? 14,
+                        ),
+                      )
+                    ],
+                  ),
                 ),
               );
             },