diff --git a/src/modules/react-native-web-style/index.js b/src/modules/react-native-web-style/index.js deleted file mode 100644 index a2d33abc..00000000 --- a/src/modules/react-native-web-style/index.js +++ /dev/null @@ -1,32 +0,0 @@ -import React, { PropTypes } from 'react' -import restyle from './modules/restyle' -import StylePropTypes from './modules/StylePropTypes' - -class WebStyleComponent extends React.Component { - static propTypes = { - className: PropTypes.string, - component: PropTypes.oneOfType([ - PropTypes.func, - PropTypes.string - ]), - style: PropTypes.object - } - - static defaultProps = { - className: '', - component: 'div' - } - - render() { - const { component: Component, ...other } = this.props - - return ( - - ) - } -} - -export { StylePropTypes, restyle, WebStyleComponent } diff --git a/src/modules/react-native-web-style/modules/StylePropTypes/Background.js b/src/modules/react-native-web-style/modules/StylePropTypes/Background.js deleted file mode 100644 index 3464c0a3..00000000 --- a/src/modules/react-native-web-style/modules/StylePropTypes/Background.js +++ /dev/null @@ -1,9 +0,0 @@ -import { PropTypes } from 'react' - -export default { - backgroundColor: PropTypes.string, - backgroundImage: PropTypes.string, - backgroundPosition: PropTypes.string, - backgroundRepeat: PropTypes.string, - backgroundSize: PropTypes.string -} diff --git a/src/modules/react-native-web-style/modules/StylePropTypes/BorderTheme.js b/src/modules/react-native-web-style/modules/StylePropTypes/BorderTheme.js deleted file mode 100644 index 0883c55d..00000000 --- a/src/modules/react-native-web-style/modules/StylePropTypes/BorderTheme.js +++ /dev/null @@ -1,23 +0,0 @@ -import { PropTypes } from 'react' - -const numberOrString = PropTypes.oneOfType([ - PropTypes.number, - PropTypes.string -]) - -export default { - // border-color - borderColor: PropTypes.string, - borderTopColor: PropTypes.string, - borderRightColor: PropTypes.string, - borderBottomColor: PropTypes.string, - borderLeftColor: PropTypes.string, - // border-style - borderStyle: PropTypes.string, - // border-radius - borderRadius: numberOrString, - borderTopLeftRadius: numberOrString, - borderTopRightRadius: numberOrString, - borderBottomLeftRadius: numberOrString, - borderBottomRightRadius: numberOrString -} diff --git a/src/modules/react-native-web-style/modules/StylePropTypes/BoxModel.js b/src/modules/react-native-web-style/modules/StylePropTypes/BoxModel.js deleted file mode 100644 index 453d13f3..00000000 --- a/src/modules/react-native-web-style/modules/StylePropTypes/BoxModel.js +++ /dev/null @@ -1,42 +0,0 @@ -import {PropTypes} from 'react' - -const numberOrString = PropTypes.oneOfType([ - PropTypes.number, - PropTypes.string -]) - -export default { - boxSizing: PropTypes.oneOf([ - 'border-box', - 'content-box' - ]), - // display - display: PropTypes.oneOf([ - 'block', - 'flex', - 'inline', - 'inline-block', - 'inline-flex' - ]), - // dimensions - height: numberOrString, - width: numberOrString, - // border width - borderWidth: numberOrString, - borderTopWidth: numberOrString, - borderRightWidth: numberOrString, - borderBottomWidth: numberOrString, - borderLeftWidth: numberOrString, - // margin - margin: numberOrString, - marginTop: numberOrString, - marginBottom: numberOrString, - marginLeft: numberOrString, - marginRight: numberOrString, - // padding - padding: numberOrString, - paddingTop: numberOrString, - paddingBottom: numberOrString, - paddingLeft: numberOrString, - paddingRight: numberOrString -} diff --git a/src/modules/react-native-web-style/modules/StylePropTypes/Flexbox.js b/src/modules/react-native-web-style/modules/StylePropTypes/Flexbox.js deleted file mode 100644 index 07df5bce..00000000 --- a/src/modules/react-native-web-style/modules/StylePropTypes/Flexbox.js +++ /dev/null @@ -1,49 +0,0 @@ -import { PropTypes } from 'react' - -export default { - alignContent: PropTypes.oneOf([ - 'center', - 'flex-end', - 'flex-start', - 'stretch', - 'space-around', - 'space-between' - ]), - alignItems: PropTypes.oneOf([ - 'baseline', - 'center', - 'flex-end', - 'flex-start', - 'stretch' - ]), - alignSelf: PropTypes.oneOf([ - 'auto', - 'baseline', - 'center', - 'flex-end', - 'flex-start', - 'stretch' - ]), - flexBasis: PropTypes.string, - flexDirection: PropTypes.oneOf([ - 'column', - 'column-reverse', - 'row', - 'row-reverse' - ]), - flexGrow: PropTypes.number, - flexShrink: PropTypes.number, - flexWrap: PropTypes.oneOf([ - 'nowrap', - 'wrap', - 'wrap-reverse' - ]), - justifyContent: PropTypes.oneOf([ - 'center', - 'flex-end', - 'flex-start', - 'space-around', - 'space-between' - ]), - order: PropTypes.number -} diff --git a/src/modules/react-native-web-style/modules/StylePropTypes/Layout.js b/src/modules/react-native-web-style/modules/StylePropTypes/Layout.js deleted file mode 100644 index 398cc833..00000000 --- a/src/modules/react-native-web-style/modules/StylePropTypes/Layout.js +++ /dev/null @@ -1,9 +0,0 @@ -import BoxModel from './BoxModel' -import Flexbox from './Flexbox' -import Position from './Position' - -export default { - ...BoxModel, - ...Flexbox, - ...Position -} diff --git a/src/modules/react-native-web-style/modules/StylePropTypes/Position.js b/src/modules/react-native-web-style/modules/StylePropTypes/Position.js deleted file mode 100644 index 24759b79..00000000 --- a/src/modules/react-native-web-style/modules/StylePropTypes/Position.js +++ /dev/null @@ -1,19 +0,0 @@ -import { PropTypes } from 'react' - -const numberOrString = PropTypes.oneOfType([ - PropTypes.number, - PropTypes.string -]) - -export default { - position: PropTypes.oneOf([ - 'absolute', - 'fixed', - 'relative' /* default */ - ]), - bottom: numberOrString, - left: numberOrString, - right: numberOrString, - top: numberOrString, - zIndex: PropTypes.number -} diff --git a/src/modules/react-native-web-style/modules/StylePropTypes/Typographic.js b/src/modules/react-native-web-style/modules/StylePropTypes/Typographic.js deleted file mode 100644 index 8b571237..00000000 --- a/src/modules/react-native-web-style/modules/StylePropTypes/Typographic.js +++ /dev/null @@ -1,35 +0,0 @@ -import { PropTypes } from 'react' - -export default { - color: PropTypes.string, - direction: PropTypes.oneOf([ - 'auto', 'ltr', 'rtl' - ]), - font: PropTypes.string, - fontFamily: PropTypes.string, - fontSize: PropTypes.string, - fontStyle: PropTypes.oneOf([ - 'inherit', 'normal', 'italic' - ]), - fontWeight: PropTypes.oneOf([ - 'inherit', 'bold', 'normal', - '100', '200', '300', '400', '500', '600', '700', '800', '900' - ]), - letterSpacing: PropTypes.string, - lineHeight: PropTypes.oneOfType([ - PropTypes.number, - PropTypes.string - ]), - textAlign: PropTypes.oneOf([ - 'auto', 'center', 'justify', 'left', 'right' - ]), - textDecoration: PropTypes.oneOf([ - 'none', 'line-through', 'underline', 'underline line-through' - ]), - textTransform: PropTypes.oneOf([ - 'none', 'capitalize', 'lowercase', 'uppercase' - ]), - wordWrap: PropTypes.oneOf([ - 'break-word', 'normal' - ]) -} diff --git a/src/modules/react-native-web-style/modules/StylePropTypes/index.js b/src/modules/react-native-web-style/modules/StylePropTypes/index.js deleted file mode 100644 index bd16db8e..00000000 --- a/src/modules/react-native-web-style/modules/StylePropTypes/index.js +++ /dev/null @@ -1,13 +0,0 @@ -import BackgroundPropTypes from './Background' -import BorderThemePropTypes from './BorderTheme' -import FlexboxPropTypes from './Flexbox' -import LayoutPropTypes from './Layout' -import TypographicPropTypes from './Typographic' - -export default { - BackgroundPropTypes, - BorderThemePropTypes, - FlexboxPropTypes, - LayoutPropTypes, - TypographicPropTypes -} diff --git a/src/modules/react-native-web-style/modules/autoprefix.js b/src/modules/react-native-web-style/modules/autoprefix.js deleted file mode 100644 index 6216a7a3..00000000 --- a/src/modules/react-native-web-style/modules/autoprefix.js +++ /dev/null @@ -1,47 +0,0 @@ -export default function prefixStyles(style) { - if (style.hasOwnProperty('flexBasis')) { - style = { - WebkitFlexBasis: style.flexBasis, - msFlexBasis: style.flexBasis, - ...style - } - } - - if (style.hasOwnProperty('flexGrow')) { - style = { - WebkitBoxFlex: style.flexGrow, - WebkitFlexGrow: style.flexGrow, - msFlexPositive: style.flexGrow, - ...style - } - } - - if (style.hasOwnProperty('flexShrink')) { - style = { - WebkitFlexShrink: style.flexShrink, - msFlexNegative: style.flexShrink, - ...style - } - } - - // NOTE: adding `;` to the string value prevents React from automatically - // adding a `px` suffix to the unitless value - if (style.hasOwnProperty('order')) { - style = { - WebkitBoxOrdinalGroup: `${parseInt(style.order, 10) + 1};`, - WebkitOrder: `${style.order}`, - msFlexOrder: `${style.order}`, - ...style - } - } - - if (style.hasOwnProperty('transform')) { - style = { - WebkitTransform: style.transform, - msTransform: style.transform, - ...style - } - } - - return style -} diff --git a/src/modules/react-native-web-style/modules/restyle.js b/src/modules/react-native-web-style/modules/restyle.js deleted file mode 100644 index e5e33526..00000000 --- a/src/modules/react-native-web-style/modules/restyle.js +++ /dev/null @@ -1,40 +0,0 @@ -import autoprefix from './autoprefix' -import styles from '../../styles' - -/** - * Get the HTML class that corresponds to a style declaration - * @param prop {string} prop name - * @param style {Object} style - * @return {string} class name - */ -function getSinglePurposeClassName(prop, style) { - const className = `${prop}-${style[prop]}` - if (style.hasOwnProperty(prop) && styles[className]) { - return styles[className] - } -} - -/** - * Replace inline styles with single purpose classes where possible - * @param props {Object} React Element properties - * @return {Object} - */ -export default function stylingStrategy(props) { - let className - let style = {} - - const classList = [ props.className ] - for (const prop in props.style) { - const styleClass = getSinglePurposeClassName(prop, props.style) - if (styleClass) { - classList.push(styleClass) - } else { - style[prop] = props.style[prop] - } - } - - className = classList.join(' ') - style = autoprefix(style) - - return { className: className, style } -}