New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@trendmicro/react-navs

Package Overview
Dependencies
Maintainers
1
Versions
24
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@trendmicro/react-navs - npm Package Compare versions

Comparing version 0.6.1 to 0.7.0

971

lib/index.js

@@ -1,2 +0,2 @@

/*! react-navs v0.6.1 | (c) 2017 Trend Micro Inc. | MIT | https://github.com/trendmicro-frontend/react-navs */
/*! react-navs v0.7.0 | (c) 2017 Trend Micro Inc. | MIT | https://github.com/trendmicro-frontend/react-navs */
module.exports =

@@ -16,5 +16,5 @@ /******/ (function(modules) { // webpackBootstrap

/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };

@@ -26,3 +26,3 @@ /******/

/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ module.l = true;
/******/

@@ -40,2 +40,28 @@ /******/ // Return the exports of the module

/******/
/******/ // identity function for calling harmony imports with the correct context
/******/ __webpack_require__.i = function(value) { return value; };
/******/
/******/ // 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__

@@ -45,3 +71,3 @@ /******/ __webpack_require__.p = "";

/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ return __webpack_require__(__webpack_require__.s = 11);
/******/ })

@@ -51,350 +77,641 @@ /************************************************************************/

/* 0 */
/***/ function(module, exports, __webpack_require__) {
/***/ (function(module, exports) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.NavItem = exports.Nav = undefined;
var _Nav2 = __webpack_require__(1);
var _Nav3 = _interopRequireDefault(_Nav2);
var _NavItem2 = __webpack_require__(10);
var _NavItem3 = _interopRequireDefault(_NavItem2);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.Nav = _Nav3.default;
exports.NavItem = _NavItem3.default;
module.exports = require("classnames");
/***/ },
/***/ }),
/* 1 */
/***/ function(module, exports, __webpack_require__) {
/***/ (function(module, exports) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
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 _chainedFunction = __webpack_require__(2);
var _chainedFunction2 = _interopRequireDefault(_chainedFunction);
var _classnames = __webpack_require__(3);
var _classnames2 = _interopRequireDefault(_classnames);
var _react = __webpack_require__(4);
var _react2 = _interopRequireDefault(_react);
var _reactAddonsShallowCompare = __webpack_require__(5);
var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare);
var _index = __webpack_require__(6);
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; }
var _default = (_temp = _class = function (_Component) {
_inherits(_default, _Component);
function _default() {
_classCallCheck(this, _default);
return _possibleConstructorReturn(this, (_default.__proto__ || Object.getPrototypeOf(_default)).apply(this, arguments));
}
_createClass(_default, [{
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(nextProps, nextState) {
return (0, _reactAddonsShallowCompare2.default)(this, nextProps, nextState);
}
}, {
key: 'isActive',
value: function isActive(_ref, activeKey, activeHref) {
var props = _ref.props;
if (props.active) {
return true;
}
if (activeKey !== undefined && activeKey !== null && props.eventKey === activeKey) {
return true;
}
if (activeHref && props.href === activeHref) {
return true;
}
return false;
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
var _props = this.props,
navStyle = _props.navStyle,
justified = _props.justified,
stacked = _props.stacked,
onSelect = _props.onSelect,
role = _props.role,
className = _props.className,
children = _props.children,
activeKey = _props.activeKey,
activeHref = _props.activeHref,
props = _objectWithoutProperties(_props, ['navStyle', 'justified', 'stacked', 'onSelect', 'role', 'className', 'children', 'activeKey', 'activeHref']);
return _react2.default.createElement(
'ul',
_extends({}, props, {
role: role,
className: (0, _classnames2.default)(className, _index2.default.nav, _defineProperty({}, _index2.default.navTabs, navStyle === 'tabs'), _defineProperty({}, _index2.default.navLightTabs, navStyle === 'light-tabs'), _defineProperty({}, _index2.default.navPanelTabs, navStyle === 'panel-tabs'), _defineProperty({}, _index2.default.navJustified, justified || navStyle === 'panel-tabs'), _defineProperty({}, _index2.default.navStacked, stacked))
}),
_react2.default.Children.map(children, function (child) {
if (!_react2.default.isValidElement(child)) {
return child;
}
var active = _this2.isActive(child, activeKey, activeHref);
var childOnSelect = (0, _chainedFunction2.default)(child.props.onSelect, onSelect);
return (0, _react.cloneElement)(child, {
active: active,
activeKey: activeKey,
activeHref: activeHref,
onSelect: childOnSelect
});
})
);
}
}]);
return _default;
}(_react.Component), _class.propTypes = {
// Marks the child NavItem with a matching `href` prop as active.
activeHref: _react.PropTypes.string,
// Marks the NavItem with a matching `eventKey` as active. Has a higher precedence over `activeHref`.
activeKey: _react.PropTypes.any,
// Component visual or contextual style variants.
navStyle: _react.PropTypes.oneOf(['tabs', 'light-tabs', 'panel-tabs']),
// Make tabs equal widths of their parent at screens wider than 768px.
// On smaller screens, the nav links are stacked.
justified: _react.PropTypes.bool,
// Position NavItem vertically.
stacked: _react.PropTypes.bool,
// A callback fired when a NavItem is selected.
onSelect: _react.PropTypes.func,
// ARIA role for the Nav.
role: _react.PropTypes.string
}, _class.defaultProps = {
navStyle: 'tabs',
justified: false,
stacked: false
}, _temp);
exports.default = _default;
module.exports = require("react");
/***/ },
/***/ }),
/* 2 */
/***/ function(module, exports) {
/***/ (function(module, exports) {
module.exports = require("chained-function");
module.exports = require("react-addons-shallow-compare");
/***/ },
/***/ }),
/* 3 */
/***/ function(module, exports) {
/***/ (function(module, exports) {
module.exports = require("classnames");
module.exports = require("@trendmicro/react-dropdown");
/***/ },
/***/ }),
/* 4 */
/***/ function(module, exports) {
/***/ (function(module, exports) {
module.exports = require("react");
// removed by extract-text-webpack-plugin
module.exports = {"nav":"navs---nav---1zbOb","caret":"navs---caret---3CkEt","disabled":"navs---disabled---eCY9b","open":"navs---open---1ju75","nav-divider":"navs---nav-divider---3l4ju","navDivider":"navs---nav-divider---3l4ju","nav-tabs":"navs---nav-tabs---3lUn4","navTabs":"navs---nav-tabs---3lUn4","active":"navs---active---2-a32","nav-light-tabs":"navs---nav-light-tabs---2sgeU","navLightTabs":"navs---nav-light-tabs---2sgeU","nav-justified":"navs---nav-justified---10iqz","navJustified":"navs---nav-justified---10iqz","nav-panel-tabs":"navs---nav-panel-tabs---3rU6S","navPanelTabs":"navs---nav-panel-tabs---3rU6S","dropdown":"navs---dropdown---1yvIZ","dropdown-menu":"navs---dropdown-menu---1fkH0","dropdownMenu":"navs---dropdown-menu---1fkH0","nav-stacked":"navs---nav-stacked---32oCw","navStacked":"navs---nav-stacked---32oCw"};
/***/ },
/***/ }),
/* 5 */
/***/ function(module, exports) {
/***/ (function(module, exports) {
module.exports = require("react-addons-shallow-compare");
module.exports = require("@trendmicro/react-anchor");
/***/ },
/***/ }),
/* 6 */
/***/ function(module, exports) {
/***/ (function(module, exports) {
// removed by extract-text-webpack-plugin
module.exports = {"nav":"navs---nav---1zbOb","caret":"navs---caret---3CkEt","disabled":"navs---disabled---eCY9b","open":"navs---open---1ju75","nav-divider":"navs---nav-divider---3l4ju","navDivider":"navs---nav-divider---3l4ju","nav-tabs":"navs---nav-tabs---3lUn4","navTabs":"navs---nav-tabs---3lUn4","active":"navs---active---2-a32","nav-light-tabs":"navs---nav-light-tabs---2sgeU","navLightTabs":"navs---nav-light-tabs---2sgeU","nav-justified":"navs---nav-justified---10iqz","navJustified":"navs---nav-justified---10iqz","nav-panel-tabs":"navs---nav-panel-tabs---3rU6S","navPanelTabs":"navs---nav-panel-tabs---3rU6S","dropdown":"navs---dropdown---1yvIZ","dropdown-menu":"navs---dropdown-menu---1fkH0","dropdownMenu":"navs---dropdown-menu---1fkH0","nav-stacked":"navs---nav-stacked---32oCw","navStacked":"navs---nav-stacked---32oCw"};
module.exports = require("chained-function");
/***/ },
/* 7 */,
/* 8 */,
/* 9 */,
/***/ }),
/* 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 _class, _temp;
var _chainedFunction = __webpack_require__(6);
var _chainedFunction2 = _interopRequireDefault(_chainedFunction);
var _classnames = __webpack_require__(0);
var _classnames2 = _interopRequireDefault(_classnames);
var _react = __webpack_require__(1);
var _react2 = _interopRequireDefault(_react);
var _reactAddonsShallowCompare = __webpack_require__(2);
var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare);
var _index = __webpack_require__(4);
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; }
var Nav = (_temp = _class = function (_Component) {
_inherits(Nav, _Component);
function Nav() {
_classCallCheck(this, Nav);
return _possibleConstructorReturn(this, (Nav.__proto__ || Object.getPrototypeOf(Nav)).apply(this, arguments));
}
_createClass(Nav, [{
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(nextProps, nextState) {
return (0, _reactAddonsShallowCompare2.default)(this, nextProps, nextState);
}
}, {
key: 'isActive',
value: function isActive(_ref, activeKey, activeHref) {
var props = _ref.props;
if (props.active) {
return true;
}
if (activeKey !== undefined && activeKey !== null && props.eventKey === activeKey) {
return true;
}
if (activeHref && props.href === activeHref) {
return true;
}
return false;
}
}, {
key: 'render',
value: function render() {
var _classes,
_this2 = this;
var _props = this.props,
navStyle = _props.navStyle,
justified = _props.justified,
stacked = _props.stacked,
onSelect = _props.onSelect,
role = _props.role,
className = _props.className,
children = _props.children,
activeKey = _props.activeKey,
activeHref = _props.activeHref,
props = _objectWithoutProperties(_props, ['navStyle', 'justified', 'stacked', 'onSelect', 'role', 'className', 'children', 'activeKey', 'activeHref']);
var navbar = this.context.$tm_navbar;
var classes = (_classes = {}, _defineProperty(_classes, _index2.default.nav, true), _defineProperty(_classes, _index2.default.navbar, navbar && navStyle === 'navbar'), _defineProperty(_classes, _index2.default.navTabs, navStyle === 'tabs'), _defineProperty(_classes, _index2.default.navLightTabs, navStyle === 'light-tabs'), _defineProperty(_classes, _index2.default.navPanelTabs, navStyle === 'panel-tabs'), _defineProperty(_classes, _index2.default.navJustified, justified || navStyle === 'panel-tabs'), _defineProperty(_classes, _index2.default.navStacked, stacked), _classes);
return _react2.default.createElement(
'ul',
_extends({}, props, {
role: role,
className: (0, _classnames2.default)(className, classes)
}),
_react2.default.Children.map(children, function (child) {
if (!_react2.default.isValidElement(child)) {
return child;
}
var active = _this2.isActive(child, activeKey, activeHref);
var childOnSelect = (0, _chainedFunction2.default)(child.props.onSelect, onSelect, navbar && navbar.onSelect);
return (0, _react.cloneElement)(child, {
active: active,
activeKey: activeKey,
activeHref: activeHref,
onSelect: childOnSelect
});
})
);
}
}]);
return Nav;
}(_react.Component), _class.propTypes = {
// Marks the child NavItem with a matching `href` prop as active.
activeHref: _react.PropTypes.string,
// Marks the NavItem with a matching `eventKey` as active. Has a higher precedence over `activeHref`.
activeKey: _react.PropTypes.any,
// Component visual or contextual style variants.
navStyle: _react.PropTypes.oneOf(['navbar', 'tabs', 'light-tabs', 'panel-tabs']),
// Make tabs equal widths of their parent at screens wider than 768px. On smaller screens, the nav links are stacked.
justified: _react.PropTypes.bool,
// Position NavItem vertically.
stacked: _react.PropTypes.bool,
// A callback fired when a NavItem is selected.
onSelect: _react.PropTypes.func,
// ARIA role for the Nav.
role: _react.PropTypes.string
}, _class.defaultProps = {
navStyle: 'tabs',
justified: false,
stacked: false
}, _class.contextTypes = {
$tm_navbar: _react.PropTypes.shape({
navStyle: _react.PropTypes.string,
onSelect: _react.PropTypes.func
})
}, _temp);
exports.default = Nav;
/***/ }),
/* 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 _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
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, _temp2; /* eslint no-continue: 0 */
var _classnames = __webpack_require__(0);
var _classnames2 = _interopRequireDefault(_classnames);
var _react = __webpack_require__(1);
var _react2 = _interopRequireDefault(_react);
var _reactAddonsShallowCompare = __webpack_require__(2);
var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare);
var _reactAnchor = __webpack_require__(5);
var _reactAnchor2 = _interopRequireDefault(_reactAnchor);
var _reactDropdown = __webpack_require__(3);
var _reactDropdown2 = _interopRequireDefault(_reactDropdown);
var _splitComponentProps3 = __webpack_require__(10);
var _splitComponentProps4 = _interopRequireDefault(_splitComponentProps3);
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 NavDropdown = (_temp2 = _class = function (_Component) {
_inherits(NavDropdown, _Component);
function NavDropdown() {
var _ref;
var _temp, _this, _ret;
_classCallCheck(this, NavDropdown);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = NavDropdown.__proto__ || Object.getPrototypeOf(NavDropdown)).call.apply(_ref, [this].concat(args))), _this), _this.actions = {
handleClick: function handleClick(event) {
if (_this.props.onSelect) {
event.preventDefault();
if (!_this.props.disabled) {
_this.props.onSelect(_this.props.eventKey, event);
}
}
}
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(NavDropdown, [{
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(nextProps, nextState) {
return (0, _reactAddonsShallowCompare2.default)(this, nextProps, nextState);
}
}, {
key: 'isActive',
value: function isActive(_ref2, activeKey, activeHref) {
var props = _ref2.props;
if (props.active) {
return true;
}
if (activeKey !== undefined && props.eventKey === activeKey) {
return true;
}
if (activeHref && props.href === activeHref) {
return true;
}
if (_typeof(props.children) !== 'object') {
return false;
}
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = props.children[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var child = _step.value;
if (!_react2.default.isValidElement(child)) {
continue;
}
if (this.isActive(child, activeKey, activeHref)) {
return true;
}
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
return false;
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
var _props = this.props,
title = _props.title,
activeKey = _props.activeKey,
activeHref = _props.activeHref,
className = _props.className,
style = _props.style,
children = _props.children,
props = _objectWithoutProperties(_props, ['title', 'activeKey', 'activeHref', 'className', 'style', 'children']);
var active = this.isActive(this, activeKey, activeHref);
delete props.active;
delete props.eventKey;
var _splitComponentProps = (0, _splitComponentProps4.default)(props, _reactDropdown2.default.ControlledComponent),
_splitComponentProps2 = _slicedToArray(_splitComponentProps, 2),
dropdownProps = _splitComponentProps2[0],
toggleProps = _splitComponentProps2[1];
toggleProps.componentClass = _reactAnchor2.default;
var dropdownMenuItems = _react2.default.Children.map(children, function (child) {
if (!_react2.default.isValidElement(child)) {
return child;
}
return _react2.default.cloneElement(child, {
active: _this2.isActive(child, activeKey, activeHref)
});
});
return _react2.default.createElement(
_reactDropdown2.default,
_extends({}, dropdownProps, {
componentClass: 'li',
className: (0, _classnames2.default)(className, { active: active }),
style: style
}),
_react2.default.createElement(
_reactDropdown2.default.Toggle,
toggleProps,
title
),
_react2.default.createElement(
_reactDropdown2.default.Menu,
null,
dropdownMenuItems
)
);
}
}]);
return NavDropdown;
}(_react.Component), _class.propTypes = _extends({}, _reactDropdown2.default.propTypes, {
// Highlight the nav dropdown as active.
active: _react.PropTypes.bool,
title: _react.PropTypes.node.isRequired,
// Whether to prevent a caret from being rendered next to the title.
noCaret: _react.PropTypes.bool
}), _class.defaultProps = {
active: false,
noCaret: false
}, _temp2);
exports.default = NavDropdown;
/***/ }),
/* 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 _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, _temp2;
var _chainedFunction = __webpack_require__(6);
var _chainedFunction2 = _interopRequireDefault(_chainedFunction);
var _classnames = __webpack_require__(0);
var _classnames2 = _interopRequireDefault(_classnames);
var _react = __webpack_require__(1);
var _react2 = _interopRequireDefault(_react);
var _reactAddonsShallowCompare = __webpack_require__(2);
var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare);
var _reactAnchor = __webpack_require__(5);
var _reactAnchor2 = _interopRequireDefault(_reactAnchor);
var _index = __webpack_require__(4);
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; }
var NavItem = (_temp2 = _class = function (_Component) {
_inherits(NavItem, _Component);
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.actions = {
handleClick: function handleClick(event) {
if (_this.props.onSelect) {
event.preventDefault();
if (!_this.props.disabled) {
_this.props.onSelect(_this.props.eventKey, event);
}
}
}
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(NavItem, [{
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(nextProps, nextState) {
return (0, _reactAddonsShallowCompare2.default)(this, nextProps, nextState);
}
}, {
key: 'render',
value: function render() {
var _props = this.props,
active = _props.active,
disabled = _props.disabled,
onClick = _props.onClick,
className = _props.className,
style = _props.style,
props = _objectWithoutProperties(_props, ['active', 'disabled', 'onClick', 'className', 'style']);
delete props.onSelect;
delete props.eventKey;
// Injected down by <Nav>
delete props.activeKey;
delete props.activeHref;
if (props.role === 'tab') {
props['aria-selected'] = active;
}
return _react2.default.createElement(
'li',
{
role: 'presentation',
className: (0, _classnames2.default)(className, _defineProperty({}, _index2.default.active, active), _defineProperty({}, _index2.default.disabled, disabled)),
style: style
},
_react2.default.createElement(_reactAnchor2.default, _extends({}, props, {
disabled: disabled,
onClick: (0, _chainedFunction2.default)(onClick, this.actions.handleClick)
}))
);
}
}]);
return NavItem;
}(_react.Component), _class.propTypes = {
// Highlight the nav item as active.
active: _react.PropTypes.bool,
// Whether or not component is disabled.
disabled: _react.PropTypes.bool,
// Value passed to the `onSelect` handler, useful for identifying the selected nav item.
eventKey: _react.PropTypes.any,
// HTML `href` attribute corresponding to `a.href`.
href: _react.PropTypes.string,
// Callback fired when the nav item is clicked.
onClick: _react.PropTypes.func,
// Callback fired when the nav item is selected.
onSelect: _react.PropTypes.func,
// ARIA role for the NavItem.
role: _react.PropTypes.string
}, _class.defaultProps = {
active: false,
disabled: false
}, _temp2);
exports.default = NavItem;
/***/ }),
/* 10 */
/***/ function(module, exports, __webpack_require__) {
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
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, _temp2;
var _chainedFunction = __webpack_require__(2);
var _chainedFunction2 = _interopRequireDefault(_chainedFunction);
var _classnames = __webpack_require__(3);
var _classnames2 = _interopRequireDefault(_classnames);
var _react = __webpack_require__(4);
var _react2 = _interopRequireDefault(_react);
var _reactAddonsShallowCompare = __webpack_require__(5);
var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare);
var _reactAnchor = __webpack_require__(11);
var _reactAnchor2 = _interopRequireDefault(_reactAnchor);
var _index = __webpack_require__(6);
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; }
var _default = (_temp2 = _class = function (_Component) {
_inherits(_default, _Component);
function _default() {
var _ref;
var _temp, _this, _ret;
_classCallCheck(this, _default);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = _default.__proto__ || Object.getPrototypeOf(_default)).call.apply(_ref, [this].concat(args))), _this), _this.actions = {
handleClick: function handleClick(event) {
if (_this.props.onSelect) {
event.preventDefault();
if (!_this.props.disabled) {
_this.props.onSelect(_this.props.eventKey, event);
}
}
}
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(_default, [{
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(nextProps, nextState) {
return (0, _reactAddonsShallowCompare2.default)(this, nextProps, nextState);
}
}, {
key: 'render',
value: function render() {
var _props = this.props,
active = _props.active,
disabled = _props.disabled,
onClick = _props.onClick,
className = _props.className,
style = _props.style,
props = _objectWithoutProperties(_props, ['active', 'disabled', 'onClick', 'className', 'style']);
delete props.onSelect;
delete props.eventKey;
// Injected down by <Nav>
delete props.activeKey;
delete props.activeHref;
if (props.role === 'tab') {
props['aria-selected'] = active;
}
return _react2.default.createElement(
'li',
{
role: 'presentation',
className: (0, _classnames2.default)(className, _defineProperty({}, _index2.default.active, active), _defineProperty({}, _index2.default.disabled, disabled)),
style: style
},
_react2.default.createElement(_reactAnchor2.default, _extends({}, props, {
disabled: disabled,
onClick: (0, _chainedFunction2.default)(onClick, this.actions.handleClick)
}))
);
}
}]);
return _default;
}(_react.Component), _class.propTypes = {
active: _react.PropTypes.bool,
disabled: _react.PropTypes.bool,
eventKey: _react.PropTypes.any,
href: _react.PropTypes.string,
onClick: _react.PropTypes.func,
onSelect: _react.PropTypes.func,
role: _react.PropTypes.string
}, _class.defaultProps = {
active: false,
disabled: false
}, _temp2);
exports.default = _default;
"use strict";
/***/ },
Object.defineProperty(exports, "__esModule", {
value: true
});
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
exports.default = splitComponentProps;
function splitComponentProps(props, Component) {
var componentPropTypes = Component.propTypes;
var parentProps = {};
var childProps = {};
Object.entries(props).forEach(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
propName = _ref2[0],
propValue = _ref2[1];
if (componentPropTypes[propName]) {
parentProps[propName] = propValue;
} else {
childProps[propName] = propValue;
}
});
return [parentProps, childProps];
}
/***/ }),
/* 11 */
/***/ function(module, exports) {
/***/ (function(module, exports, __webpack_require__) {
module.exports = require("@trendmicro/react-anchor");
"use strict";
/***/ }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.NavDropdown = exports.NavItem = exports.Nav = exports.MenuItem = undefined;
var _reactDropdown = __webpack_require__(3);
Object.defineProperty(exports, 'MenuItem', {
enumerable: true,
get: function get() {
return _reactDropdown.MenuItem;
}
});
var _Nav2 = __webpack_require__(7);
var _Nav3 = _interopRequireDefault(_Nav2);
var _NavItem2 = __webpack_require__(9);
var _NavItem3 = _interopRequireDefault(_NavItem2);
var _NavDropdown2 = __webpack_require__(8);
var _NavDropdown3 = _interopRequireDefault(_NavDropdown2);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.Nav = _Nav3.default;
exports.NavItem = _NavItem3.default;
exports.NavDropdown = _NavDropdown3.default;
/***/ })
/******/ ]);
//# sourceMappingURL=index.js.map

