All files / lib/ListItemHeader index.js

100% Statements 8/8
100% Branches 10/10
100% Functions 1/1
100% Lines 8/8
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 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124                                                      19x     19x     19x         19x                       19x                                   89x                                 89x                 89x                                                          
import React from 'react';
import PropTypes from 'prop-types';
import { uniqueId } from 'lodash';
import {
  ListItem,
  ListItemSection,
} from '@collab-ui/react';
 
/**
 * @category containers
 * @component list-item
 * @variations collab-ui-react
 */
class ListItemHeader extends React.PureComponent {
 
  state = {
    id: this.props.id || uniqueId('cui-space-list-item__header-'),
  }
 
  render() {
    const {
      children,
      className,
      header,
      title,
      type,
      ...props
    } = this.props;
    const {
      id
    } = this.state;
 
    const getTitle =
      !title
        ? header
        : title;
 
    const staticChildren = (
      [
        <ListItemSection key='child-0' position='center'>
          <div className={'cui-list-item__header'}>
            {header}
          </div>
        </ListItemSection>,
        <ListItemSection key='child-1' position='right'>
          {children}
        </ListItemSection>
      ]
    );
 
    return (
      <ListItem
        className={
          'cui-list-item-header' +
          `${(type && ` cui-list-item-header--${type}`) || ''}` +
          `${(className && ` ${className}`) || ''}`
        }
        isReadOnly
        id={id}
        title={getTitle}
        {...props}
      >
        {staticChildren}
      </ListItem>
    );
  }
}
 
ListItemHeader.propTypes = {
  /** @prop Children nodes to render inside ListItemHeader | null */
  children: PropTypes.node,
  /** @prop Optional css class string | '' */
  className: PropTypes.string,
  /** @prop ListItem header text */
  header: PropTypes.string.isRequired,
  /** @prop HTML ID for associated input | '' */
  id: PropTypes.string,
  /** @prop Determines if ListItemHeader is Clickable | true */
  isReadOnly: PropTypes.bool,
  /** @prop ListItem title | '' */
  title: PropTypes.string,
  /** @prop ListItemHeader type variation | '' */
  type: PropTypes.oneOf(['', 'space']),
};
 
ListItemHeader.defaultProps = {
  children: null,
  className: '',
  id: '',
  isReadOnly: true,
  title: '',
  type: ''
};
 
ListItemHeader.displayName = 'ListItemHeader';
 
export default ListItemHeader;
 
/**
* @component list
* @section list-item-header
* @react
*
import { List, ListItemHeader } from '@collab-ui/react';
import { NavLink } from 'react-router-dom';
 
export default class ListItemHeaderExample extends React.PureComponent {
 
  render() {
    const anchorNode = <NavLink to='/containers/list-item'>More</NavLink>;
    return(
      <div className="medium-4 columns">
        <List>
          <ListItemHeader header='Testing' children={anchorNode} />
        </List>
        <List className='cui--dark' style={{backgroundColor: 'rgba(40,40,40,0.72)'}}>
          <ListItemHeader header='Testing' children={anchorNode}/>
        </List>
      </div>
    );
  }
}
**/