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} from 'react'
import classnames from 'classnames'
import {ApTouchMixin} from 'apeman-react-mixin-touch'
import ApListItemImage from './ap_list_item_image'
import ApListItemText from './ap_list_item_text'
import ApListItemArrowIcon from './ap_list_item_arrow_icon'

/** @lends ApListItem */
const ApListItem = React.createClass({

  // --------------------
  // Specs
  // --------------------

  propTypes: {
    disclosure: types.bool,
    imgSrc: types.string,
    imgAlt: types.string,
    imgWidth: types.number,
    /** Titlte of item */
    title: types.string,
    /** Sub titlte of item */
    subTitle: types.string,
    /** Item height */
    height: types.number,
    /** Data for events */
    data: types.object
  },

  mixins: [
    ApTouchMixin
  ],

  statics: {},

  getInitialState () {
    return {}
  },

  getDefaultProps () {
    return {
      disclosure: false,
      imgSrc: null,
      imgAlt: null,
      imgWidth: 72,
      title: null,
      subTitle: null,
      height: 48,
      data: null
    }
  },

  render () {
    const s = this
    let { props } = s

    let tappable = !!props.onTap
    let height = props.height
    let className = classnames('ap-list-item', props.className, {
      'ap-list-item-tappable': tappable
    })
    let style = Object.assign({
      height: `${height}px`,
      lineHeight: `${height}px`
    }, props.style)
    return (
      <li className={ className }
          style={ style }>
        <div className="ap-list-item-inner">
          <span className="ap-list-item-aligner">&nbsp;</span>
          { s._renderImage(props.imgSrc, props.imgAlt, props.imgWidth) }
          { s._renderTitle(props.title, props.subTitle) }
          { props.children }
          { s._renderDisclosureIcon(props.disclosure) }
        </div>
      </li>
    )
  },

  // --------------------
  // For ApTouchMixin
  // --------------------
  getTouchData () {
    const s = this
    let { props } = s
    return props.data
  },

  // --------------------
  // Private
  // --------------------

  _renderDisclosureIcon (disclosure) {
    const s = this
    let { props } = s
    if (!disclosure) {
      return null
    }
    let style = {
      lineHeight: `${props.height}px`
    }
    return (
      <ApListItemArrowIcon className="ap-list-item-disclosure-icon"
                           style={ style }/>
    )
  },

  _renderImage(imgSrc, imgAlt, imgWidth) {
    const s = this
    let { props } = s
    if (imgSrc === null) {
      return null
    }
    return (
      <ApListItemImage className="ap-list-item-sumbnail-image"
                       src={ imgSrc }
                       alt={ imgAlt }
                       height={ props.height }
                       width={ imgWidth }/>
    )
  },

  _renderTitle (title, subTitle) {
    const s = this
    let { props } = s
    if (title === null) {
      return
    }
    return (
      <ApListItemText className="ap-list-item-title-wrap">
        <span className="ap-list-item-title">{ title }</span>
        <span className="ap-list-item-sub-title">{ subTitle }</span>
      </ApListItemText>
    )
  }
})

export default ApListItem