apeman-react-photo
Version:
apeman react package for photo components.
108 lines (89 loc) • 2.01 kB
JSX
/**
* Photo component.
* @class ApPhoto
*/
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