Skip to content
Permalink
Browse files

fix(Base): Changed fRef prop to innerRef

BREAKING CHANGE: Base component fRef prop updated to innerRef to work better with ReactRouter components
  • Loading branch information...
HHogg committed Feb 17, 2019
1 parent ec1bc5f commit f6d49b4e88cdb2f3400f80a178318eba5b4adea8
Showing with 15 additions and 8 deletions.
  1. +1 −1 site/components/Components/Toolbar.js
  2. +7 −4 src/Base/Base.js
  3. +6 −2 src/Bounds/Bounds.js
  4. +1 −1 src/Placement/PlacementArrow.js
@@ -35,7 +35,7 @@ export default class ComponentToggle extends Component {
<PlacementManager>
<PlacementReference>
{ ({ ref }) => (
<Icon fRef={ ref } name="Star" size="2rem" />
<Icon innerRef={ ref } name="Star" size="2rem" />
) }
</PlacementReference>

@@ -77,10 +77,10 @@ export default class Base extends Component {
container: PropTypes.bool,
/** Applies display styling */
display: PropTypes.oneOf(['block', 'inline-block']),
/** Forwarded React ref function */
fRef: PropTypes.func,
/** Fixed height applied through inline styling */
height: PropTypes.string,
/** Forwarded React ref function */
innerRef: PropTypes.func,
/** Margins applied for the global spacing variables */
margin: PropTypes.oneOf(['x0', 'x1', 'x2', 'x3', 'x4', 'x6', 'x8', 'x10', 'x12', 'x16']),
/** Max width applied through inline styling */
@@ -126,7 +126,7 @@ export default class Base extends Component {
color,
container,
display,
fRef,
innerRef,
height,
maxWidth,
minWidth,
@@ -160,10 +160,13 @@ export default class Base extends Component {
[`Theme--${theme}`]: theme,
}, className);

// Work around for findDOMNode area causing constant renders. Forwards
// refs for component compositions.
rest[typeof Component === 'string' ? 'ref' : 'innerRef'] = innerRef;

return (
<Component { ...rest }
className={ classes }
ref={ fRef }
style={ { height, minHeight, maxWidth, minWidth, width, zIndex, ...style } } />
);
}
@@ -1,6 +1,5 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { findDOMNode } from 'react-dom';
import ResizeObserver from 'resize-observer-polyfill';
import debounce from 'lodash.debounce';
import omit from 'lodash.omit';
@@ -19,6 +18,7 @@ export default class Bounds extends Component {

constructor(props) {
super(props);
this.setRef = this.setRef.bind(this);
this.state = {};
}

@@ -66,13 +66,17 @@ export default class Bounds extends Component {
}
}

setRef(el) {
this.bounds = el;
}

render() {
const { children, ...rest } = this.props;
const { height, width } = this.state;

return (
<Base { ...omit(rest, ['debounce', 'onChange']) }
ref={ (el) => this.bounds = findDOMNode(el) }>
innerRef={ this.setRef }>
{ children({ height, width }) }
</Base>
);
@@ -9,7 +9,7 @@ export default class PlacementArrow extends Component {
{ ({ ref, style }) => (
<Base { ...this.props }
className="Placement__arrow"
fRef={ ref }
innerRef={ ref }
style={ style } />
) }
</PlacementArrowPropsContext.Consumer>

0 comments on commit f6d49b4

Please sign in to comment.
You can’t perform that action at this time.