Update README and fix minor search issue
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 504 KiB After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 312 KiB After Width: | Height: | Size: 696 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 290 KiB |
133
README.md
133
README.md
@@ -1,62 +1,73 @@
|
|||||||

|
# 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, ...).
|
## Screenshots
|
||||||
|
|
||||||
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
|
|
||||||
|
|
||||||
|Emoji list|Emoji search|
|
|Emoji list|Emoji search|
|
||||||
|---|---|
|
|---|---|
|
||||||
|||
|
|||
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
## Dependencies
|
## Dependencies
|
||||||
|
|
||||||
- SwiftUI (iOS >= 15.0)
|
- SwiftUI (iOS >= 15.0)
|
||||||
- [EmojiKit](https://github.com/tyiu/EmojiKit) (`719d405244ea9ef462867c16e3d3254b7386b71f`)
|
- [EmojiKit](https://github.com/tyiu/EmojiKit) (0.1.0)
|
||||||
- [SwiftTrie](https://github.com/tyiu/swift-trie) (1.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
|
```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
|
```swift
|
||||||
import EmojiPicker
|
import EmojiPicker
|
||||||
```
|
```
|
||||||
|
|
||||||
You then have the option of using the `EmojiPickerView`. This view represents the list of selectable emojis.
|
Then add `EmojiPickerView` as a view. Here is a complete example:
|
||||||
|
|
||||||
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:
|
|
||||||
|
|
||||||
```swift
|
```swift
|
||||||
import SwiftUI
|
import SwiftUI
|
||||||
import EmojiPicker
|
import EmojiPicker
|
||||||
|
import EmojiKit
|
||||||
|
|
||||||
struct ContentView: View {
|
struct ContentView: View {
|
||||||
|
|
||||||
@@ -71,20 +82,22 @@ struct ContentView: View {
|
|||||||
VStack {
|
VStack {
|
||||||
Text(selectedEmoji?.value ?? "")
|
Text(selectedEmoji?.value ?? "")
|
||||||
.font(.largeTitle)
|
.font(.largeTitle)
|
||||||
Text(selectedEmoji?.name ?? "")
|
Text(selectedEmoji?.localizedKeywords["en"]?.joined(separator: ", ") ?? "")
|
||||||
.font(.title3)
|
.font(.title3)
|
||||||
}
|
}
|
||||||
.padding(8)
|
.padding(8)
|
||||||
Button {
|
Button {
|
||||||
displayEmojiPicker = true
|
displayEmojiPicker = true
|
||||||
} label: {
|
} label: {
|
||||||
Text("Select emoji")
|
Text("Select standard emoji")
|
||||||
}
|
}
|
||||||
|
.buttonStyle(.borderedProminent)
|
||||||
}
|
}
|
||||||
.padding()
|
.padding()
|
||||||
.sheet(isPresented: $displayEmojiPicker) {
|
.sheet(isPresented: $displayEmojiPicker) {
|
||||||
NavigationView {
|
NavigationView {
|
||||||
EmojiPickerView(selectedEmoji: $selectedEmoji, selectedColor: .orange)
|
EmojiPickerView(selectedEmoji: $selectedEmoji, selectedColor: .orange)
|
||||||
|
.padding(.top, 32)
|
||||||
.navigationTitle("Emojis")
|
.navigationTitle("Emojis")
|
||||||
.navigationBarTitleDisplayMode(.inline)
|
.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)
|
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
|
## Samples
|
||||||
|
|
||||||
You can access to sample project on folder `EmojiPickerSample`
|
You can access to sample project on folder `EmojiPickerSample`
|
||||||
|
|||||||
@@ -24,15 +24,13 @@ public struct EmojiPickerView: View {
|
|||||||
private var search: String = ""
|
private var search: String = ""
|
||||||
|
|
||||||
private var selectedColor: Color
|
private var selectedColor: Color
|
||||||
private var searchEnabled: Bool
|
|
||||||
|
|
||||||
private let emojiCategories: [AppleEmojiCategory]
|
private let emojiCategories: [AppleEmojiCategory]
|
||||||
private let emojiProvider: EmojiProvider
|
private let emojiProvider: EmojiProvider
|
||||||
|
|
||||||
public init(selectedEmoji: Binding<Emoji?>, searchEnabled: Bool = false, selectedColor: Color = Color.accentColor, emojiProvider: EmojiProvider = DefaultEmojiProvider()) {
|
public init(selectedEmoji: Binding<Emoji?>, selectedColor: Color = Color.accentColor, emojiProvider: EmojiProvider = DefaultEmojiProvider()) {
|
||||||
self._selectedEmoji = selectedEmoji
|
self._selectedEmoji = selectedEmoji
|
||||||
self.selectedColor = selectedColor
|
self.selectedColor = selectedColor
|
||||||
self.searchEnabled = searchEnabled
|
|
||||||
self.emojiProvider = emojiProvider
|
self.emojiProvider = emojiProvider
|
||||||
self.emojiCategories = emojiProvider.emojiCategories
|
self.emojiCategories = emojiProvider.emojiCategories
|
||||||
}
|
}
|
||||||
@@ -54,7 +52,7 @@ public struct EmojiPickerView: View {
|
|||||||
VStack {
|
VStack {
|
||||||
ScrollView {
|
ScrollView {
|
||||||
LazyVGrid(columns: columns, alignment: .leading) {
|
LazyVGrid(columns: columns, alignment: .leading) {
|
||||||
if !searchEnabled || search.isEmpty {
|
if search.isEmpty {
|
||||||
ForEach(emojiCategories, id: \.self) { category in
|
ForEach(emojiCategories, id: \.self) { category in
|
||||||
Section {
|
Section {
|
||||||
ForEach(category.emojis.values, id: \.self) { emoji in
|
ForEach(category.emojis.values, id: \.self) { emoji in
|
||||||
@@ -152,6 +150,6 @@ extension AppleEmojiCategory.Name {
|
|||||||
|
|
||||||
struct EmojiPickerView_Previews: PreviewProvider {
|
struct EmojiPickerView_Previews: PreviewProvider {
|
||||||
static var previews: some View {
|
static var previews: some View {
|
||||||
EmojiPickerView(selectedEmoji: .constant(Emoji(value: "", localizedKeywords: [:])), searchEnabled: true)
|
EmojiPickerView(selectedEmoji: .constant(Emoji(value: "", localizedKeywords: [:])))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user