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

[fix] setNativeProps can apply flex styles

Browse Source 
Updates the 'setValueForStyle' implementation to support style values
that contain "!important". This allows the 'flex{Basis,Grow,Shrink}'
values created by the style resolver to be applied. They currently use
the important priority as a work-around for browser-inconsistencies in
the 'flex' shorthand.

Upstream fix: https://github.com/facebook/react/pull/12181

Ref #798
Close #813
This commit is contained in:
Nicolas Gallagher
2018-02-08 10:41:41 -08:00
parent b66aba1a06
commit 00c9dc4236
1 changed files with 19 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
packages/react-native-web/src/vendor/setValueForStyles/index.js vendored
View File

@@ -12,6 +12,7 @@
*/
import dangerousStyleValue from '../dangerousStyleValue';
import hyphenateStyleName from 'hyphenate-style-name';
import warnValidStyle from '../warnValidStyle';
/**
@@ -20,32 +21,37 @@ import warnValidStyle from '../warnValidStyle';
*
* @param {DOMElement} node
* @param {object} styles
* @param {ReactDOMComponent} component
*/
const setValueForStyles = function(node, styles, component) {
var style = node.style;
for (var styleName in styles) {
function setValueForStyles(node, styles, getStack) {
const style = node.style;
for (let styleName in styles) {
if (!styles.hasOwnProperty(styleName)) {
continue;
}
var isCustomProperty = styleName.indexOf('--') === 0;
const isCustomProperty = styleName.indexOf('--') === 0;
const isImportant =
typeof styles[styleName] === 'string' && styles[styleName].indexOf('!important') > -1;
if (process.env.NODE_ENV !== 'production') {
if (!isCustomProperty) {
warnValidStyle(styleName, styles[styleName], component);
warnValidStyle(styleName, styles[styleName], getStack);
}
}
var styleValue = dangerousStyleValue(styleName, styles[styleName], isCustomProperty);
const styleValue = dangerousStyleValue(styleName, styles[styleName], isCustomProperty);
if (styleName === 'float') {
styleName = 'cssFloat';
}
if (isCustomProperty) {
style.setProperty(styleName, styleValue);
} else if (styleValue) {
style[styleName] = styleValue;
if (isCustomProperty || isImportant) {
const name = isCustomProperty ? styleName : hyphenateStyleName(styleName);
if (isImportant) {
const [value, priority] = styleValue.split('!');
style.setProperty(name, value, priority);
} else {
style.setProperty(name, styleValue);
}
} else {
style[styleName] = '';
style[styleName] = styleValue;
}
}
};
}
export default setValueForStyles;