@aappddeevv/dynamics-client-ui/lib/Components/NavigationPivot.js

## What is it? A library to help you create great dynamics applications.

"use strict";

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.DynamicsPivot = undefined;

var _getPrototypeOf = require("babel-runtime/core-js/object/get-prototype-of");

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require("babel-runtime/helpers/createClass");

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require("babel-runtime/helpers/inherits");

var _inherits3 = _interopRequireDefault(_inherits2);

exports.run = run;

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _reactDom = require("react-dom");

var _lib = require("office-ui-fabric-react/lib");

var _Pivot = require("office-ui-fabric-react/lib/Pivot");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/**
 * Manage state as best you can given that all changes are side-effects to dynamics.
 * There is not an easy way to detect when the tabs are changed external to
 * react. Tabs hidden at the start are always hidden. Tabs are set once in props once
 * at creation time and cannot be changed.
 */
/** Navigation via Pivot from Office UI Fabric. */
var DynamicsPivot = exports.DynamicsPivot = function (_React$Component) {
    (0, _inherits3.default)(DynamicsPivot, _React$Component);

    function DynamicsPivot(props) {
        (0, _classCallCheck3.default)(this, DynamicsPivot);

        var _this = (0, _possibleConstructorReturn3.default)(this, (DynamicsPivot.__proto__ || (0, _getPrototypeOf2.default)(DynamicsPivot)).call(this, props));

        _this.getLabel = function (t) {
            var lab = t.getLabel();
            var calc = _this.state.labelMap[lab];
            if (calc) return calc;
            return lab;
        };

        _this.processTabs = function () {
            var selected = _this.state.selectedIndex;
            var haveTabs = _this.state.tabs;
            if (haveTabs) {
                for (var i = 0; i < _this.state.tabs.getLength(); i++) {
                    var shouldHide = _this.state.alwaysHidden.includes(i);
                    var t = _this.state.tabs.get(i);
                    if ((i !== selected || shouldHide) && selected != DynamicsPivot.ALL) {
                        // hide
                        if (_this.state.collapse) t.setDisplayState("collapsed");else t.setVisible(false);
                    } else if (!shouldHide) {
                        t.setDisplayState("expanded");
                        t.setVisible(true);
                    }
                }
                var focusIndex = selected === DynamicsPivot.ALL && haveTabs && _this.state.tabs.getLength() > 0 ? 0 : haveTabs && selected < _this.state.tabs.getLength() ? selected : -1;
                if (haveTabs && focusIndex >= 0) _this.state.tabs.get(focusIndex).setFocus();
            }
        };

        _this.handleClick = function (pivotItem) {
            return _this.setState({ selectedIndex: parseInt(pivotItem.props.itemKey) });
        };

        var alwaysHidden = props.alwaysHidden || [];
        if (props.tabs && !props.alwaysHidden) {
            // tabs is a fake array
            for (var i = 0; i < props.tabs.getLength(); i++) {
                var t = props.tabs.get(i);
                if (!t.getVisible()) alwaysHidden.push(i);
            }
        }

        _this.state = {
            alwaysHidden: alwaysHidden, // indexes to hide, 0-based
            selectedIndex: props.selectedIndex || (props.tabs && props.tabs.getLength() > 0 ? 0 : DynamicsPivot.ALL),
            tabs: props.tabs,
            // true=>collapse un-selected tabs but keep visible
            // otherwise un-selected tabs are not visible
            collapse: props.collapse,
            labelMap: props.labelMap // use these labels instead of actual tab labels
        };
        return _this;
    }

    /** Get a label for a tab. Uses labelMap. */


    /** Hide all but selected. This has side effects not visible to react. */


    (0, _createClass3.default)(DynamicsPivot, [{
        key: "render",
        value: function render() {
            var pivots = [];
            for (var i = 0; i < this.state.tabs.getLength(); i++) {
                var t = this.state.tabs.get(i);
                if (!this.state.alwaysHidden.includes(i)) pivots.push({ linkText: this.getLabel(t), i: i });
            }
            pivots.push({ linkText: "All", i: DynamicsPivot.ALL }); // ALL is last
            var selectedKey = this.state.selectedIndex === DynamicsPivot.ALL ? this.state.tabs.getLength() : this.state.selectedIndex;

            this.processTabs(); // kind of like a render
            return _react2.default.createElement(
                _Pivot.Pivot,
                { headersOnly: true,
                    selectedKey: selectedKey,
                    onLinkClick: this.handleClick },
                pivots.map(function (p) {
                    return _react2.default.createElement(_Pivot.PivotItem, { linkText: p.linkText, itemKey: p.i, key: p.i });
                })
            );
        }
    }]);
    return DynamicsPivot;
}(_react2.default.Component);

DynamicsPivot.ALL = -1;
DynamicsPivot.defaultProps = {
    alwaysHidden: null,
    collapse: true,
    tabs: null,
    labelMap: {} };
function run(_ref) {
    var target = _ref.target,
        collapse = _ref.collapse,
        labelMap = _ref.labelMap;

    var _xrm = window.parent.Xrm || Xrm;

    // this pages parameters not the overall form
    var dataStr = Xrm.Page.context.getQueryStringParameters()["data"];
    var data = dataStr ? JSON.parse(dataStr) : {};

    collapse = collapse || data.collapse || true;
    labelMap = labelMap || data.labelMap || {};

    (0, _reactDom.render)(_react2.default.createElement(
        _lib.Fabric,
        null,
        _react2.default.createElement(DynamicsPivot, { tabs: _xrm.Page.ui.tabs,
            collapse: collapse,
            labelMap: labelMap })
    ), target);
}
//# sourceMappingURL=NavigationPivot.js.map