diff --git a/.assets/EmojiPicker-1.png b/.assets/EmojiPicker-1.png index e0b2436..e4cbbd5 100644 Binary files a/.assets/EmojiPicker-1.png and b/.assets/EmojiPicker-1.png differ diff --git a/.assets/EmojiPicker-2.png b/.assets/EmojiPicker-2.png index 51978d4..d20f475 100644 Binary files a/.assets/EmojiPicker-2.png and b/.assets/EmojiPicker-2.png differ diff --git a/.assets/EmojiPicker-Vid.gif b/.assets/EmojiPicker-Vid.gif deleted file mode 100644 index 698d663..0000000 Binary files a/.assets/EmojiPicker-Vid.gif and /dev/null differ diff --git a/.assets/EmojiPickerFront.png b/.assets/EmojiPickerFront.png deleted file mode 100644 index 0af70c3..0000000 Binary files a/.assets/EmojiPickerFront.png and /dev/null differ diff --git a/README.md b/README.md index 4cfdc99..fe40ecd 100644 --- a/README.md +++ b/README.md @@ -1,62 +1,73 @@ -![EmojiPicker](./.assets/EmojiPickerFront.png) +# EmojiPicker -## Goal +This Swift package allows you to show a view with all available emoji on the OS, navigate through the list of emojis and categories, search for emojis based on keywords, and select an emoji. -In some cases you need to be able to select an emoji and not allow a user to enter anything else (letters, numbers, symbols, ...). - -The EmojiPicker is there for that. - -It is a SwiftUI library that allows you to get a list of all the emojis present on your smartphone but also to create a selector to simplify your life. - -## Screenshots and video +## Screenshots |Emoji list|Emoji search| |---|---| |![Emoji list](./.assets/EmojiPicker-1.png)|![Emoji search](./.assets/EmojiPicker-2.png)| -![Emoji list](./.assets/EmojiPicker-Vid.gif) - ## Dependencies - SwiftUI (iOS >= 15.0) -- [EmojiKit](https://github.com/tyiu/EmojiKit) (`719d405244ea9ef462867c16e3d3254b7386b71f`) -- [SwiftTrie](https://github.com/tyiu/swift-trie) (1.1.0) +- [EmojiKit](https://github.com/tyiu/EmojiKit) (0.1.0) +- [SwiftTrie](https://github.com/tyiu/swift-trie) (0.1.1) -## How install it? +## Installation -Nowaday we only support Swift Package Manager. You can use build-in UI tool for XCode with this search words: `EmojiPicker` or you can add it directly with this following command : +EmojiPicker can be integrated as an Xcode project target or a Swift package target. + +### Xcode Project Target + +1. Go to `File` -> `Add Package Dependencies`. +2. Type https://github.com/tyiu/EmojiPicker.git into the search field. +3. Select `EmojiPicker` from the search results. +4. Select `Up to Next Major Version` starting from the latest release as the dependency rule. +5. Ensure your project is selected next to `Add to Project`. +6. Click `Add Package`. +7. On the package product dialog, add `EmojiPicker` to your target and click `Add Package`. + +### Swift Package Target + +In your `Package.swift` file: +1. Add the EmojiPicker package dependency to https://github.com/tyiu/EmojiPicker.git +2. Add `EmojiPicker` as a dependency on the targets that need to use the SDK. ```swift -.package(url: "https://github.com/tyiu/EmojiPicker.git", from: "2.0.0") +let package = Package( + // ... + dependencies: [ + // ... + .package(url: "https://github.com/tyiu/EmojiPicker.git", .upToNextMajor(from: "0.1.0")) + ], + targets: [ + .target( + // ... + dependencies: ["EmojiPicker"] + ), + .testTarget( + // ... + dependencies: ["EmojiPicker"] + ) + ] +) ``` -## How use it? +## Usage -First of all you have to import the library `EmojiPicker`: +Import `EmojiPicker` in the file you want to use it in: ```swift import EmojiPicker ``` -You then have the option of using the `EmojiPickerView`. This view represents the list of selectable emojis. - -The latter is not embedded in a NavigationView. If you want to display it with a title, you have to do it yourself: - -```swift -... -NavigationView { - EmojiPickerView(selectedEmoji: $selectedEmoji, selectedColor: .orange) - .navigationTitle("Emojis") - .navigationBarTitleDisplayMode(.inline) -} -... -``` - -Here is a complete example: +Then add `EmojiPickerView` as a view. Here is a complete example: ```swift import SwiftUI import EmojiPicker +import EmojiKit struct ContentView: View { @@ -71,20 +82,22 @@ struct ContentView: View { VStack { Text(selectedEmoji?.value ?? "") .font(.largeTitle) - Text(selectedEmoji?.name ?? "") + Text(selectedEmoji?.localizedKeywords["en"]?.joined(separator: ", ") ?? "") .font(.title3) } .padding(8) Button { displayEmojiPicker = true } label: { - Text("Select emoji") + Text("Select standard emoji") } + .buttonStyle(.borderedProminent) } .padding() .sheet(isPresented: $displayEmojiPicker) { NavigationView { EmojiPickerView(selectedEmoji: $selectedEmoji, selectedColor: .orange) + .padding(.top, 32) .navigationTitle("Emojis") .navigationBarTitleDisplayMode(.inline) } @@ -102,56 +115,6 @@ When a user selects an emoji, it is highlighted. By default the selection color EmojiPickerView(selectedEmoji: $selectedEmoji, selectedColor: .orange) ``` -### Enable search - -By default the search for emoji is allowed in the picker, it is however possible to change this setting when creating the view: - -```swift -EmojiPickerView(selectedEmoji: $selectedEmoji, searchEnabled: false) -``` - -⚠️ **WARNING** Search is only possible when `EmojiPicker` is embed on `NavigationView`. - -### Custom emoji provider - -`EmojiPickerView` embeds `EmojiProvider` protocol with a default implementation: `DefaultEmojiProvider`. This class allows to retrieve all existing emojis. - -When you build an `EmojiPickerView`, by default it uses this class to get the list of emojis to display. - -If you want to use your own emoji list, you can create your own class by implementing the `EmojiProvider` protocol : - -```swift -import Foundation -import EmojiPicker - -final class LimitedEmojiProvider: EmojiProvider { - - func getAll() -> [Emoji] { - return [ - Emoji(value: "🚀", name: "rocket"), - Emoji(value: "🇫🇷", name: "France"), - Emoji(value: "🦄", name: "unicorn"), - Emoji(value: "🍺", name: "beer"), - Emoji(value: "💶", name: "euro") - ] - } - -} -``` - -And then use it in the creation of the view: - -```swift -... -NavigationView { - EmojiPickerView(selectedEmoji: $selectedEmoji, selectedColor: .orange, emojiProvider: LimitedEmojiProvider()) - .padding(.top, 32) - .navigationTitle("Emojis") - .navigationBarTitleDisplayMode(.inline) -} -... -``` - ## Samples You can access to sample project on folder `EmojiPickerSample` diff --git a/Sources/EmojiPicker/EmojiPickerView.swift b/Sources/EmojiPicker/EmojiPickerView.swift index d4c5c4c..edd10f2 100644 --- a/Sources/EmojiPicker/EmojiPickerView.swift +++ b/Sources/EmojiPicker/EmojiPickerView.swift @@ -24,15 +24,13 @@ public struct EmojiPickerView: View { private var search: String = "" private var selectedColor: Color - private var searchEnabled: Bool private let emojiCategories: [AppleEmojiCategory] private let emojiProvider: EmojiProvider - public init(selectedEmoji: Binding, searchEnabled: Bool = false, selectedColor: Color = Color.accentColor, emojiProvider: EmojiProvider = DefaultEmojiProvider()) { + public init(selectedEmoji: Binding, selectedColor: Color = Color.accentColor, emojiProvider: EmojiProvider = DefaultEmojiProvider()) { self._selectedEmoji = selectedEmoji self.selectedColor = selectedColor - self.searchEnabled = searchEnabled self.emojiProvider = emojiProvider self.emojiCategories = emojiProvider.emojiCategories } @@ -54,7 +52,7 @@ public struct EmojiPickerView: View { VStack { ScrollView { LazyVGrid(columns: columns, alignment: .leading) { - if !searchEnabled || search.isEmpty { + if search.isEmpty { ForEach(emojiCategories, id: \.self) { category in Section { ForEach(category.emojis.values, id: \.self) { emoji in @@ -152,6 +150,6 @@ extension AppleEmojiCategory.Name { struct EmojiPickerView_Previews: PreviewProvider { static var previews: some View { - EmojiPickerView(selectedEmoji: .constant(Emoji(value: "", localizedKeywords: [:])), searchEnabled: true) + EmojiPickerView(selectedEmoji: .constant(Emoji(value: "", localizedKeywords: [:]))) } }