app/javascript/flavours/glitch/features/local_settings/navigation/item/index.js

   1 //  Package imports
   2 import React from 'react';
   3 import PropTypes from 'prop-types';
   4 import classNames from 'classnames';
   5
   6 //  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
   7
   8 export default class LocalSettingsPage extends React.PureComponent {
   9
  10   static propTypes = {
  11     active: PropTypes.bool,
  12     className: PropTypes.string,
  13     href: PropTypes.string,
  14     icon: PropTypes.string,
  15     textIcon: PropTypes.string,
  16     index: PropTypes.number.isRequired,
  17     onNavigate: PropTypes.func,
  18     title: PropTypes.string,
  19   };
  20
  21   handleClick = (e) => {
  22     const { index, onNavigate } = this.props;
  23     if (onNavigate) {
  24       onNavigate(index);
  25       e.preventDefault();
  26     }
  27   }
  28
  29   render () {
  30     const { handleClick } = this;
  31     const {
  32       active,
  33       className,
  34       href,
  35       icon,
  36       textIcon,
  37       onNavigate,
  38       title,
  39     } = this.props;
  40
  41     const finalClassName = classNames('glitch', 'local-settings__navigation__item', {
  42       active,
  43     }, className);
  44
  45     const iconElem = icon ? <i className={`fa fa-fw fa-${icon}`} /> : (textIcon ? <span className='text-icon-button'>{textIcon}</span> : null);
  46
  47     if (href) return (
  48       <a
  49         href={href}
  50         className={finalClassName}
  51       >
  52         {iconElem} <span>{title}</span>
  53       </a>
  54     );
  55     else if (onNavigate) return (
  56       <a
  57         onClick={handleClick}
  58         role='button'
  59         tabIndex='0'
  60         className={finalClassName}
  61       >
  62         {iconElem} <span>{title}</span>
  63       </a>
  64     );
  65     else return null;
  66   }
  67
  68 }