Skip to content

Commit

Permalink
feat(pagination): update design and logic for pagination
Browse files Browse the repository at this point in the history
  • Loading branch information
dariaoldenburg committed Nov 26, 2024
1 parent 3963a76 commit 8bdea20
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 34 deletions.
58 changes: 53 additions & 5 deletions src/script/components/calling/FullscreenVideoCall.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,8 @@ const EMOJIS_LIST = ['👍', '🎉', '❤️', '😂', '😮', '👏', '🤔', '

const LOCAL_STORAGE_KEY_FOR_SCREEN_SHARING_CONFIRM_MODAL = 'DO_NOT_ASK_AGAIN_FOR_SCREEN_SHARING_CONFIRM_MODAL';

const DEFAULT_VISIBLE_DOTS = 5;

const FullscreenVideoCall: React.FC<FullscreenVideoCallProps> = ({
call,
canShareScreen,
Expand Down Expand Up @@ -399,6 +401,51 @@ const FullscreenVideoCall: React.FC<FullscreenVideoCallProps> = ({

const isModerator = selfUser && roles[selfUser.id] === DefaultConversationRoleName.WIRE_ADMIN;

const [currentStart, setCurrentStart] = useState(0);
const visibleDots = DEFAULT_VISIBLE_DOTS > totalPages ? totalPages : DEFAULT_VISIBLE_DOTS;

useEffect(() => {
const isLastInTheRange = currentPage === currentStart + visibleDots - 1;
const isLastPage = currentPage === totalPages - 1;

if (isLastInTheRange && !isLastPage) {
return setCurrentStart(currentStart => currentStart + 1);
}

if (currentStart + visibleDots - 1 >= totalPages && currentStart > 0) {
return setCurrentStart(currentStart => currentStart - 1);
}
}, [totalPages, setCurrentStart, currentStart, currentPage, visibleDots]);

const handlePreviousPage = () => {
if (currentPage === 0) {
return;
}

const previousPage = currentPage - 1;

// previousPage !== 0 --> jest niepotrzebne prawdopodnie
if (previousPage === currentStart && previousPage !== 0) {
setCurrentStart(currentStart => currentStart - 1);
}

changePage(previousPage, call);
};

const handleNextPage = () => {
if (currentPage === totalPages - 1) {
return;
}

const nextPage = currentPage + 1;

if (nextPage === currentStart + visibleDots - 1 && nextPage !== totalPages - 1) {
setCurrentStart(currentStart => currentStart + 1);
}

changePage(nextPage, call);
};

return (
<div className="video-calling-wrapper">
<div id="video-calling" className="video-calling">
Expand Down Expand Up @@ -450,8 +497,8 @@ const FullscreenVideoCall: React.FC<FullscreenVideoCallProps> = ({
<button
data-uie-name="pagination-previous"
type="button"
onClick={() => changePage(currentPage - 1, call)}
onKeyDown={event => handleKeyDown(event, () => changePage(currentPage - 1, call))}
onClick={handlePreviousPage}
onKeyDown={event => handleKeyDown(event, handlePreviousPage)}
className="button-reset-default"
disabled={currentPage === 0}
css={{
Expand All @@ -467,12 +514,13 @@ const FullscreenVideoCall: React.FC<FullscreenVideoCallProps> = ({
<Pagination
totalPages={totalPages}
currentPage={currentPage}
onChangePage={newPage => changePage(newPage, call)}
currentStart={currentStart}
visibleDots={visibleDots}
/>
<button
data-uie-name="pagination-next"
onClick={() => changePage(currentPage + 1, call)}
onKeyDown={event => handleKeyDown(event, () => changePage(currentPage + 1, call))}
onClick={handleNextPage}
onKeyDown={event => handleKeyDown(event, handleNextPage)}
type="button"
className="button-reset-default"
disabled={currentPage === totalPages - 1}
Expand Down
49 changes: 20 additions & 29 deletions src/script/components/calling/Pagination.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,11 @@ import React from 'react';

import {CSSObject} from '@emotion/react';

import {handleKeyDown} from 'Util/KeyboardUtil';

export interface PaginationProps {
currentPage: number;
onChangePage: (newPage: number) => void;
totalPages: number;
currentStart: number;
visibleDots: number;
wrapperStyles?: CSSObject;
}

Expand All @@ -35,14 +34,17 @@ const paginationItemStyles: CSSObject = {
marginRight: 4,
},
borderRadius: '50%',
cursor: 'pointer',
height: 12,
marginLeft: 4,
width: 12,
};

const Pagination: React.FC<PaginationProps> = ({totalPages, currentPage, onChangePage, wrapperStyles = {}}) => {
const pages = new Array(totalPages).fill(null).map((_, index) => index);
const Pagination: React.FC<PaginationProps> = ({
totalPages,
currentPage,
currentStart,
visibleDots,
wrapperStyles = {},
}) => {
const visibleRange = Array.from({length: visibleDots}, (_, index) => currentStart + index);

return (
<div
Expand All @@ -56,40 +58,29 @@ const Pagination: React.FC<PaginationProps> = ({totalPages, currentPage, onChang
}}
data-uie-name="pagination-wrapper"
>
{pages.map(page => {
{visibleRange.map((page, index) => {
const isCurrentPage = currentPage === page;
const isFirstOrLastInTheRange = index === 0 || index === visibleRange.length - 1;
const isLastPage = page === totalPages - 1;
const isFirstPage = page === 0;

const isSmaller = isFirstOrLastInTheRange && !(isFirstPage || isLastPage);

return (
<button
<div
data-uie-name="pagination-item"
data-uie-status={isCurrentPage ? 'active' : 'inactive'}
key={page}
onClick={() => onChangePage(page)}
onKeyDown={event => handleKeyDown(event, () => onChangePage(page))}
type="button"
className="button-reset-default"
css={{
...paginationItemStyles,
'&:focus-visible': {
backgroundColor: isCurrentPage ? 'var(--toggle-button-hover-bg)' : 'none',
border: '1px solid var(--accent-color)',
outline: 'none',
},
'&:hover': {
backgroundColor: isCurrentPage
? 'var(--toggle-button-hover-bg)'
: 'var(--toggle-button-unselected-hover-bg)',
border: isCurrentPage
? '1px solid var(--toggle-button-hover-bg)'
: '1px solid var(--toggle-button-unselected-hover-border)',
},

'&:active': {
backgroundColor: isCurrentPage ? 'var(--accent-color)' : 'var(--toggle-button-unselected-bg)',
border: '1px solid var(--accent-color)',
},
backgroundColor: isCurrentPage ? 'var(--accent-color)' : 'none',
backgroundColor: isCurrentPage ? 'var(--accent-color)' : 'transparent',
border: isCurrentPage ? 'solid 1px var(--accent-color)' : 'solid 1px var(--foreground)',
width: isSmaller ? '8px' : '12px',
height: isSmaller ? '8px' : '12px',
}}
/>
);
Expand Down

0 comments on commit 8bdea20

Please sign in to comment.