analytics/webcontent/bi/js/gemini/features/dashboard/inAppSlideout/InAppSlideoutContainer.js

'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

/*
 *+------------------------------------------------------------------------+
 *| Licensed Materials - Property of IBM
 *| IBM Cognos Products: Content Explorer
 *| (C) Copyright IBM Corp. 2019, 2020
 *|
 *| US Government Users Restricted Rights - Use, duplication or disclosure
 *| restricted by GSA ADP Schedule Contract with IBM Corp.
 *+------------------------------------------------------------------------+
 */

define(['react', 'ca-ui-toolkit', 'prop-types', 'jquery'], function (React, _ref, PropTypes, $) {
	var Container = _ref.Container,
	    Slideout = _ref.Slideout;


	// TODO: use colors from ba-ui-toolkit essentials
	var BORDER_COLOR = '#eaeaea'; // $gray1
	var CONTRIBUTION_CLASS_NAME = 'slideout__contributions';

	var createContributionNode = function createContributionNode(contributionId) {
		var node = document.createElement('div');
		node.dataset.contributionId = contributionId;
		node.setAttribute('class', CONTRIBUTION_CLASS_NAME + '__item');
		node.style.overflow = 'auto';
		return node;
	};

	var contributionNodeMatchFn = function contributionNodeMatchFn(node, contributionId) {
		return node.dataset.contributionId === contributionId;
	};

	var findContributionNode = function findContributionNode(parentNode, contributionId) {
		var childNodes = Array.from(parentNode.childNodes);
		return childNodes.find(function (child) {
			return contributionNodeMatchFn(child, contributionId);
		});
	};

	/**
  * Hide all contribution nodes, except the node that matches the current contribution id.
  * The nodes representing the current contribution, should always be displayed, everything
  * else should be hidden.
  * @param {Node} parentNode - DOM element containing all the contributions
  * @param {string} contributionId - current contribution id
  */
	var hideContributionNodesExceptCurrent = function hideContributionNodesExceptCurrent(parentNode, contributionId) {
		var childNodes = Array.from(parentNode.childNodes);
		childNodes.forEach(function (child) {
			child.style.display = contributionNodeMatchFn(child, contributionId) ? '' : 'none';
		});
	};

	var InAppSlideoutContainer = function (_React$Component) {
		_inherits(InAppSlideoutContainer, _React$Component);

		function InAppSlideoutContainer(props) {
			_classCallCheck(this, InAppSlideoutContainer);

			var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));

			_this.contentRef = React.createRef();
			return _this;
		}

		InAppSlideoutContainer.prototype.componentDidMount = function componentDidMount() {
			this._updateInAppSlideout();
		};

		InAppSlideoutContainer.prototype.componentWillUnmount = function componentWillUnmount() {
			this._onComponentMountedChange( /*isMounted*/false);
		};

		InAppSlideoutContainer.prototype.componentDidUpdate = function componentDidUpdate() {
			this._updateInAppSlideout();
		};

		InAppSlideoutContainer.prototype._getContainerNode = function _getContainerNode() {
			var contribution = this.props.contribution;

			var contributionId = contribution.getProviderId();

			var refNode = this.contentRef.current;
			if (!refNode) {
				// If something goes wrong and we can't get ahold of the content reference,
				// we will be unable to build a parent node
				return;
			}

			var resultNode = findContributionNode(refNode, contributionId);
			if (!resultNode) {
				resultNode = createContributionNode(contributionId);
				refNode.appendChild(resultNode);
			}

			return resultNode;
		};

		InAppSlideoutContainer.prototype._clearContainerNode = function _clearContainerNode() {
			var containerNode = this._getContainerNode();
			if (containerNode) {
				containerNode.innerHTML = '';
			}
		};

		InAppSlideoutContainer.prototype._updateInAppSlideout = function _updateInAppSlideout() {
			var _this2 = this;

			var _props = this.props,
			    contribution = _props.contribution,
			    options = _props.options;


			if (!contribution) {
				return;
			}

			var contributionId = contribution.getProviderId();

			hideContributionNodesExceptCurrent(this.contentRef.current, contributionId);

			var containerNode = this._getContainerNode();
			if (!containerNode) {
				return;
			}

			contribution.render(_extends({}, options, {
				parentNode: containerNode
			})).then(function (node) {
				if (!node) {
					return;
				}
				var childPanelId = node.dataset.childPanelId;
				if (options.isChild || childPanelId) {
					_this2._updateChildView(node, options);
				} else {
					_this2._updateParentView(node);
				}
				_this2._onComponentMountedChange( /*isMounted*/true);
			});
		};

		InAppSlideoutContainer.prototype._updateChildView = function _updateChildView(node) {
			var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
			var active = this.props.active;


			if (active) {
				var containerNode = this._getContainerNode();
				var firstChild = containerNode.firstElementChild;
				if (firstChild) {
					if (containerNode.childNodes.length > 1) {
						// Canvas Tab properties is the only in R7 that uses refreshChild flag
						if (options.refreshChild) {
							// if is refreshing, then remove old child
							// using jquery remove can also clean up any attached handlers
							$(firstChild).remove();
							firstChild = containerNode.firstElementChild;
						}
					} else {
						firstChild.style.display = 'none';
					}
					containerNode.insertBefore(node, firstChild);
					containerNode.childNodes[0].focus();
				}
			}
		};

		InAppSlideoutContainer.prototype._updateParentView = function _updateParentView(node) {
			var active = this.props.active;


			if (active) {
				this._clearContainerNode();
				var containerNode = this._getContainerNode();
				if (containerNode) {
					containerNode.insertBefore(node, containerNode.firstElementChild);
					containerNode.childNodes[0].focus();
				}
			}
		};

		/**
   * Invoke registered views when the InAppSlideoutContainer component get mount/unmounted in the DOM
   *
   * @param {booean} isMounted -isMounted boolean flag
   */


		InAppSlideoutContainer.prototype._onComponentMountedChange = function _onComponentMountedChange(isMounted) {
			var _props2 = this.props,
			    onDomStateChange = _props2.onDomStateChange,
			    contribution = _props2.contribution;

			if (contribution && contribution.getProviderId && onDomStateChange) {
				onDomStateChange({
					type: isMounted ? 'mounted' : 'unmounted',
					current: contribution.getProviderId()
				});
			}
		};

		InAppSlideoutContainer.prototype.render = function render() {
			var active = this.props.active;

			return React.createElement(
				Container,
				{ relative: true, height: '100%', width: '100%' },
				React.createElement(
					Slideout,
					{
						animationOnRender: true,
						toDirection: '',
						active: active,
						width: '100%',
						style: {
							borderLeft: '1px solid ' + BORDER_COLOR,
							borderTop: '1px solid ' + BORDER_COLOR
						}
					},
					React.createElement('div', { ref: this.contentRef, className: CONTRIBUTION_CLASS_NAME })
				)
			);
		};

		return InAppSlideoutContainer;
	}(React.Component);

	InAppSlideoutContainer.propTypes = {
		active: PropTypes.bool,
		contribution: PropTypes.object.isRequired,
		options: PropTypes.object,
		onDomStateChange: PropTypes.func
	};

	InAppSlideoutContainer.defaultProps = {
		active: false,
		options: {},
		onDomStateChange: function onDomStateChange() {}
	};

	return InAppSlideoutContainer;
});
//# sourceMappingURL=InAppSlideoutContainer.js.map