Skip to content

Commit 17ba9b2

Browse files
HoonBaekHoonBaek
authored
fix: Scroll issue in the member list of the Modal (#1013)
### ChangeLog & Fix * Fixed a specific environment issue (Android emulator) - Resolved an issue in modals used in ChannelSettings such as MembersModal, MutedMembersModal, OperatorsModal, BannedUsersModal, where even when scrolling to the end, additional members were not fetched * Fixed a specific environment issue (Safari) - Similarly addressed an issue within lists inside modals, where overflow occurred instead of scrolling * Deprecated the `onClick` prop in `UserListItem` and added `onUserAvatarClick`. The deprecated prop will be removed in the next major version
1 parent 86871ea commit 17ba9b2

File tree

8 files changed

+69
-93
lines changed

8 files changed

+69
-93
lines changed

‎src/modules/ChannelSettings/components/ModerationPanel/BannedUsersModal.tsx‎

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import ContextMenu, { MenuItem, MenuItems } from '../../../../ui/ContextMenu';
1313
import { noop } from '../../../../utils/utils';
1414
import { useChannelSettingsContext } from '../../context/ChannelSettingsProvider';
1515
import { useLocalization } from '../../../../lib/LocalizationContext';
16+
import { useOnScrollPositionChangeDetector } from '../../../../hooks/useOnScrollReachedEndDetector';
1617

1718
interface Props {
1819
onCancel(): void;
@@ -44,24 +45,21 @@ export default function BannedUsersModal({
4445
>
4546
<div
4647
className="sendbird-more-members__popup-scroll"
47-
onScroll={(e) => {
48-
const { hasNext } = memberQuery;
49-
const target = e.target as HTMLTextAreaElement;
50-
const fetchMore = (
51-
target.clientHeight + target.scrollTop === target.scrollHeight
52-
);
53-
54-
if (hasNext && fetchMore) {
55-
memberQuery.next().then((o) => {
56-
setMembers([
57-
...members,
58-
...o,
59-
]);
60-
});
61-
}
62-
}}
48+
onScroll={useOnScrollPositionChangeDetector({
49+
onReachedBottom: async () => {
50+
const { hasNext } = memberQuery;
51+
if (hasNext) {
52+
memberQuery.next().then((o) => {
53+
setMembers([
54+
...members,
55+
...o,
56+
]);
57+
});
58+
}
59+
},
60+
})}
6361
>
64-
{ members.map((member) => (
62+
{members.map((member) => (
6563
<UserListItem
6664
user={member}
6765
key={member.userId}

‎src/modules/ChannelSettings/components/ModerationPanel/MembersModal.tsx‎

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import React, {
44
useEffect,
55
useState,
66
} from 'react';
7+
import type { Member } from '@sendbird/chat/groupChannel';
8+
import { Role } from '@sendbird/chat';
79

810
import Modal from '../../../../ui/Modal';
911
import UserListItem from '../../../../ui/UserListItem';
@@ -15,8 +17,7 @@ import { noop } from '../../../../utils/utils';
1517
import { useChannelSettingsContext } from '../../context/ChannelSettingsProvider';
1618
import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
1719
import { LocalizationContext } from '../../../../lib/LocalizationContext';
18-
import { Member } from '@sendbird/chat/groupChannel';
19-
import { Role } from '@sendbird/chat';
20+
import { useOnScrollPositionChangeDetector } from '../../../../hooks/useOnScrollReachedEndDetector';
2021

2122
interface Props {
2223
onCancel(): void;
@@ -51,22 +52,19 @@ export default function MembersModal({ onCancel }: Props): ReactElement {
5152
>
5253
<div
5354
className="sendbird-more-members__popup-scroll"
54-
onScroll={(e) => {
55-
const { hasNext } = memberQuery;
56-
const target = e.target as HTMLTextAreaElement;
57-
const fetchMore = (
58-
target.clientHeight + target.scrollTop === target.scrollHeight
59-
);
60-
61-
if (hasNext && fetchMore) {
62-
memberQuery.next().then((o) => {
63-
setMembers([
64-
...members,
65-
...o,
66-
]);
67-
});
68-
}
69-
}}
55+
onScroll={useOnScrollPositionChangeDetector({
56+
onReachedBottom: async () => {
57+
const { hasNext } = memberQuery;
58+
if (hasNext) {
59+
memberQuery.next().then((o) => {
60+
setMembers([
61+
...members,
62+
...o,
63+
]);
64+
});
65+
}
66+
},
67+
})}
7068
>
7169
{
7270
members.map((member: Member) => (

‎src/modules/ChannelSettings/components/ModerationPanel/MutedMembersModal.tsx‎

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { noop } from '../../../../utils/utils';
1313
import { useChannelSettingsContext } from '../../context/ChannelSettingsProvider';
1414
import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
1515
import { useLocalization } from '../../../../lib/LocalizationContext';
16+
import { useOnScrollPositionChangeDetector } from '../../../../hooks/useOnScrollReachedEndDetector';
1617

1718
interface Props {
1819
onCancel(): void;
@@ -51,24 +52,21 @@ export default function MutedMembersModal({
5152
>
5253
<div
5354
className="sendbird-more-members__popup-scroll"
54-
onScroll={(e) => {
55-
const { hasNext } = memberQuery;
56-
const target = e.target as HTMLTextAreaElement;
57-
const fetchMore = (
58-
target.clientHeight + target.scrollTop === target.scrollHeight
59-
);
60-
61-
if (hasNext && fetchMore) {
62-
memberQuery.next().then((o) => {
63-
setMembers([
64-
...members,
65-
...o,
66-
]);
67-
});
68-
}
69-
}}
55+
onScroll={useOnScrollPositionChangeDetector({
56+
onReachedBottom: async () => {
57+
const { hasNext } = memberQuery;
58+
if (hasNext) {
59+
memberQuery.next().then((o) => {
60+
setMembers([
61+
...members,
62+
...o,
63+
]);
64+
});
65+
}
66+
},
67+
})}
7068
>
71-
{ members.map((member) => (
69+
{members.map((member) => (
7270
<UserListItem
7371
currentUser={currentUser}
7472
user={member}

‎src/modules/ChannelSettings/components/ModerationPanel/OperatorsModal.tsx‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import ContextMenu, { MenuItem, MenuItems } from '../../../../ui/ContextMenu';
1414
import { useChannelSettingsContext } from '../../context/ChannelSettingsProvider';
1515
import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
1616
import { LocalizationContext } from '../../../../lib/LocalizationContext';
17+
import { useOnScrollPositionChangeDetector } from '../../../../hooks/useOnScrollReachedEndDetector';
1718

1819
interface Props { onCancel?(): void }
1920

@@ -45,22 +46,19 @@ export default function OperatorsModal({ onCancel }: Props): ReactElement {
4546
>
4647
<div
4748
className="sendbird-more-members__popup-scroll"
48-
onScroll={(e) => {
49-
const { hasNext } = operatorQuery;
50-
const target = e.target as HTMLTextAreaElement;
51-
const fetchMore = (
52-
target.clientHeight + target.scrollTop === target.scrollHeight
53-
);
54-
55-
if (hasNext && fetchMore) {
56-
operatorQuery.next().then((o) => {
57-
setOperators([
58-
...operators,
59-
...o,
60-
]);
61-
});
62-
}
63-
}}
49+
onScroll={useOnScrollPositionChangeDetector({
50+
onReachedBottom: async () => {
51+
const { hasNext } = operatorQuery;
52+
if (hasNext) {
53+
operatorQuery.next().then((o) => {
54+
setOperators([
55+
...operators,
56+
...o,
57+
]);
58+
});
59+
}
60+
},
61+
})}
6462
>
6563
{operators.map((member) => (
6664
<UserListItem

‎src/modules/ChannelSettings/components/ModerationPanel/index.tsx‎

Lines changed: 4 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -65,11 +65,7 @@ export default function AdminPannel(): ReactElement {
6565
</Label>
6666
</>
6767
)}
68-
renderContent={() => (
69-
<>
70-
<OperatorList />
71-
</>
72-
)}
68+
renderContent={() => <OperatorList />}
7369
/>
7470
<Accordion
7571
className="sendbird-channel-settings__members-list"
@@ -92,11 +88,7 @@ export default function AdminPannel(): ReactElement {
9288
<Badge count={kFormatter(channel?.memberCount)} />
9389
</>
9490
)}
95-
renderContent={() => (
96-
<>
97-
<MemberList />
98-
</>
99-
)}
91+
renderContent={() => <MemberList />}
10092
/>
10193
{
10294
// No muted members in broadcast channel
@@ -121,11 +113,7 @@ export default function AdminPannel(): ReactElement {
121113
</Label>
122114
</>
123115
)}
124-
renderContent={() => (
125-
<>
126-
<MutedMemberList />
127-
</>
128-
)}
116+
renderContent={() => <MutedMemberList />}
129117
/>
130118
)
131119
}
@@ -149,11 +137,7 @@ export default function AdminPannel(): ReactElement {
149137
</Label>
150138
</>
151139
)}
152-
renderContent={() => (
153-
<>
154-
<BannedUserList />
155-
</>
156-
)}
140+
renderContent={() => <BannedUserList />}
157141
/>
158142
{
159143
// cannot freeze broadcast channel

‎src/ui/MobileMenu/ReactedMembersBottomSheet.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export const ReactedMembersBottomSheet = ({
9494
className="sendbird-message__bottomsheet__reactor-list__item"
9595
user={member}
9696
avatarSize="36px"
97-
onClick={onPressUserProfileCallBack}
97+
onUserAvatarClick={onPressUserProfileCallBack}
9898
/>
9999
))
100100
}

‎src/ui/Modal/index.scss‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,6 @@
55
width: 100vw;
66
max-width: 100%;
77
height: 100%;
8-
@include mobile() {
9-
height: stretch;
10-
}
118
}
129
}
1310

‎src/ui/UserListItem/index.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,9 @@ export interface UserListItemProps {
2727
}): ReactElement;
2828
onChange?(e: ChangeEvent<HTMLInputElement>): void;
2929
avatarSize?: string;
30+
/** @deprecated Please use the onUserAvatarClick instead */
3031
onClick?(): void,
32+
onUserAvatarClick?(): void,
3133
}
3234

3335
export default function UserListItem({
@@ -43,6 +45,7 @@ export default function UserListItem({
4345
onChange,
4446
avatarSize = '40px',
4547
onClick,
48+
onUserAvatarClick,
4649
}: UserListItemProps): ReactElement {
4750
const uniqueKey = user.userId;
4851
const actionRef = React.useRef(null);
@@ -74,7 +77,7 @@ export default function UserListItem({
7477
onClick={() => {
7578
if (!disableUserProfile) {
7679
toggleDropdown();
77-
onClick?.();
80+
(onUserAvatarClick ?? onClick)?.();
7881
}
7982
}}
8083
/>

0 commit comments

Comments
 (0)