How to use esp-js-ui - 10 common examples

import { observeEvent } from 'esp-js';
import { viewBinding } from 'esp-js-react';
import { RegionManager } from 'esp-js-ui';
import CashTileView from '../views/cashTileView';
import {
    Logger,
    ModelBase,
    IdFactory
} from 'esp-js-ui';
import CashTileState from './cashTileState';

let _log = Logger.create('CashTileModel');
let _log2 = Logger.create('CashTileModel2');

@viewBinding(CashTileView)
export default class CashTileModel extends ModelBase {
    private _regionManager:RegionManager;
    private _initialState:CashTileState;
    constructor(
        router,
        regionManager:RegionManager,
        initialState:CashTileState // needs to be last due to how it's resolved via the container
    ) {
        super(IdFactory.createId('cashTileModel'), router);
        this._regionManager = regionManager;
        this._initialState = initialState;
    }
    public getTitle(): string {
        return 'Cash Tile';

import {observeEvent} from 'esp-js';
import {viewBinding} from 'esp-js-react';
import {RegionManager} from 'esp-js-ui';
import {CashTileView} from '../views/cashTileView';
import {
    Logger,
    ModelBase,
    IdFactory
} from 'esp-js-ui';
import {CashTileState} from './cashTileState';

const _log = Logger.create('CashTileModel');
const _log2 = Logger.create('CashTileModel2');

@viewBinding(CashTileView)
export class CashTileModel extends ModelBase {
    private _regionManager: RegionManager;
    private _initialState: CashTileState;

    constructor(
        router,
        regionManager: RegionManager,
        initialState: CashTileState // needs to be last due to how it's resolved via the container
    ) {
        super(IdFactory.createId('cashTileModel'), router);
        this._regionManager = regionManager;
        this._initialState = initialState;
    }

// This class shows how an OO model can interop with a polimer immurable model
import {Logger} from 'esp-js-ui';
import {DateSelectorState} from './dateSelectorState';
import {DisposableBase, observeEvent, Router} from 'esp-js';
import {StateHandlerModel} from 'esp-js-polimer';
import {DateSelectorEvents} from '../../events';

const _log = Logger.create('CashTile-DateSelectorModel');

export class DateSelectorModel extends DisposableBase implements StateHandlerModel {
    private _currentState: DateSelectorState;

    constructor(private _modelId: string, private _router: Router) {
        super();
    }

    @observeEvent(DateSelectorEvents.tenorDateChanged)
    _onTenorDateChanged(event: DateSelectorEvents.TenorDateChanged) {
        let resolvedDate: Date;
        if (event.tenor === '1m') {
            resolvedDate = new Date();
            resolvedDate.setDate(resolvedDate.getDate()+7);
        }
        this._currentState = {

constructor(
        router,
        regionManager: RegionManager,
        initialState: BlotterState // needs to be last due to how it's resolved via the container
    ) {
        super(IdFactory.createId('blotterModel'), router);
        this._regionManager = regionManager;
        this._initialState = initialState;
    }

constructor(
        router,
        regionManager: RegionManager,
        initialState: CashTileState // needs to be last due to how it's resolved via the container
    ) {
        super(IdFactory.createId('cashTileModel'), router);
        this._regionManager = regionManager;
        this._initialState = initialState;
    }

constructor(
        router,
        regionManager:RegionManager,
        initialState:CashTileState // needs to be last due to how it's resolved via the container
    ) {
        super(IdFactory.createId('cashTileModel'), router);
        this._regionManager = regionManager;
        this._initialState = initialState;
    }
    public getTitle(): string {

_createView(childContainer, state: CashTileModel): PolimerModel {
        _log.verbose('Creating cash tile model');

        const modelId = IdFactory.createId('cashTileModel');

        const initialModel = state || defaultModelFactory(modelId, 'EURUSD');

        let model = this._router
            // ***************************
            // Create a model and setup some initial state
            .modelBuilder()
            .withInitialModel(initialModel)

            // ***************************
            // Wire up state handlers.
            // 2 methods are supported.

            // 1) Simple handler objects
            .withStateHandlerMap('rootState', rootStateHandlerMap)
            .withStateHandlerMap('referenceData', referenceDataStateHandlerMap)

import {CashTileModel, defaultModelFactory} from './model/cashTileModel';
import {CashTileView} from './views/cashTileView';
import {rootStateHandlerMap} from './model/root/rootState';
import {referenceDataStateHandlerMap} from './model/refData/referenceDataState';
import {rootStateObservable} from './model/root/rootEventStreams';
import {inputStateHandlerMap} from './model/inputs/inputsState';
import {RequestForQuoteStateHandlers} from './model/rfq/requestForQuoteState';
import {RequestForQuoteEventStreams} from './model/rfq/requestForQuoteEventStreams';
import {RfqService} from './services/rfqService';
import {RootEvents} from './events';
import {DateSelectorModel} from './model/dateSelector/dateSelectorModel';
import {TradingModuleContainerConst} from '../tradingModuleContainerConst';

const _log = Logger.create('CashTileViewFactory');

@viewFactory(TradingModuleContainerConst.cashTileViewFactory, 'Cash Tile')
export class CashTileViewFactory extends ViewFactoryBase> {
    private _router : Router;
    constructor(container, router:Router) {
        super(container);
        this._router = router;
    }
    _createView(childContainer, state: CashTileModel): PolimerModel {
        _log.verbose('Creating cash tile model');

        const modelId = IdFactory.createId('cashTileModel');

        const initialModel = state || defaultModelFactory(modelId, 'EURUSD');

        let model = this._router
            // ***************************
            // Create a model and setup some initial state

import {Router} from 'esp-js';
import {ViewFactoryBase, Logger, viewFactory } from 'esp-js-ui';
import {TradingModuleContainerConst} from '../tradingModuleContainerConst';
import {BlotterState} from './models/blotterState';
import {BlotterModel} from './models/blotterModel';

const _log = Logger.create('BlotterViewFactory');

@viewFactory(TradingModuleContainerConst.blotterViewFactory, 'Blotter')
export class BlotterViewFactory extends ViewFactoryBase {
    private _router : Router;
    constructor(container, router:Router) {
        super(container);
        this._router = router;
    }
    // override
    _createView(childContainer, state:BlotterState):BlotterModel {
        _log.verbose('Creating blotter model');
        state = state || BlotterState.create();
        let model:BlotterModel = childContainer.resolve(TradingModuleContainerConst.blotterModel, state);
        model.observeEvents();
        return model;
    }
}

*   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
// notice_end

const esp = require('../packages/esp-js/src/index');
// comment this out if you want more verbose logging, i.e. any esp logging (mostly for unhappy path test cases) spat out.
esp.logging.Logger.setSink(() => { /* noop */});

const espUi = require('esp-js-ui');
espUi.LoggingConfig.setLevel(espUi.Level.none);