checking for htmlelement

package.json

@@ -54,5 +54,8 @@
     "prettier": {
       "singleQuote": true
     }
+  },
+  "dependencies": {
+    "@jesstelford/react-pose": "^1.4.0-anycomponent"
   }
 }

packages/react-pose/src/components/PoseElement.tsx

@@ -12,6 +12,13 @@ import reactLifecyclePolyfill = require('react-lifecycles-compat');
 
 export const PoseParentContext = createContext({});
 
+type Ref = (ref: Element) => any;
+type RefSetters = {
+  ref?: Ref,
+  innerRef?: Ref,
+  hostRef?: Ref
+};
+
 const calcPopFromFlowStyle = (el: HTMLElement): PopStyle => {
   const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = el;
 
@@ -120,34 +127,45 @@ class PoseElement extends React.PureComponent<PoseElementProps> {
       this.popStyle = null;
     }
 
-    /**
-     * We need to get a ref to the underlying DOM element. Styled Components and
-     * other libraries use `innerRef`, though this will be swallowed if the
-     * styled component is not a primitive (ie styled(Component)).
-     *
-     * Instead we pass another function, `hostRef`, as recommended by Facebook
-     * https://github.com/facebook/react/issues/11401
-     *
-     * We also only pass `ref` to DOM primitive components.
-     */
-    if (typeof elementType === 'string') {
-      props.ref = this.setRef;
-    } else {
-      props.innerRef = props.hostRef = this.setRef;
-    }
-
     // Deprecated for 2.0.0
     // If this is a function, it's intended for the DOM element
     if (typeof onChange === 'function') props.onChange = onChange;
 
     return props;
   }
 
+
+  /**
+   * We need to get a ref to the underlying DOM element. Styled Components and
+   * other libraries use `innerRef`, though this will be swallowed if the
+   * styled component is not a primitive (ie styled(Component)).
+   *
+   * Instead we pass another function, `hostRef`, as recommended by Facebook
+   * https://github.com/facebook/react/issues/11401
+   *
+   * We also only pass `ref` to DOM primitive components.
+   */
+  getRefs = (): RefSetters => {
+    const refs: RefSetters = {};
+    const { elementType } = this.props;
+
+    if (typeof elementType === 'string') {
+      refs.ref = this.setRef;
+    } else {
+      refs.innerRef = this.setRef;
+      refs.hostRef = this.setRef;
+    }
+
+    return refs;
+  }
+
   setRef = (ref: Element) => {
-    const { innerRef } = this.props;
-    if (innerRef) innerRef(ref);
-    this.ref = ref;
-  };
+    if (ref instanceof Element || (this.ref && ref === null)) {
+      const { innerRef } = this.props;
+      if (innerRef) innerRef(ref);
+      this.ref = ref;
+    }
+  }
 
   componentDidMount() {
     if (!this.ref) return;
@@ -236,7 +254,7 @@ class PoseElement extends React.PureComponent<PoseElementProps> {
       <PoseParentContext.Provider value={this.childrenHandlers}>
         {createElement(
           elementType,
-          this.getSetProps(),
+          { ...this.getSetProps(), ...this.getRefs() },
           children
         )}
       </PoseParentContext.Provider>

packages/react-pose/src/components/PoseGroup.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ReactElement } from 'react';
-import reactLifecyclesCompat = require('react-lifecycles-compat');
+import reactLifecyclePolyfill = require('react-lifecycles-compat');
 import {
   handleIncomingChildren,
   makeChildList,
@@ -82,6 +82,6 @@ class PoseGroup extends React.Component<Props, State> {
   }
 }
 
-reactLifecyclesCompat(PoseGroup);
+reactLifecyclePolyfill(PoseGroup);
 
 export { PoseGroup };

playground/plugins/react-pose.js

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import posed, { PoseGroup } from "../../packages/react-pose/lib";
+import posed, { PoseGroup } from "@jesstelford/react-pose";
 import {
   easing,
   decay,
@@ -18,12 +18,27 @@ const boxProps = {
   open: { scaleX: 1 }
 };
 
-const Box = styled(posed.div(boxProps))`
+const Box = ({ className, children, hostRef }) => (
+  <div className={className} ref={hostRef}>{children}</div>
+);
+
+const StyledBox = styled(Box)`
   background-color: red;
   width: 100px;
   height: 100px;
   transform-origin: 0 0;
-`;
+`
+const AnimatedBox = posed(StyledBox)({
+  enter: { opacity: 1, y: '0%' },
+  exit: { opacity: 0, y: '30%' },
+});
+
+// const Box = styled(posed.div(boxProps))`
+//   background-color: red;
+//   width: 100px;
+//   height: 100px;
+//   transform-origin: 0 0;
+// `;
 
 export class ReactPose extends React.PureComponent {
   state = { isOpen: false };
@@ -34,7 +49,10 @@ export class ReactPose extends React.PureComponent {
 
   render() {
     const { isOpen } = this.state;
-    return <Box pose={isOpen ? "open" : "closed"} onDragStart={console.log} />;
+    return <PoseGroup animateOnMount>
+      <AnimatedBox key="1" />
+      <AnimatedBox key="2" />
+    </PoseGroup>
   }
 }
 
@@ -106,7 +124,7 @@ const itemProps = {
 
 const ItemStyled = styled.div`${itemStyle}`
 
-const Item = posed(ItemStyled)(itemProps)
+const Item = ItemStyled
 
 export class ReactPoseChildren extends React.PureComponent {
   state = { isOpen: false };
@@ -119,8 +137,8 @@ export class ReactPoseChildren extends React.PureComponent {
     const { isOpen } = this.state;
 
     return (
-      <SidePanel innerRef={console.log} pose={isOpen ? "open" : "closed"}>
-        <Item i={0} ref={console.log} />
+      <SidePanel pose={isOpen ? "open" : "closed"}>
+        <Item i={0} />
         <Item i={1} />
         <Item i={2} />
         <Item i={3} />