feat: improve <ResizeProvider /> compatibility

better dom node finder

Author: runjuu

package.json

@@ -28,7 +28,11 @@
     "@types/lodash": "^4.14.115",
     "@types/prop-types": "^15.5.4",
     "@types/react": "^16.4.7",
+    "@types/react-dom": "^16.0.7",
     "@types/shallowequal": "^0.2.3",
+    "prop-types": "^15.6.2",
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2",
     "tslib": "^1.9.3",
     "tslint": "^5.11.0",
     "tslint-eslint-rules": "^5.3.1",
@@ -43,6 +47,7 @@
   },
   "peerDependencies": {
     "prop-types": "^15.6.2",
-    "react": "^16.3.0"
+    "react": "^16.3.0",
+    "react-dom": "^16.4.2"
   }
 }

src/ResizeProvider.tsx

@@ -1,30 +1,19 @@
 import * as React from 'react';
+import { findDOMNode } from 'react-dom';
 
 import { Provider } from './context';
 import Listener from './Listener';
-import { getElement, makeSureChildrenHasRef } from './methods';
-
-import { ResizeChildren } from './types';
-import { ReactNode } from 'react';
 
 interface Props {
-  children?: ReactNode;
+  children: React.ReactNode;
 }
 
 interface State {
-  children: ResizeChildren | null;
   element: HTMLElement | null;
 }
 
 export default class ResizeProvider extends React.PureComponent<Props, State> {
-  public static getDerivedStateFromProps(props: Props) {
-    return {
-      children: makeSureChildrenHasRef(props.children),
-    };
-  }
-
   public state: State = {
-    children: null,
     element: null,
   };
 
@@ -43,13 +32,18 @@ export default class ResizeProvider extends React.PureComponent<Props, State> {
   public render() {
     return (
       <Provider value={{ listenElement: this.state.element }}>
-        {this.state.children}
+        {this.props.children}
       </Provider>
     );
   }
 
+  private getElement() {
+    const element = findDOMNode(this);
+    return element instanceof HTMLElement ? element : null;
+  }
+
   private updateListenElement() {
-    const element = getElement(this.state.children);
+    const element = this.getElement();
 
     if (element !== this.state.element) {
       this.removeListenElement();

src/methods.ts

@@ -1,8 +1,6 @@
-import * as React from 'react';
 import * as shallowequal from 'shallowequal';
 
-import { ResizeChildren, Size } from './types';
-import { ReactNode, Ref } from 'react';
+import { Size } from './types';
 
 export function getSize(element: HTMLElement): Size {
   return {
@@ -15,28 +13,6 @@ export function isRefObject(ref: any): boolean {
   return ref && typeof ref === 'object' && 'current' in ref;
 }
 
-export function getElement(children?: ResizeChildren | null): HTMLElement | null {
-  const element =
-    children &&
-    children.ref &&
-    children.ref.current;
-  return element || null;
-}
-
-export function makeSureChildrenHasRef(
-  children: ReactNode
-): ResizeChildren | null {
-  if (React.isValidElement(children)) {
-    if (isRefObject((children as ResizeChildren).ref)) {
-      return children;
-    } else {
-      return React.cloneElement<{ ref?: Ref<HTMLElement> }>(
-        children, { ref: React.createRef() }
-      ) as ResizeChildren;
-    }
-  } else return null;
-}
-
 function compareDataset(
   currentValue: any,
   nextValue: any,

src/types.ts

@@ -1,12 +1,6 @@
-import { ReactElement, RefObject } from 'react';
-
 export interface Size {
   width: number;
   height: number;
 }
 
-export interface ResizeChildren extends ReactElement<any> {
-  ref?: RefObject<HTMLElement>;
-}
-
 export type OnResizeCallBack = (size: Size) => void;

yarn.lock

@@ -10,12 +10,23 @@
   version "4.14.115"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.115.tgz#54d171b2ce12c058742443b5f6754760f701b8f9"
 
+"@types/node@*":
+  version "10.9.4"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-10.9.4.tgz#0f4cb2dc7c1de6096055357f70179043c33e9897"
+
 "@types/prop-types@^15.5.4":
   version "15.5.4"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.4.tgz#9e6199bad131786e24c2baa2a82705a02139fbf8"
   dependencies:
     "@types/react" "*"
 
+"@types/react-dom@^16.0.7":
+  version "16.0.7"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.0.7.tgz#54d0f867a76b90597e8432030d297982f25c20ba"
+  dependencies:
+    "@types/node" "*"
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^16.4.7":
   version "16.4.7"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.4.7.tgz#f33f6d759a7e1833befa15224d68942d178a5a3f"
@@ -302,9 +313,18 @@ prop-types@^15.6.0, prop-types@^15.6.2:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
-react@^16.3.0:
-  version "16.4.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.4.1.tgz#de51ba5764b5dbcd1f9079037b862bd26b82fe32"
+react-dom@^16.4.2:
+  version "16.4.2"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.4.2.tgz#4afed569689f2c561d2b8da0b819669c38a0bda4"
+  dependencies:
+    fbjs "^0.8.16"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.0"
+
+react@^16.4.2:
+  version "16.4.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.4.2.tgz#2cd90154e3a9d9dd8da2991149fdca3c260e129f"
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.1.0"