diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/toggle-selection/toggle.item.selection.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/toggle-selection/toggle.item.selection.js index 615e6f1d16..e6a4a34b83 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/toggle-selection/toggle.item.selection.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/toggle-selection/toggle.item.selection.js @@ -2,29 +2,41 @@ import React, { useContext } from 'react'; import PropTypes from 'prop-types'; import { createCssClassNames } from '../../../common/helpers/css.class.names'; -import { SelectedItemsContext } from '../../universal.discovery.module'; +import { MultipleConfigContext, SelectedItemsContext } from '../../universal.discovery.module'; -const ToggleItemSelection = ({ multiple, item, isHidden }) => { +const ToggleItemSelection = ({ item, isDisabled, isHidden }) => { const { selectedItems } = useContext(SelectedItemsContext); + const [multiple, multipleItemsLimit] = useContext(MultipleConfigContext); const isSelected = selectedItems.some((selectedItem) => selectedItem.type === item.type && selectedItem.id === item.id); + const isSelectionBlocked = multipleItemsLimit !== 0 && selectedItems.length >= multipleItemsLimit && !isSelected; const className = createCssClassNames({ 'c-udw-toggle-selection ibexa-input': true, 'ibexa-input--checkbox': multiple, + 'ibexa-input--radio': !multiple, 'c-udw-toggle-selection--hidden': isHidden, }); const inputType = multiple ? 'checkbox' : 'radio'; - return ; + return ( + + ); }; ToggleItemSelection.propTypes = { item: PropTypes.object.isRequired, - multiple: PropTypes.bool.isRequired, isHidden: PropTypes.bool, + isDisabled: PropTypes.bool, }; ToggleItemSelection.defaultProps = { isHidden: false, + isDisabled: false, }; export default ToggleItemSelection; diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/hooks/useSelectedItemsReducer.js b/src/bundle/ui-dev/src/modules/universal-discovery/hooks/useSelectedItemsReducer.js index 1b230c878d..8e1e18bd13 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/hooks/useSelectedItemsReducer.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/hooks/useSelectedItemsReducer.js @@ -11,15 +11,18 @@ const checkIsItemSelected = (selectedItems, item) => const filterOutSelectedItems = (selectedItems, items) => items.filter((item) => !checkIsItemSelected(selectedItems, item)); +const checkIsValidSelection = (items, isMultiple, multipleItemsLimit) => + (!isMultiple && items.length > 1) || (isMultiple && items.length > multipleItemsLimit); + const selectedItemsReducer = (state, action) => { - const { isMultiple, items } = state; + const { items, isMultiple, multipleItemsLimit } = state; switch (action.type) { case ADD_SELECTED_ITEMS: { const oldItemsWithoutNewItems = filterOutSelectedItems(action.items, items); const newItems = [...oldItemsWithoutNewItems, ...action.items]; - if (!isMultiple && newItems.length > 1) { + if (checkIsValidSelection(newItems, isMultiple, multipleItemsLimit)) { throw new Error('useSelectedItemsReducer ADD_SELECTED_ITEMS: cannot select more than one item with single select.'); } @@ -35,7 +38,7 @@ const selectedItemsReducer = (state, action) => { const newItemsWithoutDeselectedItems = filterOutSelectedItems(items, action.items); const newItems = [...oldItemsWithoutDeselectedItems, ...newItemsWithoutDeselectedItems]; - if (!isMultiple && newItems.length > 1) { + if (checkIsValidSelection(newItems, isMultiple, multipleItemsLimit)) { throw new Error('useSelectedItemsReducer ADD_SELECTED_ITEMS: cannot select more than one item with single select.'); } diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/universal.discovery.module.js b/src/bundle/ui-dev/src/modules/universal-discovery/universal.discovery.module.js index dcaeee39d7..c3df416c12 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/universal.discovery.module.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/universal.discovery.module.js @@ -490,7 +490,7 @@ const UniversalDiscoveryModule = (props) => { - +