Merge 83a7f0c into ccea7a3

.eslintrc

@@ -14,6 +14,10 @@
     "node": true,
     "jest": true
   },
+
+  "globals": {
+    "window": true
+  },
 
   "plugins": [
     "react",

README.md

@@ -263,6 +263,43 @@ const styles = EStyleSheet.create({
   }
 });
 ```
+
+An idea for the orientation change support, it requires using another package for detecting the orientation change event, like react-native-orientation
+
+```js
+var Orientation = require('react-native-orientation');
+var styles = EStyleSheet.create({
+    card: {
+      height: 200,
+    },
+    '@media all and (orientation: portrait)': {
+      card: {
+        width: '42%'
+      }
+    },
+    '@media all and (orientation: landscape)': {
+      card: {
+        width: '23%'
+      }
+    }
+});
+```
+inside your component use:
+```js
+componentDidMount() {
+  Orientation.addOrientationListener(this._orientationDidChange.bind(this));
+}
+
+componentWillUnmount() {
+  Orientation.removeOrientationListener(this._orientationDidChange);
+}
+
+_orientationDidChange(orientation) {
+  styles = EStyleSheet.orientationUpdate(orientation, styles); 
+  this.forceUpdate();
+}
+```
+
 See full example [here](examples/media-queries).  
 \[[top](#)\]
 

src/__tests__/api.test.js

@@ -120,4 +120,19 @@ describe('EStyleSheet API', function () {
     const fn = () => api.subscribe('build', null);
     expect(fn).toThrowError('Listener should be a function.');
   });
+
+  it('should update styles in orientation change', function () {
+	api.build({});
+    let defaultStyles = api.create({
+      card: {
+        width: '50%',
+      }
+    });
+
+	let portraitStyles = api.orientationUpdate('portrait', defaultStyles); 
+    expect(defaultStyles).toEqual(portraitStyles);
+
+	let landscapeStyles = api.orientationUpdate('landscape', defaultStyles); 
+	expect(defaultStyles).not.toEqual(landscapeStyles);
+  });
 });

src/api.js

@@ -37,6 +37,22 @@ export default class {
     } else {
       this.sheets.push(sheet);
     }
+    this._cacheSheetSource(sheet.getResult(), sheet);
+
+    return sheet.getResult();
+  }
+
+  /**
+   * Updates a specific stylesheet when the orientation changes
+   * @param {orientation} string
+   * @param {originalObj} obj
+   * @returns {Object}
+   */
+  orientationUpdate(orientation, originalObj) {
+    window.orientation = orientation;
+    var source = this._cacheSheetSource(originalObj);
+    let sheet = new Sheet(source);
+    sheet.calc(this.globalVars);
     return sheet.getResult();
   }
 
@@ -99,4 +115,17 @@ export default class {
       this.listeners[event].forEach(listener => listener());
     }
   }
+
+  _cacheSheetSource(key, sheet){
+    key = JSON.stringify(Object.keys(key));
+    if (!memoize.cache) {
+      memoize.cache = {};
+    }
+    if (!memoize.cache[key]) {
+      if(sheet){
+        memoize.cache[key] = sheet.source;
+      }
+    }
+    return memoize.cache[key];
+  }
 }

src/replacers/media-queries.js

@@ -8,7 +8,7 @@
  * - aspect-ratio
  */
 
-import {Dimensions, Platform} from 'react-native';
+import {Platform} from 'react-native';
 import mediaQuery from 'css-mediaquery';
 import utils from '../utils';
 
@@ -64,11 +64,11 @@ function process(obj) {
  * @returns {Object}
  */
 function getMatchObject() {
-  const win = Dimensions.get('window');
+  const win = utils.calcOrientation(window.orientation);
   return {
     width: win.width,
     height: win.height,
-    orientation: win.width > win.height ? 'landscape' : 'portrait',
+    orientation: win.orientation,
     'aspect-ratio': win.width / win.height,
     type: Platform.OS,
   };

src/replacers/percent.js

@@ -1,10 +1,8 @@
 /**
  * Calculation of percent strings
  */
+import utils from '../utils';
 
-import {Dimensions} from 'react-native';
-
-const {width, height} = Dimensions.get('window');
 const V_PROPS = [
   'height',
   'top',
@@ -44,8 +42,10 @@ function isPercent(str) {
  * @returns {number}
  */
 function calc(str, prop) {
+  const win = utils.calcOrientation(window.orientation);
+
   let percent = parseInt(str.substring(0, str.length - 1), 10);
-  let base = isVertical(prop) ? height : width;
+  let base = isVertical(prop) ? win.height : win.width;
   return base * percent / 100;
 }
 

src/utils.js

@@ -1,10 +1,12 @@
 /**
  * Utils
  */
+import {Dimensions} from 'react-native';
 
 export default {
   excludeKeys,
   isObject,
+  calcOrientation
 };
 
 /**
@@ -31,3 +33,28 @@ function excludeKeys(obj, keys) {
 function isObject(obj) {
   return typeof obj === 'object' && obj !== null;
 }
+
+function calcOrientation(orientation){
+  var {width, height} = Dimensions.get('window');
+  if(orientation){
+    orientation = orientation.toLowerCase();
+  }
+  var newWidth = width;
+  var newHeight = height;
+
+  if (orientation == 'landscape') {
+    if(height > width){
+      newWidth = height;
+      newHeight = width;
+    }
+  }else if (orientation == 'portrait') {
+    if(width > height){
+      newWidth = height;
+      newHeight = width;
+    }
+  }
+  if(!orientation){
+    orientation = newWidth > newHeight ? 'landscape' : 'portrait'
+  }
+  return {width: newWidth, height: newHeight, orientation: orientation};
+}