DEP Update code to work with upgraded deps

silverstripe · Nov 8, 2022 · c1eac5d · c1eac5d
1 parent 278d185
commit c1eac5d
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 9 deletions.
diff --git a/client/src/bundles/bundle.js b/client/src/bundles/bundle.js
@@ -5,9 +5,9 @@
  */
 
 // Expose fields (see webpack config for matching "externals" config)
-require('expose-loader?HistoryViewer!components/HistoryViewer/HistoryViewer');
+require('expose-loader?exposes=HistoryViewer!components/HistoryViewer/HistoryViewer');
 
-require('expose-loader?versionType!types/versionType');
+require('expose-loader?exposes=versionType!types/versionType');
 
 // Legacy CMS
 require('../legacy/ArchiveAdmin/ArchiveAdmin');

diff --git a/client/src/components/HistoryViewer/HistoryViewer.scss b/client/src/components/HistoryViewer/HistoryViewer.scss
@@ -85,7 +85,7 @@ $diff-added-color: #b9f1c8;
 }
 
 // Hide preview on small devices. @todo replace this with a view toggle component
-@include media-breakpoint-down(md) {
+@include media-breakpoint-down(lg) {
   .history-viewer__preview {
     display: none;
   }

diff --git a/client/src/legacy/HistoryViewer/HistoryViewerEntwine.js b/client/src/legacy/HistoryViewer/HistoryViewerEntwine.js
@@ -1,6 +1,7 @@
 import jQuery from 'jquery';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { loadComponent } from 'lib/Injector';
 
 /**
@@ -9,6 +10,8 @@ import { loadComponent } from 'lib/Injector';
  */
 jQuery.entwine('ss', ($) => {
   $('.js-injector-boot .history-viewer__container').entwine({
+    ReactRoot: null,
+
     onmatch() {
       const cmsContent = this.closest('.cms-content').attr('id');
       const context = (cmsContent)
@@ -25,14 +28,17 @@ jQuery.entwine('ss', ($) => {
         isInGridField: schemaData.data.isInGridField || !this.hasClass('history-viewer--standalone'),
       };
 
-      ReactDOM.render(
-        <HistoryViewerComponent {...props} />,
-        this[0]
-      );
+      const root = createRoot(this[0]);
+      root.render(<HistoryViewerComponent {...props} />);
+      this.setReactRoot(root);
     },
 
     onunmatch() {
-      ReactDOM.unmountComponentAtNode(this[0]);
+      const root = this.getReactRoot();
+      if (root) {
+        root.unmount();
+        this.setReactRoot(null);
+      }
     }
   });
 

diff --git a/client/src/state/historyviewer/HistoryViewerActions.js b/client/src/state/historyviewer/HistoryViewerActions.js
@@ -1,5 +1,5 @@
+import { v1 as uuidv1 } from 'uuid';
 import HISTORY_VIEWER from './HistoryViewerActionTypes';
-import uuidv1 from 'uuid/v1';
 
 /**
  * Setting the current version will enable context views for a specific record