All files / lib/ContentItem/IconContent index.js

70% Statements 7/10
42.11% Branches 8/19
50% Functions 1/2
70% Lines 7/10
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87        89x                     1x   1x                       1x                                                                 89x                     89x                     89x    
import React from 'react';
import PropTypes from 'prop-types';
import { Icon } from '@collab-ui/react';
 
const IconContent = props => {
  const {
    actionNode,
    className,
    icon,
    isProtected,
    loading,
    onClick,
    subtitle,
    title,
    ...otherProps
  } = props;
 
  const handleKeyDown = e => {
    if (
      e.which === 32
      || e.which === 13
      || e.charCode === 32
      || e.charCode === 13
    ) {
      onClick && onClick(e);
      e.preventDefault();
    }
  };
 
  return (
    <div>
      <div
        className={
          'cui-content-file' +
          `${(onClick && ' cui-content-file--clickable') || ''}` +
          `${(className && ` ${className}`) || ''}`
        }
        onClick={onClick}
        onKeyDown={handleKeyDown}
        role='presentation'
        {...otherProps}
      >
        {
          !isProtected && actionNode &&
          <div className='cui-content-file__icon'>
            {actionNode}
          </div>
        }
        <span>
          <Icon name={icon} />
        </span>
      </div>
      <div className='cui-content-file__info-container'>
        <span className='cui-content-file__title'>
          {loading ? 'Loading' : title}
        </span>
        <span className='cui-content-file__subtitle'> {subtitle} </span>
      </div>
    </div>
  );
};
 
IconContent.defaultProps = {
  actionNode: null,
  className: '',
  icon: '',
  isProtected: null,
  loading: false,
  onClick: null,
  subtitle: '',
  title: '',
};
 
IconContent.propTypes = {
  actionNode: PropTypes.node,
  className: PropTypes.string,
  icon: PropTypes.string,
  isProtected: PropTypes.bool,
  loading: PropTypes.bool,
  onClick: PropTypes.func,
  subtitle: PropTypes.string,
  title: PropTypes.string,
};
 
IconContent.displayName = 'IconContent';
 
export default IconContent;