Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Order receipts with the most recent on the right #8506

Merged
merged 3 commits into from
May 5, 2022
Merged

Order receipts with the most recent on the right #8506

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7e47c67
Order receipts with the most recent on the right
SimonBrandner May 5, 2022
eee2d00
Remove unused param
SimonBrandner May 5, 2022
960fee1
Merge remote-tracking branch 'upstream/develop' into SimonBrandner/fi…
SimonBrandner May 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/components/views/rooms/ReadReceiptGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down
52 changes: 26 additions & 26 deletions test/components/views/rooms/ReadReceiptGroup-test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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))
.toEqual({ hidden: false, position: 1 });
expect(determineAvatarPosition(1, 2, 4))
expect(determineAvatarPosition(0, 4))
.toEqual({ hidden: false, position: 0 });

expect(determineAvatarPosition(0, 3, 4))
.toEqual({ hidden: false, position: 2 });
expect(determineAvatarPosition(1, 3, 4))
expect(determineAvatarPosition(1, 4))
.toEqual({ hidden: false, position: 1 });
expect(determineAvatarPosition(2, 3, 4))
.toEqual({ hidden: false, position: 0 });

expect(determineAvatarPosition(0, 4, 4))
.toEqual({ hidden: false, position: 3 });
expect(determineAvatarPosition(1, 4, 4))
.toEqual({ hidden: false, position: 2 });
expect(determineAvatarPosition(2, 4, 4))
expect(determineAvatarPosition(0, 4))
.toEqual({ hidden: false, position: 0 });
expect(determineAvatarPosition(1, 4))
.toEqual({ hidden: false, position: 1 });
expect(determineAvatarPosition(3, 4, 4))
expect(determineAvatarPosition(2, 4))
.toEqual({ hidden: false, position: 2 });

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 });
});

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 });
});
});
Expand Down