OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Order receipts with the most recent on the right (#8506)

pull/28217/head
Šimon Brandner 2022-05-05 14:10:48 +02:00 committed by GitHub
parent 3a63c88a11
commit b12c002602
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/views/rooms/ReadReceiptGroup.tsx
View File

@ -52,11 +52,11 @@ interface IAvatarPosition {
position: number;
}
export function determineAvatarPosition(index: number, count: number, max: number): IAvatarPosition {
export function determineAvatarPosition(index: number, max: number): IAvatarPosition {
if (index < max) {
return {
hidden: false,
position: Math.min(count, max) - index - 1,
position: index,
};
} else {
return {
@ -133,7 +133,7 @@ export function ReadReceiptGroup(
}
const avatars = readReceipts.map((receipt, index) => {
const { hidden, position } = determineAvatarPosition(index, readReceipts.length, maxAvatars);
const { hidden, position } = determineAvatarPosition(index, maxAvatars);
const userId = receipt.userId;
let readReceiptInfo: IReadReceiptInfo;

52
test/components/views/rooms/ReadReceiptGroup-test.tsx
View File

@ -34,46 +34,46 @@ describe("ReadReceiptGroup", () => {
describe("AvatarPosition", () => {
// The avatar slots are numbered from right to left
// That means currently, we’ve got the slots | 3 | 2 | 1 | 0 | each with 10px distance to the next one.
// We want to fill slots so the first avatar is in the left-most slot without leaving any slots at the right
// We want to fill slots so the first avatar is in the right-most slot without leaving any slots at the left
// unoccupied.
it("to handle the non-overflowing case correctly", () => {
expect(determineAvatarPosition(0, 1, 4))
expect(determineAvatarPosition(0, 4))
.toEqual({ hidden: false, position: 0 });
expect(determineAvatarPosition(0, 2, 4))
expect(determineAvatarPosition(0, 4))
.toEqual({ hidden: false, position: 0 });
expect(determineAvatarPosition(1, 4))
.toEqual({ hidden: false, position: 1 });
expect(determineAvatarPosition(1, 2, 4))
.toEqual({ hidden: false, position: 0 });
expect(determineAvatarPosition(0, 3, 4))
expect(determineAvatarPosition(0, 4))
.toEqual({ hidden: false, position: 0 });
expect(determineAvatarPosition(1, 4))
.toEqual({ hidden: false, position: 1 });
expect(determineAvatarPosition(2, 4))
.toEqual({ hidden: false, position: 2 });
expect(determineAvatarPosition(1, 3, 4))
.toEqual({ hidden: false, position: 1 });
expect(determineAvatarPosition(2, 3, 4))
.toEqual({ hidden: false, position: 0 });
expect(determineAvatarPosition(0, 4, 4))
expect(determineAvatarPosition(0, 4))
.toEqual({ hidden: false, position: 0 });
expect(determineAvatarPosition(1, 4))
.toEqual({ hidden: false, position: 1 });
expect(determineAvatarPosition(2, 4))
.toEqual({ hidden: false, position: 2 });
expect(determineAvatarPosition(3, 4))
.toEqual({ hidden: false, position: 3 });
expect(determineAvatarPosition(1, 4, 4))
.toEqual({ hidden: false, position: 2 });
expect(determineAvatarPosition(2, 4, 4))
.toEqual({ hidden: false, position: 1 });
expect(determineAvatarPosition(3, 4, 4))
.toEqual({ hidden: false, position: 0 });
});
it("to handle the overflowing case correctly", () => {
expect(determineAvatarPosition(0, 6, 4))
.toEqual({ hidden: false, position: 3 });
expect(determineAvatarPosition(1, 6, 4))
.toEqual({ hidden: false, position: 2 });
expect(determineAvatarPosition(2, 6, 4))
.toEqual({ hidden: false, position: 1 });
expect(determineAvatarPosition(3, 6, 4))
expect(determineAvatarPosition(0, 4))
.toEqual({ hidden: false, position: 0 });
expect(determineAvatarPosition(4, 6, 4))
expect(determineAvatarPosition(1, 4))
.toEqual({ hidden: false, position: 1 });
expect(determineAvatarPosition(2, 4))
.toEqual({ hidden: false, position: 2 });
expect(determineAvatarPosition(3, 4))
.toEqual({ hidden: false, position: 3 });
expect(determineAvatarPosition(4, 4))
.toEqual({ hidden: true, position: 0 });
expect(determineAvatarPosition(5, 6, 4))
expect(determineAvatarPosition(5, 4))
.toEqual({ hidden: true, position: 0 });
});
});