@carbon/ibm-cloud-cognitive-cdai
Version:
Carbon for Cloud & Cognitive CD&AI UI components
119 lines (118 loc) • 7.32 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _IDHelper = require("../../../component_helpers/IDHelper");
var _carbonComponentsReact = require("carbon-components-react");
var _settings = require("../../../globals/js/settings");
var _excluded = ["expanded", "onToggle", "showFirstLevel", "navigationLinks", "footerDescription", "ariaAttributes", "children", "className", "contentClassName"];
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } //
// Copyright IBM Corp. 2020, 2020
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//
var IdeNavigation = exports.default = /*#__PURE__*/function (_React$Component) {
function IdeNavigation(props) {
var _this;
(0, _classCallCheck2.default)(this, IdeNavigation);
_this = _callSuper(this, IdeNavigation, [props]);
_this.state = {
expanded: false
};
_this.toggle = _this.toggle.bind(_this);
return _this;
}
(0, _inherits2.default)(IdeNavigation, _React$Component);
return (0, _createClass2.default)(IdeNavigation, [{
key: "toggle",
value: function toggle() {
this.setState({
expanded: !this.state.expanded
});
}
}, {
key: "render",
value: function render() {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props,
expanded = _ref.expanded,
onToggle = _ref.onToggle,
showFirstLevel = _ref.showFirstLevel,
navigationLinks = _ref.navigationLinks,
footerDescription = _ref.footerDescription,
ariaAttributes = _ref.ariaAttributes,
children = _ref.children,
className = _ref.className,
contentClassName = _ref.contentClassName,
others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
var sideNavClasses = "".concat(_settings.idePrefix, "-navigation--nav-theme ").concat(_settings.idePrefix, "-navigation--nav-overrides ").concat(!showFirstLevel ? "".concat(_settings.idePrefix, "-navigation__hide-nav") : '');
var contentClasses = "".concat(_settings.idePrefix, "-navigation--content ").concat(!showFirstLevel ? "".concat(_settings.idePrefix, "-navigation--content__hide-nav") : '', " ").concat(contentClassName);
var toggleFunction = typeof onToggle === 'function' && expanded !== undefined ? onToggle : this.toggle;
var toggleState = expanded !== undefined ? expanded : this.state.expanded;
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, (0, _IDHelper.idAttribute)('IdeNavigation'), {
className: "".concat(className, " ").concat(_settings.idePrefix, "-navigation")
}, others), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.SideNav, (0, _extends2.default)({}, (0, _IDHelper.idAttribute)('IdeNavigation--left-nav'), ariaAttributes, {
className: sideNavClasses,
isRail: true,
expanded: toggleState,
addFocusListeners: false,
addMouseListeners: false
}), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.SideNavItems, (0, _IDHelper.idAttribute)('IdeNavigation--left-nav-item-container'), navigationLinks), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.SideNavFooter, (0, _extends2.default)({}, (0, _IDHelper.idAttribute)('IdeNavigation--left-nav-toggle'), {
className: "".concat(_settings.idePrefix, "-navigation--toggle"),
onToggle: toggleFunction,
expanded: toggleState,
assistiveText: footerDescription
}))), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Content, (0, _extends2.default)({}, (0, _IDHelper.idAttribute)('IdeNavigation--content'), {
className: contentClasses
}), children));
}
}]);
}(_react.default.Component);
IdeNavigation.propTypes = {
/** Required aria attributes. One or the other must be provided */
ariaAttributes: _propTypes.default.oneOfType([_propTypes.default.shape({
/** aria labelledby markup which is applied to the navigation, referencing the label which describe the nav. Must be provided */
'aria-labelledby': _propTypes.default.string.isRequired
}), _propTypes.default.shape({
/** aria label which is applied to the navigation. Must be provided, and be pre translated */
'aria-label': _propTypes.default.string.isRequired
})]),
/** children. This should be/represent the current page selected by the user */
children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.array]),
className: _propTypes.default.string,
/** contentClassName - optional styling to be applied to the the container which renders any children */
contentClassName: _propTypes.default.string,
/** expanded. Specify this to make this a controlled component. Use onToggle to be notified of expansion changes */
expanded: _propTypes.default.bool,
/** footerDescription - required. Provide a pre translated string to describe what the expansion control does */
footerDescription: _propTypes.default.string.isRequired,
/** navigation links. An array of Carbon SideNav items, being menus, links, text etc*/
navigationLinks: _propTypes.default.arrayOf(_propTypes.default.node).isRequired,
/** onToggle. Called when a controlled component to notify the parent of a change in expansion state */
onToggle: _propTypes.default.func,
/** showFirstLevel. Defaults to true. Set this to false to only show the content, and not the left navigation */
showFirstLevel: _propTypes.default.bool
/** className - optional styling to be applied to the component */
};
IdeNavigation.defaultProps = {
showFirstLevel: true,
className: '',
contentClassName: '',
footerDescription: 'Click here to expand or collapse the navigation - change this for a pre translated string!',
navigationLinks: [],
ariaAttributes: {
'aria-label': 'Example Aria Labeled'
}
};