Skip to content

Added infinite scroll support to filter options #27606

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kevinansfield wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Added infinite scroll support to filter options #27606

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
26 changes: 24 additions & 2 deletions apps/posts/src/components/label-picker/label-picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ import {
CommandEmpty,
CommandGroup,
CommandItem,
CommandList
CommandList,
useFilterOptionsInfiniteScroll
} from '@tryghost/shade/components';
import {EditRow} from './edit-row';
import {Label} from '@tryghost/admin-x-framework/api/labels';
Expand Down Expand Up @@ -73,6 +74,7 @@ interface LabelListItemsProps {
labels: Label[];
selectedSlugs: string[];
search: string;
optionSource: ComboboxOptionSource<string>;
onToggle: (slug: string) => void;
onEdit?: (id: string, name: string) => Promise<void>;
onDelete?: (id: string) => Promise<void>;
Expand All @@ -87,6 +89,7 @@ const LabelListItems: React.FC<LabelListItemsProps> = ({
labels,
selectedSlugs,
search,
optionSource,
onToggle,
onEdit,
onDelete,
Expand All @@ -103,6 +106,12 @@ const LabelListItems: React.FC<LabelListItemsProps> = ({
: labels;
const showCreate = !!onCreate && search.trim() && canCreateFromSearch?.(search);
const showEdit = !!onEdit;
const loadMoreSentinelRef = useFilterOptionsInfiniteScroll({
optionSource,
optionsCount: visibleLabels.length,
resetKey: search
});

const handleCreate = async () => {
if (onCreate) {
const newLabel = await onCreate(search.trim());
Expand All @@ -128,7 +137,7 @@ const LabelListItems: React.FC<LabelListItemsProps> = ({

return (
<>
{!showCreate && visibleLabels.length === 0 && (
{!showCreate && visibleLabels.length === 0 && !optionSource.hasMore && (
<CommandEmpty>No labels found</CommandEmpty>
)}
{visibleLabels.length > 0 && (
Expand Down Expand Up @@ -167,6 +176,18 @@ const LabelListItems: React.FC<LabelListItemsProps> = ({
</CommandItem>
</CommandGroup>
)}
{optionSource.hasMore && (
<div ref={loadMoreSentinelRef} className="p-1.5">
<button
className="flex w-full items-center justify-center rounded-xs px-2 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-50"
disabled={optionSource.isLoadingMore}
type="button"
onClick={optionSource.loadMore}
>
{optionSource.isLoadingMore ? 'Loading labels...' : 'Load more'}
</button>
</div>
)}
</>
);
};
Expand Down Expand Up @@ -338,6 +359,7 @@ const ComboboxPicker: React.FC<ComboboxPickerProps> = ({
isCreating={isCreating}
isDuplicateName={isDuplicateName}
labels={labels}
optionSource={optionSource}
search={search}
selectedSlugs={selectedSlugs}
onCreate={onCreate}
Expand Down
1 change: 1 addition & 0 deletions apps/posts/src/hooks/filter-sources/create-combined-value-source.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export function createCombinedValueSource<T = string>(
loadMore: () => {
if (firstState.hasMore) {
firstState.loadMore();
return;
}

if (secondState.hasMore) {
Expand Down
115 changes: 115 additions & 0 deletions apps/posts/test/unit/hooks/create-combined-value-source.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
import {FilterOption, ValueSourceState} from '@tryghost/shade/patterns';
import {createCombinedValueSource} from '@src/hooks/filter-sources/create-combined-value-source';
import {describe, expect, it, vi} from 'vitest';
import {renderHook} from '@testing-library/react';

const firstOptions: FilterOption<string>[] = [
{value: 'post-1', label: 'Post 1'},
{value: 'post-2', label: 'Post 2'}
];

const secondOptions: FilterOption<string>[] = [
{value: 'page-1', label: 'Page 1'},
{value: 'page-2', label: 'Page 2'}
];

function buildState(options: FilterOption<string>[], overrides: Partial<ValueSourceState<string>> = {}): ValueSourceState<string> {
return {
options,
isInitialLoad: false,
isSearching: false,
isLoadingMore: false,
hasMore: false,
loadMore: () => {},
...overrides
};
}

describe('createCombinedValueSource', () => {
it('orders first source options before second source options', () => {
const useCombinedSource = createCombinedValueSource(
() => ({
id: 'posts',
useOptions: () => buildState(firstOptions)
}),
() => ({
id: 'pages',
useOptions: () => buildState(secondOptions)
})
);

const {result} = renderHook(() => {
const source = useCombinedSource();
return source.useOptions({query: '', selectedValues: []});
});

expect(result.current.options).toEqual([
{value: 'post-1', label: 'Post 1'},
{value: 'post-2', label: 'Post 2'},
{value: 'page-1', label: 'Page 1'},
{value: 'page-2', label: 'Page 2'}
]);
});

it('loads more from the first source while it still has more pages', () => {
const loadMoreFirst = vi.fn();
const loadMoreSecond = vi.fn();
const useCombinedSource = createCombinedValueSource(
() => ({
id: 'posts',
useOptions: () => buildState(firstOptions, {
hasMore: true,
loadMore: loadMoreFirst
})
}),
() => ({
id: 'pages',
useOptions: () => buildState(secondOptions, {
hasMore: true,
loadMore: loadMoreSecond
})
})
);

const {result} = renderHook(() => {
const source = useCombinedSource();
return source.useOptions({query: '', selectedValues: []});
});

result.current.loadMore();

expect(loadMoreFirst).toHaveBeenCalledTimes(1);
expect(loadMoreSecond).not.toHaveBeenCalled();
});

it('loads more from the second source once the first source is exhausted', () => {
const loadMoreFirst = vi.fn();
const loadMoreSecond = vi.fn();
const useCombinedSource = createCombinedValueSource(
() => ({
id: 'posts',
useOptions: () => buildState(firstOptions, {
hasMore: false,
loadMore: loadMoreFirst
})
}),
() => ({
id: 'pages',
useOptions: () => buildState(secondOptions, {
hasMore: true,
loadMore: loadMoreSecond
})
})
);

const {result} = renderHook(() => {
const source = useCombinedSource();
return source.useOptions({query: '', selectedValues: []});
});

result.current.loadMore();

expect(loadMoreFirst).not.toHaveBeenCalled();
expect(loadMoreSecond).toHaveBeenCalledTimes(1);
});
});
1 change: 1 addition & 0 deletions apps/shade/src/components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ export * from './components/ui/tabs';
export * from './components/ui/textarea';
export * from './components/ui/toggle-group';
export * from './components/ui/tooltip';
export * from './components/ui/use-filter-options-infinite-scroll';

export type {DropdownMenuCheckboxItemProps as DropdownMenuCheckboxItemProps} from '@radix-ui/react-dropdown-menu';

Expand Down
52 changes: 29 additions & 23 deletions apps/shade/src/components/ui/filters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
import {Popover, PopoverContent, PopoverTrigger} from '@/components/ui/popover';
import {Switch} from '@/components/ui/switch';
import {Tooltip, TooltipContent, TooltipTrigger} from '@/components/ui/tooltip';
import {type FilterOptionsInfiniteScrollSource, useFilterOptionsInfiniteScroll} from '@/components/ui/use-filter-options-infinite-scroll';
import {cva, type VariantProps} from 'class-variance-authority';
import {AlertCircle, Check, Loader2, Plus, X} from 'lucide-react';
import {cn} from '@/lib/utils';
Expand Down Expand Up @@ -1094,10 +1095,8 @@ interface SelectOptionsListProps<T = unknown> {
contextLabel?: string;
selectedOptions: FilterOption<T>[];
unselectedOptions: FilterOption<T>[];
isInitialLoad: boolean;
isLoadingMore: boolean;
hasMore: boolean;
onLoadMore: () => void;
optionSource: FilterOptionsInfiniteScrollSource;
searchInput: string;
onSelectSelected: (option: FilterOption<T>) => void;
onSelectUnselected: (option: FilterOption<T>) => void;
}
Expand All @@ -1106,18 +1105,22 @@ function SelectOptionsList<T = unknown>({
contextLabel,
selectedOptions,
unselectedOptions,
isInitialLoad,
isLoadingMore,
hasMore,
onLoadMore,
optionSource,
searchInput,
onSelectSelected,
onSelectUnselected
}: Readonly<SelectOptionsListProps<T>>) {
const context = useFilterContext();
const renderedOptionsCount = selectedOptions.length + unselectedOptions.length;
const loadMoreSentinelRef = useFilterOptionsInfiniteScroll({
optionSource,
optionsCount: renderedOptionsCount,
resetKey: searchInput
});

return (
<CommandList className="outline-hidden">
{isInitialLoad ? (
{optionSource.isInitialLoad ? (
<div className="flex items-center justify-center py-6 text-sm text-muted-foreground">
<Loader2 className="mr-2 size-4 animate-spin" />
{context.i18n.loading}
Expand Down Expand Up @@ -1167,18 +1170,18 @@ function SelectOptionsList<T = unknown>({
</CommandGroup>
</>
)}
{hasMore && (
{optionSource.hasMore && (
<>
{(selectedOptions.length > 0 || unselectedOptions.length > 0) && <CommandSeparator />}
<div className="p-1.5">
<div ref={loadMoreSentinelRef} className="p-1.5">
<button
className="flex w-full items-center justify-center rounded-xs px-2 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-50"
disabled={isLoadingMore}
disabled={optionSource.isLoadingMore}
type="button"
onClick={onLoadMore}
onClick={optionSource.loadMore}
>
{isLoadingMore && <Loader2 className="mr-2 size-4 animate-spin" />}
{isLoadingMore ? context.i18n.loading : context.i18n.loadMore}
{optionSource.isLoadingMore && <Loader2 className="mr-2 size-4 animate-spin" />}
{optionSource.isLoadingMore ? context.i18n.loading : context.i18n.loadMore}
</button>
</div>
</>
Expand Down Expand Up @@ -1206,6 +1209,13 @@ function ResolvedSelectOptionsPopover<T = unknown>({
// Track selected options separately so they persist during async search
const [cachedSelectedOptions, setCachedSelectedOptions] = useState<FilterOption<T>[]>([]);
const context = useFilterContext();
const optionSource: FilterOptionsInfiniteScrollSource = {
hasMore,
isInitialLoad,
isLoadingMore,
isSearching,
loadMore: onLoadMore
};

const isMultiSelect = field.type === 'multiselect' || values.length > 1;
const effectiveValues = useMemo(() => field.value ?? values, [field.value, values]);
Expand Down Expand Up @@ -1295,12 +1305,10 @@ function ResolvedSelectOptionsPopover<T = unknown>({
/>
<SelectOptionsList
contextLabel={field.label || 'Selected'}
hasMore={hasMore}
isInitialLoad={isInitialLoad}
isLoadingMore={isLoadingMore}
optionSource={optionSource}
searchInput={searchInput}
selectedOptions={visibleSelectedOptions}
unselectedOptions={unselectedOptions}
onLoadMore={onLoadMore}
onSelectSelected={(option) => {
if (isMultiSelect) {
const next = effectiveValues.filter(v => v !== option.value) as T[];
Expand Down Expand Up @@ -1401,12 +1409,10 @@ function ResolvedSelectOptionsPopover<T = unknown>({
onSearchChange={handleSearchChange}
/>
<SelectOptionsList
hasMore={hasMore}
isInitialLoad={isInitialLoad}
isLoadingMore={isLoadingMore}
optionSource={optionSource}
searchInput={searchInput}
selectedOptions={visibleSelectedOptions}
unselectedOptions={unselectedOptions}
onLoadMore={onLoadMore}
onSelectSelected={(option) => {
if (isMultiSelect) {
onChange(values.filter(v => v !== option.value) as T[]);
Expand Down
10 changes: 9 additions & 1 deletion apps/shade/src/components/ui/multi-select-combobox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
CommandList,
CommandSeparator
} from '@/components/ui/command';
import {useFilterOptionsInfiniteScroll} from '@/components/ui/use-filter-options-infinite-scroll';
import {Check, Loader2} from 'lucide-react';
import {cn} from '@/lib/utils';
import type {FilterOption, ValueSource} from '@/components/ui/filters';
Expand Down Expand Up @@ -236,6 +237,13 @@ export function MultiSelectCombobox<T = unknown>({
() => resolvedOptions.filter(opt => !values.includes(opt.value)),
[resolvedOptions, values]
);
const renderedOptionsCount = visibleSelectedOptions.length + unselectedOptions.length;
const loadMoreSentinelRef = useFilterOptionsInfiniteScroll({
optionSource: source,
optionsCount: renderedOptionsCount,
resetKey: searchInput
});

// --- Handlers ---

const handleDeselect = useCallback((option: FilterOption<T>) => {
Expand Down Expand Up @@ -352,7 +360,7 @@ export function MultiSelectCombobox<T = unknown>({
{source.hasMore && (
<>
{(visibleSelectedOptions.length > 0 || unselectedOptions.length > 0) && <CommandSeparator />}
<div className="p-1.5">
<div ref={loadMoreSentinelRef} className="p-1.5">
<button
className="flex w-full items-center justify-center rounded-xs px-2 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-50"
disabled={source.isLoadingMore}
Expand Down
Loading
Loading