TiJSObjectsExample.js

'use strict';

import View from 'view';
import Window from 'window';

// Example Usage
let win = new Window();

let view = new View({
  top: 0,
  bottom: 0,
  left: 0,
  right: 0,
  backgroundColor: '#efefef',
  bar: 'test', // Added to JS context not added to proxy element
});

// Eventlistener only in JS
// does not cross bridge
view.on('foo', (e) => {
  this.set('bar', 'update'); // set prop in JS context not on proxy object
  this.set('top', 10); // set prop on proxy object
});

// Eventlistener added to proxy
// crosses bridge
view.on('click', (e) => {
  let btm = this.get('bottom'); // get prop from proxy element
  // emitted in JS context only
  // no bridge crossing
  view.emit('foo', btm);
});

win.add(view);
win.open();

tiproxy.js

'use strict';

import Emitter from 'emitter';

const _handleNativeEvent = Symbol('_handleNativeEvent');

class TiProxy extends Emitter {

  // Static Class Properties to identify
  // valid props and event types for the
  // native proxy object and JS context
  static eventTypes = [];
  static nativeProps = {};
  static propTypes = {};

  // Class Constructor
  constructor(props) {
    // TODO: Validate props against propTypes and nativeProps
    this.state = props;
    this.__proxy = null;
  }

  // Handle native event emitted and
  // execute JS context listeners
  [_handleNativeEvent](name, evt) {
    this.emit(name, {nativeEvent: evt});
  }

  // Add JS Context event listener and
  // native proxy listener if event type is a valid type
  on(name, fn) {
    let _hasListeners = this.hasListeners(name);
    super.on(name, fn);
    if (_hasListeners && this.constuctor.eventTypes.includes(name)) {
      this.__proxy.addEventListener(
        name,
        this[_handleNativeEvent].bind(this, name)
      );
    }
  }

  _filterNativeProps(props) {
    // TODO: This could be done better
    let _nativeProps = {};
    for (let key in Object.keys(props)) {
      if (this.constructor.nativeProps[key]) {
        _nativeProps[key] = props[key];
      }
    }
    return _nativeProps;
  }

  // Remove JS Context event listener and
  // native proxy listener if event type is a valid type
  off(name, fn) {
    super.off(name, fn);
    let _hasListeners = this.hasListeners(name);
    if (!_hasListeners && this.constuctor.eventTypes.includes(name)) {
      this.__proxy.removeEventListener(
        name,
        this._handleNativeEvent.bind(this, name)
      );
    }
  }

  // Get the prop from JS context state
  // or from the proxy object if it is a valid prop
  get(key) {
    if (this.constuctor.nativeProps[key]){
      return this.__proxy[key];
    }
    return this.state[key];
  }

  // Set prop in JS context state
  // and on the proxy object if it is a valid prop
  set(obj) {
    for ( let key of Object.keys(obj)) {
      this.state[key] = obj[key];
      // TODO: Batch updates for native props
      if (this.constuctor.nativeProps[key]){
        this.__proxy[key] = obj[key];
      }
    }
  }

  // Add native proxy wrapped in JS context
  // to current JS context native proxy object
  add(el) {
    this.__proxy.add(el.__proxy);
  }
}

view.js

'use strict';

import TiProxy from 'tiproxy';


/**
 * View
 */
class View extends TiProxy {
  
  static eventTypes = ['click', 'doubletap'];
  static nativeProps = {
    top: 'int',
    bottom: 'int',
    left: 'int',
    right: 'int',
    backgroundColor: 'hex',
  }

  constructor(props) {
    super(props);
    let _nativeProps = this._filterNativeProps(props);
    this.__proxy = Ti.UI.createView(_nativeProps);
  }
}

window.js

'use strict';

import TiProxy from 'tiproxy';


/*
 * Window
 */
class Window extends TiProxy {

  static eventTypes = ['click', 'doubletap'];
  static nativeProps = {
    top: 'int',
    bottom: 'int',
    left: 'int',
    right: 'int',
  }

  constructor(props) {
    super(props);
    let _nativeProps = this._filterNativeProps(props);
    this.__proxy = Ti.UI.createView(_nativeProps);
  }

  open() {
    this.__proxy.open();
  }

  close() {
    this._proxy.close();
  }
}'use strict';

import TiProxy from 'tiproxy';


/*
 * Window
 */
class Window extends TiProxy {

  static eventTypes = ['click', 'doubletap'];
  static nativeProps = {
    top: 'int',
    bottom: 'int',
    left: 'int',
    right: 'int',
  }

  constructor(props) {
    super(props);
    let _nativeProps = this._filterNativeProps(props);
    this.__proxy = Ti.UI.createView(_nativeProps);
  }

  open() {
    this.__proxy.open();
  }

  close() {
    this._proxy.close();
  }
}