status-im/react-native
2
0
Fork 0
mirror of https://github.com/status-im/react-native.git synced 2025-01-27 01:40:08 +00:00
Code Issues Projects Releases Wiki Activity

[ReactNative] Cleanup StyleSheet API

Browse Source
This commit is contained in:
Christopher Chedeau 2015-03-16 21:33:19 -07:00
parent f8ab8415d5
commit 733596b67a
2 changed files with 81 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
Libraries/StyleSheet/StyleSheet.js
View File

@ -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:
*
* ```
* <View style={styles.container}>
* <Text style={[styles.title, this.props.isActive && styles.activeTitle]} />
* </View>
* ```
*
* 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 || '<<unknown>>') + ': ' +
JSON.stringify(style, null, ' ') + (message2 || '')
);
};
var allStylePropTypes = {};
StyleSheet.addValidStylePropTypes(ImageStylePropTypes);
StyleSheet.addValidStylePropTypes(TextStylePropTypes);
StyleSheet.addValidStylePropTypes(ViewStylePropTypes);
module.exports = StyleSheet;

72
Libraries/StyleSheet/StyleSheetValidation.js Normal file
View File

@ -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 || '<<unknown>>') + ': ' +
JSON.stringify(style, null, ' ') + (message2 || '')
);
};
var allStylePropTypes = {};
StyleSheetValidation.addValidStylePropTypes(ImageStylePropTypes);
StyleSheetValidation.addValidStylePropTypes(TextStylePropTypes);
StyleSheetValidation.addValidStylePropTypes(ViewStylePropTypes);
module.exports = StyleSheetValidation;