Skip to content

Commit

Permalink
Merge pull request #405 from qoretechnologies/bugfix/collection-items…
Browse files Browse the repository at this point in the history
…-unmounting

Bugfix/collection-items-unmounting
  • Loading branch information
Foxhoundn authored Oct 14, 2024
2 parents c876172 + fc25166 commit 721c6d5
Show file tree
Hide file tree
Showing 8 changed files with 72 additions and 58 deletions.
2 changes: 1 addition & 1 deletion __tests__/pagination.test.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { act, fireEvent, render, screen } from '@testing-library/react';
import React, { useState } from 'react';
import { useState } from 'react';
import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils';
import { useMount } from 'react-use';
import {
Expand Down
86 changes: 41 additions & 45 deletions src/components/Collection/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -321,51 +321,47 @@ export const ReqoreCollection = ({

const renderContent = useCallback(() => {
return contentRenderer(
<>
<ReqorePaginationContainer
key='paging-container'
items={filteredItems}
type={paging}
size={rest.size}
scrollContainer={contentRef}
>
{(finalItems) => (
<>
{!size(finalItems) ? (
<ReqoreMessage flat icon='Search2Line'>
{emptyMessage}
</ReqoreMessage>
) : (
<StyledCollectionWrapper
columns={columns || (_showAs === 'grid' ? 'auto-fit' : 1)}
columnsGap={stacked ? '0px' : columnsGap}
rounded={rounded}
stacked={stacked}
fill={fill}
ref={setContentRef}
height={height}
alignItems={alignItems}
minColumnWidth={minColumnWidth || zoomToWidth[zoom]}
maxColumnWidth={maxColumnWidth}
className='reqore-collection-content'
>
{finalItems?.map((item, index) => (
<ReqoreCollectionItem
size={zoomToSize[zoom]}
responsiveTitle={false}
{...item}
icon={item.icon || (item.selected ? selectedIcon : undefined)}
key={index}
rounded={!stacked}
maxContentHeight={maxItemHeight}
/>
))}
</StyledCollectionWrapper>
)}
</>
)}
</ReqorePaginationContainer>
</>,
<ReqorePaginationContainer
key='paging-container'
items={filteredItems}
type={paging}
size={rest.size}
scrollContainer={contentRef}
>
{(_items, _children, { applyPaging }) =>
!size(applyPaging(filteredItems)) ? (
<ReqoreMessage flat icon='Search2Line'>
{emptyMessage}
</ReqoreMessage>
) : (
<StyledCollectionWrapper
columns={columns || (_showAs === 'grid' ? 'auto-fit' : 1)}
columnsGap={stacked ? '0px' : columnsGap}
rounded={rounded}
stacked={stacked}
fill={fill}
ref={setContentRef}
height={height}
alignItems={alignItems}
minColumnWidth={minColumnWidth || zoomToWidth[zoom]}
maxColumnWidth={maxColumnWidth}
className='reqore-collection-content'
>
{applyPaging(filteredItems)?.map((item, index) => (
<ReqoreCollectionItem
size={zoomToSize[zoom]}
responsiveTitle={false}
{...item}
icon={item.icon || (item.selected ? selectedIcon : undefined)}
key={index}
rounded={!stacked}
maxContentHeight={maxItemHeight}
/>
))}
</StyledCollectionWrapper>
)
}
</ReqorePaginationContainer>,
filteredItems,
!inputInTitle && filterable ? (
<ReqoreControlGroup>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Dropdown/list.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ const ReqoreDropdownList = memo(
</>
) : null}
<ReqorePaginationContainer type={paging} items={filteredItems} scrollContainer={menuRef}>
{(finalItems, Controls, { includeBottomControls }) => (
{(_finalItems, Controls, { includeBottomControls, applyPaging }) => (
<ReqoreMenu
_insidePopover={!multiSelect}
_popoverId={_popoverId}
Expand All @@ -199,7 +199,7 @@ const ReqoreDropdownList = memo(
padded={false}
ref={setMenuRef}
>
{finalItems.map(
{applyPaging(filteredItems).map(
(
{ dividerAlign, dividerPadded, divider, ...item }: IReqoreDropdownItem,
index: number
Expand Down
2 changes: 1 addition & 1 deletion src/components/Paging/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export interface IReqorePaginationComponentProps
scrollToTopOnPageChange?: boolean;
}
export interface IReqorePaginationProps<T>
extends Omit<IReqorePagingResult<T>, 'items'>,
extends Omit<IReqorePagingResult<T>, 'items' | 'applyPaging'>,
IReqorePaginationComponentProps {}

export const StyledPagesWrapper = styled(ReqoreControlGroup)`
Expand Down
14 changes: 8 additions & 6 deletions src/components/Table/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -763,21 +763,23 @@ const ReqoreTable = ({
: undefined
}
>
{(pagedData) => (
{(_pagedData, _children, { applyPaging }) => (
<>
{showExportModal && (
<ReqoreTableExportModal
data={showExportModal === 'current' ? pagedData : transformedData}
data={
showExportModal === 'current' ? applyPaging(transformedData) : transformedData
}
onClose={() => setShowExportModal(undefined)}
exportMapper={exportMapper}
/>
)}
<StyledTablesWrapper className='reqore-table-wrapper'>
{renderTable('left', pagedData)}
{renderTable('main', pagedData)}
{renderTable('right', pagedData)}
{renderTable('left', applyPaging(transformedData))}
{renderTable('main', applyPaging(transformedData))}
{renderTable('right', applyPaging(transformedData))}
</StyledTablesWrapper>
{count(pagedData) === 0 ? (
{count(applyPaging(transformedData)) === 0 ? (
<>
<ReqoreVerticalSpacer height={10} />
<ReqoreMessage flat size={size} icon='Search2Line'>
Expand Down
1 change: 1 addition & 0 deletions src/constants/paging.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export type TReqorePaginationTypeResult<T> = {
pageControlsPosition?: 'top' | 'bottom' | 'both';
includeTopControls?: boolean;
includeBottomControls?: boolean;
applyPaging?: (items: T[]) => T[];
};

export function getPagingObjectFromType<T>(
Expand Down
9 changes: 7 additions & 2 deletions src/containers/Paging.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ function PagingControls<T>({
Partial<TReqorePaginationTypeResult<T>> & {
withSpacer?: boolean;
position?: 'top' | 'bottom';
pagingData: Omit<IReqorePagingResult<T>, 'items'>;
pagingData: Omit<IReqorePagingResult<T>, 'items' | 'applyPaging'>;
}) {
return pagingData.renderControls ? (
<>
Expand Down Expand Up @@ -74,7 +74,11 @@ function PagingContainer<T>({
includeBottomControls = true,
} = useMemo(() => getPaginationOptionsFromType(type), [type]);

const { items: finalItems, ...pagingData } = useReqorePaging({
const {
items: finalItems,
applyPaging,
...pagingData
} = useReqorePaging({
items,
...pagingOptions,
enabled: !!type,
Expand Down Expand Up @@ -109,6 +113,7 @@ function PagingContainer<T>({
/>,
{
pagingOptions,
applyPaging,
componentOptions,
pageControlsPosition,
includeTopControls,
Expand Down
12 changes: 11 additions & 1 deletion src/hooks/usePaging.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { merge, size } from 'lodash';
import { useEffect, useMemo } from 'react';
import { useCallback, useEffect, useMemo } from 'react';
import { useUpdateEffect } from 'react-use';
import usePagination, { usePaginationReturn } from 'react-use-pagination-hook';

Expand All @@ -22,6 +22,7 @@ export interface IReqorePagingResult<T>
extends Pick<usePaginationReturn, 'setPage' | 'currentPage'> {
pages: number[];
allPages: number[];
applyPaging: (items: T[]) => T[];
items: T[];
itemsPerPage: number;
itemsLeft: number;
Expand Down Expand Up @@ -80,6 +81,14 @@ export const useReqorePaging = <T>(
return items.slice(infinite ? 0 : (currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
}, [items, currentPage, itemsPerPage, infinite]);

const applyPaging = useCallback(
(items: T[]): T[] =>
!enabled
? items
: items.slice(infinite ? 0 : (currentPage - 1) * itemsPerPage, currentPage * itemsPerPage),
[currentPage, itemsPerPage, infinite, enabled]
);

const pages: number[] = useMemo(() => {
if (!pagesToShow || pagesToShow >= allPageCount) {
return pagelist;
Expand Down Expand Up @@ -110,6 +119,7 @@ export const useReqorePaging = <T>(
allPages: pagelist,
pageCount: allPageCount,
items: enabled ? slicedItems : items,
applyPaging,
itemsPerPage,
itemsLeft: items.length - slicedItems.length,
infinite,
Expand Down

0 comments on commit 721c6d5

Please sign in to comment.