Skip to content

Commit

Permalink
Remove references to innerRef in the code and documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
@CorinChappy
CorinChappy committed Nov 26, 2018
1 parent b19f7e4 commit 36d178d
Show file tree
Hide file tree
Showing 8 changed files with 68 additions and 71 deletions.
14 changes: 7 additions & 7 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,10 +43,10 @@ class SimpleDemo extends React.Component {
attachment: 'together',
},
]}
/* renderTarget: This is what the item will be tethered to, make sure to use innerRef */
renderTarget={innerRef => (
/* renderTarget: This is what the item will be tethered to, make sure to attach the ref */
renderTarget={ref => (
<button
ref={innerRef}
ref={ref}
onClick={() => {
this.setState({ isOpen: !isOpen });
}}
Expand All @@ -55,9 +55,9 @@ class SimpleDemo extends React.Component {
</button>
)}
/* renderElement: If present, this item will be tethered to the the component returned by renderTarget */
renderElement={innerRef =>
renderElement={ref =>
isOpen && (
<div ref={innerRef}>
<div ref={ref}>
<h2>Tethered Content</h2>
<p>A paragraph to accompany the title.</p>
</div>
Expand All @@ -73,11 +73,11 @@ class SimpleDemo extends React.Component {

#### `renderTarget`: PropTypes.func

This is a [render prop](https://reactjs.org/docs/render-props.html), the component returned from this function will be Tether's `target`. One argument, innerRef, is passed into this function. This is a ref that must be attached to the highest possible DOM node in the tree. If this is not done the element will not render.
This is a [render prop](https://reactjs.org/docs/render-props.html), the component returned from this function will be Tether's `target`. One argument, ref, is passed into this function. This is a ref that must be attached to the highest possible DOM node in the tree. If this is not done the element will not render.

#### `renderElement`: PropTypes.func

This is a [render prop](https://reactjs.org/docs/render-props.html), the component returned from this function will be Tether's `element`, that will be moved. If no component is returned, the target will still render, but with no element tethered. One argument, innerRef, is passed into this function. This is a ref that must be attached to the highest possible DOM node in the tree. If this is not done the element will not render.
This is a [render prop](https://reactjs.org/docs/render-props.html), the component returned from this function will be Tether's `element`, that will be moved. If no component is returned, the target will still render, but with no element tethered. One argument, ref, is passed into this function. This is a ref that must be attached to the highest possible DOM node in the tree. If this is not done the element will not render.

#### `renderElementTag`: PropTypes.string

Expand Down
41 changes: 19 additions & 22 deletions example/components/demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,25 +29,22 @@ type DraggableTargetProps = {
height: number,
id: string,
width: number,
innerRef: RefObject<HTMLDivElement>,
};
const DraggableTarget = ({
color,
height,
id,
width,
innerRef,
...props
}: DraggableTargetProps) => (
<Draggable {...props}>
<GrabbableTarget
ref={innerRef}
color={color}
height={height}
width={width}
id={id}
/>
</Draggable>
const DraggableTarget = React.forwardRef(
(
{ color, height, id, width, ...props }: DraggableTargetProps,
ref: RefObject<HTMLDivElement>
) => (
<Draggable {...props}>
<GrabbableTarget
ref={ref}
color={color}
height={height}
width={width}
id={id}
/>
</Draggable>
)
);

const Text = styled.p`
Expand Down Expand Up @@ -160,9 +157,9 @@ export default class Demo extends React.Component {
attachment: 'together',
},
]}
renderTarget={innerRef => (
renderTarget={ref => (
<DraggableTarget
innerRef={innerRef}
ref={ref}
id="DRAG_ME"
height={100}
width={100}
Expand All @@ -174,9 +171,9 @@ export default class Demo extends React.Component {
defaultPosition={{ x: 25, y: 125 }}
/>
)}
renderElement={innerRef =>
renderElement={ref =>
this.state.on && (
<Tooltip ref={innerRef} id="WATCH_ME">
<Tooltip ref={ref} id="WATCH_ME">
<Text>Drag the box around</Text>
<Text>I&apos;ll stay within the outline</Text>
</Tooltip>
Expand Down
8 changes: 4 additions & 4 deletions example/components/page-title.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,16 +77,16 @@ class PageTitle extends React.Component<PageTitleProps> {
attachment: 'together',
},
]}
renderTarget={innerRef => (
renderTarget={ref => (
<Target
ref={innerRef}
ref={ref}
height="100"
width="100"
color={this.props.theme.colors[this.state.count]}
/>
)}
renderElement={innerRef => (
<Tooltip ref={innerRef} side={this.direction(side)}>
renderElement={ref => (
<Tooltip ref={ref} side={this.direction(side)}>
<Title>{children}</Title>
</Tooltip>
)}
Expand Down
8 changes: 4 additions & 4 deletions example/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,11 +63,11 @@ class App extends Component {
const TetheredThing = () => (
<TetherComponent
attachment="middle left"
renderTarget={innerRef => (
<p ref={innerRef}>The target component</p>
renderTarget={ref => (
<p ref={ref}>The target component</p>
)}
renderElement={innerRef => (
<p>The tethered component</p>
renderElement={ref => (
<p ref={ref}>The tethered component</p>
)}
</TetherComponent>)
`}
Expand Down
6 changes: 3 additions & 3 deletions src/TetherComponent.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,10 +67,10 @@ class TetherComponent extends Component {
renderElementTo: null,
};

// The DOM node of the target, obtained using innerRef in the render prop
// The DOM node of the target, obtained using ref in the render prop
_targetNode = React.createRef();

// The DOM node of the element, obtained using innerRef in the render prop
// The DOM node of the element, obtained using ref in the render prop
_elementNode = React.createRef();

_elementParentNode = null;
Expand Down Expand Up @@ -132,7 +132,7 @@ class TetherComponent extends Component {
}

_runRenders() {
// To obtain the components, we run the render functions and pass in innerRef
// To obtain the components, we run the render functions and pass in the ref
// Later, when the component is mounted, the ref functions will be called
// and trigger a tether update
let targetComponent =
Expand Down
2 changes: 1 addition & 1 deletion src/react-tether.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ declare namespace ReactTether {
attachment: TetherAttachment;
targetAttachment: TetherAttachment;
};
type RenderProp = (innerRef: React.RefObject<HTMLElement>) => React.ReactNode;
type RenderProp = (ref: React.RefObject<HTMLElement>) => React.ReactNode;

interface TetherComponentProps
extends React.Props<TetherComponent>,
Expand Down
56 changes: 28 additions & 28 deletions tests/unit/component.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ describe('TetherComponent', () => {
wrapper = mount(
<TetherComponent
attachment="top left"
renderTarget={innerRef => <div ref={innerRef} id="target" />}
renderElement={innerRef => <div ref={innerRef} id="element" />}
renderTarget={ref => <div ref={ref} id="target" />}
renderElement={ref => <div ref={ref} id="element" />}
/>
);
expect(wrapper.find('#target').exists()).toBeTruthy();
Expand All @@ -27,8 +27,8 @@ describe('TetherComponent', () => {
wrapper = mount(
<TetherComponent
attachment="top left"
renderTarget={innerRef => <div ref={innerRef} id="target" />}
renderElement={innerRef => <div ref={innerRef} id="element" />}
renderTarget={ref => <div ref={ref} id="target" />}
renderElement={ref => <div ref={ref} id="element" />}
/>
);
expect(wrapper.find('#element').exists()).toBeTruthy();
Expand All @@ -38,8 +38,8 @@ describe('TetherComponent', () => {
wrapper = mount(
<TetherComponent
attachment="top left"
renderTarget={innerRef => <div ref={innerRef} id="target" />}
renderElement={innerRef => <div ref={innerRef} id="element" />}
renderTarget={ref => <div ref={ref} id="target" />}
renderElement={ref => <div ref={ref} id="element" />}
/>
);
const tetherElement = document.querySelector('.tether-element');
Expand All @@ -50,8 +50,8 @@ describe('TetherComponent', () => {
wrapper = mount(
<TetherComponent
attachment="top left"
renderTarget={innerRef => <div ref={innerRef} id="target" />}
renderElement={innerRef => <div ref={innerRef} id="element" />}
renderTarget={ref => <div ref={ref} id="target" />}
renderElement={ref => <div ref={ref} id="element" />}
/>
);
const element = document.querySelector('.tether-element #element');
Expand All @@ -62,7 +62,7 @@ describe('TetherComponent', () => {
wrapper = mount(
<TetherComponent
attachment="top left"
renderTarget={innerRef => <div ref={innerRef} id="target" />}
renderTarget={ref => <div ref={ref} id="target" />}
/>
);
expect(wrapper.find('#target').exists()).toBeTruthy();
Expand All @@ -72,7 +72,7 @@ describe('TetherComponent', () => {
wrapper = mount(
<TetherComponent
attachment="top left"
renderTarget={innerRef => <div ref={innerRef} id="target" />}
renderTarget={ref => <div ref={ref} id="target" />}
/>
);
expect(document.querySelector('.tether-element')).toBeFalsy();
Expand All @@ -82,13 +82,13 @@ describe('TetherComponent', () => {
wrapper = mount(
<TetherComponent
attachment="top left"
renderElement={innerRef => <div ref={innerRef} id="element" />}
renderElement={ref => <div ref={ref} id="element" />}
/>
);
expect(document.querySelector('.tether-element')).toBeFalsy();
});

it('should not create a tether element if innerRef is not bound to a dom node', () => {
it('should not create a tether element if ref is not bound to a dom node', () => {
const FalsyComponent = () => null;
wrapper = mount(
<TetherComponent
Expand All @@ -108,11 +108,11 @@ describe('TetherComponent', () => {
return (
<TetherComponent
attachment="top left"
renderTarget={innerRef =>
this.state.firstOn && <div ref={innerRef} id="target" />
renderTarget={ref =>
this.state.firstOn && <div ref={ref} id="target" />
}
renderElement={innerRef =>
this.state.secondOn && <div ref={innerRef} id="element" />
renderElement={ref =>
this.state.secondOn && <div ref={ref} id="element" />
}
/>
);
Expand Down Expand Up @@ -144,8 +144,8 @@ describe('TetherComponent', () => {
<TetherComponent
attachment="top left"
renderElementTag="aside"
renderTarget={innerRef => <div ref={innerRef} id="target" />}
renderElement={innerRef => <div ref={innerRef} id="element" />}
renderTarget={ref => <div ref={ref} id="target" />}
renderElement={ref => <div ref={ref} id="element" />}
/>
);
expect(document.querySelector('.tether-element').nodeName).toBe('ASIDE');
Expand All @@ -160,8 +160,8 @@ describe('TetherComponent', () => {
<TetherComponent
attachment="top left"
renderElementTag={this.state.isAside ? 'aside' : 'div'}
renderTarget={innerRef => <div ref={innerRef} id="target" />}
renderElement={innerRef => <div ref={innerRef} id="element" />}
renderTarget={ref => <div ref={ref} id="target" />}
renderElement={ref => <div ref={ref} id="element" />}
/>
);
}
Expand All @@ -186,8 +186,8 @@ describe('TetherComponent', () => {
<TetherComponent
attachment="top left"
renderElementTo="#test-container"
renderTarget={innerRef => <div ref={innerRef} id="target" />}
renderElement={innerRef => <div ref={innerRef} id="element" />}
renderTarget={ref => <div ref={ref} id="target" />}
renderElement={ref => <div ref={ref} id="element" />}
/>
);

Expand Down Expand Up @@ -219,8 +219,8 @@ describe('TetherComponent', () => {
renderElementTo={
this.state.isOne ? '#test-container' : '#test-container2'
}
renderTarget={innerRef => <div ref={innerRef} id="target" />}
renderElement={innerRef => <div ref={innerRef} id="element" />}
renderTarget={ref => <div ref={ref} id="target" />}
renderElement={ref => <div ref={ref} id="element" />}
/>
);
}
Expand Down Expand Up @@ -250,8 +250,8 @@ describe('TetherComponent', () => {
<TetherComponent
attachment="top left"
onUpdate={onUpdate}
renderTarget={innerRef => <div ref={innerRef} id="target" />}
renderElement={innerRef => <div ref={innerRef} id="element" />}
renderTarget={ref => <div ref={ref} id="target" />}
renderElement={ref => <div ref={ref} id="element" />}
/>
);

Expand All @@ -273,8 +273,8 @@ describe('TetherComponent', () => {
<TetherComponent
attachment="top left"
onRepositioned={onRepositioned}
renderTarget={innerRef => <div ref={innerRef} id="target" />}
renderElement={innerRef => <div ref={innerRef} id="element" />}
renderTarget={ref => <div ref={ref} id="target" />}
renderElement={ref => <div ref={ref} id="element" />}
/>
);

Expand Down
4 changes: 2 additions & 2 deletions tests/unit/public.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ const render = () => {
wrapper = mount(
<TetherComponent
attachment="top left"
renderTarget={innerRef => <div ref={innerRef} id="target" />}
renderElement={innerRef => <div ref={innerRef} id="element" />}
renderTarget={ref => <div ref={ref} id="target" />}
renderElement={ref => <div ref={ref} id="element" />}
/>
);
return wrapper;
Expand Down

0 comments on commit 36d178d

Please sign in to comment.