UNPKG

apeman-react-photo

Version:
108 lines (89 loc) 2.01 kB
/** * 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