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.
178 lines
5.2 KiB
178 lines
5.2 KiB
/** |
|
* 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;
|
|
|