v2.6.0

FezVrasta · Aug 24, 2017 · 24d9a73 · 24d9a73
1 parent 4fe1c68
commit 24d9a73
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 24 deletions.
diff --git a/docs/react-resize-aware.js b/docs/react-resize-aware.js
diff --git 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
@@ -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
@@ -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
@@ -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,25 +41,40 @@ 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();
 });
 
 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();
+});