kylefang/react-native-web
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-web.git synced 2026-01-12 22:51:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

Remove legacy react-native-web-style module

Browse Source
This commit is contained in:
Nicolas Gallagher
2015-09-07 09:44:18 -07:00
parent 1668dc4635
commit cd215a916d
11 changed files with 0 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/modules/react-native-web-style/index.js vendored
View File

@@ -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 (
<Component
{...other}
{...restyle(this.props)}
/>
)
}
}
export { StylePropTypes, restyle, WebStyleComponent }

9
src/modules/react-native-web-style/modules/StylePropTypes/Background.js vendored
View File

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

23
src/modules/react-native-web-style/modules/StylePropTypes/BorderTheme.js vendored
View File

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

42
src/modules/react-native-web-style/modules/StylePropTypes/BoxModel.js vendored
View File

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

49
src/modules/react-native-web-style/modules/StylePropTypes/Flexbox.js vendored
View File

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

9
src/modules/react-native-web-style/modules/StylePropTypes/Layout.js vendored
View File

@@ -1,9 +0,0 @@
import BoxModel from './BoxModel'
import Flexbox from './Flexbox'
import Position from './Position'
export default {
...BoxModel,
...Flexbox,
...Position
}

19
src/modules/react-native-web-style/modules/StylePropTypes/Position.js vendored
View File

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

35
src/modules/react-native-web-style/modules/StylePropTypes/Typographic.js vendored
View File

@@ -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'
])
}

13
src/modules/react-native-web-style/modules/StylePropTypes/index.js vendored
View File

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

47
src/modules/react-native-web-style/modules/autoprefix.js vendored
View File

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

40
src/modules/react-native-web-style/modules/restyle.js vendored
View File

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