analytics/webcontent/bi/js/dashboard-analytics/features/widget/conditionalFormatting/properties/IconPickerComponent.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 _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } 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: 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', 'prop-types', 'ca-ui-toolkit', 'dashboard-analytics/lib/@waca/core-client/js/core-client/ui/KeyCodes'], function (React, ReactDOM, PropTypes, Toolkit, KeyCodes) {
	var _class, _temp;

	var iconpickerClassName = 'iconpicker';
	var Flyout = Toolkit.Flyout,
	    SVGIcon = Toolkit.SVGIcon,
	    propsUtils = Toolkit.propsUtils,
	    lodash = Toolkit.lodash;
	var sanitize = propsUtils.sanitize;
	var uniqueId = lodash.uniqueId;
	var Component = React.Component;

	/**
 * @class IconPickerComponent
 * @classdesc React component to display a flyout containing selectable icons
 */

	var IconPickerComponent = (_temp = _class = function (_Component) {
		_inherits(IconPickerComponent, _Component);

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

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

			_this._displayIcon = function (icon, index) {
				return React.createElement(
					'div',
					{ key: index,
						tabIndex: '0' // Make it keyboard focusable
						, className: iconpickerClassName + '__cell',
						onClick: function onClick() {
							return _this._handleSelect(icon);
						},
						onKeyDown: function onKeyDown(e) {
							return _this._handleKey(e, icon);
						},
						title: icon.label
					},
					React.createElement(SVGIcon, {
						iconId: icon.id,
						alt: icon.label,
						ariaLabelledby: uniqueId('icon-picker-svg'),
						verticalAlign: 'inherit'
					})
				);
			};

			_this.state = { open: true };
			_this._handleClose = _this._handleClose.bind(_this);
			_this._handleSelect = _this._handleSelect.bind(_this);
			_this._handleKey = _this._handleKey.bind(_this);
			_this._id = uniqueId('icon-picker__');
			return _this;
		}

		IconPickerComponent.prototype.render = function render() {
			var open = this.state.open;

			var _props = this.props,
			    className = _props.className,
			    style = _props.style,
			    flyoutExtraOptions = _props.flyoutExtraOptions,
			    triggerNode = _props.triggerNode,
			    domNodeToAttachTo = _props.domNodeToAttachTo,
			    others = _objectWithoutProperties(_props, ['className', 'style', 'flyoutExtraOptions', 'triggerNode', 'domNodeToAttachTo']);

			var orientation = this.props.orientation;
			if (typeof orientation === 'undefined') {
				orientation = document.body.dir === 'rtl' ? 'bottomLeft' : 'bottomRight';
			}

			return React.createElement(
				'div',
				_extends({}, sanitize(others, IconPickerComponent), { className: iconpickerClassName + ' ' + className, style: style }),
				open && React.createElement(
					Flyout,
					_extends({
						id: this._id + '-flyout',
						'data-tid': 'icon-picker__flyout'
					}, flyoutExtraOptions, {
						'aria-hidden': open,
						placement: orientation,
						domNodeToAttachTo: domNodeToAttachTo,
						hideArrow: true,
						offset: 2,
						onClose: this._handleClose,
						className: iconpickerClassName + '__flyout',
						triggerNode: triggerNode
					}),
					this.props.icons.map(this._displayIcon)
				)
			);
		};

		IconPickerComponent.prototype._handleClose = function _handleClose() {
			this.setState(function (state) {
				return { open: !state.open };
			});
			this.props.onClose && this.props.onClose();
		};

		IconPickerComponent.prototype._handleSelect = function _handleSelect(icon) {
			this.props.onIconSelected && this.props.onIconSelected(icon);
			// close the flyout after selection
			this.setState({ open: false });
		};

		IconPickerComponent.prototype._handleKey = function _handleKey(e, icon) {
			if (e.keyCode === KeyCodes.ENTER || e.keyCode === KeyCodes.SPACE) {
				this._handleSelect(icon);
				// Prevent browser's default action: space does a PageDown
				e.preventDefault();
			}
		};

		return IconPickerComponent;
	}(Component), _class.propTypes = {
		/** Icon objects containing id and label to be displayed */
		icons: PropTypes.array.isRequired,
		/** Function that will get called when selecting an icon */
		onIconSelected: PropTypes.func,
		/** Function that will get called when flyout is closed */
		onClose: PropTypes.func,
		/** Flyout.propTypes.placement */
		orientation: Flyout.propTypes.placement,
		/** Custom class name(s) */
		className: PropTypes.string,
		/** Custom css styles */
		style: PropTypes.object,
		/** Trigger node to orient the flyout to. Defaults to the parent node of the flyout */
		triggerNode: PropTypes.object,
		/** Container node to place the flyout in */
		domNodeToAttachTo: PropTypes.object,
		/** Extra options to pass to Flyout */
		flyoutExtraOptions: PropTypes.object
	}, _class.defaultProps = {
		icons: [],
		className: '',
		style: {},
		flyoutExtraOptions: {}
	}, _temp);


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