tin-react-components/src/Nav/index.js

All components used for Omadi apps

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { NavLink } from 'react-router-dom'
import classnames from 'classnames'

/**
 * Handles basic navigation
 */
class Nav extends Component {
  renderLinks () {
    const { links = [], activeClassName = 'selected' } = this.props
    return links.map(link => {
      const el = <span className='display-name'><i className={link.icon} /> <span className='name'>{link.displayName}</span></span>
      return <NavLink key={link.displayName} to={link.path} activeClassName={activeClassName} title={link.description}>{el}</NavLink>
    })
  }
  render () {
    const { className = 'navigation' } = this.props
    const classes = classnames(className)
    return (
      <div className={classes}>
        {this.renderLinks()}
      </div>
    )
  }
}

Nav.propTypes = {
  /**
   * An array of objects for navicagion with the following structure:
   * @structure:
   * {
   *  "displayName": "Schedule",
   *  "description": "Manual Dispatch",
   *  "path": "/schedule/manage",
   *  "icon": "icon-calendar"
   * }
   */
  links: PropTypes.array.isRequired,
  /**
   * Parent class
   * @default: navigation
   */
  className: PropTypes.string,
  /**
   * Function that allows for advanced logging.
   * @arguments:
   * [
   *      {
   *          type: 'string',
   *          name: 'componentName',
   *          description: 'Name of component',
   *
   *      },
   *      {
   *          type: 'string',
   *          name: 'methodName',
   *          description: 'Name of method fired',
   *
   *      },
   *      {
   *          type: 'object',
   *          name: 'event',
   *          description: 'The data to be logged',
   *
   *      },
   *      {
   *          type: 'string',
   *          name: 'type',
   *          description: 'Type of log',
   *          options: ['error', 'warning', 'info', 'debug']
   *      }
   * ]
   */
  log: PropTypes.func,
  /**
   * Flag to indicate whether to log events or not
   */
  allowLogging: PropTypes.bool
}

export default Nav