analytics/webcontent/bi/js/dashboard-analytics/dialogs/AutobinDialog.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: Dashboard (C) Copyright IBM Corp. 2018, 2020
 * 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', 'underscore', '../widgets/livewidget/nls/StringResources', 'react', 'react-dom', 'ca-ui-toolkit'], function (View, _, stringResources, React, ReactDOM, Toolkit) {
	/* eslint react/prop-types: 0 */ // TODO: Remove once we have prop-types brought in from glass.

	var ToggleSwitch = Toolkit.ToggleSwitch;
	var Label = Toolkit.Label;
	var NumberInput = Toolkit.NumberInput;


	var minNumberOfBins = 5;
	var maxNumberOfBins = 100;

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

		function TitleDiv() {
			_classCallCheck(this, TitleDiv);

			return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
		}

		TitleDiv.prototype.componentDidUpdate = function componentDidUpdate() {
			this.props.setFocusOnNumberInput();
		};

		TitleDiv.prototype.render = function render() {
			var _this2 = this;

			var titleLabel = stringResources.get('autoBinActionText');
			var binCountLabel = stringResources.get('propAutoBinCount');
			var titleId = 'ag-toggle-switch';
			var binCountId = 'ag-number-input';
			var toggle = React.createElement(ToggleSwitch, {
				checked: this.props.toggleChecked,
				onChange: this.props.onToggleChange,
				small: true,
				'aria-labelledby': titleId
			});
			var numberInput = React.createElement(NumberInput, {
				className: 'numberOfBinsInput',
				value: this.props.numberOfBins,
				max: maxNumberOfBins,
				min: minNumberOfBins,
				hasValidationError: !this.props.validateNumberOfBinsInput(this.props.numberOfBins),
				onChange: function onChange(n) {
					return _this2.props.numberOfBinsChanged(n);
				},
				disabled: !this.props.toggleChecked,
				ref: this.props.numberInputRef
			});
			return React.createElement(
				'div',
				{ className: 'content' },
				React.createElement(
					'div',
					{ className: 'selectionRow' },
					React.createElement(Label, {
						id: titleId,
						className: 'selectionlabel',
						label: titleLabel
					}),
					toggle
				),
				React.createElement(
					'div',
					{ className: 'selectionRow' },
					React.createElement(Label, {
						id: binCountId,
						className: 'selectionlabel',
						label: binCountLabel
					}),
					numberInput
				)
			);
		};

		return TitleDiv;
	}(React.Component);

	/*
 * Class to render the react flyout components
 */


	var ReactComponents = function (_React$Component2) {
		_inherits(ReactComponents, _React$Component2);

		/*
  * The props hold a state that should be used as this classes state.
  * When the state changes the component gets re-rendered. So when the
  * toggle state or checkbox state changes we update the state to re-render
  * the component while also calling a callback to tell the parent flyout
  * of the event.
  */
		function ReactComponents(props) {
			_classCallCheck(this, ReactComponents);

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

			_this3.state = _.clone(props.state);
			_this3.debouncedAutobinTrigger = _this3.props.getDebouncedAutobinTrigger();
			return _this3;
		}
		/*
  * Toggle switch state changed.
  */


		ReactComponents.prototype.toggleChanged = function toggleChanged() {
			var newState = _.extend({}, this.state, { toggleChecked: !this.state.toggleChecked });
			this.setState(newState);
			this.props.onToggleStateChanged(newState);
		};

		ReactComponents.prototype.validateNumberOfBinsInput = function validateNumberOfBinsInput(newNumber) {
			if (this.toggleChecked === false) {
				return true;
			}
			var parsed = parseInt(newNumber, 10);
			if (isNaN(parsed)) {
				return false;
			}
			if (parsed > maxNumberOfBins || parsed < minNumberOfBins) {
				return false;
			}
			return true;
		};

		ReactComponents.prototype.numberOfBinsChanged = function numberOfBinsChanged(newNumber) {
			if (this.state.toggleChecked == false) {
				return;
			}
			var parsed = parseInt(newNumber, 10);
			if (isNaN(parsed)) {
				return;
			}

			if (this.state.numberOfBins != parsed) {
				this.setState({ numberOfBins: parsed });
				if (parsed <= maxNumberOfBins && parsed >= minNumberOfBins) {
					this.debouncedAutobinTrigger(parsed);
				}
			}
			this.props.setFocusOnNumberInput();
		};

		ReactComponents.prototype.render = function render() {
			var _this4 = this;

			return React.createElement(TitleDiv, { onToggleChange: function onToggleChange() {
					return _this4.toggleChanged();
				},
				setFocusOnNumberInput: function setFocusOnNumberInput() {
					return _this4.props.setFocusOnNumberInput();
				},
				numberInputRef: this.props.numberInputRef,
				toggleChecked: this.state.toggleChecked,
				numberOfBins: this.state.numberOfBins,
				validateNumberOfBinsInput: this.validateNumberOfBinsInput,
				numberOfBinsChanged: function numberOfBinsChanged(newNumber) {
					return _this4.numberOfBinsChanged(newNumber);
				} });
		};

		return ReactComponents;
	}(React.Component);

	/**
  * @classdesc  Creates an autobin dialog
  *
  * @public
  *
  * @param {object} options.slot - The data slot
  * @param {object} options.widget - The widget
  */

	var AutobinView = function (_View) {
		_inherits(AutobinView, _View);

		function AutobinView() {
			_classCallCheck(this, AutobinView);

			for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
				args[_key] = arguments[_key];
			}

			var _this5 = _possibleConstructorReturn(this, _View.call.apply(_View, [this].concat(args)));

			var options = args[0] || {};
			_this5._iHeight = '212';
			_this5._iWidth = '290';
			_this5.height = options.state.height;
			_this5.width = options.state.width;
			_this5.defaultNumberOfBins = options.state.defaultNumberOfBins;
			_this5.autoBinEventHandler = options.actions.apply;
			_this5.numberInputRef = React.createRef();
			var binning = options.state.binningStateCb();
			if (binning && binning.bins) {
				_this5.binningState = {
					numberOfBins: binning.bins
				};
			}
			return _this5;
		}

		AutobinView.prototype.remove = function remove() {
			if (this.$el) {
				ReactDOM.unmountComponentAtNode(this.$el[0]);
			}
			this.viewState = null;
			return _View.prototype.remove.call(this);
		};

		AutobinView.prototype.render = function render() {
			var _this6 = this;

			this.$el.addClass('popoverDialogContainer autoBinAction').height(this._iHeight + 'px').width(this._iWidth + 'px');

			var numberOfBins;
			if (this.binningState && this.binningState.numberOfBins) {
				numberOfBins = this.binningState.numberOfBins;
			} else {
				numberOfBins = this.defaultNumberOfBins;
			}

			this.reactComponents = ReactDOM.render(React.createElement(ReactComponents, {
				state: {
					'toggleChecked': this.binningState ? true : false,
					'numberOfBins': numberOfBins
				},
				numberInputRef: this.numberInputRef,
				onToggleStateChanged: function onToggleStateChanged(newState) {
					return _this6.onToggleChange(newState);
				},
				setFocusOnNumberInput: function setFocusOnNumberInput() {
					return _this6._setFocusOnNumberInput();
				},
				getDebouncedAutobinTrigger: function getDebouncedAutobinTrigger() {
					return _this6.getDebouncedAutobinTrigger();
				} }), this.$el[0]);

			return this;
		};
		/**
   * @override overrides the setFocus from authoring toolbar class that is invoked from Flyout class
   * focus will be set in the input if the auto group is in enabled state (see _setFocusOnNumberInput) 
   */


		AutobinView.prototype.setFocus = function setFocus() {
			this._setFocusOnNumberInput();
		};

		AutobinView.prototype.onToggleChange = function onToggleChange(reactState) {
			if (this.binningState) {
				this.binningState = null;
			} else {
				this.binningState = {
					numberOfBins: reactState.numberOfBins
				};
			}
			if (this.binningState) {
				this.autoBinEventHandler(this.binningState);
			} else {
				this.autoBinEventHandler(null);
			}
		};

		AutobinView.prototype.getDebouncedAutobinTrigger = function getDebouncedAutobinTrigger() {
			var _this7 = this;

			return _.debounce(function (numberOfBins) {
				return _this7.numberOfBinsChanged(numberOfBins);
			}, 500);
		};

		AutobinView.prototype.numberOfBinsChanged = function numberOfBinsChanged(numberOfBins) {
			if (this.binningState) {
				this.binningState.numberOfBins = numberOfBins;
				this.autoBinEventHandler(this.binningState);
			}
		};

		/**
   * calls focus from toolkit NumberInput component if the auto-group is enabled
   */


		AutobinView.prototype._setFocusOnNumberInput = function _setFocusOnNumberInput() {
			if (this.binningState) {
				this.numberInputRef && this.numberInputRef.current.focus();
			}
		};

		return AutobinView;
	}(View);

	return AutobinView;
});
//# sourceMappingURL=AutobinDialog.js.map