Remove findDOMNode usages

JetBrains · May 28, 2021 · 9c453ff · 9c453ff
1 parent 966fd94
commit 9c453ff
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 22 deletions.
diff --git a/components/button/button.js b/components/button/button.js
@@ -1,5 +1,5 @@
 import 'focus-visible';
-import React, {PureComponent} from 'react';
+import React, {createRef, PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import chevronDown from '@jetbrains/icons/chevron-10px';
@@ -47,6 +47,8 @@ class Button extends PureComponent {
   static IconSize = Size;
   static Theme = Theme;
 
+  buttonRef = createRef();
+
   render() {
     const {
       // Modifiers
@@ -102,6 +104,7 @@ class Button extends PureComponent {
     const Tag = isLink ? ClickableLink : 'button';
     return (
       <Tag
+        ref={this.buttonRef}
         tabIndex={loader ? -1 : 0}
         type={isLink ? null : 'button'}
         {...props}

diff --git a/components/progress-bar/progress-bar.test.js b/components/progress-bar/progress-bar.test.js
@@ -1,6 +1,4 @@
-/* eslint-disable react/no-find-dom-node */
 import React from 'react';
-import {findDOMNode} from 'react-dom';
 import {shallow, mount} from 'enzyme';
 
 import Theme from '../global/theme';
@@ -48,14 +46,14 @@ describe('Progress Bar', () => {
         className: 'test-class'
       });
 
-      findDOMNode(wrapper.instance().progressbarWrapper).should.have.class('test-class');
+      wrapper.instance().progressbarWrapper.should.have.class('test-class');
     });
 
     it('should set light modifier', () => {
       const wrapper = mountProgressBar({
         theme: Theme.DARK
       });
-      findDOMNode(wrapper.instance().progressbarWrapper).
+      wrapper.instance().progressbarWrapper.
         should.have.class(styles.dark);
     });
 
@@ -64,7 +62,7 @@ describe('Progress Bar', () => {
         global: true
       });
 
-      findDOMNode(wrapper.instance().progressbarWrapper).
+      wrapper.instance().progressbarWrapper.
         should.have.class(styles.globalMode);
     });
   });
@@ -76,24 +74,24 @@ describe('Progress Bar', () => {
   describe('#render', () => {
     it('should set min value to equal zero', () => {
       const wrapper = mountProgressBar();
-      findDOMNode(wrapper.instance().progressbar).should.have.attr('aria-valuemin', '0');
+      wrapper.instance().progressbar.should.have.attr('aria-valuemin', '0');
     });
 
     it('should update max value in DOM', () => {
       const wrapper = mountProgressBar({
         max: 100
       });
 
-      findDOMNode(wrapper.instance().progressbar).should.have.attr('aria-valuemax', '100');
+      wrapper.instance().progressbar.should.have.attr('aria-valuemax', '100');
     });
 
     it('should update progress value in DOM', () => {
       const wrapper = mountProgressBar({
         value: 0.5
       });
 
-      findDOMNode(wrapper.instance().progressbar).should.have.attr('aria-valuenow', '0.5');
-      findDOMNode(wrapper.instance().progressbar).should.have.attr('style').match(/width: 50%;/);
+      wrapper.instance().progressbar.should.have.attr('aria-valuenow', '0.5');
+      wrapper.instance().progressbar.should.have.attr('style').match(/width: 50%;/);
     });
 
     it('should set width equal 100% if progress value more than max value', () => {
@@ -102,14 +100,14 @@ describe('Progress Bar', () => {
         value: 10
       });
 
-      findDOMNode(wrapper.instance().progressbar).should.have.attr('style').match(/width: 100%;/);
+      wrapper.instance().progressbar.should.have.attr('style').match(/width: 100%;/);
     });
 
     it('should not set style if value is not a number', () => {
       const wrapper = mountProgressBar({
         value: null
       });
-      findDOMNode(wrapper.instance().progressbar).should.not.have.attr('style');
+      wrapper.instance().progressbar.should.not.have.attr('style');
     });
   });
 });
diff --git a/components/query-assist/query-assist.test.js b/components/query-assist/query-assist.test.js
@@ -1,7 +1,6 @@
-/* eslint-disable no-magic-numbers,react/no-find-dom-node */
+/* eslint-disable no-magic-numbers */
 
 import React from 'react';
-import {findDOMNode} from 'react-dom';
 import {Simulate} from 'react-dom/test-utils';
 import {mount} from 'enzyme';
 
@@ -474,7 +473,7 @@ describe('Query Assist', () => {
 
       instance.requestData().
         then(() => {
-          const list = findDOMNode(instance._popup.list);
+          const list = instance._popup.list.container;
           const {length} = suggestions;
 
           list.querySelectorAll('[data-test~=ring-list-item]').should.have.length(length);
@@ -598,7 +597,7 @@ describe('Query Assist', () => {
         onApply
       }).find('QueryAssist').instance();
 
-      Simulate.click(findDOMNode(instance.glass));
+      Simulate.click(instance.glass.buttonRef.current);
       onApply.should.have.been.calledWithMatch({
         query: testQuery,
         caret: testQueryLength
@@ -612,7 +611,7 @@ describe('Query Assist', () => {
         onClear
       }).find('QueryAssist').instance();
 
-      Simulate.click(findDOMNode(instance.clear));
+      Simulate.click(instance.clear.buttonRef.current);
       onClear.should.have.been.calledWithExactly();
     });
   });

diff --git a/components/select/select.test.js b/components/select/select.test.js
@@ -1,6 +1,5 @@
-/* eslint-disable no-magic-numbers, react/no-find-dom-node */
+/* eslint-disable no-magic-numbers*/
 import React from 'react';
-import {findDOMNode} from 'react-dom';
 import {Simulate} from 'react-dom/test-utils';
 import {shallow, mount} from 'enzyme';
 
@@ -212,7 +211,7 @@ describe('Select', () => {
     const instance = wrapper.instance();
     instance._showPopup();
 
-    Simulate.mouseDown(findDOMNode(instance._popup.list));
+    Simulate.mouseDown(instance._popup.list.container);
     Simulate.blur(instance.filter);
     sandbox.clock.tick();
     instance._popup.props.hidden.should.be.false;
@@ -623,7 +622,7 @@ describe('Select', () => {
       const instance = wrapper.instance();
       instance._showPopup();
       instance.filterValue('test');
-      findDOMNode(instance._popup.filter).value.should.equal('test');
+      instance._popup.filter.value.should.equal('test');
     });
 
     it('Should set target input value in input mode', () => {
@@ -642,7 +641,7 @@ describe('Select', () => {
       instance._showPopup();
       instance._hidePopup();
       instance._showPopup();
-      findDOMNode(instance._popup.filter).value.should.equal('');
+      instance._popup.filter.value.should.equal('');
     });
   });