apeman-react-photo/lib/ap_paper_photo.jsx

apeman react package for photo components.

/**
 * @class ApPaperPhoto
 */

'use strict'

import React, {PropTypes as types} from 'react'
import classnames from 'classnames'
import ApPhoto from './ap_photo'
import {ApPureMixin} from 'apeman-react-mixin-pure'

/** @lends ApPaperPhoto */
const ApPaperPhoto = 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: [
    ApPureMixin
  ],

  statics: {},

  getInitialState () {
    return {}
  },

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

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

    let { imgWidth, imgHeight } = props

    return (
      <ApPhoto className={ classnames('ap-paper-photo', props.className)}
               imgSrc={ props.imgSrc }
               imgWidth={ imgWidth }
               imgHeight={ imgHeight }
               imgScale={ props.imgScale }
               onTap={ props.onTap }>
        <div className="ap-paper-photo-shadow ap-paper-photo-shadow-left"/>
        <div className="ap-paper-photo-shadow ap-paper-photo-shadow-right"/>
        <div className="ap-paper-photo-text">
          { props.children }
        </div>
      </ApPhoto>
    )
  }
})

export default ApPaperPhoto