MNT Replace deprcated function findDOMNode

creative-commoners · Aug 28, 2023 · cc077f3 · cc077f3
1 parent 959966b
commit cc077f3
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 19 deletions.
diff --git a/client/dist/js/TinyMCE_sslink-file.js b/client/dist/js/TinyMCE_sslink-file.js
diff --git a/client/dist/js/TinyMCE_ssmedia.js b/client/dist/js/TinyMCE_ssmedia.js
diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js
diff --git a/client/dist/styles/bundle.css b/client/dist/styles/bundle.css
diff --git a/client/src/components/AssetDropzone/AssetDropzone.js b/client/src/components/AssetDropzone/AssetDropzone.js
@@ -1,6 +1,5 @@
 /* global FileReader, Image, document, FormData */
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
 import i18n from 'i18n';
 import DropzoneLib from 'dropzone';
 import $ from 'jquery';
@@ -29,11 +28,13 @@ class AssetDropzone extends Component {
     this.handleQueueComplete = this.handleQueueComplete.bind(this);
     this.loadImage = this.loadImage.bind(this);
     this.handleMaxFilesExceeded = this.handleMaxFilesExceeded.bind(this);
+
+    this.dropzoneRef = React.createRef(null);
   }
 
   componentDidMount() {
     this.dropzone = new DropzoneLib(
-      ReactDOM.findDOMNode(this),
+      this.dropzoneRef.current,
       Object.assign({},
         this.getDefaultOptions(),
         this.props.options
@@ -92,7 +93,7 @@ class AssetDropzone extends Component {
     }
 
     if (uploadSelector) {
-      const found = $(ReactDOM.findDOMNode(this)).find(uploadSelector);
+      const found = $(this.dropzoneRef.current).find(uploadSelector);
       if (found && found.length) {
         clickable = found.toArray();
       }
@@ -268,7 +269,7 @@ class AssetDropzone extends Component {
    * @param {Event} event
    */
   handleDragLeave(event) {
-    const componentNode = ReactDOM.findDOMNode(this);
+    const componentNode = this.dropzoneRef.current;
 
     if (!this.props.canUpload) {
       return;
@@ -552,7 +553,7 @@ class AssetDropzone extends Component {
     }
 
     return (
-      <div className={className.join(' ')}>
+      <div className={className.join(' ')} ref={this.dropzoneRef}>
         {this.props.uploadButton &&
         <button {...buttonProps}>
           {i18n._t('AssetAdmin.DROPZONE_UPLOAD')}

diff --git a/client/src/containers/Gallery/Gallery.js b/client/src/containers/Gallery/Gallery.js
@@ -2,7 +2,6 @@
 import $ from 'jquery';
 import i18n from 'i18n';
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
 import { connect } from 'react-redux';
 import { bindActionCreators, compose } from 'redux';
 import AssetDropzone from 'components/AssetDropzone/AssetDropzone';
@@ -71,6 +70,8 @@ class Gallery extends Component {
     this.handleClearSelection = this.handleClearSelection.bind(this);
     this.toggleSelectConcat = this.toggleSelectConcat.bind(this);
     this.getSelectableFiles = this.getSelectableFiles.bind(this);
+
+    this.gallery = React.createRef(null);
   }
 
   componentDidMount() {
@@ -109,7 +110,7 @@ class Gallery extends Component {
    * @returns {jQuery}
    */
   getSortElement() {
-    return $(ReactDOM.findDOMNode(this)).find('.gallery__sort .dropdown');
+    return $(this.gallery.current).find('.gallery__sort .dropdown');
   }
 
   /**
@@ -321,10 +322,10 @@ class Gallery extends Component {
   }
 
   /**
-   * Handler for when the user changes the sort order
-   *
-   * @param {string} value
-   */
+  * Handler for when the user changes the sort order
+  *
+  * @param {string} value
+  */
   handleSort(value) {
     this.props.actions.queuedFiles.purgeUploadQueue();
     this.props.onSort(value);
@@ -944,7 +945,7 @@ class Gallery extends Component {
     return (
       <div
         className="flexbox-area-grow gallery__outer"
-        ref={gallery => { this.gallery = gallery; }}
+        ref={this.gallery}
       >
         {this.renderTransitionBulkActions()}
         <GalleryDND className={galleryClasses.join(' ')}>