cpui-components/lib/components/CPToolbarMenu/CPToolbarMenu.js

'use strict';

Object.defineProperty(exports, "__esModule", {
	value: true
});
exports.CPToolbarMenu = undefined;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _Transition = require('react-transition-group/Transition');

var _Transition2 = _interopRequireDefault(_Transition);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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; }

var CPToolbarMenu = exports.CPToolbarMenu = function (_Component) {
	_inherits(CPToolbarMenu, _Component);

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

		var _this = _possibleConstructorReturn(this, (CPToolbarMenu.__proto__ || Object.getPrototypeOf(CPToolbarMenu)).call(this, props));

		_this.handleOpen = function (openEvent) {
			_this.setState({ isOpen: !_this.state.isOpen });
		};

		_this.render = function () {
			var id = _this.props.id;
			var isOpen = _this.state.isOpen;


			return _react2.default.createElement(
				'div',
				{ id: id, className: 'cp-Toolbar-item cp-Toolbar-item--wide cp-Toolbar-item--withMenu' },
				_react2.default.createElement(
					'a',
					{ href: '#myAccountMenu', onClick: _this.handleOpen, className: 'cp-Toolbar-itemLink cp-Toolbar-myAccount ' + (isOpen ? 'is-open' : ''), 'aria-label': 'Open ' + _this.props.title },
					_react2.default.createElement(
						'strong',
						null,
						_this.props.title
					)
				),
				_this.renderMenu()
			);
		};

		_this.renderMenu = function () {
			var _this$props = _this.props,
			    id = _this$props.id,
			    options = _this$props.options,
			    transitionTimeout = _this$props.transitionTimeout;
			var isOpen = _this.state.isOpen;

			var transitionProps = { in: isOpen, timeout: transitionTimeout };

			var optionDivs = options.map(function (optionName, index) {
				var optionId = id + 'Option' + index;
				return _react2.default.createElement(
					'li',
					{ key: index, className: 'cp-NavMenuList-item' },
					_react2.default.createElement(
						'a',
						{ href: '#', id: optionId, className: 'cp-NavMenuList-itemLink cp-OpenPopOver' },
						optionName
					)
				);
			});
			return _react2.default.createElement(
				_Transition2.default,
				transitionProps,
				function (state) {
					return _react2.default.createElement(
						'div',
						{ className: 'cp-Toolbar-menu cp-Toolbar-menu--flipped toolbarMenu-fade-' + state },
						_react2.default.createElement(
							'ol',
							{ className: 'cp-NavMenuList' },
							optionDivs
						)
					);
				}
			);
		};

		_this.state = {
			isOpen: false
		};
		return _this;
	}

	return CPToolbarMenu;
}(_react.Component);

CPToolbarMenu.propTypes = {
	/** isOpen sets the standard state of the ActionMenu dropdown */
	isOpen: _propTypes2.default.bool,
	/** options sets the choices presented in the ActionMenu dropdown */
	options: _propTypes2.default.array.isRequired,
	title: _propTypes2.default.string,
	type: _propTypes2.default.string,
	transitionTimeout: _propTypes2.default.oneOfType([_propTypes2.default.shape({ enter: _propTypes2.default.number, exit: _propTypes2.default.number }), _propTypes2.default.number])
};
CPToolbarMenu.defaultProps = {
	title: "Menu",
	transitionTimeout: 240,
	type: "normal",
	onChange: function onChange(e) {}
};
exports.default = CPToolbarMenu;