From ecc23f46d473938fe0f57acf0f9d5d09c13e62bd Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Wed, 19 Aug 2015 14:07:57 -0700 Subject: [PATCH] Move all style related work into 'react-web-style' Move the styling strategy into a separate module within react-web-style; consider supporting strategy injection. --- src/index.js | 4 -- src/modules/Image/ImageStylePropTypes.js | 9 +-- src/modules/Image/index.js | 4 +- src/modules/Text/TextStylePropTypes.js | 4 +- src/modules/Text/index.js | 6 +- .../TextInput/TextInputStylePropTypes.js | 4 +- src/modules/TextInput/index.js | 4 +- src/modules/View/ViewStylePropTypes.js | 13 ++-- src/modules/View/index.js | 9 ++- src/modules/WebStyleComponent/index.js | 70 ------------------- .../StylePropTypes/Background.js | 0 .../StylePropTypes/BorderTheme.js | 0 .../StylePropTypes/BoxModel.js | 0 .../StylePropTypes/Flexbox.js | 0 .../StylePropTypes/Layout.js | 0 .../StylePropTypes/Position.js | 0 .../StylePropTypes/Typographic.js | 0 .../StylePropTypes/index.js | 0 .../lib => react-web-style}/autoprefix.js | 0 .../lib => react-web-style}/css/.gitkeep | 0 .../css/appearance.css | 0 .../css/background.css | 0 .../lib => react-web-style}/css/border.css | 0 .../lib => react-web-style}/css/boxSizing.css | 0 .../lib => react-web-style}/css/clear.css | 0 .../lib => react-web-style}/css/color.css | 0 .../lib => react-web-style}/css/direction.css | 0 .../lib => react-web-style}/css/display.css | 0 .../lib => react-web-style}/css/flexbox.css | 0 .../lib => react-web-style}/css/float.css | 0 .../lib => react-web-style}/css/font.css | 0 .../lib => react-web-style}/css/height.css | 0 .../css/lineHeight.css | 0 .../lib => react-web-style}/css/list.css | 0 .../lib => react-web-style}/css/margin.css | 0 .../lib => react-web-style}/css/opacity.css | 0 .../lib => react-web-style}/css/overflow.css | 0 .../lib => react-web-style}/css/padding.css | 0 .../css/pointerEvents.css | 0 .../lib => react-web-style}/css/position.css | 0 .../lib => react-web-style}/css/text.css | 0 .../css/unicodeBidi.css | 0 .../css/userSelect.css | 0 .../css/visibility.css | 0 .../css/whiteSpace.css | 0 .../lib => react-web-style}/css/width.css | 0 .../lib => react-web-style}/css/word.css | 0 .../lib => react-web-style}/css/zIndex.css | 0 src/modules/react-web-style/index.js | 33 +++++++++ src/modules/react-web-style/strategy.js | 38 ++++++++++ .../lib => react-web-style}/styleMap.js | 0 51 files changed, 93 insertions(+), 105 deletions(-) delete mode 100644 src/modules/WebStyleComponent/index.js rename src/modules/{ => react-web-style}/StylePropTypes/Background.js (100%) rename src/modules/{ => react-web-style}/StylePropTypes/BorderTheme.js (100%) rename src/modules/{ => react-web-style}/StylePropTypes/BoxModel.js (100%) rename src/modules/{ => react-web-style}/StylePropTypes/Flexbox.js (100%) rename src/modules/{ => react-web-style}/StylePropTypes/Layout.js (100%) rename src/modules/{ => react-web-style}/StylePropTypes/Position.js (100%) rename src/modules/{ => react-web-style}/StylePropTypes/Typographic.js (100%) rename src/modules/{ => react-web-style}/StylePropTypes/index.js (100%) rename src/modules/{WebStyleComponent/lib => react-web-style}/autoprefix.js (100%) rename src/modules/{WebStyleComponent/lib => react-web-style}/css/.gitkeep (100%) rename src/modules/{WebStyleComponent/lib => react-web-style}/css/appearance.css (100%) rename src/modules/{WebStyleComponent/lib => react-web-style}/css/background.css (100%) rename src/modules/{WebStyleComponent/lib => react-web-style}/css/border.css (100%) rename src/modules/{WebStyleComponent/lib => react-web-style}/css/boxSizing.css (100%) rename src/modules/{WebStyleComponent/lib => react-web-style}/css/clear.css (100%) rename src/modules/{WebStyleComponent/lib => react-web-style}/css/color.css (100%) rename src/modules/{WebStyleComponent/lib => react-web-style}/css/direction.css (100%) rename src/modules/{WebStyleComponent/lib => react-web-style}/css/display.css (100%) rename src/modules/{WebStyleComponent/lib => react-web-style}/css/flexbox.css (100%) rename src/modules/{WebStyleComponent/lib => react-web-style}/css/float.css (100%) rename src/modules/{WebStyleComponent/lib => react-web-style}/css/font.css (100%) rename src/modules/{WebStyleComponent/lib => react-web-style}/css/height.css (100%) rename src/modules/{WebStyleComponent/lib => react-web-style}/css/lineHeight.css (100%) rename src/modules/{WebStyleComponent/lib => react-web-style}/css/list.css (100%) rename src/modules/{WebStyleComponent/lib => react-web-style}/css/margin.css (100%) rename src/modules/{WebStyleComponent/lib => react-web-style}/css/opacity.css (100%) rename src/modules/{WebStyleComponent/lib => react-web-style}/css/overflow.css (100%) rename src/modules/{WebStyleComponent/lib => react-web-style}/css/padding.css (100%) rename src/modules/{WebStyleComponent/lib => react-web-style}/css/pointerEvents.css (100%) rename src/modules/{WebStyleComponent/lib => react-web-style}/css/position.css (100%) rename src/modules/{WebStyleComponent/lib => react-web-style}/css/text.css (100%) rename src/modules/{WebStyleComponent/lib => react-web-style}/css/unicodeBidi.css (100%) rename src/modules/{WebStyleComponent/lib => react-web-style}/css/userSelect.css (100%) rename src/modules/{WebStyleComponent/lib => react-web-style}/css/visibility.css (100%) rename src/modules/{WebStyleComponent/lib => react-web-style}/css/whiteSpace.css (100%) rename src/modules/{WebStyleComponent/lib => react-web-style}/css/width.css (100%) rename src/modules/{WebStyleComponent/lib => react-web-style}/css/word.css (100%) rename src/modules/{WebStyleComponent/lib => react-web-style}/css/zIndex.css (100%) create mode 100644 src/modules/react-web-style/index.js create mode 100644 src/modules/react-web-style/strategy.js rename src/modules/{WebStyleComponent/lib => react-web-style}/styleMap.js (100%) diff --git a/src/index.js b/src/index.js index d933acff..4f9df69b 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,4 @@ import { getOtherProps, omitProps, pickProps } from './modules/filterObjectProps'; -import WebStyleComponent from './modules/WebStyleComponent'; -import StylePropTypes from './modules/StylePropTypes'; import Image from './modules/Image'; import Text from './modules/Text'; import TextInput from './modules/TextInput'; @@ -10,8 +8,6 @@ export default { getOtherProps, omitProps, pickProps, - StylePropTypes, - WebStyleComponent, Image, Text, TextInput, diff --git a/src/modules/Image/ImageStylePropTypes.js b/src/modules/Image/ImageStylePropTypes.js index 86d49a96..c7d5fbe4 100644 --- a/src/modules/Image/ImageStylePropTypes.js +++ b/src/modules/Image/ImageStylePropTypes.js @@ -1,12 +1,9 @@ -import { - BorderThemePropTypes, - LayoutPropTypes -} from '../StylePropTypes'; +import { StylePropTypes } from '../react-web-style'; import { PropTypes } from 'react'; export default { - ...BorderThemePropTypes, - ...LayoutPropTypes, + ...StylePropTypes.BorderThemePropTypes, + ...StylePropTypes.LayoutPropTypes, backgroundColor: PropTypes.string, boxShadow: PropTypes.string, opacity: PropTypes.number, diff --git a/src/modules/Image/index.js b/src/modules/Image/index.js index 53fb2b29..1c4faeea 100644 --- a/src/modules/Image/index.js +++ b/src/modules/Image/index.js @@ -1,7 +1,7 @@ import { pickProps } from '../filterObjectProps'; +import { WebStyleComponent } from '../react-web-style'; import ImageStylePropTypes, { ImageDefaultStyles } from './ImageStylePropTypes'; import React, { PropTypes } from 'react'; -import WebStyleComponent from '../WebStyleComponent'; class Image extends React.Component { static propTypes = { @@ -29,7 +29,7 @@ class Image extends React.Component { {...other} alt={alt} className={`sdk-Image ${className}`} - element='img' + component='img' style={mergedStyle} /> ); diff --git a/src/modules/Text/TextStylePropTypes.js b/src/modules/Text/TextStylePropTypes.js index 8d3d93d0..80f82eff 100644 --- a/src/modules/Text/TextStylePropTypes.js +++ b/src/modules/Text/TextStylePropTypes.js @@ -1,9 +1,9 @@ -import { TypographicPropTypes } from '../StylePropTypes'; +import { StylePropTypes } from '../react-web-style'; import { ViewStylePropTypes } from '../View/ViewStylePropTypes'; export default { ...ViewStylePropTypes, - ...TypographicPropTypes + ...StylePropTypes.TypographicPropTypes }; export const TextDefaultStyles = { diff --git a/src/modules/Text/index.js b/src/modules/Text/index.js index 19208582..78674abe 100644 --- a/src/modules/Text/index.js +++ b/src/modules/Text/index.js @@ -1,13 +1,13 @@ import { pickProps } from '../filterObjectProps'; +import { WebStyleComponent } from '../react-web-style'; import React, { PropTypes } from 'react'; import TextStylePropTypes, { TextDefaultStyle } from './TextStylePropTypes'; -import WebStyleComponent from '../WebStyleComponent'; class Text extends React.Component { static propTypes = { children: PropTypes.any, className: PropTypes.string, - element: PropTypes.oneOfType([ + component: PropTypes.oneOfType([ PropTypes.func, PropTypes.string ]), @@ -16,7 +16,7 @@ class Text extends React.Component { static defaultProps = { className: '', - element: 'div' + component: 'div' } render() { diff --git a/src/modules/TextInput/TextInputStylePropTypes.js b/src/modules/TextInput/TextInputStylePropTypes.js index 9c592d5e..f1ec5874 100644 --- a/src/modules/TextInput/TextInputStylePropTypes.js +++ b/src/modules/TextInput/TextInputStylePropTypes.js @@ -1,10 +1,10 @@ import { PropTypes } from 'react'; -import { TypographicPropTypes } from '../StylePropTypes'; +import { StylePropTypes } from '../react-web-style'; import ViewStylePropTypes from '../View/ViewStylePropTypes'; export default { ...ViewStylePropTypes, - ...TypographicPropTypes + ...StylePropTypes.TypographicPropTypes }; export const TextInputDefaultStyles = { diff --git a/src/modules/TextInput/index.js b/src/modules/TextInput/index.js index 7d650348..59799e65 100644 --- a/src/modules/TextInput/index.js +++ b/src/modules/TextInput/index.js @@ -1,7 +1,7 @@ import { pickProps } from '../filterObjectProps'; +import { WebStyleComponent } from '../react-web-style'; import React, { PropTypes } from 'react'; import TextInputStylePropTypes, { TextInputDefaultStyles } from './TextInputStylePropTypes'; -import WebStyleComponent from '../WebStyleComponent'; class TextInput extends React.Component { static propTypes = { @@ -26,8 +26,8 @@ class TextInput extends React.Component { diff --git a/src/modules/View/ViewStylePropTypes.js b/src/modules/View/ViewStylePropTypes.js index 182c3f1d..d940c2ab 100644 --- a/src/modules/View/ViewStylePropTypes.js +++ b/src/modules/View/ViewStylePropTypes.js @@ -1,15 +1,10 @@ -import { - BackgroundPropTypes, - BorderThemePropTypes, - LayoutPropTypes -} from '../StylePropTypes'; - import { PropTypes } from 'react'; +import { StylePropTypes } from '../react-web-style'; export default { - ...BackgroundPropTypes, - ...BorderThemePropTypes, - ...LayoutPropTypes, + ...StylePropTypes.BackgroundPropTypes, + ...StylePropTypes.BorderThemePropTypes, + ...StylePropTypes.LayoutPropTypes, boxShadow: PropTypes.string, opacity: PropTypes.number, transform: PropTypes.string diff --git a/src/modules/View/index.js b/src/modules/View/index.js index 0444ff6c..f289dff8 100644 --- a/src/modules/View/index.js +++ b/src/modules/View/index.js @@ -1,13 +1,13 @@ import { pickProps } from '../filterObjectProps'; +import { WebStyleComponent } from '../react-web-style'; import React, { PropTypes } from 'react'; import ViewStylePropTypes, { ViewDefaultStyle } from './ViewStylePropTypes'; -import WebStyleComponent from '../WebStyleComponent'; class View extends React.Component { static propTypes = { children: PropTypes.any, className: PropTypes.string, - element: PropTypes.oneOfType([ + component: PropTypes.oneOfType([ PropTypes.func, PropTypes.string ]), @@ -22,11 +22,11 @@ class View extends React.Component { static defaultProps = { className: '', - element: 'div' + component: 'div' } render() { - const { className, element, pointerEvents, style, ...other } = this.props; + const { className, pointerEvents, style, ...other } = this.props; const filteredStyle = pickProps(style, Object.keys(ViewStylePropTypes)); const pointerEventsStyle = pointerEvents && { pointerEvents }; const mergedStyle = { @@ -39,7 +39,6 @@ class View extends React.Component { ); diff --git a/src/modules/WebStyleComponent/index.js b/src/modules/WebStyleComponent/index.js deleted file mode 100644 index edca6cfe..00000000 --- a/src/modules/WebStyleComponent/index.js +++ /dev/null @@ -1,70 +0,0 @@ -import autoprefix from './lib/autoprefix'; -import React, {PropTypes} from 'react'; -import styleMap from './lib/styleMap'; - -class WebStyleComponent extends React.Component { - static _getPropTypes() { - return { - className: PropTypes.string, - element: PropTypes.oneOfType([ - PropTypes.string, PropTypes.func - ]), - style: PropTypes.object - }; - } - - static _getDefaultProps() { - return { - className: '', - element: 'div', - style: {} - }; - } - - - render() { - const { element: Element, ...other } = this.props; - const { classNames, inlineStyles } = this._separateClassNamesAndStyles(); - - return ( - - ); - } - - _getSinglePurposeClassName(prop, style) { - const uniqueClassName = `${prop}-${style[prop]}`; - if ( - style.hasOwnProperty(prop) && - styleMap[uniqueClassName] - ) { - return styleMap[uniqueClassName]; - } - } - - _separateClassNamesAndStyles() { - const styleProp = this.props.style; - let classNames = [ this.props.className ]; - let inlineStyles = {}; - - for (let prop in styleProp) { - let singlePurposeClassName = - this._getSinglePurposeClassName(prop, styleProp); - if (singlePurposeClassName) { - classNames.push(singlePurposeClassName); - } else { - inlineStyles[prop] = styleProp[prop]; - } - } - - return { classNames, inlineStyles }; - } -} - -WebStyleComponent.propTypes = WebStyleComponent._getPropTypes(); -WebStyleComponent.defaultProps = WebStyleComponent._getDefaultProps(); - -export default WebStyleComponent; diff --git a/src/modules/StylePropTypes/Background.js b/src/modules/react-web-style/StylePropTypes/Background.js similarity index 100% rename from src/modules/StylePropTypes/Background.js rename to src/modules/react-web-style/StylePropTypes/Background.js diff --git a/src/modules/StylePropTypes/BorderTheme.js b/src/modules/react-web-style/StylePropTypes/BorderTheme.js similarity index 100% rename from src/modules/StylePropTypes/BorderTheme.js rename to src/modules/react-web-style/StylePropTypes/BorderTheme.js diff --git a/src/modules/StylePropTypes/BoxModel.js b/src/modules/react-web-style/StylePropTypes/BoxModel.js similarity index 100% rename from src/modules/StylePropTypes/BoxModel.js rename to src/modules/react-web-style/StylePropTypes/BoxModel.js diff --git a/src/modules/StylePropTypes/Flexbox.js b/src/modules/react-web-style/StylePropTypes/Flexbox.js similarity index 100% rename from src/modules/StylePropTypes/Flexbox.js rename to src/modules/react-web-style/StylePropTypes/Flexbox.js diff --git a/src/modules/StylePropTypes/Layout.js b/src/modules/react-web-style/StylePropTypes/Layout.js similarity index 100% rename from src/modules/StylePropTypes/Layout.js rename to src/modules/react-web-style/StylePropTypes/Layout.js diff --git a/src/modules/StylePropTypes/Position.js b/src/modules/react-web-style/StylePropTypes/Position.js similarity index 100% rename from src/modules/StylePropTypes/Position.js rename to src/modules/react-web-style/StylePropTypes/Position.js diff --git a/src/modules/StylePropTypes/Typographic.js b/src/modules/react-web-style/StylePropTypes/Typographic.js similarity index 100% rename from src/modules/StylePropTypes/Typographic.js rename to src/modules/react-web-style/StylePropTypes/Typographic.js diff --git a/src/modules/StylePropTypes/index.js b/src/modules/react-web-style/StylePropTypes/index.js similarity index 100% rename from src/modules/StylePropTypes/index.js rename to src/modules/react-web-style/StylePropTypes/index.js diff --git a/src/modules/WebStyleComponent/lib/autoprefix.js b/src/modules/react-web-style/autoprefix.js similarity index 100% rename from src/modules/WebStyleComponent/lib/autoprefix.js rename to src/modules/react-web-style/autoprefix.js diff --git a/src/modules/WebStyleComponent/lib/css/.gitkeep b/src/modules/react-web-style/css/.gitkeep similarity index 100% rename from src/modules/WebStyleComponent/lib/css/.gitkeep rename to src/modules/react-web-style/css/.gitkeep diff --git a/src/modules/WebStyleComponent/lib/css/appearance.css b/src/modules/react-web-style/css/appearance.css similarity index 100% rename from src/modules/WebStyleComponent/lib/css/appearance.css rename to src/modules/react-web-style/css/appearance.css diff --git a/src/modules/WebStyleComponent/lib/css/background.css b/src/modules/react-web-style/css/background.css similarity index 100% rename from src/modules/WebStyleComponent/lib/css/background.css rename to src/modules/react-web-style/css/background.css diff --git a/src/modules/WebStyleComponent/lib/css/border.css b/src/modules/react-web-style/css/border.css similarity index 100% rename from src/modules/WebStyleComponent/lib/css/border.css rename to src/modules/react-web-style/css/border.css diff --git a/src/modules/WebStyleComponent/lib/css/boxSizing.css b/src/modules/react-web-style/css/boxSizing.css similarity index 100% rename from src/modules/WebStyleComponent/lib/css/boxSizing.css rename to src/modules/react-web-style/css/boxSizing.css diff --git a/src/modules/WebStyleComponent/lib/css/clear.css b/src/modules/react-web-style/css/clear.css similarity index 100% rename from src/modules/WebStyleComponent/lib/css/clear.css rename to src/modules/react-web-style/css/clear.css diff --git a/src/modules/WebStyleComponent/lib/css/color.css b/src/modules/react-web-style/css/color.css similarity index 100% rename from src/modules/WebStyleComponent/lib/css/color.css rename to src/modules/react-web-style/css/color.css diff --git a/src/modules/WebStyleComponent/lib/css/direction.css b/src/modules/react-web-style/css/direction.css similarity index 100% rename from src/modules/WebStyleComponent/lib/css/direction.css rename to src/modules/react-web-style/css/direction.css diff --git a/src/modules/WebStyleComponent/lib/css/display.css b/src/modules/react-web-style/css/display.css similarity index 100% rename from src/modules/WebStyleComponent/lib/css/display.css rename to src/modules/react-web-style/css/display.css diff --git a/src/modules/WebStyleComponent/lib/css/flexbox.css b/src/modules/react-web-style/css/flexbox.css similarity index 100% rename from src/modules/WebStyleComponent/lib/css/flexbox.css rename to src/modules/react-web-style/css/flexbox.css diff --git a/src/modules/WebStyleComponent/lib/css/float.css b/src/modules/react-web-style/css/float.css similarity index 100% rename from src/modules/WebStyleComponent/lib/css/float.css rename to src/modules/react-web-style/css/float.css diff --git a/src/modules/WebStyleComponent/lib/css/font.css b/src/modules/react-web-style/css/font.css similarity index 100% rename from src/modules/WebStyleComponent/lib/css/font.css rename to src/modules/react-web-style/css/font.css diff --git a/src/modules/WebStyleComponent/lib/css/height.css b/src/modules/react-web-style/css/height.css similarity index 100% rename from src/modules/WebStyleComponent/lib/css/height.css rename to src/modules/react-web-style/css/height.css diff --git a/src/modules/WebStyleComponent/lib/css/lineHeight.css b/src/modules/react-web-style/css/lineHeight.css similarity index 100% rename from src/modules/WebStyleComponent/lib/css/lineHeight.css rename to src/modules/react-web-style/css/lineHeight.css diff --git a/src/modules/WebStyleComponent/lib/css/list.css b/src/modules/react-web-style/css/list.css similarity index 100% rename from src/modules/WebStyleComponent/lib/css/list.css rename to src/modules/react-web-style/css/list.css diff --git a/src/modules/WebStyleComponent/lib/css/margin.css b/src/modules/react-web-style/css/margin.css similarity index 100% rename from src/modules/WebStyleComponent/lib/css/margin.css rename to src/modules/react-web-style/css/margin.css diff --git a/src/modules/WebStyleComponent/lib/css/opacity.css b/src/modules/react-web-style/css/opacity.css similarity index 100% rename from src/modules/WebStyleComponent/lib/css/opacity.css rename to src/modules/react-web-style/css/opacity.css diff --git a/src/modules/WebStyleComponent/lib/css/overflow.css b/src/modules/react-web-style/css/overflow.css similarity index 100% rename from src/modules/WebStyleComponent/lib/css/overflow.css rename to src/modules/react-web-style/css/overflow.css diff --git a/src/modules/WebStyleComponent/lib/css/padding.css b/src/modules/react-web-style/css/padding.css similarity index 100% rename from src/modules/WebStyleComponent/lib/css/padding.css rename to src/modules/react-web-style/css/padding.css diff --git a/src/modules/WebStyleComponent/lib/css/pointerEvents.css b/src/modules/react-web-style/css/pointerEvents.css similarity index 100% rename from src/modules/WebStyleComponent/lib/css/pointerEvents.css rename to src/modules/react-web-style/css/pointerEvents.css diff --git a/src/modules/WebStyleComponent/lib/css/position.css b/src/modules/react-web-style/css/position.css similarity index 100% rename from src/modules/WebStyleComponent/lib/css/position.css rename to src/modules/react-web-style/css/position.css diff --git a/src/modules/WebStyleComponent/lib/css/text.css b/src/modules/react-web-style/css/text.css similarity index 100% rename from src/modules/WebStyleComponent/lib/css/text.css rename to src/modules/react-web-style/css/text.css diff --git a/src/modules/WebStyleComponent/lib/css/unicodeBidi.css b/src/modules/react-web-style/css/unicodeBidi.css similarity index 100% rename from src/modules/WebStyleComponent/lib/css/unicodeBidi.css rename to src/modules/react-web-style/css/unicodeBidi.css diff --git a/src/modules/WebStyleComponent/lib/css/userSelect.css b/src/modules/react-web-style/css/userSelect.css similarity index 100% rename from src/modules/WebStyleComponent/lib/css/userSelect.css rename to src/modules/react-web-style/css/userSelect.css diff --git a/src/modules/WebStyleComponent/lib/css/visibility.css b/src/modules/react-web-style/css/visibility.css similarity index 100% rename from src/modules/WebStyleComponent/lib/css/visibility.css rename to src/modules/react-web-style/css/visibility.css diff --git a/src/modules/WebStyleComponent/lib/css/whiteSpace.css b/src/modules/react-web-style/css/whiteSpace.css similarity index 100% rename from src/modules/WebStyleComponent/lib/css/whiteSpace.css rename to src/modules/react-web-style/css/whiteSpace.css diff --git a/src/modules/WebStyleComponent/lib/css/width.css b/src/modules/react-web-style/css/width.css similarity index 100% rename from src/modules/WebStyleComponent/lib/css/width.css rename to src/modules/react-web-style/css/width.css diff --git a/src/modules/WebStyleComponent/lib/css/word.css b/src/modules/react-web-style/css/word.css similarity index 100% rename from src/modules/WebStyleComponent/lib/css/word.css rename to src/modules/react-web-style/css/word.css diff --git a/src/modules/WebStyleComponent/lib/css/zIndex.css b/src/modules/react-web-style/css/zIndex.css similarity index 100% rename from src/modules/WebStyleComponent/lib/css/zIndex.css rename to src/modules/react-web-style/css/zIndex.css diff --git a/src/modules/react-web-style/index.js b/src/modules/react-web-style/index.js new file mode 100644 index 00000000..552c43e8 --- /dev/null +++ b/src/modules/react-web-style/index.js @@ -0,0 +1,33 @@ +import React, { PropTypes } from 'react'; +import StylePropTypes from './StylePropTypes'; +import stylingStrategy from './strategy'; + +class WebStyleComponent extends React.Component { + static propTypes = { + className: PropTypes.string, + component: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.string + ]), + style: PropTypes.object + } + + static defaultProps = { + className: '', + element: 'div' + } + + + render() { + const { component: Component, ...other } = this.props; + + return ( + + ); + } +} + +export { StylePropTypes, WebStyleComponent }; diff --git a/src/modules/react-web-style/strategy.js b/src/modules/react-web-style/strategy.js new file mode 100644 index 00000000..49931ea8 --- /dev/null +++ b/src/modules/react-web-style/strategy.js @@ -0,0 +1,38 @@ +import autoprefix from './autoprefix'; +import styleMap from './styleMap'; + +/** + * Find declarations that correspond to single purpose classes + */ +function getSinglePurposeClassName(prop, style) { + const uniqueClassName = `${prop}-${style[prop]}`; + if ( + style.hasOwnProperty(prop) && + styleMap[uniqueClassName] + ) { + return styleMap[uniqueClassName]; + } +} + +/** + * Replace inline styles with single purpose classes where possible + */ +export default function stylingStrategy(props) { + const { className: origClassName, style: origStyle } = props; + const classNames = [ origClassName ]; + const style = {}; + + for (const prop in origStyle) { + const singlePurposeClassName = getSinglePurposeClassName(prop, origStyle); + if (singlePurposeClassName) { + classNames.push(singlePurposeClassName); + } else { + style[prop] = origStyle[prop]; + } + } + + const className = classNames.join(' '); + const prefixedStyle = autoprefix(style); + + return { className, style: prefixedStyle }; +} diff --git a/src/modules/WebStyleComponent/lib/styleMap.js b/src/modules/react-web-style/styleMap.js similarity index 100% rename from src/modules/WebStyleComponent/lib/styleMap.js rename to src/modules/react-web-style/styleMap.js