@salesforce/design-system-react/lib/components/vertical-navigation/private/item.js

Salesforce Lightning Design System for React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _classnames = _interopRequireDefault(require("classnames"));

var _lodash = _interopRequireDefault(require("lodash.isfunction"));

var _constants = require("../../../utilities/constants");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */

/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
// ### classNames
// [github.com/JedWatson/classnames](https://github.com/JedWatson/classnames)
// This project uses `classnames`, 'a simple javascript utility for conditionally
// joining classNames together.'
// ### isFunction
var handleClick = function handleClick(event, _ref) {
  var item = _ref.item,
      onSelect = _ref.onSelect;

  if (!item.url) {
    event.preventDefault();
  }

  if ((0, _lodash.default)(onSelect)) {
    onSelect(event, {
      item: item
    });
  }
};

var Item = function Item(_ref2) {
  var _ref2$isSelected = _ref2.isSelected,
      isSelected = _ref2$isSelected === void 0 ? false : _ref2$isSelected,
      item = _ref2.item,
      categoryId = _ref2.categoryId,
      onSelect = _ref2.onSelect;
  return /*#__PURE__*/_react.default.createElement("li", {
    className: (0, _classnames.default)('slds-nav-vertical__item', {
      'slds-is-active': isSelected
    })
  }, /*#__PURE__*/_react.default.createElement("a", {
    "data-id": item.id,
    href: item.url || '#',
    className: "slds-nav-vertical__action",
    "aria-describedby": categoryId,
    "aria-current": isSelected ? true : undefined,
    onClick: function onClick(event) {
      handleClick(event, {
        item: item,
        onSelect: onSelect
      });
    }
  }, item.icon ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.cloneElement(item.icon, {
    className: (0, _classnames.default)(item.icon.className, "slds-m-right_".concat(item.icon.props.size || 'medium'))
  }), item.label) : item.label, item.notificationBadge ? /*#__PURE__*/_react.default.cloneElement(item.notificationBadge, {
    className: (0, _classnames.default)(item.notificationBadge.props.className, 'slds-col_bump-left')
  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)));
}; // ### Display Name
// Always use the canonical component name as the React display name.


Item.displayName = _constants.VERTICAL_NAVIGATION_ITEM; // ### Prop Types

Item.propTypes = {
  /**
   * Item to be rendered.
   */
  item: _propTypes.default.shape({
    id: _propTypes.default.string.isRequired,
    label: _propTypes.default.string.isRequired,
    url: _propTypes.default.string
  }),

  /**
   * Whether item is selected or not.
   */
  isSelected: _propTypes.default.bool,

  /**
   * ID of the category this item belongs to.
   */
  categoryId: _propTypes.default.string.isRequired,

  /**
   * Function that will run whenever an item is selected.
   */
  onSelect: _propTypes.default.func
};
var _default = Item;
exports.default = _default;