rc-resize-observer - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

es/index.d.ts

 import * as React from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
 interface ResizeObserverProps {
-    children: React.ReactElement;
+    children: React.ReactNode;
     disabled?: boolean;
@@ -32,6 +32,4 @@ /** Trigger if element resized. Will always trigger when first time render. */
     destroyObserver(): void;
-    render(): React.FunctionComponentElement<{
-        ref: (node: RefNode) => void;
-    }> | null;
+    render(): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactElement<unknown, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>[] | null;
 }
 export default ReactResizeObserver;

es/index.js

@@ -49,4 +49,5 @@ "use strict";
 
-var resize_observer_polyfill_1 = __importDefault(require("resize-observer-polyfill")); // Still need to be compatible with React 15, we use class component here
+var resize_observer_polyfill_1 = __importDefault(require("resize-observer-polyfill"));
 
+var INTERNAL_PREFIX_KEY = 'rc-observer-key'; // Still need to be compatible with React 15, we use class component here
 
@@ -162,5 +163,6 @@ var ReactResizeObserver =
       if (childNodes.length > 1) {
-        warning_1.default(false, 'Find more than one child node with `children` in ResizeObserver. Will only render first one.');
+        warning_1.default(false, 'Find more than one child node with `children` in ResizeObserver. Will only observe first one.');
       } else if (childNodes.length === 0) {
         warning_1.default(false, '`children` of ResizeObserver is empty. Nothing is in observe.');
+        return null;
       }
@@ -172,3 +174,3 @@
         var _ref = childNode.ref;
-        return React.cloneElement(childNode, {
+        childNodes[0] = React.cloneElement(childNode, {
           ref: function ref(node) {
@@ -192,3 +194,11 @@ _this2.childNode = node; // Should forward ref
 
-      return childNode || null;
+      return childNodes.length === 1 ? childNodes[0] : childNodes.map(function (node, index) {
+        if (!React.isValidElement(node) || 'key' in node && node.key !== null) {
+          return node;
+        }
+
+        return React.cloneElement(node, {
+          key: "".concat(INTERNAL_PREFIX_KEY, "-").concat(index)
+        });
+      });
     }
@@ -195,0 +205,0 @@ }]);

lib/index.d.ts

 import * as React from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
 interface ResizeObserverProps {
-    children: React.ReactElement;
+    children: React.ReactNode;
     disabled?: boolean;
@@ -32,6 +32,4 @@ /** Trigger if element resized. Will always trigger when first time render. */
     destroyObserver(): void;
-    render(): React.FunctionComponentElement<{
-        ref: (node: RefNode) => void;
-    }> | null;
+    render(): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactElement<unknown, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>[] | null;
 }
 export default ReactResizeObserver;

lib/index.js

@@ -49,4 +49,5 @@ "use strict";
 
-var resize_observer_polyfill_1 = __importDefault(require("resize-observer-polyfill")); // Still need to be compatible with React 15, we use class component here
+var resize_observer_polyfill_1 = __importDefault(require("resize-observer-polyfill"));
 
+var INTERNAL_PREFIX_KEY = 'rc-observer-key'; // Still need to be compatible with React 15, we use class component here
 
@@ -162,5 +163,6 @@ var ReactResizeObserver =
       if (childNodes.length > 1) {
-        warning_1.default(false, 'Find more than one child node with `children` in ResizeObserver. Will only render first one.');
+        warning_1.default(false, 'Find more than one child node with `children` in ResizeObserver. Will only observe first one.');
       } else if (childNodes.length === 0) {
         warning_1.default(false, '`children` of ResizeObserver is empty. Nothing is in observe.');
+        return null;
       }
@@ -172,3 +174,3 @@
         var _ref = childNode.ref;
-        return React.cloneElement(childNode, {
+        childNodes[0] = React.cloneElement(childNode, {
           ref: function ref(node) {
@@ -192,3 +194,11 @@ _this2.childNode = node; // Should forward ref
 
-      return childNode || null;
+      return childNodes.length === 1 ? childNodes[0] : childNodes.map(function (node, index) {
+        if (!React.isValidElement(node) || 'key' in node && node.key !== null) {
+          return node;
+        }
+
+        return React.cloneElement(node, {
+          key: "".concat(INTERNAL_PREFIX_KEY, "-").concat(index)
+        });
+      });
     }
@@ -195,0 +205,0 @@ }]);

package.json

 {
   "name": "rc-resize-observer",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Resize observer for React",
@@ -5,0 +5,0 @@ "keywords": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

27703

increased by5.52%

Lines of code

506

increased by3.27%

No dependency changes