46

package.json
{
"name": "@trendmicro/react-navs",
"version": "0.6.1",
"version": "0.7.0",
"description": "Trend Micro Components: React Navs",

@@ -50,2 +50,3 @@ "main": "lib/index.js",

"@trendmicro/react-anchor": "^0.5.2",
"@trendmicro/react-dropdown": "^0.6.1",
"chained-function": "^0.5.0",

@@ -56,21 +57,24 @@ "classnames": "^2.2.5",

"devDependencies": {
"babel-cli": "~6.18.0",
"babel-core": "~6.21.0",
"@trendmicro/react-buttons": "~1.0.0",
"babel-cli": "~6.23.0",
"babel-core": "~6.23.1",
"babel-eslint": "~7.1.1",
"babel-loader": "~6.2.10",
"babel-loader": "~6.3.2",
"babel-plugin-transform-decorators-legacy": "~1.3.4",
"babel-preset-es2015": "~6.18.0",
"babel-preset-react": "~6.16.0",
"babel-preset-stage-0": "~6.16.0",
"clean-css": "~3.4.23",
"coveralls": "~2.11.15",
"css-loader": "~0.26.1",
"eslint": "~3.12.2",
"babel-preset-es2015": "~6.22.0",
"babel-preset-react": "~6.23.0",
"babel-preset-stage-0": "~6.22.0",
"clean-css": "~4.0.8",
"clean-css-cli": "~4.0.8",
"coveralls": "~2.11.16",
"css-loader": "~0.26.2",
"eslint": "~3.16.1",
"eslint-config-trendmicro": "~0.5.1",
"eslint-loader": "~1.6.1",
"eslint-loader": "~1.6.3",
"eslint-plugin-import": "~2.2.0",
"eslint-plugin-jsx-a11y": "~2.2.3",
"eslint-plugin-react": "~6.8.0",
"extract-text-webpack-plugin": "~1.0.1",
"html-webpack-plugin": "~2.24.1",
"eslint-plugin-react": "~6.10.0",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "~0.10.1",
"html-webpack-plugin": "~2.28.0",
"http-server": "~0.9.0",

@@ -81,10 +85,12 @@ "json-loader": "~0.5.4",

"react-dom": "^0.14.0 || ^15.0.0",
"style-loader": "~0.13.1",
"style-loader": "~0.13.2",
"stylint": "~1.5.9",
"stylint-loader": "~1.0.0",
"stylus-loader": "~2.4.0",
"tap": "~8.0.1",
"webpack": "~1.14.0",
"webpack-dev-server": "~1.16.2"
"stylus-loader": "~2.5.0",
"tap": "~10.3.0",
"trendmicro-ui": "~0.3.0",
"url-loader": "~0.5.8",
"webpack": "~2.2.1",
"webpack-dev-server": "~2.4.1"
}
}

