analytics/webcontent/bi/js/dashboard-analytics/features/widget/conditionalFormatting/properties/IconPicker.js

'use strict';

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

/**
* Licensed Materials - Property of IBM
* IBM Cognos Products: Dashboard
* (C) Copyright IBM Corp. 2019
* US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
*/
define(['react', 'react-dom', './IconPickerComponent'], function (React, ReactDOM, IconPickerComponent) {

	/**
 * @class IconPicker
 * @classdesc Displays a flyout containing selectable icons
 * The icon picker flyout will automatically close when a selection is made or user clicks off/presses esc
 */
	var IconPicker = function () {
		/**
   * @param {Object} options The options object
   * @param {Array[Object]} options.icons An array of icon objects to display in icon picker flyout.
   * @param {String} options.icons.id The id reference of the icon that is loaded in dom.
   * @param {String} options.icons.label The accessible label to display for the icon.
   * @param {Object} options.containerNode The container node to attach the flyout to.
   * @param {Object} options.onIconSelected A function which is called when an icon is selected in the flyout.
   * @param {Object} options.onClose A function which is called when the flyout is closing.
   */
		function IconPicker(options) {
			_classCallCheck(this, IconPicker);

			this._icons = options.icons;
			this._containerNode = options.containerNode || document.body;
			this._onIconSelectedCallback = options.onIconSelected;
			this._onCloseCallback = options.onClose;

			this._flyoutHolderNode = null;
			this._handleIconSelected = this._handleIconSelected.bind(this);
			this.close = this.close.bind(this);
		}

		/**
  * @function IconPicker#open
  * @description Opens the icon picker flyout
  * @param {Object} triggerNode Node to orient the flyout to.
  * @return {Promise} Promise is resolved when icon picker flyout is rendered
  */


		IconPicker.prototype.open = function open(triggerNode) {
			var _this = this;

			if (this.isOpen()) {
				// All ready open
				return Promise.resolve();
			}
			return new Promise(function (resolve) {
				_this._flyoutHolderNode = document.createElement('div');
				_this._flyoutHolderNode.classList.add('flyout-holder');
				_this._containerNode.appendChild(_this._flyoutHolderNode);

				ReactDOM.render(React.createElement(IconPickerComponent, {
					icons: _this._icons,
					onIconSelected: _this._handleIconSelected,
					onClose: _this.close,
					orientation: 'bottomLeft',
					triggerNode: triggerNode,
					domNodeToAttachTo: _this._containerNode
				}), _this._flyoutHolderNode, function () {
					resolve();
				});
			});
		};

		/**
  * @function IconPicker#isOpen
  * @description Returns the current state of flyout
  * @return {Boolen} True if is open
  */


		IconPicker.prototype.isOpen = function isOpen() {
			return this._flyoutHolderNode != null;
		};

		/**
  * @function IconPicker#close
  * @description Closes the icon picker flyout. Automatically destroys the flyout.
  */


		IconPicker.prototype.close = function close() {
			if (this._onCloseCallback) {
				this._onCloseCallback();
			}
			this.destroy();
		};

		/**
  * @function IconPicker#destroy
  * @description Destroys the flyout and cleanup any resources
  */


		IconPicker.prototype.destroy = function destroy() {
			if (this._flyoutHolderNode) {
				ReactDOM.unmountComponentAtNode(this._flyoutHolderNode);
				this._containerNode.removeChild(this._flyoutHolderNode);
				this._flyoutHolderNode = null;
			}
		};

		IconPicker.prototype._handleIconSelected = function _handleIconSelected(icon) {
			if (this._onIconSelectedCallback) {
				this._onIconSelectedCallback(icon);
			}
			this.close();
		};

		return IconPicker;
	}();

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