From efe70d979c053c5beb87492b76f53b90085b1680 Mon Sep 17 00:00:00 2001
From: William Candillon <wcandillon@gmail.com>
Date: Sun, 4 Jun 2017 10:50:23 +0200
Subject: [PATCH] feat(decorator): Add responsive decorator (#14)

---
 README.md              | 45 ++++++++++++++++++++++++++++++++++++++----
 example/login/Login.js |  5 +++--
 lib/Responsive.js      | 11 +++++++++++
 lib/index.js           |  4 +++-
 4 files changed, 58 insertions(+), 7 deletions(-)
 create mode 100644 lib/Responsive.js

diff --git a/README.md b/README.md
index 6da4803..64cad6f 100644
--- a/README.md
+++ b/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;
+    }
+}
+```
\ No newline at end of file
diff --git a/example/login/Login.js b/example/login/Login.js
index b3b13dc..2a87edb 100644
--- a/example/login/Login.js
+++ b/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();
diff --git a/lib/Responsive.js b/lib/Responsive.js
new file mode 100644
index 0000000..e44589f
--- /dev/null
+++ b/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} />;
+        }
+    }
+}
\ No newline at end of file
diff --git a/lib/index.js b/lib/index.js
index b48ed73..0e90e4a 100644
--- a/lib/index.js
+++ b/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
 }
\ No newline at end of file