function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

import React from 'react';
import PropTypes from 'prop-types';
import { uniqueId } from 'lodash';
import { Avatar, Icon, ListItem, ListItemSection } from "./..";
/**
 * @category containers
 * @component list-item
 * @variations collab-ui-react
 */

var SpaceListItem =
/*#__PURE__*/
function (_React$PureComponent) {
  _inheritsLoose(SpaceListItem, _React$PureComponent);

  function SpaceListItem() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
    _this.state = {
      id: uniqueId(_this.props.id && _this.props.id + "-" || 'cui-space-list-item-')
    };
    return _this;
  }

  var _proto = SpaceListItem.prototype;

  _proto.render = function render() {
    var _this$props = this.props,
        attachments = _this$props.attachments,
        className = _this$props.className,
        childrenLeft = _this$props.childrenLeft,
        childrenRight = _this$props.childrenRight,
        header = _this$props.header,
        headerSecondary = _this$props.headerSecondary,
        highlightColor = _this$props.highlightColor,
        isAlertOn = _this$props.isAlertOn,
        isBold = _this$props.isBold,
        isMentioned = _this$props.isMentioned,
        isMuted = _this$props.isMuted,
        isOverview = _this$props.isOverview,
        isUnread = _this$props.isUnread,
        resultRight = _this$props.resultRight,
        searchTerm = _this$props.searchTerm,
        subheader = _this$props.subheader,
        title = _this$props.title,
        type = _this$props.type,
        props = _objectWithoutProperties(_this$props, ["attachments", "className", "childrenLeft", "childrenRight", "header", "headerSecondary", "highlightColor", "isAlertOn", "isBold", "isMentioned", "isMuted", "isOverview", "isUnread", "resultRight", "searchTerm", "subheader", "title", "type"]);

    var id = this.state.id;
    var getTitle = !title && typeof header === 'string' ? header : title;

    var getIcon = function getIcon() {
      if (isMuted) {
        return React.createElement(Icon, {
          color: "$white-60",
          name: "alert-muted_12"
        });
      } else if (isUnread) {
        return React.createElement("i", {
          style: {
            fontSize: '12px',
            color: '#07C1E4'
          },
          className: "icon icon-unread-badge_16"
        });
      } else if (isMentioned) {
        return React.createElement(Icon, {
          color: "blue",
          name: "mention_12"
        });
      } else if (isAlertOn) {
        return React.createElement(Icon, {
          color: "$white-60",
          name: "alert_12"
        });
      }

      return null;
    };

    var leftSection = isOverview ? React.createElement(Avatar, {
      isOverview: true,
      icon: React.createElement(Icon, {
        name: "handset_24"
      })
    }) : childrenLeft;
    var rightSection = React.createElement(ListItemSection, {
      key: "child-2",
      position: "right"
    }, childrenRight ? childrenRight : getIcon());

    var highlightSubheader = function highlightSubheader() {
      var re = new RegExp("(" + searchTerm + ")", 'gi');
      return searchTerm && typeof subheader === 'string' ? subheader.split(re).map(function (ele, idx) {
        return ele.match(re) ? React.createElement("span", {
          key: "subheader-" + idx,
          className: "cui-list-item__subheader--highlight",
          style: {
            color: highlightColor
          }
        }, ele) : ele;
      }) : subheader;
    };

    var highlightHeader = function highlightHeader() {
      var re = new RegExp("(" + searchTerm + ")", 'gi');
      return searchTerm && typeof header === 'string' ? header.split(re).map(function (ele, idx) {
        return ele.match(re) ? React.createElement("span", {
          key: "header-" + idx,
          className: "cui-list-item__header--highlight",
          style: {
            color: highlightColor
          }
        }, ele) : ele;
      }) : header;
    };

    var getHeader = ['search', 'filter', 'flag', 'filter-search'].includes(type) ? [React.createElement("span", {
      key: "header-0",
      className: "cui-list-item__header-main"
    }, header), headerSecondary && React.createElement("span", {
      className: "cui-list-item__header-secondary",
      key: "header-1"
    }, headerSecondary)] : highlightHeader();
    var children = [React.createElement(ListItemSection, {
      key: "child-0",
      position: "left"
    }, leftSection || React.createElement(Avatar, {
      title: "NA"
    })), React.createElement(ListItemSection, {
      key: "child-1",
      position: "center"
    }, React.createElement("div", {
      className: 'cui-list-item__header' + ("" + ((searchTerm || isOverview) && " cui-list-item__header--overview" || ''))
    }, getHeader), ['search', 'filter', 'flag', 'filter-search'].includes(type) ? React.createElement(ListItemSection, {
      position: "center",
      className: "cui-list-item__result-container"
    }, ['flag'].includes(type) ? React.createElement(ListItemSection, {
      position: "center",
      key: "attachment-line-1",
      className: "cui-list-item__attachment"
    }, React.createElement("div", {
      className: "cui-list-item__attachment--top"
    }, React.createElement(ListItemSection, {
      position: "center",
      className: "cui-list-item__attachment--top-left"
    }, highlightSubheader(subheader)), resultRight && React.createElement(ListItemSection, {
      position: "right",
      className: "cui-list-item__attachment--top-right"
    }, resultRight)), attachments && attachments.length && React.createElement("div", {
      className: "cui-list-item__attachment--bottom"
    }, attachments[0])) : React.createElement("div", {
      className: "cui-list-item__result"
    }, highlightSubheader(subheader))) : React.createElement("div", {
      className: "cui-list-item__subheader"
    }, subheader))].concat(!type ? [rightSection] : []);
    return React.createElement(ListItem, _extends({
      className: "" + (isBold && " cui-list-item--unread" || '') + ("" + (type && " cui-list-item--space-" + type || '')) + ("" + (className && " " + className || '')),
      id: id,
      title: getTitle,
      type: "space"
    }, props), children);
  };

  return SpaceListItem;
}(React.PureComponent);

