bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'carousel-cutoff' into 'develop'

Browse source 
Carousel cutoff

See merge request soapbox-pub/soapbox-fe!1649
This commit is contained in:
Justin 2022-07-19 13:12:13 +00:00
commit 04a4e82df3
4 changed files with 17 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/soapbox/features/feed-filtering/__tests__/feed-carousel.test.tsx
View file

@ -7,7 +7,7 @@ import { render, screen, waitFor } from '../../../jest/test-helpers';
import FeedCarousel from '../feed-carousel';
jest.mock('../../../hooks/useDimensions', () => ({
useDimensions: () => [null, { width: 200 }],
useDimensions: () => [{ scrollWidth: 190 }, null, { width: 100 }],
}));
(window as any).ResizeObserver = class ResizeObserver {

13
app/soapbox/features/feed-filtering/feed-carousel.tsx
View file

@ -44,7 +44,7 @@ const CarouselItem = ({ avatar }: { avatar: any }) => {
<img
src={avatar.account_avatar}
className={classNames({
' w-14 h-14 min-w-[56px] rounded-full ring-2 ring-offset-4 dark:ring-offset-slate-800': true,
'w-14 h-14 min-w-[56px] rounded-full ring-2 ring-offset-4 dark:ring-offset-slate-800': true,
'ring-transparent': !isSelected,
'ring-primary-600': isSelected,
})}
@ -62,7 +62,7 @@ const FeedCarousel = () => {
const dispatch = useAppDispatch();
const features = useFeatures();
const [cardRef, { width }] = useDimensions();
const [cardRef, setCardRef, { width }] = useDimensions();
const [pageSize, setPageSize] = useState<number>(0);
const [currentPage, setCurrentPage] = useState<number>(1);
@ -70,7 +70,8 @@ const FeedCarousel = () => {
const avatars = useAppSelector((state) => state.carousels.avatars);
const isLoading = useAppSelector((state) => state.carousels.isLoading);
const hasError = useAppSelector((state) => state.carousels.error);
const numberOfPages = Math.floor(avatars.length / pageSize);
const numberOfPages = Math.ceil(avatars.length / pageSize);
const widthPerAvatar = (cardRef?.scrollWidth || 0) / avatars.length;
const hasNextPage = currentPage < numberOfPages && numberOfPages > 1;
const hasPrevPage = currentPage > 1 && numberOfPages > 1;
@ -80,9 +81,9 @@ const FeedCarousel = () => {
useEffect(() => {
if (width) {
setPageSize(Math.round(width / (80 + 15)));
setPageSize(Math.round(width / widthPerAvatar));
}
}, [width]);
}, [width, widthPerAvatar]);
useEffect(() => {
if (features.feedUserFiltering) {
@ -109,7 +110,7 @@ const FeedCarousel = () => {
}
return (
<Card variant='rounded' size='lg' ref={cardRef} className='relative' data-testid='feed-carousel'>
<Card variant='rounded' size='lg' ref={setCardRef} className='relative' data-testid='feed-carousel'>
<div>
{hasPrevPage && (
<div>

10
app/soapbox/hooks/__tests__/useDimensions.test.ts
View file

@ -21,10 +21,10 @@ describe('useDimensions()', () => {
act(() => {
const div = document.createElement('div');
(result.current[0] as any)(div);
(result.current[1] as any)(div);
});
expect(result.current[1]).toMatchObject({
expect(result.current[2]).toMatchObject({
width: 0,
height: 0,
});
@ -35,7 +35,7 @@ describe('useDimensions()', () => {
act(() => {
const div = document.createElement('div');
(result.current[0] as any)(div);
(result.current[1] as any)(div);
});
act(() => {
@ -49,7 +49,7 @@ describe('useDimensions()', () => {
]);
});
expect(result.current[1]).toMatchObject({
expect(result.current[2]).toMatchObject({
width: 200,
height: 200,
});
@ -70,7 +70,7 @@ describe('useDimensions()', () => {
act(() => {
const div = document.createElement('div');
(result.current[0] as any)(div);
(result.current[1] as any)(div);
});
expect(disconnect).toHaveBeenCalledTimes(0);

8
app/soapbox/hooks/useDimensions.ts
View file

@ -1,7 +1,7 @@
import { Ref, useEffect, useMemo, useState } from 'react';
import { useEffect, useMemo, useState } from 'react';
type UseDimensionsRect = { width: number, height: number };
type UseDimensionsResult = [Ref<HTMLDivElement>, any]
type UseDimensionsResult = [Element | null, any, any]
const defaultState: UseDimensionsRect = {
width: 0,
@ -9,7 +9,7 @@ const defaultState: UseDimensionsRect = {
};
const useDimensions = (): UseDimensionsResult => {
const [element, ref] = useState<Element | null>(null);
const [element, setRef] = useState<Element | null>(null);
const [rect, setRect] = useState<UseDimensionsRect>(defaultState);
const observer = useMemo(
@ -32,7 +32,7 @@ const useDimensions = (): UseDimensionsResult => {
};
}, [element]);
return [ref, rect];
return [element, setRef, rect];
};
export { useDimensions };