Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add config option to reorder items in emoji picker #215

Merged
merged 1 commit into from
Sep 28, 2024
+93 −24
Merged

feat: add config option to reorder items in emoji picker #215

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,11 @@ EmojiPicker(
? 1.20
: 1.0),
),
swapCategoryAndBottomBar: false,
viewOrderConfig: const ViewOrderConfig(
top: EmojiPickerItem.categoryBar,
middle: EmojiPickerItem.emojiView,
bottom: EmojiPickerItem.searchBar,
),
skinToneConfig: const SkinToneConfig(),
categoryViewConfig: const CategoryViewConfig(),
bottomActionBarConfig: const BottomActionBarConfig(),
Expand Down Expand Up @@ -85,7 +89,7 @@ All examples can be found [here](https://github.com/Fintasys/emoji_picker_flutte
| property | description | default |
| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- |
| height | Height of Emoji Picker | 256 |
| swapCategoryAndBottomBar | Swap the category view and bottom bar (category bottom and bottom bar top) | false |
| viewOrderConfig | The exact order in which category view, emoji view and bottom bar appear | false |
| checkPlatformCompatibility | Whether to filter out glyphs that platform cannot render with the default font (Android). | true |
| emojiSet | Custom emoji set, can be built based on `defaultEmojiSet` provided by the library. | null |
| emojiTextStyle | Text style to apply to individual emoji icons. Can be used to define custom emoji font either with GoogleFonts library or bundled with the app. | null |
Expand Down
6 changes: 5 additions & 1 deletion example/lib/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,11 @@ class MyAppState extends State<MyApp> {
config: Config(
height: 256,
checkPlatformCompatibility: true,
viewOrderConfig: const ViewOrderConfig(
top: EmojiPickerItem.categoryBar,
middle: EmojiPickerItem.emojiView,
bottom: EmojiPickerItem.searchBar,
),
emojiViewConfig: EmojiViewConfig(
// Issue: https://github.com/flutter/flutter/issues/28894
emojiSizeMax: 28 *
Expand All @@ -117,7 +122,6 @@ class MyAppState extends State<MyApp> {
? 1.2
: 1.0),
),
swapCategoryAndBottomBar: false,
skinToneConfig: const SkinToneConfig(),
categoryViewConfig: const CategoryViewConfig(),
bottomActionBarConfig: const BottomActionBarConfig(),
Expand Down
6 changes: 5 additions & 1 deletion example/lib/main_custom_font.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,9 +134,13 @@ class MyAppState extends State<MyApp> {
config: Config(
height: 256,
checkPlatformCompatibility: true,
viewOrderConfig: const ViewOrderConfig(
top: EmojiPickerItem.categoryBar,
middle: EmojiPickerItem.emojiView,
bottom: EmojiPickerItem.searchBar,
),
emojiTextStyle: _textStyle,
emojiViewConfig: const EmojiViewConfig(),
swapCategoryAndBottomBar: false,
skinToneConfig: const SkinToneConfig(),
categoryViewConfig: const CategoryViewConfig(),
bottomActionBarConfig: const BottomActionBarConfig(),
Expand Down
6 changes: 5 additions & 1 deletion example/lib/main_whatsapp.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,11 +191,15 @@ class MyAppState extends State<MyApp> {
config: Config(
height: 256,
checkPlatformCompatibility: true,
viewOrderConfig: const ViewOrderConfig(
top: EmojiPickerItem.categoryBar,
middle: EmojiPickerItem.emojiView,
bottom: EmojiPickerItem.searchBar,
),
emojiTextStyle: _textStyle,
emojiViewConfig: const EmojiViewConfig(
backgroundColor: Colors.white,
),
swapCategoryAndBottomBar: true,
skinToneConfig: const SkinToneConfig(),
categoryViewConfig: CategoryViewConfig(
backgroundColor: Colors.white,
Expand Down
1 change: 1 addition & 0 deletions lib/emoji_picker_flutter.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export 'package:emoji_picker_flutter/src/skin_tones/emoji_skin_tones.dart';
export 'package:emoji_picker_flutter/src/skin_tones/skin_tone_config.dart';
export 'package:emoji_picker_flutter/src/skin_tones/skin_tone_overlay.dart';
export 'package:emoji_picker_flutter/src/skin_tones/triangle_decoration.dart';
export 'package:emoji_picker_flutter/src/view_order_config.dart';
export 'package:emoji_picker_flutter/src/widgets/backspace_button.dart';
export 'package:emoji_picker_flutter/src/widgets/emoji_cell.dart';
export 'package:emoji_picker_flutter/src/widgets/search_button.dart';
16 changes: 10 additions & 6 deletions lib/src/config.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,16 @@ class Config {
/// Constructor
const Config({
this.height = 256,
this.swapCategoryAndBottomBar = false,
this.checkPlatformCompatibility = true,
this.emojiSet = defaultEmojiSet,
this.emojiTextStyle,
this.customBackspaceIcon,
this.customSearchIcon,
this.viewOrderConfig = const ViewOrderConfig(
top: EmojiPickerItem.categoryBar,
middle: EmojiPickerItem.emojiView,
bottom: EmojiPickerItem.searchBar,
),
this.emojiViewConfig = const EmojiViewConfig(),
this.skinToneConfig = const SkinToneConfig(),
this.categoryViewConfig = const CategoryViewConfig(),
Expand All @@ -25,9 +29,6 @@ class Config {
/// Max Height of the Emoji's view
final double height;

/// Swap the category view and bottom bar (category bottom and bottom bar top)
final bool swapCategoryAndBottomBar;

/// Verify that emoji glyph is supported by the platform (Android only)
final bool checkPlatformCompatibility;

Expand All @@ -50,6 +51,9 @@ class Config {
/// Custom search icon
final Icon? customSearchIcon;

/// Config for items in order to show in UI
final ViewOrderConfig viewOrderConfig;

/// Emoji view config
final EmojiViewConfig emojiViewConfig;

Expand All @@ -68,7 +72,7 @@ class Config {
@override
bool operator ==(other) {
return (other is Config) &&
other.swapCategoryAndBottomBar == swapCategoryAndBottomBar &&
other.viewOrderConfig == viewOrderConfig &&
other.checkPlatformCompatibility == checkPlatformCompatibility &&
other.emojiSet == emojiSet &&
other.emojiTextStyle == emojiTextStyle &&
Expand All @@ -82,7 +86,7 @@ class Config {

@override
int get hashCode =>
swapCategoryAndBottomBar.hashCode ^
viewOrderConfig.hashCode ^
checkPlatformCompatibility.hashCode ^
emojiSet.hashCode ^
(emojiTextStyle?.hashCode ?? 0) ^
Expand Down
31 changes: 18 additions & 13 deletions lib/src/emoji_view/default_emoji_picker_view.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,19 +58,24 @@ class _DefaultEmojiPickerViewState extends State<DefaultEmojiPickerView>
buttonMode: widget.config.emojiViewConfig.buttonMode,
child: Column(
children: [
// Category view or bottom search bar
widget.config.swapCategoryAndBottomBar
? _buildBottomSearchBar()
: _buildCategoryView(),

// Emoji view
_buildEmojiView(emojiSize, emojiBoxSize),

// Bottom Search Bar or Category view
widget.config.swapCategoryAndBottomBar
? _buildCategoryView()
: _buildBottomSearchBar(),
],
widget.config.viewOrderConfig.top,
widget.config.viewOrderConfig.middle,
widget.config.viewOrderConfig.bottom,
].map(
(item) {
switch (item) {
case EmojiPickerItem.categoryBar:
// Category view
return _buildCategoryView();
case EmojiPickerItem.emojiView:
// Emoji view
return _buildEmojiView(emojiSize, emojiBoxSize);
case EmojiPickerItem.searchBar:
// Search Bar
return _buildBottomSearchBar();
}
},
).toList(),
),
);
},
Expand Down
43 changes: 43 additions & 0 deletions lib/src/view_order_config.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
/// View order config
class ViewOrderConfig {
/// Constructor
const ViewOrderConfig({
required this.top,
required this.middle,
required this.bottom,
}) : assert(!identical(top, middle) &&
!identical(top, bottom) &&
!identical(middle, bottom));

/// First item
final EmojiPickerItem top;

/// Middle item
final EmojiPickerItem middle;

/// Last item
final EmojiPickerItem bottom;

@override
bool operator ==(other) {
return (other is ViewOrderConfig) &&
other.top == top &&
other.middle == middle &&
other.bottom == bottom;
}

@override
int get hashCode => top.hashCode ^ middle.hashCode ^ bottom.hashCode;
}

/// Widgets shown in `EmojiPicker` view
enum EmojiPickerItem {
/// The tab bar to choose between different emoji categories
categoryBar,

/// The area that shows emojis
emojiView,

/// The search bar to search emojis
searchBar,
}
Loading