SpaceListItem.displayName = 'SpaceListItem';
SpaceListItem.defaultProps = {
  attachments: null,
  className: '',
  childrenLeft: null,
  childrenRight: null,
  headerSecondary: '',
  highlightColor: '',
  id: '',
  isAlertOn: false,
  isBold: false,
  isOverview: false,
  isMentioned: false,
  isMuted: false,
  isUnread: false,
  resultRight: null,
  subheader: '',
  type: ''
};
SpaceListItem.propTypes = {
  /** ListItem Attachment Array */
  attachments: PropTypes.arrayOf(PropTypes.node),

  /** HTML Class for associated input */
  className: PropTypes.string,

  /** Children for left section */
  childrenLeft: PropTypes.node,

  /** Children for right section */
  childrenRight: PropTypes.node,

  /** ListItem header */
  header: PropTypes.node.isRequired,

  /** Secondary Header for center Section */
  headerSecondary: PropTypes.string,

  /** Highlight Color for Regex */
  highlightColor: PropTypes.string,

  /** HTML ID for associated input */
  id: PropTypes.string,

  /** SpaceListItem Boolean */
  isAlertOn: PropTypes.bool,

  /** SpaceListItem Boolean */
  isBold: PropTypes.bool,

  /** SpaceListItem Boolean */
  isOverview: PropTypes.bool,

  /** SpaceListItem Boolean */
  isMentioned: PropTypes.bool,

  /** SpaceListItem Boolean */
  isUnread: PropTypes.bool,

  /** SpaceListItem Boolean */
  isMuted: PropTypes.bool,

  /** Children for result right section */
  resultRight: PropTypes.node,

  /** ListItem searchTerm */
  searchTerm: PropTypes.string,

  /** ListItem subheader */
  subheader: PropTypes.node,

  /** ListItem title */
  title: PropTypes.string,

  /** ListItem type */
  type: PropTypes.oneOf(['', 'search', 'filter-summary', 'filter', 'flag', 'filter-search'])
};
export default SpaceListItem;
/**
* @name Space List
*
* @category containers
* @component list-item
* @section space
*
* @js
*
import { List, SpaceListItem, ListItemHeader, Icon } from '@collab-ui/react';
import { NavLink } from 'react-router-dom';

export default class SpaceListExamples extends React.PureComponent {

  render() {
    const anchorNode = <NavLink to='/containers/list-item' />;
    return(
      <div className="medium-4 columns">
        <List style={{backgroundColor: 'black'}}>
          <SpaceListItem isOverview header='Overview Item' />
          <SpaceListItem header='Header Only'/>
          <SpaceListItem header='Bold Unread' isBold isUnread/>
          <SpaceListItem header='Bold Mentioned' isBold isMentioned/>
          <SpaceListItem header='isAlertOn' isAlertOn/>
          <SpaceListItem header='isMuted' isMuted/>
          <SpaceListItem header='Disabled' subheader='subheader' disabled/>
          <SpaceListItem header='Subheader as Node' subheader={<span style={{color: '#98D5CA'}}>Marketing</span>}/>
          <ListItemHeader header='List Header-Type(space)' children={<a>More</a>} type='space'/>
          <SpaceListItem header='Header with SearchTerm' searchTerm='search'/>
          <SpaceListItem header='Both Headers w/ SearchTerm' subheader='Searchable subheader' searchTerm='search'/>
          <SpaceListItem header='Subheader(node)-searchTerm' subheader={<span style={{color: '#D7ABE1'}}>Searching</span>} searchTerm='search'/>
          <SpaceListItem header='Type(search)' headerSecondary='16:00' subheader='HighlightColor changes search color' searchTerm='search' type='search' highlightColor='white'/>
          <SpaceListItem header='Type(filter)' headerSecondary='12/03/2018' subheader='headerSecondary=string' searchTerm='Barbara' type='filter' />
          <SpaceListItem header='Type(filter-search)' headerSecondary='12/03/2018' subheader='For search after a filter' type='filter-search' searchTerm='filter'/>
          <SpaceListItem header='Type(filter-summary) (8)' type='filter-summary' childrenLeft={<Icon name='alert_12' />}/>
          <SpaceListItem header='Type(flag)-attachments' attachments={[<span><Icon name='document_12' />  <span>Ideas.pdf</span></span>]} subheader='resultRight=node, attachments=[node]' headerSecondary='12/03/2018' type='flag' resultRight={<Icon name='flag-active_12'/>}/>
          <SpaceListItem header='Type(flag)' subheader='header&subheader=node' headerSecondary='08/03/2018' type='flag' resultRight={<Icon name='flag-active_12'/>}/>
        </List>
      </div>
    );
  }
}
**/