TASK: Move DndProvider into new DndContextProvider

Flowpack · Feb 12, 2024 · b08ae00 · b08ae00
1 parent 8fa60a2
commit b08ae00
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 28 deletions.
diff --git a/...rces/Private/JavaScript/asset-collections/src/provider/AssetCollectionTreeDndProvider.tsx b/...rces/Private/JavaScript/asset-collections/src/provider/AssetCollectionTreeDndProvider.tsx
@@ -1,4 +1,6 @@
 import React, { useCallback, useState, createContext, useContext } from 'react';
+import { DndProvider } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
 
 import { useIntl, useNotify } from '@media-ui/core';
 
@@ -103,16 +105,18 @@ export function AssetCollectionTreeDndProvider({ children }: AssetCollectionTree
     );
 
     return (
-        <AssetCollectionDndContext.Provider
-            value={{
-                currentlyDraggedNodes,
-                handleDrag,
-                handeEndDrag,
-                handleDrop,
-                acceptsDraggedNode,
-            }}
-        >
-            {children}
-        </AssetCollectionDndContext.Provider>
+        <DndProvider backend={HTML5Backend}>
+            <AssetCollectionDndContext.Provider
+                value={{
+                    currentlyDraggedNodes,
+                    handleDrag,
+                    handeEndDrag,
+                    handleDrop,
+                    acceptsDraggedNode,
+                }}
+            >
+                {children}
+            </AssetCollectionDndContext.Provider>
+        </DndProvider>
     );
 }
diff --git a/Resources/Private/JavaScript/media-details-screen/src/MediaDetailsScreen.tsx b/Resources/Private/JavaScript/media-details-screen/src/MediaDetailsScreen.tsx
@@ -10,14 +10,14 @@ import { neos } from '@neos-project/neos-ui-decorators';
 import { actions } from '@neos-project/neos-ui-redux-store';
 
 // Media UI dependencies
-// GraphQL type definitions
-import { MediaUiProvider, typeDefs as TYPE_DEFS_CORE } from '@media-ui/core';
 import MediaApplicationWrapper from '@media-ui/core/src/components/MediaApplicationWrapper';
+import { AssetCollectionTreeDndProvider } from '@media-ui/feature-asset-collections/src/provider/AssetCollectionTreeDndProvider';
+import { MediaUiProvider, typeDefs as TYPE_DEFS_CORE } from '@media-ui/core';
 import { CacheFactory, createErrorHandler } from '@media-ui/media-module/src/core';
-import { Details } from './components';
 import { typeDefs as TYPE_DEFS_ASSET_USAGE } from '@media-ui/feature-asset-usage';
 
-// GraphQL local resolvers
+// Package local dependencies
+import { Details } from './components';
 import { MediaDetailsScreenApprovalAttainmentStrategyFactory } from './strategy';
 
 import classes from './MediaDetailsScreen.module.css';
@@ -147,7 +147,9 @@ export class MediaDetailsScreen extends React.PureComponent<MediaDetailsScreenPr
                         containerRef={containerRef}
                         approvalAttainmentStrategyFactory={MediaDetailsScreenApprovalAttainmentStrategyFactory}
                     >
-                        <Details buildLinkToMediaUi={buildLinkToMediaUi} />
+                        <AssetCollectionTreeDndProvider>
+                            <Details buildLinkToMediaUi={buildLinkToMediaUi} />
+                        </AssetCollectionTreeDndProvider>
                     </MediaUiProvider>
                 </MediaApplicationWrapper>
             </div>

diff --git a/Resources/Private/JavaScript/media-details-screen/src/components/Details.tsx b/Resources/Private/JavaScript/media-details-screen/src/components/Details.tsx
@@ -5,8 +5,6 @@ import cx from 'classnames';
 import { InteractionDialogRenderer, useMediaUi } from '@media-ui/core';
 import { useAssetQuery } from '@media-ui/core/src/hooks';
 import { AssetUsagesModal, assetUsageDetailsModalState } from '@media-ui/feature-asset-usage';
