analytics/webcontent/bi/js/dashboard-analytics/visualizationPanel/components/VisualItem.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: BI Cloud (C) Copyright IBM Corp. 2019, 2021
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 */
define(['react', 'prop-types', 'ca-ui-toolkit', 'jquery', './contextMenu/ContextMenuWrapper', '../../widgets/livewidget/nls/StringResources', '../../visualizations/vipr/VIPRBundleHelper', '../../lib/@waca/dashboard-common/dist/lib/@ba-ui-toolkit/ba-graphics/dist/icons-js/overflow-menu--horizontal_16'], function (React, PropTypes, UI_Toolkit, $, ContextMenuWrapper, StringResources, VIPRBundleHelper, menuOverflow_24) {
	var Component = React.Component;
	var FlexLayout = UI_Toolkit.FlexLayout,
	    FlexItem = UI_Toolkit.FlexItem,
	    VSpacer = UI_Toolkit.VSpacer,
	    HSpacer = UI_Toolkit.HSpacer,
	    SVGIcon = UI_Toolkit.SVGIcon,
	    Label = UI_Toolkit.Label,
	    Dialog = UI_Toolkit.Dialog;

	var VisualItem = function (_Component) {
		_inherits(VisualItem, _Component);

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

			var _this = _possibleConstructorReturn(this, _Component.call(this, props));

			_this.target = undefined;
			_this._iconRef = null;
			_this._rootRef = React.createRef();

			_this.state = {
				item: _this.props.item,
				isContextMenuOpen: false,
				openDeleteDialog: false
			};

			var item = _this.state.item;


			_this._renderContext = {
				icon: item.icon,
				description: item.label,
				isDisabled: false
			};
			return _this;
		}

		VisualItem.prototype.componentDidMount = function componentDidMount() {
			if (!this._renderContext.isDisabled) {
				this._attachCallbacksAndImages();
			}
		};

		VisualItem.prototype._attachCallbacksAndImages = function _attachCallbacksAndImages() {
			var $node = this._findChildVisCustomVisNode();
			if ($node) {
				var handlers = this.props.handlers;

				handlers.componentDidMountCallback('vis-custom-container', 'prop-item:not(.is-disabled)', $node);
			}
			this._appendIconNode();
		};

		VisualItem.prototype.componentWillUnmount = function componentWillUnmount() {
			if (!this._renderContext.isDisabled) {
				this._detachCallbacksAndImages();
			}
		};

		VisualItem.prototype._detachCallbacksAndImages = function _detachCallbacksAndImages() {
			var $node = this._findChildVisCustomVisNode();
			if ($node) {
				var handlers = this.props.handlers;

				handlers.componentWillUnmountCallback('vis-custom-container', 'prop-item:not(.is-disabled)', $node);
			}
			this._iconRef = null;
		};

		VisualItem.prototype.render = function render() {
			var item = this.state.item;

			var className = 'vis-custom-vis' + (this._renderContext.isDisabled ? ' no-sdk' : '');

			return React.createElement(
				FlexItem,
				{
					className: this._getVisualItemCssClasses(),
					role: 'group'
				},
				React.createElement(
					'div',
					{ ref: this._rootRef },
					React.createElement(
						FlexLayout,
						{
							fullHeight: true,
							direction: 'column',
							alignItems: 'flext-start'
						},
						React.createElement(
							FlexItem,
							{
								className: className,
								'data-name': item.name
							},
							this._renderItem()
						),
						React.createElement(
							FlexItem,
							null,
							React.createElement(VSpacer, { size: 1 })
						),
						React.createElement(
							FlexItem,
							null,
							this._renderVisLabel()
						),
						React.createElement(
							FlexItem,
							null,
							React.createElement(VSpacer, { size: 3 })
						)
					),
					this.renderDeleteDialog()
				)
			);
		};

		VisualItem.prototype._getVisualItemCssClasses = function _getVisualItemCssClasses() {
			return 'vis-custom-visual-item';
		};

		VisualItem.prototype._renderItem = function _renderItem() {
			var item = this.state.item;

			var renderOptionsContent = void 0;

			if (this._canRenderMenuOption()) {
				if (this._isSchematic(item) && item.numSVGs > 1) {
					renderOptionsContent = this._renderSchematicCountWithOptions();
				} else {
					renderOptionsContent = this._renderMenuOption();
				}
			} else {
				renderOptionsContent = React.createElement(VSpacer, { size: 1.5 });
			}

			return React.createElement(
				FlexLayout,
				{
					fullHeight: true,
					direction: 'column',
					alignItems: 'flext-start'
				},
				React.createElement(
					FlexItem,
					null,
					React.createElement(VSpacer, { size: 0.5 })
				),
				React.createElement(
					FlexItem,
					{ className: 'vis-options' },
					renderOptionsContent
				),
				React.createElement(
					FlexItem,
					null,
					React.createElement(VSpacer, { size: 0.5 })
				),
				React.createElement(
					FlexItem,
					null,
					this._renderContent()
				)
			);
		};

		VisualItem.prototype._renderContent = function _renderContent() {
			var item = this.state.item;

			var className = 'prop-item' + (this._renderContext.isDisabled ? ' is-disabled' : '');

			return React.createElement(
				FlexLayout,
				{
					fullHeight: true,
					direction: 'column',
					alignItems: 'flext-start'
				},
				React.createElement(
					FlexItem,
					{
						role: 'group', className: className,
						'data-name': item.name
					},
					this._renderVisIcon()
				)
			);
		};

		VisualItem.prototype._canRenderMenuOption = function _canRenderMenuOption() {
			var customVisAction = this.props.customVisAction;


			return customVisAction.canManage();
		};

		VisualItem.prototype._isSchematic = function _isSchematic(item) {
			var handlers = this.props.handlers;


			return handlers.isSchematicType(item) && !handlers.isSchematicTypePreview(item);
		};

		VisualItem.prototype._renderMenuOption = function _renderMenuOption() {
			var menuIcon = this.props.menuIcon;
			var item = this.state.item;


			return React.createElement(
				FlexLayout,
				{
					fullHeight: true,
					direction: 'row-reverse',
					className: 'vis-custom-menu-overflow'
				},
				React.createElement(
					FlexItem,
					null,
					React.createElement(HSpacer, { size: 1 })
				),
				React.createElement(
					FlexItem,
					{
						'data-name': item.name,
						className: 'vis-custom-menu-overflow-anchor',
						title: StringResources.get('extVisMore')
					},
					React.createElement(SVGIcon, {
						size: 'small',
						className: 'svgIcon',
						verticalAlign: 'initial',
						tabIndex: 0,
						iconId: menuIcon.default.id,
						onKeyUp: this._renderContextMenu.bind(this),
						onClick: this._handleOnClick.bind(this)
					}),
					this._renderContextMenu()
				)
			);
		};

		VisualItem.prototype._renderSchematicCountWithOptions = function _renderSchematicCountWithOptions() {
			var item = this.state.item;

			var renderMenuOption = this._canRenderMenuOption();
			var width = renderMenuOption ? '50%' : '100%';

			return React.createElement(
				FlexLayout,
				{
					fullHeight: true,
					direction: 'row',
					justifyContent: 'space-between'
				},
				React.createElement(
					FlexItem,
					{ width: width, grow: true, shrink: true },
					React.createElement(
						FlexLayout,
						{
							fullHeight: true,
							direction: 'row',
							justifyContent: 'flex-start'
						},
						React.createElement(
							FlexItem,
							null,
							React.createElement(HSpacer, { size: 0.5 })
						),
						React.createElement(
							FlexItem,
							null,
							React.createElement(
								'div',
								{
									className: 'vis-svg-count-container',
									title: item.numSVGs,
									'aria-label': item.numSVGs
								},
								React.createElement(Label, {
									className: 'vis-svg-count-content',
									label: item.numSVGs })
							)
						)
					)
				),
				renderMenuOption && React.createElement(
					FlexItem,
					{ grow: true, shrink: true },
					this._renderMenuOption()
				)
			);
		};

		VisualItem.prototype._renderVisIcon = function _renderVisIcon() {
			var item = this.state.item;

			return React.createElement(
				FlexLayout,
				{
					fullHeight: true,
					direction: 'column',
					alignItems: 'center',
					tabIndex: 0,
					className: 'prop-icon',
					role: 'button',
					title: item.label,
					'aria-label': item.label
				},
				React.createElement(
					FlexItem,
					null,
					VIPRBundleHelper.isValidIconFileExt(item.icon) ? this._renderIconRef() : this._renderIcon()
				)
			);
		};

		VisualItem.prototype._renderIcon = function _renderIcon() {
			var className = 'svgIcon' + (this._renderContext.isDisabled ? ' is-disabled' : '');
			return React.createElement(SVGIcon, {
				iconId: this._renderContext.icon,
				height: 30,
				width: 30,
				className: className });
		};

		VisualItem.prototype._renderIconRef = function _renderIconRef() {
			this._iconRef = React.createRef();
			return React.createElement('div', { ref: this._iconRef });
		};

		VisualItem.prototype._appendIconNode = function _appendIconNode() {
			if (this._iconRef && this._iconRef.current) {
				var item = this.state.item;
				var placeholderIcon = item.placeholderIcon;


				var imgStr = '<img src="' + placeholderIcon + '"></img>';
				var $child = $(imgStr);

				$child.addClass('is-small');
				$child.addClass('ba-common-svgIcon');
				$child.css({
					height: '30px',
					width: '30px',
					'vertical-align': 'bottom'
				});
				this._iconRef.current.appendChild($child[0]);
			}
		};

		VisualItem.prototype._renderVisLabel = function _renderVisLabel() {
			var className = 'vis-custom-vis-label' + (this._renderContext.isDisabled ? ' no-sdk' : '');

			return React.createElement(
				FlexLayout,
				{
					fullHeight: true,
					direction: 'column',
					alignItems: 'center',
					title: this._renderContext.description,
					'aria-label': this._renderContext.description
				},
				React.createElement(
					FlexItem,
					null,
					React.createElement(Label, {
						className: className,
						label: this._renderContext.description })
				)
			);
		};

		VisualItem.prototype._renderContextMenu = function _renderContextMenu() {
			var item = this.state.item;


			if (!this.state.isContextMenuOpen || !this.target || this.targetName && this.targetName !== item.name) {
				return;
			}

			return this._getContextMenuContent();
		};

		VisualItem.prototype._getContextMenuContent = function _getContextMenuContent() {
			var placement = 'bottomRight';
			var align = 'left';

			return React.createElement(ContextMenuWrapper, {
				theme: true,
				placement: placement,
				align: align,
				triggerNode: this.target,
				domNodeToAttachTo: document.body,
				onClose: this.onClose.bind(this),
				onChange: this.onChange.bind(this),
				contextMenuItems: this._getContextMenuItems() });
		};

		VisualItem.prototype.onClose = function onClose() {
			if (this.target) {
				$(this.target).removeClass('open-context-menu');
			}
			this.target = undefined;
			this.targetName = undefined;
			this.setState({
				isContextMenuOpen: false
			});
		};

		VisualItem.prototype.onChange = function onChange(name, value) {
			if (value === 'delete') {
				this.setState({ openDeleteDialog: true });
			} else if (value === 'update') {
				var customVisAction = this.props.customVisAction;
				var item = this.state.item;

				if (customVisAction.openSelectBundleFileDialog) {
					customVisAction.openSelectBundleFileDialog(item);
				}
			}
			this.onClose();
		};

		VisualItem.prototype.renderDeleteDialog = function renderDeleteDialog() {
			var _this2 = this;

			var dialogProps = {
				size: 'small',
				width: '20px',
				minWidth: '450px',
				maxWidth: '500px',
				clickaway: false,
				theme: 'ba-theme-default',
				startingFocusIndex: 1
			};
			return React.createElement(
				'div',
				null,
				this.state.openDeleteDialog && React.createElement(
					Dialog,
					_extends({}, dialogProps, { onClose: function onClose() {
							_this2.setState({ openDeleteDialog: false });
						} }),
					React.createElement(
						Dialog.Header,
						null,
						StringResources.get('extVisDeleteDialogTitle')
					),
					React.createElement(
						Dialog.Body,
						null,
						StringResources.get('extVisDeleteDialogBody')
					),
					React.createElement(
						Dialog.Footer,
						null,
						React.createElement(Dialog.Button, { primary: true, label: StringResources.get('extVisCustomDelete'), onClick: function onClick() {
								_this2.deleteCustomVisualization();
							} }),
						React.createElement(Dialog.Button, { label: StringResources.get('dlg_cancel'), onClick: function onClick() {
								_this2.setState({ openDeleteDialog: false });
							} })
					)
				)
			);
		};

		VisualItem.prototype.deleteCustomVisualization = function deleteCustomVisualization() {
			this.setState({ openDeleteDialog: false });
			var onContextMenuChange = this.props.onContextMenuChange;
			var item = this.state.item;

			onContextMenuChange(item, 'delete');
		};

		VisualItem.prototype._getContextMenuItems = function _getContextMenuItems() {
			var updateItem = [{
				id: 'update',
				value: 'update',
				label: StringResources.get('extVisCustomUpdate')
			}];

			var deleteItem = [{
				id: 'delete',
				value: 'delete',
				label: StringResources.get('extVisCustomDelete')
			}];

			var sepator = {};
			return [{ items: updateItem }, sepator, { items: deleteItem }];
		};

		VisualItem.prototype._handleOnClick = function _handleOnClick(event) {
			if (this.state.isContextMenuOpen) {
				if (this.target) {
					$(this.target).removeClass('open-context-menu');
				}
				this.target = undefined;
				this.targetName = undefined;
				this.setState({
					isContextMenuOpen: false
				});
			} else {
				var $node = $(event.target);
				$node = $node.closest('.vis-custom-menu-overflow-anchor');
				$node.addClass('open-context-menu');
				this.target = $node[0];
				this.targetName = $node.data('name');
				this.setState({
					isContextMenuOpen: true
				});
			}
		};

		VisualItem.prototype._findChildVisCustomVisNode = function _findChildVisCustomVisNode() {
			return this._rootRef.current ? $(this._rootRef.current).find('.prop-item') : null;
		};

		return VisualItem;
	}(Component);

	VisualItem.propTypes = {
		item: PropTypes.object.isRequired,
		iconsFeature: PropTypes.object.isRequired,
		handlers: PropTypes.shape({
			componentDidMountCallback: PropTypes.func.isRequired,
			componentWillUnmountCallback: PropTypes.func.isRequired,
			isSchematicType: PropTypes.func.isRequired,
			isSchematicTypePreview: PropTypes.func.isRequired
		}).isRequired,
		openSelectBundleFileDialog: PropTypes.func.isRequired,
		onContextMenuChange: PropTypes.func,
		customVisAction: PropTypes.object.isRequired,
		menuIcon: PropTypes.object
	};

	VisualItem.defaultProps = {
		onContextMenuChange: function onContextMenuChange() {},
		openSelectBundleFileDialog: function openSelectBundleFileDialog() {},
		menuIcon: menuOverflow_24
	};

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