diff --git a/src/hooks/useFilterConfig/helpers/filterTypeHelpers/checkboxType.js b/src/hooks/useFilterConfig/helpers/filterTypeHelpers/checkboxType.js index b2bd66d..cb70197 100644 --- a/src/hooks/useFilterConfig/helpers/filterTypeHelpers/checkboxType.js +++ b/src/hooks/useFilterConfig/helpers/filterTypeHelpers/checkboxType.js @@ -1,23 +1,35 @@ import { configItemItemByLabel, defaultOnChange, stringToId } from '../helpers'; +export const DEFAULT_MODAL_VISIBLE_ITEM_COUNT = 10; + +const getVisibleItemCount = (modal) => + modal?.visibleItemCount ?? DEFAULT_MODAL_VISIBLE_ITEM_COUNT; + const checkboxType = { - filterValues: ({ items, label, modal }, handler, value, openFilterModal) => ({ - items: [ - ...items, - ...(modal - ? [ - { - // TODO The checkbox filter in frontend-components does not really support "Show more", like the group filter. - label: 'Show more', - value: 'modal', - onClick: () => openFilterModal?.(stringToId(label)), - }, - ] - : []), - ], - value, - ...defaultOnChange(handler, stringToId(label)), - }), + filterValues: ({ items, label, modal }, handler, value, openFilterModal) => { + const dropdownItems = modal + ? items.slice(0, getVisibleItemCount(modal)) + : items; + + return { + items: [ + ...dropdownItems, + ...(modal + ? [ + { + label: 'Show more', + value: 'modal', + hasCheckbox: false, + isLoadButton: true, + onClick: () => openFilterModal?.(stringToId(label)), + }, + ] + : []), + ], + value, + ...defaultOnChange(handler, stringToId(label)), + }; + }, filterChips: (configItem, value) => ({ category: configItem.label, chips: value.map((chipValue) => { diff --git a/src/hooks/useFilterConfig/helpers/filterTypeHelpers/checkboxType.test.js b/src/hooks/useFilterConfig/helpers/filterTypeHelpers/checkboxType.test.js index 0134bff..f789bfc 100644 --- a/src/hooks/useFilterConfig/helpers/filterTypeHelpers/checkboxType.test.js +++ b/src/hooks/useFilterConfig/helpers/filterTypeHelpers/checkboxType.test.js @@ -1,9 +1,9 @@ import { faker } from '@faker-js/faker'; -import { genre } from '~/support/factories/filters'; +import { genre, genreWithModal } from '~/support/factories/filters'; import { genres } from '~/support/factories/items'; -import checkboxType from './checkboxType'; +import checkboxType, { DEFAULT_MODAL_VISIBLE_ITEM_COUNT } from './checkboxType'; import { stringToId } from '../helpers'; describe('checkboxType', () => { @@ -18,6 +18,36 @@ describe('checkboxType', () => { }), ); }); + + it('should limit dropdown items when modal is enabled', () => { + const { items } = checkboxType.filterValues( + genreWithModal, + () => {}, + [], + jest.fn(), + ); + + expect(items).toHaveLength(DEFAULT_MODAL_VISIBLE_ITEM_COUNT + 1); + expect(items.slice(0, -1)).toEqual( + genreWithModal.items.slice(0, DEFAULT_MODAL_VISIBLE_ITEM_COUNT), + ); + expect(items[items.length - 1].label).toBe('Show more'); + }); + + it('should allow overriding the visible item count via modal.visibleItemCount', () => { + const visibleItemCount = 3; + const { items } = checkboxType.filterValues( + { ...genreWithModal, modal: { visibleItemCount } }, + () => {}, + [], + jest.fn(), + ); + + expect(items).toHaveLength(visibleItemCount + 1); + expect(items.slice(0, -1)).toEqual( + genreWithModal.items.slice(0, visibleItemCount), + ); + }); }); describe('filterChips', () => {