You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
179 lines
5.2 KiB
179 lines
5.2 KiB
10 years ago
|
/**
|
||
|
* Copyright 2013-2015, Facebook, Inc.
|
||
|
* All rights reserved.
|
||
|
*
|
||
|
* This source code is licensed under the BSD-style license found in the
|
||
|
* LICENSE file in the root directory of this source tree. An additional grant
|
||
|
* of patent rights can be found in the PATENTS file in the same directory.
|
||
|
*
|
||
|
* @providesModule CSSPropertyOperations
|
||
|
* @typechecks static-only
|
||
|
*/
|
||
|
|
||
|
'use strict';
|
||
|
|
||
|
var CSSProperty = require("./CSSProperty");
|
||
|
var ExecutionEnvironment = require("./ExecutionEnvironment");
|
||
|
|
||
|
var camelizeStyleName = require("./camelizeStyleName");
|
||
|
var dangerousStyleValue = require("./dangerousStyleValue");
|
||
|
var hyphenateStyleName = require("./hyphenateStyleName");
|
||
|
var memoizeStringOnly = require("./memoizeStringOnly");
|
||
|
var warning = require("./warning");
|
||
|
|
||
|
var processStyleName = memoizeStringOnly(function(styleName) {
|
||
|
return hyphenateStyleName(styleName);
|
||
|
});
|
||
|
|
||
|
var styleFloatAccessor = 'cssFloat';
|
||
|
if (ExecutionEnvironment.canUseDOM) {
|
||
|
// IE8 only supports accessing cssFloat (standard) as styleFloat
|
||
|
if (document.documentElement.style.cssFloat === undefined) {
|
||
|
styleFloatAccessor = 'styleFloat';
|
||
|
}
|
||
|
}
|
||
|
|
||
|
if ("production" !== process.env.NODE_ENV) {
|
||
|
// 'msTransform' is correct, but the other prefixes should be capitalized
|
||
|
var badVendoredStyleNamePattern = /^(?:webkit|moz|o)[A-Z]/;
|
||
|
|
||
|
// style values shouldn't contain a semicolon
|
||
|
var badStyleValueWithSemicolonPattern = /;\s*$/;
|
||
|
|
||
|
var warnedStyleNames = {};
|
||
|
var warnedStyleValues = {};
|
||
|
|
||
|
var warnHyphenatedStyleName = function(name) {
|
||
|
if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
warnedStyleNames[name] = true;
|
||
|
("production" !== process.env.NODE_ENV ? warning(
|
||
|
false,
|
||
|
'Unsupported style property %s. Did you mean %s?',
|
||
|
name,
|
||
|
camelizeStyleName(name)
|
||
|
) : null);
|
||
|
};
|
||
|
|
||
|
var warnBadVendoredStyleName = function(name) {
|
||
|
if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
warnedStyleNames[name] = true;
|
||
|
("production" !== process.env.NODE_ENV ? warning(
|
||
|
false,
|
||
|
'Unsupported vendor-prefixed style property %s. Did you mean %s?',
|
||
|
name,
|
||
|
name.charAt(0).toUpperCase() + name.slice(1)
|
||
|
) : null);
|
||
|
};
|
||
|
|
||
|
var warnStyleValueWithSemicolon = function(name, value) {
|
||
|
if (warnedStyleValues.hasOwnProperty(value) && warnedStyleValues[value]) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
warnedStyleValues[value] = true;
|
||
|
("production" !== process.env.NODE_ENV ? warning(
|
||
|
false,
|
||
|
'Style property values shouldn\'t contain a semicolon. ' +
|
||
|
'Try "%s: %s" instead.',
|
||
|
name,
|
||
|
value.replace(badStyleValueWithSemicolonPattern, '')
|
||
|
) : null);
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* @param {string} name
|
||
|
* @param {*} value
|
||
|
*/
|
||
|
var warnValidStyle = function(name, value) {
|
||
|
if (name.indexOf('-') > -1) {
|
||
|
warnHyphenatedStyleName(name);
|
||
|
} else if (badVendoredStyleNamePattern.test(name)) {
|
||
|
warnBadVendoredStyleName(name);
|
||
|
} else if (badStyleValueWithSemicolonPattern.test(value)) {
|
||
|
warnStyleValueWithSemicolon(name, value);
|
||
|
}
|
||
|
};
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Operations for dealing with CSS properties.
|
||
|
*/
|
||
|
var CSSPropertyOperations = {
|
||
|
|
||
|
/**
|
||
|
* Serializes a mapping of style properties for use as inline styles:
|
||
|
*
|
||
|
* > createMarkupForStyles({width: '200px', height: 0})
|
||
|
* "width:200px;height:0;"
|
||
|
*
|
||
|
* Undefined values are ignored so that declarative programming is easier.
|
||
|
* The result should be HTML-escaped before insertion into the DOM.
|
||
|
*
|
||
|
* @param {object} styles
|
||
|
* @return {?string}
|
||
|
*/
|
||
|
createMarkupForStyles: function(styles) {
|
||
|
var serialized = '';
|
||
|
for (var styleName in styles) {
|
||
|
if (!styles.hasOwnProperty(styleName)) {
|
||
|
continue;
|
||
|
}
|
||
|
var styleValue = styles[styleName];
|
||
|
if ("production" !== process.env.NODE_ENV) {
|
||
|
warnValidStyle(styleName, styleValue);
|
||
|
}
|
||
|
if (styleValue != null) {
|
||
|
serialized += processStyleName(styleName) + ':';
|
||
|
serialized += dangerousStyleValue(styleName, styleValue) + ';';
|
||
|
}
|
||
|
}
|
||
|
return serialized || null;
|
||
|
},
|
||
|
|
||
|
/**
|
||
|
* Sets the value for multiple styles on a node. If a value is specified as
|
||
|
* '' (empty string), the corresponding style property will be unset.
|
||
|
*
|
||
|
* @param {DOMElement} node
|
||
|
* @param {object} styles
|
||
|
*/
|
||
|
setValueForStyles: function(node, styles) {
|
||
|
var style = node.style;
|
||
|
for (var styleName in styles) {
|
||
|
if (!styles.hasOwnProperty(styleName)) {
|
||
|
continue;
|
||
|
}
|
||
|
if ("production" !== process.env.NODE_ENV) {
|
||
|
warnValidStyle(styleName, styles[styleName]);
|
||
|
}
|
||
|
var styleValue = dangerousStyleValue(styleName, styles[styleName]);
|
||
|
if (styleName === 'float') {
|
||
|
styleName = styleFloatAccessor;
|
||
|
}
|
||
|
if (styleValue) {
|
||
|
style[styleName] = styleValue;
|
||
|
} else {
|
||
|
var expansion = CSSProperty.shorthandPropertyExpansions[styleName];
|
||
|
if (expansion) {
|
||
|
// Shorthand property that IE8 won't like unsetting, so unset each
|
||
|
// component to placate it
|
||
|
for (var individualStyleName in expansion) {
|
||
|
style[individualStyleName] = '';
|
||
|
}
|
||
|
} else {
|
||
|
style[styleName] = '';
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
};
|
||
|
|
||
|
module.exports = CSSPropertyOperations;
|