feat: add centralized dialog management #2489
Merged
Conversation
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
MartinCupela
requested review from
oliverlaz,
myandrienko and
arnautov-anton
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #2489 +/- ##
==========================================
+ Coverage 86.24% 86.53% +0.28%
==========================================
Files 384 392 +8
Lines 8107 8191 +84
Branches 1955 1961 +6
==========================================
+ Hits 6992 7088 +96
+ Misses 1024 1015 -9
+ Partials 91 88 -3 ☔ View full report in Codecov by Sentry. |
myandrienko
reviewed
Sep 9, 2024
|
Size Change: +5.37 kB (+0.51%) Total Size: 1.06 MB
ℹ️ View Unchanged
|
Co-authored-by: Anton Arnautov <[email protected]>
MartinCupela
force-pushed
the
feat/dialogs-manager
branch
from
d3133b8
to
a344533
Compare
myandrienko
approved these changes
Sep 16, 2024
# Conflicts: # docusaurus/sidebars-react.json
oliverlaz
approved these changes
Sep 16, 2024
github-actions bot
pushed a commit
that referenced
this pull request
Sep 16, 2024
## [12.0.0-rc.15](v12.0.0-rc.14...v12.0.0-rc.15) (2024-09-16) ### ⚠ BREAKING CHANGES * - own user will not anymore be filtered out of the selection list of users to mention if `mentionAllAppUsers` is enabled on MessageInput * - removes the following variables from `MessageContext`: isReactionEnabled, onReactionListClick, showDetailedReactions, reactionSelectorRef - removes prop `messageWrapperRef` from `MessageOptions` and `MessageActions` props. ### Bug Fixes * remove the use of deprecated query operator $ne ([#2504](#2504)) ([09614f6](09614f6)) * update ChannelHeader and ChannelPreview titles and images on channel.updated ([#2500](#2500)) ([f32fbb6](f32fbb6)) ### Features * add centralized dialog management ([#2489](#2489)) ([8235d45](8235d45))
|
🎉 This PR is included in version 12.0.0-rc.15 🎉 The release is available on: Your semantic-release bot 📦🚀 |
github-actions bot
pushed a commit
that referenced
this pull request
Sep 17, 2024
## [12.0.0](v11.23.9...v12.0.0) (2024-09-17) ### ⚠ BREAKING CHANGES * - own user will not anymore be filtered out of the selection list of users to mention if `mentionAllAppUsers` is enabled on MessageInput * - removes the following variables from `MessageContext`: isReactionEnabled, onReactionListClick, showDetailedReactions, reactionSelectorRef - removes prop `messageWrapperRef` from `MessageOptions` and `MessageActions` props. * ComponentContext no longer provides any defaults * removed Thread prop fullWidth, removed class str-chat__thread--full * removed Window prop hideOnThread, replaced class str-chat__main-panel--hideOnThread with str-chat__main-panel--thread-open * MP3 audio encoder has to be explicitly imported and used as a plugin for audio recordings. The default audio recording format is audio/wav. * @breezystack/lamejs became a peer dependency and has to be installed by the integrator so that the MP3 audio encoder can work properly. * Removed fileOrder, imageOrder, fileUploads, imageUploads, uploadFile, uploadImage, removeFile, removeImage from the MessageInputContext. Use attachments, uploadAttachment, uploadNewFiles, upsertAttachments, removeAttachments instead. * Removed default values for timestamp formatting props like calendar or format for DateSeparator, EventComponent, MessageTimestamp. The formatting configuration now entirely relies on i18n translations. * The VirtualizedMessageList does not provide default Footer component * The VirtualizedMessageList markup has changed as TypingIndicator is rendered as a child of MessageListMainPanel * stylesheet import path changed & v1 stylesheet has been dropped, see release guide for more information * theme v1 related markup and classNames have been removed * `themeVersion` property has been removed from `ChatContext` ### Bug Fixes * add theme to ChatView component ([#2494](#2494)) ([d477072](d477072)) * address the circular dependencies among TranslationContext and Streami18n ([#2483](#2483)) ([b91fd9a](b91fd9a)) * change platform for CJS bundle from node to browser ([#2454](#2454)) ([4bc2d35](4bc2d35)) * do not rerender on client options update ([#2465](#2465)) ([3899352](3899352)) * export typeVersions correctly for emojis and mp3-encoder ([#2449](#2449)) ([17218db](17218db)) * extract MP3 encoder plugin ([#2447](#2447)) ([625196f](625196f)) * provide both browser and node cjs bundles ([#2457](#2457)) ([273ea2a](273ea2a)) * quote replies in threads ([#2487](#2487)) ([0e4a6f1](0e4a6f1)) * remove the use of deprecated query operator $ne ([#2504](#2504)) ([09614f6](09614f6)) * render typing indicator outside the VirtualizedMessageList scroll container ([#2406](#2406)) ([d9442d2](d9442d2)) * reuse useChannelPreviewInfo for ThreadListItemUI ([#2508](#2508)) ([4bb5b7c](4bb5b7c)) * update ChannelHeader and ChannelPreview titles and images on channel.updated ([#2500](#2500)) ([f32fbb6](f32fbb6)) ### Features * add centralized dialog management ([#2489](#2489)) ([8235d45](8235d45)) * add ThreadList and ThreadProvider (Threads 2.0) ([#2407](#2407)) ([941707d](941707d)) * keep attachments array and remove file and image uploads in MessageInput state ([#2445](#2445)) ([238e801](238e801)) * remove default timestamp formatting props from DateSeparator, EventComponent, MessageTimestamp ([#2442](#2442)) ([6431954](6431954)) * remove fullWidth prop from Thread & hideOnThread prop from Window ([#2450](#2450)) ([32c8fc0](32c8fc0)) * remove legacy style components ([#2394](#2394)) ([7bf63ae](7bf63ae)) ### Chores * **deps:** bump @stream-io/stream-chat-css to version 5.0.0 ([9580a3f](9580a3f)) * **deps:** bump @stream-io/stream-chat-css to version 5.0.0-rc.1nvm ([e9cf42f](e9cf42f)) * **deps:** bump stream-chat to version 8.40.8 ([#2510](#2510)) ([5cc7a09](5cc7a09)) * **deps:** remove unused isomorphic-ws from dependencies ([853bd8b](853bd8b)) * **deps:** upgrade @stream-io/stream-chat-css to v5.0.0-rc.4 ([#2492](#2492)) ([6e30cb5](6e30cb5)) * **deps:** upgrade @stream-io/stream-chat-css to v5.0.0-rc.5 ([#2495](#2495)) ([2b8fa32](2b8fa32))
|
🎉 This PR is included in version 12.0.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Submit a pull request
🎯 Goal
Add interface to control opening and closing of dialogs from anywhere in the context.
Closes #2022
Fixes #2317
Depends on GetStream/stream-chat-css#308
🛠 Implementation details
Dialogs are managed within
DialogsManagerContextprovided byDialogsManagerProviderand providesDialogsManagersingleton. This singleton provides an API to retrieve and control individualDialoginstances. It also allows to subscribe to itsstatechanges.Dialoginstances can be accessed by id viauseDialog()hook. The instance has the following API:open- enables Dialog.isOpen flagclose- disables Dialog.isOpen flagremove- removes the Dialog instance from the statetoggle- toggles open/close stateIntroduced utility hooks:
useDialogIsOpen()- allows to observe the open state of a particularDialoginstanceuseDialog- retrieves a dialog object that exposes API to manage ituseOpenedDialogCount- allows to observe changes in open dialog countA component that is to be rendered as a dialog should be rendered as a child of
DialogAnchorcomponent. This component uses popper to calculate dialog positioning relative to given reference element and renders it via React portal dedicated to theDialogManagersingleton. The portal destination is rendered as a child ofDialogManagerProviderand is uniquely identified for the given provider. The portal destination renders the teleported component on an overlay. If the overlay is clicked all the dialogs in context are closed.Features:
🎨 UI Changes