From ed2cbfd5d383f21827bff6f3c20e43e235a636a6 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Wed, 6 Jul 2016 19:21:15 -0700 Subject: [PATCH] [fix] React Native styles -> React DOM styles Add 'createReactStyleObject' to transform a React Native style object into a React DOM-compatible style object. This is also needed to ensure that 'setNativeProps' works as expected. --- package.json | 2 +- src/apis/StyleSheet/StyleSheetRegistry.js | 28 ++++++++----------- src/apis/StyleSheet/createReactStyleObject.js | 7 +++++ src/apis/UIManager/__tests__/index-test.js | 4 +-- src/apis/UIManager/index.js | 5 ++-- 5 files changed, 23 insertions(+), 23 deletions(-) create mode 100644 src/apis/StyleSheet/createReactStyleObject.js diff --git a/package.json b/package.json index eb6f45ce..14e4624e 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "animated": "^0.1.3", "babel-runtime": "^6.9.2", "fbjs": "^0.8.1", - "inline-style-prefix-all": "^2.0.2", + "inline-style-prefixer": "^2.0.0", "lodash": "^4.13.1", "react-dom": "^15.1.0", "react-textarea-autosize": "^4.0.2", diff --git a/src/apis/StyleSheet/StyleSheetRegistry.js b/src/apis/StyleSheet/StyleSheetRegistry.js index b6ebe04c..984c9697 100644 --- a/src/apis/StyleSheet/StyleSheetRegistry.js +++ b/src/apis/StyleSheet/StyleSheetRegistry.js @@ -6,22 +6,16 @@ * @flow */ -import prefixAll from 'inline-style-prefix-all' +import createReactStyleObject from './createReactStyleObject' import hyphenate from './hyphenate' -import expandStyle from './expandStyle' -import flattenStyle from './flattenStyle' -import processTransform from './processTransform' import { predefinedClassNames } from './predefs' +import prefixAll from 'inline-style-prefixer/static' let stylesCache = {} let uniqueID = 0 const getCacheKey = (prop, value) => `${prop}:${value}` -const normalizeStyle = (style) => { - return processTransform(expandStyle(flattenStyle(style))) -} - const createCssDeclarations = (style) => { return Object.keys(style).map((prop) => { const property = hyphenate(prop) @@ -62,10 +56,10 @@ class StyleSheetRegistry { Object.freeze(style) } - const normalizedStyle = normalizeStyle(style) + const reactStyleObject = createReactStyleObject(style) - Object.keys(normalizedStyle).forEach((prop) => { - const value = normalizedStyle[prop] + Object.keys(reactStyleObject).forEach((prop) => { + const value = reactStyleObject[prop] const cacheKey = getCacheKey(prop, value) const exists = stylesCache[cacheKey] && stylesCache[cacheKey].id if (!exists) { @@ -83,18 +77,18 @@ class StyleSheetRegistry { static getStyleAsNativeProps(styleSheetObject, canUseCSS = false) { const classList = [] - const normalizedStyle = normalizeStyle(styleSheetObject) + const reactStyleObject = createReactStyleObject(styleSheetObject) let style = {} - for (const prop in normalizedStyle) { - const value = normalizedStyle[prop] + for (const prop in reactStyleObject) { + const value = reactStyleObject[prop] const cacheKey = getCacheKey(prop, value) let selector = stylesCache[cacheKey] && stylesCache[cacheKey].id || predefinedClassNames[cacheKey] if (selector && canUseCSS) { classList.push(selector) } else { - style[prop] = normalizedStyle[prop] + style[prop] = reactStyleObject[prop] } } @@ -103,7 +97,7 @@ class StyleSheetRegistry { * inline-styles. For now, pick the last value and regress browser support * for CSS features like flexbox. */ - const finalStyle = Object.keys(prefixAll(style)).reduce((acc, prop) => { + const vendorPrefixedStyle = Object.keys(prefixAll(style)).reduce((acc, prop) => { const value = style[prop] acc[prop] = Array.isArray(value) ? value[value.length - 1] : value return acc @@ -111,7 +105,7 @@ class StyleSheetRegistry { return { className: classList.join(' '), - style: finalStyle + style: vendorPrefixedStyle } } } diff --git a/src/apis/StyleSheet/createReactStyleObject.js b/src/apis/StyleSheet/createReactStyleObject.js new file mode 100644 index 00000000..4e4e04dd --- /dev/null +++ b/src/apis/StyleSheet/createReactStyleObject.js @@ -0,0 +1,7 @@ +import expandStyle from './expandStyle' +import flattenStyle from '../StyleSheet/flattenStyle' +import processTransform from '../StyleSheet/processTransform' + +const createReactStyleObject = (style) => processTransform(expandStyle(flattenStyle(style))) + +module.exports = createReactStyleObject diff --git a/src/apis/UIManager/__tests__/index-test.js b/src/apis/UIManager/__tests__/index-test.js index cb1fd109..47d8d971 100644 --- a/src/apis/UIManager/__tests__/index-test.js +++ b/src/apis/UIManager/__tests__/index-test.js @@ -111,9 +111,9 @@ suite('apis/UIManager', () => { test('adds new style to existing style', () => { const node = createNode({ color: 'red' }) - const props = { style: { opacity: 0 } } + const props = { style: { marginVertical: 0, opacity: 0 } } UIManager.updateView(node, props, componentStub) - assert.equal(node.getAttribute('style'), 'color: red; opacity: 0;') + assert.equal(node.getAttribute('style'), 'color: red; margin-top: 0px; margin-bottom: 0px; opacity: 0;') }) test('replaces input and textarea text', () => { diff --git a/src/apis/UIManager/index.js b/src/apis/UIManager/index.js index 1c3b2d03..1e5d1013 100644 --- a/src/apis/UIManager/index.js +++ b/src/apis/UIManager/index.js @@ -1,6 +1,5 @@ +import createReactStyleObject from '../StyleSheet/createReactStyleObject' import CSSPropertyOperations from 'react/lib/CSSPropertyOperations' -import flattenStyle from '../StyleSheet/flattenStyle' -import processTransform from '../StyleSheet/processTransform' const _measureLayout = (node, relativeToNativeNode, callback) => { const relativeNode = relativeToNativeNode || node.parentNode @@ -44,7 +43,7 @@ const UIManager = { // convert styles to DOM-styles CSSPropertyOperations.setValueForStyles( node, - processTransform(flattenStyle(value)), + createReactStyleObject(value), component._reactInternalInstance ) break