remove id prop in favor of selector

This removes a "redundant" feature and simplify the API surface. Also using id as prop may be confusing with the DOM id attribute.

Author: ngryman

src/ElementPortal.js

@@ -23,11 +23,8 @@ const ElementPortal = createReactClass({
   },
 
   renderToNodes() {
-    const nodeById = this.props.id && document.getElementById(this.props.id);
-    const nodesById = nodeById ? [nodeById] : [];
     const mapDomNodeToProps = this.props.mapDomNodeToProps || noop;
-    const nodesBySelector = (this.props.selector && [].slice.call(document.querySelectorAll(this.props.selector))) || [];
-    const nodes = nodesById.concat(nodesBySelector);
+    const nodes = (this.props.selector && [].slice.call(document.querySelectorAll(this.props.selector))) || [];
     const { component } = this.props;
 
     nodes.forEach(node => {

src/withElementPortal.js

@@ -6,10 +6,9 @@ function getDisplayName(Component) {
 }
 
 const withElementPortal = (Child) => {
-  const Portal = ({ id, selector, shouldReset, mapDomNodeToProps, ...childProps }) => {
+  const Portal = ({ selector, shouldReset, mapDomNodeToProps, ...childProps }) => {
     const ChildWrapper = (props) => <Child {...childProps} {...props} />;
     return <ElementPortal
-      id={id}
       selector={selector}
       mapDomNodeToProps={mapDomNodeToProps}
       shouldReset={shouldReset}

test/ElementPortal.js

@@ -23,7 +23,7 @@ test('can render to ElementPortal using element id', t => {
   const Greeting = () => (<div>Hello</div>);
   render(
     <div>
-      <ElementPortal id={headerId}>
+      <ElementPortal selector={`#${headerId}`}>
         <Greeting/>
       </ElementPortal>
     </div>,
@@ -127,7 +127,7 @@ test('erases classes and styles', t => {
   const Greeting = () => (<div>Hello</div>);
   render(
     <div>
-      <ElementPortal id={headerId} shouldReset>
+      <ElementPortal selector={`#${headerId}`} shouldReset>
         <Greeting/>
       </ElementPortal>
     </div>,
@@ -162,7 +162,7 @@ test('transfers context to the portal', t => {
   render(
     <Provider store={store}>
       <div>
-        <ElementPortal id={headerId}>
+        <ElementPortal selector={`#${headerId}`}>
           <CountContainer/>
         </ElementPortal>
       </div>
@@ -190,7 +190,7 @@ test('can be used as higher-order component', t => {
 
   render(
     <div>
-      <GreetingWithPortal id={headerId} />
+      <GreetingWithPortal selector={`#${headerId}`} />
     </div>,
     document.getElementById(appId)
   );
@@ -221,7 +221,7 @@ test('can be composed with other HOC\'s', t => {
 
   render(
     <Provider store={store}>
-      <MyComposedComponent id={headerId} />
+      <MyComposedComponent selector={`#${headerId}`} />
     </Provider>,
     document.getElementById(appId)
   );
@@ -247,7 +247,7 @@ test('map dom node to props when used as HOC', t => {
 
   render(
     <div>
-      <GreetingWithPortal id={headerId} mapDomNodeToProps={mapDomNodeToProps} />
+      <GreetingWithPortal selector={`#${headerId}`} mapDomNodeToProps={mapDomNodeToProps} />
     </div>,
     document.getElementById(appId)
   );
@@ -270,7 +270,7 @@ test('passes props through to the inner component when used as a HOC', t => {
 
   render(
     <div>
-      <GreetingWithPortal id={headerId} name="Joe" />
+      <GreetingWithPortal selector={`#${headerId}`} name="Joe" />
     </div>,
     document.getElementById(appId)
   );