From 706cf3ddf9d4329b869f8058f041ec6595b51a9e Mon Sep 17 00:00:00 2001 From: Matvei Andrienko Date: Wed, 21 Feb 2024 10:20:02 +0100 Subject: [PATCH] fix: prevent layout shifts in reactions modal (#2272) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🚂 https://github.com/GetStream/stream-chat-css/pull/270 ### To-Do - [x] Release and bump updated CSS --- .../React/release-guides/upgrade-to-v11.mdx | 10 ++++- package.json | 2 +- .../Reactions/ReactionsListModal.tsx | 4 +- src/components/Reactions/SpriteImage.tsx | 40 +++++++++++-------- src/components/Reactions/StreamEmoji.tsx | 6 ++- .../Reactions/hooks/useFetchReactions.ts | 2 +- yarn.lock | 8 ++-- 7 files changed, 46 insertions(+), 26 deletions(-) diff --git a/docusaurus/docs/React/release-guides/upgrade-to-v11.mdx b/docusaurus/docs/React/release-guides/upgrade-to-v11.mdx index d9db8d0ce..612d35259 100644 --- a/docusaurus/docs/React/release-guides/upgrade-to-v11.mdx +++ b/docusaurus/docs/React/release-guides/upgrade-to-v11.mdx @@ -9,7 +9,7 @@ import GHComponentLink from '../_docusaurus-components/GHComponentLink'; ## Introducing new reactions -When it came to developer experience regarding customization of the reaction components our team noticed that our integrators generally strugled to make more advanced adjustments to reactions without having to rebuild the whole [component set](../components/message-components/reactions.mdx). The whole process has been quite unintuitive and that's why this update aims at making adjusting your reactions much easier. +When it came to developer experience regarding customization of the reaction components our team noticed that our integrators generally struggled to make more advanced adjustments to reactions without having to rebuild the whole [component set](../components/message-components/reactions.mdx). The whole process has been quite unintuitive and that's why this update aims at making adjusting your reactions much easier. ### Main reasons for a revamp @@ -52,6 +52,14 @@ Beware that sixth reaction type `angry` has been removed in this update, if you ### Custom reaction types and components +The default component is rendered with the fixed size. You can change the size of the rendered emoji using `--str-chat__stream-emoji-size` CSS variable: + +```tsx +
+ +
+``` + It's possible to supply your own reaction types and components to represent such reactions - let's implement reaction of type `rick_roll` to render a Rick Roll GIF and define override for default type `love`: ```tsx diff --git a/package.json b/package.json index a89ebb129..0c9cbac30 100644 --- a/package.json +++ b/package.json @@ -144,7 +144,7 @@ "@semantic-release/changelog": "^6.0.2", "@semantic-release/git": "^10.0.1", "@stream-io/rollup-plugin-node-builtins": "^2.1.5", - "@stream-io/stream-chat-css": "^4.7.0", + "@stream-io/stream-chat-css": "^4.7.1", "@testing-library/jest-dom": "^6.1.4", "@testing-library/react": "^13.1.1", "@testing-library/react-hooks": "^8.0.0", diff --git a/src/components/Reactions/ReactionsListModal.tsx b/src/components/Reactions/ReactionsListModal.tsx index 4ae047c8b..60fc9186e 100644 --- a/src/components/Reactions/ReactionsListModal.tsx +++ b/src/components/Reactions/ReactionsListModal.tsx @@ -59,7 +59,7 @@ export function ReactionsListModal({ key={reactionType} onClick={() => onSelectedReactionTypeChange?.(reactionType)} > - +   @@ -69,7 +69,7 @@ export function ReactionsListModal({ )} {SelectedEmojiComponent && ( -
+
)} diff --git a/src/components/Reactions/SpriteImage.tsx b/src/components/Reactions/SpriteImage.tsx index 415824812..a8a959451 100644 --- a/src/components/Reactions/SpriteImage.tsx +++ b/src/components/Reactions/SpriteImage.tsx @@ -9,6 +9,7 @@ export type SpriteImageProps = { spriteUrl: string; fallback?: React.ReactNode; height?: number; + style?: React.CSSProperties; width?: number; }; @@ -19,6 +20,7 @@ export const SpriteImage = ({ position, rows, spriteUrl, + style, width, }: SpriteImageProps) => { const [[spriteWidth, spriteHeight], setSpriteDimensions] = useState([0, 0]); @@ -28,28 +30,34 @@ export const SpriteImage = ({ }, [spriteUrl]); const [x, y] = position; - const spriteItemWidth = spriteWidth / columns; - const spriteItemHeight = spriteHeight / rows; - - let resizeRatio = 1; - - if (!width && height) resizeRatio = height / spriteItemHeight; - if (width && !height) resizeRatio = width / spriteItemWidth; - - if (resizeRatio === Infinity) resizeRatio = 1; if (!spriteHeight || !spriteWidth) return <>{fallback}; return (
); }; diff --git a/src/components/Reactions/StreamEmoji.tsx b/src/components/Reactions/StreamEmoji.tsx index 04277fd80..fcceee011 100644 --- a/src/components/Reactions/StreamEmoji.tsx +++ b/src/components/Reactions/StreamEmoji.tsx @@ -26,10 +26,14 @@ export const StreamEmoji = ({ ); }; diff --git a/src/components/Reactions/hooks/useFetchReactions.ts b/src/components/Reactions/hooks/useFetchReactions.ts index 02372282d..9274d33b6 100644 --- a/src/components/Reactions/hooks/useFetchReactions.ts +++ b/src/components/Reactions/hooks/useFetchReactions.ts @@ -16,9 +16,9 @@ export function useFetchReactions< const { handleFetchReactions: contextHandleFetchReactions, } = useMessageContext('useFetchReactions'); - const [isLoading, setIsLoading] = useState(false); const [reactions, setReactions] = useState([]); const { handleFetchReactions: propHandleFetchReactions, shouldFetch } = options; + const [isLoading, setIsLoading] = useState(shouldFetch); const handleFetchReactions = propHandleFetchReactions ?? contextHandleFetchReactions; useEffect(() => { diff --git a/yarn.lock b/yarn.lock index e05e9308e..0e00aec66 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2186,10 +2186,10 @@ crypto-browserify "^3.11.0" process-es6 "^0.11.2" -"@stream-io/stream-chat-css@^4.7.0": - version "4.7.0" - resolved "https://registry.yarnpkg.com/@stream-io/stream-chat-css/-/stream-chat-css-4.7.0.tgz#9fb46d19268b9401a1f3040e11a6a6e1c2b85f7a" - integrity sha512-23QmqoZJ3jdz4SQ+HQvHj2D7It3PgQ9xv1rbnjjWnnYVUWxojFhvqw0+f7j+Gh2hjHpJrBZel4lZDQHiK3uQ9g== +"@stream-io/stream-chat-css@^4.7.1": + version "4.7.1" + resolved "https://registry.yarnpkg.com/@stream-io/stream-chat-css/-/stream-chat-css-4.7.1.tgz#82e058a3cf9031852875266f4c7cc1029e8cb193" + integrity sha512-Vshgw6VyZU/TtxfXb/gAxWhfgq3Pc0yTPutqHXWCI1qvFfma+ZgyA0AlAu3zqwHP60ubeUJZ0W01/qL/9u7Avg== "@stream-io/transliterate@^1.5.5": version "1.5.5"