feat(decorator): Add responsive decorator (#14)

Author: wcandillon

README.md

@@ -66,23 +66,42 @@ export default class Login extends Component {
 | condition      | boolean | Abritrary boolean value that must be true for the media query to pass. |
 
 
-### ResponsiveComponent
+### Responsive Annotation
 
-`ResponsiveComponents` extends `React.Component` and add the window dimensions to the state of the component.
+You can use es7 annotation in order to listen for dimension changes in a React component.
 
 ```jsx
 import React from "react";
-import {ResponsiveComponent} from "react-native-responsive-ui";
+import {responsive} from "react-native-responsive-ui";
 
-export default class Debug extends ResponsiveComponent {
+@responsive
+export default class Debug extends React.Component {
+    render() {
+        const {width, height} = this.state.window;
+        console.log(`New window dimensions: ${width}x${height}`);
+        return null;
+    }
+}
+```
+
+Or without the decorator syntax:
+
+```jsx
+import React from "react";
+import {responsive} from "react-native-responsive-ui";
+
+class Debug extends React.Component {
     render() {
         const {width, height} = this.state.window;
         console.log(`New window dimensions: ${width}x${height}`);
         return null;
     }
 }
+
+export default responsive(Debug);
 ```
 
+
 ### ResponsiveStyleSheet
 
 `ResponsiveStyleSheet` returns a stylesheet given multiple media queries.
@@ -143,3 +162,21 @@ import {Device, MediaQuerySelector} from "react-native-responsive-ui";
 const {width, height} = Device.dimensions.window;
 MediaQuerySelector.query({ orientation: "portrait", minHeight: 450 }, width, height)
 ```
+
+
+### ResponsiveComponent
+
+`ResponsiveComponents` extends `React.Component` and add the window dimensions to the state of the component.
+
+```jsx
+import React from "react";
+import {ResponsiveComponent} from "react-native-responsive-ui";
+
+export default class Debug extends ResponsiveComponent {
+    render() {
+        const {width, height} = this.state.window;
+        console.log(`New window dimensions: ${width}x${height}`);
+        return null;
+    }
+}
+```

example/login/Login.js

@@ -1,13 +1,14 @@
 // @flow
 import React from "react";
 import {View, StyleSheet} from "react-native";
-import {MediaQuery, ResponsiveStyleSheet, ResponsiveComponent} from "../../lib";
+import {MediaQuery, ResponsiveStyleSheet, responsive} from "../../lib";
 
 import {BackgroundImage, Images, Button} from "../components";
 import Mark from "./Mark";
 import Field from "./Field";
 
-export default class Login extends ResponsiveComponent {
+@responsive
+export default class Login extends React.Component {
     render(): React$Element<*> {
         // const {navigation} = this.props;
         const style = this.getStyle();

lib/Responsive.js

@@ -0,0 +1,11 @@
+// @flow
+import React from "react";
+import ResponsiveComponent from "./ResponsiveComponent";
+
+export default function Responsive(WrapperComponent: ReactClass<*>): ReactClass<*> {
+    return class ResponsiveComponentWrapper extends ResponsiveComponent {
+        render(): React$Element<*> {
+            return <WrapperComponent window={this.state.window} {...this.props} />;
+        }
+    }
+}

lib/index.js

@@ -1,10 +1,12 @@
 // @flow
 import ResponsiveComponent from "./ResponsiveComponent";
+import responsive from "./Responsive";
 import {MediaQuery} from "./MediaQuery";
 import ResponsiveStyleSheet from "./ResponsiveStyleSheet";
 
 export {
     MediaQuery,
     ResponsiveComponent,
-    ResponsiveStyleSheet
+    ResponsiveStyleSheet,
+    responsive
 }