diff --git a/src/modules/Image/ImageStylePropTypes.js b/src/modules/Image/ImageStylePropTypes.js
new file mode 100644
index 00000000..86d49a96
--- /dev/null
+++ b/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%'
+};
diff --git a/src/modules/Image/index.js b/src/modules/Image/index.js
index 287ccc10..53fb2b29 100644
--- a/src/modules/Image/index.js
+++ b/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 (
);
}
}
-Image.propTypes = Image._getPropTypes();
-Image.defaultProps = Image._getDefaultProps();
-
export default Image;
diff --git a/src/modules/Text/TextStylePropTypes.js b/src/modules/Text/TextStylePropTypes.js
new file mode 100644
index 00000000..8d3d93d0
--- /dev/null
+++ b/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'
+}
diff --git a/src/modules/Text/index.js b/src/modules/Text/index.js
index 47fc1c5b..19208582 100644
--- a/src/modules/Text/index.js
+++ b/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 (
);
}
}
-Text.propTypes = Text._getPropTypes();
-Text.defaultProps = Text._getDefaultProps();
-
export default Text;
-export { TextStylePropTypes };
diff --git a/src/modules/View/ViewStylePropTypes.js b/src/modules/View/ViewStylePropTypes.js
new file mode 100644
index 00000000..182c3f1d
--- /dev/null
+++ b/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'
+};
diff --git a/src/modules/View/index.js b/src/modules/View/index.js
index c923987e..0444ff6c 100644
--- a/src/modules/View/index.js
+++ b/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 (
@@ -74,8 +46,4 @@ class View extends React.Component {
}
}
-View.propTypes = View._getPropTypes();
-View.defaultProps = View._getDefaultProps();
-
export default View;
-export { ViewStylePropTypes };