fix: scroll fetch (#3592)
This commit is contained in:
@@ -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>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user