[core] forward innerRef for certain components (#14536)

* [core] Move hoistInternalStatics into core * [core] add withForwardedRef hoc * [core] forward ref to root component * [Grid] Fix failing test * [ButtonBase] Use aria-disabled if disabled is not valid * [ExpansionPanelSummary] Fix tests * [SwitchBase] Fix failing tests - forwardRef for TouchRipple was a bad idea. We need the imperative handles of the class * [OutlinedInput] Fix failing test * [core] Revert forwardRef for modal and dialog Caused all tests to fail. Defering until absolutely necessary * [GridListTile] Fix ref forwarding * [TextField] Fix failing test * [Popover] Revert forwardRef * [TablePagination] Fix tests * {Tabs] Revert forwardRef * [Tab] Fix failing test * [BottomNavigation] Fix tests * [ButtonBase] Fix tests * [Chip] Fix chipRef being undefined Fixes test suite * [Collapse] Revert forwardRef * [Drawer] Fix tests * [core] Move hoistStatics to utils/hoistMuiStatics * [ExpansionPanel] Fix tests * [FilledInput] Fix tests * [GridListTile] Fix failing tests * [Input] Fix test * [Textarea] Revert forwardRef * [InputLabel] Fix tests * [Menu] Fix menu tests [skip ci] * [Snackbar] Fix tests [skip ci] * [TablePagination] Fix tests broken due to rebase * [core] Format rebased files * [docs] Fix API docs - added accidentally deleted component JSDOCs - ignored innerRef from withForwardRef HOC * [core] Fix lint errors * [lab] Use forwardRef * fix rebase issue
mui · Mar 1, 2019 · 8a13bc2 · 8a13bc2
1 parent 4e902a7
commit 8a13bc2
Show file tree

Hide file tree

Showing 121 changed files with 1,408 additions and 1,038 deletions.
diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js
@@ -5,6 +5,8 @@ import clsx from 'clsx';
 import withStyles from '@material-ui/core/styles/withStyles';
 import ButtonBase from '@material-ui/core/ButtonBase';
 import { fade } from '@material-ui/core/styles/colorManipulator';
+import { setRef } from '@material-ui/core/utils/reactHelpers';
+import withForwardedRef from '@material-ui/core/utils/withForwardedRef';
 import clamp from '../utils/clamp';
 
 export const styles = theme => {
@@ -431,6 +433,11 @@ class Slider extends React.Component {
     this.emitChange(event, value);
   };
 
+  handleRef = ref => {
+    setRef(this.props.innerRef, ref);
+    this.containerRef = ReactDOM.findDOMNode(ref);
+  };
+
   handleDragEnd(event) {
     const { onDragEnd, valueReducer } = this.props;
 
@@ -516,6 +523,7 @@ class Slider extends React.Component {
       component: Component,
       thumb: thumbIcon,
       disabled,
+      innerRef,
       max,
       min,
       onChange,
@@ -589,9 +597,7 @@ class Slider extends React.Component {
         onMouseDown={this.handleMouseDown}
         onTouchStartCapture={this.handleTouchStart}
         onTouchMove={this.handleTouchMove}
-        ref={ref => {
-          this.containerRef = ReactDOM.findDOMNode(ref);
-        }}
+        ref={this.handleRef}
         {...other}
       >
         <div className={containerClasses}>
@@ -641,6 +647,11 @@ Slider.propTypes = {
    * If `true`, the slider will be disabled.
    */
   disabled: PropTypes.bool,
+  /**
+   * @ignore
+   * from `withForwardRef`
+   */
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The maximum allowed value of the slider.
    * Should not be equal to min.
@@ -701,4 +712,4 @@ Slider.defaultProps = {
   valueReducer: defaultValueReducer,
 };
 
-export default withStyles(styles, { name: 'MuiSlider', withTheme: true })(Slider);
+export default withStyles(styles, { name: 'MuiSlider', withTheme: true })(withForwardedRef(Slider));
diff --git a/packages/material-ui-lab/src/Slider/Slider.test.js b/packages/material-ui-lab/src/Slider/Slider.test.js
@@ -3,8 +3,8 @@ import { spy } from 'sinon';
 import { assert } from 'chai';
 import {
   createMount,
-  createShallow,
   getClasses,
+  findOutermostIntrinsic,
   wrapsIntrinsicElement,
 } from '@material-ui/core/test-utils';
 import Slider, { defaultValueReducer } from './Slider';
@@ -16,11 +16,9 @@ function touchList(touchArray) {
 
 describe('<Slider />', () => {
   let mount;
-  let shallow;
   let classes;
 
   before(() => {
-    shallow = createShallow({ dive: true });
     classes = getClasses(<Slider value={0} />);
     mount = createMount();
   });
@@ -33,19 +31,24 @@ describe('<Slider />', () => {
   }
 
   it('should render a div', () => {
-    const wrapper = shallow(<Slider value={0} />);
-    assert.strictEqual(wrapper.name(), 'div');
+    const wrapper = mount(<Slider value={0} />);
+    assert.strictEqual(findOutermostIntrinsic(wrapper).type(), 'div');
   });
 
   it('should render with the default classes', () => {
-    const wrapper = shallow(<Slider value={0} />);
-    assert.strictEqual(wrapper.hasClass(classes.root), true);
+    const wrapper = mount(<Slider value={0} />);
+    assert.strictEqual(findOutermostIntrinsic(wrapper).hasClass(classes.root), true);
   });
 
   it('should render with the default and user classes', () => {
-    const wrapper = shallow(<Slider value={0} className="mySliderClass" />);
-    assert.strictEqual(wrapper.hasClass(classes.root), true);
-    assert.strictEqual(wrapper.hasClass('mySliderClass'), true);
+    const wrapper = mount(<Slider value={0} className="mySliderClass" />);
+    assert.strictEqual(
+      wrapper
+        .find(`.${classes.root}`)
+        .first()
+        .hasClass('mySliderClass'),
+      true,
+    );
   });
 
   it('should call handlers', () => {
@@ -208,9 +211,14 @@ describe('<Slider />', () => {
 
   describe('prop: vertical', () => {
     it('should render with the default and vertical classes', () => {
-      const wrapper = shallow(<Slider vertical value={0} />);
-      assert.strictEqual(wrapper.hasClass(classes.root), true);
-      assert.strictEqual(wrapper.hasClass(classes.vertical), true);
+      const wrapper = mount(<Slider vertical value={0} />);
+      assert.strictEqual(
+        wrapper
+          .find(`.${classes.root}`)
+          .first()
+          .hasClass(classes.vertical),
+        true,
+      );
     });
   });
 

diff --git a/packages/material-ui-lab/src/SpeedDial/SpeedDial.js b/packages/material-ui-lab/src/SpeedDial/SpeedDial.js
@@ -8,6 +8,7 @@ import Zoom from '@material-ui/core/Zoom';
 import { duration } from '@material-ui/core/styles/transitions';
 import Fab from '@material-ui/core/Fab';
 import { isMuiElement, setRef } from '@material-ui/core/utils/reactHelpers';
+import withForwardedRef from '@material-ui/core/utils/withForwardedRef';
 import * as utils from './utils';
 import clamp from '../utils/clamp';
 
@@ -162,6 +163,7 @@ class SpeedDial extends React.Component {
       className: classNameProp,
       hidden,
       icon: iconProp,
+      innerRef,
       onClick,
       onClose,
       onKeyDown,
@@ -238,7 +240,11 @@ class SpeedDial extends React.Component {
     }
 
     return (
-      <div className={clsx(classes.root, actionsPlacementClass, classNameProp)} {...other}>
+      <div
+        className={clsx(classes.root, actionsPlacementClass, classNameProp)}
+        ref={innerRef}
+        {...other}
+      >
         <TransitionComponent
           in={!hidden}
           timeout={transitionDuration}
@@ -316,6 +322,11 @@ SpeedDial.propTypes = {
    * provides a default Icon with animation.
    */
   icon: PropTypes.element.isRequired,
+  /**
+   * @ignore
+   * from `withForwardRef`
+   */
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * @ignore
    */
@@ -367,4 +378,4 @@ SpeedDial.defaultProps = {
   },
 };
 
-export default withStyles(styles, { name: 'MuiSpeedDial' })(SpeedDial);
+export default withStyles(styles, { name: 'MuiSpeedDial' })(withForwardedRef(SpeedDial));