-import { ClipboardWatcher } from '@media-ui/feature-clipboard';
-import { ConcurrentChangeMonitor } from '@media-ui/feature-concurrent-editing';
 import { SimilarAssetsModal, similarAssetsModalState } from '@media-ui/feature-similar-assets';
 import { uploadDialogState } from '@media-ui/feature-asset-upload/src/state';
 import { UploadDialog } from '@media-ui/feature-asset-upload/src/components';

diff --git a/Resources/Private/JavaScript/media-details-screen/src/components/PreviewActions.tsx b/Resources/Private/JavaScript/media-details-screen/src/components/PreviewActions.tsx
@@ -5,7 +5,7 @@ import { IconButton } from '@neos-project/react-ui-components';
 
 import { useIntl } from '@media-ui/core';
 import { clipboardItemState } from '@media-ui/feature-clipboard';
-import DownloadAssetButton from 'Resources/Private/JavaScript/media-module/src/components/Actions/DownloadAssetButton';
+import DownloadAssetButton from '@media-ui/media-module/src/components/Actions/DownloadAssetButton';
 
 interface PreviewActionsProps {
     asset: Asset;

diff --git a/Resources/Private/JavaScript/media-module/src/index.tsx b/Resources/Private/JavaScript/media-module/src/index.tsx
@@ -1,22 +1,20 @@
 import React, { createRef } from 'react';
 import { render } from 'react-dom';
 import Modal from 'react-modal';
-import { DndProvider } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
 import { ApolloClient, ApolloLink } from '@apollo/client';
 import { createUploadLink } from 'apollo-upload-client';
 
 // GraphQL type definitions
 import { MediaUiProvider, typeDefs as TYPE_DEFS_CORE } from '@media-ui/core';
 import MediaApplicationWrapper from '@media-ui/core/src/components/MediaApplicationWrapper';
 import { typeDefs as TYPE_DEFS_ASSET_USAGE } from '@media-ui/feature-asset-usage';
+import { AssetCollectionTreeDndProvider } from '@media-ui/feature-asset-collections/src/provider/AssetCollectionTreeDndProvider';
 
 // Internal dependencies
 import { CacheFactory, createErrorHandler } from './core';
 import App from './components/App';
 import ErrorBoundary from './components/ErrorBoundary';
 import loadIconLibrary from './lib/FontAwesome';
-import { AssetCollectionTreeDndProvider } from '@media-ui/feature-asset-collections/src/provider/AssetCollectionTreeDndProvider';
 
 loadIconLibrary();
 
@@ -73,11 +71,9 @@ window.onload = async (): Promise<void> => {
         >
             <ErrorBoundary>
                 <MediaUiProvider dummyImage={dummyImage} containerRef={containerRef}>
-                    <DndProvider backend={HTML5Backend}>
-                        <AssetCollectionTreeDndProvider>
-                            <App />
-                        </AssetCollectionTreeDndProvider>
-                    </DndProvider>
+                    <AssetCollectionTreeDndProvider>
+                        <App />
+                    </AssetCollectionTreeDndProvider>
                 </MediaUiProvider>
             </ErrorBoundary>
         </MediaApplicationWrapper>,

diff --git a/Resources/Private/JavaScript/media-selection-screen/src/MediaSelectionScreen.tsx b/Resources/Private/JavaScript/media-selection-screen/src/MediaSelectionScreen.tsx
@@ -19,6 +19,7 @@ import MediaApplicationWrapper from '@media-ui/core/src/components/MediaApplicat
 import { CacheFactory, createErrorHandler } from '@media-ui/media-module/src/core';
 import App from '@media-ui/media-module/src/components/App';
 import { typeDefs as TYPE_DEFS_ASSET_USAGE } from '@media-ui/feature-asset-usage';
+import { AssetCollectionTreeDndProvider } from '@media-ui/feature-asset-collections/src/provider/AssetCollectionTreeDndProvider';
 
 import classes from './MediaSelectionScreen.module.css';
 
@@ -161,7 +162,9 @@ class MediaSelectionScreen extends React.PureComponent<MediaSelectionScreenProps
                         isInNodeCreationDialog={isInNodeCreationDialog}
                         containerRef={containerRef}
                     >
-                        <App />
+                        <AssetCollectionTreeDndProvider>
+                            <App />
+                        </AssetCollectionTreeDndProvider>
                     </MediaUiProvider>
                 </MediaApplicationWrapper>
             </div>