catreact/src/js/core/CvMenuItem.js

Catavolt Core React Components

/**
 * Created by rburson on 3/11/16.
 */
"use strict";
var __assign = (this && this.__assign) || Object.assign || function(t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
        s = arguments[i];
        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
            t[p] = s[p];
    }
    return t;
};
var React = require('react');
var catreact_core_1 = require('./catreact-core');
var catavolt_sdk_1 = require('catavolt-sdk');
exports.CvMenuItemBase = {
    getChildContext: function () {
        var ctx = this.getDefaultChildContext();
        ctx.cvContext.scopeCtx.scopeObj = this.menuDef();
        return ctx;
    },
};
/*
 ***************************************************
 * Render a Menu
 ***************************************************
 */
/**
 * There are several ways to use CvMenuItem
 *
 * 1. Simple wrapper - Provide an actionId OR menuItem and (optionally) a wrapperElem and wrapperElemProps.
 * This will render your child tags wrapped in wrapperElem with an onClick that fires 'this' action
 * 1. Function for submenus - Provide an actionId OR menuItem and a subMenuItemRenderer
 * see {@link CvMenuItemProps.subMenuItemRenderer}.
 * Providing this function will allow you to render all 'child' MenuDefs (but not 'this' MenuDef).
 * The result will be wrapped in wrapperElem (if provided)
 * 1. Recursive rendering of child menus - Omit both an actionId and menuItem and (optionally) specify a parentMenuItem
 * The render method will render each child of the parentMenuItem (provided or found in scope) passing along all
 * additional properties to new child {@link CvMenuItem}s
 */
exports.CvMenuItem = React.createClass({
    mixins: [catreact_core_1.CvBaseMixin, catreact_core_1.CvActionBase, exports.CvMenuItemBase],
    getDefaultProps: function () {
        return {
            actionId: null,
            paneContext: null,
            navTarget: null,
            menuDef: null,
            actionListeners: [],
            navigationListeners: [],
            stateChangeListeners: [],
            parentMenuItem: null,
            subMenuItemRenderer: null,
            selectionProvider: null,
            renderer: null,
            wrapperElemName: 'span',
            wrapperElemProps: {},
            actionHandler: null
        };
    },
    parentMenuDef: function () {
        return this.props.parentMenuItem || this.firstInScope(catavolt_sdk_1.MenuDef);
    },
    render: function () {
        var _this = this;
        var menuDef = this.menuDef();
        if (menuDef) {
            /* render me (this.menuDef) */
            if (this.props.renderer) {
                return this.props.renderer(this.getChildContext().cvContext, this._getCallbackObj());
            }
            else if (this.props.subMenuItemRenderer) {
                var newChildren_1 = [];
                menuDef.menuDefs.forEach(function (md) {
                    newChildren_1.push(React.cloneElement(_this.props.subMenuItemRenderer(_this.getChildContext().cvContext, md), { key: md.name }));
                });
                return React.createElement(this.props.wrapperElemName, this.props.wrapperElemProps, newChildren_1);
            }
            else if (React.Children.count(this.props.children) > 0) {
                var props = catavolt_sdk_1.ObjUtil.addAllProps(this.props.wrapperElemProps, {});
                props['onClick'] = this.performAction;
                return React.createElement(this.props.wrapperElemName, props, this.props.children);
            }
            else {
                return null;
            }
        }
        else if (!this.props.actionId && this.props.renderer) {
            var parentMenuDef = this.parentMenuDef();
            if (parentMenuDef && parentMenuDef.menuDefs && parentMenuDef.menuDefs.length > 0) {
                var newChildren_2 = [];
                parentMenuDef.menuDefs.forEach(function (md) {
                    newChildren_2.push(React.createElement(exports.CvMenuItem, __assign({}, _this.props, {menuDef: md, key: md.actionId})));
                });
                return React.createElement(this.props.wrapperElemName, this.props.wrapperElemProps, newChildren_2);
            }
            else {
                return null;
            }
        }
        else {
            return null;
        }
    },
});