Skip to content

Commit

Permalink
Comment suggestion patch
Browse files Browse the repository at this point in the history
  • Loading branch information
@r100-stack
r100-stack committed Oct 11, 2024
1 parent 7bfb92e commit 06f48ab
Showing 1 changed file with 148 additions and 177 deletions.
325 changes: 148 additions & 177 deletions packages/itwinui-react/src/core/Table/TablePaginator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,41 +169,72 @@ export const TablePaginator = (props: TablePaginatorProps) => {
}, [focusedIndex]);

const buttonSize = size != 'default' ? 'small' : undefined;
const totalPagesCount = Math.ceil(totalRowsCount / pageSize);

const pageButton = React.useCallback(
(index: number, tabIndex = index === focusedIndex ? 0 : -1) => (
<Button
key={index}
className='iui-table-paginator-page-button'
styleType='borderless'
size={buttonSize}
data-iui-active={index === currentPage}
onClick={() => onPageChange(index)}
aria-current={index === currentPage}
aria-label={localization.goToPageLabel(index + 1)}
tabIndex={tabIndex}
>
{index + 1}
</Button>
),
[focusedIndex, currentPage, localization, buttonSize, onPageChange],
);
const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
// alt + arrow keys are used by browser/assistive technologies
if (event.altKey) {
return;
}

const totalPagesCount = Math.ceil(totalRowsCount / pageSize);
const pageList = React.useMemo(
() =>
new Array(totalPagesCount)
.fill(null)
.map((_, index) => pageButton(index)),
[pageButton, totalPagesCount],
);
const focusPage = (delta: number) => {
const newFocusedIndex = getBoundedValue(
focusedIndex + delta,
0,
totalPagesCount - 1,
);

needFocus.current = true;
if (focusActivationMode === 'auto') {
onPageChange(newFocusedIndex);
} else {
setFocusedIndex(newFocusedIndex);
}
};

switch (event.key) {
case 'ArrowRight': {
focusPage(+1);
event.preventDefault();
break;
}
case 'ArrowLeft': {
focusPage(-1);
event.preventDefault();
break;
}
case 'Enter':
case ' ':
case 'Spacebar': {
if (focusActivationMode === 'manual') {
onPageChange(focusedIndex);
}
break;
}
default:
break;
}
};

const [paginatorResizeRef, paginatorWidth] = useContainerWidth();

const showPagesList = totalPagesCount > 1 || isLoading;
const showPageSizeList =
pageSizeList && !!onPageSizeChange && !!totalRowsCount;

const hasNoRows = totalPagesCount === 0;
const noRowsContent = (
<>
{isLoading ? (
<ProgressRadial indeterminate size='small' />
) : (
<Button styleType='borderless' disabled size={buttonSize}>
1
</Button>
)}
</>
);

