[add] support for textShadow* and transition style props

Close #170

src/apis/StyleSheet/__tests__/processTextShadow-test.js

@@ -0,0 +1,24 @@
+/* eslint-env mocha */
+
+import assert from 'assert'
+import processTextShadow from '../processTextShadow'
+
+suite('apis/StyleSheet/processTextShadow', () => {
+  test('textShadowOffset', () => {
+    const style = {
+      textShadowColor: 'red',
+      textShadowOffset: { width: 2, height: 2 },
+      textShadowRadius: 5
+    }
+
+    assert.deepEqual(
+      processTextShadow(style),
+      {
+        textShadow: '2px 2px 5px red',
+        textShadowColor: null,
+        textShadowOffset: null,
+        textShadowRadius: null
+      }
+    )
+  })
+})

src/apis/StyleSheet/__tests__/processTransform-test.js

@@ -26,7 +26,10 @@ suite('apis/StyleSheet/processTransform', () => {
 
     assert.deepEqual(
       processTransform(style),
-      { transform: 'matrix3d(1,2,3,4,5,6)' }
+      {
+        transform: 'matrix3d(1,2,3,4,5,6)',
+        transformMatrix: null
+      }
     )
   })
 })

src/apis/StyleSheet/__tests__/processVendorPrefixes-test.js

@@ -0,0 +1,17 @@
+/* eslint-env mocha */
+
+import assert from 'assert'
+import processVendorPrefixes from '../processVendorPrefixes'
+
+suite('apis/StyleSheet/processVendorPrefixes', () => {
+  test('handles array values', () => {
+    const style = {
+      display: [ '-webkit-flex', 'flex' ]
+    }
+
+    assert.deepEqual(
+      processVendorPrefixes(style),
+      { display: 'flex' }
+    )
+  })
+})

src/apis/StyleSheet/createReactStyleObject.js

@@ -1,22 +1,18 @@
 import expandStyle from './expandStyle'
 import flattenStyle from '../../modules/flattenStyle'
 import prefixAll from 'inline-style-prefixer/static'
+import processTextShadow from './processTextShadow'
 import processTransform from './processTransform'
+import processVendorPrefixes from './processVendorPrefixes'
 
-const addVendorPrefixes = (style) => {
+const plugins = [
-  let prefixedStyles = prefixAll(style)
+  processTextShadow,
-  // React@15 removed undocumented support for fallback values in
+  processTransform,
-  // inline-styles. Revert array values to the standard CSS value
+  processVendorPrefixes
-  for (const prop in prefixedStyles) {
+]
-    const value = prefixedStyles[prop]
-    if (Array.isArray(value)) {
-      prefixedStyles[prop] = value[value.length - 1]
-    }
-  }
-  return prefixedStyles
-}
 
-const _createReactDOMStyleObject = (reactNativeStyle) => processTransform(expandStyle(flattenStyle(reactNativeStyle)))
+const applyPlugins = (style) => plugins.reduce((style, plugin) => plugin(style), style)
-const createReactDOMStyleObject = (reactNativeStyle) => addVendorPrefixes(_createReactDOMStyleObject(reactNativeStyle))
+
+const createReactDOMStyleObject = (reactNativeStyle) => applyPlugins(expandStyle(flattenStyle(reactNativeStyle)))
 
 module.exports = createReactDOMStyleObject

src/apis/StyleSheet/processTextShadow.js

@@ -0,0 +1,19 @@
+import normalizeValue from './normalizeValue'
+
+const processTextShadow = (style) => {
+  if (style && style.textShadowOffset) {
+    const { height, width } = style.textShadowOffset
+    const offsetX = normalizeValue(null, height || 0)
+    const offsetY = normalizeValue(null, width || 0)
+    const blurRadius = normalizeValue(null, style.textShadowRadius || 0)
+    const color = style.textShadowColor || 'currentcolor'
+
+    style.textShadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`
+    style.textShadowColor = null
+    style.textShadowOffset = null
+    style.textShadowRadius = null
+  }
+  return style
+}
+
+module.exports = processTextShadow

src/apis/StyleSheet/processTransform.js

@@ -20,7 +20,7 @@ const processTransform = (style) => {
       style.transform = style.transform.map(mapTransform).join(' ')
     } else if (style.transformMatrix) {
       style.transform = convertTransformMatrix(style.transformMatrix)
-      delete style.transformMatrix
+      style.transformMatrix = null
     }
   }
   return style

src/apis/StyleSheet/processVendorPrefixes.js

@@ -0,0 +1,16 @@
+import prefixAll from 'inline-style-prefixer/static'
+
+const processVendorPrefixes = (style) => {
+  let prefixedStyles = prefixAll(style)
+  // React@15 removed undocumented support for fallback values in
+  // inline-styles. Revert array values to the standard CSS value
+  for (const prop in prefixedStyles) {
+    const value = prefixedStyles[prop]
+    if (Array.isArray(value)) {
+      prefixedStyles[prop] = value[value.length - 1]
+    }
+  }
+  return prefixedStyles
+}
+
+module.exports = processVendorPrefixes

src/components/Text/TextStylePropTypes.js

@@ -2,7 +2,7 @@ import { PropTypes } from 'react'
 import ColorPropType from '../../propTypes/ColorPropType'
 import ViewStylePropTypes from '../View/ViewStylePropTypes'
 
-const { number, oneOf, oneOfType, string } = PropTypes
+const { number, oneOf, oneOfType, shape, string } = PropTypes
 const numberOrString = oneOfType([ number, string ])
 
 module.exports = {
@@ -19,8 +19,9 @@ module.exports = {
   textDecorationLine: string,
   /* @platform web */
   textOverflow: string,
-  /* @platform web */
+  textShadowColor: ColorPropType,
-  textShadow: string,
+  textShadowOffset: shape({ width: number, height: number }),
+  textShadowRadius: number,
   /* @platform web */
   textTransform: oneOf([ 'capitalize', 'lowercase', 'none', 'uppercase' ]),
   /* @platform web */

src/components/View/ViewStylePropTypes.js

@@ -31,6 +31,7 @@ module.exports = {
   outline: string,
   overflowX: autoOrHiddenOrVisible,
   overflowY: autoOrHiddenOrVisible,
+  transition: string,
   userSelect: string,
   visibility: hiddenOrVisible,
   zIndex: number