import React from 'react';
import classnames from 'classnames';

function ListItem({ children, onClick, active }) {
  const className = classnames('ui-list-item', {
    'ui-list-item-with-onclick': !!onClick,
    'ui-list-item-active': active,
  });

  return (
    <div className={className} onClick={onClick}>
      {children}
    </div>
  );
}

ListItem.propTypes = {
  children: React.PropTypes.node,
  onClick: React.PropTypes.func,
  active: React.PropTypes.bool,
};

export default ListItem;

@@ -61,193 +61,749 @@
 s';%0A
-%0Afunction ListItem(%7B children, onClick, active %7D) %7B%0A  const className = classnames('ui-list-item', %7B%0A    'ui-list-item-with-onclick': !!onClick,%0A    'ui-list-item-active': active,%0A  %7D);
+import %7B Media, MediaContent, MediaIcon %7D from '../Media';%0Aimport %7B Thumbnail %7D from '../Thumbnail';%0A%0Afunction ListItem(props) %7B%0A  const %7B%0A    active,%0A    children,%0A    compact,%0A    imageSrc,%0A    imageWidth,%0A    onClick,%0A  %7D = props;%0A%0A  const className = classnames('ui-list-item', %7B%0A    'ui-list-item-with-onclick': !!onClick,%0A    'ui-list-item-active': active,%0A    'ui-list-item-compact': compact,%0A  %7D);%0A%0A  function renderContent() %7B%0A    if (imageSrc) %7B%0A      return (%0A        %3CMedia compact=%7Bcompact%7D%3E%0A          %3CMediaIcon%3E%0A            %3CThumbnail src=%7BimageSrc%7D width=%7BimageWidth%7D /%3E%0A          %3C/MediaIcon%3E%0A          %3CMediaContent%3E%0A            %7Bchildren%7D%0A          %3C/MediaContent%3E%0A        %3C/Media%3E%0A      );%0A    %7D%0A%0A    return children;%0A  %7D
 %0A%0A  
@@ -864,32 +864,39 @@
 ck%7D%3E%0A      %7B
-children
+renderContent()
 %7D%0A    %3C/div%3E
@@ -1025,16 +1025,373 @@
 es.bool,
+%0A%0A  // Renders a compact mode%0A  compact: React.PropTypes.bool,%0A%0A  // If an image is provided it is inserted as media icon%0A  imageSrc: React.PropTypes.string,%0A%0A  // Image with in pixel%0A  imageWidth: React.PropTypes.number,%0A%7D;%0A%0AListItem.defaultProps = %7B%0A  active: false,%0A  children: null,%0A  compact: false,%0A  imageSrc: null,%0A  imageWidth: 40,%0A  onClick: null,
 %0A%7D;%0A%0Aexp

Introduce compact and image props for list item component