catreact/src/js/core/CvMenuItem.js

Catavolt Core React Components

"use strict";
/**
 * Created by rburson on 3/11/16.
 */
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;
};
Object.defineProperty(exports, "__esModule", { value: true });
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],
    componentDidMount: function () {
        this._componentDidMount();
    },
    componentWillReceiveProps: function (nextProps) {
        this._componentWillReceiveProps(nextProps);
    },
    getDefaultProps: function () {
        return {
            actionId: null,
            fireOnLoad: null,
            paneContext: null,
            navTarget: null,
            menuDef: null,
            actionListeners: [],
            navigationListeners: [],
            stateChangeListeners: [],
            parentMenuItem: null,
            subMenuItemRenderer: null,
            selectionProvider: null,
            renderer: null,
            wrapperElemName: 'span',
            wrapperElemProps: {},
            wrapperEventHandlerName: 'onClick',
            actionHandler: null
        };
    },
    getInitialState: function () {
        return this._getInitialState();
    },
    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) */
            /* showOnMenu and displayMode values apply here */
            if (this.props.renderer) {
                return this._shouldRender(menuDef) ?
                    this.props.renderer(this.getChildContext().cvContext, this._getCallbackObj()) : null;
                /* render me - the markup with a 'click' wrapper */
                /* showOnMenu and displayMode values apply here */
            }
            else if (React.Children.count(this.props.children) > 0) {
                if (this._shouldRender(menuDef)) {
                    var props = catavolt_sdk_1.ObjUtil.addAllProps(this.props.wrapperElemProps, {});
                    props[this.props.wrapperEventHandlerName] = function () { _this.performAction(); };
                    return React.createElement(this.props.wrapperElemName, props, this.props.children);
                }
                else {
                    return null;
                }
                /* render child menuDefs (this.menuDef.menuDefs) */
            }
            else if (this.props.subMenuItemRenderer) {
                var newChildren_1 = [];
                menuDef.menuDefs.forEach(function (md, i) {
                    newChildren_1.push(React.cloneElement(_this.props.subMenuItemRenderer(_this.getChildContext().cvContext, md), { key: md.name + i }));
                });
                return React.createElement(this.props.wrapperElemName, this.props.wrapperElemProps, newChildren_1);
            }
            else {
                return null;
            }
            //render all menuDefs of my parent (i.e. wildcard)
        }
        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, i) {
                    newChildren_2.push(React.createElement(exports.CvMenuItem, __assign({}, _this.props, { menuDef: md, key: md.actionId + i })));
                });
                return React.createElement(this.props.wrapperElemName, this.props.wrapperElemProps, newChildren_2);
            }
            else {
                return null;
            }
        }
        else {
            return null;
        }
    },
    _shouldRender: function (menuDef) {
        if (!menuDef.showOnMenu) {
            return false;
        }
        var paneContext = this.paneContext();
        if (paneContext && paneContext instanceof catavolt_sdk_1.EditorContext) {
            if (menuDef.isRead && menuDef.isWrite) {
                return true;
            }
            else if (menuDef.isRead) {
                return paneContext.isReadMode;
            }
            else if (menuDef.isWrite) {
                return paneContext.isWriteMode;
            }
            else {
                return false;
            }
        }
        else {
            return true;
        }
    }
});