Items selection adjustment

ibexa · Nov 25, 2024 · 88071ea · 88071ea
1 parent 4e564cf
commit 88071ea
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 8 deletions.
diff --git a/...-dev/src/modules/universal-discovery/components/toggle-selection/toggle.item.selection.js b/...-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 <input type={inputType} className={className} checked={isSelected} disabled={isHidden} readOnly={true} />;
+    return (
+        <input
+            type={inputType}
+            className={className}
+            checked={isSelected}
+            disabled={isSelectionBlocked || isDisabled || isHidden}
+            readOnly={true}
+        />
+    );
 };
 
 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
@@ -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
@@ -490,7 +490,7 @@ const UniversalDiscoveryModule = (props) => {
                             <AllowConfirmationContext.Provider value={props.allowConfirmation}>
                                 <ContentTypesInfoMapContext.Provider value={contentTypesInfoMap}>
                                     <ContentTypesMapContext.Provider value={contentTypesMapGlobal}>
-                                        <MultipleConfigContext.Provider value={[true, 10]}>
+                                        <MultipleConfigContext.Provider value={[props.multiple, props.multipleItemsLimit]}>
                                             <ContainersOnlyContext.Provider value={props.containersOnly}>
                                                 <AllowedContentTypesContext.Provider value={props.allowedContentTypes}>
                                                     <SnackbarActionsContext.Provider value={props.snackbarEnabledActions}>