@salesforce/design-system-react/module/components/vertical-navigation/index.js

Salesforce Lightning Design System for React

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

/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
// Implements the [Vertical Navigation design pattern](https://lightningdesignsystem.com/components/vertical-navigation/) in React.
// Based on SLDS v2.2.1
import React from 'react';
import createReactClass from 'create-react-class';
import PropTypes from 'prop-types'; // ### classNames
// [github.com/JedWatson/classnames](https://github.com/JedWatson/classnames)
// This project uses `classnames`, 'a simple javascript utility for conditionally
// joining classNames together.'

import classNames from 'classnames'; // ### shortid
// [npmjs.com/package/shortid](https://www.npmjs.com/package/shortid)
// shortid is a short, non-sequential, url-friendly, unique id generator

import shortid from 'shortid';
import { VERTICAL_NAVIGATION } from '../../utilities/constants'; // Child components

import Item from './private/item';
/**
 * Vertical Navigation represents a list of links that either take the user to another page or parts of the page the user is in.
 */

var VerticalNavigation = createReactClass({
  displayName: VERTICAL_NAVIGATION,
  propTypes: {
    /**
     * HTML id for component. _Tested with snapshot testing._
     */
    id: PropTypes.string,

    /**
     * CSS class names to be added to the container element. _Tested with snapshot testing._
     */
    className: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),

    /**
     * Array of categories. The required shape is: `{id: string, label: string, items: array}`. The required shape of an item is `{id: string, label: string, url: string}`. All item ids are expected to be unique. _Tested with snapshot testing._
     */
    categories: PropTypes.array,

    /**
     * The ID of the item that is currently selected. Defaults to the ID of the first item. _Tested with Mocha framework._
     */
    selectedId: PropTypes.string,

    /**
     * Triggered when the selection changes. It receives an event and an item object in the shape: `event, {item: [object] }`. _Tested with Mocha framework._
     */
    onSelect: PropTypes.func,

    /**
     * Determines component style. _Tested with snapshot testing._
     */
    variant: PropTypes.oneOf(['default', 'shade'])
  },
  getDefaultProps: function getDefaultProps() {
    return {
      variant: 'default'
    };
  },
  componentWillMount: function componentWillMount() {
    this.generatedId = shortid.generate();
  },
  getId: function getId() {
    return this.props.id || this.generatedId;
  },
  getVariant: function getVariant() {
    return this.props.variant === 'shade' ? 'shade' : 'default';
  },
  getSelectedId: function getSelectedId() {
    var categories = this.props.categories;
    var selectedId;

    if (this.props.selectedId) {
      selectedId = this.props.selectedId;
    } else if (categories.length > 0 && categories[0].items && categories[0].items.length > 0) {
      selectedId = categories[0].items[0].id;
    }

    return selectedId;
  },
  render: function render() {
    var _this = this;

    var rootId = this.getId();
    var variant = this.getVariant();
    return React.createElement("div", {
      id: rootId,
      className: classNames('slds-grid', 'slds-grid--vertical', 'slds-navigation-list--vertical', {
        'slds-navigation-list--vertical-inverse': variant === 'shade'
      }, this.props.className)
    }, this.props.categories.map(function (category) {
      var categoryId = "".concat(rootId, "-").concat(category.id);

      var selectedId = _this.getSelectedId();

      return [React.createElement("h2", {
        id: categoryId,
        key: "".concat(categoryId, "-header"),
        className: "slds-text-title--caps slds-p-around--medium"
      }, category.label), React.createElement("ul", {
        key: categoryId
      }, category.items.map(function (item) {
        return React.createElement(Item, {
          key: item.id,
          item: item,
          isSelected: item.id === selectedId,
          categoryId: categoryId,
          onSelect: _this.props.onSelect
        });
      }))];
    }));
  }
});
export default VerticalNavigation;
//# sourceMappingURL=index.js.map