diff --git a/Libraries/StyleSheet/StyleSheet.js b/Libraries/StyleSheet/StyleSheet.js index 796470ced2c2..2b4aa7c38288 100644 --- a/Libraries/StyleSheet/StyleSheet.js +++ b/Libraries/StyleSheet/StyleSheet.js @@ -13,6 +13,7 @@ var StyleSheetRegistry = require('StyleSheetRegistry'); var StyleSheetValidation = require('StyleSheetValidation'); +var StyleSheetInheritance = require('StyleSheetInheritance'); /** * A StyleSheet is an abstraction similar to CSS StyleSheets @@ -62,6 +63,7 @@ class StyleSheet { static create(obj: {[key: string]: any}): {[key: string]: number} { var result = {}; for (var key in obj) { + obj[key] = StyleSheetInheritance.resolve( key, obj ); StyleSheetValidation.validateStyle(key, obj); result[key] = StyleSheetRegistry.registerStyle(obj[key]); } diff --git a/Libraries/StyleSheet/StyleSheetInheritance.js b/Libraries/StyleSheet/StyleSheetInheritance.js new file mode 100644 index 000000000000..efb5a867cf4b --- /dev/null +++ b/Libraries/StyleSheet/StyleSheetInheritance.js @@ -0,0 +1,78 @@ +/** + * 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. + * + * @providesModule StyleSheetInheritance + * @flow + */ + +var _ = require( 'underscore' ); + +/** + * The StyleSheetInheritance object can be used to resolve StyleSheetInheritance. + * + * Instead of writing: + *```javascript + * var styles = StyleSheet.create( { + * viewStyle: { + * marginTop: 5, + * marginBottom: 5, + * backgroundColor: '#bbbbbb', + * flex: 1 + * }, + * viewStyleEdit: { + * marginTop: 20, + * marginBottom: 5, + * backgroundColor: '#fffffff', + * flex: 1 + * } + * }); + *``` + * + * You can simplify to: + * ```javascript + * var styles = StyleSheet.create( { + * viewStyle: { + * marginTop: 5, + * marginBottom: 5, + * backgroundColor: '#bbbbbb', + * flex: 1 + * }, + * viewStyleEdit: ["viewStyle". { + * marginTop: 20, + * backgroundColor: '#fffffff' + * } ] + * }); * + * ``` + * + * The StyleSheetInheritance takes care of resolving these dependencies. + * + */ +class StyleSheetInheritance { + static resolve( name, styles ) { + if (!_.isArray( styles[name])) { + return styles[name]; + } + + var resultStyle = {}; + + var parentObjects = []; + for (var index in styles[name]) { + var parentName = styles[name][index]; + if (typeof parentName === 'string') { + if (styles.hasOwnProperty(parentName)) { + _.extend(resultStyle, styles[parentName]); + } + } + } + _.extend(resultStyle, _.last(styles[name])); + + return resultStyle; + } +} + +module.exports = StyleSheetInheritance; \ No newline at end of file