From b95ecbb5ab1b2f4219fc3c93973f118032ec43f5 Mon Sep 17 00:00:00 2001 From: HoonBaek Date: Wed, 26 Jan 2022 10:23:57 +0900 Subject: [PATCH 1/5] Block scrolling of body tag when pop-up components appear --- src/ui/ContextMenu/items/EmojiListItems.jsx | 2 ++ src/ui/ContextMenu/items/MenuItems.jsx | 2 ++ src/ui/Modal/index.jsx | 9 ++++++++- 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/ui/ContextMenu/items/EmojiListItems.jsx b/src/ui/ContextMenu/items/EmojiListItems.jsx index 3c6d80777..ce59c6abe 100644 --- a/src/ui/ContextMenu/items/EmojiListItems.jsx +++ b/src/ui/ContextMenu/items/EmojiListItems.jsx @@ -18,11 +18,13 @@ export default class EmojiListItems extends Component { this.setupEvents(); this.getBarPosition(); this.showParent(); + document.body.style.overflow = 'hidden'; } componentWillUnmount() { this.cleanUpEvents(); this.hideParent(); + document.body.style.overflow = 'unset'; } showParent = () => { diff --git a/src/ui/ContextMenu/items/MenuItems.jsx b/src/ui/ContextMenu/items/MenuItems.jsx index c68ee1f75..e2d70cba5 100644 --- a/src/ui/ContextMenu/items/MenuItems.jsx +++ b/src/ui/ContextMenu/items/MenuItems.jsx @@ -16,11 +16,13 @@ export default class MenuItems extends Component { this.setupEvents(); this.getMenuPosition(); this.showParent(); + document.body.style.overflow = 'hidden'; } componentWillUnmount() { this.cleanUpEvents(); this.hideParent(); + document.body.style.overflow = 'unset'; } showParent = () => { diff --git a/src/ui/Modal/index.jsx b/src/ui/Modal/index.jsx index f9e7b7461..07c7b7e82 100644 --- a/src/ui/Modal/index.jsx +++ b/src/ui/Modal/index.jsx @@ -1,4 +1,4 @@ -import React, { useContext } from 'react'; +import React, { useContext, useEffect } from 'react'; import PropTypes from 'prop-types'; import { createPortal } from 'react-dom'; @@ -80,6 +80,13 @@ export default function Modal(props) { hideFooter, type, } = props; + useEffect(() => { + document.body.style.overflow = 'hidden'; + return () => { + document.body.style.overflow = 'unset'; + }; + }, []); + return createPortal((
From b12de8c68c4bfc26e13ff0ad9b233c90fd6957ca Mon Sep 17 00:00:00 2001 From: HoonBaek Date: Wed, 26 Jan 2022 10:25:08 +0900 Subject: [PATCH 2/5] Prevent unexpected scrolling when fetching messages --- .../Conversation/components/ConversationScroll.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/smart-components/Conversation/components/ConversationScroll.jsx b/src/smart-components/Conversation/components/ConversationScroll.jsx index 3baecb8f3..d8d039643 100644 --- a/src/smart-components/Conversation/components/ConversationScroll.jsx +++ b/src/smart-components/Conversation/components/ConversationScroll.jsx @@ -55,8 +55,9 @@ export default class ConversationScroll extends Component { onScroll(([messages]) => { if (messages) { // https://github.com/scabbiaza/react-scroll-position-on-updating-dom + // Set block to nearest to prevent unexpected scrolling from outer components try { - first.scrollIntoView(); + first.scrollIntoView({ block: 'nearest' }); } catch (error) { // } @@ -71,7 +72,7 @@ export default class ConversationScroll extends Component { if (messages) { // https://github.com/scabbiaza/react-scroll-position-on-updating-dom try { - last.scrollIntoView(); + last.scrollIntoView({ block: 'nearest' }); } catch (error) { // } From 3f92e5ff54f33fe72a7e99c3e9bbe1229bce0d86 Mon Sep 17 00:00:00 2001 From: HoonBaek Date: Wed, 26 Jan 2022 10:29:20 +0900 Subject: [PATCH 3/5] Add sample case for when chat app is smaller than page size --- .../App/stories/index.stories.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/smart-components/App/stories/index.stories.js b/src/smart-components/App/stories/index.stories.js index 8f0667f5e..643ffe04d 100644 --- a/src/smart-components/App/stories/index.stories.js +++ b/src/smart-components/App/stories/index.stories.js @@ -376,6 +376,24 @@ const CustomApp = () => { export const customer1 = () => fitPageSize(); +export const customer2 = () => ( +
+
+ +
+
+); + export const disableUserProfile = () => fitPageSize( Date: Tue, 8 Feb 2022 14:39:46 +0900 Subject: [PATCH 4/5] Set overflow value of body tag using className --- src/ui/ContextMenu/index.scss | 4 ++++ src/ui/ContextMenu/items/EmojiListItems.jsx | 9 +++++++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/ui/ContextMenu/index.scss b/src/ui/ContextMenu/index.scss index eb7581bb0..3c40942a4 100644 --- a/src/ui/ContextMenu/index.scss +++ b/src/ui/ContextMenu/index.scss @@ -1,5 +1,9 @@ @import '../../styles/variables'; +body.pop-up { + overflow: hidden !important; +} + .sendbird__offline { .sendbird-dropdown__menu .sendbird-dropdown__menu-item { cursor: not-allowed; diff --git a/src/ui/ContextMenu/items/EmojiListItems.jsx b/src/ui/ContextMenu/items/EmojiListItems.jsx index ce59c6abe..cc16c9506 100644 --- a/src/ui/ContextMenu/items/EmojiListItems.jsx +++ b/src/ui/ContextMenu/items/EmojiListItems.jsx @@ -4,10 +4,13 @@ import PropTypes from 'prop-types'; import SortByRow from '../../SortByRow'; +const EMOJI_LIST_POP_UP = 'sendbird-emoji-list-pop-up'; + export default class EmojiListItems extends Component { constructor(props) { super(props); this.reactionRef = React.createRef(); + this.rootForPopup = document.body; this.state = { reactionStyle: {}, handleClickOutside: () => { }, @@ -18,13 +21,15 @@ export default class EmojiListItems extends Component { this.setupEvents(); this.getBarPosition(); this.showParent(); - document.body.style.overflow = 'hidden'; + // add className to body + this.rootForPopup.className = `${EMOJI_LIST_POP_UP} ${this.rootForPopup.className}`; } componentWillUnmount() { this.cleanUpEvents(); this.hideParent(); - document.body.style.overflow = 'unset'; + // remove className from body + this.rootForPopup.className = this.rootForPopup.className.split(' ').filter((className) => className !== EMOJI_LIST_POP_UP).join(' '); } showParent = () => { From 5d13cc91dda8fd3c149a8f4364015ba01429ef47 Mon Sep 17 00:00:00 2001 From: HoonBaek Date: Tue, 8 Feb 2022 15:07:40 +0900 Subject: [PATCH 5/5] Set overflow value of body tag using className 2 --- src/ui/ContextMenu/index.scss | 3 ++- src/ui/ContextMenu/items/MenuItems.jsx | 9 +++++++-- src/ui/Modal/index.jsx | 5 +++-- src/ui/Modal/index.scss | 4 ++++ 4 files changed, 16 insertions(+), 5 deletions(-) diff --git a/src/ui/ContextMenu/index.scss b/src/ui/ContextMenu/index.scss index 3c40942a4..0a35588af 100644 --- a/src/ui/ContextMenu/index.scss +++ b/src/ui/ContextMenu/index.scss @@ -1,6 +1,7 @@ @import '../../styles/variables'; -body.pop-up { +body.sendbird-emoji-list-pop-up, +body.sendbird-menu-items-pop-up { overflow: hidden !important; } diff --git a/src/ui/ContextMenu/items/MenuItems.jsx b/src/ui/ContextMenu/items/MenuItems.jsx index e2d70cba5..1828666cb 100644 --- a/src/ui/ContextMenu/items/MenuItems.jsx +++ b/src/ui/ContextMenu/items/MenuItems.jsx @@ -2,10 +2,13 @@ import React, { Component } from 'react'; import { createPortal } from 'react-dom'; import PropTypes from 'prop-types'; +const MENU_ITEMS_POP_UP = 'sendbird-menu-items-pop-up'; + export default class MenuItems extends Component { constructor(props) { super(props); this.menuRef = React.createRef(); + this.rootForPopup = document.body; this.state = { menuStyle: {}, handleClickOutside: () => { }, @@ -16,13 +19,15 @@ export default class MenuItems extends Component { this.setupEvents(); this.getMenuPosition(); this.showParent(); - document.body.style.overflow = 'hidden'; + // add className to body + this.rootForPopup.className = `${MENU_ITEMS_POP_UP} ${this.rootForPopup.className}`; } componentWillUnmount() { this.cleanUpEvents(); this.hideParent(); - document.body.style.overflow = 'unset'; + // remove className from body + this.rootForPopup.className = this.rootForPopup.className.split(' ').filter((className) => className !== MENU_ITEMS_POP_UP).join(' '); } showParent = () => { diff --git a/src/ui/Modal/index.jsx b/src/ui/Modal/index.jsx index 07c7b7e82..2b43e2998 100644 --- a/src/ui/Modal/index.jsx +++ b/src/ui/Modal/index.jsx @@ -80,10 +80,11 @@ export default function Modal(props) { hideFooter, type, } = props; + const { body } = document; useEffect(() => { - document.body.style.overflow = 'hidden'; + body.className = `sendbird-modal-pop-up ${body.className}`; return () => { - document.body.style.overflow = 'unset'; + body.className = body.className.split(' ').filter((className) => className !== 'sendbird-modal-pop-up').join(' '); }; }, []); diff --git a/src/ui/Modal/index.scss b/src/ui/Modal/index.scss index b973475be..b9c355ae3 100644 --- a/src/ui/Modal/index.scss +++ b/src/ui/Modal/index.scss @@ -61,3 +61,7 @@ background-color: t(overlay-2); } } + +body.sendbird-modal-pop-up { + overflow: hidden !important; +}