analytics/webcontent/bi/js/gemini/features/dashboard/actions/alignAction/impl/AlignDialog.js

'use strict';

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. 2018, 2021
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 */
define(['../../../../../lib/@waca/core-client/js/core-client/ui/core/View', 'react', 'react-dom', 'ca-ui-toolkit', 'jquery', '../../../../../app/nls/StringResources', '../../../../../lib/@waca/dashboard-common/dist/lib/@ba-ui-toolkit/ba-graphics/dist/icons-js/align--horizontal-left_32', '../../../../../lib/@waca/dashboard-common/dist/lib/@ba-ui-toolkit/ba-graphics/dist/icons-js/align--horizontal-center_32', '../../../../../lib/@waca/dashboard-common/dist/lib/@ba-ui-toolkit/ba-graphics/dist/icons-js/align--horizontal-right_32', '../../../../../lib/@waca/dashboard-common/dist/lib/@ba-ui-toolkit/ba-graphics/dist/icons-js/align--vertical-top_32', '../../../../../lib/@waca/dashboard-common/dist/lib/@ba-ui-toolkit/ba-graphics/dist/icons-js/align--vertical-center_32', '../../../../../lib/@waca/dashboard-common/dist/lib/@ba-ui-toolkit/ba-graphics/dist/icons-js/align--vertical-bottom_32'], function (View, React, ReactDOM, UI_Toolkit, $, stringResources, iconAlignLeft, iconAlignCenter, iconAlignRight, iconAlignTop, iconAlignMiddle, iconAlignBottom) {
	var AlignDialog = View.extend({

		init: function init() {
			var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

			AlignDialog.inherited('init', this, arguments);
			this.action = options.actions ? options.actions.apply : options.action;
		},

		//@dodo convoluted that have to provide this function so that renderCallBack can be called.
		//Will fix this in dashboard-common/ui/AuthoringToolbar to pass in the authoringToolbar instance when instantiate an instance
		preload: function preload() {
			return Promise.resolve();
		},

		//@dodo convoluted that have to provide this function
		//Will fix this in dashboard-common/ui/AuthoringToolbar to pass in the authoringToolbar instance when instantiate an instance
		renderCallBack: function renderCallBack(authoringToolbar) {
			this.authoringToolbar = authoringToolbar;
			this.authoringToolbar.on('flyout:hide', this._unmountReactComponent.bind(this));
		},

		remove: function remove() {
			this._unmountReactComponent();
			this.authoringToolbar.off('flyout:hide', this._unmountReactComponent.bind(this));
			this.action = null;
			this.authoringToolbar = null;
			if (this.$container) {
				this.$container.remove();
				this.$container = null;
			}
			AlignDialog.inherited('remove', this, arguments);
		},

		_unmountReactComponent: function _unmountReactComponent() {
			//Unmount the React component when clicks anywhere in the dashboard to close the flyout
			if (this.$container) {
				ReactDOM.unmountComponentAtNode(this.$container[0]);
				this.$container = null;
			}
		},

		selectItem: function selectItem(value) {
			var _this2 = this;

			this.action(value);
			//this.onUpdate is actually bound to the AuthoringToolbar.hide function
			//When a value is selected, call this.onUpdate to destroy the flyout. So when the flyout is destroyed unmount the Reaact component
			return this.onUpdate().then(function () {
				if (_this2.$container) {
					ReactDOM.unmountComponentAtNode(_this2.$container[0]);
					_this2.$container = null;
				}
			});
		},

		render: function render() {
			var _this4 = this;

			var _this = this;
			return new Promise(function (resolve) {
				var Menu = UI_Toolkit.Menu;
				var MenuList = UI_Toolkit.Menu.List;

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

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

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

						_this3.state = {
							selected: {}
						};
						return _this3;
					}

					AlignMenuWidget.prototype._onChange = function _onChange(label, v) {
						var newSelection = {};
						var oldSelection = this.state.selected;

						for (var item in oldSelection) {
							if (oldSelection.hasOwnProperty(item)) {
								newSelection[item] = oldSelection[item];
							}
						}

						newSelection[label] = v;
						this.setState({ selected: newSelection });
						_this.selectItem(v);
					};

					AlignMenuWidget.prototype.render = function render() {
						return React.createElement(Menu, {
							onChange: this._onChange.bind(this),
							selected: this.state.selected
						}, [React.createElement(MenuList, {
							name: 'align',
							content: [{
								label: stringResources.get('alignWidgetLeft'),
								value: 'left',
								icon: iconAlignLeft.default
							}, {
								label: stringResources.get('alignWidgetCenter'),
								value: 'center',
								icon: iconAlignCenter.default
							}, {
								label: stringResources.get('alignWidgetRight'),
								value: 'right',
								icon: iconAlignRight.default
							}, {
								label: stringResources.get('alignWidgetTop'),
								value: 'top',
								icon: iconAlignTop.default
							}, {
								label: stringResources.get('alignWidgetMiddle'),
								value: 'middle',
								icon: iconAlignMiddle.default
							}, {
								label: stringResources.get('alignWidgetBottom'),
								value: 'bottom',
								icon: iconAlignBottom.default
							}]
						})]);
					};

					return AlignMenuWidget;
				}(React.Component);

				_this4.$container = $('<div></div>', { 'class': 'ba-theme-default selectionList' });
				_this4.$el.addClass('content').append(_this4.$container);
				ReactDOM.render(React.createElement(AlignMenuWidget), _this4.$container[0], resolve);
			});
		}

	});

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