apeman-react-photo/lib/ap_photo.jsx

/**
 * Photo component.
 * @class ApPhoto
 */

'use strict'

import React, {PropTypes as types} from 'react'
import classnames from 'classnames'
import {ApImage} from 'apeman-react-image'
import {ApTouchable} from 'apeman-react-touchable'

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

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

  propTypes: {
    /** Image source URL */
    imgSrc: types.string.isRequired,
    /** Image width */
    imgWidth: types.number,
    /** Image height */
    imgHeight: types.number,
    /** Image scale policy */
    imgScale: types.string,
    /** Handler for tap event */
    onTap: types.func
  },

  mixins: [],

  statics: {},

  getInitialState () {
    return {}
  },

  getDefaultProps () {
    return {
      imgSrc: null,
      imgWidth: 256,
      imgHeight: 128,
      imgScale: 'fit',
      onTap: null
    }
  },

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

    let { imgWidth, imgHeight } = props

    let className = classnames('ap-photo', {
      'ap-photo-tappable': s.isTappable()
    }, props.className)
    return (
      <div className={ className }
           style={ Object.assign({}, props.style) }>
        <ApTouchable onTap={ s.handleTap }>
          <div>
            <ApImage src={ props.imgSrc }
                     width={ imgWidth }
                     height={ imgHeight }
                     scale={ props.imgScale }
            />
            { props.children }
          </div>
        </ApTouchable>
      </div>
    )
  },

  // --------------------
  // Lifecycle
  // --------------------

  // ------------------
  // Helper
  // ------------------

  handleTap (e) {
    const s = this
    let { props } = s
    if (!s.isTappable()) {
      return
    }
    if (props.onTap) {
      props.onTap(e)
    }
  },

  isTappable () {
    const s = this
    let { props } = s
    return !!props.onTap
  }

  // ------------------
  // Private
  // ------------------
})

export default ApPhoto