ionic-framework/ionic/config/component.js

import * as util from 'ionic/util'
import {dom} from 'ionic/util'
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 class IonicComponent {
  constructor(ComponentClass, {
    bind,
    enhanceRawElement,
    delegates,
    propClasses
  }) {
    // TODO give errors if not providing valid delegates
    ComponentClass.config = this
    this.componentCssName = util.pascalCaseToDashCase(ComponentClass.name)

    this.bind = bind || (bind = {})
    for (let attrName in bind) {
      let binding = bind[attrName]
      if (util.isObject(binding)) {
        binding.property || (binding.property = attrName)
        this._computeDefaultValue(binding)
        // TODO recompute defaultValue when user possibly adds a binding
      }
    }


    this.delegates = delegates || (delegates = {})
    this.propClasses = propClasses || (propClasses = []);

    // Whether to support raw element enhancement (for example, supporting <button>).
    // We only do this if there is a matching style property on the element
    this.enhanceRawElement = enhanceRawElement || false;

    // for (let delegateName of delegates) {
    //   let delegate = delegates[delegateName]
    // }
  }
  _computeDefaultValue(binding = {}) {
    let defaults = binding.defaults || {}
    binding._defaultValue = binding.value || defaults[platformMode] || defaults.base;
  }

  invoke(instance) {
    const config = this;

    // For each property class, check if it exists on the element and add the
    // corresponding classname for it, otherwise add it
    let foundMatchingPropClass = false;
    for (let propClass of this.propClasses) {
      if(dom.hasAttribute(instance.domElement, propClass)) {
        dom.addClass(instance.domElement, `${this.componentCssName}-${propClass}`);
        foundMatchingPropClass = true;
      }
    }

    // TODO: This worked fine for property-only buttons, but breaks with
    // class, etc.
    //
    // If we want to enhance a raw element (for example, a button),
    // only do it if we also have a matching prop class
    //if(!foundMatchingPropClass && this.enhanceRawElement) {
      // Don't enhace this raw element
      //return;
    //}

    // Add the base element classes (ex, button and button-ios)
    dom.addClass(instance.domElement, this.componentCssName, `${this.componentCssName}-${platformMode}`);

    // Check and apply and property classes (properties that should be
    // converted to class names). For example, <button primary> should
    // add the class button-primary

    for (let attrName in this.bind) {
      let binding = this.bind[attrName]
      let defaultValue = binding._defaultValue
      if (!instance[binding.property] && defaultValue) {
        instance[binding.property] = defaultValue
        instance.domElement.setAttribute(util.pascalCaseToDashCase(attrName), defaultValue)
      }
    }

    return {
      getDelegate(delegateName) {
        let cases = (config.delegates || {})[delegateName] || [];
        for (let i = 0; i < cases.length; i++) {
          let delegateCase = cases[i];
          if (util.isArray(delegateCase)) {
            let [ check, DelegateConstructor ] = delegateCase;
            if (check(instance)) {
              return new DelegateConstructor(instance);
            }
          } else {
            return new delegateCase(instance);
          }
        }
      }
    }
  }

}

/*
@IonicComponent({
  selector: 'ion-back-button',
  properties: {
    icon: {
      ios: 'ion-back-ios',
      android: 'ion-back-android',
      default: 'ion-back'
    }
  }
})
*/