fix: scroll fetch (#3592)

This commit is contained in:
Finley Ge
2025-01-14 19:16:52 +08:00
committed by archer
parent 11cfe8a809
commit 0d9f54cbf3

View File

@@ -51,7 +51,7 @@ function MemberModal({
addPermissionOnly?: boolean; addPermissionOnly?: boolean;
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation();
const { userInfo, myGroups } = useUserStore(); const { userInfo } = useUserStore();
const collaboratorList = useContextSelector(CollaboratorContext, (v) => v.collaboratorList); const collaboratorList = useContextSelector(CollaboratorContext, (v) => v.collaboratorList);
const [searchText, setSearchText] = useState<string>(''); const [searchText, setSearchText] = useState<string>('');
const [filterClass, setFilterClass] = useState<'member' | 'org' | 'group'>(); const [filterClass, setFilterClass] = useState<'member' | 'org' | 'group'>();
@@ -299,130 +299,133 @@ function MemberModal({
</Box> </Box>
)} )}
<Flex flexDirection={'column'} gap={1} userSelect={'none'}> <ScrollData
<ScrollData> flexDirection={'column'}
{filterMembers.map((member) => { gap={1}
const onChange = () => { userSelect={'none'}
setSelectedMembers((state) => { height={'fit-content'}
if (state.includes(member.tmbId)) { >
return state.filter((v) => v !== member.tmbId); {filterMembers.map((member) => {
} const onChange = () => {
return [...state, member.tmbId]; setSelectedMembers((state) => {
}); if (state.includes(member.tmbId)) {
}; return state.filter((v) => v !== member.tmbId);
const collaborator = collaboratorList?.find((v) => v.tmbId === member.tmbId); }
return ( return [...state, member.tmbId];
<HStack });
justifyContent="space-between" };
key={member.tmbId} const collaborator = collaboratorList?.find((v) => v.tmbId === member.tmbId);
py="2" return (
px="3" <HStack
borderRadius="sm" justifyContent="space-between"
alignItems="center" key={member.tmbId}
_hover={HoverBoxStyle} py="2"
onClick={onChange} px="3"
> borderRadius="sm"
<Checkbox alignItems="center"
isChecked={selectedMemberIdList.includes(member.tmbId)} _hover={HoverBoxStyle}
pointerEvents="none" onClick={onChange}
/> >
<MyAvatar src={member.avatar} w="1.5rem" borderRadius={'50%'} /> <Checkbox
<Box w="full" ml="2"> isChecked={selectedMemberIdList.includes(member.tmbId)}
{member.memberName} pointerEvents="none"
</Box> />
<PermissionTags permission={collaborator?.permission.value} /> <MyAvatar src={member.avatar} w="1.5rem" borderRadius={'50%'} />
</HStack> <Box w="full" ml="2">
); {member.memberName}
})} </Box>
{filterOrgs.map((org) => { <PermissionTags permission={collaborator?.permission.value} />
const onChange = () => { </HStack>
setSelectedOrgIdList((state) => { );
if (state.includes(org._id)) { })}
return state.filter((v) => v !== org._id); {filterOrgs.map((org) => {
} const onChange = () => {
return [...state, org._id]; setSelectedOrgIdList((state) => {
}); if (state.includes(org._id)) {
}; return state.filter((v) => v !== org._id);
const collaborator = collaboratorList?.find((v) => v.orgId === org._id); }
return ( return [...state, org._id];
<HStack });
justifyContent="space-between" };
key={org._id} const collaborator = collaboratorList?.find((v) => v.orgId === org._id);
py="2" return (
px="3" <HStack
borderRadius="sm" justifyContent="space-between"
alignItems="center" key={org._id}
_hover={HoverBoxStyle} py="2"
onClick={onChange} px="3"
> borderRadius="sm"
<Checkbox alignItems="center"
isChecked={selectedOrgIdList.includes(org._id)} _hover={HoverBoxStyle}
pointerEvents="none" onClick={onChange}
/> >
<MyAvatar src={org.avatar} w="1.5rem" borderRadius={'50%'} /> <Checkbox
<HStack ml="2" w="full" gap="5px"> isChecked={selectedOrgIdList.includes(org._id)}
<Text>{org.name}</Text> pointerEvents="none"
{org.count && ( />
<> <MyAvatar src={org.avatar} w="1.5rem" borderRadius={'50%'} />
<Tag size="sm" my="auto"> <HStack ml="2" w="full" gap="5px">
{org.count} <Text>{org.name}</Text>
</Tag>
</>
)}
</HStack>
<PermissionTags permission={collaborator?.permission.value} />
{org.count && ( {org.count && (
<MyIcon <>
name="core/chat/chevronRight" <Tag size="sm" my="auto">
w="16px" {org.count}
p="4px" </Tag>
rounded={'6px'} </>
_hover={{
bgColor: 'myGray.200'
}}
onClick={() => {
setParentPath(getOrgChildrenPath(org));
}}
/>
)} )}
</HStack> </HStack>
); <PermissionTags permission={collaborator?.permission.value} />
})} {org.count && (
{filterGroups.map((group) => { <MyIcon
const onChange = () => { name="core/chat/chevronRight"
setSelectedGroupIdList((state) => { w="16px"
if (state.includes(group._id)) { p="4px"
return state.filter((v) => v !== group._id); rounded={'6px'}
} _hover={{
return [...state, group._id]; bgColor: 'myGray.200'
}); }}
}; onClick={() => {
const collaborator = collaboratorList?.find((v) => v.groupId === group._id); setParentPath(getOrgChildrenPath(org));
return ( }}
<HStack
justifyContent="space-between"
key={group._id}
py="2"
px="3"
borderRadius="sm"
alignItems="center"
_hover={HoverBoxStyle}
onClick={onChange}
>
<Checkbox
isChecked={selectedGroupIdList.includes(group._id)}
pointerEvents="none"
/> />
<MyAvatar src={group.avatar} w="1.5rem" borderRadius={'50%'} /> )}
<Box ml="2" w="full"> </HStack>
{group.name === DefaultGroupName ? userInfo?.team.teamName : group.name} );
</Box> })}
<PermissionTags permission={collaborator?.permission.value} /> {filterGroups.map((group) => {
</HStack> const onChange = () => {
); setSelectedGroupIdList((state) => {
})} if (state.includes(group._id)) {
</ScrollData> return state.filter((v) => v !== group._id);
</Flex> }
return [...state, group._id];
});
};
const collaborator = collaboratorList?.find((v) => v.groupId === group._id);
return (
<HStack
justifyContent="space-between"
key={group._id}
py="2"
px="3"
borderRadius="sm"
alignItems="center"
_hover={HoverBoxStyle}
onClick={onChange}
>
<Checkbox
isChecked={selectedGroupIdList.includes(group._id)}
pointerEvents="none"
/>
<MyAvatar src={group.avatar} w="1.5rem" borderRadius={'50%'} />
<Box ml="2" w="full">
{group.name === DefaultGroupName ? userInfo?.team.teamName : group.name}
</Box>
<PermissionTags permission={collaborator?.permission.value} />
</HStack>
);
})}
</ScrollData>
</Flex> </Flex>
</Flex> </Flex>