mirror of
https://github.com/zhigang1992/react-native-web.git
synced 2026-01-12 22:51:09 +08:00
501c19fe9b
Expand shorthand properties to preserve the one-rule-to-one-style isolation. Resolve styles like React Native - most specific comes last. Add support for the hz and vt properties for margin and padding. Fix #40
52 lines
1.9 KiB
JavaScript
52 lines
1.9 KiB
JavaScript
const styleShortHands = {
|
|
borderColor: [ 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor' ],
|
|
borderRadius: [ 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius' ],
|
|
borderStyle: [ 'borderTopStyle', 'borderRightStyle', 'borderBottomStyle', 'borderLeftStyle' ],
|
|
borderWidth: [ 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth' ],
|
|
margin: [ 'marginTop', 'marginRight', 'marginBottom', 'marginLeft' ],
|
|
marginHorizontal: [ 'marginRight', 'marginLeft' ],
|
|
marginVertical: [ 'marginTop', 'marginBottom' ],
|
|
padding: [ 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft' ],
|
|
paddingHorizontal: [ 'paddingRight', 'paddingLeft' ],
|
|
paddingVertical: [ 'paddingTop', 'paddingBottom' ]
|
|
}
|
|
|
|
/**
|
|
* Alpha-sort properties, apart from shorthands which appear before the
|
|
* properties they expand into. This ensures that more specific styles override
|
|
* the shorthands, whatever the order in which they were originally declared.
|
|
*/
|
|
const sortProps = (propsArray) => propsArray.sort((a, b) => {
|
|
const expandedA = styleShortHands[a]
|
|
const expandedB = styleShortHands[b]
|
|
if (expandedA && expandedA.indexOf(b) > -1) {
|
|
return -1
|
|
} else if (expandedB && expandedB.indexOf(a) > -1) {
|
|
return 1
|
|
}
|
|
return a < b ? -1 : a > b ? 1 : 0
|
|
})
|
|
|
|
/**
|
|
* Expand the shorthand properties to isolate every declaration from the others.
|
|
*/
|
|
const expandStyle = (style) => {
|
|
const propsArray = Object.keys(style)
|
|
const sortedProps = sortProps(propsArray)
|
|
|
|
return sortedProps.reduce((resolvedStyle, key) => {
|
|
const expandedProps = styleShortHands[key]
|
|
const value = style[key]
|
|
if (expandedProps) {
|
|
expandedProps.forEach((prop, i) => {
|
|
resolvedStyle[expandedProps[i]] = value
|
|
})
|
|
} else {
|
|
resolvedStyle[key] = value
|
|
}
|
|
return resolvedStyle
|
|
}, {})
|
|
}
|
|
|
|
export default expandStyle
|