@carbon/ibm-cloud-cognitive-cdai
Version:
Carbon for Cloud & Cognitive CD&AI UI components
115 lines (114 loc) • 6.34 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
var _excluded = ["expanded", "onToggle", "showFirstLevel", "navigationLinks", "footerDescription", "ariaAttributes", "children", "className", "contentClassName"];
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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.
//
import React from 'react';
import PropTypes from 'prop-types';
import { idAttribute } from '../../../component_helpers/IDHelper';
import { SideNav, SideNavItems, SideNavFooter, Content } from 'carbon-components-react';
import { idePrefix } from '../../../globals/js/settings';
var IdeNavigation = /*#__PURE__*/function (_React$Component) {
function IdeNavigation(props) {
var _this;
_classCallCheck(this, IdeNavigation);
_this = _callSuper(this, IdeNavigation, [props]);
_this.state = {
expanded: false
};
_this.toggle = _this.toggle.bind(_this);
return _this;
}
_inherits(IdeNavigation, _React$Component);
return _createClass(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 = _objectWithoutProperties(_ref, _excluded);
var sideNavClasses = "".concat(idePrefix, "-navigation--nav-theme ").concat(idePrefix, "-navigation--nav-overrides ").concat(!showFirstLevel ? "".concat(idePrefix, "-navigation__hide-nav") : '');
var contentClasses = "".concat(idePrefix, "-navigation--content ").concat(!showFirstLevel ? "".concat(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.createElement("div", _extends({}, idAttribute('IdeNavigation'), {
className: "".concat(className, " ").concat(idePrefix, "-navigation")
}, others), /*#__PURE__*/React.createElement(SideNav, _extends({}, idAttribute('IdeNavigation--left-nav'), ariaAttributes, {
className: sideNavClasses,
isRail: true,
expanded: toggleState,
addFocusListeners: false,
addMouseListeners: false
}), /*#__PURE__*/React.createElement(SideNavItems, idAttribute('IdeNavigation--left-nav-item-container'), navigationLinks), /*#__PURE__*/React.createElement(SideNavFooter, _extends({}, idAttribute('IdeNavigation--left-nav-toggle'), {
className: "".concat(idePrefix, "-navigation--toggle"),
onToggle: toggleFunction,
expanded: toggleState,
assistiveText: footerDescription
}))), /*#__PURE__*/React.createElement(Content, _extends({}, idAttribute('IdeNavigation--content'), {
className: contentClasses
}), children));
}
}]);
}(React.Component);
export { IdeNavigation as default };
IdeNavigation.propTypes = {
/** Required aria attributes. One or the other must be provided */
ariaAttributes: PropTypes.oneOfType([PropTypes.shape({
/** aria labelledby markup which is applied to the navigation, referencing the label which describe the nav. Must be provided */
'aria-labelledby': PropTypes.string.isRequired
}), PropTypes.shape({
/** aria label which is applied to the navigation. Must be provided, and be pre translated */
'aria-label': PropTypes.string.isRequired
})]),
/** children. This should be/represent the current page selected by the user */
children: PropTypes.oneOfType([PropTypes.node, PropTypes.array]),
className: PropTypes.string,
/** contentClassName - optional styling to be applied to the the container which renders any children */
contentClassName: PropTypes.string,
/** expanded. Specify this to make this a controlled component. Use onToggle to be notified of expansion changes */
expanded: PropTypes.bool,
/** footerDescription - required. Provide a pre translated string to describe what the expansion control does */
footerDescription: PropTypes.string.isRequired,
/** navigation links. An array of Carbon SideNav items, being menus, links, text etc*/
navigationLinks: PropTypes.arrayOf(PropTypes.node).isRequired,
/** onToggle. Called when a controlled component to notify the parent of a change in expansion state */
onToggle: PropTypes.func,
/** showFirstLevel. Defaults to true. Set this to false to only show the content, and not the left navigation */
showFirstLevel: PropTypes.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'
}
};