Fix View, Text and Artboard style PropTypes to accept ordinals from StyleSheet object (#243)

* View.style prop accepts numbers

* Text.style prop accepts numbers

* Artboard.style prop accepts numbers

* Test View.style prop validation

* Test Text.style prop validation

* Test Artboard.style prop validation

Author: dmeehan1968

__tests__/components/Artboard.js

@@ -1,10 +1,19 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import Artboard from '../../src/components/Artboard';
+import StyleSheet from '../../src/stylesheet';
 
 describe('<Artboard />', () => {
   it('renders children', () => {
-    const tree = renderer.create(<Artboard><foo><bar /></foo></Artboard>).toJSON();
+    const tree = renderer
+      .create(
+        <Artboard>
+          <foo>
+            <bar />
+          </foo>
+        </Artboard>
+      )
+      .toJSON();
 
     expect(tree).toMatchSnapshot();
   });
@@ -24,4 +33,32 @@ describe('<Artboard />', () => {
       expect(tree).toMatchSnapshot();
     });
   });
+
+  describe('style', () => {
+    const styles = StyleSheet.create({
+      view: {
+        flex: 1,
+      },
+    });
+
+    it('accepts a plain object', () => {
+      const tree = renderer.create(<Artboard style={{ flex: 1 }} />).toJSON();
+
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('accepts a StyleSheet ordinal', () => {
+      const tree = renderer.create(<Artboard style={styles.view} />).toJSON();
+
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('accepts an array of plain objects and/or StyleSheet ordinals', () => {
+      const tree = renderer
+        .create(<Artboard style={[{ flexGrow: 1 }, styles.view]} />)
+        .toJSON();
+
+      expect(tree).toMatchSnapshot();
+    });
+  });
 });

__tests__/components/Text.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import Text from '../../src/components/Text';
+import StyleSheet from '../../src/stylesheet';
 
 describe('<Text />', () => {
   it('passes its children', () => {
@@ -22,4 +23,32 @@ describe('<Text />', () => {
       expect(tree).toMatchSnapshot();
     });
   });
+
+  describe('style', () => {
+    const styles = StyleSheet.create({
+      view: {
+        flex: 1,
+      },
+    });
+
+    it('accepts a plain object', () => {
+      const tree = renderer.create(<Text style={{ flex: 1 }} />).toJSON();
+
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('accepts a StyleSheet ordinal', () => {
+      const tree = renderer.create(<Text style={styles.view} />).toJSON();
+
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('accepts an array of plain objects and/or StyleSheet ordinals', () => {
+      const tree = renderer
+        .create(<Text style={[{ flexGrow: 1 }, styles.view]} />)
+        .toJSON();
+
+      expect(tree).toMatchSnapshot();
+    });
+  });
 });

__tests__/components/View.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import View from '../../src/components/View';
+import StyleSheet from '../../src/stylesheet';
 
 describe('<View />', () => {
   it('passes its children', () => {
@@ -22,4 +23,32 @@ describe('<View />', () => {
       expect(tree).toMatchSnapshot();
     });
   });
+
+  describe('style', () => {
+    const styles = StyleSheet.create({
+      view: {
+        flex: 1,
+      },
+    });
+
+    it('accepts a plain object', () => {
+      const tree = renderer.create(<View style={{ flex: 1 }} />).toJSON();
+
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('accepts a StyleSheet ordinal', () => {
+      const tree = renderer.create(<View style={styles.view} />).toJSON();
+
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('accepts an array of plain objects and/or StyleSheet ordinals', () => {
+      const tree = renderer
+        .create(<View style={[{ flexGrow: 1 }, styles.view]} />)
+        .toJSON();
+
+      expect(tree).toMatchSnapshot();
+    });
+  });
 });

__tests__/components/__snapshots__/Artboard.js.snap

@@ -19,3 +19,34 @@ exports[`<Artboard /> renders children 1`] = `
   </foo>
 </artboard>
 `;
+
+exports[`<Artboard /> style accepts a StyleSheet ordinal 1`] = `
+<artboard
+  name="Artboard"
+  style={
+    Object {
+      "flex": 1,
+    }
+  } />
+`;
+
+exports[`<Artboard /> style accepts a plain object 1`] = `
+<artboard
+  name="Artboard"
+  style={
+    Object {
+      "flex": 1,
+    }
+  } />
+`;
+
+exports[`<Artboard /> style accepts an array of plain objects and/or StyleSheet ordinals 1`] = `
+<artboard
+  name="Artboard"
+  style={
+    Object {
+      "flex": 1,
+      "flexGrow": 1,
+    }
+  } />
+`;

__tests__/components/__snapshots__/Text.js.snap

@@ -20,3 +20,37 @@ exports[`<Text /> passes its children 1`] = `
   foo
 </text>
 `;
+
+exports[`<Text /> style accepts a StyleSheet ordinal 1`] = `
+<text
+  name="Text"
+  resizingConstraint={undefined}
+  style={
+    Object {
+      "flex": 1,
+    }
+  } />
+`;
+
+exports[`<Text /> style accepts a plain object 1`] = `
+<text
+  name="Text"
+  resizingConstraint={undefined}
+  style={
+    Object {
+      "flex": 1,
+    }
+  } />
+`;
+
+exports[`<Text /> style accepts an array of plain objects and/or StyleSheet ordinals 1`] = `
+<text
+  name="Text"
+  resizingConstraint={undefined}
+  style={
+    Object {
+      "flex": 1,
+      "flexGrow": 1,
+    }
+  } />
+`;

__tests__/components/__snapshots__/View.js.snap

@@ -20,3 +20,37 @@ exports[`<View /> passes its children 1`] = `
   foo
 </view>
 `;
+
+exports[`<View /> style accepts a StyleSheet ordinal 1`] = `
+<view
+  name="View"
+  resizingConstraint={undefined}
+  style={
+    Object {
+      "flex": 1,
+    }
+  } />
+`;
+
+exports[`<View /> style accepts a plain object 1`] = `
+<view
+  name="View"
+  resizingConstraint={undefined}
+  style={
+    Object {
+      "flex": 1,
+    }
+  } />
+`;
+
+exports[`<View /> style accepts an array of plain objects and/or StyleSheet ordinals 1`] = `
+<view
+  name="View"
+  resizingConstraint={undefined}
+  style={
+    Object {
+      "flex": 1,
+      "flexGrow": 1,
+    }
+  } />
+`;

src/components/Artboard.js

@@ -6,9 +6,16 @@ import ViewStylePropTypes from './ViewStylePropTypes';
 
 const propTypes = {
   // TODO(lmr): do some nice warning stuff like RN does
-  style: PropTypes.shape({
-    ...ViewStylePropTypes,
-  }),
+  style: PropTypes.oneOfType([
+    PropTypes.shape({ ...ViewStylePropTypes }),
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.shape({ ...ViewStylePropTypes }),
+        PropTypes.number,
+      ])
+    ),
+    PropTypes.number,
+  ]),
   name: PropTypes.string,
   children: PropTypes.node,
 };

src/components/Text.js

@@ -8,10 +8,17 @@ import ResizingConstraintPropTypes from './ResizingConstraintPropTypes';
 
 const propTypes = {
   // TODO(lmr): do some nice warning stuff like RN does
-  style: PropTypes.shape({
-    ...ViewStylePropTypes,
-    ...TextStylePropTypes,
-  }),
+  style: PropTypes.oneOfType([
+    PropTypes.shape({ ...ViewStylePropTypes, ...TextStylePropTypes }),
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.shape({ ...ViewStylePropTypes, ...TextStylePropTypes }),
+        PropTypes.number,
+      ])
+    ),
+    PropTypes.number,
+  ]),
+
   name: PropTypes.string,
   resizingConstraint: PropTypes.shape({
     ...ResizingConstraintPropTypes,

src/components/View.js

@@ -9,7 +9,13 @@ const propTypes = {
   // TODO(lmr): do some nice warning stuff like RN does
   style: PropTypes.oneOfType([
     PropTypes.shape({ ...ViewStylePropTypes }),
-    PropTypes.arrayOf(PropTypes.shape({ ...ViewStylePropTypes })),
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.shape({ ...ViewStylePropTypes }),
+        PropTypes.number,
+      ])
+    ),
+    PropTypes.number,
   ]),
   name: PropTypes.string,
   resizingConstraint: PropTypes.shape({