react-sidenav-menu
Version:
1,124 lines (897 loc) • 66.4 kB
JavaScript
/*! react-sidenav-menu v0.5.1 | (c) 2019 Trend Micro Inc. | MIT | https://github.com/trendmicro-frontend/react-sidenav */
module.exports =
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 14);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
module.exports = require("react");
/***/ }),
/* 1 */
/***/ (function(module, exports) {
module.exports = require("classnames");
/***/ }),
/* 2 */
/***/ (function(module, exports) {
module.exports = require("prop-types");
/***/ }),
/* 3 */
/***/ (function(module, exports) {
// removed by extract-text-webpack-plugin
module.exports = {"sidenav":"sidenav-menu---sidenav---LAhfT","sub-menu-open":"sidenav-menu---sub-menu-open---2YWZR","subMenuOpen":"sidenav-menu---sub-menu-open---2YWZR","sub-menu-close":"sidenav-menu---sub-menu-close---1ud3G","subMenuClose":"sidenav-menu---sub-menu-close---1ud3G","level-1":"sidenav-menu---level-1---9t0sO","level1":"sidenav-menu---level-1---9t0sO","collapsed":"sidenav-menu---collapsed---259vT","sidenav-nav":"sidenav-menu---sidenav-nav---3XeC4","sidenavNav":"sidenav-menu---sidenav-nav---3XeC4","sidenav-navitem":"sidenav-menu---sidenav-navitem---1xrZi","sidenavNavitem":"sidenav-menu---sidenav-navitem---1xrZi","sidenav-subnav":"sidenav-menu---sidenav-subnav---1qfqY","sidenavSubnav":"sidenav-menu---sidenav-subnav---1qfqY","expanded":"sidenav-menu---expanded---1http","navicon":"sidenav-menu---navicon---26xNO","navtext":"sidenav-menu---navtext---1SwVp","expandable":"sidenav-menu---expandable---R2rPt","navitem":"sidenav-menu---navitem---VZYsH","sidenav-subnavitem":"sidenav-menu---sidenav-subnavitem---61_OK","sidenavSubnavitem":"sidenav-menu---sidenav-subnavitem---61_OK","selected":"sidenav-menu---selected---H0h0E","subnav-1":"sidenav-menu---subnav-1---36hE5","subnav1":"sidenav-menu---subnav-1---36hE5","selectedSubWrapper":"sidenav-menu---selectedSubWrapper---2g397","subchild-1":"sidenav-menu---subchild-1---VvW2f","subchild1":"sidenav-menu---subchild-1---VvW2f","subnav-2":"sidenav-menu---subnav-2---28F9A","subnav2":"sidenav-menu---subnav-2---28F9A","subchild-2":"sidenav-menu---subchild-2----owKM","subchild2":"sidenav-menu---subchild-2----owKM","subnav-3":"sidenav-menu---subnav-3---657M6","subnav3":"sidenav-menu---subnav-3---657M6","subchild-3":"sidenav-menu---subchild-3---1kbKH","subchild3":"sidenav-menu---subchild-3---1kbKH","toggle-wrapper":"sidenav-menu---toggle-wrapper---3LvAj","toggleWrapper":"sidenav-menu---toggle-wrapper---3LvAj","sidenav-toggle":"sidenav-menu---sidenav-toggle---2jO4Q","sidenavToggle":"sidenav-menu---sidenav-toggle---2jO4Q","highlighted":"sidenav-menu---highlighted---1H6Eo","expanded-icon":"sidenav-menu---expanded-icon---1JdvC","expandedIcon":"sidenav-menu---expanded-icon---1JdvC","expanded-icon-rotate":"sidenav-menu---expanded-icon-rotate---3juZq","expandedIconRotate":"sidenav-menu---expanded-icon-rotate---3juZq"};
/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var matchComponent = function matchComponent(Component) {
return function (c) {
// React Component
if (c.type === Component) {
return true;
}
// Matching componentType for SideNav, Nav, NavItem, NavIcon, NavText
if (c.props && c.props.componentType === Component) {
return true;
}
return false;
};
};
exports.default = matchComponent;
/***/ }),
/* 5 */
/***/ (function(module, exports) {
module.exports = require("chained-function");
/***/ }),
/* 6 */
/***/ (function(module, exports) {
module.exports = require("redux");
/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
"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 _chainedFunction = __webpack_require__(5);
var _chainedFunction2 = _interopRequireDefault(_chainedFunction);
var _classnames = __webpack_require__(1);
var _classnames2 = _interopRequireDefault(_classnames);
var _propTypes = __webpack_require__(2);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _react = __webpack_require__(0);
var _react2 = _interopRequireDefault(_react);
var _NavIcon = __webpack_require__(8);
var _NavIcon2 = _interopRequireDefault(_NavIcon);
var _NavText = __webpack_require__(9);
var _NavText2 = _interopRequireDefault(_NavText);
var _findComponent = __webpack_require__(17);
var _findComponent2 = _interopRequireDefault(_findComponent);
var _matchComponent = __webpack_require__(4);
var _matchComponent2 = _interopRequireDefault(_matchComponent);
var _index = __webpack_require__(3);
var _index2 = _interopRequireDefault(_index);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
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; } /* eslint jsx-a11y/click-events-have-key-events: 0 */
var NavItem = function (_React$PureComponent) {
_inherits(NavItem, _React$PureComponent);
function NavItem() {
var _ref;
var _temp, _this, _ret;
_classCallCheck(this, NavItem);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = NavItem.__proto__ || Object.getPrototypeOf(NavItem)).call.apply(_ref, [this].concat(args))), _this), _this.findNavIcon = (0, _findComponent2.default)(_NavIcon2.default), _this.findNavText = (0, _findComponent2.default)(_NavText2.default), _this.isNavItem = (0, _matchComponent2.default)(NavItem), _this.isNavIcon = (0, _matchComponent2.default)(_NavIcon2.default), _this.isNavText = (0, _matchComponent2.default)(_NavText2.default), _this.handleSelect = function (event) {
var _this$props = _this.props,
disabled = _this$props.disabled,
onSelect = _this$props.onSelect,
eventKey = _this$props.eventKey,
id = _this$props.id;
if (disabled) {
event.preventDefault();
return;
}
if (onSelect) {
onSelect(eventKey, id);
}
}, _this.addItems = function () {
var _this$props2 = _this.props,
eventKey = _this$props2.eventKey,
selected = _this$props2.selected,
children = _this$props2.children,
activeItems = _this$props2.activeItems,
highlightedItems = _this$props2.highlightedItems,
subLevel = _this$props2.subLevel,
addActiveItem = _this$props2.addActiveItem,
addHighlightedItem = _this$props2.addHighlightedItem;
_react2.default.Children.toArray(children).filter(function (child) {
return _react2.default.isValidElement(child) && _this.isNavItem(child);
}).map(function (child) {
var isActive = (child.props.eventKey === selected || child.props.eventKey === activeItems[subLevel + 1]) && activeItems[subLevel] !== eventKey;
var isChildSelected = child.props.eventKey === selected;
var isHighlighted = selected === eventKey || _this.props.highlightedItems.includes(child.props.eventKey);
if (isActive && activeItems[subLevel] !== null) {
addActiveItem(eventKey, subLevel);
}
if (isHighlighted && !highlightedItems.includes(eventKey)) {
addHighlightedItem(eventKey);
}
if (isChildSelected && !highlightedItems.includes(child.props.eventKey)) {
addHighlightedItem(child.props.eventKey);
}
return null;
});
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(NavItem, [{
key: 'componentWillMount',
value: function componentWillMount() {
this.addItems();
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate() {
this.addItems();
}
}, {
key: 'render',
value: function render() {
var _this2 = this,
_cx7,
_cx9;
var _props = this.props,
componentType = _props.componentType,
Component = _props.componentClass,
active = _props.active,
disabled = _props.disabled,
expanded = _props.expanded,
eventKey = _props.eventKey,
onSelect = _props.onSelect,
selected = _props.selected,
subNav = _props.subNav,
subChild = _props.subChild,
navitemClassName = _props.navitemClassName,
navitemStyle = _props.navitemStyle,
subnavClassName = _props.subnavClassName,
subnavStyle = _props.subnavStyle,
className = _props.className,
style = _props.style,
children = _props.children,
activeItems = _props.activeItems,
highlightedItems = _props.highlightedItems,
subLevel = _props.subLevel,
addActiveItem = _props.addActiveItem,
toggleExpanded = _props.toggleExpanded,
addHighlightedItem = _props.addHighlightedItem,
props = _objectWithoutProperties(_props, ['componentType', 'componentClass', 'active', 'disabled', 'expanded', 'eventKey', 'onSelect', 'selected', 'subNav', 'subChild', 'navitemClassName', 'navitemStyle', 'subnavClassName', 'subnavStyle', 'className', 'style', 'children', 'activeItems', 'highlightedItems', 'subLevel', 'addActiveItem', 'toggleExpanded', 'addHighlightedItem']);
var navIcon = this.findNavIcon(children);
var navText = this.findNavText(children);
var _ref2 = navIcon ? _extends({}, navIcon.props) : {},
navIconComponentType = _ref2.componentType,
navIconClassName = _ref2.navIconClassName,
navIconProps = _objectWithoutProperties(_ref2, ['componentType', 'navIconClassName']);
var _ref3 = navText ? _extends({}, navText.props) : {},
navTextComponentType = _ref3.componentType,
navTextClassName = _ref3.navTextClassName,
navTextProps = _objectWithoutProperties(_ref3, ['componentType', 'navTextClassName']);
if (subNav || subChild) {
var _navItems = _react2.default.Children.toArray(children).filter(function (child) {
return _react2.default.isValidElement(child) && _this2.isNavItem(child);
}).map(function (child) {
var subNavItems = _react2.default.Children.toArray(child.props.children).filter(function (subChild) {
return _react2.default.isValidElement(subChild) && _this2.isNavItem(subChild);
});
if (subNavItems.length > 0) {
return (0, _react.cloneElement)(child, {
subNav: true,
selected: selected,
subLevel: subLevel + 1,
activeItems: activeItems,
highlightedItems: highlightedItems,
addActiveItem: _this2.props.addActiveItem,
addHighlightedItem: _this2.props.addHighlightedItem,
onSelect: (0, _chainedFunction2.default)(child.props.onSelect, onSelect)
});
}
return (0, _react.cloneElement)(child, {
subChild: true,
selected: selected,
subLevel: subLevel + 1,
activeItems: activeItems,
highlightedItems: highlightedItems,
addActiveItem: _this2.props.addActiveItem,
addHighlightedItem: _this2.props.addHighlightedItem,
onSelect: (0, _chainedFunction2.default)(child.props.onSelect, onSelect)
});
});
var _isNavItemSelected = highlightedItems.includes(eventKey) || eventKey === selected;
if (_navItems.length > 0) {
var _cx, _cx4;
var isOpen = activeItems[subLevel] === eventKey;
return _react2.default.createElement(
Component,
{
role: 'presentation',
className: (0, _classnames2.default)(className, _index2.default.sidenavSubnavitem, (_cx = {}, _defineProperty(_cx, _index2.default.selected, _isNavItemSelected), _defineProperty(_cx, _index2.default.disabled, disabled), _cx), _index2.default['subnav-' + subLevel])
},
_react2.default.createElement(
'div',
_extends({}, props, {
className: (0, _classnames2.default)(navitemClassName, _index2.default.navitem, _index2.default.borderBottom, _defineProperty({}, _index2.default.selectedSubWrapper, _isNavItemSelected)),
disabled: disabled,
role: 'menuitem',
tabIndex: '-1',
style: _extends({}, navitemStyle, {
display: 'flex',
justifyContent: 'space-between',
background: '#f8f8f9'
}),
onClick: function onClick() {
return addActiveItem(eventKey, subLevel);
}
}),
_react2.default.createElement(
'div',
{ style: { display: 'flex', alignItems: 'center' } },
navIcon ? _react2.default.createElement('div', _extends({}, navIconProps, { className: (0, _classnames2.default)(navIconClassName, _index2.default.navicon) })) : _react2.default.createElement('div', { style: { minWidth: '30px' } }),
navText && _react2.default.createElement('div', _extends({}, navTextProps, { className: (0, _classnames2.default)(navTextClassName, _index2.default.navtext) }))
),
_react2.default.createElement(
'div',
null,
_navItems.length > 0 && _react2.default.createElement('i', { className: (0, _classnames2.default)('fa-angle-right fw fa fa-caret-right', _index2.default.expandedIcon, _defineProperty({}, _index2.default.expandedIconRotate, isOpen))
})
)
),
_react2.default.createElement(
'div',
{ style: { background: '#F8F8F9' } },
_react2.default.createElement('div', { style: { height: '1px', background: '#e5e5e4', marginRight: '20px', marginLeft: '20px' } })
),
_react2.default.createElement(
'div',
{ className: (0, _classnames2.default)((_cx4 = {}, _defineProperty(_cx4, _index2.default.subMenuOpen, isOpen), _defineProperty(_cx4, _index2.default.subMenuClose, !isOpen), _cx4)) },
_navItems
)
);
}
return _react2.default.createElement(
Component,
{
role: 'presentation',
className: (0, _classnames2.default)(className, _index2.default.sidenavSubnavitem, _defineProperty({}, _index2.default.selected, _isNavItemSelected), _index2.default['subchild-' + subLevel], _defineProperty({}, _index2.default.selectedSubWrapper, _isNavItemSelected)),
style: style
},
_react2.default.createElement(
'div',
_extends({}, props, {
className: (0, _classnames2.default)(navitemClassName, _index2.default.navitem),
disabled: disabled,
role: 'menuitem',
tabIndex: '-1',
onClick: (0, _chainedFunction2.default)(function () {
return addActiveItem(eventKey, subLevel);
}, this.handleSelect)
}),
navIcon ? _react2.default.createElement('div', _extends({}, navIconProps, { className: (0, _classnames2.default)(navIconClassName, _index2.default.navicon) })) : _react2.default.createElement('div', { style: { minWidth: '30px' } }),
navText && _react2.default.createElement('div', _extends({}, navTextProps, { className: (0, _classnames2.default)(navTextClassName, _index2.default.navtext) }))
),
_react2.default.createElement(
'div',
{ style: { background: '#F8F8F9' } },
_react2.default.createElement('div', { style: { height: '1px', background: '#e5e5e4', marginRight: '20px', marginLeft: '20px' } })
)
);
}
var navItems = _react2.default.Children.toArray(children).filter(function (child) {
return _react2.default.isValidElement(child) && _this2.isNavItem(child);
}).map(function (child) {
return (0, _react.cloneElement)(child, {
subNav: true,
selected: selected,
subLevel: subLevel + 1,
activeItems: activeItems,
highlightedItems: highlightedItems,
addActiveItem: _this2.props.addActiveItem,
addHighlightedItem: _this2.props.addHighlightedItem,
onSelect: (0, _chainedFunction2.default)(child.props.onSelect, onSelect)
});
});
var others = _react2.default.Children.toArray(children).filter(function (child) {
if (_react2.default.isValidElement(child) && (_this2.isNavIcon(child) || _this2.isNavText(child) || _this2.isNavItem(child))) {
return false;
}
return true;
});
var isNavItemSelected = highlightedItems.includes(eventKey);
var isNavItemExpandable = navItems.length > 0;
var isNavItemExpanded = isNavItemExpandable && expanded;
var isNavItemHighlighted = isNavItemExpanded || isNavItemSelected;
return _react2.default.createElement(
Component,
{
role: 'presentation',
className: (0, _classnames2.default)(className, _index2.default.sidenavNavitem, (_cx7 = {}, _defineProperty(_cx7, _index2.default.selected, isNavItemSelected), _defineProperty(_cx7, _index2.default.highlighted, isNavItemHighlighted), _defineProperty(_cx7, _index2.default.expandable, isNavItemExpandable), _defineProperty(_cx7, _index2.default.expanded, isNavItemExpanded), _defineProperty(_cx7, _index2.default.disabled, disabled), _cx7)),
style: style
},
_react2.default.createElement(
'div',
_extends({}, props, {
className: (0, _classnames2.default)(navitemClassName, _index2.default.navitem),
disabled: disabled,
role: 'menuitem',
tabIndex: '-1',
onClick: (0, _chainedFunction2.default)(navItems.length > 0 ? function () {
return toggleExpanded(true);
} : function () {}, function () {
return addActiveItem(eventKey, subLevel);
}, navItems.length === 0 && this.handleSelect),
style: _extends({}, navitemStyle, {
display: 'flex',
justifyContent: 'space-between',
paddingRight: '14px',
cursor: 'pointer'
})
}),
_react2.default.createElement(
'div',
null,
navIcon ? _react2.default.createElement('div', _extends({}, navIconProps, { className: (0, _classnames2.default)(navIconClassName, _index2.default.navicon) })) : _react2.default.createElement('div', { style: { minWidth: '30px' } }),
navText && _react2.default.createElement('div', _extends({ style: { fontSize: '16px' } }, navTextProps, { className: (0, _classnames2.default)(navTextClassName, _index2.default.navtext) }))
),
navItems.length > 0 && _react2.default.createElement(
'div',
null,
_react2.default.createElement('i', { className: (0, _classnames2.default)('fa-angle-right fw fa fa-caret-right', _index2.default.expandedIcon, _defineProperty({}, _index2.default.expandedIconRotate, isNavItemExpanded))
})
),
others
),
navItems.length > 0 && _react2.default.createElement(
'div',
{
role: 'menu',
className: (0, _classnames2.default)(subnavClassName, _index2.default.sidenavSubnav),
style: subnavStyle
},
_react2.default.createElement(
Component,
{
role: 'heading',
className: (0, _classnames2.default)(_index2.default.sidenavSubnavitem, (_cx9 = {}, _defineProperty(_cx9, _index2.default.highlighted, active), _defineProperty(_cx9, _index2.default.disabled, disabled), _cx9)),
style: style
},
navText && navText.props ? navText.props.children : null
),
navItems
)
);
}
}]);
return NavItem;
}(_react2.default.PureComponent);
NavItem.propTypes = {
componentType: _propTypes2.default.any,
componentClass: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
active: _propTypes2.default.bool,
disabled: _propTypes2.default.bool,
expanded: _propTypes2.default.bool,
eventKey: _propTypes2.default.any,
addActiveItem: _propTypes2.default.func,
onClick: _propTypes2.default.func,
onSelect: _propTypes2.default.func,
selected: _propTypes2.default.any,
subNav: _propTypes2.default.bool,
subLevel: _propTypes2.default.number,
subChild: _propTypes2.default.bool,
navitemClassName: _propTypes2.default.string,
navitemStyle: _propTypes2.default.object,
subnavClassName: _propTypes2.default.string,
subnavStyle: _propTypes2.default.object,
activeItems: _propTypes2.default.shape({}),
highlightedItems: _propTypes2.default.arrayOf(_propTypes2.default.string),
addHighlightedItem: _propTypes2.default.func,
toggleExpanded: _propTypes2.default.func
};
NavItem.defaultProps = {
componentClass: 'div',
active: false,
disabled: false,
expanded: false
};
NavItem.defaultProps.componentType = NavItem;
exports.default = NavItem;
/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {
"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 NavIcon = function NavIcon() {
throw new Error('should not render NavIcon component');
};
// For component matching
NavIcon.defaultProps = _extends({}, NavIcon.defaultProps, {
componentType: NavIcon
});
exports.default = NavIcon;
/***/ }),
/* 9 */
/***/ (function(module, exports, __webpack_require__) {
"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 NavText = function NavText() {
throw new Error('should not render NavText component');
};
// For component matching
NavText.defaultProps = _extends({}, NavText.defaultProps, {
componentType: NavText
});
exports.default = NavText;
/***/ }),
/* 10 */
/***/ (function(module, exports, __webpack_require__) {
"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 _class, _temp;
var _classnames = __webpack_require__(1);
var _classnames2 = _interopRequireDefault(_classnames);
var _propTypes = __webpack_require__(2);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _react = __webpack_require__(0);
var _react2 = _interopRequireDefault(_react);
var _index = __webpack_require__(3);
var _index2 = _interopRequireDefault(_index);
var _collapseIcon = __webpack_require__(15);
var _collapseIcon2 = _interopRequireDefault(_collapseIcon);
var _svg = __webpack_require__(16);
var _svg2 = _interopRequireDefault(_svg);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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; }
var Toggle = (_temp = _class = function (_PureComponent) {
_inherits(Toggle, _PureComponent);
function Toggle() {
_classCallCheck(this, Toggle);
return _possibleConstructorReturn(this, (Toggle.__proto__ || Object.getPrototypeOf(Toggle)).apply(this, arguments));
}
_createClass(Toggle, [{
key: 'render',
value: function render() {
var _props = this.props,
componentType = _props.componentType,
Component = _props.componentClass,
expanded = _props.expanded,
className = _props.className,
children = _props.children,
props = _objectWithoutProperties(_props, ['componentType', 'componentClass', 'expanded', 'className', 'children']);
return _react2.default.createElement(
'div',
_extends({}, props, {
role: 'button',
className: (0, _classnames2.default)(_index2.default.toggleWrapper)
}),
_react2.default.createElement(
Component,
_extends({}, props, {
role: 'button',
className: (0, _classnames2.default)(className, _index2.default.sidenavToggle),
'aria-expanded': expanded
}),
expanded ? _react2.default.createElement(_collapseIcon2.default, { style: { margin: '0 4px' } }) : _react2.default.createElement(_svg2.default, { style: { margin: '0 4px' } }),
children
)
);
}
}]);
return Toggle;
}(_react.PureComponent), _class.propTypes = {
componentType: _propTypes2.default.any,
// A custom element for this component.
componentClass: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
// Whether the navigation toggle is disabled.
disabled: _propTypes2.default.bool,
// Whether the side navigation is expanded or collapsed.
expanded: _propTypes2.default.bool
}, _class.defaultProps = {
componentClass: 'button',
disabled: false,
expanded: false
}, _temp);
// For component matching
Toggle.defaultProps.componentType = Toggle;
exports.default = Toggle;
/***/ }),
/* 11 */
/***/ (function(module, exports, __webpack_require__) {
"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 _chainedFunction = __webpack_require__(5);
var _chainedFunction2 = _interopRequireDefault(_chainedFunction);
var _classnames = __webpack_require__(1);
var _classnames2 = _interopRequireDefault(_classnames);
var _propTypes = __webpack_require__(2);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _react = __webpack_require__(0);
var _react2 = _interopRequireDefault(_react);
var _reactRedux = __webpack_require__(12);
var _redux = __webpack_require__(6);
var _NavItem = __webpack_require__(7);
var _NavItem2 = _interopRequireDefault(_NavItem);
var _matchComponent = __webpack_require__(4);
var _matchComponent2 = _interopRequireDefault(_matchComponent);
var _index = __webpack_require__(3);
var _index2 = _interopRequireDefault(_index);
var _actions = __webpack_require__(13);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
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; }
var Nav = function (_React$PureComponent) {
_inherits(Nav, _React$PureComponent);
function Nav() {
var _ref;
var _temp, _this, _ret;
_classCallCheck(this, Nav);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Nav.__proto__ || Object.getPrototypeOf(Nav)).call.apply(_ref, [this].concat(args))), _this), _this.isNavItem = (0, _matchComponent2.default)(_NavItem2.default), _this.addItems = function () {
var _this$props = _this.props,
children = _this$props.children,
localSelected = _this$props.localSelected,
highlightedItems = _this$props.highlightedItems;
_react2.default.Children.map(children, function (child, i) {
if (_react2.default.isValidElement(child) && _this.isNavItem(child)) {
if (child.props.eventKey === localSelected && !highlightedItems.includes(child.props.eventKey)) {
_this.props.actions.addHighlighted(child.props.eventKey);
}
}
});
}, _this.changeSelected = function (selected) {
_this.props.actions.clearHighlighted();
_this.props.actions.setSelected(selected);
}, _this.changeActiveItems = function (eventKey, level) {
var _this$props2 = _this.props,
activeItems = _this$props2.activeItems,
expanded = _this$props2.expanded,
_this$props2$actions = _this$props2.actions,
setSelected = _this$props2$actions.setSelected,
changeActive = _this$props2$actions.changeActive;
setSelected(undefined);
if (activeItems[level] === eventKey && expanded) {
changeActive({ eventKey: null, level: level });
} else {
changeActive({ eventKey: eventKey, level: level });
}
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(Nav, [{
key: 'componentDidMount',
value: function componentDidMount() {
this.props.actions.clearHighlighted();
this.props.actions.setSelected(this.props.selected);
this.addItems();
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
if (this.props.selected !== nextProps.selected) {
this.props.actions.clearHighlighted();
}
if (this.props.expanded && !nextProps.expanded) {
this.props.actions.onToggle();
}
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate() {
this.addItems();
}
}, {
key: 'renderNavItem',
value: function renderNavItem(child, _ref2) {
var onSelect = _ref2.onSelect,
props = _objectWithoutProperties(_ref2, ['onSelect']);
return (0, _react.cloneElement)(child, _extends({}, props, {
onSelect: (0, _chainedFunction2.default)(child.props.onSelect, this.changeSelected, onSelect)
}));
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
var _props = this.props,
componentType = _props.componentType,
Component = _props.componentClass,
onSelect = _props.onSelect,
defaultSelected = _props.defaultSelected,
addHighlightedItem = _props.addHighlightedItem,
expanded = _props.expanded,
className = _props.className,
children = _props.children,
highlightedItems = _props.highlightedItems,
localSelected = _props.localSelected,
activeItems = _props.activeItems,
_props$actions = _props.actions,
addActiveItem = _props$actions.addActiveItem,
addHighlighted = _props$actions.addHighlighted,
clearActive = _props$actions.clearActive,
clearHighlighted = _props$actions.clearHighlighted,
setSelected = _props$actions.setSelected,
props = _objectWithoutProperties(_props, ['componentType', 'componentClass', 'onSelect', 'defaultSelected', 'addHighlightedItem', 'expanded', 'className', 'children', 'highlightedItems', 'localSelected', 'activeItems', 'actions']);
return _react2.default.createElement(
Component,
_extends({}, props, {
role: 'menu',
className: (0, _classnames2.default)(className, _index2.default.sidenavNav, _defineProperty({}, _index2.default.expanded, expanded))
}),
_react2.default.Children.map(children, function (child, i) {
if (_react2.default.isValidElement(child) && _this2.isNavItem(child)) {
return _this2.renderNavItem(child, {
onSelect: onSelect,
selected: localSelected,
expanded: expanded && (child.props.eventKey === localSelected || activeItems['0'] === child.props.eventKey),
subLevel: 0,
addActiveItem: _this2.changeActiveItems,
activeItems: activeItems,
highlightedItems: highlightedItems,
addHighlightedItem: addHighlighted
});
}
return child;
})
);
}
}]);
return Nav;
}(_react2.default.PureComponent);
Nav.propTypes = {
componentType: _propTypes2.default.any,
componentClass: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
onSelect: _propTypes2.default.func,
selected: _propTypes2.default.any,
defaultSelected: _propTypes2.default.any,
expanded: _propTypes2.default.bool,
highlightedItems: _propTypes2.default.arrayOf(_propTypes2.default.string),
activeItems: _propTypes2.default.shape({}),
localSelected: _propTypes2.default.string,
actions: _propTypes2.default.shape({
addHighlighted: _propTypes2.default.func,
clearHighlighted: _propTypes2.default.func,
changeActive: _propTypes2.default.func,
clearActive: _propTypes2.default.func,
setSelected: _propTypes2.default.func,
onToggle: _propTypes2.default.func
})
};
Nav.defaultProps = {
componentClass: 'div'
};
Nav.defaultProps.componentType = Nav;
var mapStateToProps = function mapStateToProps(state) {
return {
activeItems: state.items.activeItems,
highlightedItems: state.items.highlightedItems,
localSelected: state.items.selected
};
};
var mapDispatchToProps = function mapDispatchToProps(dispatch) {
return {
actions: (0, _redux.bindActionCreators)({
changeActive: _actions.changeActive,
clearActive: _actions.clearActive,
addHighlighted: _actions.addHighlighted,
clearHighlighted: _actions.clearHighlighted,
setSelected: _actions.setSelected,
onToggle: _actions.onToggle
}, dispatch)
};
};
exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(Nav);
/***/ }),
/* 12 */
/***/ (function(module, exports) {
module.exports = require("react-redux");
/***/ }),
/* 13 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var CHANGE_ACTIVE = exports.CHANGE_ACTIVE = 'ADD_ACTIVE';
var CLEAR_ACTIVE = exports.CLEAR_ACTIVE = 'CLEAR_ACTIVE';
var ADD_HIGHLIGHTED = exports.ADD_HIGHLIGHTED = 'ADD_HIGHLIGHTED';
var CLEAR_HIGHLIGHTED = exports.CLEAR_HIGHLIGHTED = 'REMOVE_HIGHLIGHTED';
var SET_SELECTED = exports.SET_SELECTED = 'SET_SELECTED';
var ON_TOGGLE = exports.ON_TOGGLE = 'ON_TOGGLE';
var changeActive = exports.changeActive = function changeActive(item) {
return {
type: CHANGE_ACTIVE, item: item
};
};
var clearActive = exports.clearActive = function clearActive() {
return {
type: CLEAR_ACTIVE
};
};
var addHighlighted = exports.addHighlighted = function addHighlighted(item) {
return {
type: ADD_HIGHLIGHTED, item: item
};
};
var clearHighlighted = exports.clearHighlighted = function clearHighlighted(item) {
return {
type: CLEAR_HIGHLIGHTED, item: item
};
};
var setSelected = exports.setSelected = function setSelected(selected) {
return {
type: SET_SELECTED, selected: selected
};
};
var onToggle = exports.onToggle = function onToggle() {
return {
type: ON_TOGGLE
};
};
/***/ }),
/* 14 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.NavText = exports.NavIcon = exports.NavItem = exports.Nav = exports.Toggle = undefined;
var _Toggle = __webpack_require__(10);
Object.defineProperty(exports, 'Toggle', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_Toggle).default;
}
});
var _Nav = __webpack_require__(11);
Object.defineProperty(exports, 'Nav', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_Nav).default;
}
});
var _NavItem = __webpack_require__(7);
Object.defineProperty(exports, 'NavItem', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_NavItem).default;
}
});
var _NavIcon = __webpack_require__(8);
Object.defineProperty(exports, 'NavIcon', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_NavIcon).default;
}
});
var _NavText = __webpack_require__(9);
Object.defineProperty(exports, 'NavText', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_NavText).default;
}
});
var _SideNav = __webpack_require__(18);
var _SideNav2 = _interopRequireDefault(_SideNav);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
module.exports = _SideNav2.default;
/***/ }),
/* 15 */
/***/ (function(module, exports, __webpack_require__) {
"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 _react = __webpack_require__(0);
var _react2 = _interopRequireDefault(_react);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var SvgComponent = function SvgComponent(props) {
return _react2.default.createElement(
"svg",
_extends({ width: 32, height: 32, viewBox: "0 0 64 64" }, props),
_react2.default.createElement(
"g",
{ fill: "none", fillRule: "evenodd" },
_react2.default.createElement("path", { d: "M0 0h64v64H0z" }),
_react2.default.createElement("path", {
fill: "#6B6B76",
fillRule: "nonzero",
d: "M12 16h40a4 4 0 0 1