Remove unused state (#10)

* Remove unused state

.storybook/manager-head.html

@@ -0,0 +1 @@
+<meta name="viewport" content="width=device-width, initial-scale=1">

README.md

@@ -97,7 +97,6 @@ import AspectRatio from 'react-aspect-ratio';
 />;
 ```
 
-
 ### CSS (By Thierry)
 
 ```css

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-aspect-ratio",
-  "version": "1.0.39",
+  "version": "1.0.40",
   "description": "React Aspect Ratio Component",
   "author": "Roderick Hsiao <[email protected]>",
   "repository": {
@@ -62,9 +62,6 @@
   "peerDependencies": {
     "react": "^0.14.7 || ^15.0.0 || ^16.0.0"
   },
-  "dependencies": {
-    "react-lifecycles-compat": "^3.0.0"
-  },
   "module": "dist/es/index.js",
   "main": "dist/index.js",
   "engines": {

src/__tests__/__snapshots__/index.js.snap

@@ -1,5 +1,103 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Aspect Ratio React < 15.6 custom style willl be adpoted 1`] = `
+<div
+  className="react-aspect-ratio-placeholder"
+  style={
+    Object {
+      "--aspect-ratio": "(4/3)",
+      "color": "#fff",
+    }
+  }
+>
+  <img
+    alt="demo"
+    src="https://foo.bar"
+  />
+</div>
+`;
+
+exports[`Aspect Ratio React < 15.6 should render wrapper for children 1`] = `
+<div
+  className="react-aspect-ratio-placeholder"
+  style={
+    Object {
+      "--aspect-ratio": "(4/3)",
+    }
+  }
+>
+  <img
+    alt="demo"
+    src="https://foo.bar"
+  />
+</div>
+`;
+
+exports[`Aspect Ratio React < 15.6 should support number as props 1`] = `
+<div
+  className="react-aspect-ratio-placeholder"
+  style={
+    Object {
+      "--aspect-ratio": "(0.75)",
+    }
+  }
+>
+  <img
+    alt="demo"
+    src="https://foo.bar"
+  />
+</div>
+`;
+
+exports[`Aspect Ratio React > 15.6 custom style willl be adpoted 1`] = `
+<div
+  className="react-aspect-ratio-placeholder"
+  style={
+    Object {
+      "--aspect-ratio": "(4/3)",
+      "color": "#fff",
+    }
+  }
+>
+  <img
+    alt="demo"
+    src="https://foo.bar"
+  />
+</div>
+`;
+
+exports[`Aspect Ratio React > 15.6 should render wrapper for children 1`] = `
+<div
+  className="react-aspect-ratio-placeholder"
+  style={
+    Object {
+      "--aspect-ratio": "(4/3)",
+    }
+  }
+>
+  <img
+    alt="demo"
+    src="https://foo.bar"
+  />
+</div>
+`;
+
+exports[`Aspect Ratio React > 15.6 should support number as props 1`] = `
+<div
+  className="react-aspect-ratio-placeholder"
+  style={
+    Object {
+      "--aspect-ratio": "(0.75)",
+    }
+  }
+>
+  <img
+    alt="demo"
+    src="https://foo.bar"
+  />
+</div>
+`;
+
 exports[`Aspect Ratio custom style willl be adpoted 1`] = `
 <div
   className="react-aspect-ratio-placeholder"

src/__tests__/index.js

@@ -1,31 +1,64 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 
-import AspectRatio from '../index';
+import OldAspectRatio, { AspectRatio } from '../index'; // // eslint-disable-line import/no-named-as-default
 
 describe('Aspect Ratio', () => {
-  it('should render wrapper for children', () => {
-    const innerImage = <img src="https://foo.bar" alt="demo" />;
-    const node = renderer.create(<AspectRatio ratio="4/3">{innerImage}</AspectRatio>).toJSON();
-    expect(node).toMatchSnapshot();
-  });
+  describe('React < 15.6', () => {
+    it('should render wrapper for children', () => {
+      const innerImage = <img src="https://foo.bar" alt="demo" />;
+      const node = renderer
+        .create(<OldAspectRatio ratio="4/3">{innerImage}</OldAspectRatio>)
+        .toJSON();
+      expect(node).toMatchSnapshot();
+    });
+
+    it('should support number as props', () => {
+      const innerImage = <img src="https://foo.bar" alt="demo" />;
+      const node = renderer
+        .create(<OldAspectRatio ratio={0.75}>{innerImage}</OldAspectRatio>)
+        .toJSON();
+      expect(node).toMatchSnapshot();
+    });
+
+    it('custom style willl be adpoted', () => {
+      const innerImage = <img src="https://foo.bar" alt="demo" />;
+      const node = renderer
+        .create(
+          <OldAspectRatio ratio="4/3" style={{ color: '#fff' }}>
+            {innerImage}
+          </OldAspectRatio>
+        )
+        .toJSON();
 
-  it('should support number as props', () => {
-    const innerImage = <img src="https://foo.bar" alt="demo" />;
-    const node = renderer.create(<AspectRatio ratio={0.75}>{innerImage}</AspectRatio>).toJSON();
-    expect(node).toMatchSnapshot();
+      expect(node).toMatchSnapshot();
+    });
   });
 
-  it('custom style willl be adpoted', () => {
-    const innerImage = <img src="https://foo.bar" alt="demo" />;
-    const node = renderer
-      .create(
-        <AspectRatio ratio="4/3" style={{ color: '#fff' }}>
-          {innerImage}
-        </AspectRatio>
-      )
-      .toJSON();
-
-    expect(node).toMatchSnapshot();
+  describe('React > 15.6', () => {
+    it('should render wrapper for children', () => {
+      const innerImage = <img src="https://foo.bar" alt="demo" />;
+      const node = renderer.create(<AspectRatio ratio="4/3">{innerImage}</AspectRatio>).toJSON();
+      expect(node).toMatchSnapshot();
+    });
+
+    it('should support number as props', () => {
+      const innerImage = <img src="https://foo.bar" alt="demo" />;
+      const node = renderer.create(<AspectRatio ratio={0.75}>{innerImage}</AspectRatio>).toJSON();
+      expect(node).toMatchSnapshot();
+    });
+
+    it('custom style willl be adpoted', () => {
+      const innerImage = <img src="https://foo.bar" alt="demo" />;
+      const node = renderer
+        .create(
+          <AspectRatio ratio="4/3" style={{ color: '#fff' }}>
+            {innerImage}
+          </AspectRatio>
+        )
+        .toJSON();
+
+      expect(node).toMatchSnapshot();
+    });
   });
 });

src/index.js

@@ -1,82 +1,5 @@
-// @flow
-import React, { PureComponent, type Element } from 'react';
+import react156 from './react-15.6';
+import reactLatest from './react-latest';
 
-import { polyfill } from 'react-lifecycles-compat';
-
-const CUSTOM_PROPERTY_NAME = '--aspect-ratio';
-
-type Props = {
-  ratio: string | number, // eslint-disable-line
-  style: Object,
-  children: Element<any>
-};
-
-type State = {
-  ratio: string | number
-};
-
-class AspectRatio extends PureComponent<Props, State> {
-  node: ?HTMLDivElement;
-
-  state: {
-    ratio: string | number
-  };
-
-  state = {
-    ratio: this.props.ratio
-  };
-
-  node = null;
-
-  static defaultProps = {
-    className: 'react-aspect-ratio-placeholder',
-    ratio: 1
-  };
-
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (nextProps.ratio === prevState.ratio) {
-      return null;
-    }
-
-    return {
-      ratio: nextProps.ratio
-    };
-  }
-
-  componentDidUpdate() {
-    if (this.node) {
-      const { node } = this;
-
-      // BC for older version of React https://github.com/facebook/react/issues/6411
-      // check if React support custom property AFTER
-      const customPropertyValue = node.style.getPropertyValue(CUSTOM_PROPERTY_NAME);
-      if (!customPropertyValue) {
-        node.style.setProperty(CUSTOM_PROPERTY_NAME, `(${this.state.ratio})`);
-      }
-    }
-  }
-
-  setNode = (node: ?HTMLDivElement): void => {
-    this.node = node;
-  };
-
-  render(): Element<'div'> {
-    const {
-      ratio, style, children, ...otherProps
-    } = this.props; // eslint-disable-line no-unused-vars
-
-    const newStyle = {
-      ...style,
-      // https://github.com/roderickhsiao/react-aspect-ratio/commit/53ec15858ae186c41e70b8c14cc5a5b6e97cb6e3
-      [CUSTOM_PROPERTY_NAME]: `(${this.state.ratio})`
-    };
-
-    return (
-      <div ref={this.setNode} style={newStyle} {...otherProps}>
-        {children}
-      </div>
-    );
-  }
-}
-
-export default polyfill(AspectRatio);
+export default react156; // use before react 15.6
+export const AspectRatio = reactLatest;

src/react-15.6.js

@@ -0,0 +1,56 @@
+// @flow
+import React, { Component, type Element } from 'react';
+
+const CUSTOM_PROPERTY_NAME = '--aspect-ratio';
+
+type Props = {
+  ratio: string | number, // eslint-disable-line
+  style: Object,
+  children: Element<any>
+};
+
+class AspectRatio extends Component<Props> {
+  node: ?HTMLDivElement = null;
+
+  static defaultProps = {
+    className: 'react-aspect-ratio-placeholder',
+    ratio: 1
+  };
+
+  componentDidUpdate() {
+    if (this.node) {
+      const { node } = this;
+
+      // BC for older version of React https://github.com/facebook/react/issues/6411
+      // check if React support custom property AFTER
+      const customPropertyValue = node.style.getPropertyValue(CUSTOM_PROPERTY_NAME);
+      if (!customPropertyValue) {
+        node.style.setProperty(CUSTOM_PROPERTY_NAME, `(${this.props.ratio})`);
+      }
+    }
+  }
+
+  setNode = (node: ?HTMLDivElement): void => {
+    this.node = node;
+  };
+
+  render(): Element<'div'> {
+    const {
+      ratio, style, children, ...otherProps
+    } = this.props; // eslint-disable-line no-unused-vars
+
+    const newStyle = {
+      ...style,
+      // https://github.com/roderickhsiao/react-aspect-ratio/commit/53ec15858ae186c41e70b8c14cc5a5b6e97cb6e3
+      [CUSTOM_PROPERTY_NAME]: `(${ratio})`
+    };
+
+    return (
+      <div ref={this.setNode} style={newStyle} {...otherProps}>
+        {children}
+      </div>
+    );
+  }
+}
+
+export default AspectRatio;

src/react-latest.js

@@ -0,0 +1,35 @@
+// @flow
+import React, { type Element } from 'react';
+
+const CUSTOM_PROPERTY_NAME = '--aspect-ratio';
+
+type Props = {
+  ratio: string | number, // eslint-disable-line
+  style: Object,
+  children: Element<any>
+};
+
+const AspectRatio = (props: Props) => {
+  const {
+    ratio, style, children, ...otherProps
+  } = props; // eslint-disable-line no-unused-vars
+
+  const newStyle = {
+    ...style,
+    // https://github.com/roderickhsiao/react-aspect-ratio/commit/53ec15858ae186c41e70b8c14cc5a5b6e97cb6e3
+    [CUSTOM_PROPERTY_NAME]: `(${ratio})`
+  };
+
+  return (
+    <div style={newStyle} {...otherProps}>
+      {children}
+    </div>
+  );
+};
+
+AspectRatio.defaultProps = {
+  className: 'react-aspect-ratio-placeholder',
+  ratio: 1
+};
+
+export default AspectRatio;