-
Notifications
You must be signed in to change notification settings - Fork 274
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(emoji-mart): simplify EmojiPicker & emojiSearchIndex (#2117)
Fixes: #2116 Fixes: #2094 BREAKING CHANGE: `EmojiPicker` & `EmojiIndex` signatures changed, `EmojiIndex` has been renamed to `emojiSearchIndex`, both `EmojiPicker` & `emojiSearchIndex` are now optional, see [release guide](https://github.com/GetStream/stream-chat-react/blob/v11.0.0/docusaurus/docs/React/release-guides/upgrade-to-v11.mdx) for more information BREAKING CHANGE: `useImageFlagEmojisOnWindow` flag now requires extra style sheet import, see [release guide](https://github.com/GetStream/stream-chat-react/blob/v11.0.0/docusaurus/docs/React/release-guides/upgrade-to-v11.mdx) for more information
- Loading branch information
1 parent
14bef23
commit a6e0a87
Showing
61 changed files
with
811 additions
and
998 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| --- | ||
| id: emoji-picker-v11 | ||
| sidebar_position: 3 | ||
| title: EmojiPicker 11.0.0 | ||
| keywords: [migration guide, upgrade, emoji picker, breaking changes, v11] | ||
| --- | ||
|
|
||
| import GHComponentLink from '../_docusaurus-components/GHComponentLink'; | ||
|
|
||
| ## Dropping support for built-in `EmojiPicker` | ||
|
|
||
| By default - our SDK would ship with `emoji-mart` dependency on top of which our `EmojiPicker` component is built. And since the SDK is using `emoji-mart` for this component - it was also reused for reactions (`ReactionsList` and `ReactionSelector`) and suggestion list (`MessageInput`). This solution proved to be very uncomfortable to work with when it came to replacing either of the mentioned components (or disabling them completely) and the final applications using our SDK would still bundle certain `emoji-mart` parts which weren't needed (or seemingly "disabled") resulting in sub-optimal load times. Maintaining such architecture became a burden so we're switching things a bit. | ||
|
|
||
| ## Changes to the default component composition (architecture) | ||
|
|
||
| SDK's `EmojiPicker` component now comes as two-part "bundle" - a button and an actual picker element. The component now holds its own `open` state which is handled by clicking the button (or anywhere else to close it). | ||
|
|
||
| ## Switching to opt-in mechanism (BREAKING CHANGE) | ||
|
|
||
| We made `emoji-mart` package in our SDK completely optional which means that `EmojiPicker` component is now disabled by default. | ||
|
|
||
| ### Reinstate the `EmojiPicker` component | ||
|
|
||
| To reinstate the previous behavior you'll have to add `emoji-mart` to your packages and make sure the packages come with versions that fit our peer-dependency requirements: | ||
|
|
||
| ```bash | ||
| yarn add emoji-mart @emoji-mart/data @emoji-mart/react | ||
| ``` | ||
|
|
||
| Import `EmojiPicker` component from the `stream-chat-react` package: | ||
|
|
||
| ```tsx | ||
| import { Channel } from 'stream-chat-react'; | ||
| import { EmojiPicker } from 'stream-chat-react/emojis'; | ||
|
|
||
| // and apply it to the Channel (component context) | ||
|
|
||
| const WrappedChannel = ({ children }) => { | ||
| return <Channel EmojiPicker={EmojiPicker}>{children}</Channel>; | ||
| }; | ||
| ``` | ||
|
|
||
| ### Build your custom `EmojiPicker` (with example) | ||
|
|
||
| If `emoji-mart` is too heavy for your use-case and you'd like to build your own you can certainly do so, here's a very simple `EmojiPicker` example built using `emoji-picker-react` package: | ||
|
|
||
| ```tsx | ||
| import EmojiPicker from 'emoji-picker-react'; | ||
| import { useMessageInputContext } from 'stream-chat-react'; | ||
|
|
||
| export const CustomEmojiPicker = () => { | ||
| const [open, setOpen] = useState(false); | ||
|
|
||
| const { insertText, textareaRef } = useMessageInputContext(); | ||
|
|
||
| return ( | ||
| <> | ||
| <button onClick={() => setOpen((isOpen) => !isOpen)}>Open EmojiPicker</button> | ||
|
|
||
| {open && ( | ||
| <EmojiPicker | ||
| onEmojiClick={(emoji, event) => { | ||
| insertText(emoji.native); | ||
| textareaRef.current?.focus(); // returns focus back to the message input element | ||
| }} | ||
| /> | ||
| )} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| // and pass it down to the `Channel` component | ||
| ``` | ||
|
|
||
| You can make the component slightly better using [`FloatingUI`](https://floating-ui.com/) by wrapping the actual picker element to make it float perfectly positioned above the button. See the source of the <GHComponentLink text="EmojiPicker" branch="feat/emoji-picker-delete" as="code" path="/Emojis/EmojiPicker.tsx" /> component which comes with the SDK for inspiration. | ||
|
|
||
| ## Old `emoji-mart` (v3.0.1) | ||
|
|
||
| Even though it's not explicitly provided by our SDK anymore, it's still possible for our integrators to use older version of the `emoji-mart` - specifically version `3.0.1` on top of which our old components were built. We don't recommend using old version of the `emoji-mart` but if you really need to, follow the [`3.0.1` documentation](https://github.com/missive/emoji-mart/tree/v3.0.1#picker) in combination with the previous guide to build your own `EmojiPicker` component with the old `emoji-mart` API. Beware though, if you wish to use slightly modified `emoji-mart` CSS previously supplied by our SDK by default in the main `index.css` file, you'll now have to explicitly import it: | ||
|
|
||
| ```tsx | ||
| import 'stream-chat-react/css/v2/index.css'; | ||
| import 'stream-chat-react/css/v2/emoji-mart.css'; | ||
| ``` |
Oops, something went wrong.