Support style as a funciton, fix #62

vitalets · Oct 31, 2017 · b8936a4 · b8936a4
1 parent 239ed0f
commit b8936a4
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 0.8.0 (tbd)
+
+* Style as a function ([#62])
+
 ## 0.7.0 (Oct 9, 2017)
 
 * Allow create-react-app compile without plugins ([@grantbi] in [#54])
@@ -51,4 +55,5 @@
 [#47]: https://github.com/vitalets/react-native-extended-stylesheet/pull/47
 [#53]: https://github.com/vitalets/react-native-extended-stylesheet/pull/53
 [#54]: https://github.com/vitalets/react-native-extended-stylesheet/pull/54
+[#62]: https://github.com/vitalets/react-native-extended-stylesheet/pull/62
 
diff --git a/README.md b/README.md
@@ -414,21 +414,23 @@ For example, you may *darken* or *lighten* color of variable via [npm color pack
 import Color from 'color';
 import EStyleSheet from 'react-native-extended-stylesheet';
 
+EStyleSheet.build({
+  $buttonColor: 'green'
+});
+...
 const styles = EStyleSheet.create({
   button: {
-    backgroundColor: '$buttonColor',
-  },
-  $underlayColor: () => Color(EStyleSheet.value('$buttonColor')).darken(0.1).hexString();
+    backgroundColor: () => Color(EStyleSheet.value('$buttonColor')).darken(0.1).hexString()
+  }
 });
 ...
 render() {
   return (
-    <TouchableHighlight style={styles.button} underlayColor={styles.$underlayColor}>
+    <TouchableHighlight style={styles.button}>
       ...
     </TouchableHighlight>
   );
 }
-
 ```
 \[[top](#react-native-extended-stylesheet)\]
 

diff --git a/src/__tests__/api.test.js b/src/__tests__/api.test.js
@@ -155,13 +155,30 @@ describe('EStyleSheet API', function () {
   });
 
   describe('value', function () {
-    it('should calculate', function () {
+    it('should calculate values as string', function () {
       api.build({$d: 1});
       const res1 = api.value('$d+1');
       const res2 = api.value('100% - 10', 'width');
       expect(res1).toBe(2);
       expect(res2).toBe(90);
     });
+
+    it('should calc value inside style as a function', function () {
+      api.build({
+        $defaultText: {
+          fontSize: 1
+        }
+      });
+      const styles = api.create({
+        text: () => api.value('$defaultText')
+      });
+      expect(styles).toEqual({
+        _text: {
+          fontSize: 1
+        },
+        text: 0
+      });
+    });
   });
 
   describe('child', function () {

diff --git a/src/__tests__/sheet.test.js b/src/__tests__/sheet.test.js
@@ -67,13 +67,42 @@ describe('sheet', function () {
     });
   });
 
-  it('should not break on non-object styles', function () {
+  it('should copy primitive values as is', function () {
     const source = {
-      x: null,
+      a: 0,
+      b: 1,
+      c: '',
+      d: 'abc',
+      e: null,
+      f: false,
+      g: undefined,
+      h: NaN
     };
     const result = new Sheet(source).calc();
     expect(result).toEqual({
-      x: null
+      a: 0,
+      b: 1,
+      c: '',
+      d: 'abc',
+      e: null,
+      f: false,
+      g: undefined,
+      h: NaN
+    });
+  });
+
+  it('should calc style as a function', function () {
+    const source = {
+      $b: 2,
+      text: () => {return {fontSize: '$b'}}
+    };
+    const result = new Sheet(source).calc();
+    expect(result).toEqual({
+      $b: 2,
+      _text: {
+        fontSize: 2,
+      },
+      text: 0,
     });
   });
 

diff --git a/src/sheet.js b/src/sheet.js
@@ -57,11 +57,15 @@ export default class {
   calcStyles() {
     const extractedStyles = utils.excludeKeys(this.processedSource, this.localVars);
     Object.keys(extractedStyles).forEach(key => {
-      if (extractedStyles[key]) {
-        this.calcStyle(key, extractedStyles[key]);
+      let styles = extractedStyles[key];
+      if (typeof styles === 'function') {
+        styles = styles();
+      }
+      if (styles && typeof styles === 'object') {
+        this.calcStyle(key, styles);
       } else {
-        // copy falsy values to result as-is
-        this.result[key] = extractedStyles[key];
+        // copy primitive values to result as-is
+        this.result[key] = styles;
       }
     });
   }