@carbon/react/lib/components/UIShell/SideNavFooter.js

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2016, 2023
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var iconsReact = require('@carbon/icons-react');
var cx = require('classnames');
var React = require('react');
var PropTypes = require('prop-types');
var usePrefix = require('../../internal/usePrefix.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);

var _Close, _ChevronRight;
/**
 * SideNavFooter is used for rendering the button at the bottom of the side
 * navigation that is a part of the UI Shell. It is responsible for handling the
 * user interaction to expand or collapse the side navigation.
 */
function SideNavFooter({
  assistiveText = 'Toggle opening or closing the side navigation',
  className: customClassName,
  expanded,
  onToggle
}) {
  const prefix = usePrefix.usePrefix();
  const className = cx__default["default"](`${prefix}--side-nav__footer`, customClassName);
  return /*#__PURE__*/React__default["default"].createElement("footer", {
    className: className
  }, /*#__PURE__*/React__default["default"].createElement("button", {
    className: `${prefix}--side-nav__toggle`,
    type: "button",
    onClick: evt => onToggle(evt),
    title: assistiveText
  }, /*#__PURE__*/React__default["default"].createElement("div", {
    className: `${prefix}--side-nav__icon`
  }, expanded ? _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, {
    size: 20
  })) : _ChevronRight || (_ChevronRight = /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronRight, {
    size: 20
  }))), /*#__PURE__*/React__default["default"].createElement("span", {
    className: `${prefix}--assistive-text`
  }, assistiveText)));
}
SideNavFooter.displayName = 'SideNavFooter';
SideNavFooter.propTypes = {
  /**
   * Provide text to be read to screen readers and shown as a tooltip when
   * interacting with the toggle button in the footer
   */
  assistiveText: PropTypes__default["default"].string,
  className: PropTypes__default["default"].string,
  /**
   * Specify whether the side navigation is expanded or collapsed
   */
  expanded: PropTypes__default["default"].bool.isRequired,
  /**
   * Provide a function that is called when the toggle button is interacted
   * with. Useful for controlling the expansion state of the side navigation.
   */
  onToggle: PropTypes__default["default"].func.isRequired
};

exports["default"] = SideNavFooter;