From 24d9a732bc90700157463ea832d448c42e312020 Mon Sep 17 00:00:00 2001
From: Federico Zivolo <fzivolo@quid.com>
Date: Thu, 24 Aug 2017 17:47:38 +0200
Subject: [PATCH] v2.6.0

---
 docs/react-resize-aware.js            | 22 +++++++++---
 package.json                          |  2 +-
 src/__snapshots__/index.spec.jsx.snap | 50 +++++++++++++++++++++++++++
 src/index.js                          | 37 +++++++++++++++-----
 src/index.spec.jsx                    | 41 ++++++++++++++++------
 5 files changed, 128 insertions(+), 24 deletions(-)

diff --git a/docs/react-resize-aware.js b/docs/react-resize-aware.js
index 9cb797f..d1deb5d 100644
--- a/docs/react-resize-aware.js
+++ b/docs/react-resize-aware.js
@@ -99,7 +99,9 @@ var ResizeAware = function (_Component) {
           onResize = _props.onResize,
           onlyEvent = _props.onlyEvent,
           component = _props.component,
-          props = _objectWithoutProperties(_props, ['children', 'onResize', 'onlyEvent', 'component']);
+          widthPropName = _props.widthPropName,
+          heightPropName = _props.heightPropName,
+          props = _objectWithoutProperties(_props, ['children', 'onResize', 'onlyEvent', 'component', 'widthPropName', 'heightPropName']);
 
       var _state = this.state,
           width = _state.width,
@@ -108,9 +110,12 @@ var ResizeAware = function (_Component) {
 
       var hasCustomComponent = typeof component !== 'string';
 
+      var widthProp = [widthPropName || 'width'];
+      var heightProp = [heightPropName || 'height'];
+
       return react.createElement(component, _extends((_extends2 = {}, _defineProperty(_extends2, hasCustomComponent ? 'getRef' : 'ref', function (el) {
         return _this2.container = el;
-      }), _defineProperty(_extends2, 'width', hasCustomComponent ? width : undefined), _defineProperty(_extends2, 'height', hasCustomComponent ? height : undefined), _extends2), props), react.createElement('object', {
+      }), _defineProperty(_extends2, widthProp, hasCustomComponent ? width : undefined), _defineProperty(_extends2, heightProp, hasCustomComponent ? height : undefined), _extends2), props), react.createElement('object', {
         type: 'text/html',
         style: style,
         ref: function ref(el) {
@@ -120,7 +125,9 @@ var ResizeAware = function (_Component) {
         'aria-hidden': true,
         tabIndex: -1
       }), react.Children.map(children, function (child) {
-        return react.cloneElement(child, !onlyEvent ? { width: width, height: height } : null);
+        var _ref2;
+
+        return react.cloneElement(child, !onlyEvent ? (_ref2 = {}, _defineProperty(_ref2, widthProp, width), _defineProperty(_ref2, heightProp, height), _ref2) : null);
       }));
     }
   }]);
@@ -128,7 +135,14 @@ var ResizeAware = function (_Component) {
   return ResizeAware;
 }(react.Component);
 
