diff --git a/Libraries/StyleSheet/StyleSheet.js b/Libraries/StyleSheet/StyleSheet.js index cca0f87da..ec771e332 100644 --- a/Libraries/StyleSheet/StyleSheet.js +++ b/Libraries/StyleSheet/StyleSheet.js @@ -5,19 +5,15 @@ */ 'use strict'; -var ImageStylePropTypes = require('ImageStylePropTypes'); -var ReactPropTypeLocations = require('ReactPropTypeLocations'); var StyleSheetRegistry = require('StyleSheetRegistry'); -var TextStylePropTypes = require('TextStylePropTypes'); -var ViewStylePropTypes = require('ViewStylePropTypes'); - -var invariant = require('invariant'); +var StyleSheetValidation = require('StyleSheetValidation'); /** * A StyleSheet is an abstraction similar to CSS StyleSheets * * Create a new StyleSheet: * + * ``` * var styles = StyleSheet.create({ * container: { * borderRadius: 4, @@ -31,21 +27,26 @@ var invariant = require('invariant'); * activeTitle: { * color: 'red', * }, - * }) + * }); + * ``` * * Use a StyleSheet: * + * ``` * * * + * ``` * * Code quality: + * * - By moving styles away from the render function, you're making the code * code easier to understand. * - Naming the styles is a good way to add meaning to the low level components * in the render function. * * Performance: + * * - Making a stylesheet from a style object makes it possible to refer to it * by ID instead of creating a new style object every time. * - It also allows to send the style only once through the bridge. All @@ -55,66 +56,11 @@ class StyleSheet { static create(obj) { var result = {}; for (var key in obj) { - StyleSheet.validateStyle(key, obj); + StyleSheetValidation.validateStyle(key, obj); result[key] = StyleSheetRegistry.registerStyle(obj[key]); } return result; } - - static validateStyleProp(prop, style, caller) { - if (!__DEV__) { - return; - } - if (allStylePropTypes[prop] === undefined) { - var message1 = '"' + prop + '" is not a valid style property.'; - var message2 = '\nValid style props: ' + - JSON.stringify(Object.keys(allStylePropTypes), null, ' '); - styleError(message1, style, caller, message2); - } - var error = allStylePropTypes[prop]( - style, - prop, - caller, - ReactPropTypeLocations.prop - ); - if (error) { - styleError(error.message, style, caller); - } - } - - static validateStyle(name, styles) { - if (!__DEV__) { - return; - } - for (var prop in styles[name]) { - StyleSheet.validateStyleProp(prop, styles[name], 'StyleSheet ' + name); - } - } - - static addValidStylePropTypes(stylePropTypes) { - for (var key in stylePropTypes) { - invariant( - allStylePropTypes[key] === undefined || - allStylePropTypes[key] === stylePropTypes[key], - 'Attemped to redefine existing style prop type "' + key + '".' - ); - allStylePropTypes[key] = stylePropTypes[key]; - } - } } -var styleError = function(message1, style, caller, message2) { - invariant( - false, - message1 + '\n' + (caller || '<>') + ': ' + - JSON.stringify(style, null, ' ') + (message2 || '') - ); -}; - -var allStylePropTypes = {}; - -StyleSheet.addValidStylePropTypes(ImageStylePropTypes); -StyleSheet.addValidStylePropTypes(TextStylePropTypes); -StyleSheet.addValidStylePropTypes(ViewStylePropTypes); - module.exports = StyleSheet; diff --git a/Libraries/StyleSheet/StyleSheetValidation.js b/Libraries/StyleSheet/StyleSheetValidation.js new file mode 100644 index 000000000..694f11d5a --- /dev/null +++ b/Libraries/StyleSheet/StyleSheetValidation.js @@ -0,0 +1,72 @@ +/** + * Copyright 2004-present Facebook. All Rights Reserved. + * + * @providesModule StyleSheetValidation + */ +'use strict'; + +var ImageStylePropTypes = require('ImageStylePropTypes'); +var ReactPropTypeLocations = require('ReactPropTypeLocations'); +var TextStylePropTypes = require('TextStylePropTypes'); +var ViewStylePropTypes = require('ViewStylePropTypes'); + +var invariant = require('invariant'); + +class StyleSheetValidation { + static validateStyleProp(prop, style, caller) { + if (!__DEV__) { + return; + } + if (allStylePropTypes[prop] === undefined) { + var message1 = '"' + prop + '" is not a valid style property.'; + var message2 = '\nValid style props: ' + + JSON.stringify(Object.keys(allStylePropTypes), null, ' '); + styleError(message1, style, caller, message2); + } + var error = allStylePropTypes[prop]( + style, + prop, + caller, + ReactPropTypeLocations.prop + ); + if (error) { + styleError(error.message, style, caller); + } + } + + static validateStyle(name, styles) { + if (!__DEV__) { + return; + } + for (var prop in styles[name]) { + StyleSheetValidation.validateStyleProp(prop, styles[name], 'StyleSheet ' + name); + } + } + + static addValidStylePropTypes(stylePropTypes) { + for (var key in stylePropTypes) { + invariant( + allStylePropTypes[key] === undefined || + allStylePropTypes[key] === stylePropTypes[key], + 'Attemped to redefine existing style prop type "' + key + '".' + ); + allStylePropTypes[key] = stylePropTypes[key]; + } + } +} + +var styleError = function(message1, style, caller, message2) { + invariant( + false, + message1 + '\n' + (caller || '<>') + ': ' + + JSON.stringify(style, null, ' ') + (message2 || '') + ); +}; + +var allStylePropTypes = {}; + +StyleSheetValidation.addValidStylePropTypes(ImageStylePropTypes); +StyleSheetValidation.addValidStylePropTypes(TextStylePropTypes); +StyleSheetValidation.addValidStylePropTypes(ViewStylePropTypes); + +module.exports = StyleSheetValidation;