IonicComponentNEW

ionic/components/tabs/tabs.js

@@ -1,5 +1,5 @@
 import {Optional} from 'angular2/src/di/annotations_impl'
-import {Component} from 'angular2/src/core/annotations_impl/annotations';
+import {Component, onInit} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 import {ElementRef} from 'angular2/src/core/compiler/element_ref';
 import {Compiler} from 'angular2/angular2';
@@ -12,7 +12,6 @@ import {ViewItem} from '../view/view-item';
 import {TabButton} from './tab-button';
 import {Icon} from '../icon/icon';
 import {IonicComponentNEW} from '../../config/component';
-import {Config} from '../../config/component';
 
 
 @IonicComponentNEW(Tabs)
@@ -68,13 +67,10 @@ export class Tabs extends ViewController {
       };
     }
 
-    Config(this, {
-      'tabBarPlacement': {
-        'default': 'bottom',
-        'android': 'top',
-        'ios': 'bottom'
   }
-    });
+
+  onInit() {
+    Tabs.applyConfig(this);
   }
 
   addTab(tab) {
@@ -127,18 +123,9 @@ export class Tabs extends ViewController {
   static get config() {
     return {
       selector: 'ion-tabs',
-      properties: [
-        'tabBarPlacement',
-        'tabBarIcons'
-      ],
-      hostProperties: {
-        'tabBarPlacement': 'attr.tab-bar-placement',
-        'tabBarIcons': 'attr.tab-bar-icons'
-      },
-      classId: 'tabs',
-      propertyDefaults: {
-        'tabBarPlacement': 'top',
-        'tabBarIcons': 'bottom'
+      defaultProperties: {
+        'tabBarPlacement': 'bottom',
+        'tabBarIcons': 'top'
       }
     }
   }

ionic/config/component.js

@@ -6,9 +6,6 @@ import {Platform} from 'ionic/platform/platform'
 
 let platformMode = Platform.getMode();
 
-// Low-level: how the user will override
-// BackButton.config.bind.icon.value = 'ion-chevron-right'
-// BackButton.config._computeDefaultValue(BackButton.config.bind.icon)
 
 export function Config(instance, config){
   for (var setting in config) {
@@ -30,7 +27,59 @@ export class ModeDirective extends Directive {
 
 export class IonicComponentNEW extends ModeComponent {
   constructor(ComponentType) {
-    super(ComponentType && ComponentType.config);
+    let config = ComponentType.config;
+    const defaultProperties = config.defaultProperties;
+
+    config.properties = config.properties || [];
+    config.hostProperties = config.hostProperties || {};
+
+    for (let prop in defaultProperties) {
+      // add the property to the component "properties"
+      config.properties.push(prop);
+
+      // set the component "hostProperties", so the instance's
+      // property value will be used to set the element's attribute
+      config.hostProperties[prop] = 'attr.' + util.pascalCaseToDashCase(prop);
+    }
+
+    // called by the component's onInit when an instance has been created and properties bound
+    ComponentType.applyConfig = (instance) => {
+      for (let prop in defaultProperties) {
+        // Priority:
+        // ---------
+        // 1) Value set from within constructor
+        // 2) Value set from the host element's attribute
+        // 3) Value set by the users global config
+        // 4) Value set by the default mode/platform config
+        // 5) Value set from the component's default
+
+        if (instance[prop]) {
+          // this property has already been set on the instance
+          // could be from the user setting the element's attribute
+          // or from the user setting it within the constructor
+          continue;
+        }
+
+        // get the property values from a global user config
+        var globalPropertyValue = null;
+        if (globalPropertyValue) {
+          instance[prop] = globalPropertyValue;
+          continue;
+        }
+
+        // get the property values provided by this mode/platform
+        var modePropertyValue = null;
+        if (modePropertyValue) {
+          instance[prop] = modePropertyValue;
+          continue;
+        }
+
+        // wasn't set yet, so go with property's default value
+        instance[prop] = defaultProperties[prop];
+      }
+    };
+
+    super(config);
   }
 }