Merge 36d178d into c2072b8

danreeves · Nov 26, 2018 · 8591201 · 8591201
2 parents c2072b8 + 36d178d
commit 8591201
Show file tree

Hide file tree

Showing 11 changed files with 386 additions and 275 deletions.
diff --git a/README.md b/README.md
@@ -43,33 +43,41 @@ class SimpleDemo extends React.Component {
             attachment: 'together',
           },
         ]}
-      >
-        {/* First child: This is what the item will be tethered to */}
-        <button
-          onClick={() => {
-            this.setState({ isOpen: !isOpen });
-          }}
-        >
-          Toggle Tethered Content
-        </button>
-        {/* Second child: If present, this item will be tethered to the the first child */}
-        {isOpen && (
-          <div>
-            <h2>Tethered Content</h2>
-            <p>A paragraph to accompany the title.</p>
-          </div>
+        /* renderTarget: This is what the item will be tethered to, make sure to attach the ref */
+        renderTarget={ref => (
+          <button
+            ref={ref}
+            onClick={() => {
+              this.setState({ isOpen: !isOpen });
+            }}
+          >
+            Toggle Tethered Content
+          </button>
         )}
-      </TetherComponent>
+        /* renderElement: If present, this item will be tethered to the the component returned by renderTarget */
+        renderElement={ref =>
+          isOpen && (
+            <div ref={ref}>
+              <h2>Tethered Content</h2>
+              <p>A paragraph to accompany the title.</p>
+            </div>
+          )
+        }
+      />
     );
   }
 }
 ```
 
 ## Props
 
-#### `children`: PropTypes.node.isRequired (2 Max)
+#### `renderTarget`: PropTypes.func
 
-The first child is used as the Tether's `target` and the second child (which is optional) is used as Tether's `element` that will be moved.
+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, 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
 
@@ -85,6 +93,10 @@ Tether requires this element to be `position: static;`, otherwise it will defaul
 
 Any valid [Tether options](http://tether.io/#options).
 
+#### `children`:
+
+Previous versions of react-tether used children to render the target and component, using children will now throw an error. Please use renderTarget and renderElement instead
+
 ## Imperative API
 
 The following methods are exposed on the component instance:

diff --git a/bin/test b/bin/test
@@ -8,11 +8,6 @@ npm run build
 npm run lint
 npm run typescript
 
-# Unit test React 15 and collect coverage
-npm run react:15
-npm run unit -- --coverage
-mv coverage/coverage-final.json coverage/coverage-react15.json
-
 # Unit test React 16 and collect coverage
 npm run react:16
 npm run unit -- --coverage
@@ -22,7 +17,6 @@ mv coverage/coverage-final.json coverage/coverage-react16.json
 mkdir -p .nyc_output
 npx istanbul-merge \
   --out .nyc_output/coverage-final.json \
-  coverage/coverage-react15.json \
   coverage/coverage-react16.json
 
 rm -rf coverage

diff --git a/example/components/demo.js b/example/components/demo.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { RefObject } from 'react';
 import styled from 'styled-components';
 import Draggable from 'react-draggable';
 import chroma from 'chroma-js';
@@ -30,16 +30,21 @@ type DraggableTargetProps = {
   id: string,
   width: number,
 };
-const DraggableTarget = ({
-  color,
-  height,
-  id,
-  width,
-  ...props
-}: DraggableTargetProps) => (
-  <Draggable {...props}>
-    <GrabbableTarget 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`
@@ -152,25 +157,29 @@ export default class Demo extends React.Component {
                   attachment: 'together',
                 },
               ]}
-            >
-              <DraggableTarget
-                id="DRAG_ME"
-                height={100}
-                width={100}
-                color="red"
-                bounds="parent"
-                onDrag={() =>
-                  this.tether.getTetherInstance() && this.tether.position()
-                }
-                defaultPosition={{ x: 25, y: 125 }}
-              />
-              {this.state.on && (
-                <Tooltip id="WATCH_ME">
-                  <Text>Drag the box around</Text>
-                  <Text>I&apos;ll stay within the outline</Text>
-                </Tooltip>
+              renderTarget={ref => (
+                <DraggableTarget
+                  ref={ref}
+                  id="DRAG_ME"
+                  height={100}
+                  width={100}
+                  color="red"
+                  bounds="parent"
+                  onDrag={() =>
+                    this.tether.getTetherInstance() && this.tether.position()
+                  }
+                  defaultPosition={{ x: 25, y: 125 }}
+                />
               )}
-            </TetherComponent>
+              renderElement={ref =>
+                this.state.on && (
+                  <Tooltip ref={ref} id="WATCH_ME">
+                    <Text>Drag the box around</Text>
+                    <Text>I&apos;ll stay within the outline</Text>
+                  </Tooltip>
+                )
+              }
+            />
           )}
         </div>
       </DemoZone>

diff --git a/example/components/page-title.js b/example/components/page-title.js
@@ -77,16 +77,20 @@ class PageTitle extends React.Component<PageTitleProps> {
               attachment: 'together',
             },
           ]}
-        >
-          <Target
-            height="100"
-            width="100"
-            color={this.props.theme.colors[this.state.count]}
-          />
-          <Tooltip side={this.direction(side)}>
-            <Title>{children}</Title>
-          </Tooltip>
-        </TetherComponent>
+          renderTarget={ref => (
+            <Target
+              ref={ref}
+              height="100"
+              width="100"
+              color={this.props.theme.colors[this.state.count]}
+            />
+          )}
+          renderElement={ref => (
+            <Tooltip ref={ref} side={this.direction(side)}>
+              <Title>{children}</Title>
+            </Tooltip>
+          )}
+        />
       </Wrapper>
     );
   }

diff --git a/example/index.js b/example/index.js
@@ -61,9 +61,14 @@ class App extends Component {
                 import TetherComponent from 'react-tether';
 
                 const TetheredThing = () => (
-                  <TetherComponent attachment="middle left">
-                    <p>The target component</p>
-                    <p>The tethered component</p>
+                  <TetherComponent
+                    attachment="middle left"
+                    renderTarget={ref => (
+                      <p ref={ref}>The target component</p>
+                    )}
+                    renderElement={ref => (
+                      <p ref={ref}>The tethered component</p>
+                    )}
                   </TetherComponent>)
                 `}
               </CodeBlock>

diff --git a/package.json b/package.json
@@ -18,7 +18,6 @@
     "test": "npm run lint && npm run typescript && npm run unit",
     "tdd": "npm run unit -- --watch",
     "react:16": "enzyme-adapter-react-install 16",
-    "react:15": "enzyme-adapter-react-install 15.5",
     "danger": "danger ci",
     "typescript": "tsc -p tsconfig.json",
     "lint": "xo"
@@ -45,8 +44,8 @@
     "tether": "^1.4.5"
   },
   "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0 || ^16.0.0",
-    "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0"
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.0.0",