From a2dee7e5e0090ea906761042b6cdd104d9dc9825 Mon Sep 17 00:00:00 2001 From: Apurva Kanthraviya Date: Wed, 15 May 2024 16:32:14 +0530 Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8Added=20configuration=20for=20?= =?UTF-8?q?emoji=20picker=20sheet?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Added emojiPickerSheetConfig for configuration of emoji picker modal sheet. --- CHANGELOG.md | 2 + README.md | 18 ++++++++ lib/chatview.dart | 1 + lib/src/widgets/chat_list_widget.dart | 5 ++ lib/src/widgets/chat_view.dart | 5 ++ lib/src/widgets/emoji_picker_widget.dart | 59 ++++++++++++++---------- lib/src/widgets/emoji_row.dart | 16 +++++-- lib/src/widgets/reaction_popup.dart | 5 ++ 8 files changed, 82 insertions(+), 29 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2a7009fc..6c8a88cc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,7 @@ ## [1.3.2] (Unreleased) +* **Fix**: [160](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/160) Added + configuration for emoji picker sheet. * **Fix**: [130](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/130) Added report button for receiver message and update onMoreTap, onReportTap callback. * **Fix**: [126](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/126) Added diff --git a/README.md b/README.md index bd5be3c4..557c7fda 100644 --- a/README.md +++ b/README.md @@ -512,6 +512,24 @@ ChatView( ) ``` +22. Added `emojiPickerSheetConfig` for configuration of emoji picker sheet. + +```dart +ChatView( + ... + emojiPickerSheetConfig: const Config( + columns: 7, + emojiSizeMax: 32 + initCategory: Category.RECENT, + bgColor: Colors.white, + recentTabBehavior: RecentTabBehavior.NONE, + recentsLimit: 28, + ), + + ... + +) +``` ## How to use diff --git a/lib/chatview.dart b/lib/chatview.dart index 83528dda..f3d0edbc 100644 --- a/lib/chatview.dart +++ b/lib/chatview.dart @@ -32,3 +32,4 @@ export 'package:audio_waveforms/audio_waveforms.dart' show WaveStyle, PlayerWaveStyle; export 'src/models/receipts_widget_config.dart'; export 'src/extensions/extensions.dart' show MessageTypes; +export'package:emoji_picker_flutter/emoji_picker_flutter.dart'; diff --git a/lib/src/widgets/chat_list_widget.dart b/lib/src/widgets/chat_list_widget.dart index 09fb2d19..9f707304 100644 --- a/lib/src/widgets/chat_list_widget.dart +++ b/lib/src/widgets/chat_list_widget.dart @@ -52,6 +52,7 @@ class ChatListWidget extends StatefulWidget { this.isLastPage, this.onChatListTap, this.chatTextFieldTopPadding = 0, + this.emojiPickerSheetConfig, }) : super(key: key); /// Provides controller for accessing few function for running chat. @@ -112,6 +113,9 @@ class ChatListWidget extends StatefulWidget { /// Provides top padding of chat text field final double chatTextFieldTopPadding; + /// Configuration for emoji picker sheet + final Config? emojiPickerSheetConfig; + @override State createState() => _ChatListWidgetState(); } @@ -233,6 +237,7 @@ class _ChatListWidgetState extends State reactionPopupConfig: widget.reactionPopupConfig, onTap: _onChatListTap, showPopUp: showPopupValue, + emojiPickerSheetConfig: widget.emojiPickerSheetConfig, ), ], ); diff --git a/lib/src/widgets/chat_view.dart b/lib/src/widgets/chat_view.dart index e033a059..6c66daf1 100644 --- a/lib/src/widgets/chat_view.dart +++ b/lib/src/widgets/chat_view.dart @@ -55,6 +55,7 @@ class ChatView extends StatefulWidget { ChatViewStateConfiguration? chatViewStateConfig, this.featureActiveConfig = const FeatureActiveConfig(), this.chatTextFieldTopPadding = 0, + this.emojiPickerSheetConfig, }) : chatBackgroundConfig = chatBackgroundConfig ?? const ChatBackgroundConfiguration(), chatViewStateConfig = @@ -141,6 +142,9 @@ class ChatView extends StatefulWidget { /// Provides top padding of chat text field final double chatTextFieldTopPadding; + /// Configuration for emoji picker sheet + final Config? emojiPickerSheetConfig; + @override State createState() => _ChatViewState(); } @@ -256,6 +260,7 @@ class _ChatViewState extends State ?.assignReplyMessage(message), chatTextFieldTopPadding: widget.chatTextFieldTopPadding, + emojiPickerSheetConfig: widget.emojiPickerSheetConfig, ); }, ), diff --git a/lib/src/widgets/emoji_picker_widget.dart b/lib/src/widgets/emoji_picker_widget.dart index d2075e39..97ebf4ab 100644 --- a/lib/src/widgets/emoji_picker_widget.dart +++ b/lib/src/widgets/emoji_picker_widget.dart @@ -29,20 +29,27 @@ import 'package:emoji_picker_flutter/emoji_picker_flutter.dart'; import '../values/typedefs.dart'; class EmojiPickerWidget extends StatelessWidget { - const EmojiPickerWidget({Key? key, required this.onSelected}) - : super(key: key); + const EmojiPickerWidget({ + Key? key, + required this.onSelected, + this.emojiPickerSheetConfig, + }) : super(key: key); /// Provides callback when user selects emoji. final StringCallback onSelected; + /// Configuration for emoji picker sheet + final Config? emojiPickerSheetConfig; + @override Widget build(BuildContext context) { final size = MediaQuery.sizeOf(context); return Container( padding: const EdgeInsets.only(top: 10, left: 15, right: 15), - decoration: const BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.vertical(top: Radius.circular(16)), + decoration: BoxDecoration( + color: emojiPickerSheetConfig?.emojiViewConfig.backgroundColor ?? + Colors.white, + borderRadius: const BorderRadius.vertical(top: Radius.circular(16)), ), height: size.height * 0.6, width: size.width, @@ -61,26 +68,28 @@ class EmojiPickerWidget extends StatelessWidget { child: EmojiPicker( onEmojiSelected: (Category? category, Emoji emoji) => onSelected(emoji.emoji), - config: Config( - emojiViewConfig: EmojiViewConfig( - columns: 7, - emojiSizeMax: 32 * ((!kIsWeb && Platform.isIOS) ? 1.30 : 1.0), - recentsLimit: 28, - backgroundColor: Colors.white, - ), - searchViewConfig: const SearchViewConfig( - buttonIconColor: Colors.black, - ), - categoryViewConfig: const CategoryViewConfig( - initCategory: Category.RECENT, - recentTabBehavior: RecentTabBehavior.NONE, - ), - bottomActionBarConfig: const BottomActionBarConfig( - backgroundColor: Colors.white, - buttonIconColor: Colors.black, - buttonColor: Colors.white, - ), - ), + config: emojiPickerSheetConfig ?? + Config( + emojiViewConfig: EmojiViewConfig( + columns: 7, + emojiSizeMax: + 32 * ((!kIsWeb && Platform.isIOS) ? 1.30 : 1.0), + recentsLimit: 28, + backgroundColor: Colors.white, + ), + searchViewConfig: const SearchViewConfig( + buttonIconColor: Colors.black, + ), + categoryViewConfig: const CategoryViewConfig( + initCategory: Category.RECENT, + recentTabBehavior: RecentTabBehavior.NONE, + ), + bottomActionBarConfig: const BottomActionBarConfig( + backgroundColor: Colors.white, + buttonIconColor: Colors.black, + buttonColor: Colors.white, + ), + ), ), ), ], diff --git a/lib/src/widgets/emoji_row.dart b/lib/src/widgets/emoji_row.dart index 82dec4e2..bee84387 100644 --- a/lib/src/widgets/emoji_row.dart +++ b/lib/src/widgets/emoji_row.dart @@ -19,6 +19,7 @@ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. */ +import 'package:emoji_picker_flutter/emoji_picker_flutter.dart'; import 'package:flutter/material.dart'; import 'package:chatview/src/models/reaction_popup_configuration.dart'; import 'package:chatview/src/utils/constants/constants.dart'; @@ -31,6 +32,7 @@ class EmojiRow extends StatelessWidget { Key? key, required this.onEmojiTap, this.emojiConfiguration, + this.emojiPickerSheetConfig, }) : super(key: key); /// Provides callback when user taps on emoji in reaction pop-up. @@ -49,6 +51,9 @@ class EmojiRow extends StatelessWidget { thumbsUp, ]; + /// Configuration for emoji picker sheet + final Config? emojiPickerSheetConfig; + @override Widget build(BuildContext context) { final emojiList = emojiConfiguration?.emojiList ?? _emojiUnicodes; @@ -86,9 +91,12 @@ class EmojiRow extends StatelessWidget { void _showBottomSheet(BuildContext context) => showModalBottomSheet( context: context, - builder: (context) => EmojiPickerWidget(onSelected: (emoji) { - Navigator.pop(context); - onEmojiTap(emoji); - }), + builder: (context) => EmojiPickerWidget( + emojiPickerSheetConfig: emojiPickerSheetConfig, + onSelected: (emoji) { + Navigator.pop(context); + onEmojiTap(emoji); + }, + ), ); } diff --git a/lib/src/widgets/reaction_popup.dart b/lib/src/widgets/reaction_popup.dart index 69ca4e21..07d8ef5d 100644 --- a/lib/src/widgets/reaction_popup.dart +++ b/lib/src/widgets/reaction_popup.dart @@ -32,6 +32,7 @@ class ReactionPopup extends StatefulWidget { this.reactionPopupConfig, required this.onTap, required this.showPopUp, + this.emojiPickerSheetConfig, }) : super(key: key); /// Provides configuration of reaction pop-up appearance. @@ -43,6 +44,9 @@ class ReactionPopup extends StatefulWidget { /// Represents should pop-up show or not. final bool showPopUp; + /// Configuration for emoji picker sheet + final Config? emojiPickerSheetConfig; + @override ReactionPopupState createState() => ReactionPopupState(); } @@ -168,6 +172,7 @@ class ReactionPopupState extends State } }, emojiConfiguration: reactionPopupConfig?.emojiConfig, + emojiPickerSheetConfig: widget.emojiPickerSheetConfig, ); void refreshWidget({