215

README.md

@@ -20,6 +20,9 @@ # react-navs [![build status](https://travis-ci.org/trendmicro-frontend/react-navs.svg?branch=master)](https://travis-ci.org/trendmicro-frontend/react-navs) [![Coverage Status](https://coveralls.io/repos/github/trendmicro-frontend/react-navs/badge.svg?branch=master)](https://coveralls.io/github/trendmicro-frontend/react-navs?branch=master)

```js
import { Nav, NavItems } from '@trendmicro/react-navs';
import { Nav, NavItem, NavDropdown, MenuItem } from '@trendmicro/react-navs';
// Be sure to include styles at some point, probably during your bootstraping
import '@trendmicro/react-navs/dist/react-navs.css';
// Include react-dropdown.css when using NavDropdown
import '@trendmicro/react-dropdown/dist/react-dropdown.css'
```

@@ -29,2 +32,4 @@

### Tabs
```js

@@ -41,6 +46,55 @@ <Nav

<NavItem eventKey={3}>Item 3</NavItem>
<NavItem eventKey={4}>Item 4</NavItem>
<NavDropdown eventKey={4} title="NavItem 4">
<MenuItem eventKey={4.1}>Action</MenuItem>
<MenuItem eventKey={4.2}>Another action</MenuItem>
<MenuItem divider />
<MenuItem eventKey={4.3}>Separated link</MenuItem>
</NavDropdown>
</Nav>
```
### Light Tabs
```js
<Nav
navStyle="light-tabs"
activeKey={this.state.activeTab}
onSelect={(eventKey, event) => {
this.setState({ activeTab: eventKey });
}}
>
<NavItem eventKey={1}>Item 1</NavItem>
<NavItem eventKey={2}>Item 2</NavItem>
<NavItem eventKey={3}>Item 3</NavItem>
<NavDropdown eventKey={4} title="NavItem 4">
<MenuItem eventKey={4.1}>Action</MenuItem>
<MenuItem eventKey={4.2}>Another action</MenuItem>
<MenuItem divider />
<MenuItem eventKey={4.3}>Separated link</MenuItem>
</NavDropdown>
</Nav>
```
### Panel Tabs
```js
<Nav
navStyle="panel-tabs"
activeKey={this.state.activeTab}
onSelect={(eventKey, event) => {
this.setState({ activeTab: eventKey });
}}
>
<NavItem eventKey={1}>Item 1</NavItem>
<NavItem eventKey={2}>Item 2</NavItem>
<NavItem eventKey={3}>Item 3</NavItem>
<NavDropdown eventKey={4} title="NavItem 4">
<MenuItem eventKey={4.1}>Action</MenuItem>
<MenuItem eventKey={4.2}>Another action</MenuItem>
<MenuItem divider />
<MenuItem eventKey={4.3}>Separated link</MenuItem>
</NavDropdown>
</Nav>
```
## API

