diff --git a/packages/core/helper-plugin/src/hooks/useSelectionState/index.js b/packages/core/helper-plugin/src/hooks/useSelectionState/index.js index 26b1d260a8..5dd8d4ece6 100644 --- a/packages/core/helper-plugin/src/hooks/useSelectionState/index.js +++ b/packages/core/helper-plugin/src/hooks/useSelectionState/index.js @@ -35,11 +35,13 @@ export const useSelectionState = (keys, initialValue) => { }; const selectMultiple = (nextSelections) => { - setSelections([ - ...selections, + setSelections((currSelections) => [ + // already selected items + ...currSelections, + // filter out already selected items from nextSelections ...nextSelections.filter( (nextSelection) => - selections.findIndex((currentSelection) => + currSelections.findIndex((currentSelection) => keys.every((key) => currentSelection[key] === nextSelection[key]) ) === -1 ), @@ -47,8 +49,9 @@ export const useSelectionState = (keys, initialValue) => { }; const deselectMultiple = (nextSelections) => { - setSelections([ - ...selections.filter( + setSelections((currSelections) => [ + // filter out items in currSelections that are in nextSelections + ...currSelections.filter( (currentSelection) => nextSelections.findIndex((nextSelection) => keys.every((key) => currentSelection[key] === nextSelection[key]) diff --git a/packages/core/helper-plugin/src/hooks/useSelectionState/useSelectionState.stories.mdx b/packages/core/helper-plugin/src/hooks/useSelectionState/useSelectionState.stories.mdx index c2c473fd3f..3a0434b277 100644 --- a/packages/core/helper-plugin/src/hooks/useSelectionState/useSelectionState.stories.mdx +++ b/packages/core/helper-plugin/src/hooks/useSelectionState/useSelectionState.stories.mdx @@ -14,7 +14,7 @@ This hook is used in order to facilitate the select / partial selection of a glo import { useSelectionState } from '@strapi/helper-plugin'; const Modal = ({ onToggle, isOpen }) => { - const [selectedAssets, { selectOne, selectAll, selectOnly, setSelections }] = useSelectionState( + const [selectedAssets, { selectOne, selectAll, selectOnly, selectMultiple, deselectMultiple, setSelections }] = useSelectionState( ['id'], // This are the comparaison attribute names [] ); @@ -24,6 +24,8 @@ const Modal = ({ onToggle, isOpen }) => { // selectOne({ id: 1 name: 'Hello' }) add the object to the selection list // selectOnly({ id: 1 name: 'Hello' }) add the object to the selection list and remove every others in the list // selectAll(assets) select all or remove all + // selectMultiple(assets) add the objects to the selection list - does not change already selected objects + // deselectMultiple(assets) remove the objects from the selection list - does not change already selected objects // setSelections(): regular state used in react return ( diff --git a/packages/core/upload/admin/src/components/AssetDialog/index.js b/packages/core/upload/admin/src/components/AssetDialog/index.js index 429f9da712..ce93f40b4a 100644 --- a/packages/core/upload/admin/src/components/AssetDialog/index.js +++ b/packages/core/upload/admin/src/components/AssetDialog/index.js @@ -108,6 +108,7 @@ export const AssetDialog = ({ return undefined; } + // selected files in current folder const alreadySelected = allowedAssets.filter( (asset) => selectedAssets.findIndex((selectedAsset) => selectedAsset.id === asset.id) !== -1 );