odeum-app/lib/components/Help/HelpPopUp.js

ODEUM Code Web App foundation modules

'use strict';

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

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

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _HelpStyles = require('./HelpStyles');

var _reactTransitionGroup = require('react-transition-group');

var _reactRouterDom = require('react-router-dom');

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; }
// import { GetHelpID } from '../utils/HelpReducer'


var HelpPopup = function (_PureComponent) {
	_inherits(HelpPopup, _PureComponent);

	function HelpPopup() {
		var _ref;

		var _temp, _this, _ret;

		_classCallCheck(this, HelpPopup);

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

		return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = HelpPopup.__proto__ || Object.getPrototypeOf(HelpPopup)).call.apply(_ref, [this].concat(args))), _this), _this.onClickOutside = function (e) {
			e.stopPropagation();
			if (_this.props.openHelp) {
				if (_this.node) {
					if (!_this.node.contains(e.target)) {
						_this.props.handleHelp();
						document.removeEventListener('click', _this.onClickOutside, false);
					}
				}
			}
		}, _this.setHelpPopUpRef = function (node) {
			_this.node = node;
		}, _temp), _possibleConstructorReturn(_this, _ret);
	}

	_createClass(HelpPopup, [{
		key: 'render',
		value: function render() {
			var _this2 = this;

			var helpObj = this.props.helpObj;


			return _react2.default.createElement(
				_reactTransitionGroup.Transition,
				{ 'in': this.props.openHelp, timeout: 300 },
				function (state) {
					return _react2.default.createElement(
						_HelpStyles.HelpPopUp,
						{ style: _extends({}, _HelpStyles.transitionStyles[state]), small: _this2.props.small, openHelp: _this2.props.openHelp, innerRef: _this2.props.innerRef },
						_react2.default.createElement(HelpComponent, {
							orientation: 'column',
							titleText: 'Frequently Asked Questions',
							alignment: 'left',
							help_title: helpObj ? helpObj.locale_content['en'].help_title : "Loading...",
							help_description: helpObj ? helpObj.locale_content['en'].help_description : "Loading...",
							help_title2: helpObj ? helpObj.locale_content['en'].help_title : "Loading...",
							help_description2: "Lorem ipsum dolor sit amet, vis elitr doctus similique id, te moderatius appellantur mea. Libris mucius explicari ea quo. Timeam voluptua cu mel. Ei fastidii interesset nam. Vix partem mentitum id.Lorem ipsum dolor sit amet, vis elitr doctus similique id, te moderatius appellantur mea. Libris mucius explicari ea quo. Timeam voluptua cu mel. Ei fastidii interesset nam. Vix partem mentitum id." }),
						_react2.default.createElement(HelpComponent, {
							orientation: 'row',
							titleText: 'Are you still missing answers?',
							alignment: 'center',
							help_title: 'More answers',
							help_description: "See the rest of the FAQ",
							help_title2: "Contact Odeum support",
							help_description2: "Number: 88 88 88 88\nEmail: support@odeum.dk",
							link: '/i-have-help/' })
					);
				}
			);
		}
	}]);

	return HelpPopup;
}(_react.PureComponent);

exports.default = HelpPopup;


var HelpComponent = function HelpComponent(props) {
	return _react2.default.createElement(
		_react2.default.Fragment,
		null,
		_react2.default.createElement(
			_HelpStyles.HelpPopUpTitleText,
			null,
			props.titleText
		),
		_react2.default.createElement(
			_HelpStyles.DescriptionDivStyle,
			{ orientation: props.orientation, alignment: props.alignment },
			_react2.default.createElement(
				_HelpStyles.HelpComponentItem,
				{ orientation: props.orientation },
				_react2.default.createElement(
					_HelpStyles.Title,
					null,
					props.help_title
				),
				props.help_description
			),
			props.orientation === 'row' ? _react2.default.createElement(_HelpStyles.VerticalDivider, null) : _react2.default.createElement(_HelpStyles.HorizontalDivider, null),
			_react2.default.createElement(
				_HelpStyles.HelpComponentItem,
				{ orientation: props.orientation },
				_react2.default.createElement(
					_HelpStyles.Title,
					null,
					props.help_title2
				),
				props.link ? _react2.default.createElement(
					_reactRouterDom.Link,
					{ to: props.link },
					props.help_description2
				) : props.help_description2
			)
		)
	);
};