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 };