apeman-react-list/lib/ap_list_item.jsx

apeman react package for list component.

/**
 * List item component.
 * @class ApListItem
 */

'use strict'

import React, { PropTypes as types, Component } from 'react'
import classnames from 'classnames'
import { withTouch } from 'apeman-react-touchable'
import ApListItemIcon from './ap_list_item_icon'
import ApListItemImage from './ap_list_item_image'
import ApListItemText from './ap_list_item_text'
import ApListItemArrowIcon from './ap_list_item_arrow_icon'

const sizeString = (size) => isNaN(Number(size)) ? size : `${size}px`

/** @lends ApListItem */
class ApListItem extends Component {
  render () {
    const s = this
    let { props } = s

    let className = classnames('ap-list-item', props.className, {
      'ap-list-item-tappable': props.hasTouch
    })

    return (
      <li className={ className }
      >
        <a className='ap-list-item-inner'
           href={ props.href }
           onClick={ (e) => e.preventDefault() }
        >
          <span className='ap-list-item-aligner'>&nbsp;</span>
          {
            props.imgSrc ? (
                <ApListItemImage className='ap-list-item-sumbnail-image'
                                 src={ props.imgSrc }
                                 alt={ props.imgAlt }
                                 height={ props.imgHeight }
                                 width={ props.imgWidth }/>
              ) : null
          }
          {
            props.title ? (
                <ApListItemText className='ap-list-item-title-wrap'>
                  <span className='ap-list-item-title'>{ props.title }</span>
                  <span className='ap-list-item-sub-title'>{ props.subTitle }</span>
                </ApListItemText>
              ) : null
          }
          { props.children }
          {
            props.icon ? (
                <ApListItemIcon className={ props.icon }/>
              ) : null
          }
          {
            props.disclosure ? (
                <ApListItemArrowIcon className='ap-list-item-disclosure-icon'/>
              ) : null
          }
          {
            props.alt ? (
                <div className='ap-list-item-alt'>{ props.alt }</div>
              ) : null
          }
        </a>
      </li>
    )
  }
}

Object.assign(ApListItem, {
  // --------------------
  // Specs
  // --------------------

  propTypes: {
    disclosure: types.bool,
    imgSrc: types.string,
    imgAlt: types.string,
    imgWidth: types.oneOfType([ types.number, types.string ]),
    imgHeight: types.oneOfType([ types.number, types.string ]),
    /** Title of item */
    title: types.node,
    /** Sub title of item */
    subTitle: types.node,
    /** Custom icon class */
    icon: types.string,
    /** Data for events */
    data: types.object,
    /** Alt text */
    alt: types.string
  },

  defaultProps: {
    disclosure: false,
    imgSrc: null,
    imgAlt: null,
    imgWidth: 72,
    imgHeight: 48,
    title: null,
    subTitle: null,
    data: null
  }
})

export { ApListItem }
export default withTouch(ApListItem, {
  getTouchData () {
    const s = this
    let { props } = s
    return props.data
  }
})