apeman-react-jumbotron/lib/ap_jumbotron.jsx

apeman react components for jumbotron

/**
 * apeman react components for jumbotron
 * @class ApJumbotron
 */

'use strict'

import React, {PropTypes as types} from 'react'
import ReactDOM from 'react-dom'
import {ApImage} from 'apeman-react-image'
import {ApLayoutMixin} from 'apeman-react-mixin-layout'
import classnames from 'classnames'

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

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

  propTypes: {
    /** Source url of image */
    imgSrc: types.string,
    /** Alt text for image */
    imgAlt: types.string,
    /** Image overlay color */
    imgFilter: types.string
  },

  mixins: [
    ApLayoutMixin
  ],

  statics: {},

  getInitialState () {
    return {
      imgReady: false
    }
  },

  getDefaultProps () {
    return {
      imgSrc: null,
      imgAlt: '',
      imgFilter: null
    }
  },

  render () {
    const s = this
    let { state, props, layouts } = s

    return (
      <div className={ classnames('ap-jumbotron', props.className) }
           style={ Object.assign({}, props.style) }>
        <div className="ap-jumbotron-img-container">
          <ApImage src={ props.imgSrc }
                   alt={ props.imgAlt }
                   width={ layouts.image.width }
                   height={ layouts.image.height }
                   onLoad={ s.handleImgLoad }
                   onError={ s.handleImgError }
                   scale="fill"
                   className={ classnames('ap-jumbotron-img', {
                                'ap-jumbotron-img-ready': state.imgReady
                             }) }/>
          <div className="ap-jumbotron-filter"
               style={ {
                            backgroundColor: props.imgFilter
                        } }></div>
        </div>
        <div className="ap-jumbotron-inner">
          { props.children }
        </div>
      </div>
    )
  },

  // --------------------
  // For ApLayoutMixin
  // --------------------

  getInitialLayouts () {
    return {
      image: {}
    }
  },

  calcLayouts () {
    const s = this
    let node = ReactDOM.findDOMNode(s)
    let rect = node.getBoundingClientRect()
    return {
      image: {
        width: rect.width,
        height: rect.height
      }
    }
  },

  // --------------------
  // Custom
  // --------------------

  handleImgLoad () {
    const s = this
    s.setState({
      imgReady: true
    })
  },
  handleImgError () {
    const s = this
    s.setState({
      imgReady: false
    })
  }

})

export default ApJumbotron