changes hoc signature

Adopt a more conventional way of statically configuring the HOC and avoid mixing ElementPortal props with the transported component.

Author: ngryman

src/withElementPortal.js

@@ -5,20 +5,18 @@ function getDisplayName(Component) {
   return Component.displayName || Component.name || 'Component';
 }
 
-const withElementPortal = (Child) => {
-  const Portal = ({ selector, resetStyle, mapNodeToProps, ...childProps }) => {
-    const ChildWrapper = (props) => <Child {...childProps} {...props} />;
-    return <ElementPortal
-      selector={selector}
-      component={ChildWrapper}
-      mapNodeToProps={mapNodeToProps}
-      resetStyle={resetStyle}
-    />;
-  };
+const withElementPortal = (portalProps) => (component) => {
+  const WithElementPortal = (props) => (
+    <ElementPortal
+      {...portalProps}
+      component={(mappedProps) => (
+        React.createElement(component, {...props, ...mappedProps})
+      )}
+    />
+  );
 
-  Portal.displayName = `WithElementPortal(${getDisplayName(Child)})`;
-
-  return Portal;
+  WithElementPortal.displayName = `WithElementPortal(${getDisplayName(component)})`;
+  return WithElementPortal;
 };
 
 export default withElementPortal;

test/ElementPortal.js

@@ -186,11 +186,13 @@ test('can be used as higher-order component', t => {
     </div>
   `;
   const Greeting = () => (<div>Hello</div>);
-  const GreetingWithPortal = withElementPortal(Greeting);
+  const GreetingWithPortal = withElementPortal({
+    selector: `#${headerId}`
+  })(Greeting);
 
   render(
     <div>
-      <GreetingWithPortal selector={`#${headerId}`} />
+      <GreetingWithPortal />
     </div>,
     document.getElementById(appId)
   );
@@ -215,13 +217,13 @@ test('can be composed with other HOC\'s', t => {
   const MyComponent = (props) => <h1>Hello, {props.name}!</h1>;
 
   const MyComposedComponent = compose(
-    withElementPortal,
+    withElementPortal({ selector: `#${headerId}` }),
     connect((state) => ({ name: state.name }))
   )(MyComponent);
 
   render(
     <Provider store={store}>
-      <MyComposedComponent selector={`#${headerId}`} />
+      <MyComposedComponent />
     </Provider>,
     document.getElementById(appId)
   );
@@ -238,16 +240,18 @@ test('map dom node to props when used as HOC', t => {
     <div id="${headerId}" data-new="true">Joe</div>
     <div id="${appId}">Mary</div>
   `;
-  const mapNodeToProps = (domNode) => ({
-    name: domNode.textContent,
-    isNew: !!domNode.getAttribute('data-new')
-  });
   const Greeting = ({ name, isNew }) => (<div>Hello {isNew && 'and welcome '}{name}</div>);
-  const GreetingWithPortal = withElementPortal(Greeting);
+  const GreetingWithPortal = withElementPortal({
+    selector: `#${headerId}`,
+    mapNodeToProps: (domNode) => ({
+      name: domNode.textContent,
+      isNew: !!domNode.getAttribute('data-new')
+    })
+  })(Greeting);
 
   render(
     <div>
-      <GreetingWithPortal selector={`#${headerId}`} mapNodeToProps={mapNodeToProps} />
+      <GreetingWithPortal />
     </div>,
     document.getElementById(appId)
   );
@@ -266,11 +270,13 @@ test('passes props through to the inner component when used as a HOC', t => {
     </div>
   `;
   const Greeting = ({name}) => (<div>Hello {name}</div>);
-  const GreetingWithPortal = withElementPortal(Greeting);
+  const GreetingWithPortal = withElementPortal({
+    selector: `#${headerId}`
+  })(Greeting);
 
   render(
     <div>
-      <GreetingWithPortal selector={`#${headerId}`} name="Joe" />
+      <GreetingWithPortal name="Joe" />
     </div>,
     document.getElementById(appId)
   );