feat(common): RNUIK-15 Implements inherit types

akveo · Sep 6, 2017 · 0de3725 · 0de3725
1 parent 462ce31
commit 0de3725
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 7 deletions.
diff --git a/examples/ExplorerApp/style/themeBootstrapper.js b/examples/ExplorerApp/style/themeBootstrapper.js
@@ -120,4 +120,15 @@ export let bootstrap = () => {
       marginVertical: 10
     }
   });
+
+  RkTheme.setType('RkText', 'testParentTypes', {
+    fontSize: 40,
+    text: {
+      fontFamily: robotoLight,
+      lineHeight: {
+        ios: 41,
+        android: 43
+      },
+    }
+  }, "basic danger header cardText");
 };
diff --git a/src/components/rkComponent.js b/src/components/rkComponent.js
@@ -39,8 +39,11 @@ export class RkComponent extends React.Component {
    */
   defineStyles(additionalTypes) {
     let rkTypes = this.props.rkType || '';
-    let types = _.join([this.defaultType, rkTypes, additionalTypes], ' ');
+    rkTypes = this._getTypesString(rkTypes);
+    additionalTypes = this._getTypesString(additionalTypes);
+    let types = this._getTypesString([this.defaultType, rkTypes, additionalTypes]);
     types = types && types.length ? types.split(' ') : [];
+    console.log(types);
     return this._getTypes(types);
   }
 
@@ -63,6 +66,14 @@ export class RkComponent extends React.Component {
     return val[property];
   }
 
+  _getTypesString(types){
+    let typesString = types;
+    if (Array.isArray(types)) {
+      typesString = _.join(types, ' ');
+    }
+    return typesString;
+  }
+
   _getStyleValue(value) {
     if (typeof value === 'object' && value !== null) {
       if (value.hasOwnProperty(Platform.OS)) {

diff --git a/src/components/text/rkText.js b/src/components/text/rkText.js
@@ -83,12 +83,11 @@ export class RkText extends RkComponent {
 
   render() {
     let {
-      rkType,
       style,
       children,
       ...textProps
     } = this.props;
-    let styles = this.defineStyles(rkType);
+    let styles = this.defineStyles();
     return (
       <Text style={[styles.text, style]} {...textProps}>{children}</Text>
     );

diff --git a/src/styles/themeManager.js b/src/styles/themeManager.js
@@ -92,8 +92,8 @@ class ThemeManager {
    * @param {string} name - name of new rkType
    * @param {object} value - style object for new rkType
    */
-  setType(element, name, value) {
-    TypeManager.setType(element, name, value);
+  setType(element, name, value, parentTypes) {
+    TypeManager.setType(element, name, value, parentTypes);
   }
 
   /**

diff --git a/src/styles/typeManager.js b/src/styles/typeManager.js
@@ -1,4 +1,6 @@
 import {DefaultTypes} from './defaultTypes.js';
+import {RkTheme} from './themeManager.js';
+import {Platform} from 'react-native';
 import _ from 'lodash'
 
 export const TypeManager = class {
@@ -18,8 +20,11 @@ export const TypeManager = class {
     return this._themedTypes;
   };
 
-  static setType = (element, name, value) => {
-    _.set(TypeManager._userTypes, [[element], [name]], value);
+  static setType = (element, name, value, parentTypes) => {
+    if (typeof parentTypes === "string")
+      parentTypes = parentTypes.split(' ');
+    let newType = TypeManager._createType(value, parentTypes, element);
+    _.set(TypeManager._userTypes, [[element], [name]], newType);
     TypeManager.invalidateTypes();
   };
 
@@ -30,5 +35,50 @@ export const TypeManager = class {
 
   static invalidateTypes = () => {
     this._themedTypes = undefined;
+  };
+
+  static _createType = (type, parentTypes, componentName) => {
+    let newType = {};
+    if (parentTypes && parentTypes.length > 0) {
+      parentTypes.forEach(
+        (typeName) => {
+          TypeManager._mergeTypes(newType, TypeManager.types(RkTheme.current)[componentName][typeName]);
+        }
+      );
+      TypeManager._mergeTypes(newType, type);
+    } else {
+      newType = type;
+    }
+    return newType
+  };
+
+  static _mergeTypes = (baseType, typeForMerge) => {
+    let typeForMergeValue, baseTypeValue;
+    for (let key in typeForMerge) {
+      baseTypeValue = TypeManager._getStyleValue(baseType[key]);
+      typeForMergeValue = TypeManager._getStyleValue(typeForMerge[key]);
+      if (baseTypeValue){
+        if (typeof typeForMergeValue === 'object'){
+          typeof baseTypeValue !== 'object' && (baseType[key] = {});
+          TypeManager._mergeTypes(baseType[key], typeForMerge[key]);
+        } else {
+          baseType[key] = typeForMergeValue;
+        }
+      } else {
+        baseType[key] = typeForMergeValue;
+      }
+    }
+  };
+
+  static _getStyleValue = (value) => {
+    let styleValue = value;
+    if (typeof value === 'object' && value !== null) {
+      styleValue = value.hasOwnProperty(Platform.OS)
+        ? TypeManager._getStyleValue(value[Platform.OS])
+        : Object.create(value);
+    } else if (typeof value === 'function') {
+      styleValue = value(RkTheme.current);
+    }
+    return styleValue;
   }
 };