odeum-app
Version:
ODEUM Code Web App foundation modules
289 lines (240 loc) • 11.3 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
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 _QuickNavigationStyles = require('./QuickNavigationStyles');
var _Tab = require('../Tabs/Tab');
var _Tab2 = _interopRequireDefault(_Tab);
var _Menu = require('../Menu/Menu');
var _Menu2 = _interopRequireDefault(_Menu);
var _Functions = require('../utils/Functions');
var _odeumUi = require('odeum-ui');
var _HeaderButton = require('./HeaderButton');
var _HeaderButton2 = _interopRequireDefault(_HeaderButton);
var _HelpReducer = require('../utils/HelpReducer');
var _Protected = require('../Login/Protected');
var _Protected2 = _interopRequireDefault(_Protected);
var _Page = require('../Menu/Page');
var _Page2 = _interopRequireDefault(_Page);
var _SwipeEvents = require('./SwipeEvents');
var _SwipeEvents2 = _interopRequireDefault(_SwipeEvents);
var _Help = require('../Help/Help');
var _Help2 = _interopRequireDefault(_Help);
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 QuickNavigation = function (_Component) {
_inherits(QuickNavigation, _Component);
function QuickNavigation(props) {
_classCallCheck(this, QuickNavigation);
var _this = _possibleConstructorReturn(this, (QuickNavigation.__proto__ || Object.getPrototypeOf(QuickNavigation)).call(this, props));
_this.showQuickNavButton = function () {
_this.setState({ quickButton: true });
};
_this.hideQuickNavButton = function () {
_this.setState({ quickButton: false });
};
_this.helpClick = function () {
_this.setState({ showHelp: true, SmallScreen: false });
};
_this.openNav = function (e) {
e.stopPropagation();
if (_this.state.showHelp === true) _this.setState({ SmallScreen: false, showHelp: false });else _this.setState({ SmallScreen: !_this.state.SmallScreen });
};
_this.tabClick = function (id, helpID) {
return function (e) {
(0, _HelpReducer.SetHelpID)(helpID);
var activeTab = { tab: parseInt(e.target.id, 10), menu: _this.state.activeMenu };
_this.setState({ SmallScreen: false, activeTab: activeTab });
};
};
_this.menuClick = function () {
return function (e) {
e.stopPropagation();
};
};
_this.setActiveMenu = function (index, closeNav) {
return function (e) {
e.preventDefault();
e.stopPropagation();
_this.setState({ activeMenu: index, SmallScreen: !closeNav });
};
};
_this.activeTab = function (tab, menu) {
return tab === _this.state.activeTab.tab && menu === _this.state.activeTab.menu ? 'true' : 'false';
};
_this.renderProtectedMenu = function (menu, index) {
if (menu.type === _Protected2.default) {
if (_this.props.loggedIn === true) {
var childs = _react2.default.Children.toArray(menu.props.children);
return childs.map(function (m, i) {
return _this.renderMenuItem(m, { index: index, protected: i });
});
}
} else return _this.renderMenuItem(menu, index);
};
_this.indexGen = function (index) {
return index.protected !== undefined ? index.index + index.protected : index;
};
_this.renderMenuItem = function (menu, index) {
var icon = menu.props.icon ? menu.props.icon : 'menu';
var route = menu.props.route !== undefined ? menu.props.route : (0, _Functions.convertLabelToRoute)(menu.props.label);
var activeMenu = _this.state.activeMenu;
var indexGen = _this.indexGen,
setActiveMenu = _this.setActiveMenu;
if (menu.type === _Menu2.default) {
if (menu.props.children.props !== undefined) {
if (menu.props.children.props.label !== undefined) {
var childRoute = menu.props.children.props.route ? menu.props.children.props.route : (0, _Functions.convertLabelToRoute)(menu.props.children.props.label);
route = route + childRoute;
}
}
}
if (_this.props.loggedIn && menu.props.route === _this.props.RedirectTo) {
return null; //Temporary, should return Logout
}
if (route === '' || route === '/') {
return _react2.default.createElement(
_QuickNavigationStyles.MenuItem,
{ key: indexGen(index),
index: indexGen(index),
activeMenu: indexGen(activeMenu),
onClick: setActiveMenu(index, true) },
_react2.default.createElement(
_QuickNavigationStyles.Link,
{ to: route },
_react2.default.createElement(_odeumUi.Icon, { icon: 'home', iconSize: 28, style: { marginBottom: '4px', color: 'inherit' } }),
'Home'
)
);
} else {
if (menu.type === _Menu2.default || menu.type === _Page2.default) {
if (_react2.default.Children.toArray(menu.props.children)[0].type === _Tab2.default && _react2.default.Children.toArray(menu.props.children).length > 1) return _react2.default.createElement(
_QuickNavigationStyles.MenuItem,
{ key: indexGen(index),
index: indexGen(index),
activeMenu: indexGen(activeMenu),
onClick: setActiveMenu(index, false) },
_react2.default.createElement(_odeumUi.Icon, { icon: icon, iconSize: 28, style: { marginBottom: '4px', color: 'inherit' } }),
menu.props.label
);else {
return _react2.default.createElement(
_QuickNavigationStyles.MenuItem,
{ key: indexGen(index),
index: indexGen(index),
activeMenu: indexGen(activeMenu),
onClick: setActiveMenu(index, true) },
_react2.default.createElement(
_QuickNavigationStyles.Link,
{ to: route },
_react2.default.createElement(_odeumUi.Icon, { icon: icon, iconSize: 28, style: { marginBottom: '4px', color: 'inherit' } }),
menu.props.label
)
);
}
}
}
};
_this.renderTabItem = function (tab, menu, index) {
var menuRoute = menu.props.route !== undefined ? menu.props.route : (0, _Functions.convertLabelToRoute)(menu.props.label);
var route = tab.props.route !== undefined ? menuRoute + tab.props.route : menuRoute + (0, _Functions.convertLabelToRoute)(tab.props.label);
return _react2.default.createElement(
_QuickNavigationStyles.TabItem,
{ key: index.protected ? index.index + index.protected : index, helpid: tab.props.helpID, activetab: _this.activeTab(index, _this.state.activeMenu), id: index, to: route, onClick: _this.tabClick(index, tab.props.helpID) },
tab.props.label ? tab.props.label : tab.props.route
);
};
_this.state = {
quickButton: true,
SmallScreen: false,
showButton: true,
showHelp: false,
activeMenu: 0,
activeTab: {
tab: 0,
menu: 0
}
};
return _this;
}
_createClass(QuickNavigation, [{
key: 'renderTabs',
value: function renderTabs() {
var _this2 = this;
if (this.state.activeMenu.protected !== undefined) {
var ProtectedMenu = this.props.menus[this.state.activeMenu.index].props.children;
return _react2.default.Children.toArray(ProtectedMenu[this.state.activeMenu.protected].props.children).map(function (tab, index) {
return tab.type === _Tab2.default ? _this2.renderTabItem(tab, ProtectedMenu[_this2.state.activeMenu.protected], { index: _this2.state.activeMenu.index, protected: index }) : undefined;
});
} else {
return _react2.default.Children.toArray(this.props.menus[this.state.activeMenu].props.children).map(function (tab, index) {
return tab.type === _Tab2.default ? _this2.renderTabItem(tab, _this2.props.menus[_this2.state.activeMenu], index) : undefined;
});
}
}
}, {
key: 'render',
value: function render() {
var _this3 = this;
var _state = this.state,
quickButton = _state.quickButton,
SmallScreen = _state.SmallScreen,
showHelp = _state.showHelp;
return _react2.default.createElement(
_SwipeEvents2.default,
{ onSwipedUp: this.showQuickNavButton, onSwipedDown: this.hideQuickNavButton },
_react2.default.createElement(_Help2.default, { showHelp: showHelp, small: true }),
quickButton ? _react2.default.createElement(
_QuickNavigationStyles.QuickNavButton,
{ onClick: this.openNav },
_react2.default.createElement(_odeumUi.Icon, { icon: 'menu', color: 'white', iconSize: 18, style: { marginRight: '8px' } }),
'Quick Menu'
) : _react2.default.createElement(_QuickNavigationStyles.QuickNavButtonHidden, null),
_react2.default.createElement(
_QuickNavigationStyles.QuickNavContainer,
{ helpOpen: showHelp, SmallScreen: SmallScreen, onClick: this.openNav },
_react2.default.createElement(
_QuickNavigationStyles.QuickNavMenu,
{ SmallScreen: SmallScreen, onClick: this.menuClick() },
_react2.default.createElement(
_QuickNavigationStyles.Header,
null,
_react2.default.createElement(
_QuickNavigationStyles.SubHeader,
null,
_react2.default.createElement(_HeaderButton2.default, { icon: 'help', onClick: this.helpClick }),
_react2.default.createElement(_HeaderButton2.default, { icon: 'search' })
),
_react2.default.createElement(
'div',
{ style: { alignSelf: 'center', justifyContent: 'center' } },
'Quick Navigation'
),
_react2.default.createElement(_HeaderButton2.default, { icon: 'close', onClick: this.openNav })
),
_react2.default.createElement(_QuickNavigationStyles.Spacer, null),
_react2.default.createElement(
_QuickNavigationStyles.TabList,
null,
this.renderTabs()
),
_react2.default.createElement(_QuickNavigationStyles.Spacer, null),
_react2.default.createElement(
_QuickNavigationStyles.MenuList,
null,
_react2.default.Children.toArray(this.props.menus).map(function (menu, index) {
return _this3.renderProtectedMenu(menu, index);
})
)
)
)
);
}
}]);
return QuickNavigation;
}(_react.Component);
exports.default = QuickNavigation;