if (!showPagesList && !showPageSizeList) {
return null;
}
Expand All @@ -220,23 +251,45 @@ export const TablePaginator = (props: TablePaginatorProps) => {
)}
</Box>
{showPagesList && (
<OverflowContainer className='iui-center' itemsCount={pageList.length}>
<TablePaginatorCenterContent
size={size}
focusedIndex={focusedIndex}
focusActivationMode={focusActivationMode}
totalPagesCount={totalPagesCount}
needFocus={needFocus}
onPageChange={onPageChange}
setFocusedIndex={setFocusedIndex}
currentPage={currentPage}
localization={localization}
buttonSize={buttonSize}
pageListRef={pageListRef}
pageButton={pageButton}
pageList={pageList}
isLoading={isLoading}
/>
<OverflowContainer className='iui-center' itemsCount={totalPagesCount}>
<IconButton
styleType='borderless'
disabled={currentPage === 0}
onClick={() => onPageChange(currentPage - 1)}
size={buttonSize}
aria-label={localization.previousPage}
>
<SvgChevronLeft />
</IconButton>
<Box
as='span'
className='iui-table-paginator-pages-group'
onKeyDown={onKeyDown}
ref={pageListRef}
>
{hasNoRows ? (
noRowsContent
) : (
<TablePaginatorPageButtons
size={size}
focusedIndex={focusedIndex}
totalPagesCount={totalPagesCount}
onPageChange={onPageChange}
currentPage={currentPage}
localization={localization}
isLoading={isLoading}
/>
)}
</Box>
<IconButton
styleType='borderless'
disabled={currentPage === totalPagesCount - 1 || hasNoRows}
onClick={() => onPageChange(currentPage + 1)}
size={buttonSize}
aria-label={localization.nextPage}
>
<SvgChevronRight />
</IconButton>
</OverflowContainer>
)}
<Box className='iui-right'>
Expand Down Expand Up @@ -282,92 +335,57 @@ export const TablePaginator = (props: TablePaginatorProps) => {

// ----------------------------------------------------------------------------

type TablePaginatorCenterContentProps = Pick<
type TablePaginatorPageButtonsProps = Pick<
TablePaginatorProps,
'onPageChange'
> &
Required<
Pick<
TablePaginatorProps,
'localization' | 'size' | 'focusActivationMode' | 'isLoading'
>
> & {
Required<Pick<TablePaginatorProps, 'localization' | 'size' | 'isLoading'>> & {
focusedIndex: number;
totalPagesCount: number;
needFocus: React.MutableRefObject<boolean>;
setFocusedIndex: React.Dispatch<React.SetStateAction<number>>;
currentPage: number;
buttonSize: 'small' | undefined;
pageListRef: React.MutableRefObject<HTMLDivElement | null>;
pageButton: (index: number, tabIndex?: number) => React.ReactNode;
pageList: React.ReactNode[];
};

const TablePaginatorCenterContent = (
props: TablePaginatorCenterContentProps,
) => {
const TablePaginatorPageButtons = (props: TablePaginatorPageButtonsProps) => {
const {
focusedIndex,
focusActivationMode,
totalPagesCount,
needFocus,
onPageChange,
setFocusedIndex,
currentPage,
localization,
buttonSize,
pageListRef,
pageButton,
pageList,
isLoading,
size,
} = props;
const { visibleCount } = OverflowContainer.useContext();

const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
// alt + arrow keys are used by browser/assistive technologies
if (event.altKey) {
return;
}
const { visibleCount } = OverflowContainer.useContext();

const focusPage = (delta: number) => {
const newFocusedIndex = getBoundedValue(
focusedIndex + delta,
0,
totalPagesCount - 1,
);
const buttonSize = size != 'default' ? 'small' : undefined;

needFocus.current = true;
if (focusActivationMode === 'auto') {
onPageChange(newFocusedIndex);
} else {
setFocusedIndex(newFocusedIndex);
}
};
const pageButton = React.useCallback(
(index: number, tabIndex = index === focusedIndex ? 0 : -1) => (
<Button
key={index}
className='iui-table-paginator-page-button'
styleType='borderless'
size={buttonSize}
data-iui-active={index === currentPage}
onClick={() => onPageChange(index)}
aria-current={index === currentPage}
aria-label={localization.goToPageLabel?.(index + 1)}
tabIndex={tabIndex}
>
{index + 1}
</Button>
),
[focusedIndex, currentPage, localization, buttonSize, onPageChange],
);

switch (event.key) {
case 'ArrowRight': {
focusPage(+1);
event.preventDefault();
break;
}
case 'ArrowLeft': {
focusPage(-1);
event.preventDefault();
break;
}
case 'Enter':
case ' ':
case 'Spacebar': {
if (focusActivationMode === 'manual') {
onPageChange(focusedIndex);
}
break;
}
default:
break;
}
};
const pageList = React.useMemo(
() =>
new Array(totalPagesCount)
.fill(null)
.map((_, index) => pageButton(index)),
[pageButton, totalPagesCount],
);

const halfVisibleCount = Math.floor(visibleCount / 2);
let startPage = focusedIndex - halfVisibleCount;
Expand All @@ -381,8 +399,6 @@ const TablePaginatorCenterContent = (
endPage = totalPagesCount;
}

const hasNoRows = totalPagesCount === 0;

const ellipsis = (
<Box
as='span'
Expand All @@ -394,76 +410,31 @@ const TablePaginatorCenterContent = (
</Box>
);

const noRowsContent = (
<>
{isLoading ? (
<ProgressRadial indeterminate size='small' />
) : (
<Button styleType='borderless' disabled size={buttonSize}>
1
</Button>
)}
</>
);
if (visibleCount === 1) {
return pageButton(focusedIndex);
}

return (
<>
<IconButton
styleType='borderless'
disabled={currentPage === 0}
onClick={() => onPageChange(currentPage - 1)}
size={buttonSize}
aria-label={localization.previousPage}
>
<SvgChevronLeft />
</IconButton>
<Box
as='span'
className='iui-table-paginator-pages-group'
onKeyDown={onKeyDown}
ref={pageListRef}
>
{(() => {
if (hasNoRows) {
return noRowsContent;
}
if (visibleCount === 1) {
return pageButton(focusedIndex);
}
return (
<>
{startPage !== 0 && (
<>
{pageButton(0, 0)}
{ellipsis}
</>
)}
{pageList.slice(startPage, endPage)}
{endPage !== totalPagesCount && !isLoading && (
<>
{ellipsis}
{pageButton(totalPagesCount - 1, 0)}
</>
)}
{isLoading && (
<>
{ellipsis}
<ProgressRadial indeterminate size='small' />
</>
)}
</>
);
})()}
</Box>
<IconButton
styleType='borderless'
disabled={currentPage === totalPagesCount - 1 || hasNoRows}
onClick={() => onPageChange(currentPage + 1)}
size={buttonSize}
aria-label={localization.nextPage}
>
<SvgChevronRight />
</IconButton>
{startPage !== 0 && (
<>
{pageButton(0, 0)}
{ellipsis}
</>
)}
{pageList.slice(startPage, endPage)}
{endPage !== totalPagesCount && !isLoading && (
<>
{ellipsis}
{pageButton(totalPagesCount - 1, 0)}
</>
)}
{isLoading && (
<>
{ellipsis}
<ProgressRadial indeterminate size='small' />
</>
)}
</>
);
};

0 comments on commit 06f48ab

Please sign in to comment.