react-native/Libraries/StyleSheet/StyleSheet.js

73 lines
1.8 KiB
JavaScript
Raw Normal View History

2015-01-30 01:10:49 +00:00
/**
* Copyright (c) 2015-present, 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.
2015-01-30 01:10:49 +00:00
*
* @providesModule StyleSheet
2015-03-25 02:34:12 +00:00
* @flow
2015-01-30 01:10:49 +00:00
*/
'use strict';
var StyleSheetRegistry = require('StyleSheetRegistry');
var StyleSheetValidation = require('StyleSheetValidation');
2015-01-30 01:10:49 +00:00
/**
* A StyleSheet is an abstraction similar to CSS StyleSheets
*
* Create a new StyleSheet:
*
* ```
2015-01-30 01:10:49 +00:00
* var styles = StyleSheet.create({
* container: {
* borderRadius: 4,
* borderWidth: 0.5,
* borderColor: '#d6d7da',
* },
* title: {
* fontSize: 19,
* fontWeight: 'bold',
* },
* activeTitle: {
* color: 'red',
* },
* });
* ```
2015-01-30 01:10:49 +00:00
*
* Use a StyleSheet:
*
* ```
2015-01-30 01:10:49 +00:00
* <View style={styles.container}>
* <Text style={[styles.title, this.props.isActive && styles.activeTitle]} />
* </View>
* ```
2015-01-30 01:10:49 +00:00
*
* Code quality:
*
2015-01-30 01:10:49 +00:00
* - By moving styles away from the render function, you're making the code
* easier to understand.
2015-01-30 01:10:49 +00:00
* - Naming the styles is a good way to add meaning to the low level components
* in the render function.
*
* Performance:
*
2015-01-30 01:10:49 +00:00
* - 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
* subsequent uses are going to refer an id (not implemented yet).
*/
class StyleSheet {
2015-03-25 02:34:12 +00:00
static create(obj: {[key: string]: any}): {[key: string]: number} {
2015-01-30 01:10:49 +00:00
var result = {};
for (var key in obj) {
StyleSheetValidation.validateStyle(key, obj);
2015-01-30 01:10:49 +00:00
result[key] = StyleSheetRegistry.registerStyle(obj[key]);
}
return result;
}
}
module.exports = StyleSheet;