@@ -52,116 +106,57 @@

<table>
<thead>
<tr>
<th align="left">Name</th>
<th align="left">Type</th>
<th align="left">Default</th>
<th align="left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>activeHref</td>
<td>string</td>
<td></td>
<td>Marks the child NavItem with a matching `href` prop as active.</td>
</tr>
<tr>
<td>activeKey</td>
<td>any</td>
<td></td>
<td>Marks the NavItem with a matching `eventKey` as active. Has a higher precedence over `activeHref`.</td>
</tr>
<tr>
<td>navStyle</td>
<td>One of:<br/>'tabs'<br/>'light-tabs'<br/>'panel-tabs'</td>
<td>'tabs'</td>
<td>Component visual or contextual style variants.</td>
</tr>
<tr>
<td>justified</td>
<td>boolean</td>
<td>false</td>
<td>Make tabs equal widths of their parent at screens wider than 768px. On smaller screens, the nav links are stacked.</td>
</tr>
<tr>
<td>stacked</td>
<td>boolean</td>
<td>false</td>
<td>Position NavItem vertically.</td>
</tr>
<tr>
<td>onSelect</td>
<td>function(eventKey, event)</td>
<td></td>
<td>A callback fired when a NavItem is selected.</td>
</tr>
<tr>
<td>role</td>
<td>string</td>
<td></td>
<td>ARIA role for the Nav.</td>
</tr>
</tbody>
</table>
Name | Type | Default | Description
:--- | :--- | :------ | :----------
activeHref | string | | Marks the child NavItem with a matching `href` prop as active.
activeKey | any | | Marks the NavItem with a matching `eventKey` as active. Has a higher precedence over `activeHref`.
navStyle | One of:<br/>'tabs'<br/>'light-tabs'<br/>'panel-tabs'<br/>'navbar' | 'tabs' | Component visual or contextual style variants.
justified | boolean | false | Make tabs equal widths of their parent at screens wider than 768px. On smaller screens, the nav links are stacked.
stacked | boolean | false | Position NavItem vertically.
onSelect | function(eventKey, event) | | A callback fired when a NavItem is selected.
role | string | | ARIA role for the Nav.
#### NavItem
<table>
<thead>
<tr>
<th align="left">Name</th>
<th align="left">Type</th>
<th align="left">Default</th>
<th align="left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>active</td>
<td>boolean</td>
<td>false</td>
<td></td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td></td>
</tr>
<tr>
<td>eventKey</td>
<td>any</td>
<td></td>
<td></td>
</tr>
<tr>
<td>href</td>
<td>string</td>
<td></td>
<td></td>
</tr>
<tr>
<td>onClick</td>
<td>function(event)</td>
<td></td>
<td></td>
</tr>
<tr>
<td>onSelect</td>
<td>function(eventKey, event)</td>
<td></td>
<td></td>
</tr>
<tr>
<td>role</td>
<td>string</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Name | Type | Default | Description
:--- | :--- | :------ | :----------
active | boolean | false | Highlight the nav item as active.
disabled | boolean | false | Whether or not component is disabled.
eventKey | any | | Value passed to the `onSelect` handler, useful for identifying the selected nav item.
href | string | |
onClick | function(event) | | Callback fired when the nav item is clicked.
onSelect | function(eventKey, event) | | Callback fired when the nav item is selected.
role | string | | ARIA role for the NavItem.
#### NavDropdown
Name | Type | Default | Description
:--- | :--- | :------ | :----------
componentClass | string|component | | A custom element for this component
dropup | boolean | false | The menu will open above the dropdown button, instead of below it.
disabled | boolean | false | Whether or not component is disabled.
pullRight | boolean | false | Align the menu to the right side of the NavDropdown toggle.
open | boolean | false | Whether or not the dropdown is visible.
onClose | function(event) | | A callback fired when the dropdown closes.
onToggle | function(boolean) | | A callback fired when the dropdown wishes to change visibility. Called with the requested `open` value.
onSelect | function(eventKey, event) | | A callback fired when a menu item is selected.
role | string | | If `'menuitem'`, causes the dropdown to behave like a menu item rather than a menu button.
rootCloseEvent | One of:<br/>'click'<br/>'mousedown' | | Which event when fired outside the component will cause it to be closed.
active | boolean | false | Highlight the nav dropdown as active.
title | node | |
noCaret | boolean | false | Whether to prevent a caret from being rendered next to the title.
#### MenuItem
Name | Type | Default | Description
:--- | :--- | :------ | :----------
active | boolean | false | Highlight the menu item as active.
disabled | boolean | false | Disable the menu item, making it unselectable.
divider | boolean | false | Style the menu item as a horizontal rule, providing visual separation between groups of menu items.
eventKey | any | | Value passed to the `onSelect` handler, useful for identifying the selected menu item.
header | boolean | false | Style the menu item as a header label, useful for describing a group of menu items.
href | string | | HTML `href` attribute corresponding to `a.href`.
onClick | function(event) | | Callback fired when the menu item is clicked.
onSelect | function(eventKey, event) | | Callback fired when the menu item is selected.
## License
MIT
dist/react-navs.css

Sorry, the diff of this file is not supported yet

dist/react-navs.min.css

Sorry, the diff of this file is not supported yet

lib/index.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc