[lab] Use forwardRef

mui · Feb 24, 2019 · 730364e · 730364e
1 parent f0e8c94
commit 730364e
Show file tree

Hide file tree

Showing 11 changed files with 237 additions and 156 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 => {
@@ -427,6 +429,11 @@ class Slider extends React.Component {
     this.emitChange(event, value);
   };
 
+  handleRef = ref => {
+    setRef(this.props.innerRef, ref);
+    this.containerRef = ReactDOM.findDOMNode(ref);
+  };
+
   handleDragEnd(event) {
     this.setState({ currentState: 'normal' });
 
@@ -495,6 +502,7 @@ class Slider extends React.Component {
       component: Component,
       thumb: thumbIcon,
       disabled,
+      innerRef,
       max,
       min,
       onChange,
@@ -568,9 +576,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}>
@@ -620,6 +626,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.
@@ -680,4 +691,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', () => {
@@ -192,9 +195,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));