-ResizeAware.defaultProps = { component: 'div' };
+ResizeAware.defaultProps = {
+  component: 'div',
+  // don't define here the defaults to avoid to break
+  // the render result of previous versions
+  // TODO: use defaultProps to define default values
+  widthPropName: undefined,
+  heightPropName: undefined
+};
 function makeResizeAware(component) {
   return function (props) {
     return react.createElement(ResizeAware, _extends({ component: component }, props));
diff --git a/package.json b/package.json
index 356b4c5..f141679 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-resize-aware",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "A resize aware component used to detect sizes changes on your components",
   "main": "dist/index.js",
   "scripts": {
diff --git a/src/__snapshots__/index.spec.jsx.snap b/src/__snapshots__/index.spec.jsx.snap
index b8dd4c4..777fb01 100644
--- a/src/__snapshots__/index.spec.jsx.snap
+++ b/src/__snapshots__/index.spec.jsx.snap
@@ -71,6 +71,56 @@ exports[`allows to define an \`onResize\` property 1`] = `
 </ResizeAware>
 `;
 
+exports[`allows to define custom width and height names 1`] = `
+<ResizeAware
+  component="div"
+  heightPropName="customHeight"
+  style={
+    Object {
+      "position": "relative",
+    }
+  }
+  widthPropName="customWidth"
+>
+  <div
+    style={
+      Object {
+        "position": "relative",
+      }
+    }
+  >
+    <object
+      aria-hidden={true}
+      onLoad={[Function]}
+      style={
+        Object {
+          "display": "block",
+          "height": "100%",
+          "left": 0,
+          "overflow": "hidden",
+          "pointerEvents": "none",
+          "position": "absolute",
+          "top": 0,
+          "width": "100%",
+          "zIndex": -1,
+        }
+      }
+      tabIndex={-1}
+      type="text/html"
+    />
+    <Test
+      customHeight={10}
+      customWidth={10}
+    >
+      <div
+        customHeight={10}
+        customWidth={10}
+      />
+    </Test>
+  </div>
+</ResizeAware>
+`;
+
 exports[`allows to use its child as target 1`] = `
 <ResizeAware
   component="div"
diff --git a/src/index.js b/src/index.js
index 461bf11..6f6ff76 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,7 +6,7 @@
 // Copyright 2016, Federico Zivolo
 //
 
-import {createElement, Component, Children, cloneElement} from 'react';
+import { createElement, Component, Children, cloneElement } from 'react';
 
 const style = {
   display: 'block',
@@ -21,7 +21,14 @@ const style = {
 };
 
 export default class ResizeAware extends Component {
-  static defaultProps = {component: 'div'};
+  static defaultProps = {
+    component: 'div',
+    // don't define here the defaults to avoid to break
+    // the render result of previous versions
+    // TODO: use defaultProps to define default values
+    widthPropName: undefined,
+    heightPropName: undefined,
+  };
   state = {};
 
   // Init the resizeElement
@@ -58,17 +65,28 @@ export default class ResizeAware extends Component {
   };
 
   render() {
-    const {children, onResize, onlyEvent, component, ...props} = this.props;
-    const {width, height} = this.state;
+    const {
+      children,
+      onResize,
+      onlyEvent,
+      component,
+      widthPropName,
+      heightPropName,
+      ...props
+    } = this.props;
+    const { width, height } = this.state;
 
     const hasCustomComponent = typeof component !== 'string';
 
+    const widthProp = [widthPropName || 'width'];
+    const heightProp = [heightPropName || 'height'];
+
     return createElement(
       component,
       {
         [hasCustomComponent ? 'getRef' : 'ref']: el => (this.container = el),
-        width: hasCustomComponent ? width : undefined,
-        height: hasCustomComponent ? height : undefined,
+        [widthProp]: hasCustomComponent ? width : undefined,
+        [heightProp]: hasCustomComponent ? height : undefined,
         ...props,
       },
       createElement('object', {
@@ -80,12 +98,15 @@ export default class ResizeAware extends Component {
         tabIndex: -1,
       }),
       Children.map(children, child =>
-        cloneElement(child, !onlyEvent ? {width, height} : null)
+        cloneElement(
+          child,
+          !onlyEvent ? { [widthProp]: width, [heightProp]: height } : null
+        )
       )
     );
   }
 }
 
 export function makeResizeAware(component) {
-  return props => createElement(ResizeAware, {component, ...props});
+  return props => createElement(ResizeAware, { component, ...props });
 }
diff --git a/src/index.spec.jsx b/src/index.spec.jsx
index d28b61e..4730fda 100644
--- a/src/index.spec.jsx
+++ b/src/index.spec.jsx
@@ -1,19 +1,23 @@
 import React from 'react';
-import {shallow, mount} from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import toJson from 'enzyme-to-json';
 import ResizeAware from './index.js';
 
-function DummyComponent({width, height}) {
-  return <div>{width}x{height}</div>;
+function DummyComponent({ width, height }) {
+  return (
+    <div>
+      {width}x{height}
+    </div>
+  );
 }
 
-function DummyComponent2({getRef, ...props}) {
+function DummyComponent2({ getRef, ...props }) {
   return <div ref={getRef} {...props} />;
 }
 
 it('allows to use its child as target', () => {
   const wrapper = mount(
-    <ResizeAware style={{position: 'relative'}}>
+    <ResizeAware style={{ position: 'relative' }}>
       <DummyComponent />
     </ResizeAware>
   );
@@ -24,7 +28,7 @@ it('allows to use its child as target', () => {
 it('allows to use itself between a component markup', () => {
   const wrapper = mount(
     <div>
-      <ResizeAware style={{position: 'relative'}}>
+      <ResizeAware style={{ position: 'relative' }}>
         <div />
         <div />
       </ResizeAware>
@@ -37,7 +41,7 @@ it('allows to use itself between a component markup', () => {
 it('allows to define an `onResize` property', () => {
   const handleResize = jest.fn();
   const wrapper = mount(
-    <ResizeAware style={{position: 'relative'}} onResize={handleResize} />
+    <ResizeAware style={{ position: 'relative' }} onResize={handleResize} />
   );
 
   expect(toJson(wrapper)).toMatchSnapshot();
@@ -45,17 +49,32 @@ it('allows to define an `onResize` property', () => {
 
 it('allows to define a custom component', () => {
   const wrapper = shallow(
-    <ResizeAware style={{position: 'relative'}} component={DummyComponent} />
+    <ResizeAware style={{ position: 'relative' }} component={DummyComponent} />
   );
 
   expect(toJson(wrapper)).toMatchSnapshot();
 });
 
 it('applies aria attributes to <object> to avoid screenreader issues', () => {
-  const object = mount(
-    <ResizeAware />
-  ).find('object');
+  const object = mount(<ResizeAware />).find('object');
 
   expect(object.prop('aria-hidden')).toBe(true);
   expect(object.prop('tabIndex')).toBe(-1);
 });
+
+it('allows to define custom width and height names', () => {
+  const Test = props => <div {...props} />;
+  const wrapper = mount(
+    <ResizeAware
+      style={{ position: 'relative' }}
+      widthPropName="customWidth"
+      heightPropName="customHeight"
+    >
+      <Test />
+    </ResizeAware>
+  );
+
+  wrapper.setState({ width: 10, height: 10 });
+
+  expect(toJson(wrapper)).toMatchSnapshot();
+});