Update default styles

src/modules/Image/ImageStylePropTypes.js

@@ -0,0 +1,20 @@
+import {
+  BorderThemePropTypes,
+  LayoutPropTypes
+} from '../StylePropTypes';
+import { PropTypes } from 'react';
+
+export default {
+  ...BorderThemePropTypes,
+  ...LayoutPropTypes,
+  backgroundColor: PropTypes.string,
+  boxShadow: PropTypes.string,
+  opacity: PropTypes.number,
+  transform: PropTypes.string
+};
+
+export const ImageDefaultStyles = {
+  backgroundColor: 'lightGray',
+  borderWidth: 0,
+  maxWidth: '100%'
+};

src/modules/Image/index.js

@@ -1,61 +1,39 @@
 import { pickProps } from '../filterObjectProps';
-import StylePropTypes from '../StylePropTypes';
+import ImageStylePropTypes, { ImageDefaultStyles } from './ImageStylePropTypes';
 import React, { PropTypes } from 'react';
 import WebStyleComponent from '../WebStyleComponent';
 
-const ImageStyleDefaultProps = {
-  backgroundColor: 'lightGray',
-  borderWidth: 0,
-  maxWidth: '100%'
-};
-
-const ImageStylePropTypes = {
-  ...StylePropTypes.BorderThemePropTypes,
-  ...StylePropTypes.LayoutPropTypes,
-  backgroundColor: PropTypes.string,
-  opacity: PropTypes.string
-};
-
 class Image extends React.Component {
-  static _getPropTypes() {
-    return {
-      alt: PropTypes.string,
-      async: PropTypes.bool,
-      className: PropTypes.string,
-      src: PropTypes.string,
-      style: PropTypes.shape(ImageStylePropTypes)
-    };
+  static propTypes = {
+    alt: PropTypes.string,
+    async: PropTypes.bool,
+    className: PropTypes.string,
+    src: PropTypes.string,
+    style: PropTypes.shape(ImageStylePropTypes)
   }
 
-  static _getDefaultProps() {
-    return {
-      async: true,
-      className: '',
-      src: 'data:image/gif;base64,' +
-          'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
-      style: {}
-    };
+  static defaultProps = {
+    async: true,
+    className: '',
+    src: 'data:image/gif;base64,' +
+        'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
   }
 
   render() {
-    const { alt, className, src, style, ...other } = this.props;
+    const { className, src, style, ...other } = this.props;
     const filteredStyle = pickProps(style, Object.keys(ImageStylePropTypes));
-    const mergedStyle = { ...ImageStyleDefaultProps, ...filteredStyle };
+    const mergedStyle = { ...ImageDefaultStyles, ...filteredStyle };
 
     return (
       <WebStyleComponent
         {...other}
         alt={alt}
-        className={`Image ${className}`}
-        element="img"
-        src={src}
+        className={`sdk-Image ${className}`}
+        element='img'
         style={mergedStyle}
       />
     );
   }
 }
 
-Image.propTypes = Image._getPropTypes();
-Image.defaultProps = Image._getDefaultProps();
-
 export default Image;

src/modules/Text/TextStylePropTypes.js

@@ -0,0 +1,11 @@
+import { TypographicPropTypes } from '../StylePropTypes';
+import { ViewStylePropTypes } from '../View/ViewStylePropTypes';
+
+export default {
+  ...ViewStylePropTypes,
+  ...TypographicPropTypes
+};
+
+export const TextDefaultStyles = {
+  display: 'inline'
+}

src/modules/Text/index.js

@@ -1,65 +1,37 @@
 import { pickProps } from '../filterObjectProps';
-import { ViewStylePropTypes } from '../View';
-import StylePropTypes from '../StylePropTypes';
 import React, { PropTypes } from 'react';
+import TextStylePropTypes, { TextDefaultStyle } from './TextStylePropTypes';
 import WebStyleComponent from '../WebStyleComponent';
 
-const TextStyleDefaultProps = {
-  alignItems: 'stretch', /* 1 */
-  borderWidth: '0',
-  borderStyle: 'solid',
-  boxSizing: 'border-box', /* 2 */
-  display: 'flex', /* 3 */
-  flexBasis: 'auto', /* 1 */
-  flexDirection: 'column', /* 1 */
-  flexShrink: 0, /* 1 */
-  listStyle: 'none',
-  margin: '0',
-  padding: '0',
-  position: 'relative' /* 4 */
-};
-
-const TextStylePropTypes = {
-  ...ViewStylePropTypes,
-  ...StylePropTypes.TypographicPropTypes
-};
-
 class Text extends React.Component {
-  static _getPropTypes() {
-    return {
-      className: PropTypes.string,
-      element: PropTypes.oneOfType([
-        PropTypes.string, PropTypes.func
-      ]),
-      style: PropTypes.shape(TextStylePropTypes)
-    };
+  static propTypes = {
+    children: PropTypes.any,
+    className: PropTypes.string,
+    element: PropTypes.oneOfType([
+      PropTypes.func,
+      PropTypes.string
+    ]),
+    style: PropTypes.shape(TextStylePropTypes)
   }
 
-  static _getDefaultProps() {
-    return {
-      className: '',
-      element: 'div',
-      style: {}
-    };
+  static defaultProps = {
+    className: '',
+    element: 'div'
   }
 
   render() {
     const { className, style, ...other } = this.props;
     const filteredStyle = pickProps(style, Object.keys(TextStylePropTypes));
-    const mergedStyle = { ...TextStyleDefaultProps, ...filteredStyle };
+    const mergedStyle = { ...TextDefaultStyle, ...filteredStyle };
 
     return (
       <WebStyleComponent
         {...other}
-        className={`Text ${className}`}
+        className={`sdk-Text ${className}`}
         style={mergedStyle}
       />
     );
   }
 }
 
-Text.propTypes = Text._getPropTypes();
-Text.defaultProps = Text._getDefaultProps();
-
 export default Text;
-export { TextStylePropTypes };

src/modules/View/ViewStylePropTypes.js

@@ -0,0 +1,32 @@
+import {
+  BackgroundPropTypes,
+  BorderThemePropTypes,
+  LayoutPropTypes
+} from '../StylePropTypes';
+
+import { PropTypes } from 'react';
+
+export default {
+  ...BackgroundPropTypes,
+  ...BorderThemePropTypes,
+  ...LayoutPropTypes,
+  boxShadow: PropTypes.string,
+  opacity: PropTypes.number,
+  transform: PropTypes.string
+};
+
+// https://github.com/facebook/css-layout#default-values
+export const ViewDefaultStyle = {
+  alignItems: 'stretch',
+  borderWidth: 0,
+  borderStyle: 'solid',
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexBasis: 'auto',
+  flexDirection: 'column',
+  flexShrink: 0,
+  listStyle: 'none',
+  margin: 0,
+  padding: 0,
+  position: 'relative'
+};

src/modules/View/index.js

@@ -1,56 +1,28 @@
 import { pickProps } from '../filterObjectProps';
-import StylePropTypes from '../StylePropTypes';
 import React, { PropTypes } from 'react';
+import ViewStylePropTypes, { ViewDefaultStyle } from './ViewStylePropTypes';
 import WebStyleComponent from '../WebStyleComponent';
 
-// https://github.com/facebook/css-layout#default-values
-const ViewStyleDefaultProps = {
-  alignItems: 'stretch',
-  borderWidth: 0,
-  borderStyle: 'solid',
-  boxSizing: 'border-box',
-  display: 'flex',
-  flexBasis: 'auto',
-  flexDirection: 'column',
-  flexShrink: 0,
-  listStyle: 'none',
-  margin: 0,
-  padding: 0,
-  position: 'relative'
-};
-
-const ViewStylePropTypes = {
-  ...StylePropTypes.BackgroundPropTypes,
-  ...StylePropTypes.BorderThemePropTypes,
-  ...StylePropTypes.LayoutPropTypes,
-  boxShadow: PropTypes.string,
-  opacity: PropTypes.number,
-  transform: PropTypes.string
-};
-
 class View extends React.Component {
-  static _getPropTypes() {
-    return {
-      className: PropTypes.string,
-      element: PropTypes.oneOfType([
-        PropTypes.string, PropTypes.func
-      ]),
-      pointerEvents: PropTypes.oneOf([
-        'auto',
-        'box-none',
-        'box-only',
-        'none'
-      ]),
-      style: PropTypes.shape(ViewStylePropTypes)
-    };
+  static propTypes = {
+    children: PropTypes.any,
+    className: PropTypes.string,
+    element: PropTypes.oneOfType([
+      PropTypes.func,
+      PropTypes.string
+    ]),
+    pointerEvents: PropTypes.oneOf([
+      'auto',
+      'box-none',
+      'box-only',
+      'none'
+    ]),
+    style: PropTypes.shape(ViewStylePropTypes)
   }
 
-  static _getDefaultProps() {
-    return {
-      className: '',
-      element: 'div',
-      style: {}
-    };
+  static defaultProps = {
+    className: '',
+    element: 'div'
   }
 
   render() {
@@ -58,7 +30,7 @@ class View extends React.Component {
     const filteredStyle = pickProps(style, Object.keys(ViewStylePropTypes));
     const pointerEventsStyle = pointerEvents && { pointerEvents };
     const mergedStyle = {
-      ...ViewStyleDefaultProps,
+      ...ViewDefaultStyle,
       ...filteredStyle,
       ...pointerEventsStyle
     };
@@ -66,7 +38,7 @@ class View extends React.Component {
     return (
       <WebStyleComponent
         {...other}
-        className={`View ${className}`}
+        className={`sdk-View ${className}`}
         element={element}
         style={mergedStyle}
       />
@@ -74,8 +46,4 @@ class View extends React.Component {
   }
 }
 
-View.propTypes = View._getPropTypes();
-View.defaultProps = View._getDefaultProps();
-
 export default View;
-export { ViewStylePropTypes };