v2.3.0

- Allow to define a custom component to use as base of ResizeAware - Added some useless tests
FezVrasta · Apr 29, 2017 · d22076f · d22076f
1 parent 8bff18c
commit d22076f
Show file tree

Hide file tree

Showing 12 changed files with 2,464 additions and 130 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "stage-2", "react" ]
+}
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 .DS_Store
 dist/
 node_modules/
+coverage/
diff --git a/README.md b/README.md
@@ -80,16 +80,7 @@ class MyComponent extend Component {
   }
 }
 ```
-
-## Properties
-
-- The `onlyEvent` property will prevent ResizeAware from passing the `height` and `width`
-properties to its child component, in case you don't want to rely on them.
-- The `tag` property allows to define the HTML tag used by ResizeAware to render.
-- The `onResize` property is an optional callback called on each resize with as first
-  argument an object containing `height` and `width` properties.
-
-<!-- ## Self containing
+## Self containing
 
 If you need to keep your DOM structure clean and you don't want the additional
 `div` added by ResizeAware, you can use the component as base for your own one.
@@ -99,16 +90,32 @@ import React from 'react';
 import ResizeAware from 'react-resize-aware';
 
 // This component will get re-rendered every time its width or height changes
-function MyComponent({width, height}) {
-  return <div style={{ position: 'relative' }}>{width}x{height}</div>;
+// It must expose a `getRef` property and must allow its `children` to be rendered
+// as direct descendant
+// The `getRef` property must be assigned to the `ref` property of the main element
+function MyComponent({width, height, getRef, children}) {
+  return (
+    <div ref={getRef} style={{ position: 'relative' }}>
+      <span>{width}x{height}</span>
+      {children}
+    </div>
+  );
 }
 
 function App() {
   return (
     <ResizeAware component={MyComponent} />
   );
 }
-``` -->
+```
+
+## Properties
+
+- The `onlyEvent` property will prevent ResizeAware from passing the `height` and `width`
+properties to its child component, in case you don't want to rely on them.
+- The `component` property allows to define the HTML tag used by ResizeAware to render, or any React component.
+- The `onResize` property is an optional callback called on each resize with as first
+  argument an object containing `height` and `width` properties.
 
 # License
 

diff --git a/docs/example.js b/docs/example.js
@@ -1,24 +1,62 @@
-function MyComponent({width, height}) {
+'use strict';
+
+var _extends =
+  Object.assign ||
+  function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+
+function _objectWithoutProperties(obj, keys) {
+  var target = {};
+  for (var i in obj) {
+    if (keys.indexOf(i) >= 0) continue;
+    if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
+    target[i] = obj[i];
+  }
+  return target;
+}
+
+function MyComponent(_ref) {
+  var width = _ref.width,
+    height = _ref.height,
+    getRef = _ref.getRef,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, [
+      'width',
+      'height',
+      'getRef',
+      'children',
+    ]);
+
   return React.createElement(
     'div',
-    {className: 'example'},
+    _extends({className: 'example', ref: getRef}, props),
     "Hover me! I don't rely on any DOM manipulation, transition event or anything, I use a real resize event!",
     React.createElement('br', null),
-    `${width}x${height}`
+    width,
+    'x',
+    height,
+    children
   );
 }
 
 function App() {
-  return React.createElement(
-    ReactResizeAware,
-    {
-      style: {position: 'relative'},
-      onResize(sizes) {
-        console.log(sizes);
-      },
+  return React.createElement(ReactResizeAware, {
+    component: MyComponent,
+    useBoundingClientRect: true,
+    style: {position: 'relative'},
+    onResize: function onResize(sizes) {
+      return console.log(sizes);
     },
-    React.createElement(MyComponent, null)
-  );
+  });
 }
 
 ReactDOM.render(

diff --git a/docs/index.html b/docs/index.html
@@ -3,14 +3,19 @@
   <head>
     <title>Example</title>
     <style>
+    body {
+      font-family: Helvetica Neue, Helvetica, Segoe UI, Ubuntu, Arial, sans-serif;
+    }
     .example {
       background-color: rebeccapurple;
       height: 100px;
+      width: 100%;
       color: white;
-      transition: 1s height ease-in-out
+      transition: 1s all ease-in-out;
     }
     .example:hover {
       height: 200px;
+      width: 80vw;
     }
     </style>
   </head>
@@ -22,4 +27,4 @@
     <script src="./react-resize-aware.js"></script>
     <script src="./example.js"></script>
   </body>
-</html>
+</html>
diff --git a/docs/react-resize-aware.js b/docs/react-resize-aware.js
diff --git a/package.json b/package.json
@@ -1,9 +1,10 @@
 {
   "name": "react-resize-aware",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "A resize aware component used to detect sizes changes on your components",
   "main": "dist/index.js",
   "scripts": {
+    "test": "jest --coverage",
     "prepare": "NODE_ENV=production rollup -c rollup.config.js && cp dist/index.js docs/react-resize-aware.js"
   },
   "repository": {
@@ -29,9 +30,19 @@
   "homepage": "https://github.com/FezVrasta/react-resize-aware#readme",
   "devDependencies": {
     "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
+    "enzyme": "^2.8.2",
+    "enzyme-to-json": "^1.5.1",
+    "jest": "^19.0.2",
+    "jest-enzyme": "^3.0.1",
     "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "react-test-renderer": "^15.5.4",
     "rollup": "^0.41.6",
     "rollup-plugin-babel": "^2.7.1"
+  },
+  "jest": {
+    "setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js"
   }
 }
diff --git a/rollup.config.js b/rollup.config.js
@@ -12,6 +12,7 @@ export default {
   },
   plugins: [
     babel({
+      babelrc: false,
       presets: [['es2015', {modules: false}], 'stage-2'],
     }),
   ],

diff --git a/src/__snapshots__/index.spec.jsx.snap b/src/__snapshots__/index.spec.jsx.snap
@@ -0,0 +1,110 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`allows to define a custom component 1`] = `
+<DummyComponent
+  getRef={[Function]}
+  style={
+    Object {
+      "position": "relative",
+    }
+  }
+>
+  <object
+    onLoad={[Function]}
+    style={
+      Object {
+        "display": "block",
+        "height": "100%",
+        "left": 0,
+        "overflow": "hidden",
+        "pointerEvents": "none",
+        "position": "absolute",
+        "top": 0,
+        "width": "100%",
+        "zIndex": -1,
+      }
+    }
+    type="text/html"
+  />
+</DummyComponent>
+`;
+
+exports[`allows to define an \`onResize\` property 1`] = `
+<ResizeAware
+  component="div"
+  onResize={[Function]}
+  style={
+    Object {
+      "position": "relative",
+    }
+  }
+>
+  <div
+    style={
+      Object {
+        "position": "relative",
+      }
+    }
+  >
+    <object
+      onLoad={[Function]}
+      style={
+        Object {
+          "display": "block",
+          "height": "100%",
+          "left": 0,
+          "overflow": "hidden",
+          "pointerEvents": "none",
+          "position": "absolute",
+          "top": 0,
+          "width": "100%",
+          "zIndex": -1,
+        }
+      }
+      type="text/html"
+    />
+  </div>
+</ResizeAware>
+`;
+
+exports[`allows to use its children as target 1`] = `
+<ResizeAware
+  component="div"
+  style={
+    Object {
+      "position": "relative",
+    }
+  }
+>
+  <div
+    style={
+      Object {
+        "position": "relative",
+      }
+    }
+  >
+    <object
+      onLoad={[Function]}
+      style={
+        Object {
+          "display": "block",
+          "height": "100%",
+          "left": 0,
+          "overflow": "hidden",
+          "pointerEvents": "none",
+          "position": "absolute",
+          "top": 0,
+          "width": "100%",
+          "zIndex": -1,
+        }
+      }
+      type="text/html"
+    />
+    <DummyComponent>
+      <div>
+        x
+      </div>
+    </DummyComponent>
+  </div>
+</ResizeAware>
+`;